/* Allgemeines */

body { border:0px; margin:0px; padding:0px; width:100%; height:100%; background:#ffffff url('s_hoverbgs.png') -20px 0px no-repeat; color:#000000; overflow:hidden }

body { font-size:0.8em }

body, h1 { font-family:'Lucida Grande', Verdana, Tahoma, sans-serif; font-weight:normal; text-decoration:none; 
           line-height:1.4em }

.invisible { display:none !important }
img { border:none }

#aroundall { min-width:700px; min-height:330px; position:absolute; width:100%; height:100%; background:url(s_titleicons.png) -1000px -200px no-repeat }

/* Oberer Bereich, der auch Menues enthaelt - geht von oben bis 40% der Seitenhoehe */
#topbg { height:40%; min-height:150px; left:0px; top:0px; width:100%; position:relative; background:url('s_topbg.png') bottom repeat-x }

/* Unterkante des oberen Bereichs: von unten ab 6 Pixel hoch. Position und Groesse entspricht genau dem Schatten */
#intopbg2 { bottom:0px; height:6px; width:100%; left:0px; position:absolute }

/* Transparente Bereiche, die dafuer sorgen, dass Menue verschwindet, wenn man mit der Maus drueberfaehrt */
#topbgblocker { position:absolute; width:100%; left:0px; bottom:166px; height:112px; z-index:20 }

#bottombgblocker { clear:both; position:relative; height:200px; z-index:60; display:none }
#bottombgblocker:hover { display:none }

#intopbg2:hover #bottombgblocker { display:block }



/* Gradienten-Hintergrund eines Bereichs (Titel oder Rubrik). Wird nur angezeigt, wenn Maus ueber Bereich */
.hoverbg { position:absolute; top:-232px; height:601px; display:none; width:100%; left:0px; background:url('s_hoverbgs.png') 0 0 repeat-x }
/* Genauso gross wie Gradienten-Hintergrund, aber transparent und immer angezeigt, wenn Maus auf irgendeinem (auch anderem) Bereich */
.hoverbgrepl { position:absolute; top:-232px; height:601px; display:none; width:100%; left:0px }

/* Alles was innerhalb von #intopbg ist ist "Menue-aktiver Bereich", d.h. wenn Maus drueber, wird Menue angezeigt */
/* Folgendes sorgt also dafuer, dass hoverbgrepls immer angezeigt werden, wenn Menue angezeigt wird, egal, ueber welchem Bereich ist */
#intopbg:hover .hoverbgrepl { display:block }

/* Ein Bereich (Titel oder Rubrik) */
.rub { min-height:40px }
.rub:hover .hoverbg, .rub:focus .hoverbg { display:block }

.rub h1, .rub h2 { margin:0px; padding:0px }

.rublink { position:absolute; left:0px; top:-22px; height:62px; width:100% }
.rub:hover .rublink, .rublink:focus { top:-232px; height:272px; width:100% }
.rublink .over { display:block; position:absolute; left:16px; top:26px; height:24px; background:url('s_title.png') no-repeat }
.rub:hover .rublink .over, .rublink:focus .over {top:236px }
.en .rublink .over { background:url('s_title_en.png') no-repeat }
.fr .rublink .over { background:url('s_title_en.png') no-repeat }
.es .rublink .over { background:url('s_title_en.png') no-repeat }
.rublink .text { display:none }

.rublink .over2 { display:none; position:absolute; width:125px; height:125px; right:0px; top:107px; background:url('s_titleicons.png') no-repeat }
.rub:hover .rublink .over2, .rublink:focus .over2 { display:block }



.rub ul { padding:0px; position:relative; z-index:50; top:0px; margin:40px 0px 0px 0px; width:100%; display:none }
/* Alle Menues anzeigen, wenn Maus ueber irgendeinem der vier Bereiche */
#intopbg:hover .rub ul { display:block }

/* Titelbereich */
#title { z-index:5 }

.rub ul li { display:block; padding:0px; margin:0px }
.rub ul li.spacebefore { padding-top:8px; margin-top:1em }
.rub ul li a { display:block; margin:0px 1px 0px 0px; padding: 4px 16px 4px 16px }
.rub ul li:first-child a { padding-top:18px }

.rub ul a { color:#000000; opacity:.3; text-decoration:none }
.rub:hover ul a { color:#000000; opacity:.5; text-decoration:none }
.rub ul li a:hover { color:#000000; opacity:1; text-decoration:underline }

#title.rub { position:absolute; height:40px; bottom:6px; left:0px; width:100%  }
#title .rublink .over { background-position: 0px 0px; width:132px } /*228px*/
#title:hover .rublink .over, #title .rublink:focus .over { background-position: 0px -24px}

#title .rublink:focus { width:50% }

/* Liegt unter den Rubriken und ueberdeckt die Hervorhebung des Titels, wenn dieser gehovert wird; Liegt in z-Order hinter Animation */
#rubcover { position:absolute; left:0px; width:100%; top:-232px; height:601px; background:url('s_topbg.png') 0 0 repeat-x #ffffff; display:none; z-index:12 }
#intopbg:hover #rubcover { display:block }

/* Container fuer die Rubrikbereiche */
#rubs { position:relative; width:50%; min-width:500px; float:right; top:-40px }
/* Alles war in inrubs liegt, liegt über Animation (-> z-index) */
#inrubs { position:relative; width:100%; left:0px; top:0px; height:100%; z-index:16 }

/* Rubrikbereich */
#rubs .rub { float:left; position:relative; width:33% }
#rubs .rub:first-child { width:34% }
#rubs .rublink .over { width:88px }

#rubs .rub ul li a { padding-left:18px }

.rublink:focus { background:url('s_hoverbgs.png'); }
#rub1 .rublink:focus { background-position:0px -601px }
#rub2 .rublink:focus { background-position:0px -1202px }
#rub3 .rublink:focus { background-position:0px -1803px }


#rub1 .hoverbg { background-position:0px -601px }
#rub1 .rublink .over { background-position: -228px 0px }
#rub1:hover .rublink .over, #rub1 .rublink:focus .over { background-position: -228px -24px }

#rub2 .hoverbg { background-position:0px -1202px }
#rub2 .rublink .over { background-position: -316px 0px }
#rub2 .rublink .over2 { background-position: -125px 0px }
#rub2:hover .rublink .over, #rub2 .rublink:focus .over { background-position: -316px -24px }

#rub3 .hoverbg { background-position:0px -1803px }
#rub3 .rublink .over { background-position: -404px 0px }
#rub3 .rublink .over2 { background-position: -250px 0px }
#rub3:hover .rublink .over, #rub3 .rublink:focus .over { background-position: -404px -24px }

/* Animation - liegt in Z-Ebene zwischen #rubcover und #inrubs; daher darf oberhalb von #inrubs in
   der Hierarchie nirgends ein z-index vorkommen (wuerde neue z-Gruppe aufmachen)! */
#animation { display:block; position:absolute; bottom:0px; right:0px; width:358px; height:114px; z-index:14 }


/* Inhaltsueberdecker - immer angezeigt, wenn Maus in Menue (#intopbg) */
#texthider { display:none; top:12px; height:2000px; position:absolute; width:100%; left:0px; background:#ffffff; z-index:5 }
#intopbg:hover #texthider { display:block }

/* Inhaltsbereich */
#content { padding:80px 50px 0px 150px; color:#909090; line-height:1.7em; max-width:60em }
#content .fat { font-weight:bold }

#content p, #content h1 { font-size:1em; margin:0em; padding:0em 0em 1em 0em }

/* ipmde-Link */
a { color:#213e7d }
a:hover { color:#395ca9 }
a:active { color:#395ca9 }
a:visited { color:#616b83 } 
#ipm { position:absolute; right:10px; top:10px; z-index:60 }
#ipm em { font-weight:bold !important; font-family:'Linux Libertine', 'Times New Roman', Times, serif !important; font-size:1.2em !important }

/* Untere Reihe */
#bottomrow { position:absolute; z-index:60; left: 150px; bottom:20px; height:2em }
#bottomrow ul { display:block; float:left; margin:0px; padding:0px; white-space:nowrap }
#bottomrow li { display:block; float:left; margin:0px; padding:0px }
#bottomrow li>a { float:left; color:#ababab; text-decoration:none !important }
#bottomrow li>a:hover { color:#000000; text-decoration:underline !important }
#bottomrow li:hover>a { color:#000000 }
#bottomrow li>a.active { color:#000000; font-weight:bold }
#bottomrow li>a.active:hover { color:#000000; text-decoration:none !important }

/* Validitaetsfelder */
#validity li { position:relative }
#validity li>a { padding:0em 0.5em }
#validity { border-left:1px solid#ababab; margin-left:0.3em !important; padding-left:1em !important }

/* Kontakt */
#contact li>a { padding:0em 0.5em }
#contact { border-left:1px solid #ababab; margin-left:1em !important; padding-left:1em !important }

/*.validity { position:absolute; z-index:4; width:88px; height:31px; bottom:12px; text-align:left }
#xhtmlvalidity { left:150px }
#cssvalidity { left:250px }
*/
.validitydesc { display:none }

#validity li:hover .validitydesc { display:block; position:absolute; left:0px; width:auto; min-width:10em; height:auto; bottom:1.3em;
                                border:1px solid #CCCCCC;
                                z-index:20; background-color:#E6E6E6; text-align:left }

.validitydesc p { margin:6px; padding:0px; white-space:nowrap }

/* Sprachauswahl */
#idiomas li>a { width:2.5em; padding:0em; text-align:left }