/* ==================================================================
Henkel "Indermil" - Allgemeines Stylesheet fuer den Siteaufbau
Datei: eci_layout.css
Media: all

Datum: 13.12.2007
Autor:	Agentur Grintsch
Internet: www.grintsch.com

Inhalt:
CSS-Anweisungen für den Site der Website www.indermil.com
Aufbau:
1. Allgemeine Selektoren
	1.1 Inline-Elemente
	1.2 Formular-Elemente
	1.3 Block-Elemente
	1.4 Klassen

2. Layoutbereiche
	2.1 Site-Wrapper
	2.2 Headbereich
	2.3 Navigation
	2.4 Contentbereich
	2.5 Infobereich

3. Spezielle Bereiche
==================================================================== */
/* ======================================================

	=1. Allgemeine Selektoren

========================================================= */
* {
	padding: 0px;
	margin: 0px;
}

html {
	width: 100%;
	height: 101%;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;

	height: 100%;
	background: url(imgs/bgs/bg_body.gif) #ffffff repeat-x;
}

/* ======================================================
	=1.1 Inline-Elemente
========================================================= */
a {
	color: #006ab3;
	text-decoration: none;
}

a:hover,
a:focus,
a:active { text-decoration: underline; }

h2 a:hover,
h2 a:focus,
h2 a:active { text-decoration: none; }

img { border: 0px; }

strong a { color: #006ab3; }

/* ======================================================
	=1.2 Formular-Elemente
========================================================= */
fieldset { border: none; }

legend {
	font-size: 11px;
	font-weight: bold;
	color: #006ab3;
}

label {
	font-size: 9px;
	color: #006ab3;
}

input.input_text {
	font-size: 10px;

	padding: 1px 10px;
	border: 1px solid #ffffff;
}

/* ======================================================
	=Block-Elemente
========================================================= */
	h1 {
		font-size: 20px;
		color: #006ab3;

		margin: 0 15px 10px 15px;
	}

	h2 {
		font-size: 12px;
		color: #006ab3;
	}

		h2.headline_colored {
			padding: 2px 0 2px 15px;
			margin-bottom: 15px;
		}

	h3 {
		font-size: 10px;
		color: #006ab3;
		line-height: 16px;

		margin: 0 15px;
	}

	p {
		line-height: 16px;

		margin: 0 0 0 15px;
	}

	p.img_link_download { text-align: center; }

	p.link_download {
		background: url(imgs/bgs/bg_download_pdf.gif) #e1ecf2 no-repeat;
		padding: 2px 5px 2px 20px;
		margin-top: 5px;
	}

		p.link_download a {
			color: #006ab3;
			font-weight: bold;
		}


	p.link_download_zip {
		background: url(imgs/bgs/bg_download_zip.gif) #e1ecf2 no-repeat;
		padding: 2px 5px 2px 20px;
		margin-top: 5px;
	}

		p.link_download_zip a {
			color: #006ab3;
			font-weight: bold;
		}

	p.link_download_mail {
		background: url(imgs/bgs/bg_download_mail.gif) #e1ecf2 no-repeat;
		padding: 2px 5px 2px 20px;
		margin-top: 5px;
	}

		p.link_download_mail a {
			color: #006ab3;
			font-weight: bold;
		}

/* ======================================================
	=Klassen
========================================================= */
.clearer {
	clear: both;

	font-size: 0px;

	width: 0;
	height: 0px;
	line-height: 0px;
}

.hidden {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0;
	height: 0;
	overflow: hidden;
	display: inline;
}

.bg_indermil { background-color: #e1ecf2; }

.bg_regular { background-color: #c7d5ea; }

.bg_xsmall { background-color: #fdde9c; }

.bg_xcontrol { background-color: #f29978; }

.bg_xfine { background-color: #8acabe; }

span.link { font-size: 9px; }

.footnote { font-size: 9px; }

.source {
	font-size: 9px;
	font-style: italic;

	margin-top: 20px;
}

.see_me {
	color: #AE2319;
}

.space {
	line-height: 10px;
}

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

	=2. Layoutbereiche

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

	=2.1 Site-Wrapper

========================================================= */
#wrapperPage {
	min-height: 100%;
	background: url(imgs/bgs/bg_wrapperPage.gif) repeat-y;

	width: 957px;
	padding: 22px 0 0 19px;
}

* #wrapperPage {
	height: 100%;
}

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

	=2.2 Header (Search, recommend, print)

========================================================= */
#wrapperHeader {
	font-size: 10px;

	height: 28px;
	width: 936px;
	background-color: #e1ecf2;
	border: 1px solid #dae8f1;
	margin: 0 0 10px 0;
}

	#wrapperHeader form.box_search {
		float: left;
		margin: 5px 0 0 0;
		padding-right: 168px;
		padding-left: 192px;
	}

	* html #wrapperHeader form.box_search { margin-top: 4px; }

		#wrapperHeader form.box_search input.input_text {
			width: 110px;
			padding: 1px 2px;
		}

		* html #wrapperHeader form.box_search input.input_text {
			float: left;
			margin-top: 2px;
		}

		#wrapperHeader form.box_search input.input_submit {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 10px;

			background-color: #ffffff;
			padding: 1px 2px;
			border: 1px solid #006ab3;
		}

		* html #wrapperHeader form.box_search input.input_submit {
			padding-bottom: 0px;
			margin-top: 1px;
		}

	#wrapperHeader a {
		display: block;
		float: left;

		color: #606567;

		background: no-repeat 0 2px;
		padding-left: 20px;
		margin: 8px 0 0 45px;
	}

		#wrapperHeader a.box_recommend { background-image: url(imgs/icons/icon_recommend.gif); }

		#wrapperHeader a.box_print {
			background-image: url(imgs/icons/icon_print.gif);
			margin-left: 25px;
		}

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

	=2.3 Navigation

