@charset "utf-8";
/* Externes CSS-Stylesheet zur Handhabung der Formatierungen */

/* Eric Meyers Reset Style-Sheet: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Eigenes Stylesheet */
/* Layout-Styles */

* {margin: 0; padding: 0;} /* neutralisiert die Browser defaults und gewinn wertvollen vertikalen Raum */

body  {
	font-size: 62.5%;
	/* Technik von Richard Rutter (http://clagnut.com/blog/348/), um ems und pixels in etwa äquivalent zu setzen; funktioniert, wenn die default text size des Browsers auf Medium eingestellt ist, was meistens 16px entspricht. Alle anderen Größen werden relativ zu dieser definiert; der User kann, da nur relative Einheiten verwendet werden, den Text nach Wünschen auch im IE größer gestalten. */
	/* Siehe auch Dan Cederholm: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition! */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #FFCC67;
	text-align: center;
	/* dies zentriert den container in IE 5* browsern. Der Text wird dann im #container selector auf den left aligned default gesetzt */
	color: #000000;
}

img { border: 0; } /* erforderlich, um im Strict-Modus den Rand um die Images (hier: Flaggen) zu loszuwerden und auf die */
/* Angabe von border="0"; bei Images (hier: den Flagen), welche nur im Transitional-Modus akzeptiert wird, zu verzichten! */

#container { 
	width: 958px;  /* strebt 960px als reale Breite der Webseite an */
	background: #FFFFFF;
	margin: 0 auto; /* die auto margins (links und rechts) zentrieren (in Verbindung mit einer width) die Seite */
	border: 1px solid #000000;
	text-align: left; /* dies überschreibt den text-align: center des body element. */
	background-image: url(images/ColorContainerGifPix.jpg);
	background-repeat:repeat-y;
}

#containerSub { 
	width: 958px;  /* strebt 960px als reale Breite der Webseite an */
	background: #FFFFFF;
	margin: 0 auto; /* die auto margins (links und rechts) zentrieren (in Verbindung mit einer width) die Seite */
	border: 1px solid #000000;
	text-align: left; /* dies überschreibt den text-align: center des body element. */
	background-image: url(images/ColorContainerGifPixSub2.jpg);
	background-repeat:repeat-y;
}

#sidebarLeft {
	float: left; /* da dieses Element gefloated wird, muss eine width angegeben werden */
	width: 150px; /* die reale width dieses div, in standard-kompatiblen browsern, oder im standards mode des Internet Explorer 
	beinhaltet padding und border zusätzlich zur width! */

/* Hier könnte die Hintergrundfarbe weggenommen werden und ein Gradient eingefügt werden, der dann bis zur Fussnote durchläuft!
   background: #A4C2C2; */ /*Die Background-Farbe würde nur bis zur Länge des Inhalts der Säule gehen und nicht weiter! */
	padding: 0 10px 15px 20px; /* padding hält den Inhalt des divs von den Seiten fern */
}

#sidebarRight {
	float: right; /* da dieses Element gefloated wird, muss eine width angegeben werden */
	width: 160px; /* die reale width dieses div, in standard-kompatiblen browsern, oder im standards mode des Internet Explorer 
	beinhaltet padding und border zusätzlich zur width! */
/* Hier könnte die Hintergrundfarbe weggenommen werden und ein Gradient eingefügt werden, der dann bis zur Fussnote durchläuft!
   background: #A4C2C2; */ /*Die Background-Farbe würde nur bis zur Länge des Inhalts der Säule gehen und nicht weiter! */
	padding: 0 10px 15px 20px; /* padding hält den Inhalt des divs von den Seiten fern */
}

#mainContent {
	margin: 0 190px 0 180px; 
	/* Die rechten und linken margins dieses div elements erzeugen die beiden äußeren columns der Seite. Unabhängig davon, wievel Inhalt die sidebar divs enthalten: der Platz der columns bleibt erhalten. Man kann diesen Margin entfernen, wenn man möchte, dass der Text des #mainContent div die Seiten ausfüllt, wenn der Inhalt der sidebars endet. */
	padding: 0px 30px 0px 30px; /* linker und rechter Rand innerhalb der div box */
}

