/**************************/
/*** Inhaltsverzeichnis ***/
/**************************/

/* Definition des Grundlayouts (Box-Model)
   Gesamtbreite 760 Pixel

   - div-Blöcke, hauptsächlich Definition des Grundlayouts (Box-Model)
      - div (allgemein)
      - div#header (Seitenkopf mit Logo, Swapimage und Überschrift)
         - div#swapimg
         - div#jokilogo
         - div#jokilogobottom
         - div#headline
      - div#mainframe (Hauptteil, enthält Navigation, Content und rechte Spalte mit Featureboxen)
         - div#navigation
            - ul#navlist, ul#navlist ul (Navigationspunkte, Aufzählung und Sub-Aufzählungen)
            - ul#navlist (Navigationspunkte, Aufzählungspunkte)
            - Navigationeinträge - alle Ebenen
               - ul#navlist div.navitem_level1
               - ul#navlist div.navitem_level1_1
               - ul#navlist div.navitem_level1_2
               - ul#navlist div.navitem_level1_3 
               - ul#navlist div.navitem_level2
               - ul#navlist div.navitem_level3
            - Hyperlinks in Navigationseinträgen
              - ul#navlist a:link
              - ul#navlist a:visited
              - ul#navlist a:hover
              - ul#navlist a:active
         - div#content (Content-Bereich)
         - div#rightcol (Rechte Spalte, z.B. für Featureboxen)
            - div.featurebox
              - div.featureboxtitle
              - div.featureboxcontent
       - div#bottom (Seitenabschluss)

   - hr.hide

*/


/*************************************************************************/
/*** div-Blöcke, hauptsächlich Definition des Grundlayouts (Box-Model) ***/
/*************************************************************************/

/* Außencontainer */
div#container {
  width:760px;
}
 
/* Seitenkopf mit Logo, Swapimage und Überschrift */

div#header {
  /*background-color:#99FF99;*/
  float:left;   /* Mozilla würde den background nicht darstellen. Daher hier
                   ein float:left und im Folgeelement dann ein clear:left */
  width:760px;
}

div#swapimg {
  float:left;
  width:180px;
  height:86px;
}

div#jokilogo {
  float:right;
  width:580px;
  height:86px;
}
div#jokilogobottom {
  float:right;
  width:160px;
  height:40px;
}
div#headline {
  background-image: url(/img/bg_headline.gif); 
  float:left;
  width:580px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:40px;
  margin-right:20px;
  padding-left:200px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:380px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body div#headline { width:380px; }

/* Hauptteil, enthält Navigation, Content und rechte Spalte mit Featureboxen */

div#mainframe {
  background-image:url(/img/bg_nav_balken.gif);
  background-repeat:repeat-y;
  clear:both;
  float:left;   /* Mozilla würde den background nicht darstellen. Daher hier
                   ein float:left und im Folgeelement dann ein clear:left */
  width:760px;
}

/* Navigation */

div#navigation {
  float:left;
  width:180px;
}

/* Navigationspunkte, Aufzählung und Sub-Aufzählungen */
ul#navlist, ul#navlist ul {
  list-style-type:none;
  margin:0px;
  border:0px;
  padding:0px;
}

/* Navigationspunkte, Aufzählungspunkte */
ul#navlist li {
  font-size:11px;
  margin:0px;
  border:0px solid;  
  padding:0px;
}

/* Navigationeinträge - alle Ebenen */
/*   (Parameter lassen sich nicht in den "ul li"-Einträgen festlegen,
      da die Höhe (20px) bei vorhandenen Navigationselementen einer
      tieferen Ebene nicht stimmt. Daher werden die Einträge in div-Tags
      geschachtelt)
*/

ul#navlist div.navitem_level1 { 
  background-image:url(/img/bg_nav_level1.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:165px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level1 { width:165px; }

ul#navlist div.navitem_level1_1 { 
  background-image:url(/img/bg_nav_level1_item1.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:165px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level1_1 { width:165px; }

ul#navlist div.navitem_level1_2 {
  background-image:url(/img/bg_nav_level1_item2.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:165px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level1_2 { width:165px; }

ul#navlist div.navitem_level1_3 { 
  background-image:url(/img/bg_nav_level1_item3.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:165px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level1_3 { width:165px; }

ul#navlist div.navitem_level1_13 {
  background-image:url(/img/bg_nav_level1_item13.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:165px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level1_13 { width:165px; }

ul#navlist div.navitem_level2 {
  background-image:url(/img/bg_nav_level2.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 25px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:155px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level2 { width:155px; }

ul#navlist div.navitem_level3 { 
  background-image:url(/img/bg_nav_level3.gif);
  line-height:20px;
  white-space:nowrap;
  vertical-align:middle;
  width:180px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:20px;
  margin:0px;
  padding:0px 0px 0px 35px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:145px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body ul#navlist div.navitem_level3 { width:145px; }

ul#navlist a:link    { text-decoration:none; color:black; }
ul#navlist a:visited { text-decoration:none; color:black; }
ul#navlist a:hover   { text-decoration:none; color:black; font-weight: bold; }
ul#navlist a:active  { text-decoration:none; color:black; }


/* Content-Bereich*/

div#content {
  float:left;
  width:380px;
  margin:20px;
}

/* Content, rechte Spalte */

div#rightcol {
  float:left;
  width:160px;
  margin:20px 0px 20px 0px;
}

/* Featurebox */

div.featurebox {
  margin: 0px 0px 10px 0px;
}

div.featureboxtitle {
  background-color:#BCCBDA;
  vertical-align:middle;
  font-size:11px;
  font-weight:bold;
  line-height:18px;
  width:160px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  height:18px;
  margin:0px;
  border-collapse:collapse;
  border-top: 0px none;
  border-right: 0px none;
  border-bottom: 1px solid white;
  border-left: 0px none;
  padding:0px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:130px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body div.featureboxtitle { width:130px; }

div.featureboxcontent {
  background-color:#D1DBE4;
  font-size:11px;
  width:160px; /* IE5.x-Bug: Hier die CSS-konforme Breite zzgl. margin + padding */
  margin:0px;
  border-collapse:collapse;
  border:0px none;
  padding:5px 15px;
  voice-family:"\"}\""; /* Tantek-Hack für IE5.x, damit das folgende ignoriert wird */
  voice-family:inherit; 
  width:130px; /* CSS-konforme Breite (gesamtbreite = margin + border + padding + width)  */
}
html>body div.featureboxcontent { width:130px; }


/* Seitenabschluss */

div#bottom {
  clear:both;
  width:760px;
/* height:5px; */
/* margin-bottom beim Content funktioniert nicht 100%-ig. Als Workaround
   erhält die Abschlussgrafik noch einen 30px Rand. Neue Höhe: */
  height:35px;
}

hr.hide {
  display: none;
}