body {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #01584F;
	color: #666;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	min-width: 770px;
	position: relative;
}

#wrapper {
	margin: 5px auto;
	width: 770px;
	position: relative;
	background-color: #EEF1E7;
	border: 1px solid #000;
	text-align: left;
	visibility: inherit;
}

/*Begin laying out the Banner Div*/
#banner {
	width: 770px;
	height: 200px;/*set a height*/
	border-bottom: 4px solid #01584F;/*Add a thick border to the bottom of the div*/
	background-image:    url("images/bannerimage.jpg");/*set the background image for the banner*/
	background-repeat: no-repeat;/*prevent the background image from repeating*/
}

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


/*sets the content text*/
#content p {
	font-size: 80%;
	margin: 20px 0 0 10px;
	padding: 0;
	color: #000000;
	line-height: 130%;
	left: 100px;
}

/*sets the styling for the h1 element within the content div*/
#content h1 {
	font-size: 100%;/*scales the text size against the body selector default*/
	font-family: Georgia, "Times New Roman", Times, serif;/*sets the font face*/
	margin: 10px 15px 0 10px;/*sets the margins on the h1*/
	padding: 0 0 3px 0;/*sets the padding on the h1 element*/
	color: #41515A;/*sets the text colour for the h1 text*/
	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*/
}

#content h2 {
	font-size: 110%;/*scales the text size against the body selector default*/
	font-family: Georgia, "Times New Roman", Times, serif;/*sets the font face*/
	margin: 15px 15px 0 10px;/*sets the margins on the h2*/
	padding: 20px 0 3px 0;/*sets the padding on the h2 element*/
	color: #41515A;/*sets the text colour for the h2 text*/
	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*/
}

/*sets the boxes in the right column, note no width set on the boxes, the width is determined by the margin settings*/
.boxes {
	background-color: #EBEDDF;/*sets the background colour*/
	border: 1px solid #01584F;/*adds a border around the boxes*/
	margin: 10px 5px 10px 5px;/*set the margins, these margins position the boxes within the nvabox container*/
   padding-bottom: 3px;/*add a little clearance below the final paragraph in each of the side boxes*/
}

/*sets the style for the title in each of the boxes in the right coloumn*/
.boxes h3 {
	font-size: 90%;/*scale the font size off the body selector setting*/
	background-color: #01584F;/*set the background colour*/
	margin: 0;/*zero the margins*/
	padding: 2px 0 2px 0;/*set padding to the top and bottom, zero the left and right margins*/
	font-family: Georgia, "Times New Roman", Times, serif;/*set the font face*/
	text-align: center;/*set the text alignment to center*/
	border-bottom: 1px solid #01584F;/*set a defining edge between the h3 and the p content below it by adding a border*/
	color: #fff;/*set the h3 text colour to white*/
}

/*styles the text content in each of the boxes in the right column*/
.boxes p {
	font-size: 70%;/*scale the font size of the default on the body selector*/
	margin: 5px 3px 3px 5px;/*set margins to keep the text away from the borders*/
	padding: 0;/*zero off the padding*/
	line-height: 130%;/*set a line height for easier reading*/
	background-color: transparent;/*no background colour required, allow the .boxes colour to show through*/
}

/*styles the links in each of the boxes in the right column*/
.boxes a:link, .boxes a:visited {
	background-color: #A1A1A1;/*set the link background colour*/
	color: #000;/*set the link colour*/
}

/*styles the link hover and focus states in each of the boxes in the right column*/
.boxes a:hover, .boxes a:focus {
	background-color: #01584F;/*set the background colour*/
	color: #fff;/*set the text colour*/
	text-decoration: none;/*remove the underline*/
}

/*sets out the main right hand column that the boxes are contained within*/
#navbox {
	float: right;
	width: 180px;
	w\idth: 180px;
	margin-right: 5px;
	background-color: #AAD26F;
	border: 1px solid #01584F;
	margin-bottom: 20px;
	margin-top: 10px;
	position: absolute;
	left: 585px;
	top: 208px;
	height: 288px;
}

/*Fix the right margin for good browsers from the right margin hack in the above selector*/
html>body #navbox {
   margin-right: 12px;/*correctly align the margin for good browsers after the hack in the rule above*/
}

/*set the h2 styles*/
#navbox h2 {
	font-size: 95%;/*scale the font size from the default in the body selector*/
	background-color: #01584F;/*set the background colour*/
	margin: 4px 5px 6px 5px;/*set the margins on the h2*/
	padding: 2px 0 2px 0;/*set the padding on the h2*/
	font-family: Georgia, "Times New Roman", Times, serif;/*set the font family*/
	text-align: center;/*align the text to the center*/
	border: 1px solid #01584F;/*set a 1 pixel boreder around the h2*/
	color: #fff;/*set the text colour to white*/
}

