@charset 'utf-8';
@import url(reset.css);
@import url(lightbox.css);

/* ----------------------------------------------------- All browsers */

html {
  overflow-y: scroll;
}


body {
	font-family:"Lucida Grande", /* Tahoma, */  Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-color:#e7f1fb;
	background-image:url(../images/bg/bg.png);
	background-repeat:repeat-x;
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    	padding: 0;
    	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
    	color: #003d7d;
   	}




#container { 
    	width: 920px;  /* Hierdurch wird ein Container mit einer Breite erstellt, die 80% der Browserbreite beträgt. */
    	background: none;
    	margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
    	border: 0;
    	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    } 
    
    
sup {
	vertical-align:super;
	font-size:60%;
	}   
    
    

/*    ----------- HEADER mit Logo und Navi rechts oben ------------ */

#header-logo {
    	float: left; 
    	width: 780px; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    	background: none; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    	padding: 0 0; /* Durch die Auffüllung oben und unten entsteht in diesem div ein visueller Leerraum.  */
	height:168px;
    }

#header-navi { 
    	margin: 0;
	font-size:15px;
	line-height:16px;
    	} 
    
#header-navi ul {
 	padding: 25px 0 0 0;
	}

#header-navi li {
	padding:6px 0 0 0;
	}	
 	   
    
#header-navi a { 
	color:#5f9bc9;
	text-decoration:none;
	}     

#header-navi a:hover, #header-navi a:focus  { 
	color:#003d7d;
	text-decoration:underline; 
	}  	
	
#header-navi a.active  { 
	color:#003d7d;
	text-decoration:none; 
	}		
 
 
 
 /* ------------- BLAUER BALKEN MITTE mit Navi links und Keyvisual rechts -----------  */
 
 	
 #balken {
    	height:198px;
    	background: none;
    	padding: 0 0; 
	margin:0 0;
	font-size:1px; /* Der IE 8 braucht diese Spezifikaton - andernfalls wird die Navi zu hoch!   */
	line-height:1px; /* Der IE 8 braucht diese Spezifikaton - andernfalls wird die Navi zu hoch!   */
  	}

#keyvisual {
	float:right;
	width: 700px;
	height: 198px;
	}	
    
    
#balken ul#navi-balken {
	height:198px;
	padding:0;
	margin:0;
	}   
	
#balken ul#navi-balken li a {
	background-image:url(../images/navi/navi.png);
	text-decoration:none;
	display:block;
	padding: 0;
	margin: 0;
	} 
	
/* englische Navigation */	
body.english #balken ul#navi-balken li a {
	background-image:url(../images/navi/navi-english.png);
	} 	
	
#balken ul#navi-balken li {
	padding:0 0;
	margin:0 0;
	}

li.products a { 		background-position:0 0; height:57px; width:220px;	}
li.services a { 			background-position: 0 -57px ; height:40px; width:220px;	}
li.tailoredsolutions a {	background-position: 0 -97px; height:40px; width:220px;	}
li.science a {			background-position: 0 -137px; height:61px; width:220px;	}	
	
li.products a:hover, li.products a.active { 			background-position: -250px 0; height:57px; width:220px;	}
li.services a:hover, li.services a.active { 			background-position: -250px -57px ; height:40px; width:220px;	}
li.tailoredsolutions a:hover, li.tailoredsolutions a.active {	background-position: -250px -97px; height:40px; width:220px;	}
li.science a:hover,  li.science a.active {			background-position: -250px -137px; height:61px; width:220px;	}		
			
	
#balken ul#navi-balken li a span {
	visibility:hidden;
	} 	




/* -------------- SUBNAVI links unter Balken --------------*/



#subnavi  {
	float:left;
	width:220px;
	margin:20px 0 0 0;
	padding-top:0;
	/* background-image:url(../images/subnavi-line.png);
	background-position:top ;
	background-repeat:no-repeat; */
	}
	
#subnavi span.line { /* Trennlinie mit Hintergrundbild (Verlauf) */
	height:35px;
	width:220px;
	display:block;
	background-image:url(../images/navi/subnavi-line.png);
	background-position:top ;
	background-repeat:no-repeat;
	padding:0;
	margin:0;
	}	
	
