/* start with the basics */

body { font-family: Verdana, sans-serif; margin: 0 }
h1 { color: black; font-size: 200%; letter-spacing: 0.25em }
h2 { color: #ff0000; font-size: 180%; margin-bottom: 0.5em }
h3 { color: #ff0000; font-size: 150%; font-style: italic }
h4 { color: #ff0000; font-size: 130%; margin-bottom: 0.5em }
h5 { color: #ff0000; font-size: 110%; }
h6 { color: #ff0000; font-size: small; }
h3, h5, h6 { margin-bottom: 0; margin-top: 1em; }
p, dl, th, td { font-size: small; }
td {vertical-align: top; }
p { line-height: 1.4; margin: 0.5em 0;}
p.initial, dl { margin: 0 }
ul, ol { font-size: small; margin-bottom: 0; margin-top: 0; }
th { text-align: left; vertical-align: bottom; }
td { padding: 1px; }
dt {font-weight: bold; }
sup { font-size: 50%; }
a { text-decoration: none; }

/* define some custom styles */

.center { text-align: center }
.clear { clear: both }
.content { margin-left: 200px; padding-right: 15px; padding-top: 20px; }
    .content a:link { border: 1px white solid; color: #993366; }
    .content a:visited { border: 1px white solid; color: #330033; }
    .content .odd-row a { border: 1px #ffcc99 solid; }
    .content a:hover { border: 1px #993366 dotted; } 
.d20 { background: url(images/BannerBG.jpg) repeat-x; }
.description p { text-indent: 1em; }
.description p:first-child { text-indent: 0 }
.dropdown { background-color: #f2e4bc; border: 1px solid #ffcc99; float: right; margin-left: 5px; padding: 2px; }
.indent { text-indent: 1em }
.float-left { float: left; margin-right: 1.5em }
.float-right { float: right; margin-left: 1.5em }
.last-row { border-bottom: 1px solid #ffcc99 }
.legal { font-size: 50%; font-style: italic; }
.notation {font-family: Courier New, monospaced; font-size: 1em; text-indent: 2em; }
.odd-row { background-color: #ffcc99 }
.size-block { display: block; font-weight: bold; margin-bottom: 0.5em }
.statblock p { font-size: 75%; margin-top: -0.5em; }
.statblock h3 {margin-bottom: 0.2em; }
.sub-last-row { border-bottom: 1px solid #ffcc99; text-indent: 1em; }
.subgear { text-indent: 1em; }
.subtitle { font-size: small; font-style: italic }

/* set up the menu -- we nest the navigation list inside a "nav"
   div so that we can nest the borders to create the desired effect. */

.nav {
    background: url(images/navbg.gif) repeat;
    border: 2px solid #6c6c6c;
    border-top: none;
    float: left;
    left: 0px;
    margin-right: 30px;
    margin-top: -2px;
    width: 170px;
}

/* the border here sits inside the border above and creates the "raised" effect */

.nav ul {
    border: 1px solid #3e3e3e;
    padding: 7px 15px 0px 3px;
}

/* the primary navigation is a simple unordered list */

.nav li {
    color: black;
    font-size: x-small;
    list-style-type: none;
    padding: 3px 0px 3px 2em;
}

/* use display: block in the a tag so that the entire area 
   becomes clickable, not just the text. */
   
.nav a {
    color: black;
    display: block;
    text-decoration: none;
}

/* and then apply a semi-transparent png to act as the highlight */
   
.nav a:hover { background: url(images/navselect.png); }

/* one item is always printed with the class "selected" --
   this one gets special treatment */

.nav .selected {
    background-image: url(images/hole.gif);
    background-repeat: no-repeat;
    font-weight: bold;
}

/* when a submenu is displayed, indent it */

.nav .sub { padding-left: 2em; }

/* but keep the first child of the submenu at the root level */

.nav .sub > li:first-child {
    font-style: italic;
    font-weight: bold;
    margin-left: -1em;
}

/* tablelist is a specialized table for displaying links and so on */

.tablelist { float: left; font-size: 110%; }
.tablelist td { padding: 1px; }
.tablelist a { display: block; font-weight: bold; }
.tablelist .odd-row a { border: 1px #ffcc99 solid; }
.tablelist .odd-row a:hover { border: 1px #993366 dotted; }
.tablelist p { float: left; margin-top: -0.3em; }