/*Begin styling the navigation*/
#navbox ul {
	list-style-type: square;
	list-style-position: inside;
	color: #A6BE47;
	font-weight: bold;
	background-color: #01584F;
	position: absolute;
	left: 4px;
	top: 32px;
	width: 158px;
	height: 238px;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 5px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 10px;
}

/*sets the styling of li element*/
#navbox ul li {
	padding: 0;/*zeroes the padding*/
	margin: 0;/*zeroes the margins*/
	line-height: 120%;/*set the line-height*/
	font-size: 70%;/*scales the font size to 70% of the default on the body selector*/
}

/*styles the nested ul element that contains our navigation links*/
#navbox ul li ul {
	padding: 0 0 0 10px;/*zero the padding to 3 sides and 10px to the left*/
	border: none;/*declare none to prevent inheriting a border*/
}

/*styling the li in the nested ul*/
#navbox ul li ul li {
	padding: 0;/*zero the padding*/
	margin: 0;/*zero the margins*/
	line-height: 120%;/*set the line height*/
	font-size: 100%;/*increase the font size in relation to the parent ul*/
}

/*start laying out the links styles on the nested list*/
#navbox ul li a {
	color: #E8ECD3;/*set the link colour*/
	text-decoration: none;/*remove the underline*/
}

#navbox ul li a:hover, #navbox ul li a:focus {
	color: #B4C965;/*set the hover and focus text colour*/
	text-decoration: underline;/*set an underline to show on hover and focus*/
}

/*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: #01584F;/*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*/
}

/* The navbox div is outside the flow of the document and won't respect the footer;
it would, if it's content was great enough, poke through the bottom of the layout.
The clear right ensures the footer is always moved beyond the navbox div and our design
remains intact. The content div is within the flow of the document and will therefore
push the footer div down as it's content dictates. */

#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: #AAD26F;/*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*/
}


/*begin laying out the form - the form has it's own container #formcontainer*/
#formcontainer {
	width: 500px;/*set the width of the form container*/
	margin: 10px 5px 20px 55px;/*set the margins*/
}

/*set the h1 element in the form container*/
#formcontainer h1 {
	font-size: 120%;/*scale the font size against the body selector*/
	font-family: Georgia, "Times New Roman", Times, serif;/*set the font family*/
	margin: 10px 15px 0 0;/*set the margins of the h1*/
	padding: 0 0 20px 0;/*set the padding on the h1*/
	color: #41515A;/*set the font 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 p in the form container*/
#formcontainer p {
	font-size: 80%;/*scale the font size against the body selector*/
	margin: 0 0 20px 0;/*set a 20 pixel margin on the bottom, zero the rest*/
	padding: 0;/*zero the padding*/
}

/*style the inputs*/
#formcontainer input {
	background-color: #B3C184;/*set a background colour on the form inputs*/
	color: #414F4B;/*set a colour for the text that is added to the inputs*/
	border: 1px solid #4C5854;/*set a border on the inputs - gives them a flat appearance*/
	margin: 0;/*zero off any margins*/
	width: 150px;/*set a width*/
}


/*style the textarea*/
#formcontainer textarea {
	background-color: #B3C184;/*set the background colour*/
	color: #556660;/*set the text colour*/
	border: 1px solid #4C5854;/*add a border to give it a flat appearance*/
	margin: 0 25px 0 0;/*set a 25 pixel margin to the right zero off any remaining borders*/
	height: 200px;/*set a hegiht for the textarea*/
}

/* shows focus in the form inputs and textarea */
#formcontainer input:focus, #formcontainer textarea:focus {
	background-color: #01584F; /*set the background colour of the input and textarea when the cursor is inside*/
   color: #fff; /*set the text colour to white*/
}

/*position the textarea by floating its containing lable*/
.labelfloat {
	float: right;/*float to the right*/
	padding-top: 20px;/*level it off with the inputs to the left by adding 20 pixels of padding to the top of the label*/
}

/*style the form element labels*/
#formcontainer label {
	color: #01584F;/*set the text colour*/
	font-size: 75%;/*scale the font size off the body selector*/
	padding-top: 5px;/*set a little padding to the top*/
	display: block;/*set the display to block to ensure each input is shown on a different line i.e. they do not run horizontally*/
}

/*style the parent fieldset*/
#formcontainer fieldset {
	margin: 0;/*zero off the margins*/
	border: 1px solid #5C6231;/*add a border to define it's edges*/
	text-align: left;/*align the text to the left*/
	padding: 5px 5px 20px 20px;/*set the padding*/
	width: 450px;/*give it a width*/
}

/*style the nested fieldset*/
#formcontainer fieldset fieldset {
	width: 195px;/*give it a width*/
	padding: 0;/*remove any default padding*/
	border: none;/*add border none to prevent inheriting a border from the parent*/
}

