/*  ---------------------------------- Chapter 7 Hands-on 7.9 -------------------------  */
/* This here is the stylesheet for hands on 7.9. It's basically organizing the page into */ 
/* columns!                                                                              */

/* NOTE: I don't put much comments since nothing is really "new"                         */

*{

    box-sizing: border-box;
    
}


body
{

    background-color: #00005D;
    font-family: Verdana, Arial, sans-serif;

}


#wrapper
{

    margin: 0 auto;
    width: 80%;
    min-width: 940px;
    background-color: #B3C7E6;
    color: #000066;

}


header
{

    background-color: #869DC7;
    color: #00005D;
    font-size: 150%;
    padding: 10px 10px 10px 155px;
    height: 150px;
    background-repeat: no-repeat;
    background-image: url(lighthouselogo.jpg);

}


nav
{

    float: right;
    width: 150px;
    font-weight: bold;
    letter-spacing: 0.1em;

}


/* "overflow" attribute is another way of disabling/reverting a float (like "clear")     */
/* "display:block" makes the element start on a new line, and span as far as it can go   */
/* from left to right.                                                                   */


main
{

    background-color: #FFFFFF;
    color: #000000;
    padding: 10px 20px;
    overflow: auto;
    display: block;

}


footer
{

    font-size:70%;
    text-align: center;
    padding: 10px;
    background-color: #869DC7;
    clear: both;

}


h2
{

    color: #869DC7;
    font-family: arial, sans-serif;

}


#floatright
{

    float: right;
    margin: 10px;

}


nav ul
{

    list-style-type: none;
    margin: 0;
    padding: 0;

}


nav a
{

    text-decoration: none;
    padding: 20px;
    display: block;
    background-color:#B3C7E6;
    border-bottom: 1px solid #FFFFFF;
    
/*This here is using the the lighthouse sprite sheet to display a lighthouse image as the*/
/*background to the navigation section's. It uses the first image in the sprite sheet by */
/*adjusting the position of the image within the navigation to start at the top and to   */
/* the right.                                                                            */
/* -see lower example for better explenation                                             */

    background-image: url(sprites.gif);
    background-repeat: no-repeat;
    background-position: right 0;

}


nav a:link 
{

    color: #FFFFFF; 

}


nav a:visited 
{

    color: #EAEAEA; 

}


nav a:hover 
{ 
    
    color: #869DC7;
    background-color: #EAEAEA; 

/*Similiar to the above, using the "background-position" attribute to use the second image*/
/*that is on the sprite sheet.*/
/* -"right" configures the lighthouse image to display to the right of the navigation element*/
/* -"-100px" configures a display offset of 100 pixels down from the top of the image. The   */
/*   result is that it will use the second image on the sprite sheet!                        */

    background-position: right -100px;

}