html, body, ul, ol, li {  /* 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 */	
}

body {
background-color: #fff;  /* sets the body background colour */
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-x; /*repeat the backgrounsimage on the x-axis, from left to right*/
color: #383412;  /* 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 fonts */
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 {
	width: 772px;
	w\idth: 770px;
	margin: 5px auto;
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #000;
	text-align: left;
	background-image: url(../images/wrapper_bg.jpg);
	background-repeat: repeat-y;
}


/*set the link styles for the client login and the close login box links*/
#clientaccess a,
#login a {
font-size: 60%;  /*Sets the font size*/
color: #000000;  /*sets the link color*/
float: right;  /*floats the links to the right*/
margin: 3px 10px 0 0;  /*sets the margins - 3px to the top, 10px to the right and the rest to 0*/
}

#clientaccess a:hover,
#clientaccess a:focus,
#login a:hover,
#login a:focus {
text-decoration: none;  /*removes the link's underline*/
color: #CDCDCD;  /*sets the colour for the hover and focus states*/
}


/*begin laying out the banner*/
#banner {
background-image: url(../images/banner_bg.jpg);  /* sets the background image for the banner div*/
background-repeat: no-repeat; /* prevents the bg image from repeating */
margin-top: 20px;/*sets margin of 20px to the top of the banner*/
height: 110px;/* set a height for the banner to allow all the bg image to be seen, no text resizing in this element to worry about */
position: relative;  
/* **PLEASE READ** ~ This position property and its relative value is not needed for your page to be rendered corectly in the browser - However, 
without it Dreamweaver allows the position of the leftcol div to ride up over the banner in design view. If that does not bother you you can safely 
delete this property and value pair. Alternatively you could implement a design time style sheet to position the div correctly for working in design view */
}


/*begins laying out the main content area*/

#content {  /* Begin laying out and styling the content div */
float: left; /* newly floated */
width: 550px;  /* sets the width of our content*/
background-color: #fff;  /*sets the background colour to white*/
margin: 0 0 0 20px;  /* this left margin clears the leftcol div and allows our content div to become a second column */
margin-right: -3px; /* prevents IE float drop */
}

#content h1 {
	font-size: 115%;
	color: #635858;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	padding: 0 0 0 3px;
	margin: 0;
	background-color: #F4F4F4;
	font-weight: normal;
}

#content h2 {
	font-size: 110%;
	color: #625757;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	padding: 0 0 0 3px;
	margin: 20px 0 0 0;
	background-color: #F4F4F4;
	font-weight: normal;
}

#content p {
	font-size: 80%;
	margin: 12px 0 0 0;
	line-height: 1.4em;
}

/*generic float rules for our images in the content area*/

#content .left{
float: left;  /*float the image to the left*/
border: 1px solid #000000;  /*add a black border 1 pixel wide to all 4 sides*/
margin: 5px 12px 1px 0;  /*set the margins to give some "air" around the text*/
}

#content .right {
float: right;  /*float the image to the right*/
border: 1px solid #000;  /*add a black border 1 pixel wide to all 4 sides*/
margin: 5px 0 1px 10px;  /*set the margins to give some "air" around the text*/
}

/*create the second column to hold the navigation*/
#leftcol {
	display: inline; /* fix for IE doubled margin */
	float: left;
	width: 187px;
	w\idth: 184px;
	margin-left: 3px;
	margin-bottom: 20px;
	background-color: #000000;
}

html>body #leftcol {
   margin-left: 7px;  /*correct the margin for good browsers*/
}

#navbox {
margin-bottom: 20px;  /*set a margin on the bottom*/
border: 1px solid #000;  /*add a black border 1 pixel wide to all 4 sides*/
}

/*Begin styling the navigation*/
#navbox ul {
	list-style-type: none;
	list-style-position: inside;
	padding: 5px 0 5px 5px;
	color: #B4A298;
	font-weight: bold;
	background-color: #000000;
	border: 1px solid #000000;
}

/*sets the styling of li element*/
#navbox ul li {
	line-height: 120%;
	font-size: 70%;
}

/*styles the nested ul element that contains our navigation links*/
#navbox ul li ul {
padding: 0 0 0 12px;  /*adds 12px left padding*/
border: none;  /*declare "none" to prevent inheriting a border*/
}

/*styling the li in the nested ul*/
#navbox ul li ul li {
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: #fff;
	text-decoration: none;
	padding-bottom: 3px;
}

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

