@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background: #FFFFFF url(img/body_bg2.jpg) repeat-y center;
	}
img {
	border: 0px solid #fff;
	margin: 0px;
	padding: 0px;
	}
#container {
	width: 750px;
	margin: 0px auto;
	text-align: left;
	color: #666;
	overflow: visible;/* hidden testen fuer alte browser */
	padding: 0;
	font: 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
/*########################### kopf ########################################*/
#header {
	width: 750px;
	background-image: url(img/header_hg.gif);
}
#contentheader {
	padding: 0px; /*  */
	margin: 0px;
	background-image: url(img/header_hg.gif);
}
#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{/* kontakt, impressum, sdb */
	display: block;
	font-weight: bold;
	text-decoration: none;
	margin: 0px 10px 0px 0px;
	color: #FFFFFF;
}
#header_li a:hover{
	color: #CC0033; /* rot */
}
#header_li a.active{/* aktive seite */
	color: #CC0033;
}
#header_re.home{ /*banner, titel */
	margin: 0px;
	padding: 0px;
	float:right;
	height: 100px;
	width: 550px;
	overflow: hidden;
	border-bottom: 7px solid #c87161; /*rot */
	/*background: url(img/banner_arbeitssicherheit.jpg); */
         background: url(img/banner_home.jpg);
    }
#header_re.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_re.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_re.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_re.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_re.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 #eca262; /*orange */
    }
#header_re.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_re.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 */
    }


#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: 0px;
    }

#menue { /* innen */
	padding: 70px 0px 10px 0px;
	margin: 0px;
	text-align: right;
    }
#menue ul{ /* liste */
	padding: 0px;
	margin: 0px;
	list-style: none;
    }
#menue li{/* 220px, liste */
	padding: 0px;
	margin: 0px;
	display: block;
	width: 220px;
    }

a.menrot, a.menlila, a.menorange, a.mengelb, a.mengruen   {/* 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 left top;
	margin: 0px;
	letter-spacing: 1px;
}

a.menrot:hover  {
	color: #1460bf;
	text-decoration: none;
	background: url(img/button_rot.gif) no-repeat 20px top;
}
a.menrot_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_rot.gif) no-repeat 20px top;
}


a.menlila:hover  {
	color: #1460bf;
	text-decoration: none;
	background: url(img/button_lila.gif) no-repeat 20px top;
}
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 top;
}

a.menorange:hover  {
	color: #1460bf;
	text-decoration: none;
	background: url(img/button_orange.gif) no-repeat 20px top;
}
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 top;
}


a.mengelb:hover  {
	color: #1460bf;
	text-decoration: none;
	background: url(img/button_gelb.gif) no-repeat 20px top;
}
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 top;
}


a.mengruen:hover  {
	color: #1460bf;
	text-decoration: none;
	background: url(img/button_gruen.gif) no-repeat 20px top;
}
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 top;
}


/*############################### 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;
	margin-bottom: 0px;
	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;
    }

hr{ /* trennlinie */
	background-color: #eee; /* Opera und Firefox */
	color: #eee; /* Internet Explorer */
	border: 0px;
	height: 3px;
	margin: 0px 0px 0px 70px;
	padding: 0px;
}

.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;
}
/*############# fusszeile ###############*/

#footer {
	margin: 0px;
	padding: 0px;
	clear:both;
	height: 30px;
    }
#left{/* fusslinks links */
	margin: 0px;
	padding: 0px;
	float:left;
	color:#FFFFFF;
	width: 200px;
	height: 30px;
	text-align: right;
    }
#right{ /*fusslinks rechts */
	color:#1460bf;
	margin: 0px;
	padding: 0px;
	float:right;
	width: 550px;
	height: 30px;
	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: 5px 10px 5px;
    }


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

.fehler { /* Fehlerbeseitigung zwischen Überschrift und floatender Box */
        margin: 0px;
        padding: 0px;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
.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;
    }