﻿/* Allgemein ********************************************************************/
/* KARCHER Gruppe  **************************************************************/
/* 21.11.08 ta ****************************************************************/
/* brain at work GmbH . D-88299 Leutkirch . www.brain-at-work.de **************/

html,body
{
	height: 100%;
}

body /* gilt nur fuer Frontend! da im Backoffice die Container-Styles in den body geladen werden */
{
	margin: 0px;
	padding: 0px;
	font-size: 75%;
	line-height: 150%;
	font-family: Arial, Helvetica, Geneva, sans-serif; 
	color: #000000;
	background-color: #FFFFFF;
}

body.febody /* nur fuer Frontend */
{
background: #FFFFFF url(image/gruppe/w_main_white.gif) repeat-x 0px 49px fixed !important;
background: #FFFFFF url(image/gruppe/w_main_white.gif) repeat-x 0px 49px;
/*		background: #FFFFFF url(image/gruppe/w_ue.jpg) no-repeat top right fixed;  */
/*	background: #FFFFFF url(image/gruppe/w_main.gif) repeat-x 0px 49px fixed; */
}

tbody
{
	font-size: 75%;
}
.febody tbody
{
	font-size: 100%;
}

form, 
input,
textarea,
select
{
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, Geneva, sans-serif; 
	font-size: 100%;
}

h1, 
h2, 
h3, 
h4, 
h5, 
p
{
	margin-top: 0px;
	padding-top: 0px;
}

th p,
td p
{
	margin: 0;
}

h1
{
	font-size: 120%;
	color: #376094;
	border-bottom: 1px solid #376094;
	margin-bottom: 10px;
	padding-top: 15px;
}
h2
{
	font-size: 140%;
	color: #376094;
	margin-bottom: 0px;
}
h3
{
	font-size: 120%;
	color: #376094;
}
h4
{
	font-size: 110%;
	color: #000000;
	margin-bottom: 5px;
	padding-left: 15px;
/*	background: url(image/gruppe/s_bullet_blackarrow.gif) no-repeat 0px 2px; */
	cursor: pointer;
}

h4 a
{
	color: #000000;
	text-decoration: none;
}

h4:hover
{
	color: #376094;
	background: url(image/gruppe/s_bullet_bluearrow.gif) no-repeat 0px 2px;
}


h5   /* kleiner Titel ueber Produkt-h1 */
{
	font-size: 100%;
	color: #376094;
	margin-bottom: 0px;
}
h6   /* Sub-Titel innerhalb Tabelle Technische Daten */
{
	font-size: 100%;
	color: #29558C;
	border-bottom: 1px solid #29558C;
	margin-bottom: 2px;
}

/* Container um alles  ************************************************************************/

div.all
{
	width: 100%;
	min-height: 1200px !important;
	height: auto !important;
	height: 1200px;
	background: url(image/gruppe/w_main.png) repeat-y fixed 0px 49px !important;
	background: url(image/gruppe/w_main.jpg) repeat-y 0px 49px;
}

/* Bilder mit Links, Links fuer versch. Typen ************************************************************************/

img
{
	border-color: #DDD;
	border-style: solid;
}

a /* Link allgemein */
{
	text-decoration: underline;
	color: #000000;
}

.pic label
{
	font-size: 90%;
	margin-top: 0;
	padding-top: 0;
}

.pic label.zoomimagefe
{
	min-height: 20px !important;
	height: auto !important;
	height: 20px;
	text-indent: 45px;
	background: url(image/icon_popup_zoom_1.gif) no-repeat;
	cursor: pointer;
}
.pic label.zoomimagefe:hover
{
	background: url(image/icon_popup_zoom_2.gif) no-repeat;
}

.pic label.hyperlinkfe
{
	min-height: 20px !important;
	height: auto !important;
	height: 20px;
	text-indent: 45px;
	background: url(image/icon_hyperlink_1.gif) no-repeat;
	cursor: pointer;
}
.pic label.hyperlinkfe:hover
{
	background: url(image/icon_hyperlink_2.gif) no-repeat;
}

.pic label.doclinkfe
{
	min-height: 20px !important;
	height: auto !important;
	height: 20px;
	text-indent: 15px;
	background: url(image/icon_download_1.gif) no-repeat;
	cursor: pointer;
}
.pic label.doclinkfe
{
	background: url(image/icon_download_1.gif) no-repeat;
}

/* Content ************************************************************************/

