/* Author Tamara Brown 06/2006 */

* { margin: 0; padding: 0; }

body {
	font-size: 100.01%;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: 20px;
	text-align:left;
	min-width: 760px;
	background: #E3E2B4 url(../images/page_bg.gif) repeat 0 0;
}
/*  */

select { padding: 3px;}
input { vertical-align: middle;}
input.formbutton { padding: 0; border: none; background: none;}
a { text-decoration: underline;}
a:link { color: #6C2018;} /*#F89517*/
a:visited { color: #6C2018;}
a:hover, a:active, a:focus { color: #339900;}

#container { margin: 0 auto; position: relative; color: #000000; line-height: 1.4; text-align:left; width: 760px;}

.clearme { clear: both;}

#header {
	background-color:#565722;
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	height: 163px;
}
#headerimg {
	display: block;
	/*padding: 5px 75px 0px 10px;*/
	color: #6C2018;
	font-size: 90%;
	font-weight: bold;
	font-family:Tahoma, Arial, sans-serif;
}
#headerimg img { margin: 10px 70px 0px 20px; }
#headerimg img#printlogo { display: none;}


/*XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX*/

.nav {
	border: 1px solid #404118; /* borders the L & R of the top nav */
	border-width: 0px 1px;
	width: 99.7%;
	background: #565722 url(../images/menu_bg.gif) repeat-x 0 0;
	padding: 4px 0px;
	height:30px;
}

.nav li {list-style: none;} /* removes list bullets */

.topnav { float: left; }
.topnav .one {
	width: 75px;
}
.topnav .two{
	width: 80px;
}
.topnav .three{
	width: 108px;
}
.topnav .four, .topnav .last {
	width: 120px;
}

.floatfix {margin-right: -3px;}

.parent {
	position: relative;
	text-align: center;
	border-left: 1px solid #6A6B36;
	border-right: 1px solid #404118;
}
	
/*XXXXXXXXXXXX Primary dropdown rules XXXXXXXXXXX*/

.dropdown { /* rules for dropdown div */
	width: 160px;
	position: absolute;		
	left: -3000px;
	top: auto; /* puts dropdowns directly under top nav */
	text-align: left; /* needed because IE misapplies text centering to boxes */	
	background: url(../images/bgfix.gif);
}
	
.dropdown ul { 
	width: 101px; /* tweaked so that dropdowns appear to "line up" with top links */
	border: 1px solid #404118; 
	border-width: 1px 1px 0; /* borders for the sides and top of the dropdowns and flyouts; links 
	provide the bottom border */ 
	margin: 0 30px 30px 30px; /* creates "sticky hovering" zones for dropdowns */
} 
.last .dropdown ul, .four .dropdown ul {width: 121px;} /* modifies width for select dropdowns */
.three .dropdown ul {width: 109px;} 	
.two .dropdown ul {width: 81px;} 
		
.topnav:hover div.dropdown {left: -31px;} /* hover rule for dropdowns: the extra pixel makes 
dropdowns "line up" with top links */ 

/*XXXXXXXXXX Secondary dropdown rules XXXXXXXXXXXX*/

.nav a {
	color: #336;
	font-weight: bold;
	font-size: .8em;
	text-decoration: none;
	padding: 5px 0 4px 0px; 
	display: block;
	/* border-right: 1px solid #000;  makes the dividers between the top nav links; must be negated 
	for later links */ 
} 
.dropdown a {padding: 3px 0 2px 6px;font-size: .7em;} /* reduces space in dropdown list */

.nav a:link, .nav a:visited { color: #FFFFCC;}
.nav a:hover, .nav a:active, .nav a:focus { color: #f89901;}

.last a {border-right: 0;} /* removes right border on last top link */
	
.dropdown li {vertical-align: bottom;} /* IE5/win bugfix */
				
.dropdown li:hover {background: #404118;} /* hover color effect on dropdown links */

.nav div div a {
	color: #fff;
	border-right: 0; /* negates right border for dropdowns */
	border-bottom: 1px solid #000;  /* borders the bottoms of the dropdowns */
}
	
/*XXXXXXXXXXX Top nav and dropdown backgrounds XXXXXXXXXX*/
	
.one {border-left: none; margin-left: 5px;}
.last {border-right: none;}
.one ul, .two ul, .three ul, .four ul, .last ul {background: #565722;
}

.one a:hover, .two a:hover, .three a:hover, .four a:hover, .last a:hover{ } /* Use to set background change on rollover */

/*XXXXXXXXXXX Special fixes XXXXXXXXXXX*/

/* This is to hide the following from IE/Mac. \*/
* html .topnav .dropdown li {
	height: 1%;
	margin-left: -16px;
	mar\gin-left: 0;
}

* html .nav a {height: 1%;}
/* */
/* The first 2 rules above fix "bullet region" problems in IE5.x/win, and the second is to make 
all links fully clickable. */    

.brclear { /* Use a break with this class to clear float containers */
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
}

/* The following shows to IE5/Mac only */
/*\*/ /*/
.nav .dropdown {width: 189px;}
.nav .topnav .dropdown ul {margin: 0px;}
.nav .dropdown {position: static;}
.nav .dropdown ul {border: 0;}
/* this rule block "dumbs down" the nav for IEmac */

#header img#printlogo { display: none;}


/* CONTAINING FLOATS ----------------------------------------------------------------- */
/* The following selectors keep floats from overflowing out of their parent elements. This is done by generating a character within the parent but after the float, so that the parent must expand to hold the generated character, appearing to contain the floats in the process. */
.clearfix:after {
  content: "."; /* This dot is the actual content that will be appended to the end any div this class is applied to. */
  clear: both; /* Makes the generated content appear after the floats. */
  height: 0; /* Sets its height to zero so it doesn't show. */
  visibility: hidden; /* Sets its visibility to hidden so it doesn't show. */
  display: block; /* Overwrites the default inline display of the generated content. Needed because only blocks can have clear set on them. */
}
 
.clearfix {
	display: inline-block; /* Makes it work in MacIE. MacIE does not support generated content but will automatically contain a float if the container has this display property. */
	}

/* The first selector below makes it work in WinIE. WinIE does not support generated content, but will automatically contain a float if the container has a width or height assigned. "height: 1%" can be used because WinIE will not honor this height and will expand the div to whatever height necessary to show the content. */
/* The second selector below overwrites the inline-block display used to help MacIE. */
/* Hides from MacIE \*/
* html .clearfix {
	height: 1%;
	}
.clearfix {
	display: block;
	}
/* End hide from MacIE */

/* Wrapper for all content between nav and footer. */
#contentwrapper {
	background: ; 
	/* Adds strip showing columns as background image to wrapper div. Also given a background color in case images are not available. */
}

/* Another wrapper for the content is needed because we need two background images for the content area -- the repeating column part, and the top curved part. Since each div can only have one background image, we need to use two layered divs to create the effect. */
#content {
	background: ; /* Add a graphic to top part of content area, which lays over the repeating background image of the contentwrapper div to create the appearance of a single image. Set to only show once. */
	padding: 5px 0 0 0; /* Adds space between top of box and start of content so it doesn't cover up curved area. */
	position: relative; /* Allows the absolutely positioned #subnav div to base its position off #content. */
	color: #000; /* Sets color of text */
	font-size: 0.8em; /* Sets font size smaller than default. We can use ems safely in IE because we've set a percentage font size on the body. */
}
/* WinIE5 needs the following selector to display the padding in #content. This comment cannot be in the selector or it will trigger the end of the MacIE hide. */
/* hide from MacIE \*/
* html #content {
	height: 1%;
	}
/* end hide */

#logo {
	text-align: center; /* Centers the page contents in WinIE5.x. */
	color:#fff;
	font-size: 80%;
	font-weight: bold;
	background-color:#8091d1;
	background-image: url(../images/blu_bg.gif);
	background-repeat: repeat-y;
}