#mainSubpage { 
	margin: 0 0 0 180px; 
	/* Die rechten und linken margins dieses div elements erzeugen die beiden äußeren columns der Seite. Unabhängig davon, wievel Inhalt die sidebar divs enthalten: der Platz der columns bleibt erhalten. Man kann diesen Margin entfernen, wenn man möchte, dass der Text des #mainContent div die Seiten ausfüllt, wenn der Inhalt der sidebars endet. */
	padding: 0 30px 0 30px; /* linker und rechter Rand innerhalb der div box */
	background-image: url(images/gradient_28Sub.jpg);
	background-repeat: repeat-x;
	background-color: #FFFBF2;
}
 
#footer { 
	padding: 0 10px 0 20px; /* dieses padding entspricht dem left alignment der Elemente in den divs darüber. */
	background:#DDDDDD;
}

#footer p {
	/* Anweisung für die E-Mail-Bilder */
	/* padding-bottom: 10px; */
	/* Anweisung für die Java Script-Lösung ohne die E-Mail-Bilder */	
	padding: 10px 0;
	/* schafft Raum für die Textzeile, wobei das Padding das Problem eines margin collapse umgeht, d.h. der Raum wird unabhängig von angrenzenden Margins sicher gewährt*/
}

/* Float-Kommandos */

.clearfloat { /* diese Klasse sollte auf ein div oder break element angewendet werden und sie sollte das letzte Element vor Abschluss eines containers sein, der einen vollen Float enthält. */
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

/* Styles der imagebar und navigationbar */

#imagebar { 
    background: #FFCC67;
	height: 139px; /* erforderlich, um einen 3 Pixel-Gap (im Strict-Modus) zur Navigationsleiste zu verhindern */
	width: 958px; /* erforderlich für IE 5.5, um zu verhindern, dass das letzte Bild in eine neue Zeile wandert */
}

#navigationbar {
        border-width: 2px 0px 2px 0px;
		border-style: solid;
		border-color: #525252;
		width: 958px;
		/* margin: 0px;
		padding: 0px; */
		background-image: url(qmimages/gradient_28b.jpg);
		background-repeat: repeat-x;
}

.flagleft { /* diese Klasse wird benutzt, um die linke Flagge zu floaten */
	/* margin: 0;
	padding: 0; */
	float: left;
	height: 28px; /* nötig, damit der Internet-Explorer die box nicht nach unten streckt */
}

.flagright { /* diese Klasse wird benutzt, um die drei rechten Flaggen zu floaten */
	float: right;
	/* margin: 0; */
	padding: 0px 8px 0px 0px;
	height: 28px; /* nötig, damit der Internet-Explorer die box nicht nach unten streckt */
}

/* Styling der Nifty-Box */

.nbox1 {
	margin: 2em auto 0 auto;
	padding-bottom: 15px; /*leider in Pixel, da außer dem Firefox kein Browser mit em's umgehen kann */
    text-align:left;
	background: #9CC0FF url(images/gradientNifty.png) repeat-x 0 -5px;
}

.nbox2 {
	margin: 1em auto 1em auto;
	padding-top: 15px; /*leider in Pixel, da außer dem Firefox kein Browser mit em's umgehen kann */
	padding-bottom: 15px;
	padding-left: 30px;
	text-align:left;
	/* background: #A4C2C2 url(images/gradientNifty2.png) repeat-x 0 -5px; */ /*Grün*/
	/* background: #DDDDDD url(images/gradientNifty3.png) repeat-x 0 -5px; */ /*Grau*/
	/* background: #F8E9E9 url(images/gradientNifty4.png) repeat-x 0 -5px; */ /*Rot 1 */
	background: #E8BCBB url(images/gradientNifty6.png) repeat-x 0 -5px;
}

/* nobox3 für Forms */

