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


body {
	font-family: Helvetica, Arial, Verdana;
	font-size: 12px;
	line-height:17px;
	color:#9caab1;
	color:#6c7a81;
	background-color:#eaedef;
	margin:0;
	padding:0;

}

/* ================== SEITENAUFBAU ======================= */

#container {
	position:relative;
	width: 1024px;
	background-color:#fff;
	margin:0 auto;
	padding:0;
}

#firstcontainer {
	position:relative;
	height:695px;
	width: 1024px;
	background-color:#fff;
	margin:0 auto;
	padding:0;
}
	
	#firstcontainer img {
		border:0;
	}
	
.clear {
	clear:both;
}

#head {
	position:relative;
	width:1024px;
	height:60px;
	background:url(../img/logo.jpg) -21px 0;
}

#head h1 {
	padding:0;
	margin:0;
}

#head h1 a {
	position:absolute;
	bottom:0;
	left:20px;
	width:260px;
	height:30px;
	text-indent:-8888px;
}

#footer {
	position:relative;
	float:left;
	width:1024px;
	height:7px;
	background:url(../img/logo.jpg) -21px 0;
}


#mainnav {
	width:1000px;
	height:35px;
	padding:15px 0 15px 24px;
	outline:none;
}

#side {
	position:relative;
	float:left;
	width:200px;
	height:545px;
	padding:32px 11px 0 26px;
	background:url(../img/sidebar_line.gif) -63px 0 repeat-y;
}

* html #side {
	background-color:#00CCFF;
	background:url(../img/sidebar_line.gif) -76px 0 repeat-y;
}

#subnav {
	position:absolute;
	font-size:12px;
	width:300px;
	height:15px;
	bottom:0;
	right:0;
	text-align:right;
	color:#df8f8f;
	padding-right:16px;
	font-size:10px;
}

#subnav a {
	color:#df8f8f;
}
#subnav a:hover {
	color:#fff;
}


#content {
	position:relative;
	float:right;
	margin:0 16px 0 16px;
	_margin:0 13px 0 0;
	width:755px;
	height:545px;
}

#kundennavi {
	width:755px;
	height:41px;
	font-size:9px;
	line-height:12px;
	background:url(../img/h_line.gif) repeat-x 0 40px;
	margin-bottom: 8px;
}

#inhalt {
	position:relative;
	margin-top:40px;
	overflow:hidden;
	width:830px;
	height:600px;
}
#kunden_logos {
	margin-top:32px;
	width:617px;
	height:514px;
	overflow:hidden;
}

#kunden_logos div {
	width:620px;
}

#kunden_logos div div {
	height:102px;
	width:102px;
	float:left;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
}

/* ================== LINKS ======================= */

a {
	color:#6c7a81;
	text-decoration:none;
}

a:hover, a.aktiv, a.aktiv_rot, #kundennavi a.aktiv:hover {
	color:rgb(188,0,45);
	text-decoration:none;
}

*:focus {
	outline:none;
}

#wn a {
	text-decoration:underline;
}

.zwei #wn a {
	text-decoration:none;
}


#content a:hover {
	text-decoration:none;
}

#kundennavi a {
	text-decoration:none;
}

#kundennavi a.aktiv {
	color:#9caab1;
	text-decoration:none;
}




/* ================== HAUPT NAVIGATION ======================= */

#mainnav ul {
position:absolute;
	list-style:none;
	padding:0;
	margin-top:15px;
}

	#mainnav li {
		font-size:22px;
		font-weight:bold;
		background:url(../img/navi_line.png) no-repeat;
		padding-bottom:15px;
		display:inline;
		margin:0 40px 0 0;
		padding:6px 0 0 40px;
	}
	
	#mainnav li.first {
		background-image:none;
		padding:0;
	}


/*	#mainnav li.news {
		padding-bottom:15px;
		display:inline;
		margin:0 40px 0 0;
		width:109px;
		height:34px;
		background:url(../img/nav_news.gif) no-repeat;
	}

	#mainnav li.news:hover, li.news_aktiv {
		padding-bottom:15px;
		display:inline;
		margin:0 40px 0 0;
		width:109px;
		height:34px;
		background:url(../img/nav_news.gif) no-repeat;
	}
	
*/



/* ================== NAVIGATION SiDEBAR ======================= */

#side ul {
	list-style:none;
	margin:0;
	padding:0;
}

	#side ul li {
		padding-bottom:15px;
	}

ul#filter {
	list-style:none;
	margin:-8px 0 5px 20px;
	padding:0;
}

