body {/* set everything to zero for a good cross-browser starting point */
	margin: 0;/*zeroes the margins on the body*/
	padding: 0;/*zeroes the padding on the body ** Opera carries a default padding and requires this zeroing*/
	border: 0;/*zeroes off any existing border*/
	background-color: #7C644A;/*sets the body background colour*/
	color: #666; /*set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif;/*set the default font families */
	font-size: 100.01%;/* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

#wrapper {
	margin: 5px auto;/* centers the wrapper first value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	width: 770px; /* sets the width of the wrapper */
	position: relative; /* important to position it relatively */
	background-color: #ffffff;
	border: 1px solid #999;/* sets a border to all 4 sides */
	text-align: justify;/* Realigns the text to the left after the IE hack in the body rule */
}

/*Begin laying out the Banner Div*/
#banner {
	width: 770px;/*Set the banners width - not strictly necessary just belt and braces from my point of view*/
	height: 110px;/*set a height*/
	min-height: 140px;
	background-color: #FFFFFF;/* sets the wrappers background color*/
	margin-top: 5px ;
	/*border-bottom: 9px solid #4F4F4F;/*Add a thick border to the bottom of the div*/
	/*background-image: url(../images/banner_bg.jpg);/*set the background image for the banner*/
	background-repeat: no-repeat;/*prevent the background image from repeating*/
	/*position: relative;*//*The position is not needed, if you add a div within this div uncomment the positioning property and value pair*/
}

/*Begins laying out the content area */
#content {
	margin: 10px 20px 20px 12px;/*margins set for IE mac which ignored the right hand floated column*/
	/*width: 600px;/*sets the width of the div*/
	height: 700 px;
	min-height: 700 px;
	
}


/*sets the content text*/
#content p {
	font-size: 80%;/*scales the font to 80% of the default set int he body selector*/
	margin: 10px 0 0 10px;/*sets the required margins on the p element*/
	padding: 0;/*zeroes the padding*/
	color: #000000;/*sets the colour for the text*/
	line-height: 130%;/*set a line height for easier reading*/
}

/*sets the styling for the h1 element within the content div*/
#content h1 {
	font-size: 180%;/*scale the font size*/
	margin: 0 15px 0 0;/*set the margins*/
	padding: 0 0 5px 0;/*set the padding*/
	color: #000000;/*set the text colour*/
	font-weight: 500;
}

#content h3 {
	font-size: 120%;/*scale the font size*/
	margin: 10px 0 0 10px;
	padding: 0 0 5px 0;/*set the padding*/
	color: #000000;/*set the text colour*/
	font-weight: 500;
}

#content ul {
	margin: 5px 15px 0px 25px;/*sets the margins on the h2*/
	padding: 10px 0 3px 0;/*sets the padding on the h2 element*/
	color: #000000;/*sets the text colour for the h2 text*/
	font-size: 80%;
	}


/*begin laying out the nav div*/
#nav {
	width: 770px;/*provide a width - not strictly necessary just belt and braces from my point of view*/
	clear: left;/*ensures the footer is always placed below the right column no matter what its contents dictate*/
	background-color: #0E235A;/*set a background colour*/
	font-size: 80%;/*scale the font size off the body element*/
	text-align: center;/*align the footer text to the right*/
	color: #ffffff;
	margin-top: 5px;/*set a margin on the top of the footer*/
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

#nav ul {
	padding: 2px 0 4px 0;/*sets the padding on the ul gives a little space around the li elements*/
	margin: 0;/*zero off the margins*/
}

#nav p {
	padding: 3px;/*sets the padding around the company text in the footer*/
	margin: 0;/*zeroes off the margins*/
	color: #0E235A;/*changes the default colour*/
	background-color: #9F9F9F;/*sets the background colour for p elements in the footer div*/
	text-align:right;
/*	border-top: 1px solid #000000;/*sets a defining edge on the top of the footer*/
/*	border-bottom: 1px solid #000000;/*sets a border between the company info text and the links below it */
}