.nbox3 {
	margin: 2em 30px 1em 30px;
	padding-top: 30px; /*leider in Pixel, da außer dem Firefox kein Browser mit em's umgehen kann */
	/* padding-right: 30px; entfällt hier, da für den IE8 als hack eingegeben, der IE6 murrt dann nicht (s. dort) */
	padding-bottom: 15px;
	padding-left: 30px;
	text-align:left;
	/* background: #A4C2C2 url(images/gradientNifty2.png) repeat-x 0 -5px; */ /*Grün*/
	/* background: #DDDDDD url(images/gradientNifty3.png) repeat-x 0 -5px; */ /*Grau*/
	/* background: #F8E9E9 url(images/gradientNifty4.png) repeat-x 0 -5px; */ /*Rot 1 */
	background: #E8BCBB url(images/gradientNifty6.png) repeat-x 0 -5px;
}

/* Standard-Einstellung für Normal-Text im Body */

p {
	font-size: 1.3em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
	line-height: 1.2em;
	/*letter-spacing: .1em; */
}

#mainContent p {
	padding-top: 0.5em;
	padding-bottom: 0.5em; /* schafft etwas vertikalen Raum für die Paragraphen */
}

#mainContent h1 {
	font-size: 2.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #CC3300;
	font-weight: normal;
	letter-spacing: .1em;
	line-height: 1.9em;
	text-align: center;
	padding-top: 1em;
}

.mainHeadingCenter2 {
	font: 1.9em Georgia, "Times New Roman", Times, serif;
	color: #A4C2C2;
	font-weight: normal;
	letter-spacing: .1em;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 0.5em;
}

#mainContent h2 {
	font: 1.9em Georgia, "Times New Roman", Times, serif;
	color: #CC3300;
	font-weight: normal;
	line-height: 1.5em;
	letter-spacing: .1em;
	text-align: left;
	padding-top: 0.5em;
}

.mainTextCenter {
	font: 1.3em Verdana, Arial, Helvetica, sans-serif;
	color: #A4C2C2;
	font-weight: bold;
	text-align: center;
	/* letter-spacing: .1em;
	line-height: 1.2em;
	letter-spacing: .1em; */
	margin: 1em 0 1em 0;
}

#mainSubpage p {
	font: 1.3em Verdana, Arial, Helvetica, sans-serif;
	/* color: #333333; */
	font-weight: normal;
	padding-top: 0.5em;
	padding-bottom: 0.5em;/* schafft etwas vertikalen Raum für die Paragraphen */
	margin-left: 0px; /* erforderlich, um einen nach Erstellen der Anmeldungs-Seite entstandenen zusätzlichen
	                  linken Rand nur im Safari und Opera zu unterbinden */
}

#mainSubpage h1 {
	font-size: 2.5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #CC3300;
	font-weight: normal;
	letter-spacing: .1em;
	line-height: 1.9em;
	text-align: center;
	padding-top: 1em;
}

#mainSubpage h2 {
	font: 1.9em Georgia, "Times New Roman", Times, serif;
	color: #517979;
	font-weight: normal;
	letter-spacing: .1em;
	line-height: 1.5em;
	text-align: left;
	padding-top: 1em;
}

#mainSubpage h3 {
	font: 1.7em Georgia, "Times New Roman", Times, serif;
	color: #009900;
	font-weight: normal;
	letter-spacing: .1em;
	line-height: 1.5em;
	text-align: left;
	padding-top: 1.0em;
}

#mainSubpage h4 {
	font: 1.5em Georgia, "Times New Roman", Times, serif;
	color: #800040;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.3em;
	text-align: left;
	padding-top: 1em;
}

#mainSubpage h5 {
	font: 1.3em Georgia, "Times New Roman", Times, serif;
	color: #8080C0;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.1em;
	text-align: left;
	padding-top: 1.0em;
}

#mainSubpage .nbox1 p, #mainSubpage .nbox2 p {
	padding: 0.5em 20px;
}

#mainSubpage .nbox1 h3 {
	padding: 1em 20px 0 20px;
}

.subCenter {
	color: #0000CC;
	text-align: center;
}

#mainSubpage ul li {
	font: 1.3em Verdana, Arial, Helvetica, sans-serif;
	color: #0000CC;
	font-weight: normal;
	padding: 0.5em 0 0.5em 40px; /* schafft etwas vertikalen Raum für die Paragraphen und einen linken Rand */

}

#mainSubpage p.subCenterText { /* die Spezifität hilft, um die Anweisung des linken Margins durchzusetzen */
	font: 1.3em Verdana, Arial, Helvetica, sans-serif;
	color: #0000CC;
	text-align: left;
	margin: 0 80px 0 80px;
}