/* Right column for main text. */
#main {
	margin: 0 15px 10px 240px; /* Moves column to right */
	padding: 0 10px 0 0; 
}

/* Left column */
#subnav {
	position: absolute; /* Positions div in a precise spot in relation to its nearest positioned ancestor, which is #content. */
	width: 235px; /* Sets width. */
	top: 10px; /* Moves div down Xpx from the top of #content. */
	left: 2px; /* Moves div Xpx over from the left of #content. */
}
#subnav ul {
	margin: 0; /* Removes default list margin added by some browsers. */
	padding: 0; /* Removes default list padding added by some browsers. */
	list-style-type: none; /* Removes default list bullets. */
}
#subnav li {
	margin-top: 8px; /* Spaces list items out from each other. */
}
#subnav ul a:link, #subnav ul a:visited {
	color: #036; /* Sets link color of unvisited and visited links to dark purple. */
	text-decoration: none; /* Removes default link underlines. */
	padding: 2px 4px; /* Creates space around links so that background color set in selector below does not so tightly enclose link text. */
}
#subnav ul a:hover, #subnav ul a:active, #subnav ul a:focus {
	color: #039; /* Sets link color to brighter blue on hover, activation, and focus. */
	background: #CCC; /* Sets background color to light gray on hover, activation, and focus. */
}

