/* ==========================================================================================
					
							S T Y L E S H E E T - screen.css
							
							Autor: Fabian Schmaljohann
							Datum: 31. Aug, 2009
							Media: Screen
		
============================================================================================= */



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

							A L L G E M E I N E  A N G A B E N
		
================================================================ */


* {
	padding: 0;	margin: 0; }

a {
	text-decoration: none; color:#006633; outline: none; }
					
a:hover, a:focus {
	color: #000000; }
					
a:active {
	color: #FFFFFF; }
	
a#activelink {
	color: #000000; }

h2, p, ul, ol {
	margin-bottom: 1em; }

ul, ul {
	margin-bottom: 0; }

html {
	height: 101%; } 
			
#wrapper {
	background-color: #ffffff;
	margin: 0 auto 0 auto;
	}

#contentwrapper {
	width: 860px;
	min-height: 400px;
	margin: 0 auto 50px auto; }
						
#inhalt {
	margin: 0;
	line-height: 1.6em;
	padding: 20px 20px 80px 20px;
	list-style: none;
	letter-spacing: 0.08em;
	overflow: hidden;}
							
							
/* =============================================================

							U E B E R S C H R I F T E N
		
================================================================ */

h1, h2, h3, h4, h5, h6 {	font-family: Tahoma, Helvetica, Arial, sans-serif;
							font-weight: bold; }

h1 {
	font-size: 150%; } 
	
h2 {
	font-size: 130%;
	margin-bottom: 10px; }
	
h3 {
	font-size: 110%;
	color: #333399;
	padding: 0 20px 0 20px;
	margin: 0;
	border-bottom: 1px solid #008944; }
	
h4 {
	border-bottom: 1px solid #008944;
	display:block;
	clear: both;
	font-size: 100%;
	padding: 5px 10px 5px 10px;
	color: #333399; }
	
h4.regular {
	font-weight: normal; }
	
										
h5 {
	display: block;
	background: #efefef;
	border-bottom: 1px solid #cccccc;
	color: #333399;
	padding: 12px;
	clear: both;
	font-size: 100%; }
	
h6 {
	color: #333399;
	font-weight: normal;
	border: none;
	font-size: 107.69%; }
	
.lightitalic {
	font-style: italic;
	font-weight:lighter;
	letter-spacing: 1.2px; }
	


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

							K O P F B E R E I C H
		
================================================================ */

#head {
	background-color:#FFFFFF;
	background-image: url(Bilder/header.png);
	background-repeat: repeat-x;
	height: 227px; }

#headcontent {
	width: 860px;
	margin: 0 auto 0 auto; }
								
							
							
/* =============================================================

							S P R A C H M E N U
		
================================================================ */		

/* Zentrierte positionierung der Buttons */

#navi #language {
	background: transparent url(Bilder/navioben.png) no-repeat left top;
	padding: 10px 45px 30px 45px;
	width: 90px;}	
	
/* Textlinks für blinde Anwender (noneCSS) */
	
span.hiddennavi {
	display: none; }
	
p.comingsoon {
	margin: 10px 0 0 20px; }
	
p.valid {
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
	display: block;
	border-top: 1px solid #333399; }

/* ======================================= /// Deutsch Aktiv /// */		
							
a#deutsch-active {
	display:inline;
	background-image:url(Bilder/deufocus.png);
	width:40px; height:27px;
	float: left;  }


a#english-inactive {
	display:inline;
	background-image:url(Bilder/eng.png);
	width:40px; height:27px;
	float: right; }

a#english-inactive:hover {
	background-image:url(Bilder/engfocus.png); }
							
	
	
/* ======================================= /// English active /// */	

a#english-active {
	display:inline;
	background-image:url(Bilder/engfocus.png);
	width:40px; height:27px;
	float: right; }
	
	
a#deutsch-inactive {
	display:inline;
	background-image:url(Bilder/deu.png);
	width:40px; height:27px;
	float: left;  }

a#deutsch-inactive:hover {
	background-image:url(Bilder/deufocus.png); }
	

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

							N A V I G A T I O N
		
