@charset "utf-8";
/* CSS Document für Hairlich*/

/* Befehl, dass alle Positionen  auf 0 gesetzt werden */
/* dadurch gibt es keine Verschiebungen bei den Browsern */
/* * steht für alle Elemente */
* {
margin: 0;
padding: 0;
}

/* alle Rahmen im Layout werden vorerst auf 0 gesetzt */
html, body {
border: 0 solid;
}

/* Grunddefinition für Schrift und Farbe */
body {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #fdf9f8 url(../bilder/hintergrund-verlauf.jpg) 0 0 repeat-x;
text-align: center; /* der body wird zentriert - zentriertes Design */
}

/* Die Schriftgröße in einem Absatz ist generell 11px */
p {
font-size: 11px;
padding: 15px 10px 10px 15px;
line-height: 15px;
}

h1 {
font: 16px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #dc0030;
padding: 5px 0 10px 5px; /* Rand nach innen: 10px nach oben + 10px nach unten + 20px nach links */
}

h2 {
font: 16px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
padding: 20px 0 5px 45px; 
}

/* Die Schriftgröße in einem Absatz ist generell 11px */
.klein {
font-size: 9px;
font-weight: normal;
}

/* Die Schriftgröße in einem Absatz ist generell 11px */
.fett {
font-size: 11px;
font-weight: bold;
}

.abstand-links{
margin-left: 15px;
margin-top: 5px;
}


/* Die Schriftgröße in einem Absatz ist generell 11px */
.fett-rot {
font-size: 11px;
color: #dc0030;
font-weight: bold;
}

/* Links */
a {
font-size: 11px;
font-weight: bold;
color: #dc0030;
text-decoration: none;
}

/* sobald die Mouse darüber geht, werden sie fett - bleiben blau */
a:hover {
color: #fff;
font-weight: bold;
text-decoration: none;
background-color: #dc0030;
}

a img{
border: 0 none;
text-decoration: none;
}

.rahmen {
border: 1px #000 solid;
}

.rahmen-abstand {
border: 1px #000 solid;
margin-top: 20px;
}

.fltrt {
float: right;
margin-left: 8px;
}

.fltlft {
float: left;
margin-right: 8px;
}

.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}

/* IDs */

/* website steht für den gesamten container, in dem alle divs liegen */
/* nicht mit dem body verwechseln - die Bereiche links und rechts, die sich je nach Browser vergrößern gehören nicht zur #website */
#website {
position: relative; /* dadurch wird das Layout zentriert - wichtig in Verbindung mit margin: 0 auto */
width: 1000px;
margin: 0 auto; /* dadurch wird das Layout zentriert - wichtig in Verbindung mit position: relativ */
text-align: left; /* alles in der website soll aber linksbündig sein */
background: transparent url(../bilder/hintergrund-verlauf.jpg) 0 0 repeat-x;
}

#inhalt {
	position: absolute;
	top: 149px;
	left: 432px;
	width: 560px;
	z-index: 15;
	background: transparent;
	visibility: visible;
}

#inhaltkopf {
width: 560px; 
height: 69px;
z-index: 15;
background: transparent url(../bilder/inhalt-kopf.jpg) 0 0 no-repeat;
}

#inhaltmitte {
width: 560px;
z-index: 15;
background: transparent url(../bilder/inhalt-mitte.jpg) 0 0 repeat-y;
}

#inhaltfuss {
width: 560px; 
height: 47px;
margin-bottom: 10px;
z-index: 15;
background: transparent url(../bilder/inhalt-fuss.jpg) 0 0 no-repeat;
}

#kopf {
display: block;
width: 1000px;
height: 132px;
background: transparent; 
}

#kopf-links {
position: absolute;
top: 0px;
left: 0px;
width: 468px;
height: 132px;
z-index: 5;
background: transparent url(../bilder/kopf-links.jpg) no-repeat;
}

#kopf-rechts {
position: absolute;
top: 0px;
left: 468px;
width: 532px;
height: 132px;
z-index: 5;
background: transparent url(../bilder/kopf-rechts.jpg) no-repeat;
}

#mitte {
display: block;
width: 1000px;
height: 440px;
background: transparent; 
}

#mitte-links {
position: absolute;
top: 132px;
left: 0px;
width: 468px;
height: 440px;
z-index: 5;
background: transparent url(../bilder/mitte-links.jpg) no-repeat;
}

#mitte-rechts {
position: absolute;
top: 132px;
left: 468px;
width: 532px;
height: 440px;
z-index: 5;
background: transparent url(../bilder/mitte-rechts.jpg) no-repeat;
}

#unten {
display: block;
width: 1000px;
height: 128px;
background: transparent; 
}

#unten-links {
position: absolute;
top: 572px;
left: 0px;
width: 468px;
height: 128px;
z-index: 5;
background: transparent url(../bilder/unten-links.jpg) no-repeat;
}

#unten-rechts {
position: absolute;
top: 572px;
left: 468px;
width: 532px;
height: 128px;
z-index: 5;
background: transparent url(../bilder/unten-rechts.jpg) no-repeat;
}

#bild-inhalt {
	position: absolute;
	top: 217px;
	left: 270px;
	width: 270px;
	height: 240px;
	z-index: 25;
	background: transparent url(../bilder/frau-inhalt.jpg) no-repeat;
}


.footertext {
color: #000;
text-decoration: none;
}

/* hier die Definition für Links im Footerbereich */
.footertext a {
font-size: 9px;
color: #000;
font-weight: normal;
}

/* hier die Definition für Links im Footerbereich beim hovern */
.footertext a:hover, a:active {
color: #767676;
font-weight: normal;
background-color: transparent;
border-bottom: 1px #000 dotted;
}

p.footertext {
font-size: 12px;
padding: 105px 0px 0px 40px;
line-height: 16px;
}

/* Navigation*/
#navoben {
	position: absolute;
	top: 62px;
	left: 100px;
	width: 600px;
	height: 19px;
	z-index: 20;
}

/* die Definition der Links in der oberen Navigation */
#navoben a {
display: block; /* notwenidig, damit ein padding vergeben werden kann */
float: left; /* die List-Elemente sollen nebeneinander stehen */
font-size: 13px;
font-weight: normal;
color: #000;
padding: 0 30px 5px 18px;
background: transparent url(../bilder/button-1.jpg) top left no-repeat;
text-decoration: none;
}

/* die Definition, sobald man mit der mouse darüber geht und klickt */
#navoben a:hover, a:active {
color: #000;
font-weight: normal;
background: transparent url(../bilder/button-2.jpg) top left no-repeat;
border-bottom: 2px dotted #999;
}


#navunten {
	position: absolute;
	top: 583px;
	left: 30px;
	width: 420px;
	font-size: 12px;
	font-weight: normal;
	list-style-type: none;
	z-index: 30;
}


#navunten li {
display: inline;
padding: 0 0 0 0;
}

/* die Definition der Links in der oberen Navigation */
#navunten a {
display: block; /* notwenidig, damit ein padding vergeben werden kann */
float: left; /* die List-Elemente sollen nebeneinander stehen */
font-size: 12px;
font-weight: normal;
color: #fff;
padding: 2px 8px 3px 8px; /* die Abstände der Punkte 2px nach oben, 13px nach rechts, 4px nach unten, 13px nach links */
text-decoration: none;
}

/* die Definition, sobald man mit der mouse darüber geht und klickt */
#navunten a:hover, a:active {
color: #fff;
font-weight: normal;
background: transparent;
border-bottom: 2px dotted #fff;
}