/* Set base values on the body for a variety of properties. */
body {
	margin: 0;
	padding: 0;
	background: url(../images/bg1.gif) 20% 0 #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #FFFFFF;
	}

/* Needed for the second background image to be placed on. */
#wrapper-outer {
	background: url(../images/bg2.jpg) 20% 0 no-repeat; /* Sets clouds background image and positions its 20 percent spot 20 percent across the page. Since this image should show at the top of the page only, it's set to not repeat. */
	}

#header {
	position: relative;
	border-bottom: 5px solid #000;
	height: 150px;
	}

/* Needed to hold link to main content in compliance with Section 508, rule o. */
#skipnav {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to its nearest postioned ancestor, #header. Also removes it from the flow, so it will not make the header expand. */
	top: 0; /* Places the div at the top of #header. */
	left: 0; /* Places the div at the left side of #header. */
	margin-left: -1000px; /* Moves the div off the left side of the screen, making it invisible to those using visual browsers but accessible to those using screen readers and other user agents. */
	}

#logo {
	width: 20%; /* Sets width of div logo will sit in to 20 percent, the same width of the left column below. */
	text-align: center; /* Makes the logo image within the div centered horizontally. */
	}

/* Applied directly to ul element to create the main nav bar. */
#mainnav {
	position: absolute;
	bottom: 0;
	right: 16px;
	margin: 0 -16px 0 0;
	padding: .5em 0;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	background: url(../images/mainnav-bg.jpg) repeat-x #FFCC33;
	list-style: none;
	font-size: 0.9em;
	background-color: #ffcc33;
	height: -12px;
	}

/* The following selector resets the padding on the unordered list to zero because WinIE5 mistakenly expands the list too greatly. The second rule in the selector then resets the padding to the correct value so that WinIE6 gets the value it needs. WinIE5 cannot read this rule because of the backslash that is in it. */
/* These comments were not placed within the following selector because that would break the hack that keeps MacIE from reading the rules. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #mainnav {
	padding: .5em 0;
	paddi\ng: .5em 0;
	background-color: #FFFFFF;
	}
/* end hide */

#mainnav li {
	display: inline;
	border-right: 1px solid #000;
	padding: .5em .5em;
	white-space: nowrap;
	}

* html #mainnav li {
	height: 1%; /* WinIE5 needs this to show the padding and borders on the buttons. IE incorrectly expands blocks to hold their content, so it will not actually display at 1 percent height. This rule is hidden from non-IE browsers by setting "* html" at the beginning. */
	}

#mainnav a {
	color: #000; /* Sets the color of the links in the nav bar to navy blue. */
	text-decoration: none; /* Removes the underline from the links. */
	font-weight: bold; /* Sets the link text to bold. */
	}

#mainnav a:hover {
	color: #999999;
	}

/* Needed for the third background image to the be placed on. Does not wrap around header div since its background image, a vertical line simulating a border, should not appear through the header */
#wrapper-inner {
	background: url(../images/bg3.gif) 20% 0; /* Sets the background image and positions its 20 percent spot 20 percent across the div. This image creates the navy blue divider line between the left and center columns. */
	position: relative; /* Needed to keep right column from disappearing in WinIE. */
	margin-top: 5px; /* Sets space between bottom border of header and top border of this div. */
	padding-bottom: 150px; /* Gives the footer room to overlap without covering up any content within wrapper-inner. */
	border-top: 1px solid #000; /* Sets thin top border. */
	}

/* Wraps around left col, #secnav, and center column, #contentwrapper. */
#floatwrapper {
	float: left; /* Moves div to the left, creating a large column to the left of #features that will then be further divided. */
	width: 70%; /* Sets width to 80 percent of the window. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100; /* See note above. */
	}

/* Forms the right column within #floatwrapper. Wraps around #content so that #content can have margins applied so its text won't butt up against the adjacent columns. If padding were used to do this, it would throw the widths off and cause content to not fit on screen. */
#contentwrapper {
	width: 72%; /* Sets width to 74 percent of #floatwrapper. This width was chosen because the secondary nav column needs to be set at 25 percent, because 25 percent of 80 percent (the width of #floatwrapper) is 20 percent, the width we want the left column to take up in relation to the window. That leaves 75 percent for this column, but rounding errors and browser miscalculations can make either column slightly too big. Setting it to a lower number so the total combined widths are less than 100 percent keeps these errors from throwing off the design. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100; /* See note above. */
	margin-left: 190px;
	}

