/* =============================
Styleshhet für  Hypose Stuttgart

Stand: Gestaltung im Kontaktformular
Datei: bildschirm.css
Datum: 18. April 2009
Autor: Hypnose Stuttgart

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

* { padding: 0; margin: 0; }

h2, p, ul, ol { margin-bottom: 1em; }

ol ul { margin-bottom: 0; }

li { margin-left: 2em; }	
	
	
/* ===============================
	2. Allgemeine Styles
	=============================*/
html { height: 101%; }

body {
  background-color: #EFEFEF; /* helles Grau */
  color: white;
  font-family: Verdana, Arial, Helvetica, sans-serif; 	
  font-size: small;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 100%; padding: 10px 0 10px 5px; background-color: #B3CCE6;}

address {
	text-align: center;
	font-size: 80%;
	font-style: normal;
	letter-spacing: 2px;
	line-height: 1.5;
}	

/* CSS zur Gestaltung der Tabelle */
table {
  width: 55em; 
  border-collapse: separate; 
  background: white; 
  color: black; 
  border: 1px solid #333; 
}
caption {
  font-size: 120%; 
  font-weight: bold; 
  background-color: white; 
  color: black; 
  text-align: left; 
  padding: 1em; 
  padding-left: 0; 
}
th, td {
  padding: 0.5em 1em; 
  text-align: left; 
  vertical-align: top; 
}
th {
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 100%;
  font-variant: small-caps; 
  letter-spacing: 2px; 
  font-weight: normal; 
}
thead {
  background-color: #f3c600;
  color: black; 
  border-bottom: 1px solid #999; 
}
tfoot {
  border-top: 1px solid #999; 
}
tr.zebrastreifen {
  background-color: #ffeda0; 
  color: black; 
}
tbody tr:hover {
  background-color: #d90000;
  color: white; 
}


/* ==========================
	Hyperlinks			 */	
a { 
	text-decoration:none; 
	outline: none;
}

a:hover, a:focus { border-bottom: 1px solid; }
a:active {
	background-color:#8DDEE0;
	color:#FFFFFF;
}

/* ==========================
	Klassen und IDs			 */	

.skiplink {
	position: absolute;
	top: -5000px;
	left: -5000px;
	width: 0;
	height: 0;
	overflow:hidden;
	display: inline;
}

#logo {
	background-color:#FFFFFF;
	color: #000000;
}

.Erfolgsüberschrift {
	background-color:#FF0000;
	color:#FFFFFF;
	font-weight:bold;
	font-size:85%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.Erfolgsüberschrift2 {font-size: 80%}
.Erfolgsüberschrift3 {font-size: 85%}

.Schrifterfolgsrahmen {font-size: x-small}

.Stil1 {font-weight: bold}
.Stil2 {font-weight: bold}
/* ===============================
	3. Styles für Layoutbereiche
	=============================*/

#wrapper {
  background: #FFF url(../image/farbverlauf.jpg) repeat-y top left; /* Hintergrundfarbe im Hauptbereich sowie NAVI früher war E1F7F7 */
  color: black;
  width: 996px;
  margin: 0px auto; /* Abstand zu Oberenrand */
}

#kopfbereich {
	background-color:#FFF;
	background-image:url(../image/farbverlauf.jpg);
	background-repeat:repeat-y; /* nur noch vertikal wiederholen */
	color: black;
	padding: 10px 0px 10px 0px ; /* oben -rechts - unten - links */
}


