@charset "UTF-8";

	* {
		margin:0;
		padding:0;
		}

	html, body {
		height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
		}

body {
	font-family: Verdana;
	background-image: url(../images/common/bgd_light.jpg);
	background-repeat:repeat-x;
	background-color: #d0d0d0;
	margin: 0;
	padding: 0;
	color: #666666;
	font-size: 12px;
}

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	border: none;
}

h1 {
	color: #fdc400;
	font-size: 14px;
	}
	
h2 {
	color: #fdc400;
	font-size: 13px;
	}
	
h3 {
	color: #666666;
	font-size: 12px;
	}
	
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
}

/* ~~ Dieser Container mit fester Breite umschließt alle anderen Elemente. ~~ */
.container {
	width: 921px;
	margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}


/* ~~ Dies sind die Layoutinformationen. ~~ 

1) Eine Auffüllung wird nur oben und/oder unten im div-Tag positioniert. Die Elemente innerhalb dieses div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.

*/
.wrapper {
	width: 921px;
	background-image: url(../images/common/bgd_yellow.jpg);
	background-repeat: repeat-y;
	overflow: auto;
}

#content {
	margin-left: 35px;
	margin-top: 28px;
	
	}

#content a {
	color: #fcac01;
	text-decoration:none;
	}


/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn overflow:hidden im .container entfernt wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

#header {
	width: 921px;
	height: 100px;
	background-image: url(../images/common/logo_spiegel.png);
	background-repeat: no-repeat;
	}
	
#footer {
	width: 921px;
	height: 32px;
	background-image: url(../images/common/footer.png);
	background-repeat: no-repeat;
	float: left;
	font-size: 10px;
	color: #000;
	text-align:center;
	padding-top: 5px;
	}
	
#footer a {
	
	color: #000;
	text-decoration: none;
		
		}
	
	
	/*
#shadow_right {
	width: 6px;
	background-image: url(../images/common/shadow_right.png);
	background-repeat:repeat-y;
	float: left;
	}
	*/
	
#main {
	width: 682px;
	background-image: url(../images/common/bgd_main2.png);
	float: left;
	min-height: 500px;
	}

#nav {
	width: 239px;
	min-height: 500px;
	background-color: #f8dd28;
	background-image:url(../images/common/nav_bgd.jpg);
	background-repeat:no-repeat;
	float: left;
	
	
	}
	
#nav ul{
	width: 239px;
	display:block;
	list-style:none;
	float: left;	
		}
		
#subnav_treppenunfaelle a {
	color: #6e6c64;
	}	
	
#subnav_treppenunfaelle a:hover {
	color: #000;
	text-decoration:none;
	}		
	
#nav_home {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
		

#nav_home a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_home a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}

#nav_unternehmen {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
		
#nav_unternehmen_aktiv {
	width: 214px;
	height: 22px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
	padding-top: 8px;
	padding-left: 25px;
	background-color: #fde88a;
		}
		
#nav_unternehmen_aktiv a {
	text-decoration: none;
	}


#nav_unternehmen_aktiv .subnav {
	font-size: 11px;
	line-height:14px;
	}

#nav_unternehmen a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_unternehmen a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}

#nav_treppenunfaelle {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
	

#nav_treppenunfaelle_aktiv {
	width: 214px;
	height: 95px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
	padding-top: 8px;
	padding-left: 25px;
	background-color: #fde88a;
		}
		
#nav_treppenunfaelle_aktiv a {
	text-decoration: none;
	}
	
	
		
#nav_treppenunfaelle_aktiv .subnav {
	font-size: 11px;
	line-height:14px;
	}
		

#nav_treppenunfaelle a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_treppenunfaelle a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}
	
#nav_treppensicherheit {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
	

#nav_treppensicherheit_aktiv {
	width: 214px;
	height: 55px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
	padding-top: 8px;
	padding-left: 25px;
	background-color: #fde88a;
		}
		
#nav_treppensicherheit_aktiv a {
	text-decoration: none;
	}
	
	
		
#nav_treppensicherheit_aktiv .subnav {
	font-size: 11px;
	line-height:14px;
	}
		

#nav_treppensicherheit a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_treppensicherheit a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}
	
#nav_safety-stripes {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
	

#nav_safety-stripes_aktiv {
	width: 214px;
	height: 65px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
	padding-top: 8px;
	padding-left: 25px;
	background-color: #fde88a;
		}
		
#nav_safety-stripes_aktiv a {
	text-decoration: none;
	}
	
	
		
