/*----------Zero out elements----------*/

html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, input {
	margin: 0; /* Zeros out the various default values browsers place on elements to give a consistent starting point. */
	padding: 0;
	border: 0;
}

/*----------Set body rule----------*/

body {
	background: #406324 url(../images/body_bg.jpg) repeat-x; /* Sets the body background color and a background image that repeats on the x-axis. */
	font: 100.01% Arial, Helvetica, sans-serif; /* Sets the base font size and face. */
}

a:link, a:visited { 
    color: #D25C38; /* Sets the text color of links and visited links. */ 
    text-decoration: none; /* Removes underlines from links. */ 
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Sets the font to common serif fonts. */ 
} 

a:hover, a:active, a:focus { 
    color: #9B3E1F; /* Sets the color of the text when the link is in the hover, active, or focus state. */ 
}

/*----------Sets the styles for the skip to navigation link----------*/

#skip {
	position: absolute; /* Sets the skip DIV to absolute to take it out of the flow of the document; this allows it to be placed in an exact location. */
	left: -3000px; /* Adds a high negative margin to take the skip DIV off the viewport so that visual visitors do not see it. */
	visibility:hidden;
}

/*----------Sets the width of the main wrapper that will contain all the other DIVs----------*/

#wrapper {
	width: 860px; /* Makes the main wrapper 760 pixels wide. */
}

/*----------Sets the header area styles. ----------*/

#header {
	background: url(../images/header_bg.jpg) no-repeat; /* Sets the header background image with no repeat. */
	height: 136px; /* Sets the height of the header DIV to the height of its background image. */
	width: 590px; /* Sets the header width the same as its background image. */
	margin-left: 260px; /* Sets the left margin to carve out space for the sidebar and navigation area. */
	color: #732D0C;
	font-size: 85%;
	font-family: "Lucida Sans", Verdana, Helvetica;
}

#header img {
	margin: 4px 25px 5px 25px;
}

/*----------Sets the innerwrapper DIV that encloses the two right-floated columns.----------*/ 

#innerwrapper {
	float: left; /* Floats the innerwrapper left. */
	width: 850px; /* Sets the width to 760 pixels to hold the two right-floated columns. */
	padding: 1px 0 1px 0; /* Adds one pixel of top and bottom padding to prevent margin escaping. */
	background: url(../images/content_bg.jpg) 260px 0 repeat-y; /* Sets the main content area background image. Repeats it on the y-axis, and starts it at 280 pixels horizontally and 0 vertically. */
}

/*----------Sets the styles for the content area of the page.----------*/

#content {
	float: right; /* Floats the content DIV right; floating both columns right allows the main content to come first in the source order. */
	width: 550px; /* Sets the width to 445 pixels. */
	margin: 0 10px 0 25px; /* Sets margins around the content DIV to separate it from the sidebar and right edge of the innerwrapper. */
	display: inline; /* Fixes IE doubled float margin bug. */
}

#content h1, #content h2, #content h3 {
	padding: 6px 20px 0 0; /* Sets padding around the heading 1 text. */
	font: 120% Georgia, "Times New Roman", Times, serif; /* Sets the font size and face. */
	color: #000000; /* Sets the text color of the heading 1 text. */
}

#content p, #content td {
	margin: .6em 0 .6em 0; /* Sets margin space around the paragraph text. */
	font-size: 85%; /* Sets the relative font size of paragraph text. */
	line-height: 1.5; /* Sets the leading (spacing) between lines of text. */	
}

/*----------Sets the styles for the sidebar area.----------*/

#sidebar {
	float: left; /* Floats the sidebar DIV to the right. */
	width: 215px; /* Sets the width of the sidebar area. */
	margin-top: 200px; /* Sets a top margin on the sidebar area so that it starts beneath the navigation link area. */
	text-align: center;
	margin-left: 25px;
}

#sidebar p, #sidebar h1, #sidebar h2, #sidebar h3 {
	font-size: 90%; /* Sets the font size of paragraph text within the sidebar. */
	color: #fff; /* Sets the text color to white in the sidebar div. */
	margin: 1em 0 .6em 0; /* Sets margin space around sidebar paragraphs. */
}

/*----------Sets the styles for the navigation area.----------*/

#nav {
	left: 30px; /* Sets the left coordinate of the absolutely positioned nav DIV. */
	top: 126px; /* Sets the top coordinate of the absolutely positioned nav DIV. */
  position: absolute; /* Takes the nav DIV out of the flow of the document and places it at a set location. */
	width: 215px; /* Sets the width of the navigation area to 240 pixels. */
	height: 183px; /* Sets the height of the nav to match the height of the striped area of body background image. */
}

#nav a { 
    display: block; /* Changes the a element from its default inline display property to display as a block. */
    width: 100%; /* Sets the width of the block element to 100% of the nav DIV to make it fully clickable. */
    padding: 4px 0 4px 0; /* Pads the top and bottom of the link. */
} 

#nav a:link, #nav a:visited { 
    color: #FFFFFF; /* Sets the text color of links and visited links. */ 
    text-decoration: none; /* Removes underlines from links. */ 
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Sets the font to common serif fonts. */ 
} 

#nav a:hover, #nav a:active, #nav a:focus { 
    color: #000000; /* Sets the color of the text when the link is in the hover, active, or focus state. */ 
} 


#nav li { 
    padding-left: 20px; /* Pads the list item so that there is space after the decorative bullet. */
    font-size: 90%; /* Sets the font size of links. */ 
    list-style: none; /* Removes the default solid, round bullet from list items. */ 
    background: url(../images/nav_bg.jpg) 0 7px no-repeat; /* Sets a decorative image for the links. */ 
} 

/*----------Sets the styles for the footer area.----------*/

#footer {
	background: url(../images/footer_bg.jpg) no-repeat; /* Sets the non-repeating background image on the footer */
	width: 590px; /* Sets the width of the footer DIV to 480 pixels. */
	margin-left: 260px; /* Sets the margin to 280 pixels to carve out room for the sidebar area. */
	margin-bottom: 10px; /* Adds some space between the footer and the bottom of the viewport. */
	height: 63px; /* Sets the height to the height of the background image. */
	clear: both; /* Makes sure both floated columns in the main area are clear of content before the footer begins. */
}

#footer p {
	font-size: 75%; /* Sets the font size of footer paragraph text. */
	color: #fff; /* Sets the text color to white. */
	padding-top: 25px; /* Adds 25 pixels of padding to the top of the paragraph so that text starts further down the background image. */
	padding-bottom: 5px; /* Adds 5 pixels of padding to the bottom of the text. */
	text-align: center; /* Aligns footer paragraph text in the middle of the div. */
	
}
#footer a {
	color: #fff; /* Sets links in the footer to white. */
}

/*----------Right and left float classes to add to images.----------*/

.lftimg {
	float: left; /* Floats an image to the left and wraps text around it. */
	margin-right: 10px; /* Adds 10 pixels of margin space to the right of the image. */
}

.rghtimg {
	float: right; /* Floats an image to the right and wraps text around it. */
	margin-left: 10px; /* Adds 10 pixels of margin space to the left of the image. */
}
/*begin laying out the form - the form has it's own container #formcontainer*/
#formcontainer {
	width: 450px;/*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: #FFFFFF;/*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: #FFFFFF;/*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 {
	color: #333;/*set the text colour*/
	font-size: 85%;/*scale the font size off the body selector*/
	padding-top: 10px;/*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 10px;/*set the padding*/
	width: 435px;/*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: #FFFFFF;/*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: #9D3B1E;/*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: 95%;/*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: 4px;}