/****

*  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%;

 xheight: 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: 10pt;

  height: 22px;

  margin: 0px;

  padding: 0px 0px 0px 20px;

  background-color: #009C80;
  
  color: #FFF;

}

DIV#navlinks P

{

  padding: 2px 0px 0px 0px;

  margin: 0px;

  height: 20px;

  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;

  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;

}

DIV#breadcrumbs

{

  color: #FFF;
  font-size: 11pt;
  font-weight: bold;
  
  margin-top: 2px;
}

/*--- toolbar ---*/

DIV#toolbar
{

  position: absolute; 

  top: 0px;

  right: 0px;

  width: inherit; 
  
  height: 100%; 

  text-align: right; 

  padding: 0px;

  margin: 0px;

  white-space: nowrap;

  z-index: 0;

}

DIV#toolbar *

{

  color: #ffffff;
  font-weight: bold;
  vertical-align:middle;
}

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;

}