*[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 video { max-width: 100%; height: auto; } 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; } }