body { 
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #4e6b14;
    background-image: url(../images/background.jpg);
	color: #383412;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif; /* set the default fonts */
	font-size: 100.01%;
	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-position: bottom;
	background-repeat: no-repeat;
	background-color: #fdfbf1;
	text-align: left;
}

#banner {
	position: relative; /* This property and value is not needed for pages 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. */
	background-image: url(../images/banner_bg.jpg);
	background-repeat: no-repeat;
	height: 255px;
}

#content {
	width: 560px;
	margin-left: 200px;
	margin-bottom: 20px; 
}

#content p {
	font-size: 90%;
	margin: 10px 6px 10px 6px;
	padding: 0;
}

.titleimages {
	display: block;
	margin-top: 25px;
}

#leftcol {
	float: left;
	width: 169px;
	margin-bottom: 170px;
	margin-left: 7px;
	margin-top: 75px; 
}

#leftcol #navigation {
	line-height: 100%;
	width: 169px;
}

#leftcol #navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 75%;
	font-weight: bold;
}

#leftcol #navigation ul li {
	padding: 0;
	margin: 0;
	margin: /**/ 0 0 -3px 0; 
	ma\rgin: 0;

}

#leftcol #navigation a, 
#leftcol #navigation a:visited { 
	color: #613627; 
	display: block;
	padding: 4px 0 4px 4px;
	text-decoration: none;
	width: 169px;
	w\idth: 163px;
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcol #navigation a:hover, 
#leftcol #navigation a:focus {
	background-color: transparent; 
	color: #6e9a0c;
}

#footer {
    background-color: #fff;
    width: 770px;
    border-top: 1px solid #000;
    font-size: 60%;
    text-align: center;
    margin-top: 0px; 
    clear: left; 
}

#footer p {
    background-color: #E4E4E4;
    padding: 4px 4px 4px 10px;
    margin: 0;
}

#footer ul{
    background-color: #613627;
    margin: 0;
    padding: 4px;
}

#footer li{
    display: inline;
}

#footer a { 
    color: #fff;
    text-decoration: underline; 
}

#footer a:hover,
#footer a:focus {
    text-decoration: none;
}

.highlight {
   color: #0033CC;
}

/* the following selectors are the form styles */
#content1 form {
	margin: 0; /* zeros the margin for a level playing field */
	padding: 0 0 10px; /* creates 10px of padding at the bottom of the form */
  	width: 450px; /* this is set to avoid float drop (to the same width as the Flash slideshow on the home page) */
  	float: left; /* floating this form element keeps the internal clearing BR's within the form from clearing the external floated side column. */
}	
#content1 fieldset {
	border: 1px solid #0e1164; /* defines a border around each fieldset */
	margin: 0 0 10px; /* keeps the fieldset's bottom border 10px off the next element */
	padding: 5px 0 15px 15px; /* creates padding to keep the elements inside away from the edge of the fieldset */
}
#content1 legend {
	border: 1px solid #0e1164; /* creates a defined box/border around the legend */
	color: #fff; /* contrasting text color */
	background: #4e6b14; /* gives the legend the same background as the feature headings */
	padding: 1px 5px 2px; /* keeps the borders away from the text by these specified amounts */
	margin-bottom: 5px; /* creates 5px of space from the bottom of the legend */
	font: bold 1em "Gill Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;  /* styles the text within */
}
#content1 label {
	float: left; /* The label elements in the form are floated left, and the text inside is right aligned. */
 	width: 110px; /* All the labels have the same width, so their right edges line up vertically. */
  	clear: both; /* They are all cleared so that they always start a new line below previous form element floats. */
	font-size: .8em;
	text-align: right;
	margin-top: 3px; /* this moves the text/label down away from the top of the input */
	}
#content1 input, #content1 textarea, #content1 select {
	color: #000; /* creates the text color */
	border: 1px solid #640e1a; /* gives the input and textarea a border */
	padding: 1px; /* this keeps the text from touching the edges of the input and textarea */
	background: #f7f0e7; /* creates a background color */
	margin: 3px 5px 2px; /* this creates the space around the inputs and textarea so they don't stack on top of each other */
	width: 280px; /* creates a consistent width */
	float: left; /* These inputs and the textarea are floated next to the labels. */ 
}

/*\*/ /*/
#content1 input, #content1 textarea {
	float: none;
}
/* End show to IE Mac */
/* IEmac must not see these elements floated or it is buggy. That browser, however, is good without floating. The above hack can be read only by IEmac. Be sure you do not add any comments INSIDE the hack or it will close. */

#content1 input.sminp {
	width: 110px; /* for shorter input boxes. */
	margin-right: 160px; /* this keeps the shorter boxes aligned on the left with the wider ones. */
}

/* this selector changes the inputs and textareas when the cursor is inside in supported browsers */
#content1 input:focus, #content1 input:active, #content1 textarea:focus, #content1 textarea:active {
	color: #000;
	background: #ffffff;
}

.datatable {
	border: 1px solid #D6DDE6;
	border-collapse: collapse;
}
.datatable td {
	border: 1px solid #D6DDE6;
	text-align: right;
	padding: 0.2em;
}
.datatable th {
	border: 1px solid #D6DDE6;
	text-align: left;
	padding: 0.2em;
}

.datatable caption {
	font: bold 120% Verdana, Arial, Helvetica, sans-serif;
	background-color: #B0C4DE;
	color: #33517A;
	padding: 0.4em 0 0.3em 0;
	border: 1px solid #789AC6;
}