@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }


body {
	margin: 0px;
	padding: 0px;
	color: #000;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

/* Zitat auf Startseite */
.zitat {
	font-family: "Times New Roman", serif;
	font-size: 36px;
	font-weight:400;
	color:#666;
}

/* Zitatunterschrift */
.zitatunterschrift {
	font-family:"Times New Roman", Times, serif;
	font-size: 12px;
	color:#000;
	font-weight:bold;
}


.titel {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight:400;
	color:#666;
}

/* Abstand um Bilder herum */
img {
	padding-bottom: 25px;
	padding-right: 25px;
	float: left;
}


/* Hauptdiv in dem alles andere drin ist */

.containerOranje {
	width: 960px;
	background-image:url(pic/body_bg_oranje.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

.containerBlau {
	width: 960px;
	background-image:url(pic/body_bg_blau.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

.containerGruen {
	width: 960px;
	background-image:url(pic/body_bg_gruen.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

.containerLila {
	width: 960px;
	background-image:url(pic/body_bg_lila.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

.containerPep {
	width: 960px;
	background-image:url(pic/body_bg_pep.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

.containerGrau {
	width: 960px;
	background-image:url(pic/body_bg_grau.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}

/* Kopfzeile  */


/* Div in dem die Navi sitzt */

.navifield {
	float:left;
	padding-left: 30px;
	height: 175px;
	width:220px;
	padding-top: 20px;
	border-bottom:solid;
	border-bottom-width: 5px; 
	border-color:#666;
	line-height:20px;
	background-color:#FFF;
	background-image:url(pic/oranje.gif);
	background-repeat:repeat-y;
	background-position:left;

}

/* Div in dem das Head-bild sitzt */
.headerbild {
	float:left;
	width: 650px;
	height: 195px;
	padding-right:60px;
	padding-bottom:0;
	padding-left:0;
	padding-top:0;
	border-bottom:solid;
	border-bottom-width: 5px; 
	border-color:#666;
	background-color:#fff;
}

/* Div in dem die Headlinks sitzen */
.headerlinks {
	float:right;
	padding-top: 5px;
	position: relative; margin-top:-190px; margin-right: 60px;
	
}


/* Ende Headbereich (Navi, Headerbild und Headerlinks) */





/* Div in dem die Sub-Navi sitzt */
.subnavifield {
	width: 660px;
	height: 30px;
	padding-left: 25px;
	margin-top:-40px;
	margin-bottom:20px;
}

/* ~~ Fußzeile ~~ */
.footer {
	background: #CCC49F;
	padding-top: 5px;
	padding-bottom: 20px;
	position: relative;/* Hiermit erhält IE6 die Eigenschaft hasLayout, damit die clear-Anweisung korrekt ausgeführt wird. */
	clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
}




/* Inhalts/Content-div (neutrales helles grau) farbe über Hintergrundgrafik - Faux Columns :-) */

.content {
	width: 660px;
	padding-top: 60px;
	float: left;
	padding-right: 0;
	margin-right: 0;
}




/* Linke Sidebar Sammelcontainer mit oranje-Leiste */	
.sidebarOranje {
	float: left;
	width: 240px;
	background-image:url(pic/oranje.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left: 10px;
	padding-bottom: 20px;
}	

/* Linke Sidebar Sammelcontainer mit lila-Leiste */	
.sidebarLila {
	float: left;
	width: 240px;
	background-image:url(pic/lila.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left: 10px;
	padding-bottom: 20px;
}

/* Linke Sidebar Sammelcontainer mit blau-Leiste */	
.sidebarBlau {
	float: left;
	width: 240px;
	background-image:url(pic/bleu.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left: 10px;
	padding-bottom: 20px;
}

/* Linke Sidebar Sammelcontainer mit grün-Leiste */	
.sidebarGruen {
	float: left;
	width: 240px;
	background-image:url(pic/green.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left: 10px;
	padding-bottom: 20px;
}

/* Linke Sidebar Sammelcontainer mit grün-Leiste */	
.sidebarPep {
	float: left;
	width: 240px;
	background-image:url(pic/pep.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left: 10px;
	padding-bottom: 20px;
}
/* Linke Sidebar Sammelcontainer mit grau-Leiste */	
.sidebarGrau {
	float: left;
	width: 240px;
	background-image:url(pic/grau.gif);
	background-repeat:repeat-y;
	background-position:left;
	padding-left: 10px;
	padding-bottom: 20px;
}

	
	
/* Inhaltsbox in Sidebar */

.inhalt-sidebar {
	float: left;
	background-color: #FFF;
	width: 220px;
	padding-bottom: 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.85em;	
}



/* Trenner */

.trennerOranje{
	border-bottom:1px dotted #ff7800;
	margin-left:20px;
	margin-right: 20px;
	
}
.trennerLila{
	border-bottom:1px dotted #5788b1;
	margin-left:20px;
	margin-right: 20px;
	
}
.trennerBlau{
	border-bottom:1px dotted #0092be;
	margin-left:20px;
	margin-right: 20px;
	
}
.trennerGruen{
	border-bottom:1px dotted #bac400;
	margin-left:20px;
	margin-right: 20px;
	
}
.trennerPep{
	border-bottom:1px dotted #0465fc;
	margin-left:20px;
	margin-right: 20px;
	
}
.trennerGrau{
	border-bottom:1px dotted #666;
	margin-left:20px;
	margin-right: 20px;
	
}





/* Haupt-Navi Links jeweils Farbige Version + Farbige Version besucht!!! */
	
	

/* Neutraler Navi-Link - ohne spezielles Fachgebiet Farbe oranje */

a:link.Oranje {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 0.15em;
}
a:visited.Oranje {
	color: #666;
	text-decoration: none;
}
a:hover.Oranje, a:active.Oranje, a:focus.Oranje { 
	text-decoration: none;
	color:#ff7800;
	font-weight: bold;
}


/* Neutraler Navi-Link - besucht!! Farbe oranje */

a:link.Oranje-vis {
	color: #ff7800;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}
a:visited.Oranje-vis {
	color: #ff7800;
	text-decoration: none;
}
a:hover.Oranje-vis, a:active.Oranje-vis, a:focus.Oranje-vis { 
	text-decoration: none;
	color:#333;
	font-weight: bold;
}

/* Navi Link in Farbe lila */

a:link.Lila{
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 0.15em; 
}
a:visited.Lila {
	color: #666;
	text-decoration: none;
}
a:hover.Lila, a:active.Lila, a:focus.Lila { 
	text-decoration: none;
	font-weight: bold;
	color:#5788b1;
}


/* Lila Navi-Link - besucht!! */

a:link.Lila-vis {
	color: #5788b1;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}
a:visited.Lila-vis {
	color: #5788b1;
	text-decoration: none;
}
a:hover.Lila-vis, a:active.Lila-vis, a:focus.Lila-vis { 
	text-decoration: none;
	color:#333;
	font-weight: bold;
}

/* Navi Link in Farbe blau*/

a:link.Blau {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 0.15em; 
}
a:visited.Blau {
	color: #666;
	text-decoration: none;
}
a:hover.Blau, a:active.Blau, a:focus.Blau { 
	text-decoration: none;
	font-weight: bold;
	color:#0092be;
}

/* Blauer Navi-Link - besucht!! */

a:link.Blau-vis {
	color: #0092be;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}
a:visited.Blau-vis {
	color: #0092be;
	text-decoration: none;
}
a:hover.Blau-vis, a:active.Blau-vis, a:focus.Blau-vis { 
	text-decoration: none;
	color:#333;
	font-weight: bold;
}


/* Navi Link in Farbe grün */

a:link.Gruen {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 0.15em; 
}
a:visited.Gruen {
	color: #666;
	text-decoration: none;
}
a:hover.Gruen, a:active.Gruen, a:focus.Gruen { 
	text-decoration: none;
	font-weight: bold;
	color:#bac400;
}

/* Grüner Navi-Link - besucht!! */

a:link.Gruen-vis {
	color: #bac400;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}
a:visited.Gruen-vis {
	color: #bac400;
	text-decoration: none;
}
a:hover.Gruen-vis, a:active.Gruen-vis, a:focus.Gruen-vis { 
	text-decoration: none;
	color:#333;
	font-weight: bold;
}



/* Navi Link Pep-Tools */

a:link.Pep {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 0.15em; 
}
a:visited.Pep {
	color: #666;
	text-decoration: none;
}
a:hover.Pep, a:active.Pep, a:focus.Pep { 
	text-decoration: none;
	font-weight: bold;
	color:#0465fc;
}

/* Navi Link Pep-Tools - besucht!! */

a:link.Pep-vis {
	color: #0465fc;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}
a:visited.Pep-vis {
	color: #0465fc;
	text-decoration: none;
}
a:hover.Pep-vis, a:active.Pep-vis, a:focus.Pep-vis { 
	text-decoration: none;
	color:#333;
	font-weight: bold;
}





/* Sub-Navi-links bzw Anker? */

a:link.navisub {
	color: #666;
	text-decoration: none;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 0.9em;
}
a:visited.navisub {
	color: #666;
	font-weight: normal;
	text-decoration: none;
}
a:hover.navisub, a:active.navisub, a:focus.navisub { 
	text-decoration: none;
	font-weight: bold;
	color:#666;
}



/* Head-Links Oben rechts Impressum, Kontakt, Partner und Links */

a:link.head {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: normal;
	font-size: 0.8em;
	letter-spacing: 0.15em;
}
a:visited.head {
	color: #666;
	text-decoration: none;
}
a:hover.head, a:active.head, a:focus.head { 
	text-decoration: none;
	color:#ff7800;
	font-weight: bold;
}


/* Head-Links Oben rechts Impressum, Kontakt, Partner und Links – BESUCHT!! */

a:link.head-vis {
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Arial", sans-serif;
	font-weight: bold;
	font-size: 0.8em;
	letter-spacing: 0.15em;
}
a:visited.head-vis {
	color: #666;
	text-decoration: none;
}
a:hover.head-vis, a:active.head-vis, a:focus.head-vis { 
	text-decoration: none;
	color:#ff7800;
	font-weight: bold;
}



/* Ende Navi */


/* normale Textlinks */

a:link.textlink {
	color: #ff7800;
	text-decoration: none;
	font-family: "Arial", sans-serif;
	font-weight: normal;
}
a:visited.textlink {
	color: #666;
	text-decoration: none;
}
a:hover.textlink, a:active.textlink, a:focus.textlink { 
	text-decoration: none;
	color:#666;
	font-weight: bold;
}

/* Ende normale Textlinks */


/* Kein blauer Rahmen um Bilder */
	
a img { 
	border: none;
}





/*  Element-/Tag-Selektoren  */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 20px;	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
	padding-right: 20px;
	padding-left: 25px;
	line-height: 1.4em;
}

p {
	margin-right: 12px;
	padding-right: 0;
}



/* ~~ Farbige Überschriften ~~ */



h1.Oranje {
	color:#ff7800;	
	text-transform: uppercase;
	font-family: "Arial Black", Gadget, sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}


h1.Lila {
	color:#5788b1;	
	text-transform: uppercase;
	font-family: "Arial Black", Gadget, sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}

h1.Blau {
	color:#0092be;	
	text-transform: uppercase;
	font-family: "Arial Black", Gadget, sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}

h1.Gruen {
	color:#bac400;	
	text-transform: uppercase;
	font-family: "Arial Black", Gadget, sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}

h1.Pep {
	color:#0465fc;	
	text-transform: uppercase;
	font-family: "Arial Black", Gadget, sans-serif;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 0.15em;
}




/* ~~ Graue Seitenüerschrift beim Männesjen eingerückt ~~ */

h1.Grau-eingerueckt {
	color:#666;	
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding-top: 36px;
	padding-left: 60px;
	font: bold 1.5em "Arial", Gadget, sans-serif;
}


/* ~~ Graue Seitenüerschrift ohne Männesjen nicht eingerückt ~~ */

h1.Grau {
	color:#666;	
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding-top: 36px;
	padding-left: 25px;
	font: bold 1.5em "Arial", Gadget, sans-serif;
}



/* ~~ Farbige Männesjen ~~ */

.juhuOranje {
	background-image:url(pic/juhuOranje.png);
	background-repeat:no-repeat;
	margin-left: 20px;
	width: 53px; 
	height: 69px;
	padding-bottom: 14px;
}

.juhuLila {
	background-image:url(pic/juhuLila.png);
	background-repeat:no-repeat;
	margin-left: 20px;
	width: 53px; 
	height: 69px;
	padding-bottom: 14px;

}

.juhuBlau {
	background-image:url(pic/juhuBlau.png);
	background-repeat:no-repeat;
	margin-left: 21px;
	width: 53px; 
	height: 78px; 
	padding-bottom: 10px;

}

.juhuGruen {
	background-image:url(pic/juhuGruen.png);
	background-repeat:no-repeat;
	margin-left: 20px;
	width: 53px; 
	height: 77px; 
	padding-bottom: 9px;

}
.juhuLeer{
	width: 400px; 
	height: 69px;
	padding-bottom: 14px;
}



/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende 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. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}





/* ---------------------------------------------------------------------------------------------------- 							            
											Kontaktformular
																		----------------------------------------------------------------------------------------------------  */
																		
																		
			
	.formular_eingabefeld {
    background-color: White;
    border: 1px solid #FF8700;
    width: 398px;
	font-family: Lucida Grande,Lucida Sans Unicode,Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 11px !important;
    font-weight: normal;
	height: 20px;
	}															

	.formular_textarea {
    background-color: White;
    border: 1px solid #FF8700;
    font-family: Lucida Grande,Lucida Sans Unicode,Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 11px !important;
    font-weight: normal;
    margin-bottom: 7px;
    width: 398px;
	}
	
	.formular_submit {
	background-color: White;
    border: 1px solid #FF8700;
	font-family: Lucida Grande,Lucida Sans Unicode,Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 11px !important;
    font-weight: normal;
	height: 20px;
	width: 56px;
	}
	
	.trennerKontakt{
	border-bottom:1px dotted #ff7800;
	margin-left:25px;
	margin-right: 20px;	
	}
	
	.kontakttabelle{
		margin-left: 25px;
	}
	
	
	
	

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

									CSS für Referenzseite!! 

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



/* Content-Div für Referenzen mit Verlauf im Hintergrund und breiter als normaler Content */

.content_ref {
	width: 950px;
	padding-top: 0px;
	float: left;
	background-image:url(pic/referenzen/stripe_ref.jpg);
	background-repeat:repeat-x;
	margin-left: 10px;
}


/* Text-Div für auf Referenz-Seite läuft weniger breit als Content_ref */

.text_ref {
	width: 880px;
	padding-left: 30px;
	padding-top: 30px;
}

p.text_ref {
	padding-left: 0px;
}

/* Trenner-Linie auf Referenzseite */
.trennerOranje_ref{
	border-bottom: 1px dotted #ff7800;
}


.containerOranje_ref {
	width: 960px;
	background-image:url(pic/body_bg_oranje_ref.gif);
	margin: 0 auto;
	-webkit-box-shadow: -1px -1px 30px #666;
    -moz-box-shadow: -1px -1px 30px #666;
    box-shadow: -1px -1px 30px #666;
	position:relative;
}


/* Navilinks für Slideshow */

a:link.slidelink {
	color: #666;
	text-decoration: none;
	font-family: "Arial", sans-serif;
	font-weight: normal;
}
a:visited.slidelink {
	color: #666;
	text-decoration: none;
}
a:hover.slidelink, a:active.slidelink, a:focus.slidelink { 
	text-decoration: none;
	color:#ff7800;
	font-weight: bold;
}

/* Ende Navilinks für SLideshow */




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

								 End CSS für Referenzseite!! 

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