/* ========================================================================= 
Stylesheet City-Pension Dessau-Roßlau
Datei: bildschirm.css
Stand: 07.01.2015
Auto: Christel Heppner
Kunde: City-Pension Dessau-Roßlau

Aufbau:	1. Kalibrierung und allgemeine Styles
		2. Styles für Layoutbereiche
		3. Sonstige Styles
========================================================================= */


/* ========================================================================= 
1. Kalibrierung und allgemeine Styles
========================================================================= */

* { padding: 0; margin: 0; } /* Abstände für alle Elemente auf Null setzen */
/*  * html #navibereich { width: 18em; }  Patch für ausschließlich IE6 */



  * html #navibereich {
    width: 100%;   /* Breitenangabe fuer IE 5.x */
    w\idth: 18em;  /* Breitenangabe fuer IE 6 */
  }





h2, p, ul, ol { margin-bottom: 1em; } /* Abstand nach unten korrigieren */
ul ul { margin-bottom: 0; } /* ohne Abstand bei verschachtelten Listen */
li { margin-left: 1em; } /* Abstand nach links korrigieren */

/* allgemeine Selektoren */

html { height: 101% } /* erzwingt Scrollbar im Firefox */
body { /* Gestalte das HTML-Element mit dem Namen body = allg. Hintergrund */
	color: #e9e5ce; /* Schriftfarbe */
	background-color: #373f43; /* Hintergrundfarbe */
	background-image: url(image/other/bg_linie.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Schriftart */
	font-size: small;  /* Schriftgröße ... veränderbar */
}


h1 { font-size: 150%; }
h2 { font-size: 130%; }

.bildlinks {
	display: inline;
	float: left;
	padding: 3px;
	border: 1px solid #373f43;
	margin-right: 10px;
	margin-bottom: 10px;
}
.bildrechts {
	display: inline;
	float: right;
	padding: 3px;
	border: 1px solid #373f43;
	margin-bottom: 10px;
	margin-left: 10px;
}

.bildohne {
	display: inline;
	float: right;
	padding: 3px;
	border: none;
	margin-bottom: 10px;
	margin-left: 10px;
}



address {
	text-align: center; /* zentrieren */
	font-size: 70%; /* etwas kleiner */
	font-style: normal; /* normale Schrift, nicht kursiv */
	letter-spacing: 2px; /* Laufweite etwas grösser */
	line-height: 1.5em; /* Zeilenabstand */
}

/* Hyperlinks allgemein */

a { text-decoration: none; } /* Unterstreichung entfernen */
a:link { color: #cc0000; } /* Reihenfolge der Zustände ist sehr wichtig!!! */
a:visited { color: #cc0000; } 
a:hover, a:focus { /* hover: wenn der Mauszeiger darüber schwebt; focus: beim Durchsteppen mit TAB-Taste  */
	border-bottom: 1px solid #cc0000; /* Blau */
} 
a:active { /* active: der gerade angeklickt wird */
	color: white;
	background-color: #cc0000; /* Hinterlegung des Links mit Farbbalken hier: Blau */
}

/* allgemeine Klassen und ID's */

.skiplink { /* den Skiplink für Screenreader ausblenden ... mit display: none liest auch der screenreader nicht mehr vor!!! */
	position: absolute;
	top: -2000px;
	left: -3000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}
#logo { 
	color: black;
	background-color: white;
	padding: 5px; /* Auffüllung der Inhaltsfarbe Weiß um 5px um das Logo herum */
	border: 5px solid #d9d9d9; /* hellgraue durchgezogene Linie von 5px */
}

/* ========================================================================= 
2. Styles für Layoutbereiche
========================================================================= */

#wrapper { /* Gestalte das HTML-Element mit der id="wrapper" = Schutzumschlag */
	color: #373f43; /* Legt Farbe für Schrift im Inhalt fest o. Bild in Inhaltsbereich bei mehr Text überlagert */
	background: #e9e5ce;  /* Legt Farbe für bg im Inhalt fest o. Bild in Inhaltsbereich bei mehr Text überlagert */
	width: 1024px; /* Breite des Inhaltsbereiches */
	margin: 0px auto; /* Abstand nach oben */
}






#kopfbereich {
	position: relative; /* Element ist positioniert für eingebundene Elemente bleibt aber im Fluss */
	color: #e9e5ce;
	background-color: #e9e5ce; /* Head bg Farbe */
	background-image: url(image/other/kopf-logo__DE_151101.jpg);  /*für Head */
	padding: 35px 20px; /* Innenabstände definieren */
	/* border-top: 2px solid #cc0000;*/
}
	#kopfbereich p {
		position: absolute;
		top: 10px;
		right: 10px;
		font-weight: bold;
		padding: 5px 0;
		margin-bottom: 0;
	}
	#kopfbereich p span {
		color: #cc0000;  /* Farbe der Schrift im Absatz im Kopfbereich */
	}







