@charset "utf-8";
* {
	margin: 0;
	padding: 0;
}

body  {
	font: 12px/20px Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: left; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
	background-image: url(../images/VI_Background_1400x933px.jpg);
	background-repeat: repeat;
	height: 650px;
    }
    .thrColAbsHdr #container {
	position: relative; /* Durch Hinzufügen von position: relative können Sie die beiden Randleisten im Verhältnis zu diesem Container positionieren. */
	width: 900px;  /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
	background: url(../images/bg_container.gif) 0 0 repeat-y #fff; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border: 1px solid #000000; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    } 
	
#sidebar1 h4 {
	height: 13px;
	font-size: 10px;
}

    
    /* Tipps für absolut positionierte Randleisten mit Kopf- und Fußzeile:
    1. Für absolut positionierte (AP) Elemente müssen Sie einen oberen (top) und einen seitlichen (right oder left) Positionswert angeben. Wenn der Wert für top fehlt, beginnt das AP-Element standardmäßig direkt nach dem letzten Element in der Quellenabfolge der Seite. Wenn also die Randleisten in der Quellenabfolge des Dokuments die ersten Elemente im #container sind, erscheinen sie ganz oben im #container, auch wenn für sie kein top-Wert angegeben wurde. Falls sie aber später in der Quellenabfolge an eine andere Stelle verschoben werden sollten, benötigen sie einen top-Wert, damit sie an der gewünschten Position stehen.
    2. Absolut positionierte (AP) Elemente werden aus dem Dokumentfluss herausgenommen. Dies bedeutet, dass den benachbarten Elementen ihre Existenz unbekannt ist und dass sie nicht berücksichtigt werden, wenn diese Elemente den ihnen zugedachten Platz auf der Seite einnehmen. Ein AP-div sollte daher nur als Randspalte eingesetzt werden, wenn Sie sicher sind, dass das mittlere #mainContent-div immer die größte Inhaltsmenge hat. Sollte eine der Randleisten eine größere Inhaltsmenge aufweisen, würde diese Randleiste uneingeschränkt über das Ende des übergeordneten div sowie in diesem Fall auch über das Ende der Fußzeile hinauslaufen.
    3. Sofern die oben genannten Bedingungen erfüllt sind, können Sie mit absolut positionierten Randleisten die Quellenabfolge in Dokumenten auf einfache Weise steuern.
    4. Bei einer Änderung der Quellenabfolge sollte der top-Wert mit der Höhe der Überschrift übereinstimmen, weil dadurch die Spalten und die Überschrift visuell einheitlicher wirken.
    */
    .thrColAbsHdr #header {
	height: 160px;
	background-image: url(../images/VI_Header_900x160px.jpg);
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 20px;
    } 
	
	.thrColAbsHdr #header_blank {
	height: 5px;
	/* background-image: url(../images/VI_Header_900x160px.jpg); */
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 20px;
    } 
	
	
    .thrColAbsHdr #header h1 {
    	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
    	padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
    }
    .thrColAbsHdr #sidebar1 {
	float: left;
	width: 180px; /* Mit der Auffüllung wird gewährleistet, dass der Inhalt des div die Kanten nicht berührt. */
	background-color: #007BAF;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 20px;
	background-repeat: repeat-y;
	left: 0px;
	line-height: 15px;
    }
    .thrColAbsHdr #sidebar2 {
	top: 160px;
	width: 160px; /* Mit der Auffüllung wird gewährleistet, dass der Inhalt des div die Kanten nicht berührt. */
	padding: 10px;
	float: left;
    }
    .thrColAbsHdr #mainContent {
	margin: 15px 0 0 0; 
	padding: 0 10px 20px 10px;
	float: left;
	width: 479px;
    }
	.thrColAbsHdr #mainContent li {
	list-style-image: url(../images/vi_list.gif);
	list-style-position: outside;
	margin: 0 0 20px 15px;
	}
	
	.thrColAbsHdr #mainContent p {
	margin: 0 0 20px 0;
	}
	
	.thrColAbsHdr #mainContent h2 {
	font-size: 15px;
	color: #8F004F;
	}
	
	.thrColAbsHdr #mainContent h3 {
	font-size: 15px;
	color: #007BAF;
	}
	
    .thrColAbsHdr #footer {
	padding: 0 10px 0 20px;
	background-color: #8F0052;
	text-align: center;
	font-size: 10px;
	color: #fff;
    } 
    .thrColAbsHdr #footer p {
	margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
	background-color: #8F0052;
    }
    .fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
	float: left;
	margin-right: 8px;
	background-color: #007BAF;
    }
	
	.clear {
		float: none;
		clear: both;
	}


/*NAVI*/

