@media screen {
    body {
        background-color: #036;
        color: white;
        max-width: 70em;
        min-width: 50em;
        margin: 2em 3em 2em 3em;
    }

    a:link, a:active {
        color: #ccc;
    }

    a:visited {
        color: #09c;
    }

    a:hover {
        color: white;
    }
}

@media print {
    a:link, a:visited, a:active, a:hover {
        color: black;
    }
}

div.banner {
    clear: right;
}

div.banner span.name {
    font-size: 300%;
    font-weight: bold;
}

div.banner p {
    margin-left: 0;
}

@media screen {
    div.banner {
        color: #999;
    }

    div.banner span.name {
        color: white;
    }
}

p, ul, ol {
    margin-left: 2em;
}

h1 { 
    font-family: serif;
    font-weight: bold;
    font-variant: small-caps;
}

h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

h2 { margin-left: 0; }
h3 { margin-left: 0.5em; }
h4 { margin-left: 1em; }
h5 { margin-left: 1.5em; }

blockquote.code {
    padding: 0.5em 1.5em;
    border: solid thin #999;
    display: table;
}

@media screen {
    blockquote.code {
        background-color: #047;
    }
}

@media print {
    blockquote.code {
        background-color: #eee;
    }
}

.code {
    font-family: monospace;
}

.code a:link {
    font-weight: bold;
}

div.beforeAfter blockquote {
    float: left;
    margin-right: 1.5em;
}

div.beforeAfter {
    float: none;
    clear: both;
    display: table;
}

div.main {
    float: left;
    width: 55%;
}

div.sidebar {
    width: 30%;
    min-width: 10em;
    float: right;
    border: thin solid #999;
    padding: 0.5em 1.5em;
    margin-left: 3em;
}

@media screen {
    div.sidebar {
        background-color: #047;
    }
}

div.sidebar h2 {
    font-size: 125%;
}

ul.credits {
    list-style: none;
    padding-left: 0;
}

div.screenshot {
    text-align: center;
}