/* CSS Document */
/* #################### PRODUCT STYLES #################### */

#PH #logo{
	border-bottom: 3px solid #FDC82F;
}
#PH{
	background: url(../images/left_pattern_ph.jpg) repeat-y #F4F5FA;
}
#PH #wave_img{
	background: url(../images/produkt_wave_ph.gif) no-repeat;
}

#PH h1{
	color: #FDC82F;
}
#PH h2{

	border-left: 1.2em solid #FDC82F;
	padding: 0 0.5em;
}


#CHLOR #logo, #BROM #logo, #DESI #logo{
	border-bottom: 3px solid #CD202C;
}
#CHLOR, #BROM, #DESI{
	background: url(../images/left_pattern_chlor.jpg) repeat-y #F4F5FA;
}
#CHLOR #wave_img, #BROM #wave_img, #DESI #wave_img{
	background: url(../images/produkt_wave_chlor.gif) no-repeat;
}

#CHLOR h1, #BROM h1, #DESI h1{
	color: #CD202C;
}
#CHLOR h2, #BROM h2, #DESI h2{

	border-left: 1.2em solid #CD202C;
	padding: 0 0.5em;
}

#BIG #logo{
	border-bottom: 3px solid #FFA075;
}
#BIG{
	background: url(../images/left_pattern_big.jpg) repeat-y #F4F5FA;
}
#BIG #wave_img{
	background: url(../images/produkt_wave_big.gif) no-repeat;
}

#BIG h1{
	color: #FFA075;
}
#BIG h2{

	border-left: 1.2em solid #FFA075;
	padding: 0 0.5em;
}

#O2 #logo{
	border-bottom: 3px solid #D71F85;
}
#O2{
	background: url(../images/left_pattern_o2.jpg) repeat-y #F4F5FA;
}
#O2 #wave_img{
	background: url(../images/produkt_wave_o2.gif) no-repeat;
}

#O2 h1{
	color: #D71F85;
}
#O2 h2{

	border-left: 1.2em solid #D71F85;
	padding: 0 0.5em;
}

#ALGI #logo{
	border-bottom: 3px solid #009C82;
}
#ALGI{
	background: url(../images/left_pattern_algi.jpg) repeat-y #F4F5FA;
}
#ALGI #wave_img{
	background: url(../images/produkt_wave_algi.gif) no-repeat;
}

#ALGI h1{
	color: #009C82;
}
#ALGI h2{

	border-left: 1.2em solid #009C82;
	padding: 0 0.5em;
}

#REIN #logo, #BECKEN #logo, #FILTER #logo{
	border-bottom: 3px solid #0088CE;
}
#REIN, #BECKEN, #FILTER{
	background: url(../images/left_pattern_rein.jpg) repeat-y #F4F5FA;
}
#REIN #wave_img, #BECKEN #wave_img, #FILTER #wave_img{
	background: url(../images/produkt_wave_rein.gif) no-repeat;
}

#REIN h1, #BECKEN h1, #FILTER h1{
	color: #0088CE;
}
#REIN h2, #BECKEN h2, #FILTER h2{

	border-left: 1.2em solid #0088CE;
	padding: 0 0.5em;
}

#ZUSATZ #logo, #ANA #logo, #WINTER #logo, #SPA #logo, #MINI #logo{
	border-bottom: 3px solid #818A8F;
}
#ZUSATZ, #ANA, #WINTER, #SPA, #MINI{
	background: url(../images/left_pattern_zusatz.jpg) repeat-y #F4F5FA;
}
#ZUSATZ #wave_img, #ANA #wave_img, #WINTER #wave_img, #SPA #wave_img, #MINI #wave_img{
	background: url(../images/produkt_wave_zusatz.gif) no-repeat;
}

#ZUSATZ h1, #ANA h1, #WINTER h1, #SPA h1, #MINI h1{
	color: #818A8F;
}
#ZUSATZ h2, #ANA h2, #WINTER h2, #SPA h2, #MINI h2{

	border-left: 1.2em solid #818A8F;
	padding: 0 0.5em;
}

#FLOCK #logo, #TRUEB #logo{
	border-bottom: 3px solid #6639B7;
}
#FLOCK, #TRUEB{
	background: url(../images/left_pattern_flock.jpg) repeat-y #F4F5FA;
}
#FLOCK #wave_img, #TRUEB #wave_img{
	background: url(../images/produkt_wave_flock.gif) no-repeat;
}

#FLOCK h1, #TRUEB h1{
	color: #6639B7;
}
#FLOCK h2, #TRUEB h2{

	border-left: 1.2em solid #6639B7;
	padding: 0 0.5em;
}