.headcontainer  /* enthaelt Logo, Sprachauswahl, Topnavigation, Kopfgrafiken, Textsuche */
{
	height: 49px;
	width: 100%;
	background: url(image/gruppe/w_top.gif);
	position: fixed !important; 
	position: absolute;
	top: 0px;
	left: 0px;  
	z-index: 1000;
}

.headcontainer img
{
	border: none;
}

div.logocontainer
{
}

.febody .language /* Sprachauswahl */
{
	width: 200px;
	position: absolute;
	right: 20px; 
	top: 0px;
	font-size: 90%;
	color: #FFFFFF;
	text-align: right;
}

.language a
{
	padding: 2px;
	color: #FFFFFF;
	text-decoration: none;
}
.language a:hover
{
	color: #000;
}


.febody .langpopup ul
{
	display: none;
}
.febody ul.langpopup,
.febody ul.langpopup li
{
	display: block;
	padding: 0;
}

.febody ul.langpopup
{
	width: 70px;
/*	height: 90px; */
	background: url(image/gruppe/w_language2.png);
	padding: 10px;
	text-align: left;
	position: absolute;
	right: 70px;
	top: 0px !important; 
	top: 10px;
	z-index: 1000;
	border: 1px solid #000000;
}
.febody ul.langpopup a
{
	color: #000000;
}


.febody .topillu /* Container fuer Einstiegsrafik oben */
{
	margin-left: 5px;
}

.topillu .normarticle
{
	margin-bottom: 15px;
}

div.topnav
{
	display: none;
}

div.topnav ul, 
div.topnav li
{
    display:inline;
    margin: 0px;
    padding: 0px;
}

div.topnav a:hover
{
	color: #000;
}

div.topnav ul a.topnav  /* 1. Ebene - nicht geklickt */
{
	display: block;
	color: #818181;
	text-decoration: none;
	padding: 2px 10px 2px 10px;
	float: left;
}

div.topnav ul a.active  /* 1. Ebene - geklickt */
{
	color: #000;
	background: #F0F0F0;
}

div.topnav ul ul
{
	position: absolute;
	left: 0px;
	top: 20px;
	padding-left: 10px;
	border-bottom: 1px solid #F0F0F0;
	width: 100%;
}

div.topnav ul a.disabled, /* allg. nicht sichtbare/inaktive Kategorien */
div.topnav ul ul a.disabled
{
	text-decoration: line-through;
	font-style: italic;
}

div.topnav ul a.protectclosed, /* PWS-geschuetzter Inhalt */
div.topnav ul ul a.protectclosed
{
/*	background: url(image/icon_protectclosed.gif) no-repeat center right;	
	padding-right: 15px; */
}

div.topnav ul a.protectopen, /* PWS-geschuetzter Inhalt */
div.topnav ul ul a.protectopen
{
/*	background: url(image/icon_protectopen.gif) no-repeat center right;	
	padding-right: 15px; */
}

/* Content *******************************************************************************/

.maincontainer
{
	width: 920px;
	padding-top: 50px;
	padding-bottom: 50px;
	min-height: 300px !important;
	height: auto !important;
	height: 300px;
	position: relative;
	z-index: 500;
}

/* Menue Infobox *********************************************************************/

div.menuinfobox
{
	padding-left: 18px;
}


/* Menue *****************************************************************************/

div.menucontainer
{
	width: 170px;
	margin-top: 33px;
	float: left;
	margin-left: 1px;
}

div.menu
{
	min-height: 200px !important;
	height: auto !important;
	height: 200px;
	padding-top: 10px;
	padding-bottom: 50px;
	background: url(image/gruppe/w_menu.png) no-repeat !important;
	background: url(image/gruppe/w_menu_2.gif) no-repeat;
}

div.menu ul, 
div.menu li
{
	margin: 0px;
	padding: 0px;
	display: inline;
	line-height: 120%;
}

div.menu a.active:hover,   /* allg. Hover-Effekt */
div.menu a.menu:hover
{
	text-decoration: underline;
}

div.menu ul a.menu  /* 1. Ebene sichtbarer Menuepunkt - nicht geklickt */
{
	display: block;
	margin: 15px 15px 0px 33px;
	padding-left: 12px;
	color:#000000;
	text-decoration:none;
	border-left: 4px solid #000000;
}

div.menu ul a.active /* 1. Ebene sichtbarer Menuepunkt - geklickt */
{
	font-weight: bold;
	color: #3A6295;
	border-left: 4px solid #3A6295;
} 

div.menu ul ul a.menu  /* 2. Ebene sichtbarer Menuepunkt - nicht geklickt */
{
	display: block;
	margin: 15px 15px 0px 43px;
	padding-left: 12px;
	color:#000000;
	text-decoration:none;
	border-left: none;
	line-height: 100%;
}

