@charset "utf-8";
/* 
-----------------------------------------------------------
These styles for the Popcorn project from Linux 
Magazine 05/2012 may be used and modified without
restriction.
Renate Hermanns, http://www.css-manufaktur.de
-----------------------------------------------------------
*/

/* A simple reset, which sets all spacing to 0. */
* { margin: 0; padding: 0; }

/* This CSS is designed to accommodate resolutions between
1280 and 1024 pixels. The size of the video and the div
container conforms to the window size. Widths smaller than 1024
pixels will have a horizontal scrollbar. */

/* Common Styles */

/* Default font size 16px = 100%. All other font sizes are
specified in ems. */
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;}


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

/* Main heading as overlay */
#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;}

/* Main section: includes all the elements after the header.
Distance from the header: 100px; distance to the sides: 30px 
and 20px below. */
#wrapper {padding: 100px 30px 50px; overflow: hidden;}
    
/* Left column and video footnote */
#main {position: relative; float: left; width: 66%; max-width: 720px;}

/* With "position: relative", "#container" establishes the
video area; here, elements such as subtitles and
Google maps have absolute positions.
*/
#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 and pictures adapt to the dimensions of the surrounding container -- 
max. width: 720px -- regardless of the actual video size.
*/
video, img {max-width: 100%;}

/* Subtitles are pre-formatted by "popcorn.js".
The script automatically measures the distance from the video to the
top and left side of the browser window, but, unfortunately, not
to the surrounding "#container". So that the position of the subtitle div is correct, 
subtract the "#wrapper" padding and the height of the header:

header = 150px + #wrapper = 100px + #container frame = 16px 
=> distance from top: -266px; 

#wrapper = 30px from the left => distance from the left: -30px;  */
#container > div {margin-left: -30px; margin-top: -266px;}

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

/* A Google map is displayed at the end inside the video area.
The map is only partially pre-formatted and needs an
absolute latitude and longitude. */
#map {position: absolute; width: 92%; height: 80%; float: left; top: 30px; left: 4%; margin: 1.5% auto !important;}

/* Right column with additional information (Wikipedia,
Twitter, and more footnotes) */
#aside {font-size: .75em; line-height: 150%; float: right; width: 28%; margin: 0 3%; }

/* Yet another footnote */
#wikihead {font-size: 1.2em; font-weight: bold; line-height: 160%; margin: 0;}
#wikihead p {margin: 1em 0 2em;}

/* "popcorn.js" removes formatting from Wikipedia content.
Only a few possibilities for customization remain with CSS. */
#wikidiv { font-size: 1.1em; line-height: 160%; text-align: justify; margin: 1em 0;}

/* Twitter already has a box configured with HTML and CSS.
If you want to make further adjustments, except for font colors,
you have to work directly with the nested div containers. */
#twitterdiv { margin: 2em 0 0;}
/* Main Twitter box div */
#twitterdiv div {color: #999; background: #333; margin: 0;}
/* Twitter box head, middle, and foot padding for space around the outside. */
#twitterdiv div div {padding: 1em;} 
/* Individual entries in the middle section for even more space above and below. */
#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;}