#nav_safety-stripes_aktiv .subnav {
	font-size: 11px;
	line-height:14px;
	}
		

#nav_safety-stripes a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_safety-stripes a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}
	
#nav_shop {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
	

#nav_shop_aktiv {
	width: 214px;
	height: 22px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
	padding-top: 8px;
	padding-left: 25px;
	background-color: #fde88a;
		}
		
#nav_shop_aktiv a {
	text-decoration: none;
	}
	
	
		
#nav_shop_aktiv .subnav {
	font-size: 11px;
	line-height:14px;
	}
		

#nav_shop a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_shop a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}
	
#nav_kontakt {
	width: 239px;
	height: 30px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
		}
	

#nav_kontakt_aktiv {
	width: 214px;
	height: 21px;
	display:block;
	list-style:none;
	float: left;
	border-bottom: solid 1px white;
	padding-top: 8px;
	padding-left: 25px;
	background-color: #fde88a;
		}
		
#nav_kontakt_aktiv a {
	text-decoration: none;
	}
	
	
		
#nav_kontakt_aktiv .subnav {
	font-size: 11px;
	line-height:14px;
	}
		

#nav_kontakt a {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;	
	padding-left: 25px;
	color: #6e6c64;
	}
	
#nav_kontakt a:hover {
	height: 21px;
	padding-top: 8px;
	text-decoration: none;
	display:block;
	background-color: #fde88a;
	color: #6e6c64;
	}
	
	
/*
#nav .aktiv_treppenunfaelle {
	height: 21px;
	width: 239px;
	background-color: #fde88a;
	}
	
#nav .aktiv_treppenunfaelle a {
	height: 21px;
	width: 239px;
	background-color: #fde88a;
	}
	
#nav .aktiv_treppenunfaelle a:hover {
	height: 21px;
	width: 239px;
	background-color: #fde88a;
	}
	
	*/

#nav .aktiv {
	height: 21px;
	width: 214px;
	background-color: #fde88a;
	color:#000;
	}
	
#nav .aktiv a:hover {
	height: 21px;
	width: 214px;
	}
	

	
.stripes {
	border-bottom: solid 1px white;
	}
	
#stripes_verlauf {
	height: 17px;
	background-image:url(../images/common/stripes_verlauf.jpg);
	background-repeat:no-repeat;
	padding-left: 35px;
	padding-top: 3px;
	font-size: 11px;
	}
	
#stripes_verlauf a {
	color: 666666;
	text-decoration: none;
	}
	
#stripes_verlauf a:hover {
	color: 666666;
	text-decoration: underline;
	}
	
#topnav {
	width: 921px;
	text-align:right;
	padding-top: 58px;
	float: left;
	}	

#topnav ul {
	width: 921px;	
	text-align:right;
	list-style-type: none;
	font-size: 10px;
	float: left;
	}
	
#topnav li {
	width: 921px;
	text-align:right;
	float: left;
	}
	
#topnav a {
	text-decoration:none;
	margin-right: 6px;
	font-size: 10px;
	color: #999;
	}
	
#topnav a:hover {
	font-size: 10px;
	color: #666;
	}

.gelb {
	color: #fcac01;
	}
	
.aktiv {
	color: #000;
	}
	
/*#content img {
	/float: left;
	margin-right: 10px;
	border:none;
	}*/

#content hr {
	background:#CCC none repeat scroll 0%;
	border:0pt none;
	height:1px;
	width: 600px;
	margin-left: 0px;
	padding: 0;
	}
	

#motive hr {
	background:#CCC none repeat scroll 0%;
	border:0pt none;
	height:1px;
	width: 600px;

	}
	
.gelb1 {
	background-color: #fef1af;
	padding: 5px;
	}
	
.gelb2 {
	background-color: #fef8d3;
	padding: 5px;
	}
	
.grau {
	background-color: #f1f1e8;
	padding: 5px;
	}
	
.grau2 {
	background-color: #f5f5f0;
	padding: 5px;
	}
	
#motive img {
	float:none;
	margin-bottom: 5px;
	}
	
#motive {
	margin-left: 35px;
	margin-top: 28px;
	}
	

#galerie img {
	border: none;
	}
	
.form_center {
	text-align: center;
	}
	
#shoptable {
	
	}
	

#shoptable img {
	margin-top: 5px;
	margin-bottom: 5px;
	}
	
	
.img_treppenunfaelle {
	margin-left: 80px;
	}

.small {
	font-size: 80%;
	}