@charset "UTF-8";

/*********** Overpass ***********/ 

/* overpass-300 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/overpass/overpass-v5-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/overpass/overpass-v5-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/overpass/overpass-v5-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/overpass/overpass-v5-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/overpass/overpass-v5-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/overpass/overpass-v5-latin-300.svg#Overpass') format('svg'); /* Legacy iOS */
}

/* overpass-regular - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/overpass/overpass-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/overpass/overpass-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/overpass/overpass-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/overpass/overpass-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/overpass/overpass-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/overpass/overpass-v5-latin-regular.svg#Overpass') format('svg'); /* Legacy iOS */
}

/* overpass-700 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/overpass/overpass-v5-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/overpass/overpass-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/overpass/overpass-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/overpass/overpass-v5-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/overpass/overpass-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/overpass/overpass-v5-latin-700.svg#Overpass') format('svg'); /* Legacy iOS */
}



/* =====================================
   Farben
   =====================================

Ecolab blau: 		       #0078c9
Hände & Haut: 		    #EEAF00
Flächendesinfektion:	   #71af28	
Instrumentenaufbereitung:    #005172
Dosiergeräte & Spender:	#999
Waschmittel:		      #5cb4e5
Surgical:			         #ef7900
Solidsafe:		        #005172

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



* {
	padding: 0;
	margin: 0;
}

html {
	height: 101%
	}
	
img {
	border: none;
	}

body {
	font-family: 'Overpass';
  	font-style: normal;
  	font-weight: 300;
	/*font-size: 13px;
	line-height: 20px;*/
	color: #666;
	background: #FFF;
	font-size: 15px;
	line-height: 24px;
}

h1 {
	font-size: 30px;
	line-height: 30px;
	font-weight: normal;
	margin-bottom: 30px;
}

h2 {
	font-size: 20px;
	font-weight: normal;
}

h3 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

h4 {
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
}

p {
	margin-bottom: 10px;
	}
	
a:link, 
a:visited {
	text-decoration: none;
	color: #0078c9;
	}
	
a:hover,
a:active {
	text-decoration: none;
	color: #666;
	}

a:focus {
	outline:none;
}

li {
	list-style-type: none;
}

hr {
	border: 0;
	border-top: 1px dotted #afafaf;
	height: 1px;
	clear: both;
	margin: 0 0 10px 0;
}

button {
	cursor: pointer;
	}

ol {
	padding-left: 20px;
	}

ol li {
	list-style-type: decimal;
		}

ol li ul li {
	list-style-type: none;
	}
/* =====================================
   Formatierung Container
   ===================================== */

#wrapper_over_all {
	width: 100%;
	background: #FFF;
	border-top: 4px solid #0078c9;
}

#wrapper {
	display: block;
	width: 960px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 0 60px 0;
	position: relative;
}

#header {
	position: relative;
	display: block;
	width: 960px;
	height: 95px;
	border-bottom: 1px dotted #afafaf;
	margin-bottom: 10px;
}

#topnavi {
	position: absolute;
	top: 10px;
	right: 0px;
}

#logo {
	position: absolute;
	top: 40px;
	left: 0;
}

#logo img {
	width: 295px;
	height: auto;
}

#navi {
	position: relative;
	height: 80px;
}

#sdb_suche {
	position: absolute;
	top: 59px;
	right: 0px;
}

#subnavi {
	float: left;
	width: 195px;
	margin-right: 30px;
	min-height: 100px;
}

#wrapper_content {  /* umschließt subnavi und content */
	border: 0px solid red;
	position: relative;
	overflow: hidden;
}

#content {		/*  content mit leerraum für subnavi */ 
	margin-left: 225px;
	position: relative;
	overflow: hidden;
}


#content_extrabreit {    /* 30px breiter als sichtbereich */ 
	width: 765px;
	min-height: 400px;
	margin-left: 225px;
	border:1px solid #FFF;
}

/*#content_extrabreit_ohne_subnavi {    65px breiter als sichtbereich, aber ohne margin für Subnavi 
	width: 800px;
	min-height: 400px;
}*/

#content_extrabreit_komplett {
	width: 990px;
	min-height: 400px;
}

#wrapper_footer_over_all {
	width: 100%;
	background: #f5f5f5;
}
#footer {
	display: block;
	overflow: hidden;
	/*width: 960px;*/
	width: 995px;
	margin: 0 auto 10px auto;
	margin-top: 10px;
	font-size: 13px;
	color: #999;
	position: relative;
	padding-left: 35px;
}



/* =====================================
   Formatierung Footer
   ===================================== */
.footer_menu{
	float: left;
	margin: 0 35px 20px 0;
	}
.footer_menu a {
	display : block;
	padding-right : 20px;
	color: #999;
}
.footer_menu h2{
 	font-size: 14px !important;
	color: #0078c9;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	margin:10px 0;
}
#footer  p{
	clear: both;
}


.footer_menu_neu {
	display: block;
	float: left;
	margin: 0 35px 20px 0;
	width: 213px;
	}


.footer_menu_neu a {
	display : block;
	padding-right : 20px;
	color: #999;
}

.footer_menu_neu a:hover {
	color: #666;
	}

.footer_menu_neu h2{
 	font-size: 14px !important;
	color: #0078c9;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	margin:10px 0;
}


/* =====================================
   Formatierung Navigation
   ===================================== */

#topnavi a {
	color: #666;
}

#topnavi a:hover {
	color: #0078c9;
}

/* ========  Hinweis Cookies  ========*/

#topnavi a.hinweis_cookies {
	color: #0078c9;
	position: relative;
	top: 0px;
	padding: 3px 5px;
	background: #edf5fb;
	margin-left: 5px;
	}


/* ========  Sprachauswahl  ========*/

#sprachauswahl {
	position: absolute;
	right: 250px;
	top: 59px;
	width: 36px;
	height: auto;
	}
	
#sprachauswahl.franz {
	right: 300px;
}


/* ========  SDB Suche   ========*/

#sdb_suche a,
#sdb_suche a:visited {
	color: #FFF;
	padding: 10px 16px 8px 16px;
	background: #0078c9; 
}

#sdb_suche a:hover,
#sdb_suche a:active,
#sdb_suche a:focus {
	background: #1c4875;
	transition: all 0.3s ease;
}


/* ========  Hauptnavi   ========*/

#navi .hide_menue a {
	*color: #FFF;          /* IE7 und darunter */
	color/***/: #FFF;   /* nur IE8 */
}

@-moz-document url-prefix() {
    #navi .hide_menue a {
        color: #0078c9;
    }
}

#navi ul li {
	float: left;
}

#navi ul li a {
	display: block;
	margin-right: 30px;
	padding: 10px 10px 10px 0;
	font-weight: bold;
	font-size: 16px;
	color: #0078c9;
}

#navi ul li ul {
	display: none;
}


/* ========  Subnavi   ========*/

#subnavi ul {                  /* 1. Ebene */
	z-index: 1000;
}

#subnavi ul li {
	float: none;
}	

#subnavi ul li a {
	color: #666;
	display: block;
	padding: 10px 10px 10px 0;
	font-weight: normal !important;
	font-size: 15px;
}

#subnavi ul li a.current {
	font-weight: bold !important;
}

#subnavi ul li ul {          /* 2. Ebene */
	position: static;
}

