/* Kodierung: UTF-8 */

@media screen {

body { margin:0; padding:10px; color:#000; background:#eee url("http://aktuell.de.selfhtml.org/weblog/bg.png") repeat-x fixed 0 -40px; font-family:"Bitstream Vera Sans",Geneva,Verdana,arial,sans-serif; font-size:100.01%; line-height:1.35em; }

/* Allgemeines Layout */

#container { max-width:55em; margin:auto; position:relative; border:2px solid #ddd; color:#000; background:#fafafa url("http://aktuell.de.selfhtml.org/weblog/bg_content.png") repeat-x fixed 0 -40px; }

#content { padding:0 2em 1em 2em; background-color:transparent; }
#startseite #content { margin-right:13em; }

#sidebar { position:absolute; top:200px; right:0; width:13em; border-left:1px solid #eee; }
#sidebar-inner { font-size:80%; padding:0.1em 0.1em 0.5em 1em; }

#footer { margin-top:3.5em; }

/* Kopf */

#head { font-size:1.6em; line-height:1.35em; margin:0; font-weight:bold; text-align:right; background:transparent url("http://src.selfhtml.org/logo.gif") no-repeat 5px 5px; height:120px; letter-spacing:-1px; }
#head a { display:block; height:35px; padding:85px 1.5em 0 0; text-decoration:none; }
#head a:hover { background-color:transparent; }

/* Allgemeine Elementformatierungen */

#head, h1, h2, h3, .excerpt { font-family:"Helvetica Neue","Franklin Gothic Medium","Franklin Gothic Book",Geneva,Verdana,sans-serif; }

h1 { margin:2em -1.428em 1em -1.5178em; padding:0.8em 0; border-left:2px solid #bbb; font-size:1.5em; line-height:1.4em; text-align:center; }

/*
1em = 16px
2em / 1.4em = 1.428571428571428571
2px / (16px * 1,4em = 22px) = 0.08928571428571428571
Summe 1.517857142857142857
*/

h2 { margin:2em 0 1.2em -0.75em; font-size:1.3em; }
h3 { margin:2em 0 1.2em -0.55em; font-size:1.2em; }

h1 a:hover { background-color:transparent; }
h2 a:hover { background-color:transparent; }

/* Kleiner Reset */
p, ul, ol, dl { margin:0; padding:0; line-height:1.6em; }
li { margin:0; padding:0; list-style-type:none; }
li ul, li ol { margin-top:0.3em; }
dd { margin-bottom:0.5em; }

pre, code { font-family:"Bitstream Vera Sans Mono","Courier New",monospace; color:#0000c0; }
code { }
pre { font-size:85%; background-color:#ffffe0; border:5px solid #eee; padding:5px; overflow:auto; }

a:link { color:#a52; text-decoration:underline; }
a:visited { color:#720; text-decoration:underline; }
a:active { color:#000; }
a:hover { background-color:#eaeaea; }
a img { border:0; }

table { border-collapse:separate; border-spacing:0; }
table th { padding:.2em 0.5em; border:1px solid #a0a0a0; text-align:left; }
table td { padding:.2em 0.5em; border:1px solid #ddd; }
table td.numdat { text-align:right; }
table caption { font-weight:bold; margin:0; padding:1em 0; }

q, blockquote { color:#006; font-style:italic; quotes:"»" "«" "›" "‹"; }
q:before { content:open-quote; }
q:after { content:close-quote; }
/* q[cite]:after { content:close-quote " – Quelle: " attr(cite); } */
blockquote[cite]:after { content: "Quelle: " attr(cite); font-size:90%; font-style:normal; }

label { font-weight:bold; }

abbr, acronym { border-bottom:1px dotted #88f; font-style:normal; cursor:help; }

.skip { position: absolute; left:-999px; width:990px; }
.bild { border:1px solid #ddd; padding:2px; background-color:#eef; }

/* Sonder-Spaltenlayout für Listen im Artikel */

.dreispalter { column-count:3; -moz-column-count:3; } /* URI-Listen */
.dreispalter li { padding-bottom:0.2em; line-height:2em;  }
.dreispalter li a { vertical-align:0.2em; }
.dreispalter li img { margin-right:0.25em; }

/* Seitenspezifische Formatierungen: */

/* Startseite */

#startseite h1 { padding-left:0; }
#startseite h1 a { display:block; padding:0 0.8em; }

#sidebar h1 { margin:2em 0 0.5em 0; padding:0 0 0.5em; border-left-style:none; border-bottom:1px solid #eee; font-size:1.3em; }
#sidebar h1 a { display:inline; padding:0; }

#quicklinks h1 { margin-top:0; }

#sidebar ul { margin-left:0; margin-right:0.5em; padding-left:0; }
#sidebar ul li ul { padding-left:0.5em; }
#sidebar li { padding:0 0 0.1em 20px; background:transparent url("http://src.selfhtml.org/kap.gif") no-repeat 0 3px; }

#quicklinks li li, #featured li, #about li { background:transparent url("http://src.selfhtml.org/dok.gif") no-repeat 0 5px; }
#newsfeed li {  padding-left:22px; min-height:20px; background:transparent url("http://aktuell.de.selfhtml.org/weblog/feed-icon.png") no-repeat 0 3px; }

/* Startseite / Artikelansicht */

.artikelinhalt p, .artikelinhalt ul, .artikelinhalt ol, .artikelinhalt dl { padding-bottom:1em; }
.artikelinhalt li { list-style-type:disc; margin-left:2em; }

/* Meta-Box */

.meta { margin:0 -2em 2em -2.125em; padding:0.7em 1.2em; border-top:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; border-left:2px solid #bbb; background-color:#f5f5f5;}

.excerpt { text-align:center; margin-bottom:0.7em; }
.autor, .publication-date, .themen, .kommentare { font-size:0.8em; line-height:1.4em; text-align:center; }
.autor em, .publication-date em { font-style:normal; }

/* Floatende Grafiken im Artikel */
.screenshot img { border:1px solid black; margin-bottom:1em; vertical-align:bottom; }
.screenshot { margin:0 1em 0 0; float:left; width:250px; }

#pingbacks, #kommentare { margin-top:4em; }

/* Kommentarliste */

#kommentarliste { margin:0; padding:0; }
#kommentarliste li { margin:3em 0.5em; padding:1.5em 1em 1em; background-color:#fefefe; border-width:1px; border-style:none solid solid none; border-color:#e0e0e0; clear:right; }

.kommentar-nummer { float:right; margin:-0.3em 0 0 1em; font-size:3em; line-height:1em; color:#e0e0e0; letter-spacing:-5px; }
.kommentar-daten { margin:0 0 1.5em; font-size:0.9em; }
.kommentar-datum, .kommentar-uri { margin-left:0.5em; }

.kommentar-text {}
.kommentar-text p { margin:0 0 0.5em; }

#kommentarliste .kommentar-text li { margin:0 0 0.5em 2em; padding:0; background-color:transparent; border-style:none; }
#kommentarliste .kommentar-text ul li { list-style-type:disc; }
#kommentarliste .kommentar-text li ol li { list-style-type:decimal; }

/* Kommentarformular */

#kommentarformular table { width:40em; margin:1em 0; border-spacing:0; border-collapse:collapse; }
#kommentarformular th, #kommentarformular td { border-style:none; padding:2px; text-align:left; vertical-align:top; }
#kommentarformular th { width:17em; }
#kommentarformular-name, #kommentarformular-email, #kommentarformular-homepage, #kommentarformular-text { border:1px solid #e0e0e0; }
#kommentarformular-name, #kommentarformular-email, #kommentarformular-homepage { width:20em; height:1.8em; }
#kommentarformular-text { width:100%; }

/* Kommentar-Vorschau */

#kommentarseite {}
#kommentarseite #fehlermeldung { color:#500; background-color:#ffe; border:1px solid #eed; padding:0.5em; }
#kommentarseite #kommentarformular {}

/* nichtinteraktive Themenübersicht */

#themenseite {}
#themenseite #newsfeed { margin-top:4em; }

/* Neues Archiv */

#artikelliste { font-size:90%; border-collapse:collapse; margin:auto; background-color:#f8f8f8; }
#artikelliste th { background-color:#f6f6f6; padding:0; }
#artikelliste th, #artikelliste td { text-align:center; }
#artikelliste th.title { text-align:left; }
#artikelliste th a { font-weight:normal; display:block; margin:0; padding:0.2em 0.4em; }
#artikelliste tbody tr:hover th, #artikelliste tbody tr:hover td, #artikelliste tbody tr:hover th a { background-color:#fff; }
#artikelliste th + td { border-left:1px solid #a0a0a0; }
#artikelliste tbody tr { height:3.5em; }
#artikelliste th { border-color:#aaa #ccc #aaa #aaa;}
#artikelliste tbody tr:first-child td { border-top:1px solid #a0a0a0; }
#artikelliste td.date { white-space:nowrap; }

#tableFilterControl { margin:1em auto; width:35em; padding:1em 0; text-align:center; }
#tableFilterControl button { font-family:"Bitstream Vera Sans",sans-serif; text-align:center; vertical-align:middle; font-size:0.8em; width:11em; padding:0 0.4em; line-height:1.4; background-color:#eee; border:1px outset #c5c5c5; margin-left:10px; }
#tableFilterControl button:before { content:"\2716"; color:#900; font-size:1.35em; padding-right:.3em; }
#tableFilterControl button:hover { color:#900; background-color:#efe; cursor:pointer; }
.tableFilterRowHidden { display:none; }

#toolTip { position:absolute; z-index:100; width:22em; background-color:white; border:2px solid #999; text-align:left; padding:0.5em; min-height:1em; line-height:1.8em; -moz-border-radius:5px; }
#toolTip p { font-size:85%; margin:0; color:#000;  }
#toolTip p em { display:none; margin-top:3px; color:#f60; font-style:normal; font-weight:bold; }
#toolTip p em span { font-weight:bold; color:#fff; }

/* SELFHTML-Fanshop (temporär) */

#banderole a { display:block; position:absolute; top:-11px; right:-11px; width:0; height:70px; background:transparent url("http://aktuell.de.selfhtml.org/weblog/fanshop.gif") no-repeat; padding-left:70px; clip:rect(0, 70px, 70px, 0); overflow:hidden; }
#banderole a:hover { background-position:-70px 0; }

}

/* Breite der Startseite um die der Navigation erhöht */
@media screen and (min-width:70em) { #startseite #container { max-width:68em; }}

@media print {

* { color:#000; background:#fff; }
html, body { border:0; padding:0; }
body { font-family:"bitstream vera sans","lucida sans",tahoma,arial,verdana,geneva,sans-serif; font-size:10pt; line-height:14pt; }
a { color:#000; text-decoration:none; }
p + p { margin-top:1.6em; }
h1 { margin-bottom:2em; line-height:20pt;}
h1 a, .eintrag-daten a { text-decoration:none; }
#startseite #content:before, #eintragsseite #content:before { content:url("http://src.selfhtml.org/logo.gif"); position:absolute; top:0; right:0; clip:rect(50px, 50px, 100px, 0px); margin:-50px -50px 0 0; }
#head, #sidebar, #kommentarformular, #newsfeed, .skip { display:none; }
#pingbacks, #eintrag-daten, .kommentar-text { page-break-inside:avoid; }
#kommentarliste li { padding:0; border-bottom:1pt solid #888; }
#kommentarliste p { padding:0; }
#kommentarliste p + p { margin-top:-.5em; }
.kommentar-nummer { display:none; }
.kommentar-daten { text-align:right; font-size:8pt; }
*[title]:after { content:"\A0(" attr(title) ")"; color:#333; font-style:italic; font-size:70%; }
a[href]:before { content:"\21E8\A0"; color:#888; }
a[href]:after { content:"\A0<" attr(href) ">"; color:#333; font-style:italic; font-weight:normal; font-size:9pt; }
#archivseite table { border-collapse:collapse; }
#archivseite th, #archivseite td { border:1px solid #888; padding:.2em; }
#archivseite td a[href]:before { content:""; }
#archivseite td a[href]:after { content:""; }
#artikelliste .date { width:6em; white-space:nowrap; }
#archivseite .title  { text-align:left; font-size:10pt; }
#archivseite .title a[href]:before { content:""; }
#archivseite .title a[href]:after { content:"\A\A" attr(title)" \A\A<"attr(href) ">"; color:#333; font-weight:normal; font-style:normal; font-size:8pt; }
#archivseite .tags { width:5em; }
#archivseite .author { width:9em; }
h1 a[href]:after, .eintrag-daten a[href]:after { content:"\A<" attr(href) ">"; color:#333; font-style:italic; font-size:10pt; line-height:12pt; }

/* TODO */
#eintrag-daten a[href]:before, #eintrag-daten .eintrag-email:before, #kommentarliste a[href]:before, #kommentarliste a[href]:after, h1 a[href]:before { content:""; }
.eintrag-daten { margin:2em 0 5em 35px; padding:.1em 1em 0 1em; page-break-inside:avoid; }
.eintrag-daten li { list-style-type:none; margin-bottom:1em; font-style:italic; }
.eintrag-datum { font-size:10pt; }
.eintrag-email { font-weight:bold; font-size:11pt; }
.eintrag-email:before { content:"\2708\A0"; }
a.eintrag-email:before { content:url("http://src.selfhtml.org/favicon.ico"); padding:10px; margin-left:-50px; position:relative; top:18px; }

}

@media projection {

body { margin:0; padding:10px; color:#000; background:#eee url("http://aktuell.de.selfhtml.org/weblog/bg.png") repeat-x fixed 0 -40px; font-family:"bitstream vera sans","lucida sans",tahoma,arial,verdana,geneva,sans-serif; font-size:200%; line-height:1.5em; }
#container { border:3px solid #ddd; color:#000; background:#fafafa url("http://aktuell.de.selfhtml.org/weblog/bg_content.png") repeat-x fixed 0 -40px; max-width:35em; margin:auto; }
#content { padding:.5em 1em; background-color:transparent; }
#sidebar { font-size:80%; padding:0.1em 0.1em 0.5em 1em; }
#head { font-size:1.45em; margin:0; font-weight:bold; text-decoration:none;  padding:.5em 110px 0 0.5em; margin:0; }
.skip { font-size:.5em; padding-left:2em; }
h1 { font-size:1.35em; line-height:1.2em; margin-top:2em; }
a:link { color:#a52; text-decoration:underline; }
a:visited { color:#720; text-decoration:underline; }
a:active { color:#000; }
a:hover { background-color:#eaeaea; }
a img { border:0; }
#sidebar ul { margin-left:-1.8em; }
#sidebar ul, #sidebar ul li { display:inline; }
#sidebar li ul { margin-left:-1.8em; }
#quicklinks li, #featured li, #themen li { display:inline; }
#sidebar li::before { content:" | "; }

#sidebar h1 { font-size:110%; }
#newsfeed { clear:left; }
.kommentar-nummer { display:none; }

#archivseite table { border-collapse:collapse; border-spacing:0; }
#archivseite th, #archivseite td { border:1px solid #888; padding:.2em; }
#artikelliste .date { width:6em; white-space:nowrap; }

* { quotes:"»" "«" "›" "‹"; }
q, blockquote { color:#006; font-style:italic; }
q:before { content:open-quote; }
q:after { content:close-quote; }
/* q[cite]:after { content:close-quote " – Quelle: " attr(cite); } */
blockquote[cite]:after { content: "Quelle: " attr(cite); font-size:90%; font-style:normal; }

}

/* iPhone */
@media only screen and (max-device-width: 480px) {

#sidebar { position: static; }
#startseite #content { margin-right: 0; }
#head a { font-size: 0.6em; }
#content { padding: 0 0.5em; overflow: hidden; }
h1 { font-size: 1.3em; margin-top: 0; margin-bottom: 0; }
h1, h2, h3, .meta, blockquote { margin-left: 0; margin-right: 0; border: 0; }
.excerpt { text-align: left; }
#kommentarliste li { margin-left: 0; margin-right: 0; }
#kommentarformular th, #kommentarformular td { display: block; }
#kommentarformular table { width: auto; }
#kommentarformular-text { width: 90%; }

}