/* background-color: transparent; has been used in some of the selectors, this is the default and it is not strictly 
necessary to declare this info - it does serve a purpose in that it supplies information for you to see*/
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: #000000; /*set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Georgia, "Times New Roman", Times, 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: 736px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing 
	off the left edge with Gecko browsers */
	color: #FFFFFF;
	line-height: 110%;
	background-image: url(images/bkgrnd-gradient.jpg);
}

#wrapper {
	width: 776px; /* sets the width of the wrapper */
	position: relative; /* important to position it relatively */
	background-color: #003300;/* sets the wrappers background color*/
	border: 1px solid #e8e4a6;/* sets a border to all 4 sides */
	text-align: left;/* Realigns the text to the left after the IE hack in the body rule */
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	background-image: url(images/content-gradient.jpg);
}

#banner {
	background-image: url(images/banner.jpg);
	background-repeat: no-repeat;

	position: relative;
	top: 0px;
	height: 154px;
	background-color: #003300;
	background-position: center;
}

#border {
	background-image: url(images/border.jpg);
	background-repeat: repeat;
	width: 776px;
	position: relative;
	top: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #68522a;
	border-right-color: #68522a;
	border-bottom-color: #68522a;
	border-left-color: #68522a;
	height: 9px;
}


#contact {/* Begin laying out the contact div */
	float: left; /* Floats the div to the left to make a column */
	width: 120px; /*sets a width for the div - Imperative for IE mac */
	margin-left: 7px; /*creates a margin on the left to move the div away from the pages edge*/
	background-color: transparent; /* no colour required for the bg colour*/
	margin-top: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#navigation {
	/*   background-image: url(../images/navigation.gif);/* sets the "tab" navigation image */
	/*background-repeat: no-repeat; /* prevents our image from repeating - it aligns to the top and 
	left by default so need to position it*/
	margin-top: 0px;/* sets a margin on the top to move the div down from the banner*/
	background-color: transparent;/* no background colour required*/
	padding-top: 0px;/* moves the content of the div down and allows the "tab" bg image to show above it*/
	line-height: 100%;/* helps out IE 5.01 pc */
	width: 120px; /* sets a width for the div */
	margin-left: 1px;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
}

#navigation ul {
	background-color: transparent;/* no background colour required*/
	list-style-type: none; /* Moves the "where" div down 40px from the bottom of the navigation list */
	padding: 0;/* zeroes off the padding */
	font-size: 80%;/* These borders create the box affect on the navigation */
	border-right-width: 2px;
	border-bottom-width: 3px;
	border-left-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #8E685E;
	border-bottom-color: #8E685E;
	border-left-color: #B79349;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 40px;
	margin-left: 0;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #B79349;
 }


#navigation ul li {/*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01*/
	margin: 0; /*zeroes off the margins*/
	margin: /**/ 0 0 -3px 0; /*This takes the 3px off the margin in IE 5.01 - IE 5.5 cannot see this hack 
	so stays with the 0 value from the last margin property*/
	ma\rgin: 0;/* IE 5.01 and IE5.5 cannot see this selector - resets the margins on other browsers back to zero - 
	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*/
	background-color: #765142;
}

.first {/* Adds a border to the top of the first link - apply to the first link in the list */
	border-top: 1px solid #000; /*provides a border for the top of our first list navigation link - we don't want 
	double borders where the links join in the list navigation, this negates that problem*/
}

/*Begin styling the link lists - visited is styled the same as link, not absolutely necessary to decalre visited but its there.
Note that the reference is to "a" and not "a:link". This makes the link act as a button in a cross-browser way. */
/*You will notice that I have set two selectors on this rule. This is fine when the occasion arises - saves time and space*/

