/*----------------------------------------------------*/
/*--------------- Hauptnavigation --------------------*/

#navi {
    background: url(bilder/subnavi.gif) repeat-x left 25px #000000;
}

#navi ul {
    margin-bottom: 0;
}

#navi ul li {
    display: inline;
    float: left;
}

#navi ul li a {
    float: left;
    margin-right: 2px;
    padding: 4px 8px 6px 9px;
    font-size: 15px;
    line-height: 15px;
}
#navi ul li a:link,
#navi ul li a:visited {
    color: #FFFFFF;
}
#navi ul li a:hover,
#navi ul li a:active,
#navi ul li a:focus,
#navi ul li.gruppe-aktiv a {
    color: #C40026 !important;
    background-color: #FFEE00;
}

/*----------------- Subnavigation --------------------*/
/*--------------- bei 'gruppe-aktiv' -----------------*/

#navi ul li ul {
    position: absolute;
    left: -9999px;
    margin-top: 25px;
    width: 1117px;
    height: 28px;
    background: url(bilder/subnavi.gif) repeat-x left top;
}

#navi ul li.gruppe-aktiv ul {
    left: 5px;
}

#navi ul li.gruppe-aktiv ul li {
    background: url(bilder/subnavi-rechts.gif) no-repeat right top;
}
#navi ul li.gruppe-aktiv ul li.ende {
    background: transparent;
}

#navi ul li.gruppe-aktiv ul li a {
    padding-bottom: 8px;
    color: #222222 !important; /* wegen IE6 */
    background-color: transparent; /* verhindert ein Vererben aus '#navi ul li.gruppe-aktiv a' (ein '#navi ul li.gruppe-aktiv>a' funktioniert im IE 6 nicht) */
}
#navi ul li.gruppe-aktiv ul li a:link,
#navi ul li.gruppe-aktiv ul li a:visited {
    color: #222222;
}
#navi ul li.gruppe-aktiv ul li a:hover,
#navi ul li.gruppe-aktiv ul li a:active,
#navi ul li.gruppe-aktiv ul li a:focus,
#navi ul li.gruppe-aktiv ul li a.aktiv {
    color: #C40026 !important;
    background: url(bilder/subnavi-aktiv.gif) no-repeat center 22px;
}

/* ---- Hover-Funktion bei nicht 'gruppe-aktiv' ---- */

#navi ul li:hover {
    position: relative;
    z-index: 1; /* sonst setzt IE7 dort ein 'z-index 0' */
}

#navi ul li:hover a {
    color: #C40026;
    background-color: #FFEE00;
}

#navi ul li:hover ul {
    z-index: 2;
    left: -2px;
    width: 185px;
    height: auto;
    background-color: #FFEE00;
}

#navi ul li:hover ul li {
    display: block;
    float: none;
    border: solid #000000;
    border-width: 0 2px 1px 2px;        
}
#navi ul li:hover ul li.ende {
    border-bottom: solid 2px #000000;
}

#navi ul li:hover ul li a {
    display: block;
    float: none;
    padding: 4px 8px 4px 9px;
}
#navi ul li:hover ul li a:link,
#navi ul li:hover ul li a:visited {
    color: #222222;
}
#navi ul li:hover ul li a:hover,
#navi ul li:hover ul li a:active,
#navi ul li:hover ul li a:focus {
    background: url(bilder/subnavi-hover.gif) no-repeat 170px center;
}

/* ------- Hover-Funktion bei 'gruppe-aktiv' ------- */

#navi ul li.gruppe-aktiv:hover {
    position: static;
}

#navi ul li.gruppe-aktiv:hover ul {
    left: 5px;
    width: 1117px;
    background-color: transparent;
    height: 28px;
    background: url(bilder/subnavi.gif) repeat-x left top;
}

#navi ul li.gruppe-aktiv:hover ul li {
    float: left;
    border: none;
}

#navi ul li.gruppe-aktiv:hover ul li a {
    padding-bottom: 8px;
    height: 18px;
}
#navi ul li.gruppe-aktiv:hover ul li a:link,
#navi ul li.gruppe-aktiv:hover ul li a:visited {
    background-color: transparent; /* verhindert ein Vererben aus '#navi ul li.gruppe-aktiv a' (ein '#navi ul li.gruppe-aktiv>a' funktioniert im IE 6 nicht) */
}
#navi ul li.gruppe-aktiv:hover ul li a:hover,
#navi ul li.gruppe-aktiv:hover ul li a:active,
#navi ul li.gruppe-aktiv:hover ul li a:focus,
#navi ul li.gruppe-aktiv:hover ul li a.aktiv {
    color: #C40026;
    background: url(bilder/subnavi-aktiv.gif) no-repeat center 22px;
}