/* --------------------------------------------------------------------------------------
   Standard Stylesheet 
----------------------------------------------------------------------------------------- */

/*
EM und PX
10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em
*/


/* BitstreamVera */
@font-face {
	font-family: 'BitstreamVeraSansRoman';
	src: url('../fonts/Vera.eot');
	src: local('../fonts/Bitstream Vera Sans'), local('../fonts/BitstreamVeraSans-Roman'), url('../fonts/Vera.woff') format('woff'), url('../fonts/Vera.ttf') format('truetype'), url('../fonts/Vera.svg#BitstreamVeraSans-Roman') format('svg');
}

/* BitstreamVeraBold */
@font-face {
	font-family: 'BitstreamVeraSansBold';
	src: url('../fonts/Vera-Bold.eot');
	src: local('../fonts/Bitstream Vera Sans'), local('../fonts/BitstreamVeraSans-Bold'), url('../fonts/Vera-Bold.woff') format('woff'), url('../fonts/Vera-Bold.ttf') format('truetype'), url('../fonts/Vera-Bold.svg#BitstreamVeraSans-Bold') format('svg');
}

/* BlackJack */
@font-face {
	font-family: 'BlackJackRegular';
	src: url('../fonts/black_jack.eot');
	src: local('BlackJack'), local('BlackJackRegular'), url('../fonts/black_jack.woff') format('woff'), url('../fonts/black_jack.ttf') format('truetype'), url('../fonts/black_jack.svg#BlackJackRegular') format('svg');
}

/* Brett Font */
@font-face {
	font-family: "BrettFont";
	src: url(../fonts/brettalton_Brett_Font.eot);
	src: local('BrettFont'), local('BrettFontRegular'), url('../fonts/brettalton_Brett_Font.ttf') format('truetype');
}