#contact #navigation a, #contact #navigation a:visited {/*use dual selectors if the properties and values are the same for each*/
	background-color: #9D7832; /* changes the default text colour to black*/
	display: block; /* sets padding values to give the link text some "air"*/
	text-decoration: none;/* sets the width for IE5.x*/
	w\idth: 108px;/*resets the width for IE6 and compliant browsers - see notes on line 93 regarding the position 
	of the escape \ character*/
	font-weight: normal;
	background-image: url(images/button.jpg);
	color: #552029;
	padding-top: 4px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 4px;
	margin-right: auto;
	margin-left: auto;
}




/* sets the link styles for hover*/
/*You will notice that I have set two selectors on this rule, this is fine when the occasion arises - saves time and space*/
#contact #navigation a:hover, #contact #navigation a:focus { /*use dual selectors if the properties and values are the 
same for each*/
	color: #552029;/* changes the hover and focus text to white*/
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: none;
	border-right-color: #BCACA7;
	border-bottom-color: #BCACA7;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #BCACA7;
	background-image: url(images/button-hover.jpg);
	}


/* Begins laying out the address */
#add {/* Set the containing add div */
	width: 120px;/* sets a width for the div*/
	background-color: transparent; /* no background colour required*/
	/*	background-image: url(../images/address.gif);/* sets the "tab" background image for the div*/
	background-repeat: no-repeat;/* no repeating required*/
	margin-top: 0;/* moves the div down and away from the navigation div */
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #8E685E;
	border-bottom-color: #8E685E;
	border-left-color: #B79349;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #B79349;
	background-image: url(images/plaque.jpg);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 60%;
	font-style: normal;
	color: #552029;
	text-align: left;
	padding-top: 5px;
	padding-right: 0;
	margin-bottom: 20px;
	line-height: 14px;
}

#contact #navigation #add #address a, #contact #navigation #add #address a:visited {/*use dual selectors if the properties and values are the same for each*/
	display: block; /* sets padding values to give the link text some "air"*/
	text-decoration: none; /*removes the underline*/
	width: 117px;/* sets the width for IE5.x*/
	w\idth: 117px;/*resets the width for IE6 and compliant browsers - see notes on line 93 regarding the position 
	of the escape \ character*/
	border-right-width: 1px;
	border-left-width: 3px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #886853;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	font-weight: normal;
	color: #552029;
	padding-top: 4px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 4px;
}

#contact #navigation h3 {/* Sets the title on the navcontainer and the add divs */
	font-size: 11px;/* scales the font size*/
	background-color: #795847;/* sets the background colour*/
	padding: 5px 3px 3px 7px;/*sets the padding values - the 7px aligns this header with the text in the "tab" image */
	color: #F5D9C1;/* sets the text colour to white*/
	margin: 0;/* Blends the left edge into the tab highlight*/
	border-right-width: 3px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #F5D7BD;
	border-left-color: #926b5a;
}
	
	
#contact #navigation #add h3 {
	font-size: 11px;/*Sets the font size*/
	background-color: #795847;/* sets the background colour*/
	padding: 5px 3px 3px 7px;/*sets the padding values - the 7px aligns this header with the text in the "tab" image */
	color: #F5D9C1;/* sets the text colour to white*/
	margin: 0;/* zeroes off the margins*/
	border-bottom: 1px solid #926b5a;/* adds a bottom border to give some definition between the h3 and the address element*/
	font-family: Arial, Helvetica, sans-serif;
}


#contact #navigation #add address {/* Sets the styling for the address element */
	font-size: 70%;/*scales the font size*/
	padding: 7px 5px 5px 5px;/* These borders create the box affect on the address */
	margin: 0;/*zeroes off the margins*/
	color: #FFFFFF;/* changes the default text colour*/
	font-style: normal;/* sets the background colour*/
/*	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #B79349;
	border-bottom-color: #926b5a;
	border-left-color: #926b5a;   */
	
	border-right-width: 1px;
	border-left-width: 3px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #886853;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	font-weight: normal;
	color: #552029;
	padding-top: 4px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 4px;
	
	
}


#content {/* Begin laying out and styling the content div */
	background-color: transparent;/* no background colour required*/
	width: 570px;/* sets the width of our content*/
	margin-left: 170px; /* this left margin clears the contact div and allows our content div to become a second column*/
	padding-bottom: 20px;/* sets a padding clearance on the bottom of the div*/
	margin-bottom: 5px;/* sets a margin below the div and above the footer*/
}

