/*-----------------------------------------------------------------------------------------------------

	Datei:	zouk_css.css
	Datum:	10.05.2015
	Autor:	Mike Bühler
	
-----------------------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------------------------

Fundament
	
-----------------------------------------------------------------------------------------------------*/

html { overflow-y: scroll; }

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, code,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset, legend, input, textarea {
	padding: 0; margin: 0;
}

/* marign-bpttpm für Überschriften, Absätze, Listen etc */

h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl {
	margin-bottom: 1em;
}

/* Zitate eindrücken */
blockquote { margin: 1em 2em; }

/* Alle Listen etwas eindrücken */
ul, ol, dl { margin-left: 1em; }

/* Listenelemente etwas mehr eindrücken */
li { margin-left: 0.8em; }

/* Definition in Definitionslisten noch mehr eindrücken */
dd { margin-left: 2em }

/* verschachtelte Listen ohne Aussenabstand oben/unten */

ul ul, ul ol, ul dl,
ol ul, ol ol, ol dl,
dl ul, dl ol, dl dl {
	margin-top: 0;
	margin-bottom: 0;
}

/* Aufzählungszeichen für Listenkisten */
/* Ebene 1 - ul: square (ausgefülltes Rechteck); ol: Dezimalzahl */
ul { list-style-type: square; }
ol { list-style-type: decimal; }

/* Ebene 2 - ul: disc (ausgefüllter Kreis); ol: kleine Buchstaben*/
ul ul { list-style-type: disc; }
ol ol { list-style-type: lower-alpha; }

/* Ebene 3 - ul und ol mit circle (nicht ausgefüllter Kreis*/
ol ol ol, ol ol ul, ol ul ul, ol ul ol,
ul ul ul, ul ul ol, ul ol ol, ul ol ul {
	list-style-type: circle
}

body {
	background:#FFF;
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 85%;
}


/*---------------------------------------------------------------------------------------------------
	
	 Schriftformatierung für Überschriften 
	 
---------------------------------------------------------------------------------------------------/*
	
/* Serifenschrift für Überschrift */

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", "Times Roman", serif;
	font-weight: bold;
}

/* Überschriftengrössen, auf Basis von 13px*/
h1 { font-size: 600%;
	padding-top: 20px;
	padding-bottom: 0;
	} 	
h2 { font-size: 200%; }	
	
a.skiplink:focus, a.skiplink:active {
	position: absolute;
	left: 32768px;
	top: 32768px;
	width: 274px; 
	height: auto;
	color: black;
	background-color: white;
	padding: 3px
}

#kopfbereich {
	background: #FFF;
	width: auto;
	height: 11.885%;
	/*position: relative;*/
	color: #FFF;
	/*padding: 0;*/
	/*margin: 10px 0px -27px 0px;*/
}

/*-----------------------------------------------------------------------------------------------------

Navigation
	
-----------------------------------------------------------------------------------------------------*/

#navibereich {
	position: relative; 
	float: left;
	width: 1220px;
	background: #09F url(../bilder/navi2.png);
	background-position: top left;
	/*padding: -30px;*/
	margin: 0;
	font-size:14px
}
#textbereich1 { clear: both; }
#textbereich { clear: both; }
#navibereich { height: 1%; }

#navibereich ul {
	padding: 0;
	margin: 0;
}

#navibereich li {
	float: left;
	width: auto;
	list-style: none;
	padding: 0;
	margin: 0;
}

#navibereich a {
	position: relative;
	color: #000;
	display: block;
	padding: 7px 13px 7px 10px;
	text-decoration: none;
}

#navibereich li a.sie-sind-hier {
	background: #000;
	color: #FFF;
	font-weight: normal;
	text-decoration: underline;
}

#navibereich ul.level2 li a.sie-sind-hier {
	background: #000;
	color: #FFF;
	font-weight: normal;
	text-decoration: underline;
}


#navibereich ul a:hover,
#navibereich ul a:focus {
	background: black;
	background-position: top left;
	border-bottom: medium none;
	color: red;
	text-decoration: underline;
}

#navibereich ul a:active {
	background: none repeat scroll 0 0 #B80000;
	color: white;
}

#navibereich ul.level2 li { clear: both; }

#navibereich ul.level2 {
	position: absolute;
	left: -32768px;
	top: -32768px;
	width: 0;
	height: 0;
}

#navibereich li:hover ul.level2,
#navibereich li.sfhover ul.level2 {   /*Für das Aufklappen des Untermenüs verantwortlich (sfhover)*/
	left: auto;
	top: auto;
	display: block;
	width: auto;
	height: auto;
	border-bottom: 2px solid #f3c600;
}

#navibereich ul.level2 a{
	background: white;
	color: black;
	min-width: 12em;
}

#navibereich ul.level2 a { width: 8em; }

#navibereich ul.level2 a:active {
	background: #b80000;
	color: white;
}

#navibereich ul.level2 a:hover {
	background: black;
	color: red;
}

/*-----------------------------------------------------------------------------------------------------

Anmeldeformular
	
-----------------------------------------------------------------------------------------------------*/

html, body, form, fieldset, legend {
	margin: 0;
	padding: 0;
	
}

form#bestellung {
	width: 400px;
	border-radius: 5px;
}