#subnavi ul li ul li a {
	display: block;
	font-size: 15px;
	font-weight: normal;
	color: #666;
	margin-bottom: 3px;
	padding: 3px 10px;
	margin-right: 0;
}

#subnavi ul li ul li a:hover,
#subnavi ul li ul li a:active,
#subnavi ul li ul li a:focus {
	background: #f5f5f5;
}

#subnavi ul li ul li ul li a {	/* 3. Ebene */
	font-size: 13px;
	color: #666 !important;
	padding: 3px 10px 3px 20px;
}

#subnavi ul li ul li ul li a.current {
	font-weight: bold !important;
	color: #666 !important;
}

#subnavi a.navi_highlight {
	border-top: 1px dotted #afafaf;
	border-bottom: 1px dotted #afafaf;
	background: #fff;
	font-weight: bold !important;

	}
	
#subnavi a.navi_highlight:hover {
	color: #0078c9 !important;
}

/* ========  Extra Unterteilung Intrumentenaufbereitung   ========*/


#subnavi ul li ul li a#trenner_betten , #subnavi ul li ul li a#trenner_klarspueler , #subnavi ul li ul li a#trenner_steckbecken
, #subnavi ul li ul li a#trenner_instrumentendesinfektion , #subnavi ul li ul li a#trenner_neutralisationsmittel 
, #subnavi ul li ul li a#trenner_instrumente , #subnavi ul li ul li a#trenner_oxivario , #subnavi ul li ul li a#trenner_aldehydfrei
, #subnavi ul li ul li a#trenner_aldehydhaltig , #subnavi ul li ul li a#trenner_instrumentenreiniger , #subnavi ul li ul li a#trenner_solidsafe , #subnavi ul li ul li a#trenner_haemodialyse   {
       display: block;
    font-size: 13px;
    margin-bottom: 3px;
    padding: 3px 10px 3px 10px;
    margin-right: 0;
    color: #005172 !important;
    font-weight: bold !important;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    margin-left: 10px;

}


/* ========  Colorcode Subnavi   ========*/

/* body.hc_allgemein #subnavi ul li ul li a.current,        		     Aktueller Punkt bei "normaler" Navi, wird in Kategoriefarbe eingefärbt */
body.hc_allgemein #subnavi.navi_produkte ul li ul li a {  		/* Einträge bei Produktbereich-Navi wird in Kategoriefarbe eingefärbt */   
	color: #0078c9;
}

/* body.haut_haende #subnavi ul li ul li a.current, */
body.haut_haende #subnavi.navi_produkte ul li ul li a {
	color: #EEAF00;
}

/* body.flaeche #subnavi ul li ul li a.current, */
body.flaeche #subnavi.navi_produkte ul li ul li a {
	color: #71af28;
}

/* body.instrumente #subnavi ul li ul li a.current, */
body.instrumente #subnavi.navi_produkte ul li ul li a {
	color: #005172;
}

/* body.solidsafe #subnavi ul li ul li a.current, */
body.solidsafe #subnavi.navi_produkte ul li ul li a {
	color: #005172;
}

/* body.dosiergeraete #subnavi ul li ul li a.current, */
body.dosiergeraete #subnavi.navi_produkte ul li ul li a {
	color: #999;
}

/* body.surgical #subnavi ul li ul li a.current, */
body.surgical #subnavi.navi_produkte ul li ul li a {
	color: #ef7900;
}

/* body.waschmittel #subnavi ul li ul li a.current, */
body.waschmittel #subnavi.navi_produkte ul li ul li a {
	color: #5cb4e5;
}


/* =====================================
   Formatierung Bereichsbalken
   ===================================== */

.bereichsbalken {
	position: relative;
	display: block;
	width: 960px;
	height: 50px;
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 25px;
}

h2.head_balken {
	color: #FFF;
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 20px;
}

h2.head_balken img {
	position: relative;
	top: -3px;
}

body.hc_allgemein .bereichsbalken {
	background-color: #0078c9;
}

body.haut_haende .bereichsbalken {
	background-color: #EEAF00;
}

body.flaeche .bereichsbalken {
	background-color: #71af28;
}

body.instrumente .bereichsbalken {
	background-color: #005172;
}

body.solidsafe .bereichsbalken {
	background-color: #005172;
}

body.dosiergeraete .bereichsbalken {
	background-color: #999;
}

body.surgical .bereichsbalken {
	background-color: #ef7900;
}

body.waschmittel .bereichsbalken {
	background-color: #5cb4e5;
}

/* ----------  Formatierung Bereichsbalken Fachgebiete ------------*/

body.alten_pflegeheime .bereichsbalken {
	background: url(../bilder/fachgebiete/balken_bereiche/balken_alten_pflegeheime.png) top left no-repeat;
}

body.dialyse .bereichsbalken {
	background: url(../bilder/fachgebiete/balken_bereiche/balken_dialyse.png) top left no-repeat;
}

body.feuerwehr .bereichsbalken {
	background: url(../bilder/fachgebiete/balken_bereiche/balken_feuerwehr.png) top left no-repeat;
}

body.niedergelassene_aerzte .bereichsbalken {
	background: url(../bilder/fachgebiete/balken_bereiche/balken_aerzte.png) top left no-repeat;
}

body.waescherei .bereichsbalken {
	background: url(../bilder/fachgebiete/balken_bereiche/balken_waescherei.png) top left no-repeat;
}

body.krankenhaeuser .bereichsbalken {
	background: url(../bilder/fachgebiete/balken_bereiche/balken_krankenhaeuser.png) top left no-repeat;
}



/* =====================================
   Formatierung Headlines, usw.
   ===================================== */

body.hc_allgemein h1,
body.hc_allgemein h4,
body.hc_allgemein .unterkategorie h3,
.textfarbe_hc_allgemein,
body.hc_allgemein a.produktname_empfehlung h3 {
	color: #0078c9 !important;
}

body.haut_haende h1,
body.haut_haende h4,
body.haut_haende .unterkategorie h3,
.textfarbe_haut_haende,
body.haut_haende a.produktname_empfehlung h3  {
	color: #EEAF00 !important;
}

body.flaeche h1,
body.flaeche h4,
body.flaeche .unterkategorie h3,
.textfarbe_flaeche,
body.flaeche a.produktname_empfehlung h3 {
	color: #71af28 !important;
}

body.instrumente h1,
body.instrumente h4,
body.instrumente .unterkategorie h3,
.textfarbe_instrumente,
body.instrumente a.produktname_empfehlung h3 {
	color: #005172 !important;
}

body.solidsafe h1,
body.solidsafe h4,
body.solidsafe .unterkategorie h3,
.textfarbe_solidsafe,
body.solidsafe a.produktname_empfehlung h3 {
	color: #005172 !important;
}

body.dosiergeraete h1,
body.dosiergeraete h4,
body.dosiergeraete .unterkategorie h3,
.textfarbe_dosiergeraete,
body.dosiergeraete a.produktname_empfehlung h3 {
	color: #999 !important;
}

body.waschmittel h1,
body.waschmittel h4,
body.waschmittel .unterkategorie h3,
.textfarbe_waschmittel,
body.waschmittel a.produktname_empfehlung h3 {
	color: #5cb4e5 !important;
}

