/*----------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: #B5804A url(image/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. */
	font-family: Arial, Helvetica, sans-serif;
}

/*----------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. */
}

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

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

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

#header {
	background: url(image/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: 480px; /* Sets the header width the same as its background image. */
	margin-left: 280px; /* Sets the left margin to carve out space for the sidebar and navigation area. */
	text-align: left;
	font-weight: bold;
	font-style: normal;
	font-size: x-large;
	vertical-align:middle;
}

#header img {
	margin-left: 1px; /* Moves the logo image over a pixel so it doesn't cover the white border on the background image.  */
}

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

#innerwrapper {
	float: left; /* Floats the innerwrapper left. */
	width: 760px; /* 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(image/content_bg.jpg) 280px 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: 445px; /* Sets the width to 445 pixels. */
	margin: 0 15px 0 35px; /* 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 {
	padding: 10px 20px 5px; /* Sets padding around the heading 1 text. */
	font: 120% Georgia, "Times New Roman", Times, serif; /* Sets the font size and face. */
	color: #69592C; /* Sets the text color of the heading 1 text. */
}

#content p {
	margin: 1em 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: right; /* Floats the sidebar DIV to the right. */
	width: 250px; /* 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. */
}

#sidebar p {
	font-size: 80%; /* 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: 130px; /* 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: 240px; /* Sets the width of the navigation area to 240 pixels. */
	height: 185px; /* 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: 5px 0 5px 0; /* Pads the top and bottom of the link. */
} 

#nav a:link, #nav a:visited { 
    color: #B6804B; /* Sets the text color of links and visited links. */ 
    text-decoration: none; /* Removes underlines from links. */ 
    font-family: Georgia, "Times New Roman", Times, serif; /* Sets the font to common serif fonts. */ 
} 

#nav a:hover, #nav a:active, #nav a:focus { 
    color: #473B20; /* 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(image/nav_bg.jpg) 0 7px no-repeat; /* Sets a decorative image for the links. */ 
} 

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

#footer {
	background: url(image/footer_bg.jpg) no-repeat; /* Sets the non-repeating background image on the footer */
	width: 480px; /* Sets the width of the footer DIV to 480 pixels. */
	margin-left: 280px; /* 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. */
}
.leftnb {
	float: left;/*float the image to the left*/
	border: 0px solid #000;/*add a border around the image*/
	margin: 15px 20px 5px 0;/*set a margin to the top and right to give clearance against the text the top margin aligns the image with the top of the p element*/