/* css by kerstin boss prosem.net- 14.01.2009 | 10:33 */

/* Grundlayout */

#container 
{
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 0 50px 0;
	height: auto; 
	width: 896px;
	color: black;
	background: #fff;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
}
	div#bahn,
	div#header,
	p.wrapbot,
	div#hauptnavi,
	div#sprache,
	div#suchformular
	{
		position: absolute;
	}
	
	
	#bahn
	{
		width: 555px; 
		padding: 0 0 0 179px;
		background: #FFF;
		z-index: 2;
	}
	
	#header
	{
		width: 896px; 
		background: #fff; 
	}
		#logo
		{
			position: absolute;
			top: 0;
			width: 896px; 
			height: 92px;
			color: #000;
			background: transparent url(../img/layout/kopf_neutral.gif) no-repeat;
			background-position: bottom center;
			z-index: 99;
		}
			.logo_avokal
			{
				float: left;
				width: 179px; 
				padding: 0 2px 0 0;
			}
			#logo .logo_avokal img
			{
				width: 179px; 
				z-index:1;
			}
			.logo_heller
			{
				float: right;
				width: 160px; 
				padding: 0 0 0 2px;
				background: #fff;
				z-index:1;
			}
			
			.kopf_avokal
			{
				float: left;
				height: 92px;
				width: 186px; 
				background:  url(../img/layout/kopf_avokal.gif) no-repeat;
				background-position: 0 85px;
			}
			
			.kopf_heller
			{
				float: right;
				height: 92px;
				width: 186px; 
				background: url(../img/layout/kopf_heller.gif) no-repeat;
				background-position: 0 85px;
			}
			
	div#wrap,
	div#subnavi_avokal,
	div#subnavi_heller
	{
		position: relative;
		display: block;
		float: left;
		padding: 155px 0 0 0;
	}
	
	div#wrap
	{
		position: static;
		width: 530px;
	}
		div#main 
		{
			position: relative;
			left: 198px;
			width: 100%;
			padding: 0 0 1em 0;
			height: auto;
		}
			div#content
			{
				position: relative;
				padding: 5px 7px;
				color: #000;
			}
		p.wrapbot
		{
			bottom: 0;
			width: 896px;
			border-top: 1px solid #6D6D6D;
			padding: 0.5em 0 0.5em 0;
			text-align: center;
			font-size: 0.7em;
			font-family: Arial, Helvetica, sans-serif;
			color: #333;
			line-height: 1.2em;
		}
		
		