========================================================= */
#wrapperNavigation {
	float: left;

	width: 182px;

	margin: 0 0 10px 0;
}

	#wrapperNavigation .box_logo {
		background-color: #e1ecf2;
		margin-bottom: 10px;
	}

		#wrapperNavigation .box_logo img {
			margin: 38px 0 38px 18px;
		}

	#wrapperNavigation .box_navigation {
		background-color: #76b3e9;
		border: 1px solid #76b3e9;
	}

		#wrapperNavigation .box_navigation ul {
			color: #ffffff;
			list-style-type: none;

			padding: 10px 0 5px 0;
		}

			#wrapperNavigation .box_navigation ul li {
				width: 100%;
				margin: 0 0 10px -4px;
			}

			* html #wrapperNavigation .box_navigation ul li { margin: 0 0 9px 0; }

				#wrapperNavigation .box_navigation ul li a {
					display: block;

					font-family:  Verdana, Arial,Tahoma, sans-serif;
					font-size: 9px;
					color: #ffffff;
					text-decoration: none;
					text-transform: uppercase;
					letter-spacing: -1px;

					width: 160px;
					background: url(imgs/bgs/bg_navi_a.gif) no-repeat 0 5px;
					margin-left: 10px;
					padding-left: 10px;
				}

				* html #wrapperNavigation .box_navigation ul li a { margin-left: 5px; }

				#wrapperNavigation .box_navigation ul li a:hover,
				#wrapperNavigation .box_navigation ul li a:focus,
				#wrapperNavigation .box_navigation ul li a:active {
					color: #fe0000;
					background-image: url(imgs/bgs/bg_navi_a_over.gif);
				}

				#wrapperNavigation .box_navigation ul li a.active {
					color: #fe0000;
					background-image: url(imgs/bgs/bg_navi_a_over.gif);
				}

	#wrapperNavigation .box_content {
		background-color: #e1ecf2;
		margin-top: 10px;
	}

		#wrapperNavigation .box_content p { margin-left: 5px; }

		#wrapperNavigation .box_content p.link_download {
			padding-right: 0;
			margin-left: 0;
		}

			#wrapperNavigation .box_content a {
				color: #006ab3;
				font-weight: bold;
			}


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

	=2.4 Content

