/****
*  wilo3online.css
*  Wilo Select Online 3.x  -  Layout Relaunch May 2006
*  (c) 1998-2006 VSX Vogel Software GmbH. All rights reserved.
***/


/*
  wilogruen           #009C80
  hintergrundgrau     #EBEBEB
  impressumlink-grau  #636363
  standardschrift     #333333
  tabellen-TH-grau    #CACACA
  link hover          #FF0000
*/


/*=== COMMON =================================================================*/

*
{
  margin: 0px; 
  padding: 0px; 
  font-family: Verdana, Arial, Helv;
  font-weight: normal;
  font-size: 10px;
  color: #333333;
  background: transparent;
  overflow: hidden;    /* siehe FIX bei HTML */
  line-height: 16px; 
  /* IE - Spezialitaeten */
	scrollbar-face-color:#EBEBEB;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-3dlight-color:#EBEBEB;
	scrollbar-darkshadow-color:#5a5a5a;
	scrollbar-shadow-color:#5a5a5a;
	scrollbar-arrow-color:#009C82;
	scrollbar-track-color:#EBEBEB;
}

HTML 
{
  overflow: auto;   /* FIX: Sonst werden IFRAMEs voellig unscrollbar, browseruebergreifend */
  height: 100%;
}

BODY
{
  width: 99.99%;
  background-color: #FFFFFF;
  height: 99.99%;
  /*
  overflow-x: hidden;
  overflow-y: visible;
  */
  overflow: visible;
  /* misc browserfixes */
  min-height: 99.99%; 
  font-size: 100.01%; 
  position: relative; 
  text-align: left; 
}

B, STRONG
{
  font-weight: bold;
}

SELECT, INPUT, TEXTAREA 
{ 
  /* browser fix for Safari: font-size: 100%; ist too large in forms  */ 
  font-size: 99%;
  width: 240px;
}

IFRAME
{
  overflow: auto;
  width: 100%;
  height: 100%;
}

INPUT
{
  color: #333333;
  background-color: #FFFFFF;
  height: 1.4em;
  border: 1px solid #CACACA;
}

INPUT.check,
INPUT.radio
{ /* Stoerende oder unpassende Werte des normalen Eingabefeldes ueberschreiben */
  background-color: transparent !important;
  width: 20px !important;
  border: none !important;
}

SELECT
{
  font-size: 10px;
  color: #333333;
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  height: 17px;
}

A
{
  font-size: 7.2pt;
  color: #009C80;
  text-decoration: none;
  background: transparent;
  background-image: url(html/picture/link.gif);
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 12px;
}

A:active,
.active
{
  color: #009C80;  
  text-decoration: none;
}

A:hover,
A.active:hover
{
  color: #FF0000;
  background-image: url(html/picture/link_hover.gif);
}

A.disabled
{
  color: #CACACA !important;  
  text-decoration: none !important;
  background-image: url(html/picture/link_disabled.gif) !important;
}

A.mittelgrau
{
  color: #636363 !important;  
  text-decoration: none !important;
  background-image: url(html/picture/link_grau.gif) !important;
}

A.mittelgrau:hover
{
  color: #FF0000 !important;
  background-image: url(html/picture/link_hover.gif) !important;
}

FORM
{
  background: transparent;
}

IMG
{
  margin: 0px;
  border: 0px;
  padding: 0px; 
}

H1
{
  color: #009C82;
  font-size: 14px;
  padding-bottom: 6px;
}

H2,
A.h2
{
  color: #009C82;
  font-size: 12px;
  padding-bottom: 6px;
}

H3
{
  color: #009C82;
  font-size: 10px;
  font-weight: bold;
}

H4
{
  color: #009C82;
  padding-bottom: 4px;
}

TABLE
{
  width: 200px;        /* weil haeufigster Einsatzfall */
  border: none;
  empty-cells: show;
  border-spacing: 1px;
  table-layout: fixed;
  border-collapse: collapse; 
}

THEAD, TFOOT, TBODY
{
  overflow: visible;    /* Rahmen fuer Tabellenelemente sicherstellen */
  white-space: nowrap;
}