#content {
	margin: 1.5em 0 0 55px;
	}


#content a.selected, #content a:hover.selected	{
	color:#999999;
	text-decoration: none;
}

/* Left column for the secondary navigation. */
#secnav {
	float: left; /* Moves column to the left of #contentwrapper. */
	width: 175px; /* Sets width to 25 percent of #floatwrapper, which equates to 20 percent of the window, because .25 x .8 = .2 */
	padding-top: 1.5em; /* Sets space between top of div and where text starts displaying. */
	font-size: 0.8em; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100;
	position: absolute;
	top: 5px;
	left: 5px;
	}

#secnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: LEFT;
	margin-left: 5px;
	}

#secnav li {
	display: inline; /* Keeps WinIE5 from adding extra space between list items. */
	}

#secnav a {
	display: block; /* Makes anchor fill up entire list item so that list items will not display horizontally, as they would otherwise because of the display: inline set above. */
	margin-bottom: 0.8em; /* Sets space between list items. */
	padding-right: 15px; /* Moves text over from the right so that image that shows on roll over has room to display. */
	color: #000; /* Sets color of link text to navy blue. */
	text-decoration: none; /* Removes underline on links. */
	font-weight: bold; /* Makes links bold. */
	}

#secnav a:hover {
	color: #CCCCCC;
	}
	
#secnav ul a.selected, #secnav ul a:hover.selected	{
	color:#999999;
}


/* Right column for feature items, news, etc. */
#features {
	float: right; /* Moves column to right side of window across from #floatwrapper. */
	width: 16%; /* Set to 16 percent instead of 20 left over after the 80 percent taken by #floatwrapper to give browsers extra room for rounding errors, etc. Setting this to a larger value causes WinIE to drop the right column at smaller window sizes. */
	margin-top: 1.5em; /* Sets gap between top border of #wrapper-inner and top of column. */
	border-left: 1px solid #000; /* Sets left border. */
	border-bottom: 5px solid #000; /* Sets bottom border. */
	font-size: 0.75em; /* Sets font size smaller than default. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 100; /* See note above. */
	}

#features h2 {
	margin: 0 0 0.5em 0; /* Sets space beneath header text. */
	padding: 3px; /* Sets space between header text and edge of background. */
	background: url(../images/feature-header-bg.jpg) repeat-x #ffcc33; /* Sets background image and tiles it horizontally. Also sets backup background color. */
	font-size: 1.1em; /* Sets font size larger than default. */
	}

* html #features h2 {
	width: 100%; /* WinIE wants a dimension in order to show the background. Hidden from non-IE browsers because it causes a persistant horizontal scroll in them. */
	}

/* Used to group each feature item in the column. */
#features div {
	margin: 0 0 1em 0; /* Spaces each box in features column out from one another */
	}

#features p {
	margin: 0.5em 0.5em 0 0.5em; /* Spaces paragraphs away from the sides of the column and the headers. */
	padding-bottom: 1em; /* Spaces paragraphs away from one another using padding instead of margin because bottom margin will collapse outside the box but padding will not. */
	}

/* Creates footer that is fixed at the bottom of the window in standard compliant browsers and pinned to the bottom of the page in WinIE. */
#footer {
	position: fixed; /* Fixes footer in relation to the window so it always appears on screen and other content scrolls behind it */
	bottom: 0; /* Sets footer to appear at bottom of screen. */
	left: 0; /* Sets footer to appear at left side of screen. Needed for WinIE to position correctly. */
	width: 100%;
	border-top: 5px solid #000; /* Sets thick border at top of footer. */
	background: #fff; /* Sets background color to white. */
	color: #000; /* Sets color of text to green. Since the only text in the current design are the pipes between the links, this makes the navy blue links stand out. */
	z-index: 100000000; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding a really high z-index to the footer, plus lower z-index and position: relative to all the floats, fixes this. */
	margin-top: 50px;
	}

/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* The margin rule below gets rid of a one pixel gap below footer in WinIE. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #footer {
	position: absolute;
	margin-bottom: -1px;
	}
/* End hide from MacIE. */