========================================================= */
#wrapperContent {
	float: left;

	min-height: 100px;
	width: 567px;
	background-color: #ffffff;
	margin: 0 0 10px 0;
}

	#wrapperContent ul {
		line-height: 16px;
		list-style-type: none;

		margin: 0 0 10px 15px;	}

		#wrapperContent ul li {
			background: url(imgs/bgs/bg_li.gif) no-repeat 0 5px;
			padding-left: 15px;
		}

	#wrapperContent .box_img_mood { margin: 0 0 0 10px; }

	#wrapperContent .box_content_full,
	#wrapperContent .tx-indexedsearch-res {
		width: 548px;
		margin: 15px 0 0 10px;
	}

	#wrapperContent .tx-indexedsearch-res table {
		font-size: 10px;
		margin: 0 15px 10px 15px;
	}

	#wrapperContent .tx-indexedsearch-whatis,
	#wrapperContent .tx-indexedsearch-browsebox { margin: 10px 10px 5px 10px; }

	#wrapperContent td.title a {
		font-size: 11px;
		font-weight: bold;
	}

	#wrapperContent ul.browsebox {
		list-style-type: none;
		height: 20px;
	}

		#wrapperContent ul.browsebox li {
			float: left;

			background-image: none;
			padding: 5px 15px 0 0;
		}

	#wrapperContent .box_content_half {
		float: left;

		width: 264px;
		margin: 15px 0 0 10px;
	}

	* html #wrapperContent .box_content_half {
		margin-right: 5px;
		margin-left: 5px;
	}

	#wrapperContent .box_content_third {
		float: left;

		width: 175px;
		margin: 20px 0 0 10px;
	}

	* html #wrapperContent .box_content_third {
		margin-right: 5px;
		margin-left: 5px;
	}


		#wrapperContent .box_headline_click {
			position: relative;

			height: 18px;
			background: url(imgs/bgs/bg_hl_click.gif) repeat-y;
			margin-bottom: 15px;

			cursor: pointer;
		}

			#wrapperContent .box_headline_click h2 {
				position: absolute;
				top: 2px;
				left: 15px;
				z-index: 1;
			}

			#wrapperContent .box_headline_click a {
				display: block;
				position: absolute;
				top: 0;

				width: 66px;
				height: 18px;
				background: url(imgs/bgs/bg_hl_click_ahrefs.gif) repeat;
			}

			#wrapperContent .box_headline_click a.click_regular { left: 0px; z-index: 10; } /*-15*/

			#wrapperContent .box_headline_click a.click_xsmall { left: 66px; z-index: 10;}/*51px*/

			#wrapperContent .box_headline_click a.click_xcontrol { left: 132px; z-index: 10; }/*117px*/

			#wrapperContent .box_headline_click a.click_xfine { left: 198px; z-index: 10; }/*183px*/

				#wrapperContent .box_headline_click a span {
					position: absolute;
					left: -1000px;
					top: -1000px;
					width: 0;
					height: 0;
					overflow: hidden;
					display: inline;
				}

	#wrapperContent .box_product_familiy_click {
	 	padding-left: 54px;
		margin: 20px 0 10px 0;
	}

		#wrapperContent .box_product_familiy_click a {
			display: block;
			float: left;

			color: #006ab3;
			font-weight: bold;
			text-align: center;

			width: 70px;
			padding: 2px 0 3px 0;
		}

		#wrapperContent .box_product_familiy_click a span.link { color: #fe0000; }

		#wrapperContent .box_product_familiy_click a:hover,
		#wrapperContent .box_product_familiy_click a:focus,
		#wrapperContent .box_product_familiy_click a:active { text-decoration: none; }