body.surgical h1,
body.surgical h4,
body.surgical .unterkategorie h3,
.textfarbe_surgical,
body.surgical a.produktname_empfehlung h3 {
	color: #ef7900 !important;
}

.bullets_dreieck {   /* nicht löschen, sonst kann man die Klasse nicht mehr auswählen */
}

body.hc_allgemein .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_allgemein.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.haut_haende .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_haut_haende.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.flaeche .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_flaeche.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.instrumente .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_instrumente.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.solidsafe .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_allgemein.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.dosiergeraete .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_dosiergeraete.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.waschmittel .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_waschmittel.png) left 7px no-repeat;
	background-size: 7px 7px;
}

body.surgical .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_surgical.png) left 7px no-repeat;
	background-size: 7px 7px;
}


/* =====================================
   Formatierung Startseite Produkte
   ===================================== */

#topprodukte {
	width: 960px;
	height: 320px;
	border-top: 1px dotted #afafaf;
	border-bottom: 1px dotted #afafaf;
	padding: 20px 0;
	margin-bottom: 30px;
	position: relative;
}

#topprodukte #headline {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 1000;
}

.teaserreihe {
	position: relative;
	overflow: hidden;
	float: left;
}

.teaser_produktbereich {
	position: relative;
	display: block;
	float: left;
	width: 300px;
	margin-right: 30px;
	margin-bottom: 40px;
	border-bottom: 1px dotted #afafaf;
	padding-bottom: 15px;
}

.teaserbild {
}

.teaser_produktbereich h3,
.teaser_produktbereich h2 {
	border-top: 1px dotted #afafaf;
	border-bottom: 1px dotted #afafaf;
	padding: 20px 0 0 63px;
	margin: 20px 0;
	position: relative;
	height: 40px;
}

.teaser_produktbereich h3 .zweizeilig,
.teaser_produktbereich h2 .zweizeilig {
	position: relative;
	top: -10px;
	left: 0;
	}

.teaser_produktbereich h3 a:link {
	padding: 20px 0;
	}

.teaser_produktbereich h2 {
	padding-left: 0px;
	font-weight: bold;
	color: #0078c9;
	font-size: 16px;
	}

.pikto_produktbereich {
	position: absolute;
	top: 5px;
	left: 0;
	width: 50px;
	height: 50px;
	z-index: 100;
}

a.link_zum_produktbereich {
	display: block;
	text-transform: uppercase;
	background: url(../bilder/grafikelemente/pfeil_blau_sprite.png) 0px 2px no-repeat;
	background-size: 17px 100px;
	padding-left: 30px;
}

a.link_zum_produktbereich_prp {
	display: inline;
	background: url(../bilder/grafikelemente/pfeil_blau_sprite.png) 0px 0px no-repeat;
	background-size: 17px 100px;
	}

/*a:hover.link_zum_produktbereich {
	color: #0078c9;
	}*/

a.link_zum_produktbereich.textfarbe_surgical {
	background: url(../bilder/grafikelemente/pfeil_surgical_sprite.png) 0px 2px no-repeat;
	background-size: 17px 100px;
}

.teaser_surgical {
	border: 1px solid #ef7900;
	padding: 15px 15px 15px 15px;
	width: 266px;
	overflow: hidden;
	background: #FFF url(../bilder/produktbereich/startseite/bg_verlauf_surgical.png) bottom left repeat-x;
}

.teaser_surgical .teaserbild {
	position: relative;
	top: -15px;
	left: -15px;
}

.teaser_surgical .pikto_produktbereich {
	left: 15px;
	top: 155px;
}

.teaser_surgical h3 {
	margin-top: 4px;
}


/* =====================================
   Formatierung Produktkategorie Übersichtsseiten
   ===================================== */

.uebersicht_kategorie_spalte {
	display: block;
	float: left;
	width: 300px;
	position: relative;
	overflow: hidden;
	margin-left: 65px;
}

div.unterkategorie {
	display: block;
	border: 0px solid red;
	margin: 0 0 25px 0;
	position: relative;
	overflow: hidden;
}

.unterkategorie img {
	position: absolute;
	top: 0;
	left: 0;
}

.unterkategorie h3 {
	margin: 15px 0 20px 65px;
}

nav.navi_unterkategorie ul {
	clear: both;
	border-top: 1px dotted #afafaf;
}

nav.navi_unterkategorie ul li a {
	color: #666;
	display: block;
	padding: 10px 0 10px 65px;
	border-bottom: 1px dotted #afafaf;
	font-size: 14px;
}

/*
nav.navi_unterkategorie ul li a.pureline_navi {
	background: #FFF url(../bilder/produktbereich/produktseite_pure_line/logo_pure_line_70x70.png) bottom right no-repeat;
	background-size: 40px;
	background-position-y: 2px;
	}
nav.navi_unterkategorie ul li a.pureline_navi_neu {
	background: #FFF url(../bilder/produktbereich/produktseite_pure_line/neu_pure_line_navi.png) bottom right no-repeat;
	}
*/
nav.navi_unterkategorie ul li a.oxy_navi_neu {
	background: #FFF url(../bilder/produktbereich/produktseite_incidin_oxy/neu_oxy_navi.png) bottom right no-repeat;
	}

nav.navi_unterkategorie ul li a.oxy_navi {
	background: #FFF url(../bilder/produktbereich/produktseite_incidin_oxy/oxy_navi.png) bottom right no-repeat;
	}

nav.navi_unterkategorie ul li a.haut_haende_neu {
	background: #FFF url(../bilder/grafikelemente/haut_haende_neu.png) bottom right no-repeat;
	}

nav.navi_unterkategorie ul li a.instrumente_neu {
	background: #FFF url(../bilder/grafikelemente/instrumente_neu.png) bottom right no-repeat;
	}

/* ========  Extra Unterteilung Intrumentenaufbereitung   ========*/

nav.navi_unterkategorie ul li a#trenner_betten , nav.navi_unterkategorie ul li a#trenner_klarspueler , nav.navi_unterkategorie ul li a#trenner_steckbecken
, nav.navi_unterkategorie ul li a#trenner_instrumentendesinfektion , nav.navi_unterkategorie ul li a#trenner_neutralisationsmittel 
, nav.navi_unterkategorie ul li a#trenner_instrumente , nav.navi_unterkategorie ul li a#trenner_oxivario , nav.navi_unterkategorie ul li a#trenner_aldehydfrei
, nav.navi_unterkategorie ul li a#trenner_aldehydhaltig , nav.navi_unterkategorie ul li a#trenner_instrumentenreiniger , nav.navi_unterkategorie ul li a#trenner_solidsafe 
, nav.navi_unterkategorie ul li a#trenner_haemodialyse  {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
    padding: 10px 0px 10px 0px;
    margin-right: 0;
    color: #005172 !important;
    font-weight: bold !important;

}


/* =====================================
   Formatierung Produktseiten
   ===================================== */

/* ========  Hauptteil  ========*/
#content_480px {
	width: 480px;
	min-height: 400px;
	overflow: hidden;
	margin: 0 0 10px 0;
	padding-bottom: 10px;
	float: left;
}

#content_735px /* für PRP-Seite */ {
	width:735px;
	}

#headline {
	width: 480px;
	float: left;
}

.introtext {
	font-weight: bold;
	margin: -25px 0 30px 0;
}

