/*
		***************************************************************************************
		*                                                                                     *
		*   Kocks Oberflächentechnik CSS	                                                    *
		*                                                                                     *
		*   Copyright 2010 Kocks Oberflächentechnik							                          		*
		*   http://www.kocksoft.de 	   		                                                    *
		*                                                                                     *
		*   Design & Code by Dipl.-Kaufmann (FH), Dipl.-Informatiker Marco Herr               *
		*   http://www.i-novacon.de 	  	                                                    *
		*                                                                                     *
		***************************************************************************************
    
    Hintergrund: 	#e8e8e8

   	*/

		html, body {
			scrollbar-face-color:#fff5e9;
			scrollbar-base-color:#fff5e9;
			scrollbar-arrow-color:black;
			scrollbar-track-color:#fff5e9;
			scrollbar-shadow-color:#fff5e9;
			scrollbar-highlight-color:#fff5e9;
			scrollbar-3dlight-color:#fff5e9;
			scrollbar-darkshadow-Color:#fff5e9;
		}
		
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	font-size:13px;
    	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: #000;
			padding-top:0px;
			background: url(../images/bg_fading.gif) 50% 0 repeat-x #e7e8e8;
			line-height:1.3em;
    }
    
    h1 {
			clear:left;
			font-size:15px;
    	font-weight:normal;
			padding:12px 0 8px 0;
			margin:0;
			color:#006;
    }
    
    h2 {
    	font-size:14px;
    	font-weight:normal;
			padding:8px 0 8px 0;
			margin:0;
    }
    
		h3 {
    	font-size:13px;
    	font-weight:normal;
			padding:4x 0 4px 0;
			margin:0;
		}

		hr {
			margin:10px 0;
		}
		
		strong {
    	font-size:14px;
    	font-weight:bold;
			padding:0;
    }
		
		p {
			padding:0;
			margin:0 0 12px 0;
    }

		form {
			padding:0;
			margin:0;
    }

		table {
    	border-collapse:collapse;
    }
    
    input, select, textarea {
    	background: #ffffff repeat-x 0 0; 
    	border: 2px solid #ffcc00; 
			width:420px;
    }
		
		ul li {
			list-style:square;
		}
		
		#content a:link      {font-size:12px;font-style:normal;font-weight:normal;text-transform:none;color:#000000;text-decoration:underline}
		#content a:visited   {font-size:12px;font-style:normal;font-weight:normal;text-transform:none;color:#000000;text-decoration:underline}
		#content a:active    {font-size:12px;font-style:normal;font-weight:bold;text-transform:none;color:#cccccc;text-decoration:underline}
		#content a:hover     {font-size:12px;font-style:normal;font-weight:normal;text-transform:none;color:#cccccc;text-decoration:underline}

    /*
		***************************************************************************************
		NAVIGATION 
		***************************************************************************************
   	*/
		ol {float:left; clear:both; margin:0; padding:0; display:block;}
		ol li {float:left; padding:0; margin:0 0 0 10px; list-style:none}
		ol a  {display:block; background-repeat:no-repeat; text-indent:-3000px; overflow:hidden; background-position:0 0; float:left}

		#navigation ol li#UeberUns a { width:69px; height:14px; margin:0 10px}
		#navigation ol li#Leistungen a { width:78px; height:14px; margin:0 10px}
		#navigation ol li#Referenzen a { width:81px; height:14px; margin:0 10px}
		#navigation ol li#Ansprechpartner a { width:120px; height:14px; margin:0 10px}
		#navigation ol li#Kontakt a { width:61px; height:14px; margin:0 10px}
		
		#navigation #UeberUns a { background-image: url(../images/navigation_top.gif); background-position: 0 0}
		#navigation #Leistungen a { background-image: url(../images/navigation_top.gif); background-position: -108px 0}
		#navigation #Referenzen a { background-image: url(../images/navigation_top.gif); background-position: -216px 0}
		#navigation #Ansprechpartner a { background-image: url(../images/navigation_top.gif); background-position: -324px 0}
		#navigation #Kontakt a { background-image: url(../images/navigation_top.gif); background-position: -468px 0}
		
		#navigation #UeberUns a:hover {background-position: 0 -14px}
		#navigation #Leistungen a:hover { background-position: -108px -14px}
		#navigation #Referenzen a:hover { background-position: -216px -14px}
		#navigation #Ansprechpartner a:hover { background-position: -324px -14px}
		#navigation #Kontakt a:hover { background-position: -468px -14px}

		#navigation #UeberUns .aktiv {background-position: 0 -28px}
		#navigation #Leistungen .aktiv { background-position: -108px -28px}
		#navigation #Referenzen .aktiv { background-position: -216px -28px}
		#navigation #Ansprechpartner .aktiv { background-position: -324px -28px}
		#navigation #Kontakt .aktiv { background-position: -468px -28px}


		#subnavigation ol li { white-space: nowrap; margin:0}
		
		#subnavigation ol li#Startseite_footer a { width:52px; height:11px; margin:0 20px}
		#subnavigation ol li#UeberUns_footer a { width:48px; height:11px; margin:0 20px}
		#subnavigation ol li#Leistungen_footer a { width:56px; height:11px; margin:0 20px}
		#subnavigation ol li#Referenzen_footer a { width:58px; height:11px; margin:0 20px}
		#subnavigation ol li#Ansprechpartner_footer a { width:92px; height:11px; margin:0 20px}
		#subnavigation ol li#Impressum_footer a { width:60px; height:11px; margin:0 20px}
		#subnavigation ol li#Kontakt_footer a { width:44px; height:11px; margin:0 20px}
		
		#subnavigation #Startseite_footer a { background-image: url(../images/navigation_bottom.gif); background-position: 0 0}
		#subnavigation #UeberUns_footer a { background-image: url(../images/navigation_bottom.gif); background-position: -91px 0}
		#subnavigation #Leistungen_footer a { background-image: url(../images/navigation_bottom.gif); background-position: -178px 0}
		#subnavigation #Referenzen_footer a { background-image: url(../images/navigation_bottom.gif); background-position: -278px 0}
		#subnavigation #Ansprechpartner_footer a { background-image: url(../images/navigation_bottom.gif); background-position: -375px 0}
		#subnavigation #Impressum_footer a { background-image: url(../images/navigation_bottom.gif); background-position: -505px 0}
		#subnavigation #Kontakt_footer a { background-image: url(../images/navigation_bottom.gif); background-position: -605px 0}
		
		#subnavigation #Startseite_footer a:hover {background-position: 0 -22px}
		#subnavigation #UeberUns_footer a:hover {background-position: -91px -22px}
		#subnavigation #Leistungen_footer a:hover { background-position: -178px -22px}
		#subnavigation #Referenzen_footer a:hover { background-position: -278px -22px}
		#subnavigation #Ansprechpartner_footer a:hover { background-position: -375px -22px}
		#subnavigation #Impressum_footer a:hover { background-position: -505px -22px}
		#subnavigation #Kontakt_footer a:hover { background-position: -605px -22px}

		#subnavigation #Startseite_footer .aktiv {background-position: 0 -11px}
		#subnavigation #UeberUns_footer .aktiv {background-position: -91px -11px}
		#subnavigation #Leistungen_footer .aktiv { background-position: -178px -11px}
		#subnavigation #Referenzen_footer .aktiv { background-position: -278px -11px}
		#subnavigation #Ansprechpartner_footer .aktiv { background-position: -375px -11px}
		#subnavigation #Impressum_footer .aktiv { background-position: -505px -11px}
		#subnavigation #Kontakt_footer .aktiv { background-position: -605px -11px}


		#sprachauswahl ol li {margin:0 0 0 10px;}
		#sprachauswahl ol a  {height:16px; width:32px}
		
		#sprachauswahl ol li #GermanS { width:32px; margin:0; padding:0}
		#sprachauswahl ol li #EnglishS { width:32px; margin:0; padding:0}
		
		#GermanS a { background-image: url(../images/flaggen.gif); background-position: 0 0}
		#EnglishS a { background-image: url(../images/flaggen.gif); background-position: -32px 0}
		
		#GermanS a:hover { background-position: 0 -16px}
		#EnglishS a:hover { background-position: -32px -16px}
		/*
		***************************************************************************************
		DIVERSE
		***************************************************************************************
   	*/
    #container { 
    	position: relative;
    	width: 100%;
    	margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
			background: url(../images/content_top.jpg) no-repeat;
    } 

    #header { 
    	position: relative;
			width:1004px;
			height:247px;
    	margin: 0 auto;
    	padding: 0;
    	text-align:left;
    }

		#navigation { 
    	position: absolute;
			top:125px;
			left:444px;
			float:left;
		}
		
    #logo { 
    	position: absolute;
			top:42px;
			left:3px;
    }

    #bild { 
    	position: absolute;
			top:100px;
			left:3px;
    }

    #slogan { 
    	position: absolute;
			top:205px;
			left:225px;
    }

		#sprachauswahl { 
    	position: relative;
			top:225px;
			left:910px;
			width:84px;
    }
		
    #main { 
    	position: relative;
    	width: 998px;
    	margin: 0 auto;
    	text-align: left; 
			background: url(../images/content_top.jpg) no-repeat;
    } 

		#content { 
			float:left;
    	width:100%;
			min-height:400px;
    	margin: 0 auto;
    	padding: 0;
    	text-align: left;
    }
		
		#footer {
			clear:both;
			width:100%;
			height:86px;
			background: url(../images/bg_footerfading.gif) repeat-x;
			padding-top:35px;
		}

		#subnavigation { 
    	position: relative;
			top:1px;
			left:145px;
    	width: 998px;
    	margin: 0 auto;
    	text-align: left; 
		}
		
		#headline {
			display: block;
			padding-bottom:12px;
		}

		.bildunterschrift {
			padding: 0 0 0 15px;
			font-style:italic;
		}
		
		.pdf {
			padding: 0 18px ;
		}

		.imgrahmen {
			border-style:solid;
			border-color:#000;
			border-width:1px;
		}
		
		.fotorechts {
			float:right;
			padding:0 0 0 20px;
		}

		.fotorechts2 {
			float:right;
			padding:40px 0 0 20px;
		}

		#fotorechts3 {
			float:right;
			padding:80px 0 0 20px;
		}

		.fotolinks {
			float:left;
			padding:0 20px 0 0;
		}

		.fotomitte {
			float:left;
			padding:50px 220px 90px 220px;
		}

		.leftfloat {
			float:left;
		}
		
		#kontaktimpressumblock span {
			display: inline-block;
			width:190px;
			float:left;
		}
		
		#ueberunsblock span, .tabulatorspan {
			display: inline-block;
			width:240px;
			float:left;
		}
		
		#ueberunsblock ul {
			padding:0 0 8px 16px;
			margin:0 16px 0 0;
		}

		#ansprechpartner_Hamburg {
			padding-bottom:10px;
		}

		#ansprechpartner_Bremerhaven {
		}

		#Formular {
			display:block;
			width:100%;
			height:100%;
			padding:10px 0;
		}
		
		#login {
			width:400px;
			background: url(../images/fading.jpg) 50% 0 repeat-x #888888;
			border:1px solid #000;
			padding:15px;
		}
		
		#login input, #login textarea, #login select {
			padding:2px;
			border:1px dotted #000;
			width:210px;
			outline:0;
		}

		#login .inputkurz {
			width:50px;
		}

		#login input:focus, #login submit:focus, #login textarea:focus{
			border:1px solid #000;
			background:url(../images/h300.png) repeat-x;
		}

		#login input:hover, #login submit:hover, #login textarea:hover {
			border:1px solid #000;
		}
		
		#login label {
			line-height:30px;
			vertical-align:top;
		}

		#login textarea {
			width:210px;
		}
		
		.warning {font-size:11;color:#aa0000;font-weight:normal}
		.warningok {font-size:11;color:#080087;font-weight:normal}
		
		.referenz {
			clear:left;
			width:100%;
			min-height:100px;
			margin: 0 auto;
			padding: 20px;
			border-top: 1px solid #000000;
		}
		
		.referenz ul li {
			list-style-position:inside;
		}

		.referenzbild {
			float:left;
			min-width:250px;
			max-width:250px;
			background:url(../images/h300.png) repeat-x;
			border: 1px solid #000000;
			margin-right:30px;
			padding:90px 0 90px 0;
			text-align:center;
			vertical-align:middle;
		}
		
		.referenzbildda {
			float:left;
			margin-right:30px;
		}

		#login .button {
			background:url(../images/buttons.gif);
			width:110px;
			height:22px;
			border:0 none;
			padding:0;
			margin:5px;
		}
		#login .button:hover {
			background-position: -110px 0;
			border:0 none;
		}
		#nachoben {
			text-align:right;
			width:100%;
			padding:0 20px 10px 0;
		}

		#nachoben img {
			margin:0 3px -2px 0;
		}
		
		.profil {
			width:440px;
			float:left;
			padding-right:20px;
		}