ul#navi {
	list-style: none;
	padding: 9px 0 0 0;
}

ul#navi li {
	height: 20px;
}

ul#navi li a {
	display: block;
	color: #930050;
	font-weight: bold;
	font-size: 12px;
	text-align: left;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 10px;
	background-color: #007BAF;
	width: 160px;
}

ul#navi li a:hover, ul#navi li.active a, ul#navi li.active a:hover {
	background-position: 0 0;
	background-color: #D3EDFA;
}

/* FACEBOOK */

.facebook {
	margin-left: 10px;
	border: none !important; 
}

/* GEWINNSPIEL */

.gspiel, .gspiel2 {
	color:#D3EDFA;
	padding: 15px 0 0 0;
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	border: none;
}

.gspiel2 {
	text-align: center;
}

.gspiel_rechts {
	border: 1px solid #A50042;
	margin: 0 5px 5px 0;
}




/*Basics*/

.show {
	display: block !important;
}

.hide {
	display: none !important;
}

a {
	color: #8F004F;
	text-decoration: none;
}

h1 {
	color: #a40042;
	font-size: 16px;
}

h8	{
	color: #FFF;
	font-size: 16px;
	text-aling: center;
}

subscription {
	font-size: 9px;
	line-height: 1.3em;
}

#mainContent ul {
	margin-bottom: 10px;
}

#mainContent a, .tiny a{
	background: url(../images/atag.gif) bottom left repeat-x;
	font-weight: bold;
}

#mainContent a:hover, .tiny a {
	background: url(../images/ataghover.gif) bottom left repeat-x;
}

p.partners img{
	border: 1px solid #A50042;
	margin: 0 5px 5px 0;
}

div.partnerimage{
	width: 140px;
	height: 180px;
	text-align: center;
	border: 1px solid #A50042;
	margin: 0 5px 5px 0;
	padding: 5px;
	float: left;
}

div.partnerimage img{
	border: none;
}

div.smallpartner{
	width: 70px;
	height: 70px;
	text-align: center;
	margin: 0 5px 5px 0;
	padding: none !important;
	float: left;
}

p.offer {
	background: 
}



/* FORMULAR */

#error, #errorunsub  {
	background: url(../images/error.gif) 5px 43px no-repeat;
	border: 3px solid #A50042;
	margin: 10px 0 15px 0;
	display: none;
	min-height: 100px;
}

#thanks {
	border: 3px solid #A50042;
	margin: 10px 0 15px 0;
	display: none;
}

#thanksunsub {
	border: 3px solid #A50042;
	margin: 10px 0 15px 0;
	display: none;
}

#error h2,#errorunsub h2, #thanks h2, #thanksunsub h2 {
	margin: 0;
	background: #a50042;
	color: #fff !important;
	padding: 3px;
}

#thanks p, #thanksunsub p {
	margin: 0;
	padding: 8px 10px 10px 10px;
}

#error p, #errorunsub p {
	margin: 0;
	padding: 8px 10px 10px 80px;
}

.error {
	background: url(../images/error.gif) 5px 43px no-repeat;
	border: 3px solid #A50042;
	margin: 10px 0 15px 0;
	display: none;
	min-height: 100px;
}

.thanks {
	border: 3px solid #A50042;
	margin: 10px 0 15px 0;
	display: none;
}

.error h2, .thanks h2 {
	margin: 0;
	background: #a50042;
	color: #fff !important;
	padding: 3px;
}

.thanks p {
	margin: 0;
	padding: 8px 10px 10px 10px;
}

.error p {
	margin: 0;
	padding: 8px 10px 10px 80px;
}

#mainContent form {
	margin: 0 0 50px 0;
	padding-top: 10px;
	padding-left: 10px;
	
}

#mainContent li {
	list-style-image: url(../images/vi_list.gif);
	list-style-position: outside;
	margin: 0 0 20px 15px;
}

#mainContent label {
	display: block;
	float: left;
	width: 120px;
}

#mainContent input, #mainContent textarea, #mainContent select {
	font: inherit;
	display: block;
	float: left;	
	width: 240px;
	height: 18px;
	background: #efefef;
	border: 1px solid #A50042;
	margin: 0 0 7px 0;
	padding: 2px;
}

#mainContent select {
	height: auto !important;
}

#mainContent label.error {
	background:none;
	min-height: 0;
	border: none;
	color: #A50042;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

#mainContent textarea {
	height: 80px;
}

#mainContent input.checkbox {
	width: 15px;
	margin: 0 5px 0 0;
	background: none;
	border: none;
}

#mainContent input.submit {
	float: none;
	clear: both;
	margin: 15px 0 0 120px;	
	background: #A50042;
	color: #fff;
	font-weight: bold;
	padding: 3px 0;
	height: 30px;
	cursor: pointer;
	width: 246px;
}