dl {
	margin-top: 20px;
	clear: both;
}

dt {
	text-transform: uppercase;
	display: block;
	position: relative;
	padding: 9px 7px 7px 7px;
	margin-bottom: 2px;
	cursor: pointer;
	border: 1px solid #f5f5f5 !important;
	background: #0078c9; 
	color: #FFF;
	letter-spacing: 0.5px;
}

dd { 
	display:none; 
	padding: 8px 0 10px 0;
}

dd img {
	height: auto !important;
	}

.closed,
.open { 
	background: url(../bilder/grafikelemente/buttons_bereiche/pfeil_buttons_rechts_weiss.png) 0px 1px no-repeat;
	background-size: 17px;
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	right: 7px;
	bottom: 7px;
	transition: transform 0.3s ease;
}

.open { 
	transform: rotate(90deg);
	transition: transform 0.3s ease;
}

.table_vorteile,
.table_bestellinfo,
.table_standzeit {
	width: 100% !important;
	table-layout: fixed; /* Spalten verteilen sich gleichmäßig auf die Breite */
	color: #FFF;
	border-collapse: collapse;
}

.table_vorteile td,
.table_bestellinfo td,
.table_standzeit td {
	padding: 7px;
	border-bottom: 1px dotted #FFF;
}

table.table_vorteile tr:last-child td,
table.table_bestellinfo tr:last-child td,
.table_standzeit tr:last-child td {
	border-bottom: none;
}

.spalte_dunkel {
	background: #268cd1;
}

.spalte_mittel {
	background: #4ca0d9;
}

.spalte_hell {
	background: #7fbbe4;
}

.table_standzeit {
	table-layout: auto;
	}

.table_standzeit td.spalte_dunkel.spalte_info_icon {
	width: 10% !important;
	}

.table_standzeit td.spalte_hell {
	width: 40%;
	}

/* ========  gelbe Nummerierung  ========*/

p .nummerierung_gelb {
	color: #ffffff;
	font-weight: 600;

	background-color: #eeaf00;
	border-style: solid;
	border-width: 0px;
	border-color: #eeaf00;
	border-radius: 6px;
	padding: 3px 5px 3px 7px;
	margin-right: 5px;
	}

p.nummerierung_eingerueckt {
	padding-left: 32px;
	text-indent: -32px;
	}



/* ========  Tooltips (http://www.menucool.com/tooltip/css-tooltip) ========*/

a.tooltip {outline:none; position: relative; } 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { z-index:100; display:none; padding:10px 10px 3px 10px; width:410px; font-size: 11px; line-height:15px; color:#666; border:1px solid #FFF; background:#FFF; } 
a.tooltip span p {margin-bottom: 7px;}
a.tooltip img { width: 20px; height: 20px; }
a.tooltip:hover span{ display:inline; position:absolute; bottom: 40px; left: -227px;} 
.callout {z-index:200; position:absolute; bottom:-12px; left:225px; border:0; } 
/*CSS3 extras*/ 
a.tooltip span { border-radius:6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0px 0px 8px #333; -webkit-box-shadow: 0px 0px 8px #333; box-shadow: 0px 0px 8px #333; }

.table_standzeit p {margin-bottom:0;}

/* ========  Produktempfehlungen  ========*/


#bereich_produktempfehlung {
	width: 510px;
	position: relative;
	margin-top: 20px;
	overflow: hidden;
	}

#bereich_produktempfehlung h3 {
	color: #0078c9;
	margin-bottom: 0;
	}

#bereich_produktempfehlung img {
	display: block;
	height: 120px;
	width: auto;
	margin: 10px auto 0 auto;
	}

.produktempfehlung {
	width: 225px;
	margin-right: 30px;
	float: left;
	border-top: 1px dotted #afafaf;
	border-bottom: 1px dotted #afafaf;
	}

a.produktname_empfehlung h3 {
	font-size: 15px;
	line-height: 20px;
	margin-bottom: 0px;
	margin-top: 15px;
	padding-left: 30px;
	}


body.haut_haende a.produktname_empfehlung h3 {       
	background: url(../bilder/grafikelemente/pfeil_gelb_sprite.png) left 0px no-repeat;
}

body.flaeche a.produktname_empfehlung h3 {       
	background: url(../bilder/grafikelemente/pfeil_gruen_sprite.png) left 0px no-repeat;
}

body.instrumente a.produktname_empfehlung h3 {       
	background: url(../bilder/grafikelemente/pfeil_dunkelblau_sprite.png) left 0px no-repeat;
}

body.dosiergeraete a.produktname_empfehlung h3 {       
	background: url(../bilder/grafikelemente/pfeil_grau_sprite.png) left 0px no-repeat;
}

body.surgical a.produktname_empfehlung h3 {       
	background: url(../bilder/grafikelemente/pfeil_surgical_sprite.png) left 0px no-repeat;
}

body.waschmittel a.produktname_empfehlung h3 {       
	background: url(../bilder/grafikelemente/pfeil_blau_sprite.png) left 0px no-repeat;
}


a.produktname_empfehlung p {
	color: #666;
	}


/* ========  Infospalte  ========*/

#infospalte {                 /*beinhaltet Produktbild, Buttons, CE-Tabelle */
	display: block;
	width: 220px;
	float: right;
	overflow: hidden;
}

#produktbild {
	margin-bottom: 10px;
	text-align: center;
}

#piktos_eigenschaft {
	border-top: 1px dotted #afafaf;
}

#piktos_eigenschaft table {
	width: 99%;	
	padding-top: 7px;
	border-bottom: 1px dotted #afafaf;
	}
	
.spalte_pikto {
  width: 25%;
  padding-bottom: 7px;
}	

.pikto_anwendung {
	margin-right: 10px;
	width: 50px;
	height: auto;
}

.ce_nummer {
	font-size: 27px;
}

img[title="CE"] {
	width: 35px;
	height: auto;
}

img[title="D"] {
	width: 17px;
	height: auto;
}

img.button_listung {
	margin: 0 5px 7px 0;
	width: 100px;
	height: auto;
}

#downloads {
	display: block;
	width: 220px;
	margin-bottom: 10px;
	overflow: hidden;
	padding: 10px 0;
	float: right;
	clear: right;
}

#downloads h3 {
	color: #0078c9;
	font-weight: bold;
}

.produktinfos {
	border-bottom: 1px dotted #afafaf;
	padding: 0 0 7px 0;
	margin-bottom: 10px;
}

a.button_hc_allgemein,
a.button_haut_haende,
a.button_flaeche,
a.button_instrumente,
a.button_solidsafe,
a.button_dosiergeraete,
a.button_surgical,
a.button_waschmittel {
	color: #FFF;
	font-size: 15px;
	display: block;
	padding: 9px 0px 7px 30px;
	margin-bottom: 2px;
	background: url(../bilder/grafikelemente/buttons_bereiche/pfeil_buttons_runter_weiss.png) 7px center no-repeat;
	background-size: 15px;
	transition: background-position-y 0.3s ease;
}

a.button_hc_allgemein:hover,
a.button_haut_haende:hover,
a.button_flaeche:hover,
a.button_instrumente:hover,
a.button_solidsafe:hover,
a.button_dosiergeraete:hover,
a.button_surgical:hover,
a.button_waschmittel:hover {
	opacity: 0.6;
	background-position-y: 13px;
	transition: background-position-y 0.3s ease;
	}


