@charset "utf-8";
body {
        margin: 0;
        padding: 0;
        text-align: center;
        background: #FFFFFF url(img/body_bg.jpg) repeat-y center;
        height: 100%;
        }
img {
        border: 0px solid #fff;
        margin: 0px;
        padding: 0px;
        }
ul {
        position: relative;
        left: 0px;
        top: 0px;
}
#container {
        position: relative;
        height: 100%;
        width: 750px;
        margin: 0px auto;
        text-align: left;
        color: #666;
        overflow: visible;
        padding: 0;
        font: 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
        background-image: url(img/header_hg.gif);
        z-index: 0;
    }
/*########################### kopf ########################################*/
#header {
        width: 750px;
        background-image: url(img/header_hg.gif);
}
#contentheader {
        padding: 0px;
        margin: 0px;
        background-image: url(img/header_hg.gif);
        position: relative;
}
#header_li{ /*kontakt, impressum*/
        margin: 0px;
        padding: 0px;
        float:left;
        height: 157px;
        width: 200px;
        text-align: right;
        position: relative; /*muss pos. haben, um sdb aufzunehmen*/
        z-index: 2;
        left: 0px;
        top: 0px;
    }
#header_li li        {
        width: 190px;
        }
#header_li a.kont{/* kontakt, impressum, sdb */
        display: block;
        font-weight: bold;
        text-decoration: none;
        margin: 0px 10px 0px 0px;
        color: #FFFFFF;
}
#header_li a.kont:hover{
        color: ##FA3909; /* rot */
}
#header_li a.kontactive{/* aktive seite */
        display: block;
        font-weight: bold;
        text-decoration: none;
        margin: 0px 10px 0px 0px;
        color: #CC0033;
}

#header_li a.kont:hover{
        color: #CC0033; /* rotbraun */
}
#header_li a.kontactive{/* aktive seite */
        display: block;
        font-weight: bold;
        text-decoration: none;
        margin: 0px 10px 0px 0px;
        color: #CC0033;
}
#header_re{ /*banner, titel */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 157px;
        width: 550px;
        position: relative;
        z-index: 3;
        left: 0px;
        top: 0px;
    }
#header_banner.arbeitssicherheit{ /*banner, titel */
        margin: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: visible;
        border-bottom: 7px solid #c87161; /*rot */
        background: url(img/banner_arbeitssicherheit.jpg);
        padding: 0px;
    }

#header_banner.gesund{ /*banner, titel */
        margin: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: visible;
        border-bottom: 7px solid #8EB79F; /*grün */
        background: url(img/banner_gesund.jpg);
        padding: 0px;
    }


#header_banner.kontakt{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_kontakt.jpg) no-repeat;
        border-bottom: 7px solid #1460bf; /*blau */
    }
#header_banner.impressum{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_impressum.jpg) no-repeat;
        border-bottom: 7px solid #1460bf; /*blau */
    }
#header_banner.sdb{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_sdb.jpg) no-repeat;
        border-bottom: 7px solid #1460bf; /*blau */
    }

#header_banner.qm{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background:  url(img/banner_qm.jpg) no-repeat;
        border-bottom: 7px solid #b090cb; /*lila */
    }
#header_banner.sige{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_sige.jpg) no-repeat;
        border-bottom: 7px solid #951C43; /*orange */
    }
#header_banner.brandschutz{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_brandschutz.jpg) no-repeat;
        border-bottom: 7px solid #edd161; /*gelb */
    }
#header_banner.datenschutz{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_datenschutz.jpg) no-repeat;
        border-bottom: 7px solid #8eb79f; /*gruen */
    }
#header_banner.unternehmen{ /*wechselnder hintergrund */
        margin: 0px;
        padding: 0px;
        float:right;
        height: 100px;
        width: 550px;
        overflow: hidden;
        background: url(img/banner_unternehmen.jpg) no-repeat;
        border-bottom: 7px solid #ECA364; /*orange */
    }