#leftcol img {
margin: 0 auto;
border: 1px solid #000000;  /*add a black border 1 pixel wide to all 4 sides*/
}

/* The leftcol div is outside the flow of the document and won't respect the footer;
#leftcol would, if its content were great enough, poke through the bottom of the layout.
The clear left ensures the footer is always kept further down than leftcol div, and our design
remains intact. The content div is within the flow of the document and thus will always
push the footer div down as its content dictates */

#footer {  /* Begin laying out and styling the footer div */
background-color: #fff;  /*sets a background colour for the footer*/
width: 770px;  /*Sets the footers width*/
border-top: 1px solid #000;  /*sets the top border to define the beginning of the footer*/
font-size: 60%;  /* sets the footer text size */
text-align: right;  /* aligns the text to the right*/
margin-top: 20px;  /* Adds a margin to the top of the footer*/
clear: left;  /*clears any floats to the left - our leftcol div in this instance*/
}

#footer p {
background-color: #E4E4E4;  /*sets the background colour for the p element when it is in the footer div*/
padding: 4px 4px 4px 10px;  /* sets the padding values*/
margin: 0;  /*zeroes off the margins */
}

#footer ul{
background-color: #A18E80;/*sets the background colour for the validation links*/
margin: 0;/*zeroes off the margin defaults*/
padding: 4px;/*set a padding around the links*/
}

#footer li{
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 subcontent - this is the area below the main content that contains the two columns, the subcontent div is a container for the left and right divs*/
#subcontent {
margin: 25px 0 0 0;  /*adds a 25px margin to the top of the div*/
}

/*The selector below defines the left column in the lower content area*/
#subcontent #left {
	float: left;
	width: 270px;
	margin-bottom: 20px;
	background-color: #FFFFFF;
}

/*The selector below defines the right column in the lower content area*/
#subcontent #right {
	float: right;
	width: 270px;
	margin-bottom: 20px;
	background-color: #FFFFFF;
}

/*provides the titles for the columns in the lower content area*/
#subcontent h2 {
	font-size: 100%;
	color: #625757;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	margin: 0 0 0 10;
	background-color: transparent;
	font-weight: normal;
}

#subcontent p {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}

/*begin laying out the login div*/
#login {
position: absolute;  /*position the absolutely to take it out of the document flow*/
width: 180px;  /*give it a width*/
border: 1px solid #000;  /*set the border to black and one pixel wide on all four sides*/
background-color: #BC9282;  /*set the background colour of the div*/
top: 21px;  /*position it 21 pixels from the top*/
right: -1px;  /*and -1 pixel from the right, this allows it to overlap the border on the right edge of the wrapper*/
z-index: 100;  /*provide a z-index to ensure this div is always shown on top*/
visibility: hidden;  /*hide the div by default*/
padding: 5px;  /*give the div a paddng of 5 pixels to all four sides*/
}

/*A filedset surronds our form elements in the login div*/
#login fieldset {
border: none;  /*remove the default border*/
}

/*thisis our log in form*/
#login form {
	margin: 0;
	font-size: 70%;
	background-color: #EBEBEB;
	padding: 2px;
}

/*style the forms inputs*/
#login form input {
margin-bottom: 3px;  /*set a margin of 3 pixels to the bottom of the inputs to give some clearance*/
border: 1px solid #999;  /*add a 1 pixel wide border to all four sides*/
}
#login a {
	color: #000000;
}
#content h4 {
	font-size: 90%;
	color: #333333;
	margin-bottom: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#content ul {
	font-size: 80%;
	margin: 0px;
	padding: 0px;
	list-style-type: square;
}
#content li {
	margin-left: 40px;
}
.sig {
	margin-top: 5px;
}
#content h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 95%;
	color: #333333;
	margin-top: 0px;
}

/* form CSS begins here*/
#content form {
	padding: 10px;
	border: 1px solid #666666;
	background: #F7F7F7;
	font-size: .9em;
	width: 400px;
	margin-left: 5px;
	margin-top: 20px;
}
#content input {
	background: #E1E1E1;
	border: 1px solid #666666;
	padding: 2px;
	margin-bottom: 5px;
}
#content textarea {
	background: #E1E1E1;
	border: 1px solid #666666;
	padding: 2px;
	width: 200px;
	margin-bottom: 10px;
	margin-right: 300px;
}
#content input:focus, textarea:focus {
	background: #666666;
	color: #FFF;
	border: 1px solid #D8D3F8;
}
#content label {
	font-size: .9em;
	display: block;
	margin-bottom: 5px;
}