a.button_hc_allgemein {       
	background-color: #0078c9;
}

a.button_haut_haende {
	background-color: #EEAF00;
}

a.button_flaeche {
	background-color: #71af28;
}

a.button_instrumente {
	background-color: #005172;
}

a.button_solidsafe {
	background-color: #005172;
}

a.button_dosiergeraete {
	background-color: #999;
}

a.button_surgical {
	background-color: #ef7900;
}

a.button_waschmittel {
	background-color: #5cb4e5;
}


/* ========  Besonderheiten Surgical  ========*/

.kontaktkasten {
	color: #FFF;
	display: block;
	padding: 7px 10px 4px 10px;
	background: #0078c9;
}

.kontaktkasten h3 {
	color: #FFF !important;
}

.tel_nummer,
.kontaktkasten a {
	color: #FFF !important;
	font-size: 17px;
	font-weight: bold;
}


/* =====================================
   Erreger-Maßnahmen-Konfigurator
   ===================================== */

/* ========  Auswahlseite  ========*/

#auswahl_spektrum,
#auswahl_erreger {
	position: relative;
	overflow: hidden;
	margin-top: 25px;
	background: #f5f5f5;
	padding: 20px 25px 25px 25px;
	width: 310px;
	float: left;
	}

#auswahl_spektrum {
	margin-right: 30px;
	width: 290px;
	}


#go01,
#go02,
a.button_gross_blau,
button.button_gross_blau {
   	width: 280px;
   	/*height: 34px;*/
   	overflow: hidden;
	color: #FFF;
	font-size: 16px;
	display: block;
	padding: 8px 0px 6px 0px;
	margin-top: 20px;
	border: none;
	background: #0078c9;
	text-align: center;
	font-family: 'Overpass';
	font-weight: 300;
   }

#go01:hover,
#go02:hover,
a:hover.button_gross_blau {
	color: #afcdf1;
	}

/* =====================================
   Formularelemente */

/* =====================================
http://bavotasan.com/2011/style-select-box-using-only-css/
*/

.styled-select select {
	/*font-family: 'Overpass';
	font-weight: 300;*/
	color: #666;
   	background: transparent;
   	width: 308px;
   	padding: 5px;
   	font-size: 16px;
   	line-height: 1;
   	border: 0;
   	border-radius: 0;
   	height: 34px;
   	-webkit-appearance: none;
   }

.styled-select option {
	padding: 10px;
	border-top: 1px solid #FFF;
	}

.styled-select {
   	width: 280px;
   	height: 34px;
   	overflow: hidden;
	background: url(../bilder/grafikelemente/pfeil_grau_sprite.png) no-repeat 255px -40px #FFF;
   	border: 1px solid #ccc;
	margin: 15px 0;
   }

/* ========  Virusseite  ========*/

#steckbrief_erreger {
	position: relative;
	background: #edf5fb;
	padding: 15px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 30px;
	}

#steckbrief_erreger h3 {
	color: #0078c9;
	margin-bottom: 0;
	font-size: 14px;
}

#download_plan {
	margin-top: 15px;
	}

#produkte_haut_haende,
#produkte_flaeche,
#produkte_instrumente,
#produkte_waschmittel {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
	}

img.headline_kategorie {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
}

h3.headline_kategorie {
	margin: 15px 0 20px 65px;
}

.table_linie,
.wirksame_produkte table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0 0 50px 0;
	font-size: 14px;
	}

.table_linie.anfang {
	border-top: 1px dotted #afafaf;
	margin-bottom: 0;
	}

.table_linie td,
.wirksame_produkte table td {
	border-bottom: 1px dotted #afafaf;
	height: 45px;
	}

.table_linie a,
.wirksame_produkte table a {
	color: #666;
	display: block;
	}

.zeile_beschriftung {
	font-weight: bold;
}

.zelle_pikto {
	width: 70px;
	padding-bottom: 5px;
	}

.zelle_kategorie.anfang {
	padding-left: 0;
	}

.zelle_kategorie {
	}

.zelle_produktname {
	
	}

.zelle_konzentration {
	
	}


/* =====================================
   Konzentrat-Rechner    
   ===================================== */

#konzentrat-rechner {
	border-top: 1px dotted #afafaf;
	padding: 40px 0;
	}

#auswahl_konzentration {
	position: relative;
	overflow: hidden;
	background: url(../bilder/konzentrat-rechner/konzentration_bg.png) no-repeat top left #FFF;
	padding: 20px 25px 25px 25px;
	width: 330px;
	height: 200px;
	float: left;
	margin: 0 7px 40px 0;
	}

#ergebnis_konzentration {
	position: relative;
	overflow: hidden;
	background: #edf5fc;
	border: 1px solid #0078c9;
	padding: 20px 25px 25px 25px;
	width: 295px;
	height: 198px;
	float: left;
	}

input#feld_ergebnis {
	padding-left: 10px;
	width: 285px;
   	height: 34px;
	background: #FFF;
   	border: 1px solid #ccc;
	margin-top: 5px;
	font-family: Arial;
	color: #0078c9;
	font-size: 16px;
	font-weight: bold;
	position: absolute;
	top: 55px;
	left: 25px;
	}

input#feld_ergebnis { /* nur IE 7 + 8 */
  	padding-top/*\**/: 7px\9;
	height/*\**/: 27px\9;
	}
	




/* =====================================
   Noch nicht bereinigt und aufgeräumt
   ===================================== */


/* =====================================
   Formatierung Suchfeld und Ergebnisseite
   ===================================== */

#suche {
	position: absolute;
	top: 105px;
	right: 0px;
	z-index: 6000;
}

#suche input {
	border: 1px solid #ccc;
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 6px;
	width: 130px;
}


#button_suche {
	color: #0078c9;
	background: #f5f5f5;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 6px !important;
	margin-left: 5px;
	width: 70px !important;
}

/* IE 7 */
* + html #button_suche {
   padding: 4px !important;
}

/* IE 6 */
* html #button_suche {
   padding: 4px !important;
}

/* Nur Firefox */
@-moz-document url-prefix() {
    #button_suche {
        padding: 5px !important;
    }
}

#button_suche:hover {
	background: #dedede;
	}



ul#suchergebnisse {
	margin-bottom: 30px;
	border-top: 1px dotted #afafaf;
}

ul#suchergebnisse li a {
	display: block;
	padding: 10px 10px 8px 32px;
	background: url(../bilder/grafikelemente/pfeil_blau_rechts@2x.png) left 12px no-repeat;
	background-size: 15px;
	border-bottom: 1px dotted #afafaf;
	color: #666;
}

.spalte_liste {
	width: 300px;
	display: block;
	float: left;
	margin-right: 30px;
	overflow: hidden;
}

.spalte_liste h3 {
	color: #0078c9;
	}
	

/* =====================================
   Formatierung Startseite + EnCompass-Seite
   ===================================== */

#startbild {
	float: left;
	margin: 5px;
	margin-bottom: 25px;
	border: 5px solid #f5f5f5;
	width: 620px;
	-webkit-box-shadow:  0px 0px 5px 0px #999999;
          box-shadow:  0px 0px 5px 0px #999999;
}

#startbild .bx-wrapper {
	margin-top: 0;
}