#sdb{/* sdb_schrift */
        position: absolute;
        z-index: 3;
        left: 50px;
        top: 110px;
}
#header_titel{/* graue titelzeile */
        background: #ffFFFF url(img/header_titel.jpg) no-repeat;
        height: 50px;
        width: 550px;
        float:right;
}
#header_titel h2{/* unsichtbare Titelzeile */
        display: none;
        }

#header_re p{/* Adresse oben */
        margin: 10px 10px 0px;
        color: #FFFFFF;
        font-weight: bold;
}


 /*#################### obere linkspalte ############################################*/
#header_li ul { /* enthält alle links*/
        padding: 0px;
        margin: 10px 0px 0px 0px;
    }
#header_li li {
        padding: 0px;
        list-style-type: none;
        margin: 0px;
    }


/*######################### hauptteil ###########################################*/
#mitte {
        position: relative;/* damit danach pos absolute wirkt, 1% wegen bildlaufleistenbug */
        z-index: 1;
        left: 0px;
        top: 0px;
        height: 1%;/* damit absolut pos. element nicht die box verlaengern kann */
    }

/*######################### linkes menue ###########################################*/

#sidebar {/* aussen */
        width: 220px;
        padding: 0;
        position: absolute;
        z-index: 10;
        left: 0px;
        top: 160px;
    }

#menue { /* innen */
        padding: 70px 0px 10px 0px;
        margin: 0px;
        text-align: right;
    }

a.menlila, a.menorange, a.mengelb, a.mengruen, a.mendunkelblau, a.menbraun, a.mengrau, a.menrotbraun   {/* 220px, menue links*/
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px; /*breite nicht gesprengt*/
        background: url(img/button_blau.gif) no-repeat 0px 0px;
        margin: 0px;
        letter-spacing: 1px;
        position: relative;
}



#menue a.menrotbraun:hover  {
        color: #1460bf;
        text-decoration: none;
        background: url(img/button_rotbraun.gif) no-repeat 20px 0px;
}
#menue a.menrotbraun_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        margin: 0px;
        letter-spacing: 1px;
        background-image: url(img/button_rotbraun.gif);
        background-repeat: no-repeat;
        background-position: 20px 0px;
}


a.menlila:hover  {
        color: #1460bf;
        text-decoration: none;
        background: url(img/button_lila.gif) no-repeat 20px 0px;
}
a.menlila_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        letter-spacing: 1px;
        background: url(img/button_lila.gif) no-repeat 20px 0px;
}

a.menorange:hover  {
        color: #1460bf;
        text-decoration: none;
        background: url(img/button_orange.gif) no-repeat 20px 0px;
}
a.menorange_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        letter-spacing: 1px;
        background: url(img/button_orange.gif) no-repeat 20px 0px;
}

a.mengelb:hover  {
        color: #1460bf;
        text-decoration: none;
        background: url(img/button_gelb.gif) no-repeat 20px 0px;
}
a.mengelb_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        letter-spacing: 1px;
        background: url(img/button_gelb.gif) no-repeat 20px 0px;
}

a.mengruen:hover  {
        color: #1460bf;
        text-decoration: none;
        background: url(img/button_gruen.gif) no-repeat 20px 0px;
}
a.mengruen_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        letter-spacing: 1px;
        background: url(img/button_gruen.gif) no-repeat 20px 0px;
}

a.mendunkelblau:hover  {
        color: #ffffff;
        text-decoration: none;
        background: url(img/button_blau.gif) no-repeat 20px 0px;
}
a.mendunkelblau_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        letter-spacing: 1px;
        background: url(img/button_blau.gif) no-repeat 20px 0px;
}

a.menbraun:hover  {
        color: #1460bf;
        text-decoration: none;
        background: url(img/button_braun.gif) no-repeat 20px 0px;
}
a.menbraun_active   {
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        padding: 8px 30px 8px 0px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        letter-spacing: 1px;
        background: url(img/button_braun.gif) no-repeat 20px 0px;
}



/*############################### rechte seite ###############################*/
#main {
        position: relative;
        left: 200px;
        top: 0px;
        z-index: 5;
        width: 550px;
}
* html #main { height: 1%;}/* wegen 3-Pixelsprung fuer IE */