div.menu ul ul a.active /* 2. Ebene sichtbarer Menuepunkt - geklickt */
{
	font-weight: bold;
	color: #3A6295;
	border-left: none;
} 

div.menu ul ul ul a.menu  /* 3. Ebene sichtbarer Menuepunkt - nicht geklickt */
{
	display: block;
	padding-left: 25px;
	margin-bottom: 3px;
	margin-right: 15px;
	font-size: 100%;
	font-weight: bold;
	text-transform: none;
	color:#AAA;
	text-decoration:none;
	line-height: 130%;
	background: #FFF;
	border-left: 15px solid #FFF;
}

div.menu ul ul ul a.active /* 3. Ebene sichtbarer Menuepunkt - geklickt */
{
	font-weight: bold;
	color: #3A6295;
	border-left: none;
} 

div.menu ul a.disabled, /* allg. nicht sichtbare/inaktive Kategorien */
div.menu ul ul a.disabled,
div.menu ul ul ul a.disabled
{
	text-decoration: line-through;
	font-style: italic;
}

div.menu ul a.protectclosed, /* PWS-geschuetzter Inhalt */
div.menu ul ul a.protectclosed,
div.menu ul ul ul a.protectclosed
{
	background: url(image/icon_protectclosed.gif) no-repeat bottom right;	
}
div.menu ul a.protectopen, /* PWS-geschuetzter Inhalt */
div.menu ul ul a.protectopen,
div.menu ul ul ul a.protectopen
{
	background: url(image/icon_protectopen.gif) no-repeat bottom right;	
}
/* Artikelliste ***************************************************************************/

.centercontainer
{
	width: 720px;
	padding-top: 33px;
	float: left;
}

.lightframe /* fuer Wallpaper mit Schattenrand */
{
	background: url(image/gruppe/w_content.png) no-repeat !important;
	background: url(image/gruppe/w_content_2.gif) no-repeat;
	min-height: 220px !important;
	height: auto !important;
	height: 220px;
}

.contentcontainer
{
	position: relative;  /* um catlistcontainer innerhalb zu positionieren */
}

.mainarticle,
.articledetail,
.articlelistcontainer,
/* .catlistcontainer, */
.newsareacontainer,
.articlelisthidden
{
	padding: 0px 25px 0px 25px;
}

.productscrollbox
{
	padding: 0px 25px 0px 25px;
	background: url(image/gruppe/w_content_scrollbox.png) no-repeat !important;
	background: url(image/gruppe/w_content_scrollbox_2.gif) no-repeat;
}

.mainarticle,
.articledetail
{
	padding-bottom: 15px;
	padding-right: 30px;
}

h1.blockheading
{
	border-bottom: none;
	font-size: 110%;
}

.catlistcontainer
{
	width: 685px;
	position: absolute;
	left: 25px !important;
	left: 0px;
	top: 40px;
}

.febody .catlistcontainer .pic  /* Bilder alle rechts oben positionieren */
{
	position: absolute;
	right: 15px;
	top: -25px;
}
.febody .catlistcontainer .img
{
	display: none;
}

.catlistcontainer h1.blockheading,
.productscrollbox  h1.blockheading
{
	margin: 0 20px 10px 0px;
	padding-top: 15px;
	border-bottom: 1px solid #376094;
}

.newsareacontainer
{
	background: url(image/gruppe/w_content_news.png) no-repeat top left !important;
	background: url(image/gruppe/w_content_news_2.gif) no-repeat top left;
/*	padding: 15px 10px 0px 25px; */
	position: absolute;
}

.newsareacontainer h1.blockheading
{
	position: absolute;
	top: 0px;
}

.topnewscontainer
{
	width: 200px;
	margin-right: 35px;
	margin-top: 45px;
/*	margin-left: 25px; */
	float: left;
}
.topnewscontainer .normarticle,
.topnewscontainer .nextcatarticleitem
{
	margin-bottom: 20px;
	min-height: 150px !important;
	height: auto !important;
	height: 150px;
}

.newslistcontainer
{
	width: 220px;
	margin-right: 35px;
	margin-top: 45px;
	float: left;
}
.spotlightcontainer
{
	width: 180px;
	margin-top: 45px;
	float: left;
}

