*[id] {
    /* for the anchor links */
    position: relative;
}

html {
    height: 100%;
}
body {
    color: #331;
    background-color: #999;
    max-width: 74em;

    font-family: Georgia, serif;

    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;

    padding: 0px;
    padding-top: 1px;
    padding-bottom: 1px;
}

body.index pre {
    border: none;
    background-color: inherit;
    padding: 0em;
}
body.index h2 {
    margin: 1em 0em;
}

div.frame {
    max-width: 45em;
    padding: 1em;
    margin: 0.5em auto;

    background-color: white;

    border-radius: 1em;
}

.frame .search {
    float: right;
    position: absolute;
    right: 0px;
    top: 0.2em;
}
.frame .search input[type="text"] {
    width: 10em;
    box-sizing: border-box;
    height: 2em;
    border: 1px solid grey;
    border-right: 0px;
    padding-left: 1ex;
    margin-left: 0px;
}
.frame .search input[type="submit"] {
    box-sizing: border-box;
    margin-right: 0px;
    height: 2em;
    width: 5em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: white;
    border: 1px solid grey;
    border-left: 1px dotted #AAA;
}

.sidebar .search {
    position: absolute;
    top: -4em;
    left: 0px;
}
.sidebar .search input[type="text"] {
    box-sizing: border-box;
    height: 2em;
    border: 0px solid white;
    padding-left: 1ex;
    width: 10em;
    margin-left: 0px;
}
.sidebar .search input[type="submit"] {
    box-sizing: border-box;
    margin-right: 0px;
    height: 2em;
    width: 5em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: white;
    border: 0px solid white;
    border-left: 1px dotted #AAA;
}

div.sidebar {
    /*color: #AAA;*/
    opacity: 0.3;
    position: relative;
}
div.sidebar:hover {
    color: inherit;
    opacity: inherit;
}

div.sidebar {
    background-color: white;
    float: right;
    width: 12em;

    padding: 0em 1em 0em 0.5em;
    margin: 6em 0em 1em;

    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;

    transition-property: opacity;
    transition-duration: 0.2s;
}
div.sidebar > ul {
    list-style-type: none;
    padding-left: 0px;
    margin-top: 0.5em;
}
div.sidebar ul ul {
    list-style-type: none;
    padding-left: 0em;
    font-weight: normal;
}
div.sidebar > ul.tags > li {
    padding-bottom: 1em;
    list-style: none;
    font-weight: bold;
}
div.sidebar ul.tags ul li,
div.sidebar ul.prevnext li {
    padding-left: 1.5em;
    padding-top: 0.5em;
}
div.sidebar ul.tags ul li:before,
div.sidebar ul.prevnext li:before {
    content: '\25C4';
    float: left;
    width: 1.5em;
    margin-left: -1.5em;
}
div.sidebar ul.tags ul li.next:before,
div.sidebar ul.prevnext li.next:before {
    content: '\25BA';
}

div.sidebar ul.prevnext li.up:before {
    content: '\25B2';
}
a.up:before {
    padding-right: 0.5em;
    content: '\25B2';
}

div.sidebar h3 {
    text-align: right;
    margin-bottom: 0em;
}



h1 {
    text-align: center;
    width: 100%;
    background-color: white;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 0.5em;

    text-shadow: #AAA 0.1em 0.1em 0.2em;
}

#content {
    padding: 1em;
}
p.p-summary {
    font-style: italic;
}
p.alsoon {
    text-align: right;
    color: #BBB;
}
p.alsoon a {
    color: #BBB
}

.about {
    margin: 0em 1em;
    padding-top: 1em;
    text-align: center;
}
.about p {
    margin: 0px;
}


/* content BEGIN */
ul.toc:before {
    content: 'Table of contents';
    display:block;
    text-align: center;
    padding-bottom: 1ex;
    border-bottom: 1px solid #BBB;
    color: #555;
}
html[lang="de"] ul.toc:before {
    content: 'Inhaltsverzeichnis';
}
ul.toc {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
    padding-left: 0em;
    padding-top: 0.5em;
    padding-bottom: 1em;

    background-color: #EEE;
    border: 1px solid #BBB;
    border-radius: 0.5em;
}
ul.toc > li {
    padding-top: 1ex;
    padding-left: 2em;
}
ul.toc li ul {
    list-style-type: none;
}

dd + dt {
    padding-top: 1ex;
}