#navibereich {
	background-color: #FFF; /* Farbe Navibereich links  */
	float: left; /* Ort des Navi links -rechts usw. */
	width: 188px; /* 15px Breite zum Text MACHT SCHWIERIGKEITEN IE */
	padding-left: 13px; /* Abstand Links */
	padding-top: 0; /* Abstand oben */
}
	#navibereich ul {
	background-color: #FFF; /* Farbe des Navibereichs hinten */
	width: 14em; /* Breite des Navi */
	border-top: 1px solid #333333; /* Abstand zum Kopfbereich */
	}
	#navibereich li {
	list-style-type: none;
	border-left: 1px solid #33333; /* Dicke des linken Strich, kann mit 0 entfernt werden */
	border-bottom: 1px solid #333333; /* dicke der Navibutton Strich */
	margin: 0;
	}
	#navibereich a,
	#navibereich span {
		display: block;
		text-decoration: none;
		background-color: #ebf2f8; /* d0d8e2 Farbe Navibuttons  */
		color: #000;
		padding: 4px;
		border-left: 3px solid #d0d8e2; /* dicke des YOU ARE HERE Symbol links muss dableiben und identisch sein wie beim hover */
		}
		#navibereich a:hover,
		#navibereich a:focus {
			background-color: #FFF;  /* Farbe Navibuttons beim hover */
			color: black;
			border-left-color: #d900000;
			border-bottom: none;
			border-left: 3px solid #F00; /* dicke des YOU ARE HERE Symbol links beim hover */
		
		}
		#startseite #navi01 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#raucherentwoehnungseite #navi02 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#abnehmseite #navi03 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#prufseite #navi04 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#selbstseite #navi05 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#therapieseite #navi06 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#angstseite #navi07 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#phobieseite #navi08 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#entspanunnungseite #navi09 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#kurseseite #navi10 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#praxisseite #navi11 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#fuaseite #navi12 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#presseseite #navi13 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#impressumseite #navi14 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#kontaktseite #navi15 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		#kontaktseite #navi16 span {
		background-color: white;
			color: black;
			border-left-color: #d90000;
			border-bottom: none;
		}
		
#spalte03 {
	float:right;
	width: 150px;
	padding: 0px;
}		
		
#textbereich {
	background-color: #FFFFFF;
	padding: 1px 10px 20px 20px; /* Abstand Text mitte - 1. Position abstand zu oben*/
	margin-right: 160px; /* Spaltengröße 3 Spalte */
	margin-left: 200px; /* Spaltengröße Menüspalte */
}
	#textbereich h1 {
		background-color:#b3cce6;
		color : #ffffff;
		font-weight : bold;
		padding:3px;
	}
	#textbereich a {
		border-bottom: 1px dotted;
	}
	#textbereich a:hover,
	#textbereich a:focus { 
		border-bottom: 1px solid;
	}

#fussbereich {
clear: both;
	text-align: center;
	font-size: 80%;
	font-style: normal;
	letter-spacing: 2px;
	line-height: 1.5;
	background-color: #FFFFFF;
	padding: 10px 20px 20px 20px;
	border-top: 1px solid #999999;
	margin-top: 20px;
}

		
/* ===============================
	4. Sonstige Styles
	=============================*/

/* =============================
   Kontaktformular */

form { 
	background-color: #ebf2f8;
	color:#000;
	width:500px;
	padding:20px;
	border: 1px solid #808040;  
}

label {
	display:block;
	cursor:pointer;
}

input#absender, textarea  {
	width : 300px;
	border : 1px solid #8c8c8c;
	margin-bottom : 1em;
} 

input#subject {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}

input#vorname {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}

input#nachname {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
input#termin {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
input#strasse {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
input#firma {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
input#geburtsdatum {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
input#telefon {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
input#plz {
	width:300px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
testarea { height:7em; }

input#absender:focus,  textarea:focus  {
	background-color : #d9d9d9;
	color : black;
}
input#subject:focus {
	background-color : #d9d9d9;
	color : black;
}
input#vorname:focus {
	background-color : #d9d9d9;
	color : black;
}
input#geburtsdatum:focus {
	background-color : #d9d9d9;
	color : black;
}
input#firma:focus {
	background-color : #d9d9d9;
	color : black;
}
input#telefon:focus {
	background-color : #d9d9d9;
	color : black;
}
input#termin:focus {
	background-color : #d9d9d9;
	color : black;
}
input#nachname:focus {
	background-color : #d9d9d9;
	color : black;
}

input#strasse:focus {
	background-color : #d9d9d9;
	color : black;
}
input#plz:focus {
	background-color : #d9d9d9;
	color : black;
}


/* ===============================
	ENDE DES STYLES
	=============================*/