/* CSS Document */

body,td,input {
	font-family : Arial, Verdana, Helvetica, sans-serif;
	text-decoration : none;
	font-size : 13px;
	color : #5f6062;
	line-height: 24px;
}
a  { 
    color: #000000;
	text-decoration: none;
}

.bcolor1{
}
.bcolor2{
	background-color : #A1AAB8;
}
.bcolor3{
	background-color : #D2D6DE;
}
.bcolor4{
	background-color : #EDEEF2;
}
.bcolor5{
	background-color : #D0D4DB;
}
.bcolor6{
	background-color : #11145D;
}
.bcolor7{
	background-color : #52638A;
}
.bcolor8{
	background-color : #555454;
}
.contacto {
	font-size : 10px;
	color : #ffffff;
}
.txt1 {
	font-size : 14px;
}
a.menu:hover,a.submenu:hover {
	color: #666666;
}
a.submenu{
	font-size: 10px;
}
a.pdf:hover{
	text-decoration : underline;
}
a.mapa:hover{
	font-weight : bold;
}
td.tam10{
	font-size: 10px;
}
td.hlinea{
	line-height: 22px;
}
input{
	height: 20px;
	border-color:#666;
	padding:2px;
}
input.i0{
	width: 250px;
	border: 1px solid;
}
input.i1{
	width: 120px;
	border: 1px solid;
}
input.i2{
	width: 60px;
	border: 1px solid;
}.header_seite {
	font-size: 14px;
	font-style: italic;
	color: #FFFFFF;
	font-weight: bold;
}

/* ----- Styles fuer die Preisliste und kalkulator ----- */

