/* --- start defaults --- */
* {
  margin: 0;
  padding: 0;
  font: normal 12px/14px verdana;
  color: #000;
  list-style: none;
  text-decoration: none;
  border: 0;
}
body {
  background: #2b6393;
}
h1 {
  border-bottom: 2px solid #518ec2;
  font-size: 1.8em;
  line-height: 2em;
}
h2 {
  font-size: 1.4em;
  line-height: 1.6em;
  border-bottom: 1px solid #518ec2;
}
h2 em {
  font-size: .6em;
  margin-top: 10px;
  color: #518ec2;
  float: right;
  display: block;
  font-style: italic;
}
/*
h2 em:before {
  content: "[";
}
h2 em:after {
  content: "]";
}
*/
/* --- end defaults --- */

/* this will be the header, body and footer content container */
.content {
  margin: 0 auto;
  width: 800px;
  overflow: auto;
}

/* --- start header --- */
#header { /* header is a container for the content class */
  height: 100px;
}
#header .content {
  background: url(../images/header.png) -15px 0 no-repeat;
}
#header .hang { /* creates a 'hang' of the main body class "over top" of this header */
  margin: 90px 0 0 0;
  background: #fff;
  height: 10px;
}
  /* --- start navigation --- */
#header ul {
  float: right;
  margin: 66px 0 0 0;
}
#header li { /* link OFF, hover OFF */
  float: left;
  background: url(../images/navigation.png) 100% -306px no-repeat;
  padding-right: 13px;
}
#header li a { /* link OFF, hover OFF */
  display: block;
  background: url(../images/navigation.png) 0% -306px no-repeat;
  padding: 5px 0 5px 13px;
  color: #fff;
}
#header li:hover { /* link OFF, hover ON */
  background: url(../images/navigation.png) 100% -204px no-repeat;
}
#header li:hover a { /* link OFF, hover ON */
  background: url(../images/navigation.png) 0% -204px no-repeat;
  color: #fff;
}
#header li.current { /* link ON, hover OFF */
  background: url(../images/navigation.png) 100% -102px no-repeat;
}
#header li.current a { /* link ON, hover OFF */
  background: url(../images/navigation.png) 0% -102px no-repeat;
  color: #000;
  font-weight: bold;
}
#header li.current:hover { /* link ON, hover ON */
  background: url(../images/navigation.png) 100% 0% no-repeat;
}
#header li.current:hover a { /* link ON, hover ON */
  background: url(../images/navigation.png) 0% 0% no-repeat;
}
  /* --- end navigation --- */
/* --- end header --- */

/* --- start body --- */
#body { /* body is a container for the content class */
  overflow: auto;
  background: #518ec2;
}
#body .content {
  border-left: 1px solid #2b6393;
  border-right: 1px solid #2b6393;
  background: #fff;
}
  /* --- start side panel --- */
#side {
  float: left;
  width: 200px;
}
#side .hours-extra {
  display: block;
  text-align: center;
  margin: 5px 0 5px 20px;
  font-size: 9px;
  font-style: italic;
}
#hours {
  border: 2px solid #518ec2;
  margin: 20px 0 0 20px;
  padding: 0 10px;
  width: 155px;
}
#hours * {
  font-size: 10px;
  margin: 0;
  padding: 0;
}
#hours table {
  margin: 10px auto;
  width: 100%;
}
#hours th {
  text-align: left;
}
#hours td {
  text-align: right;
}
#hours th, #hours td {
  border-top: 1px dotted #518ec2;
}
#hours tr.first th, #hours tr.first td {
  border: 0;
}
#hours tr.holiday * {
  border: 0;
  padding-top: 10px;
}
#hours th.header {
  text-align: center;
  font-weight: bold;
  border: 0;
  padding-bottom: 10px;
}
#panel {
  height: 360px;
  width: 175px;
  margin: 42px 0 0 20px;
  border: 2px solid #518ec2;
}
#panel.home { background: url(../images/sides/water.jpg) no-repeat; }
#panel.about { background: url(../images/sides/treesfall.jpg) no-repeat; }
#panel.history { background: url(../images/sides/winter.jpg) no-repeat; }
#panel.activities { background: url(../images/sides/riding.jpg) no-repeat; }
#panel.wildlife { background: url(../images/sides/elk.jpg) no-repeat; }
#panel.plantlife { background: url(../images/sides/treesgreen.jpg) no-repeat; }
#panel.trailmap { background: url(../images/sides/river.jpg) no-repeat; }
  /* --- end side panel --- */
  /* --- start actual content --- */