#sidebarLeft h1, #sidebarRight h1 {
    font: normal 1.9em Georgia, "Times New Roman", Times, serif;
	color: #333333;
	/* line-height: 1.9em; */
	padding-top: 1.9em;
	padding-bottom: 0.5em;
}

#sidebarLeft h2 {
	font: bold 1.3em Georgia, "Times New Roman", Times, serif;
	color: #333333;
	/*line-height: 1.3em; */
	padding: 1.2em 0 0.5em 0;
}

#sidebarLeft ul {
	font: 1.3em Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 1.2em;
    list-style-type: none;
	/* letter-spacing: -0.05em; */
}

#sidebarLeft ul li {
    border-bottom: 1px dotted #525252;
	margin-right: 10px;
	padding: 2px 0px;
}

#sidebarLeft ul li a {
    margin-left: 0px;
	text-decoration: none;
	text-align: left;
	color:#FFFFFF;
	display:block; background:url(images/arrow_7b.gif) 0 50% no-repeat;
    text-decoration:none; padding:0 0 0 15px; /* Abstand des Texts zu den bullets */
}

#sidebarLeft ul li a:hover {
	background:url(images/arrow_10b.gif) 0 50% no-repeat;
    text-decoration: underline;
}

#sidebarRight p {
    font-size: 1.1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	line-height: 1.3em;
	padding: 0.5em 0;
}

#sidebarRight a {
    color: #FFFFFF;
	text-decoration:none;
}

#sidebarRight a:hover {
    text-decoration: underline;
}

.dividerSidebarRight {	
		border: 1px solid #525252;
		margin:5px 5px 5px 0px;
}

#footer p {
	font: 1.0em Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	text-align: center;
}

/* Style für die Validator-Icons */

.validator {
	margin-left: 28px;
	margin-top: 1.0em;
}

/* Style für die E-Mail-Bilder */

#footer img {
	position: relative;
	left: 0.3em;
	top: 0.7em;
}

#googlemap { /* Angabe für die Google-Map */
	/* float: left;
	display: inline;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px; */
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 150px;	
	}

#kba { /* Angabe für das KBA-Bild */
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 50px;	
	}
	
#konzeption { /* Angabe für das Konzeptions-Bild */
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 35px;	
	}
	
#car { /* Angabe für das Car-Bild */
	margin-top: 1em;
	margin-bottom: 2em;
	margin-left: 115px;	
	}

#containerSub #mainSubpage ol { /* Angabe für die Sprechstunden */
	margin-top: 1em;
	margin-bottom: 1em;
	}
#containerSub #mainSubpage ol li { /* Angabe für die Sprechstunden */
	margin-left: 240px;
	font-size: 12px;
	line-height: 1.4em;
	color:#0000FF;
	}
	
#containerSub #mainSubpage ol #pause { /* setzt die schwarze Textfarbe für die Pause */
	padding-left: 2em;
	color: #000000;
	}
	
#containerSub #mainSubpage ol.markt li  { /* Angabe für die Marktangebote - Professionalität */
	margin-left: 30px;
	color: #000000;

	}

.inputLinkarea { /* formatiert die Textbox der Link zur Homepage - Seite */
	width: 600px;
	margin: 0 0 0 0;
}
	
textarea.inputLinkarea:focus { /* setzt die grüne Fokus-Farbe */
	background: #A4C2C2;
}

#mainSubpage p.chess { /* Kleiner Text für die Copyright-Notiz; */
	font: 1.0em Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	text-align: center;
}

#mainSubpage ul li { /* setzt die Textfarbe schwarz in der Chess-Anleitung */
	color: #333333;
}


/* Styles für das QuickMenu */

/* Hinweis: zoom:1 muss für den Internetexplorer erhalten bleiben, da dieser sonst bei blockiertem JavaScript kein Menu erkennt. Dies wird aber in ein eigenes Stylesheet, welches IE-Hacks enthält, ausgelagert, nämlich: ie_all_hacks.css! */