================================================================ */


#navi {
	width: 180px;
	background: #ffffff url(Bilder/navimitte.png) repeat-y left top;
	float: left;
	overflow: hidden; }
	

#navi ul#main {
	width: 180px;
	clear: both;
	margin: 0;
	display: block;
	list-style: none;
	background: url(Bilder/naviunten.png) no-repeat left bottom; }
	
#navi ul#main li {
	margin: 0; }	

#navi ul#main li a {
	display: block;
	margin: 0;
	font-weight: bold;
	font-style: normal;
	text-align:center;
	font-size: 1.2em;
	padding: 10px 5px 10px 5px; }
	

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

							C O N T E N T 
		
================================================================ */


#maincontent {
	width: 670px;
	position: relative;
	float: left;
	margin: 0 0 0 10px;
	overflow: hidden;}

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

							I N D E X . H T M L
		
================================================================ */
	
	
a#merident {
	display:inline;
	float: left;
	margin: 0 0 0 10px;
	background-image:url(Bilder/merident.png);
	width:330px; height:420px; }
	
a#dci {
	display:inline;
	float: left;
	margin: 0 0 0 10px;
	background-image:url(Bilder/dci.png);
	width:330px; height:420px; }

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

							U L T R A L I G H T . H T M L
		
================================================================ */
							
#etuis,
#brillengestelle,
#ergonomie,
#service {
	margin: 20px 0 20px 0;
	overflow: hidden;
	clear: both;
	border: 1px solid #cccccc; }

/* ========================================== /// Seitenkopf /// */	

#seitenkopf	{
	border: 1px solid #cccccc;
	margin: 0;
	overflow: hidden; }
	
#seitenkopf img#wechsel {
	float: left; }	
							
img#logo {
	margin: 20px 0 0 25px;
	width: 100px; }
	
#seitenkopf #flash {
	float: left;	}
	
#ani {
	width: 200px;
	float: left;
}
	
#bulletpoints {
	width: 350px;
	margin: 20px 30px 20px 0;
	float: right; 
	}
	
#bulletpoints p {
	margin: 0 0 10px 0; }	
	

ul#bullets {
	float: left;
	list-style: disc;
	margin: 0 0 0 30px; }
	
	
/* ============================================= /// Tabelle /// */	

#ultralight #maincontent #seitenkopf table {
	margin: 0;
	border-collapse: collapse;
	width: 100%; }
							
td.funktion {
	padding: 5px 12px 5px 20px;
	font-weight: bold;
	text-align: right;
	margin: 0;
	color: #333333; }
							
td.daten {
	width: 134px;
	padding: 5px;
	text-align: center;
	margin: 0;
	border-left: 1px solid #cccccc; }
							
tr.row {
	background: #efefef; }

/* ============================================= /// Gestelle /// */	

#maincontent #brillengestelle {
	border-right: none;
	border-bottom: none; }
	
#brillengestelle h5 {
	border-right: 1px solid #cccccc; }

.brillengestell {
	letter-spacing: 1.3px;
	width: 49.8%;
	float: left;
	overflow: hidden;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc; }
	
.brillengestell h4,
.adaptionen h4,
.adaption h4,
.adaption-right h4 {
	background: #efefef;
	border: none;
	padding: 10px 10px 10px 20px;
	margin: 0;}		
	
h4 span.optiker {
	color: #999999;
	font-weight: normal;
	font-size: 95%; }
	
h4 span.beschreibung {
	color: #333399;
	font-weight: normal;
	font-size: 95%; }
	
.brillengestell img {
	float: left;
	margin: 20px auto 20px 30px; }	
	

/* ============================================= /// Etuis /// */	

.etui {
	float: left;
	width: 33%;
	text-align: center;
	margin: 0 0 10px 0; }
	
.etui a {
	display: block;
	height: 330px; }
	
.etui img#klein {
	margin: 115px 0 0 0; }
	
.etui img#mittel {
	margin: 120px 0 0 -10px; }
	
	
/* ========================================= /// Ergonomie /// */	
	
	
#ergonomie img {
	width: 300px;
	float: left;
	margin: 15px 0 15px 0; }
	
