#title {
position: absolute;
left: 15%;
top: 50px;
height: 100px;
width: 250px;
background-color: #F3E5A5;
padding: 10px;
padding-top: 0px;
z-index: 2; }

#title img[src="images/title.png"] {
position: relative;
top: 0px; }

#nav {
position: absolute;
left: 15%;
top: 120px;
right: 15%;
height: 50px;
background-color: #F3E5A5;
z-index: 1; }

#main {
position: absolute;
top: 170px;
left: 15%;
right: 15%;
background-color: #F3E5A5;
margin-bottom: 50px;
padding: 5px;
padding-left: 50px;
padding-right: 50px;
z-index: 0; }

#main h1 {
background: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 17px;
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
text-align: left;
font-family: "Marker Felt", Papyrus, Herculanum, Sylfaen, fantasy;
background-image: url(images/titlebg.png);
background-repeat: no-repeat;
background-position: bottom left; }

#main p {
background: white;
padding: 10px;
margin: 0;
overflow: visible; }

#main ul {
background: white;
padding: 10px;
padding-left: 2em;
padding-top: 5px;
margin: 0;
overflow: visible; }

#main ul li {
background-color: white; }

#main ol {
background: white;
padding: 10px;
padding-left: 2em;
padding-top: 5px;
margin: 0;
overflow: visible; }

#main ol li {
background-color: white; }

#main h2 { 
background: white;
padding: 5px;
margin: 0;
margin-top: 5px;
font-family: "Marker Felt", Papyrus, Herculanum, Sylfaen, fantasy;
border: dashed 2px black; }

#main h3 { 
background: white;
padding: 5px;
margin: 0;
font-family: "Marker Felt", Papyrus, Herculanum, Sylfaen, fantasy; }

#main table {
background-color: white; 
margin: 0; 
width: 100%; 
padding: 10px; }

body { background-image: url(images/bg.png); }

code {
display: block;
background-color: #cccccc;
padding: 5px;
margin: 5px; }

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

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

.toprightnav {
float: right; 
clear: right; 
margin-right: 0px; 
margin-top: 0px; }

.navigation { 
position: relative;
top: 5px;
font-family: sans-serif; }

.navigation a {
font-weight: bold;
text-decoration: none; }

.navigation, .navigation ul, .navigation li {
list-style-type: none;
margin: 0;
padding: 0; }

.navigation { margin-left: 275px; }

.navigation li {
float: left;
display: inline; }

.navigation li a {
color: #000;
background-color: #F3E5A5;
padding: 3px;
border-right: 1px solid black; }

.navigation li a:hover {
color: #000;
background-image: url(images/bg.png); }

.subnav { display: none; }

.subnav li { float: none; }

.subnav li a {
padding: 0px;
margin: 0px; }

.navigation li:hover .subnav {
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
border: 1px solid black; }

.navigation li:hover .subnav li a {
display: block;
width: 10em;
border: none;
padding: 2px; }

.navigation li:hover .subnav li a:before { content: " >> "; }