/* Footer for page. */
#footer {
	background: url(../images/footer.jpg) no-repeat; /* Sets curved bottom part of background image of div above. Since #footer butts up against #contentwrapper, it creates the appearance of a single image. Image set to appear only once. */
	padding: 15px 0 15px 0; /* Creates room for background image to display, so text starts below end of image. */
	color: #FFFFFF; /* Sets text color to very light gray. */
	font-size: 0.7em; /* Sets font size smaller than default and smaller than content text. */
}
#footer p {
	margin: 0; 
	text-align: center;
}

#footer p, #footer ul {
	display: inline-block; /* Prevents MacIE from expanding the floats to 100%, which would keep them from sitting on the same line. */
}
/* The following selector overwrites the display value of the paragraph and list back to the correct value, but is hidden from MacIE so it still gets the value it needs. */
/* hide from MacIE \*/
#footer p, #footer ul {
	display: block;
}
/* end hide */
#footer li {
	display: inline; /* Makes list items display horizontally. */
	margin: 0; /* Removes default margin some browsers add to list items. */
	padding: 0; /* Removes default padding some browsers add to list items. */
}
#footer a {
	color: #E5E5E5; 
	text-decoration: none;
	}
#footer a:hover {
	color: #f89901; /* Sets color of links on hover to white. */
	}

/* GENERAL --------------------------------------- */
h1 {	font-size: 160.01%;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight:bold; }
h2 {
	font-size: 135%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold; }
h4 {
	font-size: 120%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold; }
h3 {
	font-size: 120%;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight:bold; }
h5, h6 {
	font-size: 100.01%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold; }
p {line-height:1.3em;
margin-bottom:.5em;
}

/*begin laying out the form - the form has it's own container #formcontainer*/
#formcontainer {
	width: 500px;/*set the width of the form container*/
	margin: 0px 0px 0px 0px;/*margins are set in content div*/
}

/*set the h1 element in the form container*/

/*style the p in the form container*/
#formcontainer p {
	font-size: 90%;/*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: #000;/*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: #000;/*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 height for the textarea*/
}

/* shows focus in the form inputs and textarea */
#formcontainer input:focus, #formcontainer textarea:focus {
	background-color: #FFFF99; /*set the background colour of the input and textarea when the cursor is inside*/
   color: #333; /*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 {
	font-size: 100%;/*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: 10px 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: #4f4f4f;/*set the text colour*/
	font-weight: bold;/*set the font weight to bold*/
	font-family: Arial, Helvetica, sans-serif;/*set the font family*/
	background-color: #EAEEDD;/*set a background colour*/
	border: 1px solid #000;/*set a border around the legend*/
	padding: 4px;/*set alittle padding to give it some space against the border*/
	font-size: 100%;/*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: #4F4F4F;/*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*/
}

#whitebox {background-color:#fff; border:1px #999 solid; padding: 8px;}