TD
{
  vertical-align: top;
}


/*=== BASIC CLASSES =================================================================*/

IFRAME#cont
{
  background-color: #EBEBEB !important;
}

BODY.content
{
 width: 97%;   /* vermeidet stoerenden X-Scroller im IE */
 height: auto; 
 overflow: hidden;
 background-color: #EBEBEB !important;
} 

BODY.outerframe
{
  overflow: hidden;
}

BODY.innerframe
{
  background-color: #EBEBEB;
  width: 97%;   /* vermeidet stoerenden X-Scroller im IE */
  padding-left: 10px;
  padding-top: 20px;
  height: auto;
  overflow-x: hidden !important;  
  overflow-y: visible !important;  
}

BODY.innerframe H4
{
  font-weight: bold;
}

BODY.innerframe DIV.content
{
  height: auto;
  width: inherit;
  overflow: visible;
}

DIV.margins
{
  width: auto;
  margin: 0px 0px 0px 0px;
  overflow: visible !important;
}

DIV.alignment
{
  background: transparent;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  border: none;
}

DIV.fullwidth
{
  width: 100%;
}

DIV.section
{
  background-color: #EBEBEB;
}

DIV.infotable
{
  padding: 0px !important;
  background-color: #ccede1; 
  z-index: 200;
}

DIV.hsep
{
  height: 1px;
  width: 100%;
  padding: 0px 1px 0px 1px;
  margin: 8px 0px 8px 0px;
  background-color: #FFFFFF;
  color: #FFFFFF;
  overflow: hidden;
}

TABLE.alignment
{
  width: 99.99%;
}

A.no_addon_pic
{
  /* keine AddOn-Images bei Plus/Minus-Links */
  background-image: none !important;
  padding: 0px !important;
}

*.red
{
  color: red !important;
}

/*--- clickable headlines ---*/


A.clickableHeadline
{
  padding: 3px 0px 0px 16px;
  display: block;
  background-image: none;  /* to be overwritten */
  background-position: left top;
}

A.clickableHeadline:hover
{
  background-image: none;  /* to be overwritten */
}

/* in den wkb */
A.clickableHeadline.basketadd        { background-image: url(html/picture/shoppingbasket.gif);       }
A.clickableHeadline.basketadd:hover  { background-image: url(html/picture/shoppingbasket_hover.gif); }


/*=== TOP FRAME =================================================================*/

/* logo-bereich */

DIV#top_first
{
  background-color: #FFFFFF;
  height: 47px;
}

IMG#top_logo
{
  position: absolute;
  margin-top: 5px;
  right: 20px;
  width: 92px;
  height: 36px;
  z-index: 5;
}

IMG#top_apptitle
{
  background: transparent;
  position: absolute;
  top: auto;
  margin-top: 5px;
  left: 80px;
  height: 29px;
  width: 126px;
}

DIV#top_apptitle P
{
  background: transparent;
  color: #009C80;
  font-size: 20pt;
  line-height: 1.2em; 
  font-weight: 300;
}

/* caption mit verlauf */

DIV#top_caption
{
  width: auto;
  height: 40px;
  padding: 0px;
  margin: 0px;
  background-color: #FFFFFF; /* weisser Rand FFFFFF;, kein Rand EBEBEB */
  background-image: url(html/picture/verlauf_bk.gif);
  background-position: left top;
  background-repeat: repeat-x;
  overflow: hidden;
  clip: auto;
}

DIV#top_caption IMG#verlauf
{
  position: absolute;
  right: 0px;
  clip: inherit;
  z-index: 0;  /* by definition */
}

DIV#top_cap_leftcover  /* IE-Fix: verdeckt ggf. nach links ueberstehendes IMG#verlauf */
{
  position: absolute;
  left: -10px;
  width: 10px;
  top: auto;
  height: 21px;
  background-color: #FFFFFF;  /* nicht transparent! */
  z-index: 10;  /* ueber IMG#verlauf */
}

