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

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

#wrapper {
	width: 482px;
	margin:auto;
}

/*----------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: 482px; /* 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. */
}

#header p {
	text-align: center;
}

#header img {
	margin-top: 10px;
}

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

#innerwrapper {
	/* float: left;  Floats the innerwrapper left. */
	width: 482px; /* Sets the width to 482 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.gif) 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: 482px; /* Sets the width to 445 pixels. */
	margin: 0 15px 0 15px; /* 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 10px 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 h2 {
	padding: 10px 20px 5px; /* Sets padding around the heading 2 text. */
	font: 110% 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 1em .6em 1em; /* 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. */	
}
#content li {
	margin: 0 1em 0 1em; /* Sets margin space around the paragraph text. */
	font-size: 85%; /* Sets the relative font size of paragraph text. */
	line-height: 1.2; /* Sets the leading (spacing) between lines of text. */	
}

#content ol, ul {
margin: 1em 1em .6em 1em; /* Sets margin space around the paragraph text. */
}
/*----------Sets the styles for the footer area.----------*/

#footer {
	background: url(../images/footer_bg.gif) no-repeat; /* Sets the non-repeating background image on the footer */
	width: 482px; /* Sets the width of the footer DIV to 482 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: 62px; /* 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: #000000; /* Sets the text color to white. */
	padding-top: 35px; /* Adds 35 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: #000000; /* Sets links in the footer to black. */
}

/*----------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. */
	margin-left: 5px;
}

.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. */
	margin-right: 10px;
}