#subnavi span.line span { /* Zum Ausblenden des Textinhalts */
	visibility:hidden;
	}	

#subnavi p a {
	color:#003d7d;
	text-decoration:underline;
	}
#subnavi p a:hover, #subnavi p a:focus {
	color:#5f9bc9;
	}	
	
	
a.ebene1, a.ebene1-active {
	font-size:15px;
	line-height:17px;
	font-weight:lighter;
	padding-left:18px;
	margin: 0;
	color:#5f9bc9;
	text-decoration:none;
	display:block;
	}

a.ebene1:hover, a.ebene1:focus, a.ebene1-active {
	color:#003d7d;
	text-decoration:none;
	}	
	
	
		
ul.ebene2 {
	font-size:12px;
	line-height:15px;
	font-weight:lighter;
	padding:0;
	margin-left:40px;
	/* background-image:url(../images/subnavi-line.png);
	background-position:bottom;
	background-repeat:no-repeat; */
	}	
	
ul.ebene2 li { 
	list-style-image:url(../images/navi/dot.gif);
	background:none;
	padding: 0;
	margin:0 0 5px 0;
	}
	
ul.ebene2 li.active { 
	list-style-image:url(../images/navi/dot-active.gif);
	}
			
ul.ebene2 li a { 
	color:#5f9bc9;
	text-decoration:none;
	padding: 0px;
	margin:0;
	}
	
ul.ebene2 li a:hover 	{ 
	color:#003d7d;
	text-decoration:underline;
	}

ul.ebene2 li.active a 	{ 
	color:#003d7d;
	text-decoration:none;
	}			


/* -------------- CONTENTBEREICH Grundtext  mit Fotos--------------*/

#content {
	font-size:12px;
	line-height:18px;
	margin-left: 250px;
	}
	
h1	{
	font-family: "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, Helvetica, Arial, sans-serif;
	font-size:22px;
	line-height:23px;
	font-weight:lighter;
	padding:35px 50px 15px 0;
	line-height:28px;
	}
	
h2 	{
	color: #5f9bc9;
	font-size:15px;
	line-height:19px;
	font-weight:lighter;
	margin: 12px 5px 12px 0px;
	}	

#content p {
	padding-bottom:10px;
	}
	
#content a {
	color:#003d7d;
	text-decoration:underline;
	}
#content a:hover, #content a:focus {
	color:#5f9bc9;
	}
	
#content ul
	{
	padding:3px 100px 8px 0px;
	margin:0 0 0 20px;
	list-style-image:url(../images/navi/dot-list.gif);
	}	
		
#content ul li 
	{
	padding: 0 0 0 0px;
	margin: 0 0 0 10px;
	}

#content ul.biglist li 
	{
	background-image:url(../images/bg/bg-line-hr-content.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	padding: 0 0 19px 0;
	margin: 0 0 0 0;
	}
	
#content ul ul
	{
	padding:3px 40px 3px 0px;
	margin:0 0 0 20px;
	list-style-image:url(../images/navi/dot.gif);
	}

#content ul li ul li
	{
	padding: 0 0 0 0px;
	margin: 0 0 0 3px;
	}		
		
	
#content hr {
	background-image:url(../images/bg/bg-line-hr-content.png);
	background-position:left center;
	background-repeat:no-repeat;
	border:none;
	height:18px;
	margin-bottom:-5px;
	}	

#content p.hr {
	background-image:url(../images/bg/bg-line-hr-content.png);
	background-position:left center;
	background-repeat:no-repeat;
	border:none;
	height:25px;
	margin:0 0 -20px 0;
	padding:0;
	}

#content p.hr-12px {
	background-image:url(../images/bg/bg-line-hr-content.png);
	background-position:left center;
	background-repeat:no-repeat;
	border:none;
	height:12px;
	margin:0 0 0px 0;
	padding:0;
	}		
	
p.markenhinweis {
	font-size:10px;
	font-style:italic;
	color:#5f9bc9;
	margin-top:25px;
	margin-bottom:5px;
	}	
 
 
 /*  --------------------- INFOBOX rechts ---------------------- */

