@charset "utf-8";
/* CSS Document */

/* ######################## Navigation #################################### */


#spacer_top {
	position: relative;
	width: 100%;
	height: 12%;
	background-color: #322a2a;
	text-align: center;
	}
#header {
	position: relative;
	width: 100%;
	height: 90px;
	background-color: #322a2a;
	text-align: center;
	}

#container {
	position: absolute;
	width: 1000px;
	height: 60px;
	background-color: #322a2a;
	left: 50%;
 	margin-left: -500px; /* negative Hälfte von width:1000px */
	}

#logo {
	position: relative;
	width: 208px;
	left: 0;
	float: left;
	}

#navigation {
	position: relative;
	text-align: left;
	left: 160px;
	top: 22px;	
	}
	

/* Horizontales Menü Anfang */


ul#navlist {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
	}

#navlist li {
	display: inline;
	list-style-type: none;
	}

#navlist a { 
	margin-right: 29px;
	margin-top: 150px;
	}

#navlist a.language {
	margin-right: 0;
	margin-top: 150px;
	}



/* Horizontales Menü Ende */


/* #######################################   Navigation Ende   ############################################ */


a img{
	border: none;
}


/* ***************************************   Contentbereich Startseite   ********************************************* */


#maincontent {
	width: 100%;
	height: 415px;
	background-color: #FFFFFF;
	}

#container_content {
	position: absolute;
	width: 1000px;
	height: 415px;
	background-color: #FFF;
	left: 50%;
 	margin-left: -500px; /* negative Hälfte von width:1000px */
	}

#container_content_links {
	position: relative;
	width: 365px;
	height: 415px;
	left: 0;
	float: left;
	background-color:#FFF;
	}

#container_content_rechts {
	position: relative;
	margin: 0;
	padding: 0;
	width: 635px;
	height: 415px;
	left: 0;
	float:left;
	}

#willkommen {
	margin-top: 90px;
}

#copy {
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	margin-right: 60px;
	color:#666;
	text-align: left;
	}

#kontakt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	color:#666;
	text-align: left;
	}

#idee {
	margin-top: 23px;
	}
	
#film {
	margin-top: 50px;
}

#newsletter {
	margin-top: 36px;
	}

#booklet {
	margin-top: 15px;
	}

				/* ##########   Image Fade   ############ */

#slider {
	text-align: left;
	border: 0;
	width: 635px;
	height: 415px;
	background-color:#000000;
	background-image: url(../img/loading_slider.gif);
	background-repeat: no-repeat;

}

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{ 
	width:635px;
	height:415px;
	overflow:hidden; 
	}
	
#movie { 
	width: 618px;
	height: 402px;
	margin: 0;
	padding-left: 17px;
	padding-top: 13px;
	border: 0;
	background-color:#000000;
	background-image: url(../img/loading_slider.gif);
	background-repeat: no-repeat;

}


/* General */
#container_imagefade{
/*	background: #ccff00; */
 	overflow: hidden;
	width: 635px;
	height: 510px;
}

/* Picture slides */
.picture-slides-disabled {
	color: #FFFFFF;
}

.picture-slides-container {
	margin: 0;
	width: 635px;
}


.picture-slides-fade-container {
	position: relative;
	overflow: hidden;
	z-index: 1002;
}

.picture-slides-fade-container a {
	display: block;
	width: 635px;
	height: 415px;
	margin: 0;
}


.picture-slides-image-load-fail {
	display: none;
}

.picture-slides-thumbnails {
	list-style: none;
	padding-top: 15px;
	margin-right: 0;
	overflow: hidden;
}

.picture-slides-thumbnails li {
	float: left;
	padding-right: 10px;
}

.picture-slides-thumbnails-last li {
	float: left;
	padding-right: 0;
}

/* Kunde/ Messe / Standgröße */
#projektname {
	text-align: left;
	float: left;
	margin-top: 15px;

}

#thumbnails_container {
	position: absolute;
	right: 0;
	margin: 0;
	padding: 0;
}

/* Thumbnails */
.picture-slides-thumbnails li img {
	width: 59px;
	height: 39px;
	border: 0;
}

.picture-slides-thumbnails a {
	border: none;
}

.picture-slides-thumbnails li .picture-slides-selected-thumbnail img {
	padding: 1px;
	background: #ccff00;
	border: 1px solid #000;
}

.picture-slides-dim-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	z-index: 1000;
	display: none;
}


				/* ##########   Image Fade Ende   ############ */
				
				
				/* ########## Image Gallery ################# */


   /* general styling for this example */
   * { margin: 0; padding: 0; }
   body { padding: 0;}
   /* begin gallery styling */
   #jgal { list-style: none; width: 635px; }
   #jgal li { opacity: .6; float: left;  display: block; width: 50px; height: 40px; background-position: 70% 70%; cursor: pointer; border: 3px solid #ccff00; border: 1px solid #ddd; margin-top: 432px; margin-right: 11px; margin-left: 1px; margin-bottom: 0; }
   #jgal li img { position: absolute; top: 0; left: 0; display: none; }
   #jgal li.active img { display: block; }
   #jgal li.active, #jgal li:hover { border-color: #aaa; opacity: .99 /* safari bug */ }
   

/* ##############################################   PROJEKTE SEITE  ################################################################*/

#projekt {
	position: absolute;
	top: 435px;
	left: 450px;
}