#nav ul li {
	margin: 0;/*zeroes off the margins */
	display: inline;/*sets the list to display inline*/
	color: #FFFFFF;/*changes the default colour*/
}


#nav a {/* Styles the links within the footer */
	color: #fff;/*sets the text to white*/
	text-decoration: none; /*keeps the underline*/
	
}

#nav a:hover, #footer a:focus {
	text-decoration: underline;/*removes the underline*/
	
}


/*float styles for the images in the content div*/
.left {
	float: left;/*float the image to the left*/
	border: 1px solid #000;/*add a border around the image*/
	margin: 5px 10px 0 0;/*set a margin to the top and right to give clearance against the text the top margin aligns the image with the top of the p element*/
}

.right {
	float: right;/*float the image to the right*/
	border: 1px solid #000;/*add a border around the image*/
	margin: 5px 10px 0 10px;/*set a margin to the top and left to give clearance against the text the top margin aligns the image with the top of the p element*/
}

/*begin laying out the footer div*/
#footer {
	width: 770px;/*provide a width - not strictly necessary just belt and braces from my point of view*/
	clear: right;/*ensures the footer is always placed below the right column no matter what its contents dictate*/
	background-color: #4F4F4F;/*set a background colour*/
	font-size: 70%;/*scale the font size off the body element*/
	text-align: right;/*align the footer text to the right*/
	margin-top: 20px;/*set a margin on the top of the footer*/
}

#footer ul {
	padding: 2px 0 4px 0;/*sets the padding on the ul gives a little space around the li elements*/
	margin: 0;/*zero off the margins*/
}

#footer p {
	padding: 3px;/*sets the padding around the company text in the footer*/
	margin: 0;/*zeroes off the margins*/
	color: #4E4E4E;/*changes the default colour*/
	background-color: #9F9F9F;/*sets the background colour for p elements in the footer div*/
	border-top: 1px solid #000000;/*sets a defining edge on the top of the footer*/
	border-bottom: 1px solid #000000;/*sets a border between the company info text and the links below it */
}

#footer ul li {
	padding: 4px;/*2px 4px 2px 2px; sets the padding values*/
	margin: 0;/*zeroes off the margins */
	display: inline;/*sets the list to display inline*/
}


#footer a {/* Styles the links within the footer */
	color: #fff;/*sets the text to white*/
	text-decoration: underline; /*keeps the underline*/
}

#footer a:hover, #footer a:focus {
	text-decoration: none;/*removes the underline*/
}


/*Start laying out the index page - different container than the inner page allows you to pattern match selectors and style them diffeently if needed without resorting to classes */
#front {
	width: 770px;/*set a width */
	margin-top: 0; /*20px;sets a margin to the top*/
	text-align: center;/*centers the text*/
	padding-top: 0px;
}

/*styles the h1 on the index page*/
#front h1 {
	font-size: 180%;/*scale the font size*/
	font-family: "Bookman Old Style";/*set the font family*/
	margin: 0 15px 0 0;/*set the margins*/
	padding: 0 0 5px 0;/*set the padding*/
	color: #41515A;/*set the text colour*/
	font-weight: 500;/*sets the font weight a little less than bold, if not supported in a given browser defaults to a normal weight. If you want bold for your h1 delete this property and value pair - or simply comment them out*/
}

/*style the "Welcome To" link for entry to the site*/
#front a {
   color: #798153;/*set the link text colour*/
   background-color: #F2F7E7;/*set the link background colour*/
   border: 1px solid #000;/*set a border around the link*/
   padding:4px 10px 4px 10px;/*set some padding on the link*/
   text-decoration: none;/*remove the underline*/
	
}

#front a:hover, #front a:focus {
	background-color: #BDC984;/*set the hover and focus background colour*/
	color: #F2F7E7;/*set the hover and focus text colour*/
}