/* HTML Elemente */
body {margin:0; padding:0;font: 62.5%/1em "Lucida Sans Unicode","Lucida Grande",Malayalam,sans-serif;color:#696969;text-align: center;background-color:white;cursor:default;}
a:link,a:hover,a:active,a:visited{color:#0044CC;text-decoration:none;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;margin:0; padding:0;}
p {font-size: 1.3em;font-weight: normal;line-height:1.4;margin:0; padding:0;}
h1 {font-size: 4em; line-height:1.3;}
h2 {font-size: 2em; line-height:1.5;}
h3 {font-size: 1.45em; padding:10px 0 5px 0;}
h4 {font-size: 1.3em; padding:0;font-family: Verdana, Arial, Tahoma, Helvetica, Geneva;; font-weight:bold;}
ol,ul{list-style:none;}


#container{overflow:hidden;display:block;margin: 1em auto;width:90em;height:100%;text-align:left;background-color:#EDEDED;}
#contents{width:100%;float:left;overflow:hidden;}

/* Header */
#header {height:9em;margin-top:2em;background-color:white;}
#Xheader {height:9em;background:url("../images/header-bg.jpg") repeat;margin-top:2em;}
#header-menu {float:left;overflow:hidden;width:100%;font-size:1.1em;background-color:white;}
#header-contact {float:right;width:25%;text-align:right;margin: 0 0 0em 0;padding: 0.3em 2em 0.5em 0;}
#header-contact a:link, #header-contact a:active, #header-contact a:visited {color:#999;}
#header-contact a:hover{color:#0044CC;}
#header-mail {float:right;margin: 0 2em .3em 0;}
#header-mail a.mail {background-image:url("../images/at-gray.png");height:16px;width:16px;display:block;border:1px solid white;}
#header-mail a.mail:hover {background-image:url("../images/at-blue.png");height:16px;width:16px;display:block;border:1px solid white;} 

/* logo */
#logo-image {display:none;}
#logo {display:inline;float:left;padding: 1em 1em 1em 5em;}
#logotext1 {float:left;padding:.5em 0 .3em 0;font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;font-size:3.4em;}
#logotext2 {float:left;font-family:BrettFont;font-size:1.7em;padding:1em 0 0 1em;}
#logotext1 a{font-weight:bold;color:#0044CC;}
#logotext2 a{color:#0044CC;}

#textSection{background-color:white;font-size:1.4em;line-height:1.5;margin:0;padding:1em;}
.wordspace14{word-spacing:1.4em;}

/* footer: impressum, social bookmarks, validator and copyright */
#footer{width:100%;clear:both;overflow:hidden;height:2em;font-size:1.2em;background-color:white;}
#datenschutzerklaerung{float:left;width:25%;text-align:left;padding:.8em 0 1em 2em;}
#datenschutzerklaerung a:link,#datenschutzerklaerung a:active,#datenschutzerklaerung a:visited{color:#999;}
#datenschutzerklaerung a:hover{color:#0044CC;}
#impressum{float:left;width:25%;text-align:left;padding:.8em 0 1em 2em;}
#impressum a:link,#impressum a:active,#impressum a:visited{color:#999;}
#impressum a:hover{color:#0044CC;}
#validator{float:left;width:38%;text-align:center;padding:.8em 0 1em 0em;color:#999;}
#validator a:link, a:active, a:visited{color:#999;}
#validator a:hover{color:#0044CC;}
.validator-text:hover{color:#000;}
#copyright{float:right;width:25%;color:#999;text-align:right;padding:.8em 2em 1em 0;}
#copyright:hover{color:#000;}

#spSocialBookmark{float:left;width:26%;text-align:center;padding:.5em 0 1em .5em;}
#spSocialBookmark ul{display:inline;margin:0;padding:0;height:100%;}
#spSocialBookmark ul li{list-style:none;display:inline;margin:2px 2px 0 0;padding:0;}
#spSocialBookmark li img{padding:1px;border:solid 0px #ccc;}

/* navigation */
#mainmenu {clear:both;width:100%;padding: .5em 0 1em;background-color:white;height:3em;}
li.menu-item, li.menu-item-active {float:left;width:12em;margin:0;padding:0;text-align:center;border-right:2px solid #FFF;}
li.menu-item a, li.menu-item-active a {display:block;padding:.5em .5em;font-size:130%;line-height:1em;color:#0044CC;text-decoration:none;}
li.menu-item a:hover, li.menu-item a:focus, li.menu-item a:active {background-color:#0044CC;color:white;font-weight:bold;}
li.menu-item-active a {display:block;padding:.5em .5em;background-color:#0044CC;line-height:1em;width:8em;color:white;font-weight:bold;text-transform:uppercase;}

.project-body:hover{background-color:#fff;}
.project-odd {background:#ccc;}
.project-even {background:#ddd;}
.project-customer{display:none;}

.project {
	background-color:white;
	min-height:47em;
	margin: 0;
	padding:0;}
.project h3 {
	font-weight: bold;
	padding: 1em 1em;
	margin: .5em 0;
}
.project h3 span {
	font-size:100%;
	font-weight: normal;
	padding:.5em;
}
.project p {
	font-size: 1.3em;
	line-height:1.3;
	margin: .5em 1em;
}
.project ul {
	font-size: 1.2em;
	line-height:1.3;
	list-style-type:square;
}
.project li {
	margin-left:3em;
}
.project div a:link, .project div a:hover, .project div a:active, .project div a:visited{color:#0044CC;font-size: 1.2em;text-decoration:underline;}
.back-forward-nav{padding:1em 1em 0 0;}

.contents-textbody{margin:1em;}
.contents-textleft{margin-right:.1em;margin-bottom:.05em;border:.05em solid #DEDEDE;padding:1em;width:47%;float:left;height:26em;background-color:white;}
.contents-textright{margin-bottom:.1em;border:.05em solid #DEDEDE;padding:1em;overflow:hidden;height:26em;background-color:white;}
div.kunden, div.technik, div.uebermich {padding-bottom:1em;}
div.kunden:first-line, div.technik:first-line, div.uebermich:first-line{font-family: Verdana, Arial, Tahoma, Helvetica, Geneva;;font-size:1.4em;font-weight:bold;letter-spacing:1px;}
div.beispiele{font-size: 1.3em;line-height:1.4em;}
div.beispiele a:link,a:hover,a:active,a:visited{color:#0044CC;text-decoration:none;}

.contents-textbody ul {font-size: 1.3em;font-weight: normal;line-height:1.4;margin:0; padding:0;}

#foto{padding:.2em .8em;}
#kontakt, #intro {font-size: 1.3em;line-height:1.4;}
#sonstiges {padding-top:1em;}
#sonstiges ul {line-height:1.5;}
#sonstiges-titel{font-family: Verdana, Arial, Tahoma, Helvetica, Geneva;; font-size: 1.4em;font-weight:bold;letter-spacing:1px;margin:1em 0 .5em;}
p.intro-text{font-size:1.1em;margin:1em 0;}

.floatLeft {float:left; margin:0 1em 0px 0;}
.floatRight {float:right; margin:0 0 1em 1em;}
.floatLeftClear{float:left;clear:both;}
.box100{width:100%;height:100%;background-color:white;}
.box997{width:99.7%;height:100%;background-color:white;}
.boxBorder{border-color:#DEDEDE;border-style:solid;border-width:1px;}
.width100{width:100%;}
.width70{width:50%;}

.fullRow{overflow:hidden;width:100%;height:25em;background-color:#ededed;margin: .7% 0 .5% 0;}
.mainStartRow{height:25em;}
.projectStartRow{height:15em;}
.headline-body{font-family:"Courier New", Courier, "Nimbus Mono L", "DejaVu Sans Mono";font-size:1.6em;color:#444;line-height:1.2em;padding:5em 3em 0 5em;}
.projekt-info-body{font-size:1.5em;line-height:1.3em;color:#444;padding:1.5em;}
.projekt-info-pdf{float:right;font-size:1.5em;line-height:1.3em;color:#444;padding:0 1.5em 0 0;}

.table, .projectTable{
   display: table;
   background-color:white;
   height:100%;
}
.tr, .projectTr{
   display: table-row;
}
.td, .projectTd{
   display: table-cell;
   vertical-align: top;
   width:33%;
   height:100%;
}


.threeColumn {overflow:hidden;width:100%;margin: .5% 0 .7% 0;}
.threeColumn-start-page {height:20.5em;}
.threeColumn-project-page {height:38em;overflow:hidden;width:100%;margin: .5% 0 .7% 0;}
.threeColumn-project-page img {margin:1em 0;}
.threeColumnContent, .threeColumnContentProject{width:92%;height:100%;padding: 1% 4%;background-color:white;border-color:#DEDEDE;border-style:solid;border-width:1px;}
.threeColumnContent:hover, .threeColumnContentProject:hover{background-color:#f2f2f2;}

a.linkChangeColorHover:link,a.linkChangeColorHover:active,a.linkChangeColorHover:visited{color:#696969;text-decoration:none;}
a.linkChangeColorHover:hover{color:#0044CC;text-decoration:none;}

.twoColumn1 {width:20em;padding:0 1em 0 0em;}
.twoColumn2 {float:right;width:20em;padding:0 1em 0 1em;margin-left:2em;}

#schwerpunkt{padding:1em;font-style:italic;}

.noImageBorder{border:none;}
img.noBorder{border:1px solid white;}
img.noBorder:hover{border:1px solid #0044CC;}

.text1{background-color:white;padding:1.5em 1em 1.5em 0;font-size: 1.3em;}
.text1 a:link,.text1 a:active,.text1 a:visited{color:#999;}
.text1 a:hover{color:#0044CC;}
.text1-item {margin-left:1em;}

#header-subtitel h1{clear:both;font:bold 1.5em "Courier New", Courier, "Nimbus Mono L", "DejaVu Sans Mono";text-align:center;color:#dcdcdc;padding-top:.15em;}


/* header animation */
#headertext1, #headertext2{display:none;}

/* Kunden diashow */
.slideshow { height:26em; width:41em; margin:0em; background:url("../images/kunden.jpg");padding: 0 0 0 1em;}
.slideshow img {display:none;}


/* Listen mit Links und hervorgehobenen Items bei hover */
.pane-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pane-list li {
    background:white;
    padding: 5px 1px 0px 2px;    
}
.pane-list li a:link, .pane-list li a:active, .pane-list li a:visited { 
	color: #696969;
}
.pane-list li a:hover {
	color:#0044CC;
}
.pane-list li:hover {
    border-bottom: solid 1px #dedede;
    background: #f2f2f2;
    color:#333333;
}

/* Sprite: Hauptthemen auf der Titelseite */
.themen-title{font-size: 2em; line-height:1.5;display:block;margin-top:.5em;}
.themen-body{font-size: 1.3em;font-weight: normal;line-height:1.4;margin:0; padding:0;}
.themen-sprite {position:relative;width:64px;height:64px;margin:1.5em 2em .7em .5em;}
.themen-sprite img {position:absolute;top:0;left:0;}
.themen-projekte img {left:0;clip: rect(0px,64px,64px,0px);}
.themen-kunden img {left:-64px;clip:rect(0px,128px,64px, 64px);}
.themen-techniken img {left:-128px;clip:rect(0px,192px,64px,128px);}

.image16-text{display:inline;}
.image16-sprite {position:relative;width:16px;height:16px;margin:1em .2em .5em 0em;}
.image16-sprite img {position:absolute;top:0;left:0;overflow:auto;}
.image16-detail img {left:0;top:-80px;clip: rect(64px,16px,80px,0px);}
.image16-list img {left:-32px;top:-80px;clip: rect(64px,48px,80px,32px);}
.image16-pdf img {left:-16px;top:-80px;clip: rect(64px,32px,80px,16px);}
.image16-at-gray img {left:-48px;top:-80px;clip: rect(64px,64px,80px,48px);}
.image16-at-blue img {left:-64px;top:-80px;clip: rect(64px,80px,80px,64px);}

.project-view-title{font-size:2em;line-height:1.5;width:100%;margin:.5em 0 0;}
.project-view-body{font-size:1.3em;font-weight:normal;line-height:1.4;margin:0;padding:0;}


/* --------------------------------------------------------------------------------------
   Vertikale Timeline 
----------------------------------------------------------------------------------------- */
.timeline_frame {margin:1em;padding:1em;background-color:#fff;}
.timeline_container {margin:0;padding:0 18em 2em 18em;width:50em;overflow:hidden;background: #fff url(../images/timeline_bg.gif) repeat-y center top; }
.timeline {font-size: 1.3em; margin: .1em 0; padding: 0em 0;width:30em;position: relative;}
.timeline a{color:#696969;}
.timeline a:hover{color:#0044CC;}
.timeline-header{display:none;}

.timeslot {
	width: 24em;
	height:12em;
	float: left;
	margin: 0 0 1em;
	padding: 1em 10em 0 0;
	border-top: .3em solid #ddd;
	position: relative;
}
.timeslot span.year {
	position: absolute;
	right: 0;
	top: .2em;
	font-size: 3em;
	line-height: 1.2em;	
}
.even {
	float: right;	
	padding: .7em 0 0 10em;
	border-color: #80A9FF;
}
.even span {
	left: 0;
	color: #80A9FF;
}

span.year{width:2.5em;}

a.tooltip{
    position:relative; /*this is the key*/
    z-index:24;
    text-decoration:none;}

a.tooltip:hover{z-index:25;}


.tooltip-body{display:none;}

a.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    z-index:26;
    top:1.5em; left:-8em; width:35em;
    background:#ffd;border:1px solid #aaa;padding:7px;text-decoration:none;color:#444;font:100% arial,hevetica,sans-serif;}

.tooltip-title{font-size:1.3em;font-weight:bold;}



/* --------------------------------------------------------------------------------------
   Horizontale Timeline 
----------------------------------------------------------------------------------------- */
/*
div, ul, li {
    zoom: 1;
}

ul ul, ul ul li {
    zoom: 0;
}
*/

#timelineh {
    min-height: 40em;
    margin-top: 1em;
    padding: 2em;
    overflow: auto;
    /*cursor: -moz-grab !important;*/ /* should this be applied with JS? */
}

.tl-events {
    min-width: 750em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tl-events li {
    float: left;
    width: 300px;
    margin-right: 10px;
}

.tl-events ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tl-events ul li a {
    font-size: 1.2em;
    text-decoration: none;
    color: #000;
    background: #D9E4FF;
    border: 1px solid #D9E4FF;
    display: block;
    margin: 5px 2px;
    padding: 2px;
}

/*
     -moz-border-radius: 4px;
*/


.tl-events ul li a:hover, .tl-events ul li a:focus {
    outline: 0;
    background: #C2CCE4;
    border: 1px solid #B0BACF;
}

.doodle {
    display: none;
}


/* --------------------------------------------------------------------------------------
   keine Anzeige wenn IE 5, 6 oder 7 
----------------------------------------------------------------------------------------- */
.ie567{
	display:none;
}


/* --------------------------------------------------------------------------------------
   Mobile-Stylesheet 
----------------------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
	#container{width:60em;}
	
	/* Ausblenden */
	#headertext, #header-subtitel, .tooltip-body{display:none;}
	
	#header{height:7em;}
	#logo{padding-top:1.2em;padding-left:2em;}
	#logotext1{float:left;padding:.2em 0 .5em .5em;}
	#logotext2{float:left;padding:.5em 0 .5em 1em;}
	#footer{min-height:9em;width:99%;overflow:visible;margin: 0 .5% .5% .5%;border-color:#DEDEDE;border-style:solid;border-width:.1em 0em;}
	#impressum, #validator, #copyright{float:none;width:90% !important;text-align:center;}

	.mainStartRow{height:18em;}
	.headline-body{padding:3em 3em 0 3em;}
	.threeColumn{min-height:45.5em;overflow:visible;width:99%;margin: .7% .5% .5% .5%;}
	.threeColumnContent{width:96%;height:15em;padding:0 2%;}
	.threeColumnContentProject{width:96%;height:32em;padding:0 2%;}
	.threeColumn-project-page {height:32em;}
		
	.table{display: block;background-color:white;}
	.tr{display: block;}
	.td{float:none;clear:both;display: block;width:100%;height:100%;}

	.timeline_container {padding:0 .1em 2em .1em;width:100%;}
	.timeline {width:16em;}	
	.timeslot {height:15em;padding: 1em 13em 0 0;}
	.even {padding: .7em 0 0 13em;}

	.contents-textbody{width:98.5%;margin:.4em;}
	.contents-textleft, .contents-textright{float:none;width:99%;overflow:hidden;height:26em;margin-right:0;margin-bottom:.1em;padding: 1em 0 1em .5em;}	
	
	.projectStartRow{height:18em;}
	.projekt-info-body{padding:1em;}
	.secondProjectColumn, .project-view-body{display:none;}

	/* navigation */
	li.menu-item, li.menu-item-active {width:9em;}
	li.menu-item a, li.menu-item-active a {font-size:120%;}
	li.menu-item-active a {width:6.5em;}

}


/* --------------------------------------------------------------------------------------
   iPhone-Stylesheet 
----------------------------------------------------------------------------------------- */
@media screen and (max-device-width:480px) {
	#container{width:44em;}

	body {font:130%/1em Helvetica;color:#696969;}
	
	/* Ausblenden */
	#headertext, #header-subtitel, .tooltip-body, #kundenlogos{display:none;}
	
	#header{height:11em;background:none;background-color:#0044CC;}
	#logo{padding-top:1.2em;padding-left:1em;}
	#logotext1{float:left;padding:.5em 0 0 .5em;font-size:5.5em;}
	#logotext2{clear:both;float:left;font-size:3em;padding:.5em 0 .5em 1em;}
	
	#footer{min-height:9em;width:99%;overflow:visible;margin: 0 .5% .5% .5%;border-color:#DEDEDE;border-style:solid;border-width:.1em 0em;}
	#impressum, #validator, #copyright{float:none;width:90% !important;text-align:center;}
	.threeColumn{min-height:84.5em;overflow:hidden;width:99%;margin: .7% .5% .5% .5%;}

	.mainStartRow{height:18em;}
	.headline-body{padding:1em 1em 0 1em;font-size:2em;}
	.threeColumnContent{width:94%;height:28em;padding:.5% 3%;}
	.themen-title{font-size:2.5em; line-height:1.6;}
	.themen-body{font-family: Helvetica;font-size:2em;line-height:1.5;}
	.threeColumnContentProject{width:96%;height:32em;padding:0 2%;}
	.threeColumn-project-page {height:20em;}
		
	.table{display: block;background-color:white;}
	.tr{display: block;}
	.td{float:none;clear:both;display: block;width:100%;height:100%;}
	
	.timeline_container {padding:0 .1em 2em .1em;width:100%;}
	.timeline {width:8em;padding: 0 0 0 4em;}
	.timeslot {height:12em;padding: 1em 6em 0 0;}
	.even {padding: .7em 0 0 4em;}

	.contents-textbody{width:95%;font-size:110%;}
	.contents-textbody ul {font-size:185%;}
	.contents-textleft, .contents-textright{float:none;width:100%;overflow:hidden;height:33em;margin-right:0;margin-bottom:.1em;padding: 1em 0 1em .5em;}	

	.projectStartRow{height:24em;}
	.projekt-info-body{padding:1em;}
	.secondProjectColumn, .project-view-body{display:none;}
	.Xproject-view-title{font-size:3.2em;line-height:2.5;}
	.XprojectTr{display:block;}
	.XthirdProjectColumn{clear:both;}

	/* navigation */
	#mainmenu {height:6em;}
	li.menu-item, li.menu-item-active {width:10em;}
	li.menu-item a, li.menu-item-active a {font-size:150%;}
	li.menu-item-active a {width:6.5em;}

}


/* --------------------------------------------------------------------------------------
   Druck-Stylesheet 
----------------------------------------------------------------------------------------- */
@media print,projection {
	/* Seitenlayout */
	
	
	/* Schusterjungen und Hurenkinder */
	div, p { orphans:3;}
	div, p { widows:4;}
	
	/* Ausblenden, was nicht zum Inhalt gehoert */
	#footer, #header, #header-menu, #menu, #lavaLampVariableImage, .noPrint, .slideshow, .project-body h3, img{display:none;}
	
	/* floats entfernen */
	* {float:none !important;}
	
	body {background: white;font-size:12pt;font-family:BitstreamVeraSansRoman, "Trebuchet MS", verdana, sans-serif;}
	h1 {font-size: 16pt;}
	h2 {font-size: 14pt;}
	h3 {font-size: 13pt;}
	h4 {font-size: 12pt;font-family: Verdana, Arial, Tahoma, Helvetica, Geneva;; font-weight:bold;}
	a:link, a:visited {color: #520;background: transparent;font-weight: normal;font-style:italic;text-decoration:none;}
	strong{font-weight:bold;}
	ol,ul{list-style:none;}
	
	#contents a {font-size:12pt;font-style:normal;}
	#container {width:auto;margin: 5% 5% 5% 10%; padding: 0;border: 0;float: none !important;color: black;background: transparent none;}
	#contents {margin-left: 0;padding-top: 1em;border-top: 1px solid #930;}
	
	#logotext1{display:inline;font-size:18pt;font-weight:bold;margin-right:10px;}
	#logotext2{display:inline;font-size:14pt;}
	.intro{margin-bottom:20px;font-weight:normal;}
	.threeColumn, .contents-textleft, .contents-textrigh{float:none;}
	.uebermich{margin-top:1em;}
	.threeColumn1, .threeColumn2, .threeColumn3{margin-top:12px;}
	.themen-title{font-size: 14pt;font-weight:bold;}
	.technik, .kunden{font-size:12pt;font-weight:bold;margin-top:10px;}
	.pane-list{margin:0;list-style: none;}
	.pane-list li {padding: 1px 0;}
	.project-customer{margin-top:4em;}
	#accordion h3 a{font-size:1.5em;line-height:1.1;color:black;}
	
	.timeslot {margin-top:3em;}
	.timeslot .year{font-size:1.5em;line-height:1.1;margin-top:2em;}
	.timeline {margin:1em 0 3em 4.5em;}
	.timeline-header{display:block;font-size:1.8em;line-height:1.3;margin-top:0.5em;}
	
}