/*  =========================================================
Titel des Projektes hier eingeben
Datei: styles.css
Media: screen, projection 

Datum: 18. Juni 2007
Autor: Florian Bruns 
Web:   http://www.agentur-brandung.de
========================================================== */

/* ===============================

   =1. ALLGEMEINE SELEKTOREN 

=============================== */

* {
	padding: 0;
	margin: 0;
}

body {
	font: 11px Arial, Helvetica, sans-serif;
	line-height: 14px;
	color: #cccccc;
	background: #000000 url(../images/bg.jpg);
	background-position: 50% 0%;
	text-align: center;
}

/* ===============================
   =Block-Elemente 
=============================== */

h1 {
color: #0099ff;
font: 11px Arial, Helvetica, sans-serif;
line-height: 21px;
font-weight: bold;
display: none;
}

h2 {
color: #0099ff;
font: 11px Arial, Helvetica, sans-serif;
line-height: 21px;
font-weight: bold;
}

h3 {

}

img {border: none;}

p, 
ul, 
ol {
	margin: 0 0 1em 0;
}

li {
	list-style: none;
}

address {

}

/* ===============================
   =Inline-Elemente 
=============================== */

strong {
	font-weight: bold;
}
a									{ color: #cccccc; text-decoration: none; }
a:visited 				{ color: #cccccc; text-decoration: none; }
a:hover 					{ color: #0099ff; text-decoration: none; }
a:active 					{ color: #ffffff; text-decoration: none; }

/* ===============================
   =Classen
=============================== */

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.clearContent {
	clear: both;
	height: 9px;
}

.date {
	font-size: 10px;
}

.grey {
	color: #cccccc;
}

.blue {
	color: #0099ff:
}

/* ========================================

  =2. LAYOUTBEREICHE

========================================= */ 


/* ===============================
   =Wrapper
=============================== */
#wrapper {
	width: 900px;
	margin: 0 auto;
	background: #000;
	text-align: left;
}

#wrapper.followBG {
	background: #bdbdbd url(../images/bg_outside.jpg) repeat-y top center;
}
/* ===============================
   =Header
=============================== */
#hiddenNav {
	display: none;
}

#header{
	background: #000 url(../images/bg_header.jpg) no-repeat top left;
	height: 57px;
	padding-top: 43px;
}

/* ===============================
	 =Navigation
=============================== */
	
	#navi {
		margin: 0 0 0 162px;
		background: url(../images/navi_bg.jpg) repeat-x top left;
		width: 738px;
		height: 57px;
	}
	
		#navi ul,
		#subNavi ul {
			margin:0;
		}
		
		#navi li {
			float: left;
			background: url(../images/navi_trenner.jpg) no-repeat right top;
		}
	
		#navi li a {
			display: block;
			padding: 14px 10px 10px 10px;
			margin-right: 2px;
		}
	
		#navi li a:hover,
		#navi li.naviAktiv a {
			background: url(../images/navi_button_active.jpg) repeat-x top left;
			color: #fff;
			text-decoration: none;
		}

/* Sub Menu */

	#subNavi {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 80px;
		width: 300px;
	}

	#subNaviOff {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 80px;
		width: 300px;
	}

		#subNavi li,
		#subNaviOff li {
			float: left;
		}
		
		#subNavi li a,
		#subNaviOff li a,
		#navi li.naviAktiv ul a {
			display: block;
			background: url(../images/subnavi_bg.gif) repeat-x top left;
			padding: 2px 10px 5px 10px;
		}

		#subNavi li a:hover,
		#subNaviOff li a:hover {
			background: url(../images/subnavi_bg.gif) repeat-x top left;
			color: #0099ff;
		}
/* ===============================
	 =Liste
=============================== */
	#liste {
	padding: 6px 5px 6px 0px;
	}

		.liste p,
		.liste ul  {
			padding: 0px 12px;
		}
		
		.liste li {
			background: url(../images/liste.jpg) no-repeat left 4px;
			padding: 0 0 5px 20px;
			line-height: 12px;
		}
/* ===============================
	 =Footer-Navigation
=============================== */
	
	#footer {
		float: right;
		background: url(../images/bg_footer_up.jpg) repeat-x top left;
		width: 900px;
		height: 24px;
	}
	
	#footer_down {
		float: right;
		background: url(../images/bg_footer_down.jpg) repeat-x top left;
		width: 900px;
		height: 12px;
	}

	#footer_navi {
		float: right;
		background: #000000 url(../images/footer_navi_bg.jpg) repeat-x top left;
		height: 24px;
		width: 140px;
	}
	
		#footer_navi li {
			float:left;
			background: none;
			padding: 0;
		}
	
		#footer_navi li a {
			display:block;
			padding: 5px 9px;
			background: #none;
			color: #7e8182;
		}
		
		#footer_navi li a:hover,
		#footer_navi li.naviAktiv a {
			background: url(../images/footer_navi_bg.jpg) repeat-x;
			color: #0099ff;
			text-decoration: none;
		}
		