/* Image is placed outside of footer div to avoid a gap it creates beneath the footer in WinIE. */
#footerimage {
	position: fixed; /* Opera does not display the image if set to position: absolute, so fixed is used instead. This rule is hidden from WinIE because it does not support fixed positioning, and thus needs the absolute to pin the image correctly. */
	bottom: 0; /* Makes the image stick to the bottom of the page, no matter what the font size. */
	left: 0; /* Makes the image stick to the left of the footer. */
	margin-top: -190px; /* Moves the top of the image outside the top edge of its container, #footer. */
	z-index: 1000000000; /* Sets z-index to exceed #footer to ensure that it displays on top of the footer bar, since it is before #footer in the source. */
	}

/* The following selector sets the footer to absolute instead of fixed in WinIE because WinIE does not support position: fixed. Setting it to absolute means it will display at the bottom of the page instead of the bottom of the window. */
/* Hide from MacIE. Only WinIE sees this. \*/
* html #footerimage {
	position: absolute;
	}
/* End hide from MacIE. */

#footer ul {
	margin: 5px 0 0 0; /* Sets space between thin top border on list and thick top border on footer as a whole. */
	padding: 0.8em 0 1em 192px; /* Sets spacing between top and bottom edges of footer and the list; padding is used instead of margin because padding cannot escape out of divs like margins can. Also moves the list over from the left to make room for the trees image; padding is used instead of margin so that the content within the list will move over, not the list itself, so that the border will show in the gap between the trees. */
	border-top: 1px solid #000; /* Sets top border. */
	}

#footer li {
	display: inline; /* Makes list items display horizontally */
	}

#footer a {
	margin: 0 0.2em; /* Sets spacing between links and pipe separators */
	font-size: 0.8em; /* Sets font size smaller for the links so the pipes are larger in comparison, making the separators more apparent. */
	}


/* CLEARING 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 */


/* HEADINGS --------------------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif; /* Sets default font family options of headers */
	}

h1 {
	margin: 0 0 1.2em 0; /* Sets spacing between heading text and text above or below */
	font-size: 1.4em; /* Sets font size larger than default */
	}

h2 {
	margin: 1.2em 0 1em 0; /* Sets spacing between heading text and text above or below */
	font-size: 1.2em; /* Sets font size larger than default */
	}

h3 {
	margin: 1.2em 0 0.5em 0; /* Sets spacing between heading text and text above or below */
	font-size: 1.1em; /* Sets font size larger than default */
	}

h4 {
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-size: 1em; /* Sets font size at same size as default */
	}

h5 {
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-family: Arial, Helvetica, sans-serif; /* Sets font family options */
	font-size: 1em; /* Sets font size at same size as default */
	}

h6 {
	margin: 0; /* Sets spacing between heading text and text above or below */
	font-family: Arial, Helvetica, sans-serif; /* Sets font family options */
	font-size: 0.9em; /* Sets font size smaller than default */
	}

p {
	margin-top: 0; /* Removes top margin on paragraphs so they can sit up against their headings where applicable. Paragraphs are still spaced out from one another through their bottom margins, which have not been removed. */
	}


/* LINKS ------------------------------------------------------------------------------------------------------------------------ */
a:link {
	color: #000000; /* Sets default link color */
	}
a:visited {
	color: #333333; /* Sets default link color on visited links */
	}
a:hover {
	color: #666666; /* Sets default link color while rolling over links */
	}
a:active {
	color: #000; /* Sets default link color when links are active */
	}
a img {
	border: none; /* Removes border that appears around an image when it is nested inside an anchor, such as the logo image */
	}


/* IMAGES IN CONTENT DIV -------------------------------------------------------------------------------------------------------- */
.left {
	float: left; /* Moves the image to the left and makes the text flow around its right. */
	border: 1px solid #1c306b; /* Sets border around image. */
	margin: 5px 10px 0 0; /* Sets space between image and text. The top margin aligns the image with the top of the p element. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 200; /* See note above. */
	}

.right {
	float: right; /* Moves the image to the right and makes the text flow around its left. */
	border: 1px solid #1c306b; /* Sets border around image. */
	margin: 5px 10px 0 10px; /* Sets space between image and text. The top margin aligns the image with the top of the p element. */
	position: relative; /* Because of MacIE's faulty positioning and float models, all floated objects will overlap the background and borders of the fixed footer. Adding position: relative and a smaller z-index than the footer to all the floats fixes this. */
	z-index: 200; /* See note above. */
	}