html, body {
    margin          : 0;
    padding         : 0;
    color           : black;
    background-color: #f4f4f4;
    font-family     : 'Helvetica', sans-serif;
}

* { line-height: 150% }

p { margin: .66em 0; padding: 0 }

#top {
    background-color: #111;
    color           : #ccc;
    margin          : 0;
    padding         : 1.5em;
    box-shadow      : 0 -5px 5px 5px #999;
}

#top #inner {
    width           : 90ex;
    margin          : 0 auto;
    padding         : 0 7ex;
}

#top #name a {
    font-size       : 1.8em;
    color           : white;
    text-decoration : none;
}

#top #navi {
    display         : block;
    margin          : 0;
    padding         : 0;
    font-size       : 1.3em;
}

#top #navi li {
    display         : inline;
    margin          : 0;
    padding         : 0 2ex 0 0;
}

#top #navi a {
    color           : #ddd;
    text-decoration : none;
}

#top #navi .active a {
    padding-bottom  : .2em;
    border-bottom   : .2em solid #555;
    color           : white;
}

#top #navi a:hover, #top #navi a:active {
    padding-bottom  : .2em;
    border-bottom   : .2em solid #555;
}

#main {
    width           : 90ex;
    margin          : 0 auto;
    padding         : 0 7ex 3em;
    color           : #333;
    background-color: white;
    box-shadow      : 0 0 3px #ccc;
}

#main .navi {
    display         : block;
    margin          : 0 -7ex;
    padding         : .8em 7ex .6em;
    border-bottom   : .1em solid #ddd;
}

#main .navi li {
    display         : inline;
    margin          : 0;
    padding         : 0 2ex 0 0;
}

#main #subnavi                  li { font-size: 1em }
#main #subsubnavi               li { font-size: .9em }
#main #subsubsubnavi            li { font-size: .8em }
#main #subsubsubsubnavi         li { font-size: .7em }
#main #subsubsubsubsubnavi      li { font-size: .7em }
#main #subsubsubsubsubsubnavi   li { font-size: .7em }
#main #subsubsubsubsubsubsubnavi { /* wtf */ }

#main .navi a {
    color           : #555;
    text-decoration : none;
    font-weight     : bold;
}

#main .navi .active a {
    color           : black;
    padding-bottom  : .1em;
    border-bottom   : .3em solid #eee;
}

#main .navi a:hover, #main .navi a:active {
    padding-bottom  : .1em;
    border-bottom   : .3em solid #eee;
}

#content h1, #content h2, #content h3 {
    font-weight     : bold;
    margin          : 2em 0 1em;
    padding         : 0;
}

#content {
    padding-top     : 2em;
}

#content h1 { font-size: 2em; font-weight: normal; margin-top: .5em }

#content h2 { font-size: 1.5em }

#content h3 { font-size: 1.2em }

#content a {
    text-decoration : underline;
    color           : #039;
}

#content a:visited { color: #026 }

pre {
    margin          : 1em 0;
    padding         : .5em;
    border          : thin solid #ddd;
}

pre, code {
    font-family     : monospace;
    color           : #333;
    background-color: white;
}

#footer {
    margin          : 2em;
    padding         : 0 7ex;
    color           : #777;
    font-size       : .8em;
    text-align      : center;
    text-shadow     : 1px 1px 0 white;
}

#built_with {
    font-size       : .9em;
    color           : #bbb;
}

#built_with a {
    text-decoration : none;
    color           : #999;
}

#built_with a:hover, #built_with a:active { text-decoration: underline }