/* Navigation */

	#hauptnavi
	{
		width: 716px; 
		top: 95px;
		left: 180px;
		background: #D9D9D9;
		border-top: 1px solid #D9D9D9;
		border-bottom: 1px solid #D9D9D9;
		line-height: 1em;
	}
		#hauptnavi ul
		{
			list-style:none;
		}
		#hauptnavi li {
			font-size: 0.8em;
			background: #D9D9D9;
			margin: 0;
			padding: 3px 0;
			float:left;
			width: auto;
		}
		#hauptnavi a, #hauptnavi a:link, #hauptnavi a:active, #hauptnavi .current {
			font-size: 1em;
			font-family:  Arial, Helvetica, sans-serif;
			color: black;
			font-weight: bold;
			text-transform: uppercase;
			text-decoration: none;
			letter-spacing: 0.15em;
			background: #D9D9D9;
			border-left: 1px solid #fff;
			border-right: 1px solid #fff;
			padding: 3px 6px;
		}
		#hauptnavi li a:hover, #hauptnavi li .current {
			background: #fff;
			border: 1px solid #D9D9D9;
			padding: 3px 6px;
		}

	#subnavi_avokal
	{
		position: relative;
		top: 0;
		left: -530px;
		width: 182px;
		line-height: 1em;
	}
		#subnavi_avokal h3 {
			background: #EE7405;
			width: 176px;
			font-size: 0.9em;
			font-family:  Arial, Helvetica, sans-serif;
			padding: 3px;
			font-weight: bold;
		}
		#subnavi_avokal ul, #subnavi_heller ul {
			list-style:none;
			padding: 9px 0 0 0;
		}
		#subnavi_avokal li {
			font-size: 0.8em;
			background: #fff;
			width: 181px;
		}
		#subnavi_avokal a, #subnavi_avokal a:link, #subnavi_avokal a:active, #subnavi_avokal span.current {
			display:block;
			font-size: 1em;
			font-family:  Arial, Helvetica, sans-serif;
			text-decoration: none;
			color: black;
			background: #fff;
			width: 177px;
			padding: 2px 0 2px 4px;
			border-bottom: 1px solid #EE7405;
		}
		#subnavi_avokal li a:hover,
		#subnavi_avokal li span.current {
			padding: 2px 0 2px 4px;
			width: 177px;
			border-bottom: 1px solid #EE7405;
			background-color:#FEDEC5;
			font-weight: 900;
		}
		#subnavi_avokal li span.current,
		#subnavi_heller li span.current
		{
			border-bottom: 0;
		}
		#subnavi_avokal li.current {
			border-bottom: 1px solid #EE7405;
		}
		#subnavi_heller li.current {
			border-bottom: 1px solid #009BDE;
		}
		#subnavi_avokal .top a, #subnavi_avokal .top a:link, #subnavi_avokal .top a:active, #subnavi_avokal .top span.current {
		 	border-top: 1px solid #EE7405;
		}
		
	div#subnavi_heller
	{
		position: relative;
		top: 0;
		left: 0;
		float: right;
		width: 152px;
		line-height: 1em;
	}
		#subnavi_heller h3 {
			background: #009BDE;
			width: 147px;
			font-size: 0.9em;
			font-family:  Arial, Helvetica, sans-serif;
			font-weight: bold;
			padding: 3px;
		}
		
		#subnavi_heller li {
			font-size: 0.8em;
			background: #FFF;
			width: 153px;
		}
		#subnavi_heller a, #subnavi_heller a:link, #subnavi_heller a:active, #subnavi_heller span.current {
			display:block;
			font-size: 1em;
			font-family:  Arial, Helvetica, sans-serif;
			text-decoration: none;
			color: black;
			background: #fff;
			width: 149px;
			padding: 2px 0 2px 4px;
			border-bottom: 1px solid #009BDE;
		}
		#subnavi_heller li a:hover, #subnavi_heller li .current {
			background: #C2E5F9;
			padding: 2px 0 2px 4px;
			width: 149px;
			border-bottom: 1px solid #009BDE;
			font-weight: 900;
		}
		#subnavi_heller .top a, #subnavi_heller .top a:link, #subnavi_heller .top a:active, #subnavi_heller .top .current  {
		 	border-top: 1px solid #009BDE;
		}
		#subnavi_heller .news a, #subnavi_heller .news a:link, #subnavi_heller .news a:active {
			display:block;
			font-size: 1em;
			font-family:  Arial, Helvetica, sans-serif;
			text-decoration: underline;
			color: #666;
			background: #fff;
			width: 149px;
			padding: 2px 0 2px 4px;
		}
		#subnavi_heller .news a:hover {
				color: #999;
		}
		#subnavi_neutral {
			position:absolute;
			top: 155px;
			width:184px;
			background: #fff;
			line-height: 1em;
		}
		#subnavi_neutral h3 {
			padding:3px;
			width:176px;
			font-size: 0.8em;
			font-family:  Arial, Helvetica, sans-serif;
			font-weight: normal;
			background-color: #C5C5C5;
		}
		#subnavi_neutral ul {
			list-style:none;
			padding: 0.5em 0 0 0;
		}
		#subnavi_neutral li {
			font-size: 0.8em;
			background: #fff;
			width: 184px;
		}
		#subnavi_neutral a, #subnavi_neutral a:link, #subnavi_neutral a:active, #subnavi_neutral .current {
			display:block;
			font-size: 1em;
			font-family:  Arial, Helvetica, sans-serif;
			text-decoration: none;
			color: black;
			background: #fff;
			width: 177px;
			padding: 2px 0 2px 4px;
			border-bottom: 1px solid #6D6D6D;
		}
		#subnavi_neutral li a:hover, #subnavi_neutral li .current {
			background: #D9D9D9;
			width: 177px;
			padding: 2px 0 2px 4px;
			border-bottom: 1px solid #6D6D6D;
		}
		#subnavi_neutral .top a, #subnavi_neutral .top a:link, #subnavi_neutral .top a:active, #subnavi_neutral .top .current {
		 	border-top: 1px solid #6D6D6D;
		}