#content {
  width: 600px;
  float: right;
  background: #fff;
}
#content h1 {
  margin: 0 20px;
}
#content p {
  text-align: justify;
  margin: 20px;
}
#content li { 
  overflow: auto;
}
#content ul {
  margin: -20px 20px 0 60px;
}
#content ul li {
  list-style: disc inside url(../images/bullet.png);
}
#content ol {
  margin: 0 20px;
}
#content li div {
  width: 100px;
  height: 100px;
  float: right;
  border: 2px solid #518ec2;
  margin: 20px 0 10px 10px;
}
#content li p {
  margin: 20px 0;
}
.trailmap {
  width: 440px;
  margin: 0 auto;
}
.trailmap iframe {
  clear: both;
  margin-top: 30px;
  width: 440px;
  height: 440px;
  border: 2px solid #518ec2;
}

    /* --- start promo table --- */
#promo-table {
  overflow: auto;
  clear: both;
  width: 100%;
  margin: 15px auto 30px auto;
}
#promo-table .promo {
  float: left;
  width: 200px;
  height: 150px;
  position: relative;
  padding-bottom: 25px;
}
#promo-table .promo div {
  width: 150px;
  height: 100px;
  margin: 0 auto 10px auto;
  border: 2px solid #518ec2;
}
#promo-table p {
  margin: 0 20px;
  text-align: center;
  font-size: .8em;
  font-style: italic;
}
#promo-table a {
  position: absolute; /* position this absolutely, otherwise they don't line up! */
  right: 0;
  bottom: 0;
  clear: both;
  margin-right: 25px;
  display: block;
  background: url(../images/arrow.png) 0 4px no-repeat;
  padding-left: 14px;
  font-weight: bold;
}
#promo-table a:hover {
  color: #518ec2;
}
#promo-wildlife { background: url(../images/promo_wildlife.jpg); }
#promo-activities { background: url(../images/promo_activities.jpg); }
#promo-tours { background: url(../images/promo_tours.jpg); }
    /* --- end promo table --- */
    /* --- start wildlife thumbnails --- */
#muledeer { background: url(../images/wildlife/muledeer_tn.jpg); }
#blackbear { background: url(../images/wildlife/blackbear_tn.jpg); }
#coyote { background: url(../images/wildlife/coyote_tn.jpg); }
#snowshoehare { background: url(../images/wildlife/snowshoehare_tn.jpg); }
#flyingsquirrel { background: url(../images/wildlife/flyingsquirrel_tn.jpg); }
#deermouse { background: url(../images/wildlife/deermouse_tn.jpg); }
#mallard { background: url(../images/wildlife/mallard_tn.jpg); }
#killdeer { background: url(../images/wildlife/killdeer_tn.jpg); }
    /* --- end wildlife thumbnails --- */
  /* --- end actual content --- */
/* --- end body --- */

/* --- start footer --- */
#footer { /* footer is a container for the content class */
  overflow: auto;
}
#footer * {
  font-size: .9em;
  color: #fff;
}
#footer .hang { /* creates a 'hang' of the main body class "over top" of this footer */
  background: #fff;
  height: 30px;
  margin-bottom: 15px;
}
#footer .content {
  padding-bottom: 15px;
}
#footer a {
  border-bottom: 1px dotted #fff;
}
#footer .author {
  float: left;
}
#footer .note {
  float: right;
  font-style: italic;
}
/* --- end footer --- */