#mainContent {/* enthaelt seiteninhalt */
        padding: 20px 0px 10px;
        background: #FFf url(img/schatten_senkrecht.jpg) repeat-y;
          }

#main a {/* blauer link im fliesstext*/
        text-decoration: none;
        color: #1460bf;
        border-bottom: 1px dotted #1460bf;
        font-weight: bold;
        }
#main a:hover {
        border-bottom: 1px solid #1460bf;
        }

#mainContent h2 {/* ueberschrift der seite */
        color:#CC0033;/* rot */
        font-size: 16px;
        font-weight: bold;
        display: block;
        padding: 3px 3px 3px 10px;
        margin: 0px 0px 20px 70px;
        letter-spacing: 2px;
        border-bottom: 1px solid #999999;
    }


#mainContent h4 { /*blauer zwischentitel */
        font-size: 12px;
        font-weight: bold;
        padding: 2px;
        color:#1460bf;
        letter-spacing: 1px;
        border-bottom: 1px dotted #666;
        margin: 0px 0px 10px 30px;
    }

#mainContent p {
        margin-top: 0px;
        margin-right: 35px;
        margin-bottom: 10px;
        margin-left: 70px;
        text-align: left;
    }

#mainContent  ul.grau {
        margin: 10px 35px 10px 70px;
        padding: 0px;
        list-style: none;
    }
ul.grau li {
        margin: 0px 0px 10px 0px;
        padding: 0px 0px 0px 20px;
        list-style: none;
        background: url(img/arrow.gif) no-repeat 0px -3px;
    }
#mainContent  ul.blau {
        margin: 10px 35px 10px 70px;
        padding: 5px;
        list-style: none;
    }
ul.blau li {
        margin: 0px 0px 10px 0px;
        padding: 0px 0px 0px 10px;
        list-style: none;
        border-left: 5px solid #1460bf;
    }

.blautext {/* im fliesstext */
        color:#1460bf;
    }

#faecher {/* themenbild links unten */
        width: 220px;
        position: absolute;
        z-index: 15;
        left: 12px;
        height: 175px;
        bottom: 50px;
}
#faecher.arbeitssicherheit {/* themenbild wechseln */
        background: url(img/arbeitssicherheit.gif) no-repeat left top;
}
#faecher.qm {/* themenbild wechseln */
        background: url(img/qm.gif) no-repeat left top;
}
#faecher.sige {/* themenbild wechseln */
        background: url(img/sige.gif) no-repeat left top;
}
#faecher.brandschutz {/* themenbild wechseln */
        background: url(img/brandschutz.gif) no-repeat left top;
}
#faecher.datenschutz {/* themenbild wechseln */
        background: url(img/datenschutz.gif) no-repeat left top;
}
#faecher.sdb {/* themenbild wechseln */
        background: url(img/sdb.gif) no-repeat left top;
}
#faecher.kontakt {/* themenbild wechseln */
        background: url(img/kontakt1.gif) no-repeat left top;
}
#faecher.gesund {/* themenbild wechseln */
        background: url(img/gesund1.gif) no-repeat left top;
}
/*############# fusszeile ###############*/

#footer {
        margin: 0px;
        padding: 0px;
        clear:both;
    }
#left{/* fusslinks links */
        margin: 0px;
        padding: 0px;
        float:left;
        color:#FFFFFF;
        width: 200px;
        text-align: right;
    }
#right{ /*fusslinks rechts */
        color:#1460bf;
        margin: 0px;
        padding: 0px;
        float:right;
        width: 550px;
        background: url(img/footer.jpg) no-repeat;
        background-color: #dddde0;
    }
#left div a {/* Impressum Kontakt */
        color:#FFFFFF;
        text-decoration: none;
  }
#left div a:hover {
        color:#FFFFFF;
        text-decoration: none;
        border-bottom: 1px solid #fff;
    }
#right div a {/* arbeitssicherheit */
        color:#1460bf;
        text-decoration: none;
  }
#right div a:hover {
        color:#1460bf;
        text-decoration: none;
        border-bottom: 1px solid #1460bf;
    }

#left div, #right div {
        margin: 0px;
        padding: 10px;
    }


/*############################ sonstiges ####################################*/

.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }