body {
  font-family: Georgia, Arial, Helvetica;
  background: #000 url(/im/bg.jpg) no-repeat fixed top left;
  color: #d0b969;
  font-size: small;
  height: 100%;
}

a {
  color: #f8f371; 
}

a:hover {
  background-color: #4b1b04;
  color: #fff;
}

img { border: none; }

h1 {
  text-align: center;
  font-size: large;
  font-weight: bold;
  color: #a5070d;
  margin-top: 10px;
}

h1 img {
  position: relative;
  top: 16px;
  left: -5px;
}

h2 {
  font-weight: normal;
  color: #cd7424;
  font-size: 90%;
  margin-top: 12px;
  margin-bottom: 8px;
  padding-left: 26px;
  padding-top: 6px;
  height: 25px;
  /* render our gold leaf once to the left, like a bullet */
  background-image: url(/im/goldleaf.png);
  background-repeat: no-repeat;
  /** links sometimes surround h2 tags */
  text-decoration: none;
}

h3 { 
  color: #f3b442;
  text-align: left;
  font-size: 90%; 
  margin-bottom: 2px;
  margin-top: 8px;
  font-weight: normal;
}

ul {
  padding-left: 10px;
  margin-left: 10px;
  margin-top: 5px;
  font-size: 85%;
}

ul li {
  list-style-image: url(/im/bullet.png);
  margin-top: 2px;
}

#logo {
  position: fixed;
  top: 462px;
  left: 14px;
}

#logo a:hover {
  background: none;
}

#tagline {
  color: #cd7424;
  position: fixed;
  left: 83px;
  top:  547px;
  width: 225px;
  text-align: right;
  font-size: 12px;
}

#nav {
  position: fixed;
  left: 120px;
  top: 35px;
  width: 200px;
  text-align: right;
  /* Let me tell you a story about a background
   * one that got my css all flipped up-side down
   * it started one day when I wanted to style
   * my nav links to play with the mouse for a while
   * but hoverin in IE they just wouldn't do
   * some other links would hover, that much was true
   * so I banged my head and I cussed my code
   * till my head was hurting and my keys did implode
   * but then I found out that a background tag
   * dropped in the css put the cat in the bag
   * now I'm chillin in style cuz I got the hack
   * and you can have it too like a heart attack
   */
  background-image: url(im/empty.gif);
}

#nav a {
  display: block;
  color: #f7941d;
  text-decoration: none;
  margin-bottom: 5px;
  padding: 2px;
  width: 200px;
  /* test */
  margin: 1px;
  font-size: 14px;
}

#nav a:hover {
  color: #ffc;
}

#page {
  position: fixed;
  width:  543px;
  height: 713px;
  left:   335px;
  top:    2px;
  background-image: url(/im/page.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 335px 2px;
  z-index: 99;
}

#content { 
  position: absolute;
  top: 50px;
  left: 385px;
  width: 435px;
  z-index: 100;
}

#veil {
  position: fixed;
  z-index: 200;
  top: 0px;
  left: 372px;
  width: 486px;
  height: 25px;
  z-index: 101;
  background-color: #000;
  padding-top: 2px;
}

table.columns {
  border-collapse: collapse;
  border: 0px;
  font-size: 85%;
}

.columns td {
  vertical-align: top;
}

.columns th { 
  color: #f3b442;
  text-align: left;
  width: 125px;
  font-style: italic;
  font-weight: normal;
}

.note {
  font-style: italic;
  font-size: 80%;
}

#subnavArea {
  position: fixed;
  top: 190px;
  left: 10px;
  width: 310px;
  height: 300px;
}

.subnav {
  width: 132px;
  /* push them against the content */
  float: right; 
  /* space the nav boxes */
  margin-left: 20px; 
  margin-bottom: 20px;
  height: 40%;
  /* originally, I did this entirely with css, excluding one image for the curved left portion...
     but it required three stylesheets (one for ff, one for ie7, one for ie6) and lots of divs
     with positioning and nightmarish hacks to overcome IE's relative positioning bugs. So I switched
     to a single, primitive, inelegant image for the effect */
  background: url(im/subnav_box.png) no-repeat;
  /* aesthetics */
  font-size: 14px;
}

.full { height: 100%; }

/** 
 * Why use a fielset? The border around the field set will expand with the size of the subnav box
 * providing us a way to use css to make the line to the left and right of title flex with the
 * amount of text in the title
 */
.subnav fieldset {
  /** fieldsets have border by default */
  border: none;
  border-top: 1px solid #cf6b21;
  /** push it into the spot we want */
  margin-left: 20px;
  padding: 0px;
  padding-left: 12px;
  /** Squeeze navbox up to get alignment */
  margin-top: -7px;
  /** pad the content to a reasonable location... have to do this from fieldset because padding 
      on subnav node also affects fieldset (throwing everything off) */
  margin-bottom: 5px;
}

.subnav fieldset legend {
  /* create a single, cool looking border on the left of the text */
  border-left: 1px solid #cf6b21;
  font-size: 85%;
  color: #f7941d;
  /* create space between left line and text */
  padding-left: 4px;
  /* darken area behind text so it doesn't get lost in background */
  background: url(/im/shade_box.png);
}

.subnav a {
  /* make entire row clickable, hoverable */
  display: block;
  /* aesthetics */
  margin-top: 1px;
  margin-left: 8px;
  padding: 2px;
  padding-left: 5px;
  width: 85%;
  font-size: 85%;
}

/** Warnings for the ingrates who need a modern browser */
.ie6Warning { display: none; }
.ieWarning { display: none; }

cite {
  display: block;
  background: url(/im/quote.png) no-repeat left top;
  padding-left: 30px;
  color: #837e59;
  font-family: courier new, courier, georgia, arial, helvetica;
  margin: 10px;
}

cite p {
  margin: 0px;
  margin-top: 1px;
}

cite .author {
  color: #5a5240;
  text-align: right;
  font-style: italic;
  padding-left: 5px;
}

.taglist a {
  display: block;
  float: left;
  width: 125px;
  margin: 10px;
}

.article {
  margin-bottom: 30px;
}

.article h2 {
  margin-bottom: 2px;
}

.article .subheader {
  color: #f3b442;
  font-style: italic;
  margin-top: -8px;
  font-size: 90%; 
  margin-bottom: 10px;
}

.article .readmore { 
  display: block;
  font-weight: normal;
  font-style: italic;
  text-align: right;
  margin-top: 5px;
}

.article .subheader span { padding-right: 15px; }

.article .subheader a {
  color: #f3b442;
  font-style: italic;
  text-decoration: none;
}
.article .subheader a:hover {
  text-decoration: underline;
}