#startbild.startbild_ganze_breite {
	width: calc(100% - 10px);
	margin: 0px;
	margin-bottom: 25px;
	-webkit-box-shadow:  none;
          box-shadow:  none;	
}

#newsticker {
	margin: 5px 0 0 670px;
	width: 290px;
	border-top: 1px dotted #afafaf;
	padding-top: 20px;
}

#newsticker_02 {
	margin: 0 0 0 670px;
	width: 290px;
}

#newsticker_02 hr {
	clear: none !important;
	margin: 15px 0;
}

#newsticker h2,
#startbuttons h2,
#buttons_fachgebiete h2,
#bereich_programme_konzepte_startseite h2 {
	color: #0078c9;
	font-size: 21px;
	line-height: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	text-transform: uppercase;
	hyphens: none;
}

#franzoesisch #newsticker h2 {
	line-height: 26px;
}

.newsmeldung {
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 20px;
}

#newsticker_02 h3,
.newsmeldung h3 {
	color: #0078c9;
	font-size: 13px;
	line-height: 20px;
	font-weight: bold;
	margin-bottom: 0px;
}

.newsmeldung a {
	display: block;
	color: #666;
	padding: 2px 0;
}

.newsmeldung a:hover {
	color: #0078c9;
	background: #f7fcff;
}

#startbuttons {
	position: relative;
	overflow: hidden;
	width: 990px;
	margin-top: 30px;
}

#startbuttons ul { /* Bei nur vier Piktogrammen werden diese zentriert angezeigt */
	padding-left: 10%;
	}

#startbuttons img.button {   /* Hier die Größe der Piktos auf der Startseite ändern */
	/* width: 135px;
	height: 135px;  6 Piktos */
	width: 168px;
	height: 168px; /* 5 Piktos */
}

#startbuttons ul.inline li {
	margin: 0 30px 30px 0;
	display: block;
	float: left;
}

#startbuttons a {
	transition: all 0.3s ease;
}

#startbuttons a:hover {
	opacity: 0.6;
	transition: all 0.3s ease;
}

#startbuttons hr {
	width: 960px;
	clear: both;
}

#startbuttons h2 {
	margin: 20px 0;
}

.button_gruen a { 
	background: url(../bilder/grafikelemente/button_gruen.png) top left no-repeat !important;
}

.button_gruen a:hover,
.button_gruen a:focus,
.button_gruen a:active {
	color: #bcdfab !important;
}


#teaserbereich_startseite {
	position: relative;
	overflow: hidden;
	width: 990px;
	margin-top: 15px;
}

.teaserbox_startseite {
	width: 479px;
	height: 240px;
	border-right: 1px dotted #afafaf;
	margin: 10px 15px 20px 0;
	float: left;
	position: relative;
	overflow: hidden;
	}

.teaserbox_startseite img {
	position: absolute;
	top: 0;
	right: 15px;
	z-index: 1;
	}

.teaserbox_text {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 2;
	width: 55%;
	height: 200px;
	}

.teaserbox_text h2 {
	color: #0078c9;
	font-weight: bold;
	margin-bottom: 10px;
	}

/* .teaserbox_text a {        ganze Box ist verlinkt 
	display: block;
	color: #666;
	} */

.teaserbox_text a.link_zum_produktbereich {
	/* color: #0078c9; */
	position: absolute;
	left: 0;
	bottom: 0;
	}
	
/* ----- Teaserbalken ---- */

a.teaserbalken_startseite {
	display: block;
	background-color: #0078c9;
	background-image: url(../bilder/startseite/pfeil_rechts_teaserbalken.png);
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: 8px center;
	color: #FFF;
	margin-bottom: 10px;
	padding: 12px 15px 8px 47px;
	font-size: 15px;
	transition: all 0.3s ease;
}

a.teaserbalken_startseite:hover {
	background-color: #1c4875;
	background-position: 12px center;
	background-size: 28px;
	transition: all 0.3s ease;
}

a.teaserbalken_startseite strong {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1px;
}



/* --------  Programme und Konzepte ------- */

#bereich_programme_konzepte_startseite {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px dotted #afafaf;
	padding: 10px 0 17px 0;
}

.programme_konzepte {
	width: 465px;
	float: left;
	margin-right: 30px;
}

#bereich_programme_konzepte_startseite .programme_konzepte:last-of-type {
	margin-right: 0px;
}

.programme_konzepte a {
	display: flex;
	margin-bottom: 20px;
	font-size: 25px;
	font-weight: 400;
	align-items: center;
}

.programme_konzepte a:hover {
	background-image: linear-gradient(to right, white 10%, #f7fbfd 30%);
	color: #0078c9;
	transition: all 0.3s ease;
}
	
.programme_konzepte a img {
	margin-right: 20px;
	height: 90px;
	width: auto;
}





.einleitung_haos {
	width: 630px;
	margin-bottom: 15px;
	}

.teaser_hao_videos {
	border: 1px solid #0078c9;
	padding: 15px 5px 0px 5px;
	width: 286px;
	overflow: hidden;
	background: #FFF url(../bilder/encompass_seite/verlauf_hao_videos.png) bottom left repeat-x;
}

.teaser_hao_videos .teaserbild {
	position: relative;
	top: -15px;
	left: -5px;
}
.button_hao_videos a{
display: block;
float:left;
width: 143px;
height: 32px;
color: #FFF;
font-size: 13px;
padding-top: 6px;
background: transparent url("../bilder/grafikelemente/button_gruen_klein.png") no-repeat scroll left top;
position: relative;
left: 0px;
text-align: center;
margin-bottom: 3px;
}

.button_hao_videos a:hover,
.button_hao_videos a:focus,
.button_hao_videos a:active {
	color: #BCDFAB !important;
}

/*   Video-Seite HAOs   */
.text_neben_video {
	position: absolute;
	width: 200px;
	top: 60px;
	left: 0;
	}

.text_neben_video h3,
.text_neben_video h2 {
	border-top: 1px dotted #afafaf;
	border-bottom: 1px dotted #afafaf;
	padding: 20px 0 0 63px;
	margin: 20px 0;
	position: relative;
	height: 40px;
}

.text_neben_video h3 .zweizeilig,
.text_neben_video h2 .zweizeilig {
	position: relative;
	top: -10px;
	left: 0;
	}

body.flaeche .text_neben_video .bullets_dreieck li {
	padding-left: 15px;
	background: url(../bilder/grafikelemente/bullets_dreieck/bullet_dreieck_allgemein.png) left 7px no-repeat;
	background-size: 7px 7px;
}


/* =====================================
   Formatierung Fachgebiete
   ===================================== */

/* ========= Auswahl auf Startseite ----- */

#bereich_fachgebiete_startseite {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px dotted #afafaf;
	padding: 10px 0 17px 0;
	}

#buttons_fachgebiete {
	position: relative;
	/*overflow: hidden;*/
	width: 990px;
	}