ul#filter li {
		padding-bottom:5px;
	}
	

/* ================== TEXT FORMATION ======================= */

h1 {
	font-family: Helvetica, Arial, Verdana;
	font-size:28px;
	color:#000;
	margin-top:0;
	line-height:30px;
}

h2 {
	font-family: Helvetica, Arial, Verdana;
	font-size:18px;
	color:#000;
	margin-top:0;
	line-height:22px;
	margin-bottom:5px;
}

h1 sup {
	font-size:15px;
}

strong {
	color:#666;
}

#firstcontainer strong {
	color:#000;
}

#side h1 {
	font-family: Helvetica, Arial, Verdana;
	font-size:28px;
	color:#000;
	margin:5px 0 0 0;
	padding:0 0 5px 0px;
	line-height:30px;
}

#side strong, #side strong a {
	color:#000;
}

#side strong a:hover {
	color:rgb(188,0,45);
}

p {
	line-height:22px;
}

.rot {
	color:rgb(188,0,45);
}

/* ================== NEWS ======================= */

.newszeile {
	position:relative;
	float:left;
	width:745px;
	margin-bottom:45px;
}

	.newszeile img {
		position:relative;
		float:left;
		width:280px;
		margin:0 15px 0 0;
	}
	
	.newszeile div {
	float:left;
		width:420px;
	}
	
.trenner {
	position:relative;
	float:left;
	height:20px;
	width:765px;
	background:url(../img/h_line.gif) repeat-x;
}
	
/* ================== SCROLLBAR ======================= */

#extra_controls, #scrollbar { 
	display:block; /* initially display:none; to hide from incapable */
	width:185px;
}

div#wn	{ 
	position:relative;
	width:730px; 
	height:535px;
	margin-top:32px; 
	overflow:hidden;
	float:left;
	}

.zwei #wn	{ 
	position:relative;
	width:730px; 
	height:510px;
	margin-top:0px; 
	overflow:hidden;
	float:left;
	}
	
div.content { /* hide content to be swapped in */
	position:absolute; 
	visibility:hidden;
	left:0px; 
	top:0px; 
	}
	
div#lyr1 { /* show first div */
    visibility:visible;
    }

div#scrollbar { 
	position:relative;
	float:right;
	width:22px; 
	height:545px; 
	font-size:1px;  /* so no gap or misplacement due to image vertical alignment */
  }

.zwei #scrollbar { 
	position:relative;
	float:right;
	width:22px; 
	height:505px; 
	font-size:1px;  /* so no gap or misplacement due to image vertical alignment */
  }

div#track { 
	position:absolute; 
	left:0; 
	top:20px;
	width:22px; 
	height:505px;
	background:url(../img/scroll_line.gif) repeat-y;
  }

.zwei #track { 
	position:absolute; 
	left:0; 
	top:20px;
	width:22px; 
	height:468px;
	background:url(../img/scroll_line.gif) repeat-y;
  }

div#dragBar {
	position:absolute; 
	margin-left:8px; 
	top:1px;
	width:5px; 
	height:20px;
	background-color:#9caab1;
  }  
  
div#up { 
	position:absolute; 
	left:0; 
	top:0; 
}  

div#down { 
	position:absolute; 
	left:0; 
	bottom:0;
}

/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollbar img {
    display:block; 
    } 
    
/* for safari, to prevent selection problem */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
    -moz-user-select: none;
    -khtml-user-select: none;
}
	
	
/* ================== FORMULAR ======================= */

input {
	background-color:#fff;
	border:#9caab1 1px solid;
	padding:3px;
	margin:0 0 2px 0;
	width:249px;
	height:13px;
	color:#6c7a81;
}

input:hover {
	border:rgb(188,0,45) 1px solid;
	color:rgb(188,0,45);
}

	input.klein1 {
		width:80px;
	}
	
	input.klein2 {
		width:154px;
	}
	
	input.button, input.button_klein {
		width:auto;
		padding:2px 18px;
		height:22px;
	}

	input.button:hover, input.button_klein:hover {
		color:#fff;
		background-color:rgb(188,0,45);
	}

textarea {
	background-color:#fff;
	border:#9caab1 1px solid;
	width:354px;
	height:218px;
	padding:3px;
	color:#6c7a81;
	font-size:12px;
	font-family: Helvetica, Arial, Verdana;
}

textarea:hover {
	border:rgb(188,0,45) 1px solid;
	color:rgb(188,0,45);
}

