Conteúdo do arquivo

<style>
    /* Basic tag settings */  
    body 
    {  
        margin: 0 auto;  
        width: 940px;  
        font: 13px/22px Helvetica, Arial, sans-serif;  
        background: #f0f0f0;  
    }  
  
    h2 
    {  
        font-size: 18px;  
        line-height: 5px;  
        padding: 2px 0;  
    }  
  
    h3 
    {  
        font-size: 12px;  
        line-height: 5px;  
        padding: 2px 0;  
    }  
    
    h1, h2, h3
    {
        text-align: left;
    }
  
    p 
    {  
        padding-bottom: 2px;  
    }  

    .book
    {
        padding: 5px;
    }
    
    /* Content sections */
    .featuredContent
    {
        background-color: #ffffff;
        border: 2px solid #6699cc;
        padding: 15px 15px 15px 15px;
    }

    .otherContent
    {
        background-color: #c0c0c0;
        border: 1px solid #999999;
        padding: 15px 15px 15px 15px;
    }

    aside 
    {  
        background-color: #6699cc;
        padding: 5px 5px 5px 5px;
    } 

    footer
    {  
        margin-top: 12px;
        text-align:center;
        background-color: #ddd;  
    }
    
    footer p
    {
        padding-top: 10px;
    }

    /* Navigation Section */
    nav 
    {  
        left: 0;  
        background-color: #003366;  
    }  

    nav ul 
    {  
        margin: 0;
        list-style: none;  
    }  

    nav ul li 
    {  
        float: left;  
    }  
  
    nav ul li a 
    {  
        display: block;  
        margin-right: 20px;  
        width: 140px;  
        font-size: 14px;  
        line-height: 28px;  
        text-align: center;
        padding-bottom: 2px;
        text-decoration: none;  
        color: #cccccc;  
    }  
  
    nav ul li a:hover 
    {  
        color: #fff;  
    }  
    
    /* Rounded borders */
    .rounded 
    {
        border: 1px solid;
        border-color:#999999;
        border-radius:25px;
        padding: 24px;  
    }

    aside 
    {  
        border: 1px solid #999999;
        border-radius:12px;
    } 

    /* Make the radius half of the height */
    nav 
    {  
        height: 30px; 
        border-radius:15px;
    }  
    
    footer
    {  
        height: 50px; 
        border-radius:25px;
    }
    
    /* Gradients */
    .intro 
    {  
        border: 1px solid #999999;
        text-align:left;
        margin-top: 6px; 
        padding-left: 15px; 
        border-radius:25px;
        background-image: -o-linear-gradient(45deg, #ffffff, #6699cc);
        background-image: -webkit-linear-gradient(45deg, #ffffff, #6699cc);
        background-image: linear-gradient(45deg, #ffffff, #6699cc);
    }

    /* Setup a table for the content and sidebar */
    #contentArea 
    {  
        display: table;  
    }  
  
    #mainContent 
    {  
        display: table-cell;  
        padding-right: 2px;  
    }  
  
    aside 
    {  
        display: table-cell;  
        width: 280px;  
    } 

    /* Setup multiple columns for the articles */
    article div
    {
        text-align:justify;
        padding:6px;
        
        /* Column-count not implemented yet */ 
        -o-column-count: 2; 
        -moz-column-count: 2;  
        -webkit-column-count: 2;  
        column-count: 2;    
        
        /* Column-gap not implemented yet */  
        -o-column-gap: 20px;  
        -moz-column-gap: 20px;  
        -webkit-column-gap: 20px;  
        column-gap: 20px;
    }

    /* Add the box shadow */
    article img
    {
        margin: 10px 0;
        box-shadow: 3px 3px 12px #222; 
    }
    
    .book img
    {
        margin: 10px 0;
        display: block; 
        box-shadow: 2px 2px 5px #444;
        margin-left: auto;
        margin-right: auto;
    }
    
    aside 
    {  
        box-shadow: 3px 3px 3px #aaaaaa;
    } 

    /* Stripe the title list */
    #titles article:nth-child(2n+1) 
    {  
        background: #c0c0c0;  
        border: 1px solid #6699cc;  
        border-radius: 10px; 
    }
    
    #titles article:nth-child(2n+0) 
    {  
        background: #6699cc;  
        border: 1px solid #c0c0c0;  
        border-radius: 10px; 
    }

    /* Transforms - not supported yet */
    .rotateContainer
    {
        -webkit-perspective: 600px;
    }

    .rotate
    {
        
        -webkit-transform-style: preserve-3d;
    }

    /* Animate the moon phases */
    #moon
    {
        width:115px;
        height:115px;
        background-image: url("images/moon1.png");
        background-repeat: no-repeat;
        -webkit-animation-name:moonPhases; 
        -webkit-animation-duration:4s;
        -webkit-animation-delay:3s;
        -webkit-animation-iteration-count:10;
    }

    @@-webkit-keyframes moonPhases 
    {
    0%   {background-image:url("images/moon1.png");}
    12%   {background-image:url("images/moon2.png");}
    25%   {background-image:url("images/moon3.png");}
    37%   {background-image:url("images/moon4.png");}
    50%   {background-image:url("images/moon5.png");}
    62%   {background-image:url("images/moon6.png");}
    75%   {background-image:url("images/moon7.png");}
    87%   {background-image:url("images/moon8.png");}
    100%   {background-image:url("images/moon1.png");}
    }
    
</style>