.btn_fachgebiet {
	color: #666;
	text-transform: uppercase;
	display: block;
	padding: 7px;
	margin-bottom: 3px;
	cursor: pointer;
	border: 1px solid #f5f5f5 !important;
	background: #f5f5f5; /* Old browsers */
	background: -moz-linear-gradient(top,  #f5f5f5 0%, #d5d5d5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#d5d5d5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f5f5f5 0%,#d5d5d5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f5f5f5 0%,#d5d5d5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f5f5f5 0%,#d5d5d5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f5f5f5 0%,#d5d5d5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
	
	float: left;
	width: 449px;
	margin-right: 30px;
	}

.btn_fachgebiet a.link_zum_produktbereich {
	color: #666;
	}

.btn_fachgebiet a:hover.link_zum_produktbereich {
	color: #0078c9;
	}

/* ========= Auswahl auf Produkt-Startseite ----- */

.teaser_auswahlbereich {
	overflow: hidden;
	}

.teaser_produktbereich .btn_fachgebiet {
	padding: 9px 7px 8px 7px;
	}

/* ========= Startseite Fachgebiet ----- */




/* ========= Übersichtsseite Produkte ----- */

.abstand_links_65px {
	margin-left: 65px;
	}

.abstand_unten_30px {
	margin-bottom: 30px;
	}

.abstand_unten_15px {
	margin-bottom: 15px;
	}

.verkleinert {
	font-size: 85%;
	}

#ausklapp_infos {
	margin-left: 290px;
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	}

/* ========= Quickfinder Berufe ----- */

#quickfinder_berufe {
	width: 100%;
	background: #0078c9;
	padding: 10px;
	position: relative;
	overflow: hidden;
	margin: -20px 0 30px 0;
}

#quickfinder_berufe .text_quickfinder {
	color: #FFF;
	text-transform: uppercase;
	font-size: 17px;
	float: left;
	text-align: center;
	width: 215px;
	padding-top: 8px;
	}

#quickfinder_berufe .styled-select {
	float: left;
	margin: 0 25px 0 0;
	}

#quickfinder_berufe .styled-select select {
	font-size: 14px;
	}

#quickfinder_go {
	display: block;
	background: #999;
	border: 1px solid #ccc;
	font-family: Arial;
	color: #FFF;
	padding: 5px 30px;
	font-size: 16px;
	line-height: 1px;
	border-radius: 0px;
	height: 36px;
	cursor: pointer;
	}

#quickfinder_go:hover {
	color: #CCC;
	background: #666;
	}

/* ========= Quickfinder Berufe Light-Version ----- */

#quickfinder_berufe.light {
	background: #f5f5f5;
	margin: 0 0 10px 0;
	}

#quickfinder_berufe.light .text_quickfinder {
	color: #666;
	}

/* ========= Quickfinder Berufe Kompakt-Version ----- */

#quickfinder_berufe.kompakt {
	width: 280px;
	float: left;
	margin: 0;
	}

#quickfinder_berufe.kompakt .text_quickfinder {
	text-align: left;
	padding: 0px 0 10px 0;
	}

#quickfinder_berufe.kompakt .styled-select {
	float: left;
	margin: 0 0 6px 0;
	width: 278px;
	height: 28px;
	background: url('../bilder/grafikelemente/pfeil_grau_sprite.png') no-repeat scroll 255px -43px #FFF;
	}

#quickfinder_berufe.kompakt #quickfinder_go {
	height: 28px;
	}



/* =====================================
   Formatierung Startseite Download
   ===================================== */

#downloadbuttons { 
	position: relative;
	overflow: hidden;
	/* width: 990px; */
}

#downloadbuttons h1 {
	color: #999;
	font-size: 30px;
	margin: 30px 0 30px 0;
}

#downloadbuttons img.button {   /* Hier die Größe der Piktos auf der Download-Startseite ändern */
	width: 135px;
	height: 135px;    /* bei 6 Piktos */
	
	width: 168px;
	height: 168px;    /* bei 5 Piktos */	
	
	width: 122px;
	height: 122px;
	
}

#downloadbuttons hr,
#quickfinder hr {
	width: 960px;
	clear: both;
}

#quickfinder {
	display: block;
	/* width: 990px; */
	border: 0px solid red;
	overflow: hidden;
}

#quickfinder .bildeintrag {
	margin-right: 20px;
	width: 168px;
}

#quickfinder .textbereich {
	padding-left: 14px;
}

#quickfinder h2 {
	color: #0078c9;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	margin: 20px 0 20px 0;
}


/* =====================================
   Formatierung Downloadseiten
   ===================================== */

h1.head_balken {
	color: #FFF;
	position: absolute;
	top: 15px;
	right: 55px;
}

.hc_allgemein_balken {
	background: url(../bilder/grafikelemente/balken_bereiche/balken_allgemein.png) top left no-repeat;
}

.haut_haende_balken {
	background: url(../bilder/grafikelemente/balken_bereiche/balken_haut_haende.png) top left no-repeat;
}

.flaeche_balken {
	background: url(../bilder/grafikelemente/balken_bereiche/balken_flaeche.png) top left no-repeat;
}

.instrumente_balken {
	background: url(../bilder/grafikelemente/balken_bereiche/balken_instrumente.png) top left no-repeat;
}

.solidsafe_balken {
	background: url(../bilder/grafikelemente/balken_bereiche/balken_solidsafe.png) top left no-repeat;
}

.dosiergeraete_balken {
	background: url(../bilder/grafikelemente/balken_bereiche/balken_dosiergeraete.png) top left no-repeat;
}

.bildeintrag {
	display: block;
	float: left;
	width: 160px;
	/* height: 275px; für franz. etwas höher */
	height: 280px;
	text-align: center;
	padding-top: 10px;
	margin: 0 29px 29px 0;
	position: relative;
	background-color: #f5f5f5;
}

.bildeintrag img {
	-webkit-box-shadow:  3px 3px 3px 0px #999999;
          box-shadow:  3px 3px 3px 0px #999999;
}

.textbereich {
	padding: 5px 10px;
	background-color: #f5f5f5;
	margin-top: 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 140px;
	/* height: 95px; für franz. etwas höher */
	height: 102px;
}

.produktname {
	padding: 0;
	margin: 0;
	text-align: left;
	display: block;
	/* height: 57px; für franz. etwas höher */
	height: 65px;
	line-height: 16px;
	font-size: 13px;
}

.pdf_datum {
	color: #999;
}

.download_link a {
	display: block;
	width: 100%;
	color: #FFF;
	font-size: 13px;
	padding-top: 5px;
	padding-bottom: 3px;
	position: relative;
	text-align: center;
	background-color: #0078c9;
	transition: background-color 0.3s ease;
}

.download_link a:hover,
.download_link a:focus,
.download_link a:active {
	/*color: #afcdf1;*/
	background: #1c4875;
	transition: background-color 0.3s ease;
}

.dateigroesse {
	color: #afcdf1;
}

/* =====================================
   Formatierung Highlightbereich Downloadseiten
   ===================================== */

#highlightbereich {
	display: block;
	overflow: hidden;
	width: 730px;
}

#highlightbereich h1 {
	margin: -10px 0 15px 0;
}

#highlightbereich hr {
	margin-top: 0;
	margin-bottom: 20px;
}

#highlightbereich .bildeintrag,
#highlightbereich .textbereich {
	background: none;
	border: none;
}

#highlightbereich .bildeintrag {
	margin-bottom: 0;
}

#highlight_hintergrund {
	width: 760px;
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}

#highlight_hintergrund.hc_allgemein {
	background: #edf5fb;
}

#highlight_hintergrund.haut_haende {
	background: #fdf7e5;
}