p.images {
    text-align: center;
}
p.images figure {
    display: inline-block;
}
p.images.w50 img {
    max-width: 45%;
    height: auto;
}
p.images.w100 img {
    max-width: 95%;
    height: auto;
}
a.right {
    float: right;
}
img.right {
    float: right;
    margin-left: 1ex;
    margin-bottom: 1ex;
}
img.border {
    border: 1px solid #BBB;
    border-radius: 3px;
    padding: 1px;
}
figure.border {
    border: 1px solid #BBB;
    border-radius: 3px;
    padding: 0px;
}
figure.border img.border {
    border: none;
    border-bottom: 1px solid #BBB;
}

/* show IDs for anchors */
*[id]:hover > a.anchorlink:before {
    content: "\00B6";/* pilcrow */
    color: #888;
    font-size: smaller;
}
a.anchorlink {
    text-decoration: none;
    margin-left: 0px;
    font-size: smaller;
    position: absolute;
    top: 0px;
    left: -3ex;
    padding-right: 2.5ex;
    height: 100%;
}
li > a.anchorlink {
    left: -5ex;
    padding-right: 4ex;
}


h3 {
    margin-left: 1em;
}

pre {
    padding: 1em;
    background-color: #EEE;
    border: 1px solid #BBB;
    width: auto;
    border-radius: 0.5em;
    overflow: auto;
    white-space: pre-wrap;
}
pre.hscroll {
    white-space: pre;
    overflow-x: scroll;
}
pre .deact {
    color: #CCC;
}
pre.silent {
    padding: 0;
    padding-left: 1ex;
    background-color: none;
    border: none;
    width: auto;
    border-radius: none;
}
div.pre-title {
    padding: 0.5ex 1ex;
    background-color: #DDD;
    border: 1px solid #BBB;
    border-bottom: none;
    width: auto;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    margin-bottom: 0px;
}
div.pre-title + pre {
    margin-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

tt, code, var {
    background-color: #DDD;
    padding: 0.3ex 0.5ex;

    border-radius: 0.5ex;
    font-style: normal;
    font-family: monospace;
}
pre code {
    background-color: inherit;
    padding: 0px;

    border-radius: 0px;
}
abbr[title], acronym[title], span[title] {
    border-bottom: 1px dotted #331;
}
span[title].silent {
    border-bottom: none;
}

kbd {
    background-color: #EEE;
    border: 1px outset #BBB;
    padding: 1px 2px;
}

table td {
    vertical-align: top;
}
table.numbers tbody td, table.numbers tfoot td, table .r {
    text-align: right;
}
table.numbers tbody th, table.numbers tbody .l, table.numbers tfoot .l {
    text-align: left;
}
table.htop thead th {
    vertical-align: top;
}
table.border {
    border: 1px solid black;
    border-collapse: collapse;
}
table.border td, table.border th {
    border: 1px solid black;
    padding: 0.5ex 1ex;
}
table.numbers tfoot td {
    border-top: 3px double black;
}

a[href^="http://"]:after,
a[href^="https://"]:after {
    content: '\279A';
}
a[href^="mailto:"]:before {
    content: "✉ ";
}
a[href^="tel:"]:before {
    content: "☎ ";
}
a.silent {
    text-decoration: none;
    color: inherit;
}
a.silent:after {
    content: "";
}
#webaction-reply:before {
    content: "↩ ";
}
#webaction-like:before {
    content: "☆ ";
}

.warning {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4ex;

    background-color: #FFD;
    border: 1px solid #BBB;
    border-radius: 0.5em;
    padding: 1ex 2ex;
}
.note {
    margin-left: auto;
    margin-right: auto;

    border-left: 3px double #BBB;
    padding: 0.1ex 2ex;
}
.grey {
    color: #BBB;
}
.grey a {
    opacity: 0.7;
}
.reply-intro {
    padding: 1ex;
    background-color: #EEE;
    border-bottom: 1px solid #AAA;
    border-radius: 1ex 1ex 0ex 0ex;
}

blockquote {
    margin-left: 1em;
    border-left: 2px solid #AAA;
    padding: 0.2em;
    padding-left: 1em;
    background-color: #EEE;
}
blockquote blockquote {
    background-color: #FFF;
}
blockquote cite:before {
    content: '-';
}
blockquote .speech {
    font-style: italic;
}

blockquote.me, blockquote.them {
    margin-left: 3em;
    position: relative;
    border: 2px solid #AAA;
    border-radius: 5px;
}
blockquote.me:before, blockquote.them:before {
    content: "";
    top: 10px;
    right: -15px;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #AAA;
}
blockquote.me:after, blockquote.them:after {
    content: "";
    top: 14px;
    right: -12px;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 12px solid #EEE;
}
blockquote.me {
    background-color: #E6FFD1;
}
blockquote.me:after {
    border-left-color: #E6FFD1;
}