#navibereich {
	float: left; 
  	width: 203px; /* genaue Breite - Position von der linken Kante aus - der Navigationsleiste inkl. hg-bereich */
	padding-left: 0px;
	padding-top: -1px;
}
	#navibereich ul {  /* Listenelemente in Navigation gestalten */
		width: 16em; /* Breite der Button = des anklickbaren Bereiches */
		border-top: 1px solid #373f43; /* Linie oben evtl. anders farbig??? */
	}
	#navibereich li {
	list-style-type: none; /* ohne Aufzählungspunkte */
	/*border-left: 1px solid white;  linke Umrisslinie der Navigation - hier: Blau */
	border-bottom: 1px solid #373f43;  /* Linie unten - Listenelemente in Navigation gestalten */
	margin: 0;
	}
	
	
	
	
	#navibereich a { 
	display: block; /* ganze Fläche anklickbar machen ... farbige Hinterlegung */
	text-decoration: none;
	color: black;
	background-color: #999; /* Hintergrund nicht aktiver Navipunkt  */
	padding: 2px; /* Abstände zu Buttonbegrenzung von Schrift aus */
	border-left: 0px solid #373f43; /* Begrenzungslinie der Button links */
	border-right: 8px solid #373f43; /* Begrenzungslinie der Button rechts */
	}	
	#navibereich a:hover,
	#navibereich a:focus,
	#home #navi00 a, /* den aktuellen Navigationspunkt hervorheben*/
	#ueber_01 #navi01 a,
	#firma_02 #navi02 a,
	#leihe_03 #navi03 a,
	#arra_04 #navi04 a,
	#preis_05 #navi05 a,
	#buche_06 #navi06 a,
	#umgeb_07 #navi07 a,
	#kont_08 #navi08 a{
	color: #e9e5ce;
	background-color: #e9e5ce;
	border-left-color: #e9e5ce; /* ersetzt vorherige linke breitere Begrenzung der Navi */
	border-right-color: #e9e5ce;
	border-bottom: none; /* Unterstreichung aus */
	font-weight: bold;
	}	
	#navibereich a:active {
	}
	
	
	
	
	#navibereich a.speziell:link {
	display: inline;	
	text-decoration: none;
	color: e9e5ce;
	background-color: #e9e5ce; /* Hintergrund nicht aktiver Navipunkt  */
	padding: 0px; /* Abstände zu Buttonbegrenzung von Schrift aus */
	border-left: 0px solid #e9e5ce; /* Begrenzungslinie der Button links */
	border-right: 0px solid #e9e5ce; /* Begrenzungslinie der Button rechts */
   }
  	#navibereich a.speziell:link:hover,
	#navibereich a.speziell:link:focus,
	{
	color: #e9e5ce;
	background-color: #e9e5ce;
	border-left-color: #e9e5ce; /* ersetzt vorherige linke breitere Begrenzung der Navi */
	border-right-color: #e9e5ce;
	border-bottom: none; /* Unterstreichung aus */
	font-weight: bold;
	}	
	#navibereich a.speziell:link:active {
	}
	
	
	 
   
	
	
	.printOnly {
    display: none; /* nur in der Printversion sichtbar */
}

	