.bildergalerie {
	position:relative;
	float:left;
	width:130px;
	height:130px;
	overflow:hidden;
	margin:0 10px 10px 0;
}

.bildergalerie img {
	position:relative;
	float:left;
	width:130px;
	margin-bottom:3px;
	border:0;
}

/* ================== KREATION ======================= */

.kunde {
	position:relative;
	float:left;
	width:130px;
	height:165px;
	margin:0 10px 5px 0;
	line-height:15px;
}

.kunde img {
	position:relative;
	float:left;
	width:130px;
	height:130px;
	margin-bottom:3px;
	border:0;
}


#filterformat3 {
	position:absolute;
	float:left;
	height:270px;
	_height:258px;
	width:200px;
	bottom:91px;
	font-size:10px;
}

#filterformat2 {
	position:absolute;
	float:left;
	height:270px;
	_height:258px;
	width:200px;
	bottom:1px;
	left:26px;
	font-size:10px;
	display:block;
}
		
#filterformat1 {
	position:absolute;
	float:left;
	height:100px;
	_height:80px;
	width:200px;
	bottom:81px;
	font-size:10px;
}
	.kleinfilter p {
		position:relative;
		float:left;
		height:1px;
		width:185px;
		background:url(../img/h_line.gif) repeat-x;
	}
	
	.kleinfilter div {
		position:relative;
		float:left;
		width:55px;
		height:80px;
		margin:0 10px 10px 0;
		color:#6c7a81;
		line-height:11px;
	}
	
* html .kleinfilter div {
		height:80px;
		margin:0 8px 8px 0;
	}
	
	.kleinfilter div:hover a, .kleinfilter div a.aktiv {
		color:#000;
	}
		.kleinfilter div a img {
			height:55px;
			width:55px;
			border:0;
			margin-bottom:5px;
			filter:alpha(opacity=50);
			-moz-opacity:0.5;
			opacity:0.5;
		}
		
		* html .kleinfilter div a img {
			margin:0;
			float:none;
		}
	
		.kleinfilter div:hover a img, .kleinfilter div a.aktiv img {
			filter:alpha(opacity=100);
			-moz-opacity:1;
			opacity:1;
		}
		
/* ================== LAYOUTS ======================= */

#rubriken {
	position:absolute;
	width:360px;
	height:30px;
	text-align:right;
	bottom:0px;
	right:35px;
}

#rubriken_tv {
	position:absolute;
	width:360px;
	height:48px;
	text-align:right;
	bottom:0;
	right:0;
}

#arbeit {
	position:relative; 
	float:left;
	overflow:hidden;
	width:395px; 
	height:510px;
}

#arbeit img {
	height:510px;
}

#thumps {
	position:relative; 
	float:left;
	margin-top:275px;
	width:360px;
	height:235px;
}

	#thumps .thumber {
		position:relative; 
		float:left;
		width:80px;
		height:115px;
		margin:0 10px 5px 0;
	}	
		#thumps .thumber img {
			position:absolute;
			border:0;
			height:115px;
			width:115px;
			clip:rect(0 100px 115px 15px);
			filter:alpha(opacity=40);
			-moz-opacity:0.4;
			opacity:0.4;
	}
		
		#thumps .thumber .aktiv img, #thumps .thumber:hover img {
			filter:alpha(opacity=100);
			-moz-opacity:1;
			opacity:1;
		}	
	
	
#arbeit_quer {
	position:relative; 
	float:left;
	overflow:hidden;
	width:755px; 
	height:425px;
}


#arbeit_quer img {
position:relative;
	height:425px; 
	/*margin-right:130px;*/
	border:0;
}

#thumps_quer {
	position:relative; 
	float:left;
	width:755px;
	min-height:30px;
	background:url(../img/h_line.gif) repeat-x 0 18px;
}

#thumps_tv {
	position:absolute;
	text-align:right;
	width:450px;
	height:100px;
	bottom:0px;
	right:35px;
}

	#thumps_quer .thumber, #thumps_tv .thumber {
		position:relative; 
		float:left;
		width:100px;
		height:65px;
		margin-right:10px;
		margin-top:6px;
	}	
		#thumps_quer .thumber img, #thumps_tv .thumber img{
			position:absolute;
			border:0;
			height:100px;
			width:100px;
			clip:rect(20px 100px 85px 0px);
			filter:alpha(opacity=40);
			-moz-opacity:0.4;
			opacity:0.4;

		}
		
		#thumps_quer .thumber .aktiv img, #thumps_tv .thumber .aktiv img, #thumps_quer .thumber:hover img, #thumps_tv .thumber:hover img {
			filter:alpha(opacity=100);
			-moz-opacity:1;
			opacity:1;
		}	
		
		
		