/* ===============================
   =Content
=============================== */
	#container {
		width:900px;
		margin:0 auto;
	}

	#content {
		float: left;
		background: #000000 url(../images/content_left.jpg) no-repeat;
		height: 432px;
		width: 360px;
	}
	
	#content_left {
		float: left;
		background: #000000 url(../images/bg_left.jpg) no-repeat;
		height: 432px;
		width: 450px;
	}
	
	#content_right {
		float: right;
		background: #000000 url(../images/bg_right.jpg) no-repeat;
		height: 432px;
		width: 450px;		
		}

	#cam_left {
		float: left;
		background: #000000 url(../images/content_middle.jpg) no-repeat;
		height: 432px;
		width: 270px;
	}

	#cam_right {
		float: right;
		background: #000000 url(../images/content_right.jpg) no-repeat;
		height: 432px;
		width: 270px;
	}
	
	#text_startseite {
		background: none;
		margin: 3px 0 0 72px;
		width: 248px;
		height: 27px;
	}
	
	#text {
		background: none;
		margin: 48px 0 0 72px;
		width: 340px;
	}
	
	#text_absolute {
		background: none;
		margin: 48px 0 0 72px;
		width: 800px;
		position: absolute;
	}
	
	#text_right {
		background: none;
		margin: 113px 0 0 50px;
		width: 340px;
	}
	
		
	#text_teaser {
		float: left;
		background: none;
		margin: 3px 0 0 52px;
		width: 290px;
		color: #0099ff;
	}		
	
/* ===============================
   =Headline
=============================== */
	#headline_start {
			background: url(../images/headline/headline_start.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}
	
	#headline_start h1 {
		display: none;
	}
	
	#headline_features {
			background: url(../images/headline/headline_features.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}

	#headline_rental {
			background: url(../images/headline/headline_rental.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}

	#headline_sales {
			background: url(../images/headline/headline_sales.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}

	#headline_faq {
			background: url(../images/headline/headline_faq.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}
	
	#headline_contact {
			background: url(../images/headline/headline_contact.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}
	
	#headline_imprint {
			background: url(../images/headline/headline_imprint.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}
	
	#headline_partner {
			background: url(../images/headline/headline_partner.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}
	
	#headline_technical {
			background: url(../images/headline/headline_technical.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}	

	#headline_manual {
			background: url(../images/headline/headline_manual.jpg) no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}
	
	#headline_spacer {
			background: none no-repeat;
			margin: 45px 0 0 35px;
			width: 322px;
			height: 26px;
	}				
/* ===============================
   =Text-Grafiken
=============================== */	
	#startseite_text_1 {
			background: url(../images/content/start/text_1.jpg) no-repeat;
			margin: 3px 0 0 70px;
			width: 281px;
			height: 34px;
	}			

	#startseite_text_2 {
			background: url(../images/content/start/text_2.jpg) no-repeat;
			margin: 45px 0 0 66px;
			width: 194px;
			height: 49px;
	}
	
	#startseite_text_3 {
			background: url(../images/content/start/text_2.jpg) no-repeat;
			margin: 20px 0 0 66px;
			width: 194px;
			height: 49px;
	}
	
	#startseite_text_1 p,
	#startseite_text_2 h2 {
		display: none;
	}


/* ===============================
   =Teaser-Grafiken
=============================== */

	#teaser_event_ibc {
			background: url(../images/content/start/ty_event_ibc.jpg) no-repeat top left;
			width: 258px;
			height: 74px;
			margin: 18px 0 0 68px;
	}
	
	#teaser_vergleich /*links*/ {
			background: url(../images/content/technical/ty_vergleich.gif) no-repeat top left;
			margin: 116px 0 0 50px;
			width: 295px;
			height:	128px;
			float: left;
	}	

	#teaser_skizze /*links*/ {
			background: url(../images/content/technical/ty_skizze.gif) no-repeat top left;
			margin: 30px 0 0 50px;
			width: 295px;
			height:	321px;
			float: left;
	}
	
	#teaser_cam /*links*/ {
			background: url(../images/content/technical/ty_cam.gif) no-repeat top left;
			margin: 30px 0 0 50px;
			width: 128px;
			height:	128px;
			float: left;
	}
	
	#teaser_cam_2 /*links*/ {
			background: url(../images/content/technical/ty_cam2.gif) no-repeat top left;
			margin: 30px 0 0 50px;
			width: 128px;
			height:	128px;
			float: left;
	}

	#teaser_cam_3 /*rechts*/ {
			background: url(../images/content/technical/ty_cam3.gif) no-repeat top left;
			margin: 30px 0 0 37px;
			width: 128px;
			height:	128px;
			float: left;
	}
	
	#teaser_muenze /*rechts*/ {
			background: url(../images/content/technical/ty_muenze.gif) no-repeat top left;
			margin: 30px 0 0 37px;
			width: 128px;
			height:	128px;
			float: left;
	}				
/* ===============================
   =Button
=============================== */
	#btn_produkttour {
			background: url(../images/content/start/btn_produkttour.jpg) no-repeat;
			margin: 30px 0 0 210px;
			width: 116px;
			height: 41px;
	}
	
	#btn_produkttour_2 {
			background: url(../images/content/start/btn_produkttour_2.jpg) no-repeat;
			margin: 323px 0 0 61px;
			width: 116px;
			height: 41px;
	}	

	#btn_datasheet {
			background: url(../images/content/start/btn_datasheet.jpg) no-repeat;
			margin: 30px 0 0 70px;
			width: 183px;
			height: 30px;
	}