/* pre-HTML5-Browser treat unknown elements as display: inline. The following elements are block-elements in HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
/* --- RESET --------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}.clearfix {display:inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}


/*

font-family:'Frutiger Neue W01 UltLt';
font-family:'Frutiger Neue W01 Light';
font-family:'FrutigerNeueW01-LightIt';
font-family:'Frutiger Neue W01 Md';

*/

/* TODO IE

Mouseover Teaser Farbfläche
Klickbare Fläche nur sehr klein

*/

/* ALLGEMEINES --------------------------------------------------------------------------------------- */

html { overflow-x: scroll; }

body { font-family: 'Frutiger Neue W01 Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.4; }
em, i { font-family: 'FrutigerNeueW01-LightIt', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; }
strong, b { font-family: 'Frutiger Neue W01 Md', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; }
h1, h2, h3 { font-family: 'Frutiger Neue W01 Md', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; }
strong em, em strong, h1 em, h1 i, h2 em, h2 i, h3 em, h3 i  { font-family: 'Frutiger Neue W01 Md It', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; }

body.scroll_left { 
	cursor: url(/wp-content/themes/voba/images/scrollright.cur), default;
	cursor: url(/wp-content/themes/voba/images/scrollright.cur) 36 24, default;
}
body.scroll_right { 
	cursor: url(/wp-content/themes/voba/images/scrollleft.cur), default;
	cursor: url(/wp-content/themes/voba/images/scrollleft.cur) 12 24, default;
}

#page { max-width: inherit; margin: 0; padding: 0; }

header { position: fixed; top: 720px; left: 0; width: 100%; z-index: 100; }
header .inner { width: 1040px; margin: 0 auto; }
#logo { 
	float: left;
	width: 140px;
	height: 42px;
	font-size: 0;
	text-indent: -200%;
	overflow: hidden;
	background: url(../images/logo_s.png) no-repeat; /* TODO: zwei Versionen, retina via background-size */
	margin-right: 30px;
}
#meta { float: right; width: 90px; text-align: right; margin-top: 10px; }
#meta a { color: #aaa; font-size: 11px; text-decoration: none; }


/* KLEINE Timeline --------------------------------------------------------------------------------------- */

#timeline { position: relative; float: left; width: 780px; margin-top: 16px; }
#tl_start, #tl_end { 
	display: block;
	float: left;
	width: 35px;
	color: #aaa;
	font-family: 'Frutiger Neue W01 Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 12px;
	padding: 0;
	margin: 0;
	text-decoration: none;
}
#tl_end { text-align: right; }
#timeline img { float: left; padding: 10px 0; margin-top: -10px; }
#tlmarker { 
	position: absolute;
	top: -5px;
	left: 0;
	width: 24px;
	height: 20px;
	margin-left: 20px;
	border: 1px solid #00326A;
	font-size: 0;
	text-indent: -200%;
	overflow: hidden;
	background-color: rgba(0,50,106,0.2);
	box-shadow: 0 0 2px 0px rgba(0,50,106,0.8);
	z-index: -1;
}

/* GROSSE Timeline --------------------------------------------------------------------------------------- */

#entries article.vorwort .inner h2 { background-color: #00326A; }
#entries article.interview .inner h2 { background-color: #5DB19B; }
#entries article.zukunft .inner h2 { background-color: #C5005E; }
#entries article.ranch .inner h2 { background-color: #FF8F00; }
#entries article.wiederaufbau .inner h2 { background-color: #A96BB4; }
#entries article.inflation .inner h2 { background-color: #9B8E53; }
#entries article.gruendungsjahre .inner h2 { background-color: #009CDF; }
#entries article.gesichter .inner h2 { background-color: #CCA58A; }


#entries { padding: 0 80px; margin: 0; }

#entries article { position: relative; float: left; }

#entries article .teaser { position: absolute; background-color: rgba(0,255,0,0.1); }
#entries article.more .teaser { cursor: pointer; }

/* TODO: a.morecontent hiermit auch für nojs gangbar machen http://stackoverflow.com/questions/796087/make-a-div-into-a-link */