.preisliste, .konfigurator {font-size:12px;}
.preisliste table.liste{border-collapse:collapse; width:100%}
.preisliste table.liste thead{color:#fff; background-color:#555454 !important; border:1px solid #999; border-bottom-width:0}
.preisliste .kurs, .konfigurator .titel{white-space:nowrap}/* ----- Styles nichtumbruch bei Kurstitel ----- */
.konfigurator .schule{display:none;}
.konfigurator .einheiten{text-align:center !important;}
.preisliste table.liste tr, .konfigurator table.liste tr{border-bottom:1px solid black; border-left:1px solid #999; border-right:1px solid #999}
.preisliste table.liste td, .preisliste table.liste th, .konfigurator table.liste td, .konfigurator table.liste th{padding:3px 2px 3px 2px;text-align:left; vertical-align:top; line-height:100%; font-size:11px}
.preisliste table.liste th.dauer{text-align:left}
.preisliste table.liste th.wochen{padding-left:0}
.preisliste h2, .konfigurator h2{font-size:14px; margin:0 0 0.5em 0; color:#555454}
.preisliste .datum{width:6em; margin-right:0.5em; padding:0.1em; background-color:#eee}
.preisliste .abschnitt, .konfigurator .abschnitt{background-color: #fff; width:510px; font-size:11px; border:1px solid #ddd; padding:0.5em 15px; margin:0.5em 0}
.preisliste .zebra0, .konfigurator .zebra0  {background-color:#EEEEEE}
.konfigurator table.liste thead{color:#000; background-color:#ccc !important; border:1px solid #999; border-bottom-width:0}
.konfigurator select{margin:1px; background-color:#F4F4F4; border: 1px solid #ccc;}
#auswahl td, #auswahl th{vertical-align:bottom; font-size:12px; line-height: 1.5em !important; }
#auswahl input.submit{font-weight:bold; padding:0 1em; margin:0;}
#filter label, #anfrage label{display:inline-block; width:10em; text-align:right}
.muss label{font-weight:bold}
.fehler{color:darkred; border:1px solid darkred}
#filter select, #anfrage select, #filter input.text, #anfrage input.text{width:20em}
#anfrage textarea{width:20em; height:3em}
table.liste thead th.woche{padding-left:0.75em}
table.liste th.dauer{text-align:right}
table.liste th.wochen{padding-left:0}
#name, #strasse, #telefon, #geburt{margin-top:1em}
#submit{font-weight: bold; font-size: 1em; padding:2em; margin-top:1em;}
#submit input.submit{width:20em;}
input, select{font-family: Arial, Helvetica, sans-serif;}
#auswahl td, #auswahl th{vertical-align:bottom}
.muss label{font-weight:bold}
.fehler{color:darkred; border:1px solid darkred}
#filter select, #anfrage select, #filter input.text, #anfrage input.text{width:20em; font-size:12px}
#anfrage textarea{width:20em; height:3em}
table.liste thead th.woche{padding-left:0.75em}
#name, #strasse, #telefon, #geburt{margin-top:1em}

/*************************
***** ADDITIONAL CSS *****
*************************/

/* please note: some of the classes & ids used in this document are generated in jquery (functions.js) */

html {overflow-y: scroll;}
.empty {display: none;}
#mainTable {margin: 50px auto; box-shadow: 7px 7px 30px black;}
td.bcolor1[colspan='2'][height='1'] {background-color: white;}
#navContainer {width: 100%;}
#navContainer a:hover {color: #666;}
.navBgContainer {background-image: none; background-color: #cecfd0;}
#footer {text-align: center; height: 40px;}
#footer a {color: white; font-size: 12px;}
#footer a:hover {color: #8a94a6;}
#mobileNav {display: none;}
#reMenuButton {display: none;}
#contactInfo {display: none;}
.nobreak {white-space: nowrap;}
input[type="button"] {height: auto !important;}

/************************
***** MEDIA QUERIES *****
************************/

@media screen and (max-width: 790px) {
	table, tr, td {width: auto;}
	html body {background-image: none;}
	#mainTable {margin: 0;}
	.headImg {width: 100%; height: auto;}
	.spacer {width: 100%;}
	.spacer.vertical {width: 1px;}
	img[src*='logo.gif'] {display: none;}
	#footerTable {width: 100%;}
	.navBgContainer {width: 190px;}
	img[width='208'] {width: 100%; height: auto; max-width: 208px;}
	iframe {width: 80%; height: 60vw;}
	.iFrameContainer {text-align: center;} 
	.mainContent {padding: 10px;}
	.spacer {display: none;}
	.mainContent img {width: 100%; max-width: 570px; height: auto;}
	.contentImgTable {width: 100%;}
	.iFrameTR > td {display: block;}
	.contactTable {width: 100%; text-align: center;}
	td.mainContent > table > tbody > tr > td[width="32"] {width: 32px;}
}

@media screen and (max-width: 550px) {
	#mainTable {box-shadow: none; width: 100%;}
	#mainTable > tbody > tr > td > table {width: 100%;}
	.contentContainer {display: block;}
	.contentContainer > td[width="8"] {display: none;}
	td.mainContent > table > tbody > tr > td[width='15'] {display: none;}
	.navBgContainer {display: none;}
	#mobileNav {display: block;}
	#mobileNavList {list-style-type: none; margin: 0; padding: 0; text-align: center; display: none;}
	.mobileNavItem {display: block; width: 100%; padding: 5px 0px; border-bottom: 1px solid #001a56; background-color: #d4d7df;}
	.mobileNavActive, .mobileNavItem:hover, .mobileNavItem:active {display: block; color: white; background-color: #001a56;}
	.headImg {display: none;}
	.mainHeader {background-image: url(../images/Structure/mobile-header.jpg); height: 120px; background-size: cover;}
	#reMenuButton {display: block; float: right; margin-top: 58px; margin-right: 17px;}
	#menuButton img {height: 37px; width: auto;}
	.subLine {text-align: center;}
	#contactInfo {display: block; text-align: center;}
	#contactInfo p {margin:0; padding: 7px; background-color: #466cab; color: white;}
	a[href^='tel'] {color: inherit !important;}
	.contentImgTable {background-color: #a1aab8; border: 1px solid #001a56;}
}

@media screen and (max-width: 380px) {
	.indexWrapper {display: block;}
	.picWrapper {text-align: center; display: block; width: 100%; margin-top: 40px; background-color: #a1aab8; border: 1px solid #001a56;}
	.indexPic {border-left: 1px solid #001a56; border-right: 1px solid #001a56;}
	
}