/* 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;}

/* Das Zeug da oben kopiere ich immer als erstes in jedes Projekt rein. Der Reset setzt alle Elemente für alle Browser auf sinnvolle
	Standardwerte um Unterschiede zwischen den Browsern auszugleichen */

/* Der Kram darüber sagt einfach nur alten Browsern, dass die neuen Elemente Block-Elemente sind, nicht Inline */

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* pathway-gothic-one-regular - latin */
@font-face {
  font-family: 'Pathway Gothic One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pathway-gothic-one-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Pathway Gothic One Regular'), local('PathwayGothicOne-Regular'),
       url('../fonts/pathway-gothic-one-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pathway-gothic-one-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pathway-gothic-one-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pathway-gothic-one-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pathway-gothic-one-v6-latin-regular.svg#PathwayGothicOne') format('svg'); /* Legacy iOS */
}

body {
	color: #444;
	font-size: 16px;
	line-height: 1.3;
	font-family: 'Open Sans', sans-serif;
	background-color: #fff;
}
h1, h2, h3 {
	font-family: 'Pathway Gothic One', sans-serif;
	font-weight: normal;
	
}
h1 { font-size: 30px;}
h2 { font-size: 20px;}
h3 { font-size: 16px;}
h4 { font-size: 20px;}

a { 
	color: #444;
	text-decoration: none;
}

a:hover { border-bottom: 2px solid #888; }

p { margin-bottom: 1em; }

li a:hover, li.current a { border-bottom: 2px solid #888; padding-bottom: 2px; }
a.textlink { border-bottom: 2px solid #888; padding-bottom: 2px; }

#name { 
	position: fixed;
	top: 40px;
	left: 50px;
} 

#subtitle { 
	position: fixed;
	top: 50px;
	left: 180px;
} 

#email { 
	display: none;
	position: fixed;
	top: 50px;
	left: 450px;
}

#language { 
	position: fixed;
	top: 50px;
	right: 180px;
	font-size: 18px;
	text-transform: uppercase;
	font-family: 'Pathway Gothic One', sans-serif;
}


/* Hintergrundbild / Video und weiße Fläche ---------------------------------------------------------------- */


#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; }
#bg img { position: absolute; width: 100%; height: auto; } /* Absolut positioniert, damit das Javascript das Bild per top und left zentrieren kann. */


/* Navigationen -------------------------------------------------------------------------------------------- */

#mainmenu { position: fixed; top: 100px; left: 50px; margin-bottom: 20px }
#metamenu { position: fixed; bottom: 10px; right: 20px }
#mainmenu ul {
	list-style-type: none; 
	padding: 0;
	margin: 0;	
}
#mainmenu ul li { 
	display: inline;
	font-size: 18px;
	margin-right: 0.5em;
	text-transform: uppercase;
	font-family: 'Pathway Gothic One', sans-serif;
}



/* Inhaltsbereich -------------------------------------------------------------------------------------------- */

#whitebox { /* Weißes Rechteck */
			position: absolute;
			top: 150px;
			left: 400px;
/*			min-width: 520px;
			max-width: 700px; */
			width: 700px;
			min-height: 300px;
			padding: 20px;
			background-color: #fff;
			background-color: rgba(255, 255, 255, 0.8);
		/*	opacity: 0.8;
			-moz-opacity: 0.8;
			filter:alpha(opacity=80);*/
			text-align:left;
		}
#whitebox span { line-height: 29px; }


#workinfo { 
	position: absolute;
	top: 300px;
	left: 400px;
	width: 700px;
	text-align: right;
}

article table tr { margin-bottom: 0.5em; }
.year { width: 100px; }
article table td { padding-right: 2em; }

.refpic {
	width: 200px;
	float: left;
	margin-right: 10px;
}

.blob h2 span {
	font-family: 'Open Sans', sans-serif;
	width: 650px;
	font-size: 16px;
	line-height: 40px;
}

.blob h4 span {
	font-family: 'Open Sans', sans-serif;
	width: 650px;
	font-size: 20px;
	line-height: 29px;
}
.blob p {
	margin-bottom: 8px;
}
.blob span {
	background-color: #000;
	color: #fff;;
	padding: 2px 10px 4px 10px;
	opacity: 0.9;
	-moz-opacity: 0.9;
	filter:alpha(opacity=90);
	border: 1px solid #fff;
}