/* Styles für tv-Seiten */

/* Unterschiede im Design der MHouben-Seiten liegen nur
   in den Farben, die mit Bearbeiten-Ersetzen ausgetauscht
   werden können
   Hilfe beim finden: https://color.adobe.com/de/create/color-wheel
         Seitenhintergrunde     #EBECFE (Hell)
		 Schattenfarben			#395fce (Mittel)
		 Rahmenfarben			#7E6FD5 (Dunkel)
		 Kasten-Hintergrund     #DCDEFD (Hell)

         Menü-Hintergrund       #113399 (Dunkel)
		 Menü-Untermenü			#395fce (Heller)
		 Menü-Hover				#0733B4 (GanzDunkel
      
		 Spezieller Text		#113399 (Mittelblau)						*/

:root {
 --Seitenhintergrund: #EBECFE;
 --Schattenfarbe: #395fce;
}

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

/*-------------------------------------
Schatten und runde Ecken für alle Boxen
-------------------------------------*/
DIV {
	box-shadow: 2px 2px 8px -1px #395fce;
	border-radius: 10px;
}

/*---------------------
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: #DCDEFD;
	margin-top: 10px;
	text-align: center;
	font-size: 90%;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border:1px solid #7E6FD5;
	width: 200px;
}
/*---------------------
 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;	
}
/* Abgerundete Ecken oben */
.menuT a{
	display: block;
	background-color: #113399;
	text-decoration: none;
	padding: 7px;
	color: #000;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/* Abgerundete Ecken unten */
.menuB a{
	background-color: #113399;
	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: #113399;
	text-decoration: none;
	padding: 7px;
	color: #000;
}
/* Schriftgröße von Untermenüs etwas reduzieren */
.smenu, .smenuA {
	font-size: 85%;
	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: #102D84;
}
/* Spezielle farbe für Untermenüs egal ob aktiv oder nicht */
.submenu a, .submenuA a {
	width: 180;
	background-color: #395fce;
}
/* Spezielle Färbung des aktiven Hauptmenüs*/
.menuAU, .menuAA {
	background: #395fce;
	background: -webkit-linear-gradient(top, #113399 0%,#395fce 100%);
	background: -moz-linear-gradient(top, #113399 0%,#395fce 100%);
	background: -o-linear-gradient(top, #113399 0%,#395fce 100%);
	background: -ms-linear-gradient(top, #113399 0%,#395fce 100%);
	background: linear-gradient(top, #113399 0%,#395fce 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;}

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

hr { background-color: #FFF8CA; height: 1px; border: 0; }

P        {font-size: 90%;color: black; text-align: JUSTIFY; }
P.Intro  {font-weight: bold; color:#113399;}
P.IntroLinks {font-weight: bold; color: #113399;font-size: 80%;}
P.center {text-align: center; }
P.small  {font-size: 70%;}
P.indiv  {text-align: center;
          margin-top: 10px;
          margin-left: 10px;
          margin-right: 10px;
          margin-bottom: 10px;
          font-size: 110%;}
P.CG     {font-size:110%; text-align:center;color: #113399}
Span.Headline {font-weight: bold; color: #113399;}
Span.Introhead{font-weight: bold; font-size: 130%; color: #113399;}

/*--------------------------------------------------
/* Die Linke Spalte einer Seite
---------------------------------------------------*/

DIV.SpalteLinks {
	position: absolute;
	top: -10px;
	float: left;
	width: 225px;
	text-align:center;
	margin-bottom: 0px;
	margin-right: 20px;
	margin-top: 18px;
	font-size: 95%;
	border:  0px;
	box-shadow: 0px 0px 0px #113399;
}
/* Divbox weiß unterhalb des Menüs */
DIV.BoxL {
	position: relative;
	font-size: 100%;
	color: #333399; 
	margin-bottom: 10px; 
	margin-right: 8px;
	text-align: JUSTIFY;
	float: left;
	width: 190px;
	padding: 15px;
	background-color: #FFFFFF;
	border:1px solid #7E6FD5;
}
/* DivBox für Findit-Werbung in linker Spalte */
DIV.BoxF {
	position: relative;
	font-size: 80%;
	color: #333399;
	margin-bottom: 10px; 
	margin-right: 8px;
	text-align: center;
	float: left;
	width: 190px;
	padding: 15px;
	background-color: #FFFFFF; 
	border:1px solid #7E6FD5;
}
/* Unsichbare Box als Abstandshalter-Workaround*/
DIV.Abstand {
	position: relative;
	font-size: 100%;
	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;
}
/*--------------------------------------------------
/* Die Linke Spalte einer Seite
---------------------------------------------------*/
DIV.SpalteRechts {
	position: absolute;
	left: 235px;
	text-align:left;
	margin-right:10px;
	padding: 10px;
	border: 0px ;
	min-width:400px;
	box-shadow: 0px 0px 0px #113399;
	max-width: 1600px;
}
/* Head-Kasten, am oberen Bildrand

hier erstmal für neues Bild-Design */
DIV.Headbild{
	border-radius: 10px;
	margin-top:0px;
	margin-left:-2px;
	margin-bottom: 15px;
	width:100%;
	height:75px;
	overflow-x:hidden;
	-ms-overflow-x:hidden; 
	overflow-y:hidden;
	-ms-overflow-y:hidden; 
	}
/* und hier für den alten Findit-Kasten */
DIV.Head {	
	border-radius: 10px;
	align: center;
	font-size: 80%;
	margin-bottom:15px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-color: #DCDEFD;
	border:1px solid #7E6FD5;
	min-width:400px;
}		          		 }
DIV.Headerbild {
	float: right;
	text-align:right;
	margin-bottom: 7px;
	margin-left: 7px;
	margin-right: 7px;
	margin-top: 0px;
	border:  0px;
}
/*--------------
  DIV Rahmen
----------------*/

/*Bild mit Rand */
img.rand { 
	border: 1pt solid #7E6FD5;
	margin:0;
	border-radius: 10px;

}
IMG.Links {
	float: left;
	text-align: left;
	margin-top: 4px;
	margin-right: 13px;
    transition: filter 0.9s;
	border:1px solid #7E6FD5;
	box-shadow: 2px 2px 8px -1px #395fce;
	border-radius: 10px;
}

IMG.Rechts {
	float: right;
	text-align:center;
	margin-left: 13px;
	margin-bottom: 3px;
	border:1px solid #7E6FD5;
	box-shadow: 2px 2px 8px -1px #395fce;
	border-radius: 10px;
}
/* Kleines Kästchen, fließend für Jahreszahlen in Finanzkrisenseite*/
DIV.Jahr {
	float: left;
	text-align: left;
	margin-right: 20px;
	font-size: 150%;
	font-weight: bold;
	border:  0px;
	box-shadow: 0px 0px 0px #113399;
}
/* Divbox mit Rand, die immer Rechts am Bildrand klebt */
DIV.BoxR {
	color:#333399;
	text-align: center;
	margin-left: 10px;
	margin-top:-15px;
	margin-bottom:15px;
	width: 200px;
	float: right;
	padding: 10px;
	background-color: #FFFFFF;
	border: 1px #113399 solid;
}
/* Divbox die in der linken Menüspalte sitzt */
DIV.Links {
	top: 15px;
	text-align:center;
	margin-bottom: 30px;
	font-size: 90%;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-color: white;
	border:1px solid #7E6FD5;
}