/* ==============================================
   Unterpunkte bei Unterseiten hervorheben (je 201 Punkte)
   ============================================== */



	#navibereich li li a { 
	display: block; /* ganze Fläche anklickbar machen ... farbige Hinterlegung */
	text-decoration: none;
	color: black;
	background-color: #e9e5ce; /* Hintergrund nicht aktiver Navipunkt  */
	/* background-image: url(image/other/navi_a_.jpg);*/
	padding: 4px; /* Abstände zu Buttonbegrenzung von Schrift aus */
	border-left: 0px solid #373f43; /* Begrenzungslinie der Button links */
	border-right: 8px solid #373f43; /* Begrenzungslinie der Button rechts */
	}	
	
	#navibereich a:hover,
	#navibereich a:focus,
	
	#home #navi00 a, /* den aktuellen Haupt-Navigationspunkt hervorheben*/
	#ueber_01 #navi01 a,
	#firma_02 #navi02 a,
	#leihe_03 #navi03 a,
	#arra_04 #navi04 a,
	#preis_05 #navi05 a,
	#buche_06 #navi06 a,
	#umgeb_07 #navi07 a,
	#kont_08 #navi08 a
	
	{
	color: #373f43;
	background-color: #e9e5ce;
	border-left-color: #e9e5ce; /* ersetzt vorherige linke breitere Begrenzung der Navi */
	border-right-color: #e9e5ce;
	border-bottom: none; /* Unterstreichung aus */
	font-weight: bold;
	}	


    #ueber_0101 #navi01 a,
	#ueber_0102 #navi01 a,
	#ueber_0103 #navi01 a,
	#ueber_0104 #navi01 a,
	#ueber_0105 #navi01 a,
	
    #firma_0201 #navi02 a,
	#firma_0202 #navi02 a,
	#firma_0203 #navi02 a,
	#firma_0204 #navi02 a,
	
    #leihe_0301 #navi03 a,
	#leihe_0302 #navi03 a,
	#leihe_0303 #navi03 a,
	#leihe_0304 #navi03 a,
	#leihe_0305 #navi03 a,
	#leihe_0306 #navi03 a,
	#leihe_0307 #navi03 a,


    #arra_0401 #navi04 a,
	#arra_0402 #navi04 a,
	#arra_0403 #navi04 a,
	#arra_0404 #navi04 a,
	
    #preis_0501 #navi05 a,
	#preis_0502 #navi05 a,
	#preis_0503 #navi05 a,	
	#preis_0504 #navi05 a,
	#preis_0505 #navi05 a,
	#preis_0506 #navi05 a,
	#preis_0507 #navi05 a,
	#preis_0508 #navi05 a,
	
    #buche_0601 #navi06 a,
	#buche_0602 #navi06 a,
	#buche_0603 #navi06 a,	

    #umgeb_0701 #navi07 a,
	#umgeb_0702 #navi07 a,
	#umgeb_0703 #navi07 a,
	
	#kont_0801 #navi08 a,
	#kont_0802 #navi08 a
	
	{
	color: #373f43;
	background-color: #e9e5ce;
	border-left-color: #e9e5ce; /* ersetzt vorherige linke breitere Begrenzung der Navi */
	border-right-color: #e9e5ce;
	border-bottom: none; /* Unterstreichung aus */
	font-weight: bold;
	}	



/* ==============================================
   Hauptmenüpunkte bei Unterseiten auch hervorheben (je 201 Punkte)
   ============================================== */

    #ueber_0101 #navi0101 a,
	#ueber_0102 #navi0102 a,
	#ueber_0103 #navi0103 a,
	#ueber_0104 #navi0104 a,
	#ueber_0105 #navi0105 a,
	
    #firma_0201 #navi0201 a,
	#firma_0202 #navi0202 a,
	#firma_0203 #navi0203 a,
	#firma_0204 #navi0204 a,
	
    #leihe_0301 #navi0301 a,
	#leihe_0302 #navi0302 a,
	#leihe_0303 #navi0303 a,
	#leihe_0304 #navi0304 a,
	#leihe_0305 #navi0305 a,
	#leihe_0306 #navi0306 a,
	#leihe_0307 #navi0307 a,


    #arra_0401 #navi0401 a,
	#arra_0402 #navi0402 a,
	#arra_0403 #navi0403 a,
	#arra_0404 #navi0404 a,
	
    #preis_0501 #navi0501 a,
	#preis_0502 #navi0502 a,
	#preis_0503 #navi0503 a,	
	#preis_0504 #navi0504 a,
	#preis_0505 #navi0505 a,
	#preis_0506 #navi0506 a,
	#preis_0507 #navi0507 a,
	#preis_0508 #navi0508 a,
	
    #buche_0601 #navi0601 a,
	#buche_0602 #navi0602 a,
	#buche_0603 #navi0603 a,	

    #umgeb_0701 #navi0701 a,
	#umgeb_0702 #navi0702 a,
	#umgeb_0703 #navi0703 a,
	
    #kont_0801 #navi0801 a,
	#kont_0802 #navi0802 a


	
	{
	color: #373f43;
	background-color: #e9e5ce;
	border-left-color: #e9e5ce; /* ersetzt vorherige linke breitere Begrenzung der Navi */
	border-right-color: #e9e5ce;
	border-bottom: none; /* Unterstreichung aus */
	font-weight: bold;
	}	   










