html, body, iframe {
    margin: 0px;
    padding: 0px;
}
iframe {
    overflow: hidden;
}
.document {
    max-width: 800px;
    margin: .5em auto;
    padding-left: 190px;
    padding-right: 10px;
    overflow: hidden;
}
#sidebar { position: fixed; }
iframe { border: none; }
#sidebar, iframe {
    top: 0;
    left: 0;
    width: 180px;
    height: 100%;
}
@media (max-width: 780px) {
    .document {
        margin: 5px 10px 1em 10px;
        padding: 0;
    }
    #sidebar { position: inherit; }
    #sidebar, iframe {
        width: 100%;
        height: 7em;
    }
}

.header {
    font-size: 1.2em;
    text-align: center;
}
.header.small {
    font-size: 0.8em;
}

div.contents ul {
    max-width: 600px;
    margin: 0 auto;
}
div.contents ul ul {
    margin-left: 1em;
}

a {
    text-decoration:none;
    color: hsl(240, 100%, 50%);
}
a:hover { opacity: .5; }
h1 a {
    color: hsla(0, 0%, 0%, .8);
}
h2 a, h3 a, h4 a, .contents a {
    color: hsl(0, 100%, 25%);
}
h1 { text-align: center; }
div > p:first-child:first-letter,
h2 + p:first-letter,
h3 + p:first-letter,
h4 + p:first-letter,
h5 + p:first-letter {
    font-weight: bold;
}

blockquote {
    margin: 1em 0;
}
ul, ol {
    margin-left: 1em;
    padding-left: 1em;
}
dl {
    margin-left: 1em;
}
.formula {
    padding: 0 .5em;
    background-color: hsl(0, 10%, 95%);
}
div.formula {
    border: 1px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: hsl(0, 100%, 25%);
}
.literal-block {
    margin: 0 0 0 1em;
    padding: 5px;
    border: 1px;
    border-style: solid;
    border-color: hsl(0, 100%, 25%);
    background-color: hsl(0, 10%, 95%);
    overflow: auto;
}
tt.literal {
    outline: 1px dotted orange;
    padding: 1px;
}
table { border-collapse:collapse; margin-left:auto; margin-right:auto; }
table, tr, td { padding: 3px; border: 1px dotted maroon; background-color: cornsilk; }

pre.code.keyword, pre.code.tag {
    color: blue;
}
pre.code.string, pre.code.preproc  {
    color: green;
}
pre.code.name.decorator, pre.code.literal {
    color: brown;
}
pre.code.comment {
    color: magenta;
}
pre.code span.generic.prompt {
    color: magenta;
}
pre.code span.generic.output {
    color: gray;
}

.attention, .caution, .danger, .error, .warning, .important, .hint, .note, .tip {
    padding: 0px;
    margin: 5px 0px;
    text-indent: 2em;
}
.hint, .note, .tip { border: green 1px solid; }
.warning, .important { border: gold 1px solid; }
.attention, .caution, .danger, .error { border: red 1px solid; }
.attention p.first, .caution p.first, .danger p.first, .error p.first, .warning p.first, .important p.first, .hint p.first, .note p.first, .tip p.first {
    margin: 0px;
    padding: 5px 0px;
}
.hint p.first, .note p.first, .tip p.first { background: rgb(176, 255, 176); }
.warning p.first, .important p.first { background: rgb(255, 233, 176); }
.attention p.first, .caution p.first, .danger p.first, .error p.first { background: rgb(255, 196, 180); }
.attention p, .caution p, .danger p, .error p, .warning p, .important p, .hint p, .note p, .tip p {
    margin: 5px;
}
.attention pre, .caution pre, .danger pre, .error pre, .warning pre, .important pre, .hint pre, .note pre, .tip pre {
    margin: 0 5px 5px 4em;
}

.def {
    font-family: monospace;
    color: hsl(120, 100%, 25%);
}