#content h1 {
	font-size: 130%; /*scales the main content title*/
	font-family: Georgia, "Times New Roman", Times, serif;/* sets the margins*/
	padding-top: 5px;/* adds padding to the top to give a little clearance below the banner*/
	color: #d7b868;/* set the colour for the text*/
	font-style: italic; /*set the font style */
	font-weight: 500;/* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly to default 
	to normal - to make the text bold, if that is your wish, you can simply remove this property*/
	text-align: center;
	letter-spacing: .1em;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	line-height: 130%;
}

#content h2 {
	font-size: 110%;/* scale the font size*/
	font-family: Georgia, "Times New Roman", Times, serif;/* set the margins*/
	padding-top: 5px;/* adds the top padding to move it down from elements above - could be done with a top margin*/
	color: #d7b868;/* sets the font colour*/
	font-style: italic;/* sets the font style*/
	font-weight: 500; /* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly 
	to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	letter-spacing: 0.1em;
	text-align: center;
	line-height: 110%;
}

#content p {
	font-size: 80%;/* sets the padding on the p element when it is within the content div*/
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 5px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 0;
	padding-left: 0;
	line-height: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#content .right {/* Floats the images in the main content area to the right */
	float: right;/*sets a border on the image*/
	font-size: 80%;
	margin-top: 5px;
	margin-right: 5;
	margin-bottom: 20px;
	margin-left: 20px;
	clip: rect(auto,auto,auto,auto);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}

#content .left {/* Floats the images in the main content area to the left */
	float: left;/*Floats the image to the left*/
	margin: 5px 20px 2px 0;/*sets the margins so the image sits nicely in the p elements*/
	border: 1px none #000;/*sets a border on the image*/
	font-size: 80%;
}

/* sets the inline links in the #content div if required*/
#content a:link, #content a:visited{
	color: #FFFFCC; /*sets the link and visited text color*/
	background-color: transparent;/* no background color required*/
}

#content a:hover, #content a:focus{
	background-color: #1e2831;/*sets the background color for hover and focus*/
	color: #FFFF66;/* sets the text color for hover and focus*/
	text-decoration: none;/*removes the underline*/
}




#footer {/* Begin laying out and styling the footer div */
	background-color: #fff;/*sets a background colour for the footer*/
	width: 776px;/*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*/
	clear: left; /* Keeps the contact div above the footer */
	margin-top: 3px; /* Adds a margin to the top of the footer*/
	font-family: Arial, Helvetica, sans-serif;
}
/* The contact 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 left ensures the footer is always moved beyond the contact 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 p {
	background-color: #E4E4E4;/*zeroes off the margins */
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 15;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 10px;
}


#footer p.designer {/* Styles the bottom P in the footer that gives the validation and designer info */
	background-color: #7B6126;/*sets the background colour*/
	padding: 4px 4px 4px 10px;/*sets the padding values*/
	margin: 0;/*zeroes off the margins*/
	color: #000000;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #594637;
}


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

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

#navcontainer a img {
    border: none; /*removes the default link border from around the navigation images*/
}



/********* Begin styling the form ****************/


#content form{
	margin: 30px 30px 0 30px; /*Sets the margins on the form - bottom  is zero feel free to change as required*/
}


#content fieldset fieldset{
	width: 195px; /*Set the width of the fieldset that contains the form inputs*/
	padding: 0; /*zero the padding on the nested fieldset*/
	border: none; /*remove the borders*/
}

#content input{
/*	background-color: #Faf396;Set the background colour of the form inputs*/
	color: #414F4B;/*Set the text colour*/
	border: 1px solid #926b5a;/*add a border around them*/
	margin: 0 0 0 0;/*Zero off any margins*/
	width: 150px;/*Specifically set the width*/
	display: block;/*force the inputs to stack*/
}