#DOSI #logo{
	border-bottom: 3px solid #76D2B6;
}
#DOSI{
	background: url(../images/left_pattern_dosi.jpg) repeat-y #F4F5FA;
}
#DOSI #wave_img{
	background: url(../images/produkt_wave_dosi.gif) no-repeat;
}

#DOSI h1{
	color: #76D2B6;
}
#DOSI h2{

	border-left: 1.2em solid #76D2B6;
	padding: 0 0.5em;
}

/* #################### Produktfinder Widget #################### */

#produktfinder{
	width: 600px;
	background-color: #FFF;
	overflow: auto;
	
	}
#produktfinder ul{
	margin: 0;
	padding: 0;
	list-style: none;
	}
#produktfinder ul li{
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	}
.pf_ueberschrift{
	background-color: #CCC;
	overflow: auto;
	padding: 0.5em 2px 0.3em 0.5em;
	}
.pf_hilfe{
	float: right;
	padding-right: 20px;
	}
#pf_hilfe01{
	background: url(../images/produktfinder_hilfe_icons01.gif) right center no-repeat;
}
#pf_hilfe02{
	background: url(../images/produktfinder_hilfe_icons02.gif) right center no-repeat;
}
#pf_hilfe03{
	background: url(../images/produktfinder_hilfe_icons03.gif) right center no-repeat;
}
#pf_hilfe04{
	background: url(../images/produktfinder_hilfe_icons02.gif) right center no-repeat;
}

.pf_produkt{
	float: left;
	font-weight: bold;
	font-size: 1.1em;
	}
.pf_eigenschaften{
	clear: both;
	}
#produktfinder ul li.pf_schritte{
	width: 62px;
	height: 62px;
	margin: 1px 1px 0 0;
	background-color: #E0E0E0;
	padding: 0;
	overflow: hidden;
	}
#produktfinder ul li.pf_schritte img{
	border: 0;
	margin: 0;
	}
#pf_schritt01{
	background: url(../images/produktfinder_medaillen_01_inact.jpg) no-repeat;
	}
#pf_schritt02{
	background: url(../images/produktfinder_medaillen_02_inact.jpg) no-repeat;
	}
#pf_schritt03{
	background: url(../images/produktfinder_medaillen_03_inact.jpg) no-repeat;
	}
#pf_schritt04{
	background: url(../images/produktfinder_medaillen_04_inact.jpg) no-repeat;
	}
#pf_schritt05{
	background: url(../images/produktfinder_medaillen_05_inact.jpg) no-repeat;
	}
#produktfinder ul li.pf_eigenschaft{
	width: 281px;
	height: 16px;
	margin: 1px 0 0 0;
	padding: 2px;
	}
.pf_eigenschaft div.pf_info{
	float: left;
}
.pf_bez{
	width: 8em;
	padding: 0 0.4em;
	}
.pf_typ{
	color: #000;
	}
#pf_filter{
	background-color: #E0E0E0;
	}
#pf_groesse{
	background-color: #E8E8E8;
	}
#pf_einsatz{
	background-color: #F0F0F0;
	}
	
/* ##################### Produktfinder Ampel Produktlisting ######## */
.pf_productpic{
	float: right;
	overflow: hidden;
	margin: -30px 0 0.7em 0.7em;
	width: 243px;
}
.pf_productpic img{
	
	margin: 0;
}
.pf_productpic .pf_ampel{
	clear: both;
	float: right;
	margin: 1em 1em 0 0;
	
	width: 161px;
	border: 1px solid #CCC;
}
.pf_productpic .pf_ampel .pf_ampel-hl{
	padding: 0.3em 0.6em;
	color: #192F85;
}
#content .pf_productpic .pf_ampel ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 161px;
}
#content .pf_productpic .pf_ampel li.pf_ampel-pic{
	list-style: none;
	margin: 0 1px 0 1px;
	padding: 0;
	float: left;
	width: 30px;
	height: 30px;
}
#content .pf_productpic .pf_ampel #pf_ampel-schritt01{
	background: url(../images/produktfinder_medaillen_klein_01_inact.gif) no-repeat;
}
#content .pf_productpic .pf_ampel #pf_ampel-schritt02{
	background: url(../images/produktfinder_medaillen_klein_02_inact.gif) no-repeat;
}
#content .pf_productpic .pf_ampel #pf_ampel-schritt03{
	background: url(../images/produktfinder_medaillen_klein_03_inact.gif) no-repeat;
}
#content .pf_productpic .pf_ampel #pf_ampel-schritt04{
	background: url(../images/produktfinder_medaillen_klein_04_inact.gif) no-repeat;
}
#content .pf_productpic .pf_ampel #pf_ampel-schritt05{
	background: url(../images/produktfinder_medaillen_klein_05_inact.gif) no-repeat;
}