.projekte_seitenzahl {
	margin-top: 20px;
	float: left;
	margin-right: 3px;
}

.projekte_thumbs_container {
	position: absolute;
	top: 100px;
	left: 0;
}

.projekte_thumbs {
	float: left;
}

img.projekte_thumbs {
	 border: 0;
}

.projekte_thumbs_active {
	margin-right: 5px;
	padding-bottom: 5px;
	float: left;
}

a.projekte_thumbs:link,
a.projekte_thumbs:visited {
	margin-right: 5px;
	padding-bottom: 5px;
	float: left;
	filter: alpha(opacity=20);
	opacity: .2;
	border: 0;
}

a.projekte_thumbs:hover {
	margin-right: 5px;
	padding-bottom: 5px;
	float: left;
	filter: alpha(opacity=100);
	opacity: 1.0;
	border: 0;
}

/* REFERENZEN SEITE */

.referenzen_alphabet {
	margin-top: 20px;
	float: left;
	margin-right: 3px;
}

.referenzen_pfeile {
	margin-top: 20px;
	float: left;
	margin-right: 3px;
}

.referenzen_name {
	width: 227px;
	height: 16px;
	background-color: #efecec;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	padding-left: 15px;
	margin-bottom: 2px;
}

.referenzen-logos-container {
	padding-top: 100px;
}

.referenzen-logos-box{
	width: 120px;
	height: 90px;
	border: 1px solid #e0e0e0;
	text-align: center;
	margin-right: 6px;
	margin-bottom: 6px;
	float: left;
}

.referenzen-logos-last {
	width: 120px;
	height: 90px;
	border: 1px solid #e0e0e0;
	text-align: center;
	margin-bottom: 6px;
	float: left;
}

.referenzen_logos {
	border: 0;
}

.clear_both {
	clear: both;
}

.img_border {
	border: 0;
}



/* ######################################## ueber uns ########################################################## */

#design {
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	padding-right: 60px;
	color:#666;
	text-align: left;
	position: absolute;
	top: 0;
	visibility: hidden;
	}
	
#projektmanagement {
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	padding-right: 60px;
	color:#666;
	text-align: left;
	position: absolute;
	top: 0;
	visibility: hidden;
	}
	
#produktion {
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	padding-right: 60px;
	color:#666;
	text-align: left;
	position: absolute;
	top: 0;
	visibility: hidden;
	}

#logistik {
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	padding-right: 60px;
	color:#666;
	text-align: left;
	position: absolute;
	top: 0;
	visibility: hidden;
	}
	
#nachhaltigkeit {
	margin-top: 65px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 19px;
	padding-right: 60px;
	color:#666;
	text-align: left;
	position: absolute;
	top: 0;
	visibility: hidden;
	}

#about_us {
  padding:0; 
  margin:60px 0 0 0; 
  list-style-type:none; 
  overflow:hidden;
  height:345px;
  width:660px;
  background-color:#FFF;
  }
#about_us li {
  float:left;
  }
#about_us li a {
  display:block; 
  height:343px;
  width:121px; 
  float:left;
  margin-right: 8px;
  text-decoration:none; 
  cursor:default;
  }
  
#about_us_last{
	margin: 0;
}

#about_us li a img {
  height: 343px; 
  width: 121px; 
  border:1px solid #CCC;
  
  }
#about_us li a:hover {
  border:0;
  }
#about_us li a:hover img {
  border:1px solid #555;
  }


/* ############################################### team  ###################################################### */


.referenzen_team_pfeile {
	margin-top: 64px;
	float: left;
	margin-right: 3px;
}

a.team:link {
	font-family: Arial, Helvetica, sans-serif;
	display:block;
	text-decoration: none;
	font-size: 13px;
	color:#000;
	text-align: left;
	padding-left: 15px;
}

a.team:visited {
	font-family: Arial, Helvetica, sans-serif;
	display:block;
	text-decoration: none;
	font-size: 13px;
	color:#000;
	text-align: left;
	padding-left: 15px;
}

a.team:hover {
	font-family: Arial, Helvetica, sans-serif;
	display:block;
	background-color:#d2d2d2;
	text-decoration: none;
	font-size: 13px;
	color:#000;
	text-align: left;
	padding-left: 15px;
}

.team_active {
	font-family: Arial, Helvetica, sans-serif;
	display:block;
	background-color:#d2d2d2;
	text-decoration: none;
	font-size: 13px;
	color:#000;
	text-align: left;
	padding-left: 15px;
}

.nav_zeilen_team {
	width: 227px;
	height: 16px;
	background-color: #efecec;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	margin-bottom: 2px;
}

.transparency {
	filter:Alpha(opacity=20, finishopacity=1, style=0);
    opacity: 0.2;
    moz-opacity: 0.2;
}



/* ############################################### kontakt  ###################################################### */


.kontakt {
	width: 300px;
	float: left;
	margin-right: 80px;
}

.kontakt_spalte {
	position: absolute;
	top: 100px;
	left: 200px;
}

a.kontakt:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 19px;
	color:#666;
	text-align: left;
}

a.kontakt:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 19px;
	color:#666;
	text-align: left;
}

a.kontakt:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 19px;
	color:#333;
	text-align: left;
}



/* ***************************************   Contentbereich Ende   ********************************************* */


#footer {
	width: 100%;
	height: 95px;
	background-color: #ccff00;
}