#ergonomiebilder {
	width: 45%;
	float: left;
	margin: 15px 0 15px 15px; }
	
#ergonomie p {
	padding: 15px;
	float: left;
	width: 45%; }
	

	
/* =========================================== /// Service /// */	
	
#service p {
	padding: 15px;
	float: left;
	width: 45%; }
	

#service img {
	width: 300px;
	float: left;
	margin: 15px 0 15px 15px; }
	
embed { 
	float: left;
	margin: 0 0 0 0; }
	
							

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

							S P O T L I G H T . H T M L
		
================================================================ */
	

h6.big {
	font-weight: bold;
	font-size: 16px;
	color: #333399; }

img.galerie-left,
img.galerie-right {
	width: 45%;
	border: 1px solid #cccccc;	 }
	
img.galerie-left {
	float: left;
	margin: 15px; }

img.galerie-right {
	float: right;
	margin: 15px; }
	
.adaptionen {
	margin: 20px 0 0 0;
	border: 1px solid #cccccc;
	overflow: hidden;
	clear: both; }
	
.adaption,
.adaption-right {
	margin: 20px 0 0 0;
	border: 1px solid #cccccc;
	overflow: hidden;
	width: 49%;
	float:left;
	height: 350px; }

.adaption-right {
	border-left: none; }
	
.adaption img,
.adaption-right img {
	margin: 20px 20px 20px 15px;
	border: 1px solid #cccccc;
	overflow: hidden;
	width: 300px }
	
.adaptionen h4,
.adaption h4,
.adaption-right h4 {
	border-bottom: 1px solid #cccccc; }
	
#bilder {
	overflow: hidden;
	margin: 20px 0 0 0;
	border-bottom: none;
	clear: both; }

p#abschluss {
	clear: both;
	margin: 20px 0 0 0; }
	
#spotlight h5 {
	border: 1px solid #cccccc; }
	
	
#technischedaten ul {
	list-style: disc; }
	
	
#technischedaten li {
	margin: 10px 0 0 15px ; }
	
#technischedaten {
	width: 50%;
	float: left;
	margin: 20px 0 20px 0; }
	
#spotlight #seitenkopf {
	padding: 0;
	margin: 0;
	height: 380px; }

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

							H I G H L I G H T . H T M L
		
================================================================ */			

img#test { }

#technischedaten h4 {
	background: #efefef;
	color: #333399;
	border: none; 
	margin: 20px 0 0 0; }
	
#highlightbilder {
	width: 40%;
	float: left; }
	
#highlightbilder img {
	width: 300px;
	margin: 150px 20px 10px 30px; }
	
#spotlight #highlightbilder img {
	width: 300px;
	margin: 35px 20px 40px 80px; }
	
#Spezialkoffer {
	height: 300px;
	border: 1px solid #cccccc;
	margin: 20px 0 0 0 ; }
	
#koffer {
	float: left;
	margin: 60px 0 0 40px; }	
	
a#details {
	margin: 20px 0 0 60px; }


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

							D E L I G H T . H T M L
		
================================================================ */	

							
#delight #bulletpoints {
	width: 300px;
	margin: 20px 30px 20px 0;
	float: right; }
	
								
									
/* =============================================================

							F A Q . H T M L
		
================================================================ */

							
							
.faqs {						margin: 50px 0 0 0; }

.faqs ul {					list-style: none;
							margin: 0; }

.faqs ol.aufzaehlung {		list-style: lower-alpha;
							margin: 0 0 10px 30px; }
							
.faqs a.seitenanfang {		text-align: right;
							display: block;
							margin: 10px 0 0 0; }

.faqs ul li p {
	margin: 0 5px 0 20px; }
	
