/* GLOBAL STYLES ----------------------------------------------- */

body {
	color: #333; /* Sets the tiled background image for the page */
	font: 100% Verdana, Arial, Helvetica, sans-serif; /* 'Font' is the shorthand property for grouping a series of font properties together. Here it is setting the font to 100% of the browser default and to a sans serif group of font-families. */
	background: #012258; /* Sets the background colour of the page to a dark teal colour. */
	margin: 0; /* Resets the margins of the page to 0, over writing the values that a browser style sheet might impose. */
	padding: 0; /* Resets the padding of the page to 0. */
}

/* CONTAINER -------------------------------------------------- */

#container {
	width: 780px; /* Constrains the layout to a width of 780 pixels.  */
	margin: 0 auto; /* The auto value centers the layout in the browser */
	background: #FFF url(../assets/images/container_bg.jpg) repeat-y; /* Sets the container colour to white and tiles an image on the y, or vertical, axis of the layout. */
}

/* SIDEBAR -------------------------------------------------- */

#sidebar {
	float: left; /* Moves the div to the left side of its container and allows the mainContent div to sit on its right. */
	width: 180px; /* Sets the width of the sidebar to 180, thus allowing a 10 pixel margin on either side as it sits over the 200 pixel container background image. */
	display: inline; /* This is a fix to prevent the double-float margin bug. */
	margin-top: 20px; /* Places 20 pixels of margin over the sidebar to push it away from the header. */
	margin-left: 10px; /* Places 10 pixels of left margin to push the layout away from the left edge of the layout. */
	
}

/* NAV -------------------------------------------------- */

#nav ul {
	padding: 0; /* Zeros out the padding on the list */
	margin: 0; /* Zeros out the browser applied margin on the list. */
}

#nav li {
  font-size: 85%; /* Sets the font size of links to 85% of the user's browser preferences */
  list-style: none; /* Removes the bullet from list items */
} 

#nav a {
	display: block; /* Forces links to expand to fill their entire container, making the entire button area clickable instead of just the text. */
	margin-bottom: 5px; /* Puts space between buttons. */
	text-align: center; /* Centers the button text */
	padding-top: 5px; /* Puts space between the link and the top edge of the button */
	padding-bottom: 5px; /* Puts space between the link and the top edge of the button */
	width: 178px; /* Sets the width of the buttons to 178 pixels. This leaves 2 pixels for the one pixel borders on either side. The buttons total 180, which is equal to the sidebar width. */
	border: 1px solid #666; /* Sets a 1 pixel, solid, gray border around each button. */
} 

#nav a:link, #nav a:visited {
	color: #666; /* Sets the text color of links and visited links. */
	text-decoration: none; /* Removes the underline from links. */
	background: #fff;
} 
#nav a:hover, #nav a:focus , #nav a:active{
	background: #256299; /* Sets the background colour for the links */
	color: #fff; /* Sets the text colour of each hovered button to white. */
} 


/* SIDE CONTENT ---------------------------------------------- */

.sideContent {
	border: 1px solid #666; /* Adds a 1 pixel, solid, light gray border around the div */
	margin-top: 10px; /* Adds 5 pixels of space between it and the div above it */
	margin-bottom: 5px; /* Places 5 pixels of space under the sideContent pod so that it doesn't touch the footer when it's the longest column. */
	width: 178px; /* Sets the background colour of the sideContent to white, which is a nice effect as it sits on top of the container background image. */
	background-color: #fff;
	background-image: url(../assets/images/container_bg.jpg);
}

.sideContent h3 {
	font-size: 90%; /* Sets the h3 text to 90% of the browser default. */
	color: #1A5089; /* Sets the colour of the h3 text. */
	margin-left: 5px; /* Adds 5 pixels of space to the left side of the h3 text. */
	margin-bottom: 0px; /* Zeros out the space beneath the h3 text that browser style sheets add by default. */
}

.sideContent p {
	font-size: 80%; /* Sets the size of paragraphs in the sideContent region to 80% of the browser default. */
	margin: 5px; /* Adds 5 pixels of margin space all around the paragraphs in the sideContent region. */
}

/* CONTENT -------------------------------------------------- */

#mainContent {
	margin-top: 0; /* Sets the margins of the mainContent div to 0 for top and bottom, 10 pixels for right, and 220 pixels for the left. The large left margin gives room for the sidebar to sit comfortable on the left side of the layout. */
	margin-bottom: 0;
	margin-right: 10px;
	margin-left: 220px;
	background-image: url(../assets/images/background.png);
}

#mainContent h1 {
	font-size: 130%; /* Sets the font size to 110% of the user's browser preference */
	margin-top: 0; /* Removes all margin space above the content h1 */
	color: #1A5089; /* Sets the font colour. */
	padding-top: 20px; /*With the margin space removed to avoid margin collapsing, the padding returns some space over the h1 text in the mainContent div. */
	font-family: Georgia, "Times New Roman", Times, serif; /* Sets the h1 text to a serif font to give contrast to the sans serif body text. */
}
#mainContent h2 {
	font-size: 110%; /* Sets the size of the h2 text to 110% of the browser default. */
	color: #1A5089; /* Sets the colour of the h2 text. */
	font-family: Georgia, "Times New Roman", Times, serif; /* Sets the h2 text to a series of serif font-families. */
}

#mainContent p {
	font-size: 85%; /* Adds space or "leading" between lines of text */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	text-align: left;
}

#mainContent li {
	font-size: 85%; /* Sets the font size to 80% of the user's browser preference */
	list-style: square; /* Changes bullets to the square style. */
	font-family: Georgia, "Times New Roman", Times, serif;
}

/* FOOTER -------------------------------------------------- */

#footer {
	background: #0C3F7A url(../assets/images/footer_bg.jpg) repeat-x;
	padding: 7px; /* Sets 7 pixels of padding all around the footer. */
	color: #fff; /* Sets the text colour of the footer */
}

#footer ul {
	text-align: center;  /* Centers all the text in the footer div */
	margin: 0; /* Resets the margins on the footer list to 0. */
	padding: 0; /* Resets the padding on the footer list to 0. */
	}

#footer li {
	display: inline;  /* Changes the list items from block to inline elements */
	}

#footer a:link, #footer a:visited {
	font-size: 80%; /* Sets the font size to 80% of the user's browser preference, */
	color: #fff; /* Sets the text colour of the links to white. */
	margin-right: 5px; /* Adds 5 pixels of space to the right of each link. */
	margin-left: 5px; /* Adds 5 pixels of space to the left of each link. */
}
	
#footer a:hover, #footer a:focus, #footer a:active {
	color: #124680; /* Sets the text colour */
	background: #fff; /* Sets the background colour */
	text-decoration: none; /* Removes the underlines from links */
}

/* CLASSES -------------------------------------------------- */

.fltlft {
	float: left; /* Moves the image to the left side of its container and allows text to flow around its right side. */
	margin-right: 8px; /* Puts a border around the image */
}

.fltrt {
	float: right; /* Moves the image to the right side of its container and allows text to flow around its left side. */
	margin-left: 8px; /* Adds 8 pixels of space to the left of the image so that it does not touch the text */
}

.clearfloat {
	font-size: 1px; /* Sets the font size to 1 pixel */
	line-height: 0; /* Sets line-height to 0 -font and line-height, even if not explicitly on the page, might add diemnsion to the clearing element rather than make it larely invisible */
	clear: both; /* Keeps floated divs from draping over objects beneath them. */
	height: 0; /* Makes sure the clearing element has no height */
}
.center {
	text-align: center; /* This generic class can be used to center block elements. */
}