/*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}
.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;/*zoom:1;*/z-index:10;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}
.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div{visibility:hidden;position:absolute;}
.qmmc li {z-index:auto;}
.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover>ul{left:auto;}
#qm0 ul {top:100%;}
#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/


	/* QuickMenu 0 */

	/*"""""""" (MAIN) Container""""""""*/	
	#qm0	
	{	
		background-color: #FFFFFF;
		background-image: url(qmimages/gradient_28b.jpg);
		/* border-width:2px 0px 2px 0px;
		border-style:solid;
		border-color:#525252; */
		padding-left: 162px;
		margin-left: 38px;
		margin-right: 138px;
	}


	/*"""""""" (MAIN) Items""""""""*/	
	#qm0 a	
	{	
		padding: 8px 20px 5px 20px;
		color: #262626;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.2em;
		text-decoration: none;
		font-variant: normal;
	}


	/*"""""""" (MAIN) Hover State""""""""*/	
	#qm0 a:hover	
	{	
		text-decoration: underline;
	}


	/*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/	
	#qm0 li:hover>a	
	{	
		text-decoration: underline;
	}


	/*"""""""" (MAIN) Active State""""""""*/	
	body #qm0 .qmactive, body #qm0 .qmactive:hover	
	{	
		text-decoration: underline;
	}


	/*"""""""" (SUB) Container""""""""*/	
	#qm0 div, #qm0 ul	
	{	
		padding: 8px;
		margin: 1px 0px 0px 0px;
		background-color: transparent;
		border-width: 0px;
		border-style: none;
		border-color: transparent;
	}


	/*"""""""" (SUB) Items""""""""*/	
	#qm0 div a, #qm0 ul a	
	{	
		padding: 2px 10px 2px 5px;
		background-color: transparent;
		color: #FFFFFF;
		font-size: 1.2em;
		line-height: 1.3em; /*schafft etwas Abstand zwischen den Subitems und zwischen den Linebreaks*/
		font-variant: normal;
		border-width: 1px;
		border-style: solid;
		border-color: #A4C2C2;
	}


	/*"""""""" (SUB) Hover State""""""""*/	
	#qm0 div a:hover	
	{	
		text-decoration: underline;
	}


	/*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/	
	#qm0 ul li:hover>a	
	{	
		text-decoration: underline;
	}


	/*"""""""" (SUB) Active State""""""""*/	
	body #qm0 div .qmactive, body #qm0 div .qmactive:hover	
	{	
		background-color: #FFFFFF;
		color: #333333;
		text-decoration: none;
		border-color: #525252;
	}


	/*"""""""" Individual Titles""""""""*/	
	#qm0 .qmtitle
	{	
		margin: 2px 5px 4px 5px; /* die erste Margin hier default gelassen, erhöht den Abstand oben zum Menüfenster! */
		padding-top: 3px; /* erhöht den Abstand aller Titel nach oben */
		color: #222222;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.3em; /* schafft etwas Abstand der Titel zu den Subitems */
		font-weight: bold;
	}


	/*"""""""" Individual Horizontal Dividers""""""""*/	
	#qm0 .qmdividerx	
	{	
		border-top-width: 1px;
		margin: 5px 4px 5px 4px;
		border-color: #525252;
	}


	/*"""""""" Custom Rule""""""""*/	
	div#qm0 div div	
	{	
		margin: 0px 0px 0px -1px;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 ul ul	
	{	
		margin: 0px 0px 0px -1px;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 a	
	{	
		padding: 5px 20px 5px 20px;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 ul a	
	{	
		padding: 2px 40px 2px 5px;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 ul	
	{	
		margin: 0px;
		background-color: #A4C2C2;
		border-width: 1px;
		border-style: solid;
		border-color: #525252;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 ul li:hover > a.qmparent	
	{	
		background-color: #FFFFFF;
		color: #333333;
		text-decoration: none;
		border-color: #525252;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 .qmparent	
	{	
		background-image: url(qmimages/arrow_7.gif);
		background-repeat: no-repeat;
		background-position: 95% 55%;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 ul .qmparent	
	{	
		background-image: url(qmimages/arrow_10.gif);
	}

    /*  Add-On Core Code (Remove when not using any add-on's)  */

    .qmfv
	{
	    visibility:visible !important;
	}
	.qmfh
	{
	    visibility:hidden !important;
	}