/*
Navigationsaufbau:
<ul>     Navigation als Liste definieren
 <li>    Listenpunkt pro Hauptmenüpunkt
  <dl>   Definition Hauptmenüpunkt
   <dt>  Name des Menüpunktes  </dt>
   <dd>  Name des Unterpunktes  </dd>
  </dl>
 </li>
</ul>
*/

ul#navigation {                                   /* Positionierung Navigationsleiste */
  list-style-type: none;
  margin: 0 0 50px 0;
  padding: 0;
  width: 420px;
  }

ul#navigation a {                                 /* Einstellungen für Links */
  text-decoration: none;
}

ul#navigation li {                                /* Positionierung für Hauptpunkte */
  padding: 0;
  margin: 0;
  position: relative;
  width: 210px;
  height: 1.7em;
  z-index: 10;
}

ul#navigation li dl {                             /* Positionierung für Hauptpunkte */
  position: absolute;                             /* sorgt dafür, dass beim "Herausfahren" der Content nicht nach unten geschoben wird*/
  top: 0;
  left: 0;
  width: 210px;
  margin: 0;
  padding: 0;
  padding-bottom: 0;
  background: transparent;
}

ul#navigation li dd {                             /* Positionierung für Unterpunkte */
  display: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
  text-align: left;
  width: 210px;
  float: right;
  clear: right;
}

ul#navigation li:hover dd,
ul#navigation li a:hover dd {                    /* Unterpunkte anzeigen bei Hover */
  display: block;
}

ul#navigation li:hover dl,
ul#navigation li a:hover dl {                    /* Gesamtweite Hauptmenüpunkt erhöhen bei Hover*/
  width: 420px;                                  /* sorgt dafür, dass Unterpunkt rechts angezeigt wird */
}

ul#navigation dt a,
ul#navigation dt a:visited {                     /* Layout Hauptmenüpunkt */
  display: block;
  font-size: 0.9em;
  color: #000000;                                /* Schriftfarbe */
  background-color: #dddddd;                     /* Hintergrundfarbe */
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #0000df;                         /* Rahmenfarbe */
  border-width: 0 1px 1px 1px;
  padding: 0.25em 0 0.75em 0;
}

ul#navigation li:hover dt a,
ul#navigation a:hover dt a {                     /* Layout Hauptmenüpunkt bei Hover */
  color: #000000;                                /* Schriftfarbe */
  background-color: #777777;                     /* Hintergrundfarbe */
  border-width: 1px;
  border-style: solid;
  border-color: #0000df;                         /* Rahmenfarbe */
  border-width: 0 1px 1px 1px;
}

ul#navigation dd a,
ul#navigation dd a:visited {                     /* Layout Unterpunkt */
  color: #000000;                                /* Schriftfarbe */
  background-color: #dddddd;                     /* Hintergrundfarbe */
  padding: 0.5em 0;
  text-decoration: none;
  display: block;
  text-align: center;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #000000;                    /* Rahmenfarbe */
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #000000;                   /* Rahmenfarbe */
  width: 208px;
}

ul#navigation dd a:hover {                       /* Layout Unterpunkt bei Hover */
  background-color: #777777;                     /* Hintergrundfarbe */
  color:#000000;                                 /* Schriftfarbe */
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #0000df;                    /* Rahmenfarbe */
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #0000df;                   /* Rahmenfarbe */
}

ul#navigation b {                               /* Definition runder Rahmen */
  display: block;
  overflow: hidden;
  height: 1px;
}

b.rundungoben1 {                                /* Layout runder Rahmen oben (Teil 1) */
  background-color: #0000df;
  margin: 0 5px;
}

b.rundungoben2 {                                /* Layout runder Rahmen oben (Teil 2) */
  background-color: #dddddd;
  border-width: 2px;
  border-style: solid;
  border-color: #0000df;
  border-width: 0 2px;
  margin: 0 3px;
}

b.rundungoben3 {                                /* Layout runder Rahmen oben (Teil 3) */
  background-color: #dddddd;
  margin: 0 2px;
  border-width: 1px;
  border-style: solid;
  border-color: #0000df;
  border-width: 0 1px;
}

b.rundungoben4 {                                /* Layout runder Rahmen oben (Teil 4) */
  height: 2px;
  background-color: #dddddd;
  margin: 0 1px;
  border-width: 1px;
  border-style: solid;
  border-color: #0000df;
  border-width: 0 1px;
}

b.rundungunten1 {                               /* Layout runder Rahmen unten (Teil 1) */
  height: 2px;
  background-color: #0000df;
  margin: 0 1px;
}

b.rundungunten2 {                               /* Layout runder Rahmen unten (Teil 2) */
  background-color: #0000df;
  margin :0 2px;
}

b.rundungunten3 {                               /* Layout runder Rahmen unten (Teil 3) */
  background-color: #0000df;
  margin: 0 3px;
}

b.rundungunten4 {                               /* Layout runder Rahmen unten (Teil 4) */
  background-color: #0000df;
  margin: 0 5px;
}

ul#navigation li:hover b.rundungoben2,
ul#navigation a:hover b.rundungoben2 {          /* Layout runder Rahmen oben (Teil 2) bei Hover */
  background-color: #777777;
}

ul#navigation li:hover b.rundungoben3,
ul#navigation a:hover b.rundungoben3 {          /* Layout runder Rahmen oben (Teil 3) bei Hover */
  background-color: #777777;
}

ul#navigation li:hover b.rundungoben4,
ul#navigation a:hover b.rundungoben4 {          /* Layout runder Rahmen oben (Teil 4) bei Hover */
  background-color: #777777;
}