/* WNCOutdoors.info Layout CSS
 * If CSS is copyrightable:
 * Copyright 2005-2011 WNCOutdoors.info
 * 
 * Usage:
 * This script is free and unencumbered software released into the
 * public domain. It comes without any restrictions on what you may
 * do with it, and with no warranty whatsoever. Assume nothing works,
 * and you may be pleasantly surprised; and when it breaks, you get
 * to keep both pieces.
 * 
 * Colors:
 * C0B17E - page margin bg (orangish)
 * C8C898 - box dark BG
 * D8D8B8 - box medium BG
 * DEDEBD - box light BG
 * ABAA8B - dark border
 * 
 * Picasa web sizes:
 * 72, 144, 200, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
*/

/* Main page layout elements */
html, body {height:100%}

body{
  margin:0;
  padding:0;
  background: #DEDEBD;
  color: #ffffff;
}

/* Just turn off borders for linked images, mmmkay? */
a img{border: 0;}

#container{
  text-align:left;
  margin: 20px auto;
  width: 960px;
  background: white;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
}

/* This rule creates the head in which the main tabbed menu is contained */
#header{
  position: relative;
  padding: 0;
  margin: 0;
}

#pagetitle{
  margin: 0;
  font-size: 1.5em;
  line-height: 1.75em;
}

#breadcrumb{
  padding: 16px 0px 0px;
}

/* The following 5 rules create the top tabbed menu themselves */
nav#main {
  position: relative; display: block;
  margin: 10px auto 10px auto;
  padding: 0;
  width: 720px;
  overflow: hidden;
}

nav#main ul{
  position: relative;
  display: inline;
  list-style-type:none;
  margin: 0;
  padding: 0;
}

nav#main li{
  display: inline;
  font-weight: bold;
  padding-left: 10px;
}

nav#main li a{
  color: #000;
  font-size: 14px;
  line-height: 2em;
}

nav#main li a#active{
  color: #000;
  text-decoration: none;
  border-bottom: 10px solid #ABAA8B;
}

/* End rules for tabbed menu */

/* Main page layout */

#rightcolumn{
  position: relative;
  color: #000000;
  float: right;
  width: 773px;
}

#rightcolumn p:first-child {
  clear: left;
}

#mainContent{
  padding: 8px;
}

#headerButtons {
  margin-top: 4px;
  margin-right:3px;
}

#controls{
  position: relative;
  float: right;
  text-align: right;
  margin-right: 10px;
}

#cse-search-form{
  width: 225px;
  float: right;
  margin-top: 3px;
}

#leftcolumn{
  position: relative;
  float: left;
  width: 185px;
  color: #000000;
  margin: 0px; padding: 0px;
}

#leftcolhead {
  height: 200px;
  margin-bottom: 0;
}

.leftcolpad{
  padding:2px
}

#footer{
  clear: both;
  color: black;
}

#hikeRidePanels{
  position:relative;
  clear:both;
  padding-top: 5px;
}

#adColumn{
  position:relative;
  text-align: right;
  width: 300px;
  float: right;
  clear: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

#adLeaderboard{
  position: relative;
  width: 728px;
  height: 90px;
  margin: 0 auto;
}

.adMedRectangle{
  position: relative;
  width: 300px;
  height: 250px;
}

.ad31Rectangle{
  position: relative;
  margin: 5px 0px 0px 0px;
  width: 300px;
  height: 100px;
}

.adHalfBanner{
  margin: 5px 0px 0px auto;
  width: 234px;
  height: 60px;
}

#adFadeContainer img {
  border: 0;
    display:none;
    position:absolute;
    top:0; left:0;
}

/* End main page layout elements. */

/* HTML5 figure elements for images */
figure{
  overflow: hidden;
}

figure img{
  display: block;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ABAA8B;
  background-color: #DEDEBD;
  border-radius: 8px;
}

div.thumbPanel figure{
  width: 175px;
  height: 195px;
  float: left;
  margin: 0px 10px 10px 0px;
  text-align: center;
  overflow: hidden;
}

figcaption{
  font-size: 10px;
  font-style: italic;
  text-align: center;
  line-height: 14px;
}

