/**   Styles for "Screen" Media
*     File: styles.css
*     Author: Nate Hanna
*     Auth Web: http://www.mediasation.com
*     modified: 27 June 2008 @ 08:10 EST
* --------------------------------------------------------------
**/

/** Element/Global Styles (including Typography)
-------------------------- **/
html {
	font-size: 62.5%; /* about 10px if browser size is set at default (16px) */
   font-family: "Trebuchet MS", Arial, Helvetica, Geneva, "microsoft sans serif", sans-serif;
   background: #000 url('../images/bg_html.jpg') center top repeat-x;
   
}
body { background: transparent url('../images/bg_body.jpg') center top no-repeat; }
   a {
		color: #002886;
		text-decoration: underline;
	}
   	a:hover { text-decoration: none; }
   	a:visited { color: #655C55; }
   	a img { border: 0; }
    
h1, h2, h3, h4, h5, h6, #topNavigation { font-family: Georgia, "New York", Garamond, "Times New Roman", Times, serif; }
   h1, h2, h3, h4, h5, h6 {
   	margin-top: 0.5em;
   	line-height: 1.25em;
   	font-weight: normal;
   }
   	h1 { font-size: 2.0em; }
   	h2 { font-size: 1.8em; }
   	h3 { font-size: 1.5em; }
   	h4 { font-size: 1.3em; }
   	h5 { font-size: 1.1em; }
   	h6 { font-size: 0.9em; }

p { margin-bottom: 1.6em; }

div.hr {
	height: 1px;
	margin: 1.6em 0 1.6em 0;
	background: #8A8278 no-repeat scroll center;
}
	div.hr hr { display: none; }

#wrapper {
	position: relative;
	width: 950px;
	margin: 0 auto;
}

#moonimg {
   position: absolute;
   top: 0;
   right: 0;
   background: transparent url('../images/bg_moon.png') left top no-repeat;
   width: 147px;
   height: 108px;
   z-index: 1;
}

pre { color: #FFF; }

/** Header
-------------------------- **/
/** @group header */
#header {}
#header #banner {
	width: inherit;
	height: 130px;
}
#header #banner a, 
#header #banner a:visited {
	position: absolute;
	display: block;
	background: url("../images/logo.png") 0 0 no-repeat;
	text-indent: -10000px;
	width: 370px;
	height: 110px;
	text-decoration: none;
	overflow: hidden;
	z-index: 5;
	top: 13px;
	left: 50%;
	margin-left: -185px;
}
/* @end header **/

/** @group highlight */
#highlight {
   position: absolute;
   border: 1px solid #EDE6D4;
   width: 948px;
   height: 363px;
   padding-top: 44px;
   top: 130px;
   left: 0;
}
   #home #highlight { background: transparent url('../images/bg_highlight-home.jpg') left 44px no-repeat; }
/** @group topNavigation */

#topNavigation {
   width: 948px; 
   background: transparent url('../images/bg_navigation.jpg') left 12px no-repeat;
/*   border-bottom: 1px solid #EDE6D4;*/
   height: 69px;
   position: absolute;
   top: -12px;
   left: 0;
}

#topNavigation ul {
	padding: 0 10px;
	list-style: none;
}

#topNavigation ul li {
   display: inline;
   float: left;
}

#topNavigation ul li a {
	display: block;
	text-transform: uppercase;
	color: #FFF;
	float: left;
	font-size: 1.6em;
	text-decoration: none;
	letter-spacing: 0.1em;
	text-shadow: #171818 0.1em 0.1em 4px;
}
   #topNavigation ul li a span {
      display: block;
      padding: 26px 40px;
      padding-bottom: 25px;
   }
   #topNavigation ul li a:hover { text-decoration: underline; }
      #topNavigation ul li.selected a {
         color: #FFCC33;
         background: transparent url('../images/bg_nav_L.png') left top no-repeat;
      }
         #topNavigation ul li.selected a span { 
            padding-left: 25px;
            background: transparent url('../images/bg_nav_R.png') right top no-repeat;
         }

/* @end topNavigation **/
/** @group marginSlot */
#home #marginSlot {
   width: 400px;
   float: left;
   font-size: 1.4em;
   color: #FFF;
   line-height: 1.5em;
}
   #home .margincontent {
      display: block;
      padding: 43px;
   }
/* @end marginSlot **/
#home #hdrPhotos { padding: 8px; text-align: center; }
/* @end highlight **/


/** ContentWrapper
-------------------------- **/
/** @group contentWrapper */
#contentWrapper {
   margin-top: 409px;
   background: #EDE6D4 url('../images/bg_wrapper.jpg') top left repeat-y;
   border: 1px solid #EDE6D4;
   border-top: 0;
   min-height: 250px;
}
/** @group contentSlot */
#contentSlot {
   width: 643px;
   float: right;
   font-size: 1.3em;
   line-height: 1.5em;
   color: #423B21;
}
   #contentSlot h1 { font-size: 2.6em; }
#layout {
   padding: 34px;
   padding-top: 10px;
}
/* @end contentSlot **/
/** @group sideBar */
#sideBar {
   width: 305px;
   float: left;
}
/** @group sideBarNavigation */
#sideBarNavLabel {
   width: 306px;
   height: 89px;
   text-indent: -10000px;
   overflow: hidden;
   margin: 0;
   background: transparent url('../images/bg_hdr_margin.jpg') top left no-repeat;
}
#sideBarNavigation ul { list-style: none; }
#sideBarNavigation ul li a {
   display: block;
   width: 306px;
   text-indent: -10000px;
   overflow: hidden;
}
   #sideBarNavigation ul li.edible_plants a { background-image: url("../images/bg_nav_overview.jpg"); height: 83px; }
   #sideBarNavigation ul li.past_photos a { background-image: url("../images/bg_nav_faqs.jpg"); height: 92px; }
   #sideBarNavigation ul li.get_directions a { background-image: url("../images/bg_nav_for_campers.jpg"); height: 98px; }
   #sideBarNavigation ul li.lost_in_woods a { background-image: url("../images/bg_nav_what_to_pack.jpg"); height: 90px; }
   #sideBarNavigation ul li.what_to_pack a { background-image: url("../images/bg_nav_directions.jpg"); height: 90px; }
/* @end sideBarNavigation **/

/* @end sideBar **/
/* @end contentWrapper **/


/** Footer
-------------------------- **/
/** @group footer */
#footer {
	text-align: right;
	padding: 8px 5px 20px 5px;
	color: #4C4F52;
	font-weight: bold;
	line-height: 1.25em;
}
   #footer a { 
      color: #4C4F52;
      text-decoration: none;
   }
      #footer a:hover { text-decoration: underline; }
/* @end footer **/


/** @group formContent */
#formContent input.input, #formContent textarea.textarea, #formContent select { border-color: #B2A97F; }
#formContent select { padding: 0; }
#formContent input.submit {
   background-color: #210000;
   border-color: #130000;
   border-left-color: #510000;
   border-top-color: #510000;
   color: #FFF;
}
/* @end formContent **/


/** Class Styles
-------------------------- **/

.hidden {
	display: none;
}

.clear {
  clear:both;
  height:1px;
  overflow:hidden;
  margin-bottom:-1px;
}