/*.centercontainer .catlistcontainer .normarticle,
.centercontainer .catlistcontainer .nextcatarticleitem, */
.centercontainer .articlelistcontainer .normarticle,
.centercontainer .articlelistcontainer .nextcatarticleitem,
.centercontainer .articlelisthidden .normarticle,
.centercontainer .articlelisthidden .nextcatarticleitem
{
	padding: 10px 0px 0px 0px;
}

.productscrollbox .nextcatarticleitem,  /* horizontal scrollbare Produkte, dynamisch */
.productscrollbox .normarticle
{
    display:block;
	width: 100px;
	float: left;
	margin-bottom: 20px;
}

button.gotoleft
{
	display: block;
	width: 25px;
	height: 80px;
	float: left;
	border: none;
	background: transparent url(image/gruppe/s_button_scroll_left.gif) no-repeat left center;
	cursor: pointer;
}

.rollcontainer
{
	min-height: 100px !important;
	height: auto !important;
	height: 100px;
	width: 600px;
	overflow: hidden; 
	float: left;
}

button.gotoright
{
	display: block;
	width: 25px;
	height: 80px;
	margin-right: 0px;
	float: left;
	border: none;
	background: transparent url(image/gruppe/s_button_scroll_right.gif) no-repeat right center;
	cursor: pointer;
}

.centercontainer .nextcatarticleitem a,
.centercontainer .normarticle a
{
	text-decoration: none;
}

.centercontainer .normarticle a.doclinkfe,
.centercontainer .nextcatarticleitem a.doclinkfe
{
	text-decoration: underline;
}

.articlelistcontainer .nextcatarticleitem a span.morelink
{
/*	display:block; */
	color: #00489F;
	text-decoration: underline;
}

.centercontainer .nextcatarticleitem a:hover,
.centercontainer .normarticle a:hover
{
	text-decoration: underline;
}

/* Block rechts ***************************************************************************/

.infoblock
{
	margin-top: 35px;
	margin-right: 15px;
	width: 160px;
	font-size: 100%;	
	color: #000;
	float: right;
}

.infoblock img
{
	border: none;
}


/* Footer *********************************************************************************/

.footercontainer
{
	height: 30px;
	width: 100%;
	background: #0E2E57 url(image/gruppe/w_footer.gif) repeat-x;
	position: fixed !important; 
	position: relative;
	bottom: 0px;
	left: 0px;
	z-index: 900;
}

.febody .footercontainer a.hyperlinkfe,
.febody .footercontainer a.doclinkfe,
.febody .footercontainer a.articlelinkfe
{
	color: #FFFFFF;
	text-decoration: none;
}
.febody .footercontainer a.hyperlinkfe:hover,
.febody .footercontainer a.doclinkfe:hover,
.febody .footercontainer a.articlelinkfe:hover
{
	text-decoration: underline;
}

.footertext
{
	font-size: 100%;
	color: #FFFFFF;
	text-align: right;
}

.febody .footertext
{
	width: 500px;
	position: absolute;
	right: 20px;
	top: 7px;
}

/* Suche ************************************************************************************/

.search
{}

.febody .search
{
	width: 400px;
	position: absolute;
	left: 20px;
	top: 3px;
	color: #FFFFFF;
}

.search p,
.search form
{
	padding: 0;
	margin: 0;
	display: inline;
}

.searchinput
{
	border:none;
	background: #F0F0F0;
	height: 17px;
	width: 125px;
	color: #000;
	font-size: 11px;
	line-height:20px;
	padding-left: 5px;
}
.searchsubmit
{
	border: none;
	background: transparent url(image/gruppe/w_searchsubmit.gif) no-repeat;
	font-size: 100%;
	color: #FFFFFF;
	width: 17px;
	height: 17px;
	margin: 0px;
	padding: 0px;
	font-size: 0;
	padding-left: 17px;
	cursor: pointer;
}

.searchlastsubmit
{
	color: #FFFFFF;
	border: none;
	background: transparent;
	text-decoration: none;
	font-size: 90%;
	cursor: pointer;
	text-align: left;
}

a.searchresult
{
	display: block;
	text-decoration: none;
}

a.searchresult:hover
{
}

.searchresult dt,
.searchresult dd
{
	margin: 0;
}

.searchresult dt  /* Pfadangabe (nicht klickbar */
{
	border-bottom: 1px solid #999;
	margin-bottom: 5px;
}

.locatorstringnoanchor
{
	padding-left: 5px;
	padding-right: 5px;
	border-left: 4px solid #999999;
}

.bawfoundtext /* exakt zur Suche uebereinstimmende Begriffe */
{
	font-weight: bold;
	text-transform: uppercase;
}

/* Formatvorlagen *********************************************************************************/