figcaption a{
  font-size: 10px;
  font-style: italic;
}

/* New boxes. Deprecate everything else. */
.panel{
  overflow: hidden;
  padding: 10px;
  border: 1px solid #ABAA8B;
  background-color: #DEDEBD;
  width: 138px; /* Default for left menus - override locally */
}

.panel img{
  display: block;
  margin: 0 auto;
  border: 1px solid #ABAA8B;
}

.panel img.cover{
  float: left; clear: left;
  margin: 0px 10px 10px 0px;
}

.panel div.caption{
  margin-top: 10px;
  font-size: 10px;
  font-style: italic;
  text-align: justify;
}

.panel ul.menu{
  padding-left: 15px;
}

.panel ul.plain li{
  list-style: none;
}

.panel h4{
  margin-top: 0px;
  padding-top: 0px;
  text-align: center;
}

/* Some reasonbly obvious things to work with boxes and other elements. */
.round{
  border-radius: 8px;
}

.shadow{
  box-shadow: 5px 5px 5px #ccc;
}

.emhover:hover {
  background-color: #DEDEBD;
}

.auto{
  margin: 10px auto;
}

.expand{
  width: auto !important;
}

.tight{
  padding: 10px 0 !important;
}

.right{
  float: right; clear: right;
  margin: 10px 0px 10px 10px;
}

.left{
  float: left; clear: left;
  margin: 0px 10px 10px 0px;
}

.prop{
  float:right;
}

.clear{
  clear:both;
}

/* Control.tabs */
ul.tabs {
    list-style:none;
    margin:0;
    padding:0;
    clear:both;
    border-bottom:1px solid #ABAA8B;
    height:20px;
    clear:both;
}

ul.tabs li.tab {
    float:left;
    margin-right:7px;
    text-align:center;
}

ul.tabs li.tab a {
    display:block;
    height:20px;
    padding:0 6px 0 6px;
    background-color:#fff;
    color:#666;
    width:95px;
    border-style: solid;
    border-color: #ABAA8B;
    border-width: 1px 1px 0px 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

ul.tabs li.tab a:hover {
    color:#666;
}

ul.tabs li.tab a.active {
    background-color:#DEDEBD;
}
/* Control.tabs */

/* This replaces the old green "hr". DEPECATED-REMOVE. */                       
.line {
  width:100%;
  border-style:solid;
  border-width:0px 0px 2px 0px;
}

/* Table styles. Look around and see if these are still used. */
.table{border-collapse: collapse; position:relative}

.bhstatstable{
  position:relative;
  border-style: solid;
  border-color: #ABAA8B;
  border-width: 1px;
  padding:2px;
  text-align:center
}

.landmarkTable{
  position:relative;
  padding:3px;
}

.landmarkTable td{
  padding:5px;
}

.attrTable{
  border-style: solid;
  border-width: 1px;
  border-color: #ABAA8B;
}

.attrTable th span{
  font-weight:bold;
  cursor: pointer;
}

/* Correct IE spacing above and below search box */
form{
  border: 0px;
  margin:0px;
  padding:0px;
}

#comment-form label{
  display: block;
  float: left;
  width: 70px;
  padding: 0;
  margin: 5px 0 0;
  text-align: right;
}

#comment-form input{
  margin-left: 20px;
  margin-top: 10px;
  border: 1px solid black;
}

#comment-form textarea{
  margin-left: 20px;
}

#comment-form button{
  margin-left: 90px;
}

/* Link icons */
.linkNewWindow{
  padding-left: 25px;
  line-height: 20px;
  background: url('/images/icons/wncoutdoors/newWindow.gif') left no-repeat;
}

.linkPDF{
  padding-left: 25px;
  line-height: 20px;
  background: url('/images/icons/wncoutdoors/pdf.gif') left no-repeat;
}

.linkExcel{
  padding-left: 25px;
  line-height: 20px;
  background: url('/images/icons/wncoutdoors/excel.gif') left no-repeat;
}

.linkOpenOfficeCalc{
  padding-left: 25px;
  line-height: 20px;
  background: url('/images/icons/wncoutdoors/openOfficeCalc.gif') left no-repeat;
}

