body, p, h1, h2, h3, tr, td, ul, div, li {
	font-family: Helvetica,Verdana,Arial,sans-serif;
}

p {
	font-size: 12px;
	margin-top: 0px;
	}
	
h1 {
	font-size: 24px;
	font-weight: 200;
	margin: 0px;
	}
	
p {
	line-height: 1.5em;
	}
	
.textWhite {
	color: white;
}

.textWhite span {
	text-transform: uppercase;
	font-weight: bold;
	color: #adcddb;
}

.textBlack {
	color: black;
}

.textBlack span {
	text-transform: uppercase;
	font-weight: bold;
	color: #314f6e;
}
	
a {
	text-decoration: none;
	outline: none;
	border: none;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #002e4c;	
	}

html {
	margin: 0px;
	padding: 0px;
	height: 100%;	
}
	
img {
	outline: none;
	border: none;	
}

#verbindungscontainer {
	height: 700px;
	width: 900px;
	position: absolute;
	margin: -400px 0 0 -500px;
	top: 50%;
	left: 50%;
	background-image: url(../../img/hg_schatten_site.png);
	background-repeat: no-repeat;
	padding: 50px;
	}
	
#headWrap {
	width: 900px;
	height: 182px;
	background-image: url(../../img/hg_kopf.jpg);
	background-repeat: no-repeat;
}
	 #headWrap a.logo {
		float: right;
	}
	
	#headline {
		position: absolute;
		margin-top: 147px;
		margin-left: 40px;
		font-size: 16px;
		font-weight: 100;
		color: white;
		z-index: 10;
	}
	
	#navi {
		position: relative;
		top: 72px;
		left: 508px;
		width: 392px;
	}
	
	#navi a.naviButton {
		width: 98px;
		height: 89px;
		display: block;
		float: left;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
		#navi a.naviButton.zukunft {
			background-image: url(../../img/button_zukunft.jpg);
		}
			#navi a.naviButton.zukunft:hover {
				background-image: url(../../img/button_zukunft_hover.jpg);
			}
			#navi a.naviButton.zukunftactive {
				background-image: url(../../img/button_zukunft_hover.jpg);
			}
			
		#navi a.naviButton.material {
			background-image: url(../../img/button_material.jpg);
		}
			#navi a.naviButton.material:hover {
				background-image: url(../../img/button_material_hover.jpg);
			}
			#navi a.naviButton.materialactive {
				background-image: url(../../img/button_material_hover.jpg);
			}
			
		#navi a.naviButton.design {
			background-image: url(../../img/button_design.jpg);
		}
			#navi a.naviButton.design:hover {
				background-image: url(../../img/button_design_hover.jpg);
			}
			#navi a.naviButton.designactive {
				background-image: url(../../img/button_design_hover.jpg);
			}
			
		#navi a.naviButton.sensorik {
			background-image: url(../../img/button_sensorik.jpg);
		}
			#navi a.naviButton.sensorik:hover {
				background-image: url(../../img/button_sensorik_hover.jpg);
			}
			#navi a.naviButton.sensorikactive {
				background-image: url(../../img/button_sensorik_hover.jpg);
			}
			
		#navi a.naviButton.sensors {
			background-image: url(../../img/button_sensor.jpg);
		}
			#navi a.naviButton.sensors:hover {
				background-image: url(../../img/button_sensor_hover.jpg);
			}
			#navi a.naviButton.sensorsactive {
				background-image: url(../../img/button_sensor_hover.jpg);
			}
			
		#navi a.naviButton.future {
			background-image: url(../../img/button_future.jpg);
		}
			#navi a.naviButton.future:hover {
				background-image: url(../../img/button_future_hover.jpg);
			}
			#navi a.naviButton.futureactive {
				background-image: url(../../img/button_future_hover.jpg);
			}
			
#contentWrap {
	width: 900px;
	height: 488px;
}
	#contentWrap.start {
		background-image: url('../../img/hg_home.jpg');
		background-repeat: no-repeat;
	}
		#contentWrap.start div {
			position: relative;
			top: 70px;
			left: 40px;
		}
			#contentWrap.start h1, p {
				color: white;
			}
			#contentWrap.start h1 {
				margin-bottom: 20px;
			}
			#contentWrap.start p {
				width: 185px;