DIV#top_cap_rightcover  /* IE-Fix: verdeckt ggf. nach rechts ueberstehendes Untergrundfarbpixel */
{
  position: absolute;
  right: -10px;
  width: 10px;
  top: auto;
  height: 21px;
  background-color: #FFFFFF;  /* nicht transparent! */
  z-index: 10;  /* ueber IMG#verlauf */
}

DIV#top_cap_text
{
  position: absolute;
  left: auto;
  width: auto;
  top: auto;
  height: 20px;
  z-index: 20;  /* ueber IMG#verlauf */
}

DIV#top_cap_text P
{
  margin: 2px 0px 0px 20px;  
  color: #FFFFFF;
}


/*=== BOTTOM FRAME =================================================================*/


DIV#bott_first
{
  background-color: #FFFFFF;
  height: 100%;  
  background-image: none;
  /*
  background-image: url(html/picture/pumpenintelligenz.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  */
}


DIV#bott_first P
{
  position: relative;
  top: 0px;
  left: 20px;
  margin: 0px;
  height: auto;
  width: auto;
}

IMG#bott_logo
{
  position: absolute;
  bottom: 0px;
  right: 2px;
}

A#bott_impr IMG
{
  position: relative;
  float: left;
  margin: 4px 2px 0px 0px;
}


/*=== WORK AREA =================================================================*/

DIV.content
{
  height: auto;
  width: auto;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: #EBEBEB !important;
  min-height: 100%;   /* non-IE only */
}

DIV.stddiv
{
  padding: 22px 20px 10px 20px;
  border-bottom: 1px solid #FFFFFF;
  height: auto;
  width: auto;
  overflow: visible;
}

DIV.stddiv.last,
DIV.stddiv.noborder,
DIV.content TABLE.alignment DIV.last
{ 
  border-bottom: none !important;   /* keinen unteren Rand beim letzten DIV in der Zelle */
}

