@import "config.less";





/* ++++ GENERAL ++++  */

* { .opensans; font-size:@fontSize; line-height:@lineHeight; color:@fontColor; margin:0; padding:0; }



img { border:0px; }

table { border:0px; border-collapse:collapse; border-spacing:0px; }

td { vertical-align:top; }



html { margin:0; padding:0; height:100%; }

body { margin:0; padding:0; height:100%; }



#bodyLoad {

	display: none;

	position: fixed;

	width: 100%;

	height: 100%;

	/*background: rgba(4,8,37,0.3);*/

	z-index: 999;

	text-align:center;

}



#bodyLoad p#message {

	position: relative;

	padding: 8px;

	border-radius: 7px;

	background: rgba(1,5,71,0.6);

	width: 100px;

}



h1 { margin:0; padding:0; }

h2 { margin:0; padding:0; }

h3 { margin:0; padding:0; }



p { padding:0; margin:0; }



ol { margin:1em 0 0 30px; padding:0; }

ol li { list-style:decimal; padding:0.1em 0; }

ul { margin:0; padding:0; }

li { margin:0; padding:0; text-align:left; list-style:none; }



.right { float:right; }

.left { float:left; }

.clear { clear:both; }

.yellow { color:@yellow; }



div.divider { margin:1.5em 0 1.9em 0; }