.faqs ul li {
	margin: 20px 0 10px 0;
	padding: 15px;
	border: 1px solid #cccccc; }
	
.faqs ul li li {
	border: none;
	padding: 0; }

.faqlinks {
	margin: 0 0 20px 0;
	padding: 0 0 15px;
	line-height: 1.2em;
	border: 1px solid #cccccc; }

.faqlinks ol.faqnavi {
	padding: 10px 10px 0 20px; }

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

							D O W N L O A D S . H T M L
		
================================================================ */


ul#download li {
	float: left;
	height: 200px;
	width: 31%;
	text-align: center; }
	

ul#download {
	list-style: none; }

							

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

							F U S S B E R E I C H 
		
================================================================ */
	

#footer {					background-image: url(Bilder/footer.png);
							background-repeat: repeat-x;
							clear: both;
							height: 267px;
							color:#006633;
							line-height: 1.5em; }

#footer p {					text-align: center;
							margin-top: 20px;
							color: #333399; }

#footer a {					text-decoration: underline; } 

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

							G A L E R I E
		
================================================================ */

.galerie {
	clear: both;
	overflow: hidden;
	color: #006633; }
	
#ultralight .galerie {
	margin-top: 20px; }
	 
.galerie ul {
	list-style: none;
	margin: 0;
	padding: 0; }

.pic-navi {
	margin: 7px 0 0 10px;
	padding:7px 0 3px 7px;
	width:125px;
	float:left; }
	 
.pic-navi li img {
	width:110px;
	padding:0px;
	margin:1px 1px 1px 1px;
	border:1px solid #006633;
	float:left; }

.pic-navi li:hover img {
	border:1px solid #000000; }

div.pic-navi li {
	padding: 0 0 0 0;
	margin:0 0 0 0; }

div.pic-navi li span {
	display: none;
	color:#ff0000; }


div.pic-navi li:hover span {
	display: block;
	position: absolute;

	width: 450px;
	padding: 310px 20px 6px 20px;
	margin: -6px 0 0 163px;
	z-index: 100;

	/* aussehen der box */
	color: #858445;
	font: 0.92em verdana, sans-serif;
	text-align: left;
	float:left;

	/* position des hintergrund */
	background-position: 21px 10px;
	background-repeat: no-repeat; }

li#pic1:hover span{background-image:url(Bilder/Galerie/highlight_redbaron.png);}
li#pic2:hover span{background-image:url(Bilder/Galerie/highlight_goldenegg.png);}
li#pic3:hover span{background-image:url(Bilder/Galerie/highlight_blueocean.png);}
li#pic4:hover span{background-image:url(Bilder/Galerie/highlight_greyflannel.png);}
li#pic5:hover span{background-image:url(Bilder/Galerie/highlight_blackbeauty.png);}


div.helloworld{
	float:right;
	width:450px;
	margin:8px 0 0 38px;
	padding: 316px 20px 6px 20px;
	color: #858445;
	background:url(Bilder/Galerie/highlight_redbaron.png) no-repeat 21px 10px; }
	
div.pic-navi li#pic1 p {
	margin: 0 0 10px 0;
	color: #000000;
	font-weight: bold; }
	
p.farbe {
	float: left;
	width: 120px;
	margin: 0;
	padding: 3px 0 6px 8px; }

p.zoom {
	float: left;
	margin: 0 0 0 0;
	width: 120px;
	background: #efefef;
	border-bottom: 1px solid #cccccc; 
	padding: 8px;
	text-align:center; }
	
div.firstop {
	float:right;
	width:450px;
	margin:8px 0 0 38px;
	padding: 371px 20px 6px 20px;
	color: #858445;
	background:url(Bilder/ist2_8618610-carotid-endarterectomy-vascular-surgery.jpg) no-repeat 21px 10px; }
	
#ultralight ul#op li#pic1:hover span{background-image:url(Bilder/ist2_8618610-carotid-endarterectomy-vascular-surgery.jpg);}
#ultralight ul#op li#pic2:hover span{background-image:url(Bilder/ist2_8618610-carotid-endarterectomy-vascular-surgery_23.png);}
#ultralight ul#op li#pic3:hover span{background-image:url(Bilder/ist2_8618610-carotid-endarterectomy-vascular-surgery_25.png);}
#ultralight ul#op li#pic4:hover span{background-image:url(Bilder/ist2_8618610-carotid-endarterectomy-vascular-surgery_32.png);}

#ultralight div.pic-navi li:hover span {
	display: block;
	position: absolute;

	width: 450px;
	padding: 371px 20px 6px 20px;
	margin: -6px 0 0 163px;
	z-index: 100;

	/* aussehen der box */
	color: #858445;
	font: 0.92em verdana, sans-serif;
	text-align: left;
	float:left;

	/* position des hintergrund */
	background-position: 21px 10px;
	background-repeat: no-repeat; }
	