P.ie_bkgnd_fix
{ /* behebt ein Darstellungsproblem mit dem IE: Hintergrund wird sonst nicht richtig gezeichnet */
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

DIV#tree_container
{
  width: 100%;
  height: auto;
  float: left;
}

DIV#submit_container
{
  padding-top: 10px;
  text-align: left;
}


/* layouttabelle */

*.content * TD.rd_un {  border-bottom: 1px solid #FFFFFF; }
*.content * TD.rd_re {  border-right: 1px solid #FFFFFF; }
*.content * TD.rd_ob {  border-top: 1px solid #FFFFFF; }



/* debug */

P.punkte
{
  height: 4px;
  width: 400px;
  background-color: red;
}


*.debug
{
  background-color: #FFE0E0 !important;
  border: 1px solid red !important;
}


/* wait */

DIV#wait_container
{
  position: absolute;
  left: 20%;
  top: 40%;
  width: 60%;
  height: auto;
  z-index: 4000;
  overflow: visible;
  visibility: hide;
  visibility: hidden;
}

DIV.waitdiv
{
  width: 100%;
  height: 100%;
  background-color: #EBEBEB;
  overflow: visible;
  border: none !important;
  visibility: hide;
  visibility: hidden;
}

DIV.waitdiv P.blink
{
  width: auto;
  text-align: center;
  margin-top: 0px;
}

DIV.waitdiv P.red
{
  margin-top: 0px !important;
  color: #009C80 !important; 
}

DIV.stddiv SELECT#IS__P_SERIE
{
  width: 100%;        /* wie formulartabelle */
  height: auto;
}

SELECT#D__FREQ
{
  width: 7em;
  height: auto;
}

/*--- formulartabellen ---*/

TABLE.stddiv
{
  width: 100%;        /* weil haeufigster Einsatzfall */
  border: none;
  empty-cells: show;
  border-spacing: 1px;
  table-layout: fixed;
  border-collapse: collapse; 
}

TABLE.stddiv TH.sizing,
TABLE.stddiv TD.sizing
{
  font-size: 1px; 
  height: 1px; 
  overflow: hidden; 
}

TABLE.stddiv.werte     /* nicht mit wertetabelle verwechseln */
{
  border: 1px solid #C0C0C0 !important;
}

TABLE.stddiv TD
{
  border: none;
  vertical-align: top;
  padding-top: 3px;
  text-align: left;
  white-space: nowrap;
  padding-right: 5px;
}

/* Breiten fuer reduziertes Layout (lbl,edt) */
TABLE.stddiv TH.lbl2  { width: 40%;  text-align: right; white-space: normal; } /* HEAD */
TABLE.stddiv TD.lbl2  { width: 40%;  text-align: right; white-space: normal; }
TABLE.stddiv TD.edt2  { width: 60%;  padding-top: 0px; }
TABLE.stddiv TD.txt2  { width: 60%;  }

/* Breiten fuer normales Layout (lbl,edt,dim) */
TABLE.stddiv TH.lbl3  { width: 56%;  text-align: right; white-space: normal; } /* HEAD */
TABLE.stddiv TD.lbl3  { width: 56%;  text-align: right; white-space: normal; }
TABLE.stddiv TD.edt3  { width: 36%;  padding-top: 0px; }
TABLE.stddiv TD.txt3  { width: 36%;  }
TABLE.stddiv TD.dim3  { width: 8%;   white-space: normal; }

/* Breiten fuer doppeltes Layout (lbl,edt,dim,sep,lbl,edt,dim) */
TABLE.stddiv TH.lbl6  { width: 25%;   text-align: right; white-space: normal; } /* HEAD */
TABLE.stddiv TD.lbl6  { width: 25%;   text-align: right; white-space: normal; }
TABLE.stddiv TD.edt6  { width: 14.5%; padding-top: 0px; }
TABLE.stddiv TD.txt6  { width: 14.5%; }
TABLE.stddiv TD.dim6  { width: 10%;   white-space: normal; }
TABLE.stddiv TD.sep6  { width: 1%; }

/* Spezialfaelle */
TABLE.stddiv TD.edtXfull  { width: 100%; padding-top: 0px; }
TABLE.stddiv TD.edt6col6  { width: 75%; padding-top: 0px; }


/* Zelleninhalte */
TABLE.stddiv SELECT,
TABLE.stddiv INPUT
{  
  width: 95%; 
}

TABLE.stddiv INPUT.button 
{
  width: 120px;
}

/*--- itemlist ---*/

TABLE.itemlist
{
  width: 99%;
  white-space: nowrap;
  border-collapse: collapse; 
  border-spacing: 1px;   
  table-layout: auto;  /* fixed bringt's hier nicht */  
  empty-cells: show;
}

.itemlist TABLE
{
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 1px;
  border-style: none;
}

.itemlist THEAD
{
}

.itemlist TBODY
{
  background-color: #FFFFFF;
}

.itemlist TR
{
  background-color: #EBEBEB;
  white-space: nowrap;
}

.itemlist TR.Odd
{
  /* background-color: #ccede1; */
}

.itemlist TH
{
  text-align: left;
  background-color: #CACACA;
  color: #333333;  /* Bug 747: war #FFFFFF */
  padding: 1px 8px 4px 8px;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid #FFFFFF;  
}

.itemlist TD
{
  background: #ebebeb;
  padding: 4px 8px 4px 8px;
  margin: 1px;
  white-space: nowrap;
  border-bottom: 1px solid #FFFFFF;
}

.itemlist TH.lineicon,
.itemlist TD.lineicon
{
  padding: 2px 2px 0px 4px !important;  /* etwas weniger padding um das Bild herum */
}

.itemlist A
{
  font-weight: bold;
}

.itemlist TH A,
.itemlist TD A.bildlink
{
  /* keine AddOn-pics bei Tabellensortierlinks */
  background-image: none !important;
  padding: 0px !important;
}

.itemlist TD IMG
{
  width: 12px;
  height: 17px;
}

.itemlist TH IMG.sort_both
{
  /* Variante 7x9 */
  width: 7px;
  height: 9px;
}

.itemlist TH IMG.sort_both_9x11
{
  /* Variante 9x11 */
  width: 9px;
  height: 11px;
  position: relative;
  top: 2px;
}

.itemlist TD INPUT,
.itemlist TD SELECT
{
  width: 80%;
}



/*--- detailmenu ---*/


DIV.detailmenu 
{
  margin-bottom: 16px;
}

DIV.detailmenu A.menulink
{
  background-image: url(html/picture/pfeil_grau.gif);
  background-position: left;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 10px;
  margin: 5px 0px 0px 0px;
  color: #333333 !important;
  display: block;
}

DIV.detailmenu A.active
{
  background-image: url(html/picture/pfeil_gruen.gif) !important;
  color: #009C80 !important;
}

DIV.detailmenu A.menulink:hover,
DIV.detailmenu A.active:hover
{
  background-image: url(html/picture/pfeil_hover.gif) !important;
  color: #FF0000 !important;
}

/*--- layouttabelle innerframe ---*/

BODY.innerframe TABLE.stddiv
{ 
  width: auto;
  border: none;
}

BODY.innerframe TABLE.stddiv TD
{
  border: none;
}

BODY.innerframe TABLE.stddiv *.key
{
  font-weight: bold;
}


BODY.innerframe TABLE.projectform
{ 
  width: 500px;
  border: none;
}

/*--- wertetabelle ---*/

TABLE.wertetabelle,
TABLE.wertetabelle TABLE.wertetabelle
{ 
  width: 100px;
  overflow: visible;
  border: 1px solid #CACACA;
}

TABLE.wertetabelle TD,
TABLE.layout TABLE.wertetabelle TD
{
  background-color: #EBEBEB;
  border-bottom: 1px solid #FFFFFF;
  overflow: visible;
  padding-left: 4px;
  padding-right: 4px;
}

TABLE.wertetabelle TH,
TABLE.layout TABLE.wertetabelle TH
{
  background-color: #CACACA;
  color: #000000;   /* FIX #: Text schwarz statt weiss / 21.09.06 Gey */
  border-right: 1px solid #FFFFFF;
  font-weight: bold;
  padding-left: 4px;
  padding-right: 4px;
}

TABLE.wertetabelle *.key,
SPAN.key
{
  font-weight: bold;
  text-align: right;
}

TABLE.wertetabelle *.val,
SPAN.val
{
}

/*--- rechts neben Seitenueberschrift befindliche Links ---*/


DIV#suchneu_container
{
  position: static; 
  float: none;
  top: auto;
  left: 0px;
  margin-top: 1em;
}

DIV#suchneu_container  A
{
  padding-left: 0px;
}

/* debug */

DIV#dbg_time
{
  color: #EBEBEB;
  height: 1.2em;
  padding: 0px;
  margin: 0px 0px 0px 20px;
  border: none;
  width: 200px;
}

/*--- breadcrumbs-Navigation ---*/

DIV#navlinks
{ /* breadcrumbs-navigation */
  position: relative;
  top: 0px;
  left: 0px;
  width: inherit; 
  clear: both;
  font-size: 8pt;
  height: 20px;
  margin: 0px;
  padding: 1px 0px 0px 20px;
  background-color: #009C80;
  overflow: hidden;
}

DIV#navlinks P
{
  padding: 2px 0px 0px 0px;
  margin: 0px;
  height: 16px;
  background-color: #009C80;
  color: #FFFFFF;
}

DIV#navlinks A, 
DIV#navlinks A:visited, 
DIV#navlinks A:link,
DIV#navlinks A:focus
{
  color: #FFFFFF;
  background-color: transparent;
  background-image : url(html/picture/link_inverted.gif);
  padding-right: 18px !important;
  margin-right: 4px !important;
  /* inherit other layout and background completely from standard A tag */
}

DIV#navlinks A:active,
DIV#navlinks A.active,
DIV#navlinks A.active:visited
{
  color: #FFFFFF !important;
  background-color: #009C80 !important;
  text-decoration: none;
}

DIV#navlinks A:hover,
DIV#navlinks A.active:hover
{
  color: #FF0000 !important;
  text-decoration: none;
  background-image: url(html/picture/link_hover.gif) !important;
}

DIV#breadcrumbs 
{
  position: absolute;
  z-index: 10;
}


/*--- toolbar ---*/

DIV#toolbar
{
  position: absolute; 
  top: 0px;
  right: 0px;
  width: inherit; 
  height: 100%; 
  text-align: right; 
  color: #ffffff;
  padding: 0px;
  margin: 0px;
  white-space: nowrap;
  z-index: 0;
}

DIV#toolbar  DIV.tool
{
  float: right;
  width: auto;
  height: 100%;
  color: #FFFFFF;
  background: transparent;
  background-image: none;  /* to be overwritten */
  background-position: left top;
  background-repeat: no-repeat;
  padding: 1px 2px 0px 2px;  /* keep space for backkgnd-pic on the left */
  margin: 0px;
  white-space: nowrap;
}

DIV#toolbar  DIV.trenner
{
  float: right;
  width: 8px;
  height: 100%;
  color: #FFFFFF;
  background: transparent;
  background-image: url(html/picture/trenner-vert.gif);
  background-position: center top;
  background-repeat: repeat-y;
  padding: 0px;
  margin: 0px;
}

DIV#toolbar  A.img
{
  color: #FFFFFF;
  background: transparent;
  background-image: none;  /* to be overwritten */
  background-position: left top;
  background-repeat: no-repeat;
  white-space: nowrap;
  display: block;
  margin: 0px !important;
  height: 20px;
  /* Folgendes width + overflow dient als Ersatz fuer "width: auto;"
     Der IE macht bei auto gleich 100% Breite daraus - das wollen nicht 
     ACHTUNG: Nach Moeglichkeit so belassen, ansonsten unbedingt im IE und im FF testen!  */
  width: 1px;            
  overflow: visible;     
}

DIV#toolbar  IMG
{
  border: none;
  margin: 0px;
  padding: 0px;
}

DIV#toolbar  SELECT
{
  margin: 0px;
  width: 155px;
}

/* overwrite Tool Pics */
DIV#toolbar A#tool_info 
{ 
  background-image: url(html/picture/tool_info.gif) !important; 
  padding: 0px 0px 0px 30px !important;
}

DIV#toolbar A#tool_wkb  
{ 
  background-image: url(html/picture/tool_wkb.gif) !important; 
  padding: 0px 0px 0px 20px !important;
  width: inherit;       /* ACHTUNG: Nach Moeglichkeit so belassen, ansonsten unbedingt im IE und im FF testen */
}

DIV.tool_tip
{
  position: absolute;
  top: 92px;
  right: 30px;
  width: auto;
  height: auto;
  border: 1px solid #EBEBEB;
  padding: 5px;
  background-color: #009C80;
  color: #FFFFFF;
  visibility: hide;  
  visibility: hidden;
}

DIV#tip_info { width: 200px;  right: 17px }
DIV#tip_wkb  { width: 380px;  right: 58px }

TABLE.tip_info 
{
  width: 100%;
}

TABLE.tip_info *
{
  color: #FFFFFF;
}

TABLE.tip_info TH
{
  font-weight: bold;
}


/*--- Tabellenlayout hat einen Vorteil - es geht fix ---*/

TABLE.layout  /* pun intended */
{ 
  width: 100%;
  height: 100%;
  border: none;
  empty-cells: show;
  border-spacing: 1px;
  table-layout: fixed;
  border-collapse: collapse; 
}

TABLE.layout  TR TD.layout
{ 
  background-repeat: no-repeat;  
  width: auto;
  height: auto;
  padding: 0px;
}


/* CSS-Klasse fuer bestimmte Zellen: Erweiterung fuer Bug #6730: LCC nicht immer inklusive Inv.Cost */

TD.lccInvCostMit    { /*default*/ }
TD.lccInvCostOhne   { background-color: #e0e0e0; }
TD.lccInvCostUnbek  { background-color: #e0e0e0; }


/* EOF */