/* This style is for "Trail Heads" - the six top pages of The Preserve.
   These include index, abtlp, gallery, magazine, abtpwll, and contact.
*/

html {
   margin: 0px;
   padding: 0px;
   background-image: url("texdark.gif"); 
   background-position: top;
   background-repeat: repeat;
   background-color: #262830;
}

body {
   position: relative;
   max-width: 960px;
   margin-left: auto; margin-right: auto;
   color: #DDD;
   background-image: url("texture.gif"); 
   background-position: center;
   background-repeat: repeat;
   background-color: #2F323C;
   font-size: 1.13em;
   font-weight: 400;
   font-family: arial, helvetica, sans-serif    /* font-family must be listed last */
}

a  {text-decoration: none}     /* these link styles are for simple text links */
a:link       { color: #BCF}
a:visited  { color: #BCF }
a:hover { color: #F78 }

i {
  font-weight: 600;
}

div#banner {      /*  home page logo  */
   height: 256px;
   border-bottom: 3px  solid  #676836;
   background-image: url("banner.jpg"); 
   background-position: top;
   background-color: #4F3418;
}

div#banner  h1 {      /* this is the content of div#banner, and thus determines its placement */
   margin-top: 4px; padding: 24px;
   text-align: center;
   font-size: 72px;
   font-weight: 100;
}

div#banner h2 {
   width: 320px; height: 57px;
   margin-top: 0px; margin-left: 8px; margin-bottom: -21px;
   padding-top: 14px;
   color: #CCC;
   text-align: center;
   font-size: 30px;
   font-weight: 100;
   background-image: url("headsign.gif");
   background-repeat: no-repeat;
}

div#banner h2 a:link { color: #CCC }
div#banner h2 a:visited { color: #CCC }
div#banner h2 a:hover { color: #FFF }

div#navigation {
   float: left;
   margin-top: 8px; margin-right: 16px;
   width: 140px; min-height: 380px;
   color: #CCC;
   background-image: url("posts.png"); 
   background-position: bottom left;
   background-repeat: repeat-y;
}

div#navigation ul {
   margin: 10px 11px; padding: 0px;
}

div#navigation ul li {
   list-style-type: none;
   width: 120px; height: 34px;
   margin-bottom: 0px;
   text-align: center;
   font-size: 0.8em;
}

div#navigation ul li a, div#navigation ul li span {
   display: block;
   padding-top: 6px; padding-bottom: 6px;
   background-image: url("navsign.gif");
   background-repeat: no-repeat;
   background-color: #4F3418;
}

div#navigation ul li a:link    {color: #CCC}
div#navigation ul li a:visited {color: #CCC}
div#navigation ul li a:hover   {color: #FFF}

div#navigation ul li a span.linkinfo {
   display: none;
}

div#navigation ul li a:hover span.linkinfo {
   z-index: 2;
   display: inline;
   position: absolute;
   left: 9.5em;
   width: 14em; height: auto;
   margin: 0em;
   padding: 0.4em;
   border: 1px solid #CCC;
   line-height: 140%;
   background-image: url("texbrwn.gif");
   background-repeat: repeat;
   background-color: #4F3418;
}

div.trailguide {
   clear: both;
   height: 28px;
   color: #CCC;
}

div.trailguide ul {
   padding: 0px;
}

div.trailguide ul li {
   display: block;
   float: left;
   width: 120px; height: 28px;
   margin-top: 18px;
   padding-top: 6px;
   text-align: center;
   list-style-type: none;
   font-size: 0.8em;
   background-image: url("navsign.gif");
   background-repeat: no-repeat;
   background-color: transparent;
}

div.trailguide ul li a:link    {color: #CCC}
div.trailguide ul li a:visited {color: #CCC}
div.trailguide ul li a:hover   {color: #FFF}

div.trailguide ul li a span.linkinfo {
   display: none;
}

div.trailguide ul li a:hover span.linkinfo {
   z-index: 2;
   display: block;
   position: relative;
   top: 1em; left: 1em;
   width: 12em; height: auto;
   margin: 0em;
   padding: 0.4em;
   border: 1px solid #CCC;
   line-height: 140%;
   background-image: url("texbrwn.gif");
   background-repeat: repeat;
   background-color: #4F3418;
}

div.trailguide ul li a:hover span.short {width: 6em;}

div.inset {
  float: right;
  width: 25%;
  padding: 0.5em;
  border: 1px solid #9C9C9C;
  margin: 0.4em 0em 0.4em 1em;
  background-color: #000000;
  text-align: left;
  font-size: 0.8em;
  font-family: arial, helvetica, verdana, sans-serif;	/* font-family must be listed last */
  }

div.content {
   margin-bottom: 24px; margin-left: 156px; margin-right: 8px;
   padding-right: 8px;
}

div.content h3 {
   margin-top: 0px; margin-bottom: 0.6em;
   padding-top: 24px;
   text-align: center;
   font-size: 2.3em;
   font-weight: normal;
}

div.content h4 {
   margin-top: 6px; margin-bottom: 18px;
   padding-top: 30px;
   text-align: center;
   font-size: 1.6em;
   font-weight: normal;
}

div.content h5 {
   margin-top: 6px; margin-bottom: 18px;
   padding-top: 30px;
   text-align: center;
   font-size: 1.2em;
   font-weight: normal;
}

div.content p {
   margin: 0px;
   padding-right: 8px;
   text-indent: 1em;
}

div.content p.articles {
   margin-left: 40px; margin-right: 40px;
}

div#rxie5{
   clear: both;
   height: 1em;
   border-top: 3px  solid  #676836;
} 

div#footer {
   clear: both;
   padding-bottom: 0.5em;

   text-align: center;
   font-size: 0.8em;
}

img.noframe {
   display: block;
   margin: 1em auto;
   border: none;
   padding: 0px;
}

span.sign {
   display: block;
   width: 120px; height: 28px;
   padding-top: 6px;
   font-size: 0.8em;
   text-align: center;
   background-image: url("navsign.gif");
   background-repeat: no-repeat;
   background-color: transparent;
}

a:link span.sign    {color: #CCC}
a:visited span.sign {color: #CCC}
a:hover span.sign   {color: #FFF}

ul.articles {
   margin: 18px 30px 26px 30px;
   border: 3px solid #8474F5;
   padding: 24px 48px;
   line-height: 125%;
   background-image: url("texdark.gif"); 
   background-position: top;
   background-repeat: repeat;
   background-color: #262830;
}

ul.articles li {
   list-style-type: none;
}

ul.articles span.magdate {
   font-size: 0.9em;
}

*.alert {
   color: #BFAC7C;
}

*.floatleft {
  position: relative;
  float: left;
  margin-right: 1em;
}

*.floatright {
  position: relative;
  float: right;
  margin-left: 1em;
  margin-right: 8px;
}

*.twocolumn {
   -moz-column-count: 2; /* Firefox */
   -webkit-column-count: 2; /* Safari and Chrome */
   column-count: 2;
   -moz-column-gap: 2em; /* Firefox */
   -webkit-column-gap: 2em; /* Safari and Chrome */
   column-gap: 2em;
   -moz-column-rule: 1px solid #000000; /* Firefox */
   -webkit-column-rule: 1px solid #000000; /* Safari and Chrome */
   column-rule: 1px solid #000000;
}