/*
 * navigation on left or right side
 * third level
 */
div.subnav ul li ul#subNavLevel3,
div.subnav ul li ul#subNavLevel3 li,
div.subnav ul li ul#subNavLevel3 li a,
div.subnav ul li.top ul#subNavLevel3 li a
{
	margin: 0;
	padding: 0;
	background: 0;
	border: 0;
}
div.subnav ul li ul#subNavLevel3
{
	margin: 1px 0;
	width: 181px;
	background: #f5f5f5;
}
	div.subnav ul li ul#subNavLevel3 li
	{
		width: auto;
	}
		div.subnav ul li ul#subNavLevel3 li a,
		div.subnav ul li.top ul#subNavLevel3 li a
		{
			display: block;
			padding: 5px 0 5px 10px;
			width: auto;
			color: #444;
			font-size: 12px;
			font-weight: 500;
			line-height: 14px;
		}
		div#subnavi_avokal ul li ul#subNavLevel3 li a:hover,
		div#subnavi_avokal ul li.top ul#subNavLevel3 li a:hover
		{
			color: #000;
			background-color: #fedec5;
		}
		div#subnavi_heller ul li ul#subNavLevel3 li a:hover,
		div#subnavi_heller ul li.top ul#subNavLevel3 li a:hover
		{
			color: #000;
			background-color: #c2e5f9;
		}
		div.subnav ul li ul#subNavLevel3 li ul.subNavLevel4
		{
			margin: 0;
			padding: 0;
			width: 181px;
		}
			div.subnav ul li ul#subNavLevel3 li ul.subNavLevel4 li
			{
				margin: 0;
				padding: 0;
				width: 181px;
			}
				div.subnav ul li ul#subNavLevel3 li ul.subNavLevel4 li a
				{
					padding: 3px 0 3px 20px;
					font-size: 11px;
					line-height: 12px;
				}
	div#subnavi_heller.subnav ul li ul#subNavLevel3
	{
		width: 153px;
	}
	div#sprache
	{
		left: 840px;
		top: 130px;
		right: 10px;
		bottom: 100px;
		width: 60px;
		height:20px;
	}

		p.de
		{
			float:left;
			height:14px;
			width:20px;
			padding-right:5px;
		}
		p.en
		{
			float:left;
			height:14px;
			width:20px;
		}
		
	div#suchformular
	{
		position: absolute;
		padding: 0 0 0 10px;
		top: 110px;
	}
		input.txt {
			width: 125px;
			font-size: 0.8em;
		}

/* Hinweisbox rechte Spalte - grau */
#hinweis_rechte_spalte {
	position:absolute;
	top: 155px;
	left: 730px;
	width: 160px;
	background: #fff;
	line-height: 1em;
}
#hinweis_rechte_spalte h3 {
	background: #D9D9D9;
	width: 160px;
	font-size: 0.8em;
	font-family:  Arial, Helvetica, sans-serif;
	font-weight: normal;	
	padding: 2px 0 2px 4px;
	margin: 0 0 15px 0;
	border-top: 1px solid #6D6D6D;
}
#hinweis_rechte_spalte p {
	font-size: 0.8em;
	padding-left: 4px;
}
#hinweis_rechte_spalte ul{
	font-size: 0.8em;
	padding-left: 4px;
	list-style: none;
	
}
#hinweis_rechte_spalte li{
	padding-bottom: 10px;
}

/* Footer */
	#wrap p.wrapbot a, #wrap p.wrapbot a:link, #wrap p.wrapbot a:active {
		font-size: 100%;
		font-family: Arial, Helvetica, sans-serif;
		text-decoration: none;
		color: #333;
		background: #FFF;
	}
	
	#wrap p.wrapbot  a:hover {
		color:#6D6D6D;
	}
	
	/* Content */
	
.content_avokal { 
	border: 1px solid #EE7405;
}

.content_heller { 
	border: 1px solid #009BDE;
}