#entries article .teaser hgroup { display: none; position: absolute; color: #fff; width: 100%; height: 100%; }
#entries article .teaser:hover hgroup { display: block; }
#entries article.noheadline .teaser:hover hgroup { display: none; }

#entries article.vorwort .teaser hgroup { background-color: #00326A; background-color: rgba(0,50,106,0.9); }
#entries article.interview .teaser hgroup { background-color: #5DB19B; background-color: rgba(93,177,155,0.9); }
#entries article.zukunft .teaser hgroup { background-color: #C5005E; background-color: rgba(197,0,94,0.9); }
#entries article.ranch .teaser hgroup { background-color: #FF8F00; background-color: rgba(255,143,0,0.9); }
#entries article.wiederaufbau .teaser hgroup { background-color: #A96BB4; background-color: rgba(0,50,106,0.9); }
#entries article.inflation .teaser hgroup { background-color: #9B8E53; background-color: rgba(155,142,83,0.9); }
#entries article.gruendungsjahre .teaser hgroup { background-color: #009CDF; background-color: rgba(0,156,223,0.9); }
#entries article.gesichter .teaser hgroup { background-color: #CCA58A; background-color: rgba(204,165,138,0.9); }

#entries article .teaser h3.ereignisdatum { padding: 1em; }
#entries article .teaser h2.ereignistitel { position: absolute; bottom: 0; padding: 1em; }
#entries article.noheadline .teaser h2.ereignistitel { display: none; }

#entries article .teaser .teasercontent { color: #fff; font-weight: bold; font-size: 13px; min-width: 50px; min-height: 50px; }
#entries article .teaser .teasercontent h1 { font-size: 48px; }
#entries article .teaser .teasercontent h2 { font-size: 32px; }
#entries article .teaser .teasercontent h3 { font-size: 24px; }
#entries article .teaser .teasercontent h4 { font-size: 16px; }
#entries article .teaser .teasercontent p { padding: 0 20px; overflow: hidden; }
#entries article .teaser .teasercontent img { margin-left: -20px; }

/* LIGHTBOX --------------------------------------------------------------------------------------- */

#lightboxcontent h1 { font-size: 20px; margin-bottom: 1em; }
#lightboxcontent h2, #lightboxcontent h3, #lightboxcontent p { font-size: 14px; margin-bottom: 1em; }

#lightboxcontent.vorwort h1, #lightboxcontent.vorwort h2, #lightboxcontent.vorwort h3, #lightboxcontent.vorwort strong, #lightboxcontent.vorwort a { color: #00326A; }
#lightboxcontent.interview h1, #lightboxcontent.interview h2, #lightboxcontent.interview h3, #lightboxcontent.interview strong, #lightboxcontent.interview a { color: #5DB19B; }
#lightboxcontent.zukunft h1, #lightboxcontent.zukunft h2, #lightboxcontent.zukunft h3, #lightboxcontent.zukunft strong, #lightboxcontent.zukunft a { color: #C5005E; }
#lightboxcontent.ranch h1, #lightboxcontent.ranch h2, #lightboxcontent.ranch h3, #lightboxcontent.ranch strong, #lightboxcontent.ranch a { color: #FF8F00; }
#lightboxcontent.wiederaufbau h1, #lightboxcontent.wiederaufbau h2, #lightboxcontent.wiederaufbau h3, #lightboxcontent.wiederaufbau strong, #lightboxcontent.wiederaufbau a { color: #A96BB4; }
#lightboxcontent.inflation h1, #lightboxcontent.inflation h2, #lightboxcontent.inflation h3, #lightboxcontent.inflation strong, #lightboxcontent.inflation a { color: #9B8E53; }
#lightboxcontent.gruendungsjahre h1, #lightboxcontent.gruendungsjahre h2, #lightboxcontent.gruendungsjahre h3, #lightboxcontent.gruendungsjahre strong, #lightboxcontent.gruendungsjahre a { color: #009CDF; }
#lightboxcontent.gesichter h1, #lightboxcontent.gesichter h2, #lightboxcontent.gesichter h3, #lightboxcontent.gesichter strong, #lightboxcontent.gesichter a { color: #CCA58A; }