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

body {
	color: #333; /* Sets the tiled background image for the page */
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #DDF2f2;
	margin: 0;
	padding: 0;
}

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

#container {
	width: 780px; /* Sets a 1 pixel, solid, black border around the layout */
	margin: 0 auto; /* The auto value centers the layout in the browser */
	background: #FFFFFF url(assets/images/container_bg.jpg) repeat-y;
}

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

#sidebar {
	float: left; /* Moves div to the left side of its container and allows content div to sit on its right. */
	width: 180px;
	display: inline;
	margin-top: 20px;
	margin-left: 10px;
}

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

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

#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: 98%;
	border: solid 1px #999;
} 

#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:active {
	background: #256299; /* Sets the background colour for the links */
	color: #FFF;
} 


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

.sideContent {
	border: 1px solid #999; /* 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;
	width: 98%; /* Sets the div width to 163, allowing 2 pixels for the borders on either side */
	background: #FFF;
}

.sideContent h3 {
	font-size: 90%;
	color: #0C3F7A;
	margin-left: 5px;
	margin-bottom: 0px;
	font-weight: normal;
}

.sideContent p {
	font-size: 75%;
	margin: 5px;
}

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

#content {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 10px;
	margin-left: 220px;
	font-family: Verdana, Geneva, sans-serif;
}

#content h1 {
	font-size: 130%; /* Sets the font size to 110% of the user's browser preference */
	margin-top: 0px; /* Removes all margin space above the content h1 */
	color: #1A5089;
	padding-top: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#content h2 {
	font-size: 110%;
	color: #FFF;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#content p {
  font-size: 85%; /* Sets the font size to 85% of the user's browser preference */
  line-height: 1.5; /* Adds space or "leading" between lines of text */
}

#content li {
  font-size: 85%; /* Sets the font size to 80% of the user's browser preference */
}

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

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

#footer ul {
  text-align: center;  /* Centers all the text in the footer div */
  margin: 5px 0px; /* Adds 5 pixels of space above and below the footer list, and 0 pixels of space to the right and left of the list */
	}

#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: #FFFFFF; /* Sets the text colour of the links */
	margin-right: 5px;
}
	
#footer a:hover, #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: 0px; /* 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: 0px; /* Makes sure the clearing element has no height */
	font-family: Verdana, Geneva, sans-serif;
}
.center {
	text-align: center;
}
red highlight {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #C00;
	font-size: 18px;
}
.redtable {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	color: #C00;
}

table {
	font-size: small;
	font-family: Verdana, Geneva, sans-serif;
}