.content_neutral {
	border-top: 1px solid #009BDE;
	border-right: 1px solid #009BDE;
	border-bottom: 1px solid #EE7405;
	border-left: 1px solid #EE7405;
}

#content p {
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0.4em 1.2em 0.4em 1.2em;	
	text-align: justify;
}
.flattersatz {	
	text-align: left !important;
}

#content p.produkte {
	padding: 1em;
	text-align: justify;
}

#content ul {
	color: black;
	font-size: 0.8em;
	list-style: square inside;
	list-style-position: outside ;
	padding:0 0 0.4em 3em;
	list-style-image: url(../img/layout/quadrat_neutral2.gif);
	text-align: justify;
}

/* Klassen */

.center {
	text-align:center !important;
}

.bold {
	font-weight: bold !important;
}

/* BK am 2011-03-01 */
div.content_avokal p span.bold,
div.content_avokal p strong,
.colorAvokal,
.colorAvokal
{
	color: #e56700 !important;
}

div.content_heller p span.bold,
div.content_heller p strong,
.colorHeller,
.colorHeller
{
	color: #009bde !important;
}

div.detailinformationen p span.bold,
div.detailinformationen p strong,
p span.bold.colorBlack,
p strong.colorBlack
{
	color: #000 !important;
}

.clear, #content p.clear {
	clear: both;
	font-size:1px;
	height: 0px;
	margin: 0;
	padding: 0;
}

.normal {
	text-transform: none;
}

.big {
	font-weight:bold;
	text-transform:uppercase;
}

.tel {
	float:left;
	width:4em;
}
.mb20{
	margin-bottom: 20px;
}

.avokal {
	background: transparent url(../img/layout/quadrat_avokal.gif) center left no-repeat;
	color: #e56700; /* #EE7405;*/
	text-transform: none;
}

.avokal2 {
	background: transparent url(../img/layout/quadrat_avokal2.gif) center left no-repeat; 
	color: #e56700; /* #EE7405;*/
	font-size: 0.9em;
	padding-bottom: 0.7em;
}

/* BK am 2011-03-01 */
h1.avokal,
h2.avokal2,
h1.heller,
h2.heller2
{
	color: #000;
}

.heller {
	background: transparent url(../img/layout/quadrat_heller.gif) center left no-repeat;
	color: #009BDE;
	text-transform: none;
}

.heller2 {
	background: transparent url(../img/layout/quadrat_heller2.gif) center left no-repeat; 
	color: #009BDE;
	font-size: 0.9em;
	padding-bottom: 0.7em;
}

.avokalUndHeller {
	background: transparent url(../img/layout/quadrate_avokal_heller.gif) center left no-repeat; 
	color: #009BDE;
	font-size: 0.9em;
	padding-bottom: 0.7em;
}

.neutral {
	background-color: transparent;
	background-image: url(../img/layout/quadrat_neutral.gif);
	background-repeat: no-repeat;
	background-position: left center;	
}

.neutral2 {
	background: transparent url(../img/layout/quadrat_neutral2.gif) center left no-repeat; 
}


#content.colorBlack h2
{
	color: black !important
}

h1 + h1.heller {
	padding: 0 0 1.2em 1em;
	background:url("../img/layout/quadrat_heller.gif") no-repeat scroll left 0.35em transparent;
}	
h1 + h1.avokal {
	padding: 0 0 1.2em 1em;
	background:url("../img/layout/quadrat_avokal.gif") no-repeat scroll left 0.35em transparent;
}	
/* Sonderklassen fr Produktseiten */

.details a, .details a:link, .details a:active {
	font-size: 0.8em;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #EE7405;
	text-decoration: none;
	margin-left:1.2em;
	outline: none;
}

.details_visited {
	font-size: 0.8em;
	color: black;
	background:#FEDEC5;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #EE7405;
	border-top: 1px solid #EE7405;
	text-decoration: none;
	margin-left:1.2em;
}

.details_heller a, .details_heller a:link, .details_heller a:active {
	font-size: 0.8em;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #009BDE;
	text-decoration: none;
	margin-left:1.2em;
	outline: none;
}