.thumb_image,
.zoomimagefe,
.hyperlinkfe,
.doclinkfe,
.dlimagefe
{
	cursor: pointer;
}

.contentcontainer a.doclinkfe:hover,
.contentcontainer a.hyperlinkfe:hover,
.contentcontainer a.articlelinkfe:hover
{
	text-decoration: underline;
	color: #000000;
}

.prodlisttext /* Text neben Thumbnail in Artikelliste Produkte */
{
	width: 350px;
	float: left;
}


/* Formulare, Extras **************************************************************************************/

.formstylekontakt input,
.formstylekontakt select,
.formstylekontakt textarea,
.contactform input,
.contactform select,
.contactform textarea
{
	border-width: 1px;
	color: #000;
	padding-left: 3px;
}

.contactform input.submitform,
.contactform input.deleteform
{
	background: #F0F0F0;
}

.formsubmit,
.linkwithparam
{
	display: block;
	background: url(image/gruppe/w_formsubmit.png) no-repeat;
	width: 120px;
	height: 20px;
	padding-top: 5px;
	text-align: center;
	color: #29558C;
	font-weight: bold;
}

.FormErrorMessageStyle /* eingeblendete Fehlernachricht */
{
	color: #256AD1;
}

input.formerror, /* Klasse des Input bei fehlenden Eingaben */
textarea.formerror,
select.formerror
{
	border: 1px solid #256AD1;
}

.downloadtable td p
{
	white-space:nowrap;
	font-size: 90%;
	margin: 0;
}

.downloadtable a
{
}

.febody .formfieldhidden,
.febody .invisible
{
	display: none;
}

/* ITT Adressenausgabe *********************************************************************/

dl.dealer
{
	background: url(image/i_bullet_ul.gif) no-repeat;
	position: relative;
}

dt, dd
{
	margin-left: 20px;
}

dt
{
	border-bottom: 1px solid #999;
}

dt em
{	color: #000;
	font-style: normal;
	position: absolute;
	right: 10px;
}

/* ITT Bedienungsanleitungen ***************************************************************/

#usermanualselproduct,
#usermanualseldevice
{
	border: 1px solid #CCCCCC;
	width: 200px;
}

/* KARCHER TAB-Reiter   ***************************************************************/

.tabberlive .tabbertabhide 
{
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.febody .tabber  /* nur im Backoffice verwendet */
{
	display: none;
}

.tabber table
{
	margin-bottom: 20px;
}

.tabbertab /* fuer Backoffice */
{
	min-height: 200px !important;
	height: auto !important;
	height: 200px;
	clear: both;
	margin-bottom: 10px;
	background-color: #FFF5F5;
}
.febody .tabbertab
{
	margin: 0;
	background-color: transparent;
}

.tabbertab:before
{
	content: '<<<<< Tab-Reiter >>>>>';
}
.febody .tabbertab:before
{
	content: '';
}

.tabberlive 
{
	width: 682px;
	min-height: 200px !important;
	height: auto !important;
	height: 200px;
	background: url(image/gruppe/w_content_tabber.png) no-repeat !important;
	background: url(image/gruppe/w_content_tabber_2.gif) no-repeat;
	position: relative;
	left: -12px;
	clear: both;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
	margin: 0 13px 0 10px;
	padding: 13px 8px 3px 15px;
	border-bottom: 1px solid #AFBFD4;
}

ul.tabbernav li
{
	list-style: none;
	margin: 0;
	display: inline;
}

ul.tabbernav li a
{
	color: #29558C;
	padding-left: 5px;
	padding-right: 30px;
	text-decoration: none;
}

ul.tabbernav li a:hover
{
	text-decoration: underline;
}

ul.tabbernav li.tabberactive a
{
	border-left: 3px solid #376094;
}

ul.tabbernav li.tabberactive a:hover
{
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab 
{
	padding: 20px 25px 20px 20px;
}

/* If desired, hide the heading since a heading is provided by the tab */

.tabberlive .tabbertab h4
{
	display:none;
}

.tabberlive .tabbertab  ul
{
	list-style-image: url(image/gruppe/s_bullet_li.gif);
	padding: 0;
	margin-left: 14px;
}

.tabberlive .tabbertab li
{
	padding-left: 5px;
	margin-left: 0px;
	margin-bottom: 3px;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab 
{
 height:200px;
 overflow:auto;
}


/** brain-at-work Link *****************************************************************/
.bawlink
{
	display: none;
}

.bawlink a
{
	font-size: 80%;
	color: #666;
	text-decoration: none;
}
