/* CSS Document */

.outsideDIV {
	width: 800px; /* Set the main content width to 800px */
	background:#7291B9;
	border:1px solid #000;
	margin-left:auto; /* Set left margin to auto */
	margin-right:auto; /* Set right margin to auto */
	/* By placing all the main content inside the outsideDIV, giving it a set width of 800px and auto left/right margins it effectly places the main content at a fixed width in the centre of the page. This fixed width must be below the width of the average users resolution so the website can be viewed at different resolutions */
}

body {
	margin: 0; padding: 0; /* Set the margin & padding to zero so there is no space around the outside of the design */
	background: #999; /* Set the body background (outside background) to a light grey */ 
	font: smaller "Trebuchet MS", Arial, sans-serif; /* Set the body font to smaller & choose Trebuchet MS font as default, if Trebuchet MS not available choose Arial, if Arial not available choose a sans-serif font */
}

a {
	text-decoration: none; /* By default any hyperlink will have an underline, here I am setting the hyperlink font to have no underline */
}



/* ------------------------------ pageHeader styles ------------------------------ */


#pageHeader {
	background: #999; /* Set the Page header background to a light blue */
}





/* ------------------------------- navlinks styles ------------------------------- */


#navlinks {
	position: absolute;
	width: 150px;
	margin: 0; padding: 2em 3em; 
	background: #7291B9; color: #FFF;
}

#navlinks li {
	margin-bottom: 1em;
	font-weight: bold; /* Set the Navlinks Bold */ 
}
 
#navlinks a{
	color: #000; /* Set the text colour of the navlinks to black */
}

#navlinks a:hover{
	color: #FFF; /* Set the text colour of the navlinks to change from black to white when hovered upon to give a visual hint to the user that they are hovering over a hyperlink */
}




#content {
	position: absolute;
	width: 667px;
	left: 231px;
	background: #ccc;
	margin: 0;
	padding: 2em 3em;
	overflow: scroll;
	top: 191px;
	height: 510px;
}



#footer {
	clear:both; /* Clears the footer below the floated content and sidebar */
	padding: 0em 3em; /* Set top/bottom padding to 0.8em to give background space, Set left right padding to 3em to match the content and navbar */ 
	background: url(images/footer-bg.png) top left repeat;/* Set footer background to dark blue */
	height: 30px;
}

#footer p {
	color: #ccc; /* Set footer text to black */
	margin: 0; /* Remove the top/bottom margins to centre the footer text within the footer background */
	padding: 0.5em 0 0 0;
}

#footer a {
	color: #ccc; /* Set footer hyperlink colour to white, design looks better this way */
	text-decoration: underline; /* Set footer hyperlink to have and underline so the user still knows its a hyperlink */
}