/*
				text-align: justify;
*/
			}

#verbindungscontainer .scrollable {
	position: relative;
	overflow: hidden;
	width: 900px;
	height: 488px;
	margin-right: 30px;
}
	.scrollable .items {
		width: 20000em;
		height: 488px;
		position: absolute;
		clear: both;
	}
	
	.scrollable div div {
		float: left;
		margin: 0px 0px 0px 0;
		width: 900px;
		height: 488px;
	}
	
	.prevPage {
		width: 27px;
		height: 27px;
		display: block;
		background-image: url('../../img/pfeil_zurueck.png');
		background-repeat: no-repeat;
		cursor: pointer;
		position: absolute;
		margin-top: 185px;
		margin-left: 15px;
		float: left;
		z-index: 999;
	}
		.prevPage:hover {
			background-image: url('../../img/pfeil_zurueck_hover.png');
			background-repeat: no-repeat;
		}
		.prevPage.disabled {
			visibility: hidden !important;
		}
		
	.nextPage {
		width: 27px;
		height: 27px;
		display: block;
		background-image: url('../../img/pfeil_vor.png');
		background-repeat: no-repeat;
		cursor: pointer;
		position: absolute;
		margin-top: 185px;
		margin-left: 855px;
	}
		.nextPage:hover {
			background-image: url('../../img/pfeil_vor_hover.png');
			background-repeat: no-repeat;
		}
		.nextPage.disabled {
			visibility:hidden !important;
		}
	
	.contentWrap {
		width: 900px;
		height: 488px;
	}
				
	.contentWrap.design {
		background-image: url('../../img/hg_design_01.jpg');
		background-repeat: no-repeat;
		font-size: 12px;
		line-height: 1.5em;	
	}
	
	.contentWrap.design2 {
		background-image: url('../../img/hg_design_02.jpg');
		background-repeat: no-repeat;
		font-size: 12px;
		line-height: 1.5em;	
	}
	
	.contentWrap.zukunft {
		background-image: url('../../img/hg_zukunft.jpg');
		background-repeat: no-repeat;
	}
		.contentWrap.zukunft #zuText {
			position: relative;
			width: 230px;
			top: 100px;
			left: 570px;	
		}

	.contentWrap.material {
		background-image: url('../../img/hg_material.jpg');
		background-repeat: no-repeat;
	}
	
	.contentWrap.material.en {
		background-image: url('../../img/hg_material_en.jpg');
		background-repeat: no-repeat;
	}
		.contentWrap.material #rundText {
			position: relative;
			width: 270px;
			top: 80px;
			left: 570px;
			font-size: 12px;
			line-height: 1.5em;	
		}
			
			.contentWrap.material #rundText .overlay {
			    display: none; 
				position: absolute;
				background-color: #1a3e61;
				top: 0px;
				left: 0px;
			    z-index: 10; 
				min-height: 80px;
				width: 150px;   
			}
			
			.contentWrap.material #rundText .beschreib {
				position: absolute;
				top: 0px;
				left: 0px;
			    z-index: 10; 
				min-height: 80px;
				width: 130px;   
			}
			
			.contentWrap.material #textBoxBottom {
				position: absolute;
				top: 305px;
				left: 45px;
			    z-index: 10; 
				min-height: 80px;
				width: 160px;
				font-size: 12px;
				line-height: 1.5em;  
			}
			
			.contentWrap.material div .close {
				display: none;
				position: absolute;
				top: 0px;
				left: 0px;
			}
		
		.contentWrap.material .imgRund {
			width: 66px;
			position: relative;
			top: -30px;
			left: 155px;
		}	
			.contentWrap.material .imgRund a {
				display: block;
				width: 66px;
				height: 66px;
				margin-bottom: 10px;
				cursor: pointer;
			}		
			
		.contentWrap div.textBoxBottom1 {
				position: absolute;
				margin-top: 310px;
				margin-left: 40px;
				width: 190px;   
			}
			
		.contentWrap div.textBoxBottom2 {
				position: absolute;
				margin-top: 310px;
				margin-left: 275px; 
				width: 190px;   
			}
			
		.contentWrap div.textBoxBottom3 {
				position: absolute;
				margin-top: 310px;
				margin-left: 520px; 
				width: 190px;   
			}
			
		.contentWrap div.beschreib1 {
				position: absolute;
				margin-top: 60px;
				margin-left: 620px;
				width: 200px;  
			}
			
		.contentWrap div.beschreib2 {
				position: absolute;
				margin-top: 150px;
				margin-left: 620px;
				width: 200px; 
			}
			
		.contentWrap div.beschreib3 {
				position: absolute;
				margin-top: 240px;
				margin-left: 620px;
				width: 200px; 
			}
			
	.contentWrap.sensorik {
		background-image: url('../../img/hg_sensorik_01.jpg');
		background-repeat: no-repeat;
		font-size: 12px;
		line-height: 1.5em;	
	}
	
	.contentWrap.sensorik2 {
		background-image: url('../../img/hg_sensorik_02.jpg');
		background-repeat: no-repeat;
		font-size: 12px;
		line-height: 1.5em;	
	}
	
	.contentWrap.sensorik2_en {
		background-image: url('../../img/hg_sensorik_02_en.jpg');
		background-repeat: no-repeat;
		font-size: 12px;
		line-height: 1.5em;	
	}
		#verbindungscontainer .bigOverlay {
		    display: none; 
			position: absolute;
			width: 757px;
			height: 388px;
			-moz-box-shadow:0 0 90px 5px #000; 
    		-webkit-box-shadow: 0 0 90px #000; 
			border:1px solid #1e2559; 
			background-image: url('../../img/zeichnung_gross.jpg');
			background-repeat: no-repeat;
			margin-top: 50px;
			margin-left: 70px;
		    z-index: 50;
		}
			#verbindungscontainer .bigOverlay .close {
				width: 27px;
				height: 27px;
				position: absolute;
				top: -12px;
				left: 746px;
				cursor: pointer;
			}
		
		.contentWrap.sensorik2 a {
			display: block;
			width: 535px;
			height: 207px;
			position: absolute;
			margin-top: 280px;
			margin-left: 0px;
			z-index: 40;
			cursor: pointer;
		}
		
		.contentWrap.sensorik div.beschreib {
				position: absolute;
				margin-top: 320px;
				margin-left: 570px;
				width: 230px;  
			}
			
		.contentWrap.sensorik2 div.beschreib {
				position: absolute;
				margin-top: 50px;
				margin-left: 570px;
				width: 230px;  
			}
			
		.contentWrap.sensorik2 div.beschreib2 {
				position: absolute;
				margin-top: 140px;
				margin-left: 570px;
				width: 230px; 
			}
			
		.contentWrap.sensorik2 div.beschreib3 {
				position: absolute;
				margin-top: 215px;
				margin-left: 570px;
				width: 230px; 
			}
			
		.contentWrap.sensorik2 div.beschreib4 {
				position: absolute;
				margin-top: 290px;
				margin-left: 570px;
				width: 230px; 
			}
			
		.contentWrap.sensorik2_en a {
			display: block;
			width: 535px;
			height: 207px;
			position: absolute;
			margin-top: 280px;
			margin-left: 0px;
			z-index: 40;
			cursor: pointer;
		}
			
		.contentWrap.sensorik2_en div.beschreib_en {
				position: absolute;
				margin-top: 50px;
				margin-left: 570px;
				width: 230px;  
			}
			
		.contentWrap.sensorik2_en div.beschreib5 {
				position: absolute;
				margin-top: 160px;
				margin-left: 570px;
				width: 230px; 
			}
			
		.contentWrap.sensorik2_en div.beschreib6 {
				position: absolute;
				margin-top: 235px;
				margin-left: 570px;
				width: 230px; 
			}
			
		.contentWrap.sensorik2_en div.beschreib7 {
				position: absolute;
				margin-top: 310px;
				margin-left: 570px;
				width: 230px; 
			}
			
#footer {
	width: 885px;
	height: 20px;
	background-image: url('../../img/hg_footer.jpg');
	background-repeat: no-repeat;
	clear: both;
	color: #7ba3b5;
	padding-top: 10px;
	padding-right: 15px;
}
	#footer a {
		font-size: 11px;
		color: #7ba3b5;
		padding: 0 10px 0 10px;
		float: right;
	}