@charset "utf-8";
/* 
-----------------------------------------------------------
Diese Styles zum Popcorn-Projekt aus dem Linux-Magazin 04/2012 
dürfen uneingeschränkt genutzt und verändert werden.
Renate Hermanns, http://www.css-manufaktur.de
-----------------------------------------------------------
*/

/* einfaches Reset, um alle Abstände erstmal auf 0 zu setzen. */
* { margin: 0; padding: 0; }

/* Das CSS ist flexibel angelegt für Breiten zwischen 1280px und
1024px. Die Größe des Videos und der Div-Container passt sich der
Fenstergröße an. Bei einer Breite kleiner als 1024px erscheint ein
horizontaler Scrollbalken. */

/* Allgemeine Styles */

/* Standard-Schriftgröße 16px = 100 %. Alle weiteren Schriftgrößen 
werden flexibel in em angegeben. */
body {position: relative; min-width: 960px; font-family: helvetica, sans-serif; font-size: 16px; color: #999; background: #111;}

a {color: #fff; text-decoration: underline;}
a:hover, a:focus {text-decoration: none;}


/* Kopfbereich */
#branding {position: relative; height: 150px; color: #ccc; background: #666;}

/* Hauptüberschrift als Überleger */
#branding h1 {position: absolute; top: 30px; left: 30px; height: 90px; width: 240px; font-size: 1em; text-align: center; color: #ccc; background: #222; padding: 80px 10px 0; -moz-box-shadow: 3px 10px 15px #000; -webkit-box-shadow: 3px 10px 15px #000; box-shadow: 3px 10px 15px #000; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
#branding h1 span {font-size: 2em; margin-bottom: 10px;}
#branding h2 {width: 64%; font-weight: normal; font-size: .9em; line-height: 160%; text-shadow: #000 1px 2px 0px; margin: 0 0 0 320px; padding: 40px 30px 0;}

/* Hauptbereich, schließt alle Elemente nach dem Header ein. 
Abstand zum Header: 100px; Abstand zu den Seiten: 30px und 
nach unten 20px. */
#wrapper {padding: 100px 30px 50px; overflow: hidden;}
    
/* linke Spalte mit Video und Fußnote */
#main {position: relative; float: left; width: 66%; max-width: 720px;}

/* zusammen mit "position: relative" ist "#container" die Basis für
das Video und die in diesem Bereich eingeblendeten, absolut
positionierten Elemente wie Untertitel und die Google-Maps-Karte
*/
#container {position: relative; width: 96%; height: auto; font-style: bold; background: #222; padding: 2%; border-width: 1px; border-style: solid; border-color: #333; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}

/* Videos und Startbild an die Maße des Umgebungscontainers anpassen;
max. Breite: 720px, egal, welche Maße das Video tatsächlich hat.
*/
video, img {max-width: 100%;}

/* Die Untertitel sind durch "popcorn.js" bereits vorformatiert.
Allerdings misst das Skript automatisch den Abstand des Videos zum
Browserfenster von oben und von links, leider aber nicht den Abstand
zum umgebenden "#container". Damit die Position des Untertitel-DIVs
wieder stimmt, muss das Padding aus "#wrapper" und die Höhe des
Headers jeweils abgezogen werden:

header = 150px + #wrapper = 100px + Rahmen in #container = 16px 
=> Abstand von oben: -266px; 

#wrapper = 30px von links => Abstand von links: -30px;  */
#container > div {margin-left: -30px; margin-top: -266px;}

#footnotediv {font-size: .813em; color: #888; text-align: center; margin-top: 1em;}

/* Google-Maps-Karte wird am Ende innerhalb der Videofläche angezeigt.
Die Map ist nur teilweise vorformatiert und benötigt unbedingt eine
Breiten- und Höhenangabe. */
#map {position: absolute; width: 92%; height: 80%; float: left; top: 30px; left: 4%; margin: 1.5% auto !important;}

/* rechte Spalte mit Zusatzinfos (Wikipedia, Twitter und weitere
Fußnoten) */
#aside {font-size: .75em; line-height: 150%; float: right; width: 28%; margin: 0 3%; }

/* noch eine weitere Fußnote */
#wikihead {font-size: 1.2em; font-weight: bold; line-height: 160%; margin: 0;}
#wikihead p {margin: 1em 0 2em;}

/* "popcorn.js" entfernt alle Formatierungen aus Wikipedia-Inhalten.
Es bleiben daher nur wenige Möglichkeiten für die Anpassung per
CSS. */
#wikidiv { font-size: 1.1em; line-height: 160%; text-align: justify; margin: 1em 0;}

/* Twitter bringt bereits eine mit HTML und CSS ausgestattete Box
mit. Will man außer Schriftfarben weitere Anpassungen vornehmen,
muss man die ineinander verschachtelten DIV-Container direkt
ansprechen. */
#twitterdiv { margin: 2em 0 0;}
/* Haupt-DIV der Twitter-Box */
#twitterdiv div {color: #999; background: #333; margin: 0;}
/* Kopf, Mittelteil und Fuß in der Twitter-Box bekommen einen Abstand nach außen. */
#twitterdiv div div {padding: 1em;} 
/* Die einzelnen Einträge im Mittelteil bekommen noch etwas Luft nach oben und unten. */
#twitterdiv div div div {padding: .2em 0;}

#attributiondiv {font-size: .688em; text-align: center; margin-top: 1em;}
#linkdiv {font-size: 1.1em; font-weight: bold;}