#infobox {
	float:right;
	width: 230px;
	margin:30px 0 15px 15px;
	padding:15px 0 0 0;
	font-size:11px;
	line-height:15px;
	background-image:url(../images/bg/infobox-bg.png);
	background-position:top;
	background-repeat:no-repeat;
	}
	
#infobox h3, #infobox p, #infobox a, #infobox ul, #infobox img 
	{
	margin-left:23px;
	margin-right:23px;
	} 	

#infobox img.fltrt
	{
	margin:0 0px 4px 10px;
	} 	
	
#infobox h3 {
	font-size:13px;
	line-height:18px;
	font-weight:bolder;
	margin-bottom:7px;
	padding-top:7px;
	}

#infobox p {
	margin-bottom:10px;
	}
	
#infobox a {
	margin:0;
	padding:0;
	color:#003d7d;
	text-decoration:underline;
	}
		
#infobox a:hover {
	color:#5f9bc9;
	text-decoration:underline;
	}
#infobox p.infobox-bottom {
	margin:18px 0 0 0;
	width:230px;
	height:7px;
	background-image:url(../images/bg/infobox-bg-bottom.png);
	background-repeat:no-repeat;
	background-position:0 0;
	}
#infobox p.infobox-bottom span {
	visibility:hidden;
	}	
	
#infobox ul {
	margin-left:35px;
	margin-bottom:2px;
	}
	
#infobox ul li { 
	list-style-image:url(../images/navi/dot.gif);
	margin:3px 0 0 0;
	}

#infobox ul.linklist li {
	margin:5px 0 0 0;
	}

#infobox ul.linklist a {
	color: #5f9bc9;
	text-decoration:none;
	border-bottom:1px solid #b6cfe4;
	}	
	
#infobox ul.linklist a:hover {
	color: #003d7d;
	}	
	
#infobox hr {
	background-image: url(../images/bg/infobox-bg-hr.png);
	background-position:center center;
	background-repeat:no-repeat;
	border:none;
	height:18px;
	margin: 10px 0 10px 0;
	}	

#infobox p.hr {
	background-image: url(../images/bg/infobox-bg-hr.png);
	background-position:center center;
	background-repeat:no-repeat;
	border:none;
	height:18px;
	margin: 10px 0 6px 0;
	padding:0;
	}		

/* ..........................  THUMBNAILS VIDEOS UND BILDER .................. */ 


#content .video-right {
	float:right;
	margin: 0 5px 5px 20px;
	padding:10px 0 0 0;
	font-size:11px;
	line-height:15px;
	}
	
#content .video-right img {
	margin-bottom:2px;
	}
	
#content .video-right a img {
	border: 1px solid transparent;
	}

#content .video-right a  {
	text-decoration:none;
	}	

#content .video-right a:hover  {
	text-decoration:none;
	}	
	
#content .video-right a img:hover {
	border: 1px solid #8cc8f3;
	}	
#content .photo-right {
    	margin: 10px 8px 8px 15px;
	border: solid 1px #5f9bc9;
	float:right;
    }
    
#content a .photo-right:hover,
#content p.photo-listing a img:hover {
	border: solid 1px #fff;
    }    

#content p.photo-listing a img {
	margin: 10px 20px 8px 1px;
	border: solid 1px #5f9bc9;
	}	



/* ..........................  STARTSEITE .................. */ 



#startseite .startbox {
	float:right;
	width: 700px;
	margin:30px 0 10px 0;
	padding:15px 8px 0 8px;
	font-size:12px;
	line-height:17px;
	}
	
#startseite .startbox td {
	width:345px;
	background-image:url(../images/bg/startbox-bg.png);
	background-position:top left;
	background-repeat:no-repeat;
	padding:10px 0 20px 5px;
	}	
	
#startseite .startbox tr {
	height:220px;
	}	

#startseite .startbox h1, #startseite .startbox h2, #startseite .startbox p, #startseite .startbox a, #startseite .startbox ul, #startseite .startbox img 
	{
	margin-left:15px;
	margin-right:15px;
	} 	
	
#startseite .startbox h1 {
	font-size:20px;
	line-height:23px;
	font-weight:lighter;
	margin-bottom:0px;
	padding-top:5px;
	} 
	
#startseite .startbox h1 a	{
	text-decoration:none;
	}
		