#highlight_hintergrund.flaeche {
	background: #f4f9e8;
}

#highlight_hintergrund.instrumente {
	background: #edf5fb;
}

#highlight_hintergrund.solidsafe {
	background: #edf5fb;
}

#highlight_hintergrund.dosiergeraete {
	background: #dfdfdf;
}

#highlight_hintergrund.surgical {
	background: #fdf1e5;
}

/* =====================================
   Formatierung Sicherheitsdatenblatt-Suche
   ===================================== */

#wrapper_iframe {
	width: 735px;
	height: 1030px;
	position: relative;
	overflow: hidden;
}

#iframe {
	position: absolute;
	top: -160px;
	left: 0px;
	width:735px;
	height:1250px;
	overflow-x: hidden;
	overflow-y: auto;
	border: none;
	-webkit-overflow-scrolling: touch;
	display:inline-block;
}

#abdeckung {
	display: block;
	width: 735px;
	height: 300px;
	background: #FFF;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

/* =====================================
   Formatierung Newsletter-Anmeldung
   ===================================== */

#an_abmeldung {
	padding: 5px 5px;
	background: #f7fcff;
	border: 1px solid #b8d4e9;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 535px;
	margin-bottom: 15px;
}

#an_abmeldung input {
	margin-left: 15px;
}

#an_abmeldung label {
	font-weight: bold;
	color: #0078c9;
	margin: 0 40px 0 10px;
}

.formular input,
.formular textarea {
	display: block;
	width: 100%;
	height: 25px;
	padding: 3px 5px;
	margin: 3px 0;
	border: 1px solid #b8d4e9;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
}

.formular textarea {
	height: 50px;
	resize: none;
	padding: 5px;
	font-size: 14px;
}

#btn_senden {
	display: block;
	width: 150px;
	height: 45px;
	color: #FFF;
	font-size: 15px;
	background: url(../bilder/grafikelemente/button_download.png) left 3px no-repeat;
	border: none;
}

#btn_senden:hover,
#btn_senden:focus,
#btn_senden:active {
	color: #afcdf1;
}


/* =====================================
   Formatierung Newsseite
   ===================================== */

.newsletter {
	display: block;
	padding-bottom: 20px;
	overflow: hidden;
}

h3.newskategorie {
	color: #71af28;
	font-weight: normal;
	font-size: 20px;
	margin: 30px 0 10px 0;
	clear: both;
}

img.ansicht_newsletter {
	display: block;
	float: left;
	margin-top: 20px;
	margin-bottom: 30px;
}

p.titel_newsletter {
	color: #0078c9;
	font-weight: bold;
	margin-bottom: 0;
	font-size: 15px;
}

.newsletter_textbereich {
	display: block;
	margin: 20px 0 0 260px;
}

.newsletter_textbereich .download_link a {
	margin-top: 20px;
}

#hinweis_anmeldung {
	display: block;
	background: #edf5fb;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 10px;	
	color: #0078c9;
	margin: 20px 0 20px 260px;
}

#hinweis_anmeldung .download_link a {
	margin-top: 10px;
}


/* =====================================
   Formatierung Video-Seiten
   ===================================== */

#video_frame {
	width: 720px;
	height: 404px;
	/* margin: 5px auto; */
	margin: 5px 5px 5px 230px;
	-webkit-box-shadow:  0px 0px 5px 0px #999999;
          box-shadow:  0px 0px 5px 0px #999999;
	border: 2px solid #FFF;
}

#link_zurueck .download_link a {
	margin: 15px 0 15px 520px;
	width: 150px;
  	height: 42px;
  	padding-top: 11px;
}


/* =====================================
   Formatierung Hygiene-ABC
   ===================================== */

#subnavi .navi_abc {
	background: #FFF;
	margin-top: 40px;
	border-top: 1px dotted #afafaf;
	padding-top: 20px;
	display: block;
	width: 195px;
	}

.fixed {position: fixed; top:10px;}     

/* IE 7 */
* + html .fixed {
  	position: static;
}

#subnavi .navi_abc ul li {
	float: left;
	}

#subnavi .navi_abc ul li a {
	display: block;
	background: #edf5fb;
	width: 40px;
	height: 30px;
	margin: 0 5px 5px 0;
	padding: 10px 0 0 0;
	text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

#subnavi .navi_abc ul li a.null_neun {
	width: 85px;
	}

#subnavi .navi_abc ul li a:hover {
	background: #dcebf7;
	}

.abschnitt_abc {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
	}

a.toplink {
	color: #999;
	position: absolute;
	top: 26px;
	right: 0;
	padding: 5px 25px;
	background: url(../bilder/grafikelemente/pfeil_blau_oben@2x.png) right 7px no-repeat;
	background-size: 15px;
	}

a:hover.toplink {
	color: #0078c9;
	}

#content.hygiene_abc h1 {
	margin-bottom: 10px;
	}

#content.hygiene_abc h2 {
	color: #0078c9;
	margin-bottom: 10px;
	padding: 5px 0;
	border-top: 1px dotted #afafaf;
	border-bottom: 1px dotted #afafaf;
	}



/* =====================================
   PURE LINE Landing Page
   ===================================== */

#headergrafik_pureline {
	float: left;
	width: 735px;
	}


/* =====================================
   Allg. Klassen
   ===================================== */
   
.blau {
	color: #0078c9;
}

.bold {
	font-weight: bold;
	}

ul.inline li {
	margin: 0 38px 30px 0;
	display: block;
	float: left;
}

.hochgestellt_headline,
h1 sup {
	font-size: 75%;
	vertical-align: 25%;  /* versetzt den Text nach oben */
}

p.fussnote {
	font-size: 10px;
	line-height: 13px;
	margin: 10px 0;
}

.ohne_abstand_rechts {
	margin-right: 0;
	}

.clear{
	clear: both;
}

.abstand_unten_10 {
	margin-bottom: 10px;
	}

.abstand_oben_10 {
	margin-top: 10px;
	}
	
	
	
/* =====================================
   Formatierung Datenschutz
   ===================================== */	
   
a.button_cookies_anpassen {
    color: #FFF;
    padding: 10px 50px 8px 50px;
    background: #0078c9;
    margin: 15px 0 25px 0;
    display: inline-block;
    font-weight: 500;
  }
  
a:hover.button_cookies_anpassen  {
 background: #1c4875;
    transition: all 0.3s ease; 
    }
    
/* =====================================
   Formatierung Cookie Consent Banner
   ===================================== */	    
    
.ccm-widget--text .ccm-widget--title {
	color: #0078c9 !important;
}

.ccm-root p {
	line-height: 1.6;
	}
	
.ccm-root button {
	font-family: 'Overpass' !important;
	text-shadow: none !important;
	border-radius: 0px !important;
}

.ccm-root button:hover {
	background: #1c4875 !important;
	border-color: #1c4875 !important;
	}	
	
.ccm-modal--footer {
	background: #fff;
	}
	
.ccm-modal--footer .ccm-link-container a:link, 
.ccm-modal--footer .ccm-link-container a:visited {
    color: #999;
	}	
	
.ccm-modal--footer .ccm-link-container a:hover {
	color: #313131;
	}
	
.ccm-powered-by a:link, 
.ccm-powered-by a:visited {
    color: #ccc;
	}