#textbereich {
	float: right; /*Platzierung des Textes neben der Navigation*/
	width: 760px;
	padding: 0px 10px 20px 20px; /* Innenabstände definieren o re u li*/
}

#textbereich a { /* Hyperlinks nur im Textbereich anders markieren??? */
	border-bottom: 1px dotted #cc0000;
}
	#textbereich a:hover, /* Hyperlinks nur im Textbereich werden durchgezogen ... vorher gepunktet */
	#textbereich a:focus {
		border-bottom: 1px solid #cc0000;
	}
	
.Rot {
	color: #cc0000
	}	
	
.bg {
	color: #e9e5ce
	}	
	

/* #textbereich p {
	margin-right: 300px;
	}
*/

#fussbereich { /* Abstand und eine obere Rahmenlinie für den Fussbereich erstellen */
	clear: both;
	color: #ffffff;
	background-color: #999;
	padding: 5px 20px 10px 20px; /* Abstand zwischen address und Rahmenlinie darüber ... re unten li */
	border-top: 4px solid #373f43; /* Rahmenlinie oben */
	border-bottom: 1px solid #e9e5ce;
	/* margin-top: 20px; Abstand zwischen Linie und Element darüber entfernt */
}


#fussbereich a { text-decoration: none; } /* Unterstreichung entfernen */
#fussbereich a:link { color: #fbec9a; } /* Reihenfolge der Zustände ist sehr wichtig!!! */
#fussbereich a:visited { color: #e9e5ce; } 
#fussbereich a:hover, a:focus { /* hover: wenn der Mauszeiger darüber schwebt; focus: beim Durchsteppen mit TAB-Taste  */
	border-bottom: 1px solid #e9e5ce; /*  */
} 
#fussbereich a:active { /* active: der gerade angeklickt wird */
	color: white;
	background-color: #373f43; /* Hinterlegung des Links mit Farbbalken hier:  */
}



/* ========================================================================= 
3. Sonstige Styles
========================================================================= */

/* Das Umgebungformular gestalten */
form{
	background-color: #bbd5ff;
	width: 714px; /* Breite des Formulars */
	padding: 20px;
	border: 1px solid #031c47;
}
label { 
display: block; /* Beschriftung auf eigener Zeile */
/* cursor: pointer; Mauszeiger wird zur Hand */
}


	


input#Vorname, input#Name, input#Alter-Kinder, input#Strasse, input#PLZ-Ort, input#vorherigeAdresse, input#Geburtsort, input#Staatsangehoerigkeit, input#Arbeitgeber, input#s_email, input#Nachricht, input#Telefon,
textarea {
	width: 400px;
	border: 1px solid #031c47;
	
}


 
input#wohnhaft-seit, input#Maximale-Monatsrate, input#Kreditrahmen, input#Geburtsdatum, input#beschaeftigt-seit, input#Nettoeinkommen,
textarea {
	width: 65px;
	border: 1px solid #031c47;
	
}


textarea {
	height: 7em;
}
/* input#Absender:focus, input#Kreditrahmen:focus,
textarea:focus {
	background-color: #FC9;
}*/

/* Die kleine Galerie */

div.galerie {
	background-color: #eee;
	width: 500px;
	padding: 10px;
	padding-top: 25px;
	border: 1px solid black;
	margin: 0 3px 3px 0;
}
div.galerie img {
	float: right;
	margin-right: 15px;
}

/* ========================================================================= 
ENDE des Stylesheets (standardkonform, barrierefrei und flexibel!!!
========================================================================= */