/*External style sheet makes its return... :)*/
/* NO changes were made to this style sheet! */

/*Universal selector: styling the box size property to be "border-box"*/
*{ box-sizing: border-box; }

/*Styling elements within the body tag to have a blue background + specific fonts.*/
body 
{ 
    background-color: #00005D;
    font-family: Verdana, Arial, sans-serif; 
}

/* Styling the wrap id so that it has a specific size & minimum size, with a blue background */
#wrapper 
{ 
    margin: 0 auto; 
    width: 80%; 
    min-width: 940px;
    background-color: #B3C7E6; 
    color: #000066; 
}

/*Styling the header so that it has a blue background (another blue background...), image formatting, font size, and padding*/
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); 
}

/* Styling the entire nav element so that it has bold text, a certain width (150px), leftwards positioning, and the specified letter spacing*/
nav 
{ 
    float: right; 
    width: 150px; 
    font-weight: bold;
    letter-spacing: 0.1em; 
}

/* Configuring the ul elements within the nav with some padding & margins, alongside making them have no list markers (bullet points). */
nav ul 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

/* Styling the "link text" or anchor tags to have no underline, some padding, and a white 1-pixel boarder. */
/* The "display:block" part essentially functions as a way of making each clickable link a button; you can
    click anywhere within the given box for the link to use it! */
nav a 
{ 
    text-decoration: none; 
    padding: 20px; 
    display: block;
    background-color: #B3C7E6;
    border-bottom: 1px solid #FFFFFF; 
}

/* Pseudo-classes again: basically changing the color of the link when it is used, hovered over, and not touched at all. */
/* Not the hover changes the background cover as if you're selecting a button. Fancy! */

nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }

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

/*Styling the main element so that it has a white background with black text, padding, "auto overflow", and an internet explorer 11 fix...*/
main 
{ 
    background-color: #FFFFFF; 
    color: #000000;
    padding: 10px 20px; 
    overflow: auto; 
    display: block; 
}

/*Footer styling: styling the footer so that it has a smaller font size, another blue background, padding, and "clear: both".*/
footer 
{ 
    font-size: 70%; 
    text-align: center;
    padding: 10px;
    background-color: #869DC7; 
    clear: both; 
}

/*Changing the header color to a blueish color and change the font style*/
h2 
{ 
    color: #869DC7;
    font-family: Arial, sans-serif; 
}

/* Configuring the float right id so that when used, there is a 10px margin + contents are right-oriented within their container.*/
#floatright 
{ 
    float: right; 
    margin: 10px; 
}