.detailinformationen {
	font-size: 1em;
	padding: 0 0 0.5em 2em;
	background: #F9F9F9;
	border: 1px solid #CCCCCC;	
	margin: 0.5em 0 0 0;
	display: none;
	
}
.icon1{
	background: url("../img/lieferform_icon_01.png") no-repeat 5px 15px;
}
.icon2{
	background: url("../img/lieferform_icon_02.png") no-repeat 5px 15px;
}

.detailinformationen p {
	padding: 0 0 0.5em 0 ;
}

/* Detailinformationen Liste mit Quadrat Avokal oder Heller*/
div#content.content_avokal div.detailinformationen ul{
	list-style-image: url(../img/layout/quadrat_avokal2.gif);
	padding-right: 1.2em;
}
div.detailinformationen ul.listHeller,
div#content.content_heller div.detailinformationen ul{
	list-style-image: url(../img/layout/quadrat_heller2.gif) !important;
	padding-right: 1.2em;
}
div#content.content_heller div.detailinformationen{
	background-color: #C2E5F9;
	border: none;
}
div#content.content_avokal div.detailinformationen{
	background-color: #FEDEC5;
	border: none;
}
#table_heller {
	border: 1px solid #009BDE;
	border-collapse: collapse;
	font-size: 0.65em;
	vertical-align: top;
	width: 95%;
	background-color: #fff;
}
#table_heller td{
	border:1px solid #000;
}

.blau {
	color: #009BDE;
}
.left{
	width: 75px;
}
.right{
	float: right;
}

/* Sonderklassen fr Produktseiten en*/

.under_constraction {
	width:100%;
   	text-align:center;
	padding: 15em 0 ;
}

/* Sonderklassen für Seite News */

.news_l {
	width:15%;
	float:left;
	color: #EE7405;
	font-weight: 900;
}

.news_r {
	width:70%;
	float:left;
}

/* Sonderklassen fr Seite Ansprechpartner */

.foto {
	float: left;	
	width: 15%;
	padding: 0 0 14px 20px;
}
.l_site {
	float: left;
	width: 45%;
	padding: 0.5em 0;
}
	.l_site h2
	{
		font-size: 0.9em;
		padding-bottom: 0.7em;
	}
.r_site {
	float: left;
	width: 35%;
	padding: 0.5em 0;
}
	#content .r_site p.top2.flattersatz {
		padding-right: 0;
	}
.r_site_en {
	float: left;
	width: 40%;
	padding: 0.5em 0;
}
#content p.top2  {
	vertical-align: top;
	padding-left: 0;
}

.float_l60 {
	float: left;
	width: 60%;
}
.ml97{
	margin-left: 97px;
}
.ml313{
	margin-left: 313px;
}
/* Sonderklassen fr Seite Firmenchronik */

.datum_a {
	float: left;
	width:14%;
	vertical-align: top;
	color: #EE7405;
	font-weight: 900;
}
.datum_h {
	float: left;
	width:14%;
	vertical-align: top;
	color: #009BDE;
	font-weight: 900;
}
.datum_h2 {
	vertical-align: top;
	color: #009BDE;
}
.ereignis {
	float: left;
	width:70%;
	vertical-align: top;
}
.border2 {
	border-top: 1px dotted  #A3A3A3;
	clear:both;
}
.space5{
	padding:0 5px;
}

/* Sonderklassen fr Seite Impressum */

.float_l50 {
	float: left;
	width: 50%;
}


/* Sonderklassen fr Seite Partner */

.bild {
	float: left;
	width: 135px;
}
.icon{
	background: url("../img/lieferform_icon.png") no-repeat;
	height: 40px;
}

/* fixed skiplink to head of page */
p#skipToTop
{
	position: fixed;
	bottom: 69px;
	display: block;
	margin: 0;
	padding: 0;
	width: 518px;
	height: 0px;
	background: red;
}
	p#skipToTop a
	{
		position: absolute;
		bottom: 0;
		right: 0;
		overflow: hidden;
		display: block;
		width: 15px;
		height: 15px;
		background: url(../img/button_skipToTop.png) no-repeat;
		border: 1px solid #DDD;
		border-radius: 2px;
		text-indent: -9999px;
	}
	p#skipToTop a:hover
	{
		border-color: #CCC;
	}