hr { border:none; height:1px; background:#eee; }



select, input { }



figure { margin:0; padding:0; }



strong {  }



a { text-decoration:none; 

	&:hover { color:@yellow; }

}

.imgCenter{
	display: block;
	margin: 0 auto;	
}

.imgLink{
	text-align: center!important;
	padding-bottom:60px;
}
.contentLeft{float: left;}
.contentRight{float:right;}

div#wrapper { height:100%;

	div#main { width:980px; height:100%; margin:0 auto; position:relative; .fontSize(15,16); 

		header { top:85px; position:fixed; width:980px; z-index:2;

			nav#mainNavigation { 

				ul {  

					li {  float:left; padding:0 33px 0.25em 0; border-bottom:1px solid @white;

						a { color:@yellow; text-transform:uppercase; padding:0 4px;

							&:hover { border-bottom:5px solid @white; color:@white; }

						}

						&.active { 

							a { border-bottom:5px solid @white; color:@white; }						

						}

						&.beforeLogo { margin-right:409px; padding-right:0; }

						&.last { padding-right:0; }

					} 

				}

			}

			a#logo { position:absolute; left:290px; top:-40px; }

		}

		

		

	

		div#content { 

			section { height:100%; z-index:1; padding-top:265px; position:relative; overflow:hidden !important; overflow:scroll; overflow-x:hidden !important; position:relative;

				h1 { .fontSize(24,15); color:@yellow; margin-bottom:1em; }

				p { margin:0.7em 0; line-height:1.4em; }

				table.navigation { width:100%; position:absolute; left:0; top:265px; 

					tr {

						td { width:20%; text-align:left; position:relative;

							a { background:url(../images/arrowYellow.png) no-repeat left 0.45em; color:@yellow; padding-left:14px; white-space:nowrap;

								&:hover, &.active { background:url(../images/arrowWhite.png) no-repeat left 0.45em; color:@white; }

							}

							table { display:none; position:absolute; left:-3px; top:34px; 

								tr {

									td {  padding-right:21px; width:auto;

										a { background:url(../images/dotYellow.png) no-repeat left 0.5em; 

											&:hover { background:url(../images/dotWhite.png) no-repeat left 0.5em; }

											&.active { background:url(../images/dotWhite.png) no-repeat left 0.5em; }

										}

										&.first { padding-left:35px; }

									}

									&.naviLine { position:absolute; left:3px; top:-17px; }

								}

							}

		 

							&.active.default { 

								a { background:url(../images/arrowYellow.png) no-repeat left 0.45em; color:@yellow; }

							}							

						}

						&.image {

							td { padding-bottom:2em; vertical-align:bottom; text-align:center;

								a { background: none; padding: 0; /*padding: 0 55px 0 0;*/ 
									img{margin: 0 20px 0 0;}
								}

							}

						}

					}

				}

				&#start { /*position:absolute; top:226px; left:60px;*/ padding-bottom: 120px;

					div#sliderWrap { width:865px; margin:0 auto;  position:relative;/* opacity: 0;*/

						div#slider { 
							a{display: block;}
						}

						#pagina { width:65px; margin:13px auto;

							span { display:none; }

							a { background:url(../images/pagina.png) no-repeat 0 0; width:8px; height:8px; display:block; float:left; margin:0 4px;

								&.selected { background:url(../images/paginaActive.png) no-repeat 0 0; width:8px; height:8px; display:block; }

							}

						}
						.slick-dots{ width:65px; margin:13px auto;
							li{ background:url(../images/pagina.png) no-repeat 0 0; width:8px; height:8px; display:block; float:left; margin:0 4px;
								button{font-size:0; display: none;}
								&.slick-active { background:url(../images/paginaActive.png) no-repeat 0 0; width:8px; height:8px; display:block; }
							}

						}
						* {outline: none;}



						#arrowLeft { display:block; width:25px; height:32px; background:url(../images/arrowLeft.png) no-repeat 0 0; position:absolute; left: -54px; top:168px; cursor:pointer; }

						#arrowRight { display:block; width:25px; height:32px; background:url(../images/arrowRight.png) no-repeat 0 0; position:absolute; right:-60px; top:168px; cursor:pointer; }

					}

				}



				div.section { padding-top:0; overflow:hidden !important; position:relative;

					div.text { position:relative; left:0; top:0; width:980px; }

				}

				section { display:none; padding-top:0; overflow:scroll; overflow-x:hidden !important; position:relative;		

					&#team, &#geschichte { display:block; }

					div.text { position:absolute; left:0; top:0; width:980px;

						ul.content{
							li{ margin: 0 0 12px;
								padding-left: 14px;
								position: relative;
								&:before{
									content:">";
									position: absolute;
									top:2px;
									left:0;
									color: #f5cb00;
								}
							}
						}

						div.imageWrap { margin:2em 0 2em 0; position:relative;

							figure { width:179px; float:left;								

								figcaption {  width:179px; margin-top:0.75em; }

							}

							img.arrowImage { float:left; margin:75px 56px 0 56px; }

							img.logoEcheck { position:absolute; right:0; bottom:0; }

						}

						div#elektroLeistung { position:relative; background:url(../images/elektroLeistungBg.png) repeat 0 0; padding:1.8em 0 1.5em 0; 

							img { margin:0 auto; width:684px; display:block; }

							ul { position:absolute;  								

								&.absoluteLeft { left:30px; top:0;  

									li { text-align:right;

										ul {

											li { text-align:left; padding:0; }  

										}

									}

								}

								&.absoluteRight { right:5px; top:0; 

									li {  text-align:left; 

										ul {

											li { text-align:left; padding:0; }

										}

									}

								}

								li { padding:1em 0; 

									span { cursor:pointer; color:@yellow; 

										&:hover { color:@white; }

									}

									&:hover {

										ul { display:block; }

									}

									ul { display:none; position:absolute; left:370px; top:20px; width:190px; background:@blue; border:3px solid #fff; padding:0.45em; opacity:0.9; }

								}

							}

						}

						div#teamSlider { position:relative; margin-top:2.5em;								

							span { position:absolute; height:340px; width:70px; display:block;  z-index:2;

								&.sensLeft { left:0; top:0; }

								&.sensRight { right:0; top:0; }

							}

							ul {  

								li { position:relative; float:left;

									.description { position: absolute; bottom: 50px; left: 20px; display: none; }

									img { }

									img.silhouette { display:none; position:absolute; left:0; top:0;  }

									&:hover {

										.description { display: block; }

										ul { display:block; }

									}

									

									ul { display:none;

										li { position:absolute; left:30px; top:260px; border:3px solid #fff; padding:0.45em; opacity:0.9; background:@blue; }

									}

									

								}

							} 

						}

						div#timelineWrap { position:relative; margin-top:2.5em; 		

							.caroufredsel_wrapper { width:980px !important; }

							span { 

								&.tLeft { left:0; top:0; position:absolute; height:340px; width:70px; display:block;  z-index:2; }

								&.tRight { right:0; top:0; position:absolute; height:340px; width:70px; display:block;  z-index:2; }

							}

							div#timeline { 

								div { 

									&.time { float:left; }

									&.top { height:100px; padding-right:20px;

										p { margin:0; }

									}

									&.bottom { border-top:3px solid @white; margin-top:0.7em; padding-top:0.7em; height:100px; padding-right:20px;

										p { margin:0; }

									}

								}							

							}

						}

					}

				}

				&#ajaxContent {  }				

			}

			/*	

			section#leistungen { position:absolute; top:226px; left:0;

				img.unternavi { display:none; }

			}

			*/

		}

		div#scroll { position:fixed; left:0; bottom:60px; width:100%; z-index:3; visibility:hidden;

			span#up { background:url(../images/arrowUp.png) no-repeat center right; display:block; width:50%; height:17px; float:left; }

			span#down { background:url(../images/arrowDown.png) no-repeat center left; display:block; width:50%; height:17px; float:right; }

		}

		footer { text-align:center; position:fixed; bottom:20px; z-index:2;

			p { .fontSize(24,15); width:980px; margin:0 auto;

				span { margin-right:37px; }

			}

			img { }

		}

	}

}

div#wrapper div#main div#content section { overflow:hidden; margin-bottom: 500px; }

.ie7 body div#wrapper div#main div#content section#leistungen table.navigation tbody tr td table tbody tr td a { background: none; }



@media only screen and (max-height: 835px) {

	div#wrapper div#main div#content {

		section#ueberuns { padding-top: 190px;

			table.navigation { top: 150px !important; }

		}

		section#team, section#ueberuns { height: 400px !important; }

	}

}

#jobs { display:none !important; }
#jobs.show { display:block !important; }
#jobs div.text { margin-top:3em; }
#jobs div.text p { margin-bottom:0.5em; }
a.iframe { font-size:1.3em; }
#fancybox-frame { background:url(../images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
div#wrapper.frame div#main div#content section { padding-top:3.5em; margin-bottom:0; }
div#wrapper.frame div#main div#content section h3 { color:#f5cb00; margin-bottom:0.6em;  }
div#wrapper.frame div#main div#content section ul { margin-bottom:1.8em;  }
div#wrapper.frame div#main div#content section li { margin:0.4em 0; }
div#wrapper.frame div#main { width:90%; }
p.fontLarge { font-size:1.2em; }