/*style the form legend - "Contact My COmpany" */
#formcontainer legend {
	color: #01584F;/*set the text colour*/
	font-weight: bold;/*set the font weight to bold*/
	font-family: Georgia, "Times New Roman", Times, serif;/*set the font family*/
	background-color: #EAEEDD;/*set a background colour*/
	border: 1px solid #000;/*set a border around the legend*/
	padding: 2px;/*set alittle padding to give it some space against the border*/
	font-size: 90%;/*scale the font size against the body selector*/
}

/* our buttons take on the input style, we need to change that and we'll do it with this button class*/
#formcontainer .button {
   background-color: #01584F;/*set the background colour of your form buttons*/
   color: #fff;/*set the text colour to white*/
   width: 80px;/*provide a width*/
   margin-top: 20px;/*set a 20 pixel top margin to give some "air" below the inputs*/
}


/*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: 20px;
}

/*styles the h1 on the index page*/
#front h1 {
	font-size: 120%;/*scale the font size*/
	font-family: Georgia, "Times New Roman", Times, serif;/*set the font family*/
	margin: 10px 15px 0 0;/*set the margins*/
	padding: 0 0 20px 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*/
}

/*this container holds the four boxes at the bottom of the index page*/
#floatcontainer {
	width: 770px;/*set a width*/
	height: 220px;/*set a height for the container*/
	padding-top: 20px;/*sets the distance from the element above -- remember to add this value to the height of the boxes to get the full height of this float container*/
}

/*set up the four floated boxes - these are held within the above selector*/
.floatboxes {
   width: 152px;/*set a width for IE pc*/
	w\idth: 154px;/*set the width for good browsers*/
	height: 200px;/*set a height for the four boxes so they remain consistent*/
	margin:  0 16px;/*set the margins for IE5.5*/
	ma\rgin: 0 14px;/*set the margins for IE 6 and other browsers allows for a float bug in IE 6*/
	border: 1px solid #01584F;/*set a border around the boxes*/
	float: left;/*float them to the left*/
	background-color: #F2F7E7;/*set a background colour for the boxes*/
	overflow: auto;/*set overflow to auto - if the content excedds the boxes height scroll bars are provided*/
}

html>body .floatboxes {
   margin: 0 18px;/*correctly align the margin for good browsers after the hack in the rule above*/
}

/* This selector fixes the horizontal scroll in IE Mac and would be seen by IE 5.01 PC except for the escape characters */
*>html .floatboxes {
	padd\ing-right: 16px; /*sets some padding to the right to avoid the horizontal scroll bars that IE insists are needed*/
	w\idth: 137px; /*Feeds in a corrected width for IE due to the padding above */
}
.floatboxes h3 {
   text-align: center;/*set the h3 titles for eac of the boxes*/
	font-size: 105%;/*scale the font size off the body selector*/
	font-family: Georgia, "Times New Roman", Times, serif;/*set the font family*/
	padding: 0 0 3px 0;/*set padding against the bottom, zero all other sides*/
	margin: 0;/*zero the margins*/
	color: #C8D589;/*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*/
	background-color: #01584F;/*set the background color*/
}

/*This selector is only seen by IE Mac due to the escape characters that also block IE 5 PC -- this reverses the heading colors */
*>html .floatboxes h3 {
	bac\kground-color: #F2F7E7;/*provides a background colour to match the box background for IE Mac only*/
	c\olor: #01584F;/*provides the contrasting text colour*/
	/* a negative margin-left, equivalent to 1px LESS than the padding added on the "html>body .floatbox" selector, can be used here instead of reversing the heading colors... however, you will have a 1px space on the far right of the heading which is not appealing with some color schemes. You will also have a horizontal scroll bar on any boxes that have a vertical scroll. This may be acceptable in some cases however. */
	}
/*style the text in the boxes*/
.floatboxes p {
	font-size: 70%;/*scale the font size off the body selector*/
	margin: 5px;/*set a margin to all four sides of 5 pixels*/
	padding-bottom: 4px;/*adds padding to the bottom of the p element*/
}

/*set the links in the boxes*/
.floatboxes a, #content a {
	color: #606D26; /*set the text colour*/
}

.floatboxes a:hover, .floatboxes a:focus, #content a:hover, #content a:focus {
	color: #F2F7E7;/*set the text colour on hover and focus*/
	background-color: #01584F;/*set the background colour*/
	text-decoration: none;/*remove the underline*/
}

/*create a marker to show the user where in the site they are at any given time*/
.youarehere {
	color: #B6B4C1;/*set a link in the navigation to this class to show where the user is - remove the link and apply this class to the li tag*/
}
.bullet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: normal;
	color: #314048;
}