.fallstudiethump {
	position:absolute;
	right:50px;
	bottom:4px;
	width:150px;
	height:103px;
}

#arbeit_quer .fallstudiethump img {
	border:1;
	width:150px;
	height:103px;
}


/* ================== SLIDER ======================= */

#slider1 {
    width: 992px; /* important to be same as image width */
    height: 603px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	margin:16px 0 16px 16px;
}

#slider1Content {
    width: 992px; /* important to be same as image width or wider */
    position: absolute;
/*	bottom: 0;
	margin-left: 0;
*/}

.slider1Image {
    float: left;
    position: relative;
	display: none;
}

.slider1Image span {
    position: absolute;
	font: 34px/40px Helvetica, Arial, sans-serif bolder;
    padding: 10px 13px;
    width: 694px;
    background-color: #fff;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
	-khtml-opacity: 0.9;
    opacity: 0.9;
    color: #000;
    display: none;
}

.sliderImage span strong {
	filter: alpha(opacity=100);
    -moz-opacity: 1.0;
	-khtml-opacity: 1.0;
    opacity: 1.0;

}

.clear {
	clear: both;
}

.left {
	bottom: 0;
    left: 0;
	width: 435px !important;
	height: 130px;
	margin:15px;
}

.left  a{
	color:#000;
}

.right {
	right: 0;
	bottom: 0;
	width: 435px !important;
	height: 130px;
	margin:15px;
}

.right  a{
	color:#000;
}

ul { 
	list-style-type: none;
	padding:0;
	margin:0;

}

.skip {
	font-weight:bold;
	text-align:center;
	width:1024px;
	padding-top:10px;
}
/* ================== SLIDER 2 H ======================= */


#scrollLinks {
	float:left;
	padding:6px 17px;
	margin-left:270px;
	background-color:#fff;
}

#pfeil_links {
	float:left;
	width:19px;
	height:21px;
	margin-right:10px;
	background:url(../img/links.gif) no-repeat;
}

#pfeil_links:hover {
	background:url(../img/links_h.gif) no-repeat;
}

#pfeil_rechts {
	float:left;
	width:19px;
	height:21px;
	background:url(../img/rechts.gif) no-repeat;
	
}

#pfeil_rechts:hover {
	background:url(../img/rechts_h.gif) no-repeat;
}

#t1 div {
	position:relative;
	float:left;
	width:755px;
	height:425px;
}

#t1 div div {
	position:absolute;
	bottom:0;
	right:0;
	width:125px;
	height:130px;
	font-size:10px;
	line-height:12px;
}

#t1 div div#begrenzer1 {
	position:relative;
	background:url(../img/begrenzer1.png) 0 200px no-repeat;
	width:6px;
	margin-right:5px;
	height:425px;
}

#t1 div div#begrenzer2 {
	top:200px;
	right:0;
	background:url(../img/begrenzer2.png) no-repeat;
	width:6px;
	height:50px;
}

#thumps_quer #rubrik {
	position:absolute;
	top:45px;
	width:625px;
	text-align:center;
}

#rubrik a {
	white-space:nowrap;
}

#t1 div div.seitenzahl {
	height:20px;
	width:20px;
	padding:6px;
	background-color:rgb(188,0,45);
	color:#fff;
	font-size:15px;
	text-align:center;
}


/* ================== TOOLTIP ======================= */

/*a#tooltip {
	position:absolute;
	bottom:0;
	right:0;
	color:#fff;
	font-size:11px;
	background-color:#999;
	padding:2px 4px 0 4px;
}

a#tooltip:hover {
	background-color:rgb(188,0,45);
}*/



a#tooltip {
	position:absolute;
	bottom:0;
	right:0;
	background-color:#fff;
	border:#6c7a81 1px solid;
	padding:4px 18px;
	margin:2px 0 2px 0;
	width:auto;
	height:15px;
	color:#6c7a81;
	text-align:center;
}

a#tooltip:hover {
	background-color:rgb(188,0,45);
	color:#fff;
}

/* ================== GOOGLE MAPS ======================= */

#directions {
	width:250px;
	height:509px; 
	overflow:auto;
	margin-left:10px;
}

.googledir div div div {
	color:rgb(188,0,45);
	}