#startseite .startbox  h2 {
	font-size:12px;
	line-height:17px;
	font-weight:lighter;
	color:#003d7d;
	padding-right:20px;
	margin-top:0;
	}

#startseite .startbox  h2 strong {
	font-weight:bold;
	}		

	
#startseite .startbox a {
	margin:0;
	padding:0;
	color:#003d7d;
	text-decoration:underline;
	}
		
#startseite .startbox a:hover {
	color:#5f9bc9;
	text-decoration:underline;
	}
	
#startseite .startbox img.floatright {
	float:right;
	margin: 5px 25px 15px 10px;
	}	
	
/* #startseite #startbox p.startbox-bottom {
	margin:18px 0 0 0;
	width:330px;
	height:7px;
	background-image:url(../images/bg/startbox-bg-bottom.png);
	background-repeat:no-repeat;
	background-position:0 0;
	} 
	
#startseite .startbox p.startbox-bottom span {
	visibility:hidden;
	}  */	


	
#startseite #subnavi {
	font-size:12px;
	line-height:16px;
	}

#startseite #subnavi h1 {
	font-size:15px;
	line-height:19px;
	margin-top:15px;
	margin-bottom:0px;
	padding-top:0;
	font-weight:bold;
	}	
	
#startseite #subnavi h2 {
	font-size:12px;
	line-height:17px;
	margin-top:0px;
	padding-top:0;
	color:#003d7d;
	}

#startseite #subnavi p {
	font-size:12px;
	line-height:17px;
	margin-top:15px;
	padding-right:30px;
	color:#003d7d;
	}			
		


/* ..........................  GOOGLEMAPS-EINBINDUNG .................. */ 



iframe {
	border:1px solid #5f9bc9;
	clear:both;
	margin:15px 0 10px 0;
	}
	
	


 /*  --------------------- FOOTER ---------------------- */
 
 #footer {
	width: 100%; 
	background-image:url(../images/bg/bg-footer.png);
	background-repeat:repeat-x;
	color:#FFFFFF;
	font-size:12px;
	line-height:20px;
	margin: 30px 0 0 0;
	clear:both;
	/* position:absolute;
	bottom:0px; */
	}
#footer p {
	margin: 0 auto;
	min-height:90px;
	padding:20px 0 0 0;
	width:940px;	
	background-image:url(../images/bg/bg-footer-mittig.png);
	background-repeat:no-repeat;
	background-position:0 0;
 	}

#footer a {
	color:#FFFFFF;
	text-decoration:none;

	} 
 #footer a:hover, #footer a:focus {
 	color:#d7e5f3;
	text-decoration:underline;
	}
	
	


/*  --------------------- LANGUAGE SELECTOR ---------------------- */


ul#language {
	position:absolute;
	top: 10px;
	right: 10px;
	text-decoration:none;
	font-size:2px;
	width:25px;
	height:60px;
	/* visibility:hidden; */
	}

ul#language li {
	margin:0 0px 0 0;
	padding-bottom:5px;
	}

ul#language li a {
	text-decoration:none;
	background-image:url(../images/navi/language.png);
	display:block;
	/* font-size:1px;
	line-height:1px; */
	width:25px;
	height:25px;
	}

ul#language li a.language-german { 	background-position:0 0; 	}
ul#language li a.language-english { 	background-position:0 -25px; 	}

ul#language li a.language-german:hover, body.german ul#language li a.language-german { 	background-position:-25px 0; 	}
ul#language li a.language-english:hover, body.english ul#language li a.language-english { 	background-position:-25px -25px; 	}
	

ul#language li a span {
	visibility:hidden;
	}	/* Zum Ausblenden der Textinhalte der li */
	
		


 
/* ------------------- Verschiedene wieder verwertbare Klassen --------------- */



    .fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    	float: right;
    	margin-left: 8px;
	margin-bottom:30px;
    }
    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    
 strong {
	 font-weight:bolder;
	 }
	 
   a img {
   border:0px;
   }

/* ----------------------------------------------------- JS enabled browsers */

.js div { }

/* ----------------------------------------------------- IE7 and below */

.ie7 div { }

/* ----------------------------------------------------- IE6 and below */

.ie6 div { }