/*********************************/
/* general */

* {
margin: 0;
padding: 0;
}

p{
margin: 15px;
line-height: 1.5em;
}

a{
color:#3a3;
text-decoration:none;
cursor: pointer;
}

a:hover{
color:#0f0;
}

input,
textarea{
background-color:#282828;
color:#fff;
border:1px solid #666;
font-family: monospace;
}

input[readonly="readonly"],
textarea[readonly="readonly"]{
background-color:#111;
}

input[type="button"],
input[type="submit"]{
border-style: outset;
}

input[type="button"]:active,
input[type="submit"]:active{
border-style: inset;
}

textarea{
width:100%;
height:6em;
}

h1{
font-size: 200%;
}

h2{
font-size: 125%;
}

td{
border: 1px solid grey;
padding: .25em;
}

#main ol{
padding: 1em;
}

#main li{
margin: 0 3em;
}

/*********************************/
/* layout */

body{
font-family: sans-serif;
color:#ddd;
min-width: 30em;
background-color:#282828;
}

#main {
border-left:1px solid #ccc;
margin-left: 14em;
padding: 0.5em;
}

#nav {
float: left;
width: 13em;
padding: 0.5em;
overflow: hidden;
border-right:1px solid #ccc;
}

#header, #footer {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
background-color:#080808;
}

#header {
height: 3em;
}

#footer {
float: left;
width: 100%;
}

/*********************************/
/* nav */

#nav ul{
margin: 0;
list-style-type: none;
}

#nav li{
padding: 0.1em;
margin: 0 5px;
}

#nav a.toggleButton{
display: block;
float: left;
margin-right: 5px;
height: .75em;
width: .75em;
text-align: center;
line-height: .75em;
border: 1px solid #3a3;
}

#nav a.toggleButton:hover{
border: 1px solid #0f0;
}