fieldset {
	border: none;
	margin-bottom: 10px;
}

fieldset fieldset { margin: 0; }

form div {
	background:#0C0;
	border: 2px solid #ffffdd;
	border-radius: 5px;
	line-height: 30px;
	padding: 5px 10px;
	margin-bottom: 5px;
}

label {
	float: left;
	width: 110px;
	text-align: right;
	cursor: pointer;
	margin-right: 10px;
}

label.nofloat {
	float: none;
	width: auto;
	text-align: left;
}

fieldset fieldset legend {
	float: left;
	width: 110px;
	text-align: right;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 0;
	margin-top: 0;
	margin-right: 10px;
}

input, textarea, select {
	/*color: #333;*/
	color: #FFF;
	font-style: italic;
	font-size: 13px;
	background: white;
	border: none;
	border-radius: 3px;
	padding: 5px;
	outline: none;
	width: 200px;
}

input:focus, textarea:focus { background: #eaeaea; }

.anrede input { width: auto; }
.handicap input { width: auto; }
.land option { margin-bottom: 3px; }
.anzahl input {width: 40px; }
.agb input {
	width: auto;
	margin-left: 120px;
}
.agb a { color: black; }

button {
	display: block;
	width: 300px;
	background: #b80000;
	color: #ffffff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 10px 15px;
	border: none;
	border-radius: 20px;
	margin: auto;
}
button:hover {
	background: #d90000;
	cursor: pointer;
}

/*-----------------------------------------------------------------------------------------------------

Bildschirm
	
-----------------------------------------------------------------------------------------------------*/

/*.bildlinks {
	float:left;
	margin-left: 110px;
	margin-right: 60px;
	margin-bottom: 30px;
}

.bildmitte {
	float: left;
	margin-left: 60px;
	margin-right: 60px;
	margin-bottom: 30px;
}

.bildrechts {
	float:left;
	margin-left: 60px;
	margin-bottom: 30px;
}*/

/* Bilder von der Seite Fotos*/

.bildrechts1 {
	float:right;
	/*margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;*/
}

.bildlinks1 {
	float:left;
	/*margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;*/
}

#wrapper {
	background: black url(../bilder/hintergrund.png);
	color: FFF;
	width: auto;
	margin:auto;
}

/*-----------------------------------------------------------------------------------------------------

Gestaltung index

-----------------------------------------------------------------------------------------------------*/

.textbereich {
	overflow: hidden; 
	color: #000;
	/*width: 1180px;*/
	height: auto;
	padding:50px 20px 20px 20px;
}

.textbereich a {
	border-bottom: 1px dotted #cc0000;
}

.textbereich a:hover,
.textbereich a:focus {
	border-bottom: 1px solid #d90000;
}
.textbereich h2 { 
	color:#FFF;
	text-shadow: 2px 2px 4px #000; }

.textbereich h3 { color:#FFF; }

/*-----------------------------------------------------------------------------------------------------

Gestaltung Kursleiter

-----------------------------------------------------------------------------------------------------*/

#spalte2 {
	
-moz-column-count: 2;
   -webkit-column-count: 2;
    column-count: 2;
	column-gap: 1em;
}

.textbereichspalte {
	overflow: hidden; 
	fload: left;
	color: #F00;
	width: 1180px;
	padding: 10px 20px 10px 20px;
}

.textbereichspalte a {
	border-bottom: 1px dotted #cc0000;
}

.textbereichspalte a:hover,
.textbereichspalte a:focus {
	border-bottom: 1px solid #d90000;
}
.textbereichspalte h2 { 	
	color: #FFF;
	text-shadow: 2px 2px 4px #000; }

.textspalte {
	color: #000;
	margin:20px 0px 20px 0px;
	font-size: 16px;
}

img {
	max-width: 100%;
	height:auto;
}

/*-----------------------------------------------------------------------------------------------------

Pfadangabe

-----------------------------------------------------------------------------------------------------*/

.textbereichpfadangabe {
	overflow: visible;
	color: #FFF;
	/*width: 1220px;*/
	padding: 10px 10px 0px 10px;
}

.textbereichpfadangabe a {
	border-bottom: 1px dotted #cc0000;
}

.textbereichpfadangabe a:hover,
.textbereichpfadangabe a:focus {
	border-bottom: 1px solid #d90000;
}


@media screen and (min-width: 1220px){
	


#wrapper {
	background: black url(../bilder/hintergrund.png);
	color: FFF;
	width: 1220px;
	margin:auto;
}

.textbereich {
	overflow: hidden; 
	color: #000;
	/*width: 1180px;*/
	height: 950px;
	padding:50px 20px 20px 20px;
}


.bildlinks {
	float:left;
	margin-left: 110px;
	margin-right: 60px;
	margin-bottom: 30px;
}

.bildmitte {
	float: left;
	margin-left: 60px;
	margin-right: 60px;
	margin-bottom: 30px;
}

.bildrechts {
	float:left;
	margin-left: 60px;
	margin-bottom: 30px;
}

.bildrechts1 {
	float:right;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
}

.bildlinks1 {
	float:left;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
}

#kopfbereich {
	background: #FFF;
	width: auto;
	height: 145px;
}
}