/* ======================================================
	=2.4.1 Empfehlungsformular
========================================================= */
#wrapperContent form {
	width: 500px;
	margin: 25px 0 0 15px;
}

	#wrapperContent form h3 { margin-left: 10px; }

	#wrapperContent form h4 {
		font-size: 10px;
		color: #006ab3;

		margin: 15px 2px 5px 10px;
	}

	#wrapperContent form p { margin-left: 10px; }

	#wrapperContent form br { clear: both; }

	#wrapperContent form label,
	#wrapperContent form label.lbl_error {
		float: left;

		color: #006ab3;

		width: 190px;
		margin: 1px 2px 1px 10px;
		border-bottom: 1px solid #006ab3;
		padding: 1px 0px 2px 0px;
	}

	#wrapperContent form label.lbl_error {
		font-weight: bold;
		color: #AE2319;
	}

	* html #wrapperContent form label,
	* html #wrapperContent form label.lbl_error {
		margin-top: 3px;
		margin-bottom: 2px;
	}

	#wrapperContent form input.inpt_txt,
	#wrapperContent form input.inpt_txt_error {
		float: left;
		width: 240px;
		background-color: #e1ecf2;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		margin-bottom: 2px;
		border: none;
		border-bottom: 1px solid #006ab3;
		padding: 2px 1px;
	}

	#wrapperContent form input.inpt_txt_error {
		background-color: #f7afaa;
		border-bottom: 1px solid #AE2319;
	}

	* html #wrapperContent form input.inpt_txt,
	* html #wrapperContent form input.inpt_txt_error {
		height: 19px;
		padding: 2px 1px 2px 1px;
	}

	#wrapperContent form textarea {
		width: 431px;
		height: 100px;
		background-color: #e1ecf2;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		margin: 0px 0px 10px 10px;
		border: none;
		border-bottom: 1px solid #006ab3;
	}

	* html #wrapperContent form textarea { margin-left: -5px; }

	#wrapperContent form select,
	#wrapperContent form select.slct_error {
		float: left;
		width: 240px;
		background-color: #e1ecf2;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		margin-bottom: 2px;
		border: none;
		border-bottom: 1px solid #006ab3;
		padding: 1px 1px 0 1px;
	}

	#wrapperContent form select.slct_error {
		background-color: #f7afaa;
		border-bottom: 1px solid #AE2319;
	}

	* html 	#wrapperContent form select,
	* html 	#wrapperContent form select.slct_error {
		padding: 0px 1px;
	}

	#wrapperContent form input.inpt_radio {
		float: left;
		width: 20px;
		background-color: #e1ecf2;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		margin-top: 4px;
		border: none;
		border-bottom: 1px solid #006ab3;
	}

	* html #wrapperContent form input.inpt_radio {
		font-size: 9px;
		margin-top: -1px;
	}

	#wrapperContent form input.inpt_chck,
	#wrapperContent form input.inpt_chck_error {
		float: left;
		width: 20px;
		background-color: #e1ecf2;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		margin: 1px 2px 1px 10px;
		border: none;
		border-bottom: 1px solid #006ab3;
	}

	* html #wrapperContent form input.inpt_chck,
	* html #wrapperContent form input.inpt_chck_error {
		font-size: 9px;
		margin-top: -1px;
	}

	#wrapperContent form input.inpt_chck_error {
		background-color: #f7afaa;
		border-bottom: 1px solid #AE2319;
	}

	#wrapperContent form input.but_submit {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 11px;

		background-color: #e1ecf2;
		padding: 1px 2px;
		border: 1px solid #006ab3;
		margin-left: 205px;
	}


/* ======================================================
	=2.4.2 Distrubutorenformular
========================================================= */
	#wrapperContent div.box_distri_logo {
		float: left;
		display: inline;

		width: 110px;
		margin: 0px 10px 0px 20px;
	}


	#wrapperContent div.box_distri_adress {
		float: left;

		width: 315px;
		margin: 0 0 0 10px;
	}

		#wrapperContent div.box_distri_adress p { margin-left: 0px; }