div.firstzahn {
	float:right;
	width:450px;
	margin:8px 0 0 38px;
	padding: 350px 20px 6px 20px;
	color: #858445;
	background:url(Bilder/ist2_9804252-dental-operation.jpg) no-repeat 21px 10px; }
	
#ultralight ul#zahn li#pic1:hover span{background-image:url(Bilder/ist2_9804252-dental-operation.jpg);}
#ultralight ul#zahn li#pic2:hover span{background-image:url(Bilder/ist2_9804252-dental-operation_23.png);}
#ultralight ul#zahn li#pic3:hover span{background-image:url(Bilder/ist2_9804252-dental-operation_25.png);}
#ultralight ul#zahn li#pic4:hover span{background-image:url(Bilder/ist2_9804252-dental-operation_32.png);}

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

							F O R M U L A R
		
================================================================ */
input.sicherheitscode{
	width:134px;
}
input.error{
	border:solid 1px red;
}		
span.error{
	color:#ff0000;
	font-weight:normal;
}			
span.ok{
	color:#008945;
	font-weight:normal;
}		
textarea {					width: 154px; }


label {						position: relative;
							cursor: pointer; }
							
label.davor {				float: left;
							clear: left;
							width: 150px;
							text-align: right;
							margin: 0 10px 10px 0; }
							
input {						margin: 0 0 10px 0; }
							
input#anrede_herr {			padding: 0 0 0 0;
							margin: 0 0 0 160px; }
							
#abschicken,
#abbrechen {				cursor: pointer;
							padding: 5px;
							margin: 20px 15px 0 0; }
					
#form p {					margin: 0 0 0 10px; }

fieldset {					float: left;
							padding: 20px; }

fieldset#angaben {			width: 55%;
							height: 270px; }

fieldset#info {				width: 30%;
							height: 270px;
							margin: 0 0 0 10px; }
							
legend {					padding: 0 5px 0 5px; }

fieldset strong {			border-bottom: 1px solid #008944;
							display:block;
							margin: 0 0 15px 0; 
							font-weight:normal;
							font-size: 14px;}
							
fieldset#info span {		margin: 0 0 0 10px;
							display: block; }
							
fieldset#sonstiges {		clear: both;
							margin: 10px 0 0 0;
							width: 93%; }

fieldset#sonstiges textarea {	width: 100%;
								height: 150px; }
								
								
								
.test {						margin: 0 0 40px 0; }




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

							U E B E R S I C H T S E I T E N
		
================================================================ */


	
.highlight {
	float: left;
	overflow: hidden; }
	

.highlight a {
	display:block;
	background-image:url(Bilder/highlights.png);
	width:330px;
	height:420px;
	float: left;
	margin: 0 0 0 10px; }
	

.power-spotlight {
	float: left;
	overflow: hidden; }
							
.power-spotlight a {
	display:block;
	background-image:url(Bilder/spotlight.png);
	width:330px;
	height:420px;
	float: left;
	margin: 0 0 0 10px;}
	
	
	
	
.delight {
	float: left;
	overflow: hidden; }
	
.delight a {
	display:block;
	background-image:url(Bilder/delight.png);
	width:330px;
	height:420px;
	float: left;
	margin: 0 0 0 10px; }

					
.ultralight {
	float: left;
	overflow: hidden; }
		
.ultralight a {
	display:block;
	background-image:url(Bilder/ultralight.png);
	width:330px;
	height:420px;
	float: left;
	margin: 0 0 0 10px;}
	
#workin {
	margin: 50px;
	font-weight: bold;
	font-size: 18px; }