#content textarea{
/*	background-color: #Faf396;set the background colour*/
	color: #556660;/*set the text colour*/
	border: 1px solid #926b5a;/*set a border around the element*/
	margin: 0 30px 0 0;/*set a margin on the right only*/
	height: 200px;/*specifically set a height for the textarea, tends to vary somewhat cross browser*/
}

.labelfloat{
	float: right;/*float the textarea's label and the textarea within it*/
	padding-top: 20px;/*set a top padding to align it*/
}

#content label{
	color: #4F4F4F;/*set the label text colour*/
	font-size: 75%;/*set the label font size*/
	padding-top: 5px;/*set alittle padding on the top*/
	display: block;/*display it as a block level element*/
}

#content fieldset{
	margin: 0;/*zero off any existing margine*/
	border: none;/*remove the default borders*/
	padding: 5px 5px 20px 20px;/*give a little "air" inside the parent fieldset*/
	width: 450px;/*set a width against it*/
}


#content .button{
  background-color: #ffa46f;/*changes the default background colour from the input styling*/
  color: #000000;/*changes the default colour from the input styling*/
  width: 80px;/*changes the default width colour from the input styling*/
  margin-top: 20px;/*adds a little sapce between the bottom input and the buttons*/
  display: inline;/*allows the buttons to sit side by side by, over ruling the display: block; on the input selctor*/
}
#content h3 {
	font-size: 100%;/* scale the font size*/
	font-family: Georgia, "Times New Roman", Times, serif;/* adds the top padding to move it down from elements above - could be done with a top margin*/
	color: #FED65C;/* sets the font colour*/
	font-style: normal;/* sets the font style*/
	font-weight: bold; /* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly 
	to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
	margin-top: 0;
	margin-right: 0;
	clip: rect(auto,auto,auto,auto);
	padding-top: 30px;
}

.bold {

	font-weight: bold;

}
#content ul {
	background-color: transparent;/* no background colour required*/
	list-style-type: disc;/* zeroes off the padding */
	font-size: 80%;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-style: none;
	list-style-position: outside;
	left: 10px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 15;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5;
	margin-left: 25;
}

.indent {
	text-indent: 20px;
	font-weight: normal;
	color: #CC0000;
	font-style: normal;
	font-size: 80%;
	background-color: #FDF5EE;
}
.indent2 {
	text-indent: 30px;
	font-weight: normal;
	color: #CC0000;
	font-style: normal;
	font-size: 80%;
	list-style-type: circle;
}
.current {
	font-weight: bold;
	font-style: normal;
	color: #CC0000;
}





#contact #navigation #add a, #contact #navigation #add a:visited {

	background-color: #Ffffff; /* changes the default text colour*/
    padding: none;
	text-decoration: underline; /*removes the underline*/

	border-right-style: none;
	border-left-style: none;
	border-right-color: #none;
	border-left-color: #none;
	border-bottom-style: none;
	border-bottom-color: #none;
	font-weight: normal;
width: 120px;/* sets the width for IE5.x*/
	w\idth: 100px;
}
#contact #navigation #add a:hover, #contact #navigation #add a:focus {
	border-right-style: none;
	border-bottom-style: none;
	border-right-color: none;
	border-bottom-color: none;
	border-top-style: none;
	border-top-color: none;
	color: #000000;
}
#content h4 {
	font-size: 110%;/* scale the font size*/
	font-family: Georgia, "Times New Roman", Times, serif;/* set the margins*/
	padding-top: 5px;/* adds the top padding to move it down from elements above - could be done with a top margin*/
	color: #E2CC92;/* sets the font colour*/
	font-style: italic;/* sets the font style*/
	font-weight: 500; /* sets the font weight to slightly less than bold - Where this isn't supported it seems mainly 
	to default to normal - to make the text bold, if that is your wish, you can simply remove this property*/
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	letter-spacing: 0.1em;
	text-align: right;
}
#caption {
	color: #FFFFFF; /*keeps the underline*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 60%;
	text-align: center;
}