.linkTextFile{
  padding-left: 25px;
  line-height: 20px;
  background: url('/images/icons/wncoutdoors/textFile.gif') left no-repeat;
}

.linkGpxFile{
  padding-left: 25px;
  line-height: 20px;
  background: url('/images/icons/famfamfam-silk/page_white_put.png') left no-repeat;
}

/* Star ratings */
.rating{
  width:80px;
  height:16px;
  margin:0 0 20px 0;
  padding:0;
  list-style:none;
  clear:left;
  position:relative;
  background: url("/images/siteGraphics/starMatrix.gif") no-repeat 0 0;
}
/* add these classes to the ul to effect the change to the correct number of stars */
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
  cursor: pointer;
 /*ie5 mac doesn't like it if the list is floated\*/
  float:left;
  /* end hide*/
  text-indent:-999em;
}
ul.rating li a {
  position:absolute;
  left:0;
  top:0;
  width:16px;
  height:16px;
  text-decoration:none;
  z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
  z-index:2;
  width:80px;
  height:16px;
  overflow:hidden;
  left:0; 
  background: url("/images/siteGraphics/starMatrix.gif") no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}
/* end rating code */

/* Google Maps stuff */
#gmapContainer{
  position: relative;
  margin-left: -10px;
}

div#border_tl{
  position:absolute;
  width: 20px; height: 20px; top: 0px; left: 10px;
  z-index: 100;
  background:url('http://maps.wncoutdoors.info/images/google/border_tl.png') top left no-repeat;
}

div#border_t{
  position:absolute;
  width: 714px; height: 2px; top: 0px; left: 30px;
  z-index: 101; 
  background:url('http://maps.wncoutdoors.info/images/google/border_edge.png') top left repeat-x;
}

div#border_tr{
  position:absolute;
  width: 20px; height: 20px; top: 0px; left: 742px;
  z-index: 102;
  background:url('http://maps.wncoutdoors.info/images/google/border_tr.png') top left no-repeat;
}

div#border_r{
  position:absolute;
  width: 2px; height: 410px; top: 20px; left: 760px;
  z-index: 103;
  background:url('http://maps.wncoutdoors.info/images/google/border_edge.png') top left repeat-y;
}

div#border_br{
  position:absolute;
  width: 20px; height: 20px; top: 430px; left: 742px;
  z-index: 104;
  background:url('http://maps.wncoutdoors.info/images/google/border_br.png') top left no-repeat;
}

div#border_b{
  position:absolute;
  width: 714px; height: 2px; top: 448px; left: 28px;
  z-index: 105;
  background:url('http://maps.wncoutdoors.info/images/google/border_edge.png') top left repeat-x;
}

div#border_bl{
  position:absolute;
  width: 20px; height:20px; top: 430px; left: 10px;
  z-index: 106;
  background:url('http://maps.wncoutdoors.info/images/google/border_bl.png') top left no-repeat;
}

div#border_l{
  position:absolute;
  width: 2px; height: 410px; top: 20px; left: 10px;
  z-index: 107;
  background:url('http://maps.wncoutdoors.info/images/google/border_edge.png') top left repeat-y;
}

div#map{
  position:relative;
  width:750px; height:450px; 
  margin-left: 10px; margin-top:10px;
}

ul.infoWindowTabList {
  list-style:none;
  margin:0 0 5px 0;
  padding:0;
  clear:both;
  border-bottom:1px solid #ccc;
  height:20px;
  clear:both;
}

ul.infoWindowTabList li.tab {
  float:left;
  margin-right:7px;
  text-align:center;
}

ul.infoWindowTabList li.tab a {
  display:block;
  height:20px;
  padding:0 6px 0 6px;
  background-color:#fff;
  color:#666;
  width:80px;
}

ul.infoWindowTabList li.tab a:hover {
  color:#666;
}

ul.infoWindowTabList li.tab a.active {
  background-color:#ddd;
}

div.infoWindowContainer {
  width: 350px;
  height: 200px;
}

div.infoWindowTab {
  height: 150px;
  overflow: auto;
}
/* End Google Maps stuff */

div.breaker {
  border: 1px solid red;
  height: 0px;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 0px;
  clear:both;
}