@charset "UTF-8";
/* CSS Document */
/* Browser reset - Each browser has a default set of conditions within it's rendering engine (eg internet explorer will add an approx 5px to the page body margins) This resets everything to enable you to build from scratch */
html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/* Browser Reset End */


/* These styles are applied to the whole page but can be changed with individual classes or id's   */
body {
	background-color: #cccccc;  /* Changes the main background color */
	margin-left: auto; /* These 2 enable you */
	margin-right: auto; /*  to center the page */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.65em; /* This sets the page font-size to 10px - So from now on 1em = 10px, 1.2em = 12px. This enables browsers not using full page zoom to increase text size in line with the rest of the site */

}

#contentContainer{
	width:960px;  /* Sets the width of the page */
	margin-left:auto;
	margin-right:auto;
}
#innerContainer{
	width:960px;
	float: left;
	display: inline;
}
#mainContainer {
	width:960px;
	float: left;
	padding-left: 0px;
	padding-right:0px;
	background-color:#FFFFFF;
	margin-top: 20px;
	-webkit-box-shadow: 0px 0px 5px #444; /* Webkit css3 property to enable a drop shadow on the entire page */
	-moz-box-shadow: 0px 0px 5px #444;	/* Firefox css3 property to enable a drop shadow on the entire page */
}

/* The three Containers above enable a solid foundation for the placement of floated elements within all browsers */

#header {
	float: left;
	height: 167px;
	width: 956px;  /* Normal width would be 960px but we're adddng a 2px border to highlight areas */
	background-color: #ffffff;
	border: dashed 2px #000000;
}

/* For ease of coding, the menu is produced using unordered lists. Using ul's and li's we take out the normal bullets using list-style-image:none and add other styles to produce the horizontal menu */

#menu {
	width: 956px;
	height: auto;
	background-color: #999999;
	float: left;
	padding: 5px 0;
	margin-bottom: 20px;
	border: dashed 2px #000000;

}

#menu ul {
	list-style: none;
	float: left;
	height: auto;
	width: 960px;
	}

#menu ul li {
	list-style-image: none;
	list-style-type: none;
	padding: 5px 30px 5px 10px;
	float: left;
	width: auto;
	font-size: 1.2em;
	color: #ffffff;
	
}

#menu ul li a {
	text-decoration: none;  /* This takes out the normal link style of underline */
	color: #ffffff;
	}
	
#menu ul li a:hover {
	color: #111111;
	}

/* Below are our main content containers for a two column layout. */

#leftContainer {
	float: left;
	width: 636px;
	margin: 0px 0 0 10px;
	line-height: 1.4em;
	font-size: 1.2em;
	border: dashed 2px #000000;
	height: auto; /* This enables the container to expand with the content */
}

#rightContainer {
	float: left;
	width: 276px;
	margin-left: 20px;
	line-height: 1.4em;
	font-size: 1.2em;
	border: dashed 2px #000000;
	height: auto;
}

h1 {
	font-size: 1.4em;
	line-height: 1.4em;
	margin-bottom: 10px;
}

h2 {
	font-size: 1.3em;
	line-height: 1.4em;
	margin-bottom: 10px;
}

#footer {
	float: left;
	width: 936px;
	height: 100px;
	background-color: #eeeeee;
	margin-top: 20px;
	padding: 20px 10px 20px 10px;
	border: dashed 2px #000000;
}

.footerleft {
	width: 305px;
	float: left;
	height: 60px;
	line-height: 1.4em;
	font-size: 1.1em;
	margin-right: 20px;
	border: dashed 2px #000000;
}

.footerright {
	width: 274px;
	float: right;
	height: 60px;
	line-height: 1.4em;
	font-size: 1.1em;
	border: dashed 2px #000000;
}