/* ======================================================

	=2.5 Info

========================================================= */
#wrapperInfo {
	float: left;

	min-height: 100px;
	width: 188px;
	margin: 0 0 10px 0;
}

	#wrapperInfo .box_content { margin: 0 0 10px 0; }

		#wrapperInfo .box_headline_click {
			position: relative;

			height: 18px;
			background: url(imgs/bgs/bg_info_hl_click.gif) repeat-y;
			margin-bottom: 10px;

			cursor: pointer;
		}

			#wrapperInfo .box_headline_click h2 {
				position: absolute;
				top: 2px;
				left: 15px;
				z-index: 1;
			}

			#wrapperInfo .box_headline_click a {
				display: block;
				position: absolute;
				top: 0;

				width: 47px;
				height: 18px;
				background: url(imgs/bgs/bg_hl_click_ahrefs.gif) repeat;
			}

			#wrapperInfo .box_headline_click a.click_regular { left: 0px; z-index: 10; }

			#wrapperInfo .box_headline_click a.click_xsmall { left: 47px; z-index: 10;}

			#wrapperInfo .box_headline_click a.click_xcontrol { left: 84px; z-index: 10; }

			#wrapperInfo .box_headline_click a.click_xfine { left: 131px; z-index: 10; }

				#wrapperInfo .box_headline_click a span {
					position: absolute;
					left: -1000px;
					top: -1000px;
					width: 0;
					height: 0;
					overflow: hidden;
					display: inline;
				}

	#wrapperInfo .box_applicators {
		xxxbackground-color: #76b3e9;
		margin-bottom: 10px;
	}

		#wrapperInfo .box_applicators p {
			color: #006ab3;
			font-weight: bold;
			line-height: 13px;

			margin: 0;
		}

		#wrapperInfo .box_applicators p.title_image { background-color: #76b3e9; }

		#wrapperInfo .box_applicators p a {
			display: block;

			color: #006ab3;

			padding: 7px 10px 15px 10px;
		}

		#wrapperInfo .box_applicators p a:hover,
		#wrapperInfo .box_applicators p a:focus,
		#wrapperInfo .box_applicators p a:active { text-decoration: none; }

		#wrapperInfo .box_applicators p a span.product { color: #000000; }

		#wrapperInfo .box_applicators p a:hover span.product,
		#wrapperInfo .box_applicators p a:focus span.product,
		#wrapperInfo .box_applicators p a:active span.product { text-decoration: underline; }

		#wrapperInfo .box_applicators p a span.link { color: #006ab3; }

	#wrapperInfo .box_login {
		position: relative;

		background-color: #e1ecf2;
		padding: 20px 20px 27px 20px;
	}

		#wrapperInfo .box_login input.input_text {
			width: 110px;
			margin: 10px 0 2px 0;
		}

		#wrapperInfo .box_login input.input_image {
/*			position: absolute;
			top: 88px;
			left: 160px; */
			float: right;
		}

	#wrapperInfo .box_logout {
		background-color: #e1ecf2;
		padding: 20px 10px 30px 20px;
	}

		#wrapperInfo .box_logout p {
			color: #006ab3;

			margin: 0 0 10px 0;
		}

		#wrapperInfo .box_logout input.input_submit {
			font-size: 10px;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;

			width: 125px;
			background-color: #006ab3;
			border: 1px solid #006ab3;
			margin-right: 8px;
		}

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

	=2.6 Footer

========================================================= */
#wrapperFooter {
	clear: both;

	font-size: 9px;

	height: 30px;
	width: 938px;
	border-top: 30px solid #ffffff;
	border-bottom: 10px solid #ffffff;
}

	#wrapperFooter a {
		display: block;
		float: left;

		color: #000000;

		margin: 5px 0 0 30px;
	}

		#wrapperFooter a.logo { margin: 0 0 0 50px; }

		* html #wrapperFooter a.logo { margin-left: 25px; }