/* Styles für MHouben.de
   BAHN-SEITEN */


/* Unterschiede im Design der MHouben-Seiten liegen nur
   in den Farben, die mit Bearbeiten-Ersetzen ausgetauscht
   werden können */

/* Wichtige Farben sind
   Hintergrundfarbe		Sehrhell    #E7F0E9
   Kasten-Hintergrund	Hell		#DBE8DE
   Kasten-dunkler     	Mittel   	#A0C2A7
   Menühintergrund		Dunkel		#3A8544
   */

body {  background-color: #E7F0E9; font-family: Arial, Helvetica, sans-serif;}

/*--------------------------------------------------
Die DIV Boxen für Linke und rechte Spalten
---------------------------------------------------*/

DIV.SpalteLinks {
position: relative;
	float: left;
	top: -10px;
	float: left;
	width: 225px;
	text-align:center;
	margin-bottom: 0px;
	margin-right: 20px;
	margin-top: 18px;
	border:  0px;
	box-shadow: 0px 0px 0px #8BC288;
}

DIV.SpalteRechts {
	position: absolute;
	left: 235px;
	text-align:left;
	margin-right:10px;
	padding: 10px;
	border: 0px ;
	min-width:300px;
	box-shadow: 0px 0px 0px #113399;
	max-width: 1400px;
}

/* Head-Kasten, am oberen Bildrand */

DIV.Head {	
	border-radius: 10px;
	align: center;
	margin-bottom:15px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-color: #DBE8DE;
	border:1px solid #3A8544;
	min-width:400px;
	box-shadow: 2px 2px 8px -1px #887766;
}		          		 


/*---------------------
Das Hauptmenü wird gestaltet
----------------------*/
/* IconMenü, in Form gehalten durch DIV ohne Rahme */
Div.menhead {
	position: absolute;
	top: 20px;
	left: 0px;
	height: 10px;
    width: 200px;
	border: 0px;
	box-shadow: 0px 0px 0px 0px #395fce;
}
/* Die kleinen Bildchen für die Hauptseiten beim Hovern*/
.hovImg:hover {
	 opacity: 0.5
}
/* Der Rahmen, der um das Menü herum liegt */
DIV.menue {
	background-color: #DBE8DE;
	margin-top: 10px;
	text-align: center;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border:1px solid #3A8544;
	width: 200px;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
}

/*---------------------
 Das neue Menü
----------------------*/

/* Alle Normaleigenschaften für Liste auf Null */
.mainmenu, .submenu, .submenuA, .mainmenuA, .smenuA, .menuT, .menuB {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* Positionierung des 0bersten Menüpunktes */
.menuT, .mainmenu{
	position: relative;	
	top:18px;
}
/* Positionierung der anderen Menüpunktes */
.menuB {
	position: relative;	
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #3A8544;
	text-decoration: none;
	padding: 7px;
	color: #000;
}
/* Abgerundete Ecken oben */
.menuT a{
	display: block;
	background-color: #3A8544;
	text-decoration: none;
	padding: 7px;
	color: #000;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/* Abgerundete Ecken unten */
.menuB a{
	background-color: #3A8544;
	text-decoration: none;
	padding: 7px;
	color: #000;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
/* Allen Links ein standardaussehen gegen*/
.mainmenu a {
	display: block;
	background-color: #3A8544;
	text-decoration: none;
	padding: 7px;
	color: #000;
}
/* Schriftgröße von Untermenüs etwas reduzieren */
.smenu, .smenuA {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
/*Macht untermenüs bei HOVER sichtbar, will ich aber gar nicht
.mainmenu li:hover .submenu {
	display: block;
	max-height: 200px; }*/

/* Färbt Menüs beim Hovern ein */
.mainmenu a:hover {
    background-color: #881133;
}
/* Spezielle farbe für Untermenüs egal ob aktiv oder nicht */
.submenu a, .submenuA a {
	width: 186;
	background-color: #A0C2A7;
}
/* Spezielle Färbung des aktiven Hauptmenüs*/
.menuAU, .menuAA {
	background: #3A8544;
	background: -webkit-linear-gradient(top, #3A8544 0%,#A0C2A7 100%);
	background: -moz-linear-gradient(top, #3A8544 0%,#A0C2A7 100%);
	background: -o-linear-gradient(top, #3A8544 0%,#A0C2A7 100%);
	background: -ms-linear-gradient(top, #3A8544 0%,#A0C2A7 100%);
	background: linear-gradient(top, #3A8544 0%,#A0C2A7 100%);
}
/* Färbt Menüs beim Hovern ein */
.menuA a:hover, .menuTA a:hover {
	background: #102D84;
}
/* Und jetzt alle nicht aktiven Untermenüs verstecken*/
.submenu {
	width: 50%;
	overflow: hidden;
	max-height: 0;
	-webkit-transition: all 1.5s ease-out;
}

/*------------------------
Alle Arten von Link stiles
------------------------*/

A:link    {color:#5466D6; text-decoration:none; font-weight: bold;}
A:visited {color:#5466D6; text-decoration:none; font-weight: bold;}
A:active  {color:#5466D6; text-decoration:none; font-weight: bold;}
A:hover   {color:#08088A; text-decoration:none; text-shadow: 2px 2px 8px #395fce; font-weight: bold;}
A.intext:link    {color:#5466D6; text-decoration:none; font-weight: bold;}
A.intext:visited {color:#5466D6; text-decoration:none; font-weight: bold;}
A.intext:active  {color:#5466D6; text-decoration:none; font-weight: bold;}
A.intext:hover {color:#08088A; text-decoration:none; text-shadow: 2px 2px 8px #395fce; font-weight: bold;}
A.hide:link    {color: black; letter-spacing:0px; font-weight: normal;  text-decoration:none;}
A.hide:visited {color: black; letter-spacing:0px; font-weight: normal;  text-decoration:none;}
A.hide:active  {color: black; letter-spacing:0px; font-weight: normal;  text-decoration:none;}
A.hide:hover {color: black; letter-spacing:0px; font-weight: normal;  text-decoration:none;}

A.menu {color: white; letter-spacing:0px; font-weight: bold;  text-decoration:none;}
A.menu:hover  {color: white;  text-shadow: 2px 2px 8px white; font-weight: bold;  text-decoration:none;}
a.smenu {color: white; letter-spacing:0px; font-weight: bold;  text-decoration:none;}
a.smenu:Hover {color: white; text-shadow: 4px 2px 8px white; font-weight: bold;  text-decoration:none;}
a.menuA {color: #FFC906; letter-spacing:0px; font-weight: bold;  text-decoration:none;}
a.menuA:hover {color: #FFC906; font-weight: bold;  text-decoration:none;}
a.menuAU {color: white; letter-spacing:0px; font-weight: bold;  text-decoration:none;}
a.menuAU:hover {color: white; text-shadow: 2px 4px 8px white; font-weight: bold;  text-decoration:none;}
a.menuAA {color: #FFC906; letter-spacing:0px; font-weight: bold;  text-decoration:none;}
a.smenuA {color: #FFC906; letter-spacing:0px; font-weight: bold;  text-decoration:none;}

/*--------------------------------------------------
Die diversen DIVboxen für Bilder und spezielle Texte
---------------------------------------------------*/

DIV.SpalteLinks {
	position: absolute;
	top: -10px;
	float: left;
	width: 225px;
	text-align:center;
	margin-bottom: 0px;
	margin-right: 20px;
	margin-top: 18px;
	border:  0px;
	box-shadow: 0px 0px 0px #887766;
}

/* Divbox unterhalb des Menüs */
DIV.BoxL {
	position: relative;
	color: #333399; 
	margin-bottom: 10px; 
	margin-right: 8px;
	text-align: JUSTIFY;
	float: left;
	width: 190px;
	padding: 15px;
	background-color: #DBE8DE;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #887766;
	border-radius: 10px;
}

/* Unsichbare Box als Abstandshalter-Workaround*/
DIV.Abstand {
	position: relative;
	color: #EBECFE; 
	margin-bottom: 10px; 
	margin-right: 8px;
	text-align: JUSTIFY;
	float: left;
	width: 190px;
	padding: 0px;
	background-color: #EBECFE;
	border:0px solid; #EBECFE;
	box-shadow: 0px 0px 0px #113399;
}

/* Box die Bilder links  und rechts bünderln */
Div.Piclinks {
 	background-color: #E7F0E9;
 	float: left;
 	margin-right: 13px;
    border: 0px;
	opacity: 1;
}


div.Picrechts {
 	background-color: #E7F0E9;
 	float : right;
 	border: 1px;
 	margin-left: 13px;
	margin-top: 4px;
	margin-bottom:4px;
	opacity: 1;
}

/* Ich weiß, Tables gehen eigentlich gar nicht mehr
   aber mit DIVs wollte der Edge das nicht wie gewünscht machen  */

TABLE.ersDivLinks {
 	background-color: #E7F0E9;
 	float: left;
 	margin-right: 13px;
	margin-top: 4px;
	margin-bottom:4px;
    border: 0px;
	opacity: 1;
}

TABLE.ersDivRechts {
 	background-color: #E7F0E9;
 	float: right;
 	margin-left: 13px;
	margin-top: 4px;
	margin-bottom:4px;
    border: 1px;
	opacity: 1;
}

/******  DESIGN FÜR BILDER *******/
img.rand { 
	border: 1px solid #3A8544;
	margin-top: 4px;
	margin-right: 13px;
    transition: filter 0.9s;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
}

img.Links {
	float: left;
	text-align: left;
	margin-top: 4px;
	margin-right: 13px;
	margin-bottom: 3px;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-ms-transition:transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}

img.Links:hover {
 	cursor: zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -webkit-zoom-in;
	z-index: 10;
 	-moz-transform: scale(2.0, 2.0) translatex(5);
 	-webkit-transform: scale(2.0, 2.0) translatex(5%);
 	-o-transform: scale(2.0, 2.0) translatex(5%);
 	-ms-transform: scale(2.0, 2.0) translatex(-%);
 	transform: scale(2.0, 2.0) translatex(5%);
}

video.Links {
	float: left;
	text-align: left;
	margin-top: 4px;
	margin-right: 13px;
	margin-bottom: 3px;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-ms-transition:transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}

Video.Links:hover {
 	cursor: zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -webkit-zoom-in;
	z-index: 10;
 	-moz-transform: scale(2.0, 2.0) translatex(5);
 	-webkit-transform: scale(2.0, 2.0) translatex(5%);
 	-o-transform: scale(2.0, 2.0) translatex(5%);
 	-ms-transform: scale(2.0, 2.0) translatex(-%);
 	transform: scale(2.0, 2.0) translatex(5%);
}

img.LinksGross {
 	float: left;
	text-align: left;
	margin-top: 4px;
	margin-right: 13px;
	margin-bottom: 3px;
	transition: filter 0.9s;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-ms-transition:transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}
img.LinksGross:hover {
	z-index: 10;
 	cursor: zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -webkit-zoom-in;
 	-moz-transform: scale(2.9, 2.9) translatex(18%);
 	-webkit-transform: scale(2.9, 2.9) translatex(18%);
 	-o-transform: scale(2.9, 2.9) translatex(18%);
 	-ms-transform: scale(2.9, 2.9) translatex(18%);
 	transform: scale(2.9, 2.9) translatex(18%);

}

img.Rechts {
	float: right;
	margin-top: 4px;
	margin-left: 13px;
	margin-bottom: 3px;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-ms-transition:transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}

img.Rechts:hover {
	z-index: 10;
 	cursor: zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -webkit-zoom-in;
 	-moz-transform: scale(2.0, 2.0) translatex(-25%);
 	-webkit-transform: scale(2.0, 2.0) translatex(-25%);
 	-o-transform: scale(2.0, 2.0) translatex(-25%);
 	-ms-transform: scale(2.0, 2.0) translatex(-25%);
 	transform: scale(2.0, 2.0) translatex(-25%);
}

video.rechts {
	float: right;
	margin-top: 4px;
	margin-left: 13px;
	margin-bottom: 3px;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-ms-transition:transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}

video.rechts:hover {
	z-index: 10;
 	cursor: zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -webkit-zoom-in;
 	-moz-transform: scale(2.0, 2.0) translatex(-27%);
 	-webkit-transform: scale(2.0, 2.0) translatex(-27%);
 	-o-transform: scale(2.0, 2.0) translatex(-27%);
 	-ms-transform: scale(2.0, 2.0) translatex(-27%);
 	transform: scale(2.0, 2.0) translatex(-27%);
}
img.Rechtsgross {
	float: right;
	margin-top: 4px;
	margin-left: 13px;
	margin-bottom: 3px;
	border:1px solid #3A8544;
	box-shadow: 2px 2px 8px -1px #3A8544;
	border-radius: 10px;
	-webkit-transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-ms-transition:transform 0.8s;
	-o-transition: transform 0.8s;
	transition: transform 0.8s;
}

img.RechtsGross:hover {
	z-index: 10;
 	cursor: zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -webkit-zoom-in;
 	-moz-transform: scale(2.9, 2.9) translatex(-33%);
 	-webkit-transform: scale(3.0, 3.0) translatex(-33%);
 	-o-transform: scale(3.0, 3.0) translatex(-33%);
 	-ms-transform: scale(3.0, 3.0) translatex(-33%);
 	transform: scale(2.6, 2.6) translatex(-30%);
}

/* Vorgefertigte Formatierungen von Text-Absätzen */

P	 	 {	text-align: JUSTIFY; font-size: 110%;}
P.Intro	 {	font-weight: bold; font-size: 110%}
P.center {	text-align: center; font-size: 90%}
P.indiv  {  color: #3A8544; text-align: center; margin-top: 10px;
  			margin-left: 10px;	margin-right: 10px;
			margin-bottom: 10px; font-size: 110%}
p.legende { color: 3A8544; font-size: 80%; text-align: center;
}