#mainContent form br {
	float: none;
	clear: both;
}

.errorform {
	color: #A50042;
	font-weight: bold;
}

#erroragb {
	display: none;
	color: #A50042;
	font-weight: bold;
	padding: 0 0 0 22px;
	background: url(../images/checkit.gif) 2px 12px no-repeat;
}

/*ADMININTERFACE*/

div.box {
	border: 2px solid #A50042;
	background: #fff;
	margin: 0 0 15px 0;
}

div.box h2 {
	background: #A50042;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: bold;
	margin: 0;
	padding:0;
}

div.box p {
	margin: 0 !important;
	padding:0;
}

div.news {
	border: 2px solid #A50042;
	background: #fff;
	margin: 0 0 15px 0;
}

div.news h2 {
	background: #A50042;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: bold;
	margin: 0;
	padding:0px;
}

div.news h1 {
	/* background: #A50042; */
	/* color: #fff !important; */
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0px 10px 0px;
	padding:0px;
}

div.news a {
	/* background: #A50042; */
	/* color: #fff !important; */
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0px 10px 0px;
	padding:0px;
}

div.news p {
	margin: 0 !important;
	padding:0;
}

table {
	width: 100%;
	border-collapse:collapse;
}

table thead {
	font-weight: bold;
	background: #A50042;
	color: #fff;
}

table thead a {
	color: #ccc;
	font-weight: normal !important;
	background: none !important;
	border: none;
	text-decoration: none;
}

table td {
	padding: 3px;
	vertical-align: top;
}


table tbody tr.odd td{
	background: #efefef;
}

table tbody tr.offline td{
	color: #bbb;
}

table tbody tr.hot td a{
	color: #A50042;
}

table tbody tr.hot td{
	color: #A50042;
}

table tbody tr.offline td a{
	color: #bbb;
}

table.lines td {
	border-bottom: 1px dashed #ccc;
}

img.icon {
	width: 16px;
	height: 16px;
	margin: 0 5px 0 0;
	border: none;
	vertical-align: text-bottom;
}

#mainContent textarea.mce{
	width: 320px;
	height: 400px;
}

.mceEditor a {
	background: none !important;
}
#specialoffer {
	color: #383417;
	line-height: 130%;
	font-size: 11px;
	margin: 0 10px 62px 28px;
}

#specialoffer h4 {
	font-size: 12px;
	margin: 0 0 10px 0;
}

#specialoffer p {
	margin: 0;
}

#specialoffer a {
	font-weight: bold;
	color: #383417;
	background: url(../images/ataghover.gif) left bottom repeat-x;
	margin: 12px 0 0 0;
}


/*DATETIMEPICKER dp*/
/* the div that holds the date picker calendar */
.dpDiv {
	width: 200px;
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #fff;
	border: 1px solid #AAAAAA;
	width: 200px;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
	background: #ccc;
	border: none;
	cursor: pointer;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
	background: #ccc;
	border: none;
	cursor: pointer;
	font-weight: bold;
	}

.datebtn {
	background: url(../images/icon_date.gif) 0 0 no-repeat;
	height: 24px;
	width: 24px;
	text-indent:-1000px;
}


input.radio {
	width: 14px !important;
}

label.radiosmall {
	width: 75px !important;
}

label.radiobig {
	width:	200px !important;
}

.floatright {
	float: right !important;
}

.buttons a {
	display: block;
	float: left;
	width: 100px;
	height:20px;
	border: 3px solid #ccc;
	margin: 0 10px 10px 0;
	font-size: 9px;
	font-weight: normal;
	text-align: center;
	padding: 75px 0 0 0;
}

.buttons a.texte {background: url(../images/button_texte.gif) 0 0 no-repeat !important;}
.buttons a.hefte {background: url(../images/button_hefte.gif) 0 0 no-repeat !important;}
.buttons a.daten {background: url(../images/button_daten.gif) 0 0 no-repeat !important;}
.buttons a.termine {background: url(../images/button_termine.gif) 0 0 no-repeat !important;}

.buttons a:hover {
	border: 3px solid #8F0052;
}

.responseerror {
	font-weight: bold;
	border-left: 10px solid #A40042;
	padding: 0 0 0 10px;
	margin: 0 !important;
}

.errorreq {
	border-left: 5px solid #A40042 !important;
	width: 236px !important;
}

#errors {
	display: none;
	font-weight: bold;
	border-left: 10px solid #A40042;
	padding: 0 0 0 10px;
}

.imagediv {
	float: none;
	clear: both;
	padding: 10px 0;
}

.imagediv img {
	margin: 0 0 5px 0;
}