blockquote.them {
    margin-left: 0px;
    margin-right: 5em;
}
blockquote.them:before {
    right: unset;
    left: -30px;
    border-left: 15px solid transparent;
    border-right: 15px solid #AAA;
}
blockquote.them:after {
    right: unset;
    left: -23px;
    border-left: 11px solid transparent;
    border-right: 12px solid #EEE;
}

.attribution {
    font-size: 80%;
}
blockquote .attribution {
    text-align: right;
}
blockquote .attribution:before {
    content: "－";
}

blockquote.monospace {
    font-family: monospace;
}

.sources li:target {
    background-color: yellow;
}

.follow {
    float: right;
    text-decoration: none;
    display: inline-block;
    padding: 0.2ex 0.5ex;
    border: 1px solid grey;
    border-radius: 3px;
    margin-top: 1em;
}
.follow img {
    height: 1.5ex;
}


.comments {
    margin: 1em 1em;
    border-top: 1px solid grey;
}
.comments > .hint {
    margin: 1em 1em;
}

.comment {
    position: relative;
    margin-top: 1.5em;

    display: grid;
    grid-template-columns: 100px 1fr 1fr;
}
.comment.reply {
    margin-top: 0;
}

.comment img.avatar {
    max-width: 64px;
    max-height: 64px;
    height: auto;

    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}
.comment.reply img.avatar {
    margin-left: 32px;
    max-width: 32px;
    max-height: 32px;
}

.comment .cauthor, .comment .date, .comment .e-content {
    background-color: #EEE;
    padding-left: 1em;
    padding-right: 1ex;
}

.comment .cauthor {
    grid-column-start: 2;
    grid-column-end: 3;

    padding-top: 1ex;
    font-weight: bold;
    border-top: 2px solid #BBB;
    border-left: 1px solid #BBB;
}
.comment .cauthor a {
    text-decoration: none;
    color: inherit;
}
.comment .cauthor a:after {
    content: "";
}
.comment.reply .cauthor, .comment.reply .date {
    border-top-width: 0;
    border-top-right-radius: 0;
}

/* speaking arrow */
.comment .cauthor:before {
    content: "";
    top: 10px;
    left: 90px;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #AAA;
}
.comment .cauthor:after {
    content: "";
    top: 10px;
    left: 91px;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #EEE;
}

.comment .date {
    grid-column-start: 3;
    grid-column-end: 4;

    padding-top: 1ex;
    text-align: right;
    color: grey;

    border-top: 2px solid #BBB;
    border-right: 1px solid #BBB;
    border-top-right-radius: 5px;
}
.comment .date a {
    text-decoration: none;
    color: grey;
}
.comment .date a:hover {
    text-decoration: underline;
}

.comment .e-content {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;

    border-bottom: 1px solid #BBB;
    border-left: 1px solid #BBB;
    border-right: 1px solid #BBB;
}



@media (max-width: 74em) {
    div.frame {
        margin: 0.5em;
    }
    body {
        max-width: 61em;
    }
}
@media (max-width: 61em) {
    body {
        display:   flex;
        flex-flow: column;
    }
    body.index pre {
        clear: both;
    }
    div.frame {
        order: 1;
        margin-bottom: 0;
        margin: 0;
    }
    .frame .search {
        float: none;
        position: relative;
    }
    #content {
        padding: 0;
    }
    div.sidebar {
        order: 2;
        opacity: 1;

        float: none;
        width: auto;
        max-width: 45em;
        margin: 0em 1.5em 0em 1.5em;
        padding: 0.5em;

        border-top-right-radius: 0em;
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;
    }
    div.sidebar .search {
        position: relative;
        top: 0;
        left: 0;
    }
    div.sidebar .search input[type=text] {
        border: 1px solid grey;
    }
    div.sidebar .search input[type=submit] {
        border: 1px solid grey;
    }
    div.sidebar li {
        float: left;
        margin-right: 2em;
    }
    div.sidebar ul {
        padding-left: auto;
        padding-right: auto;
    }
    div.sidebar ul:after {
        clear: both;
        content: "";
        display: block;
    }
    .sidebar .tags ul {
        display: none;
    }
    .sidebar .tags:before {
        float: left;
        padding-right: 1em;
        content: "Tags:";
    }
    div.frame {
        margin-top: 0px;
    }
    .sidebar h3 {
        display: none;
    }
}