body {
	/*width: 900px;
	margin: auto;*/
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	font-family: Veranda;
	font-size: 1rem;
	}
	
#hintergrund {
	position: fixed;
	height: 100%;
	width: 100%;
	}	
	 
h1 {font-size:20px;color:#000000; margin-bottom:0px; font-weight:bold;}     
h2 {font-size:18px;color:#000000;}
h3 {font-size:14px;color:#000000;}
h4 {font-size:12px;color:#000000;}
h5 {font-size:10px;color:#000000;}
.h3 {font-size:14px;color:#000000;}
.h4 {font-size:12px;color:#000000;}
.h5 {font-size:10px;color:#000000;}

a:link, a:visited, a:active, a:hover
   {
  text-decoration:none;
  color: red;
  }
  
	#table { 
	width: 70%;
	height: 76%;
	margin: 3% auto;
	padding: 0 20px;
	/*border: 1px solid;
	border-color: blue; */
	}
 

header,
nav,
article,
/*section,*/
/*aside,*/
footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}


header {
	background: /*transparent*/ #F1F3F4;
	border-color: #d5d5d5;
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
}

#nav,
#nav ul,
#nav li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Generelle vererbbare Settings innerhalb des Menus */

#nav,
nav * {
	font-size: 14px;
	line-height: 20px;
	color: #000;
	background: #fff;
	text-align: left;
}
/* Alle Labels (a ohne href Attr)  und Links haben ein bestimmtes uniformes aussehen */

#nav a {
	display: block;
	background: #fff;
	padding: 0 5px 0 10px;
}

* php #nav >li > a {
	width: 6em;
}
/* Fix für MSIE 6 ? */

* php #nav ul a {
	width: 9em;
}
/* Fix für MSIE 6 ? */

*+php #nav >li > a {
	width: 6em;
}
/* Fix für MSIE 7 */

*+php #nav ul a {
	width: 9em;
}
/* Fix für MSIE 7 */
/* alle aktivierbaren Links haben bestimmte Farben */

#nav a[href] {
	text-decoration: none;
	color: #f00;
}
/* Die immer sichtbare Menu-Items */

#nav > li {
	display: inline;
	display: inline-block;
	vertical-align: top;
	border: 1px solid #ccc;
}
/* MSIE8 -- verstehen die Farbe transparent nicht */

:root #nav > li {
	border: 1px solid transparent;
}

* php #nav li {
	float: left;
	zoom: 1;
	border: 1px solid #ccc;
}
/* MSIE 6 fix ?? */

* php #nav ul li {
	float: none;
	display: block
}
/* MSIE 6 fix ?? */

*+php #nav > li {
	display: inline;
	border: 1px solid #ccc;
}
/* MSIE 7 fix*/
/* Die Focus-Linie verbergen, sie wird durch passenden Hintergrund kompensiert */

#nav *:focus {
	outline-width: 0;
}
/* Die Menu-Gestaltung*/

#nav {
	text-align: center;
	/* Schatteneffekte */
	
	-moz-box-shadow: 0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;
	-webkit-box-shadow: 0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;
	box-shadow: 0px 6px 10px -5px #666, inset 0px -8px 8px -7px #000, inset 0px 4px 8px -7px #666;
}

#nav > li > a {
	padding: 5px 10px;
	/* Schatteneffekte */
	
	-moz-box-shadow: inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
	-webkit-box-shadow: inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
	box-shadow: inset 0px -8px 8px -7px #444, inset 0px 4px 8px -7px #666;
}
/* Alle Levels erhalten ein einheitliches Bild */
/* Jeder Level wird absolut positioniert und hat eine definierte Mindestbreite: */

#nav ul {
	position: absolute;
	min-width: 10em;
	border: 1px solid #ccc;
	text-align: left;
	/* Schatteneffekte */
	
	-moz-box-shadow: 3px 5px 10px #666;
	-webkit-box-shadow: 3px 5px 10px #666;
	box-shadow: 3px 5px 10px #666;
}
/* Jedes Item in jedem Level erzeugt einen neuen Koordinatenkontext */

#nav li {
	position: relative;
}
/* Der 1. Level erscheint vertikal unter den Menu-Labels */

#nav .level1 {
	top: 30px;
	left: -1999px;
	/* einblenden left:-1px;*/
}
/* Der 2. bis x. Level erscheint horizontal versetzt neben dem ersten Level */

#nav .level2,
#nav .level3,
#nav .level4 {
	top: -1px;
	left: -1999px;
	/*einblenden left:8em;*/
}
/* Den Menupfad zur aktuellen Seite hervorheben */

#nav a.current {
	background: #aaf;
}
/* Betone die im moment gehoverten Items */

#nav a:hover,
#nav li.hover > a {
	background: #ddd;
	outline: 1px solid #f90;
	outline-width: 2px;
	outline-offset: 2px;
	position: relative;
	z-index: 20;
}

#nav a.current:hover,
#nav li.hover > a.current {
	background: #aaf;
}
/* Gebe den Labels, die keine Links sind, Dropdown/right-Pfeil */

#nav ul a:not([href]):not([class="current page"]):before {
	float: right;
	content: "\25b8";
	/* Pfeil rechts */
	
	padding-left: 5px;
}

#nav > li > a:not([href]):not([class="current page"]):before {
	float: right;
	content: "\25be"; /* Pfeil runter */
	padding-left: 5px;
}
/* Wir korrigieren die z-index-Werte */

.level1 {
	z-index: 11;
}

.level2 {
	z-index: 12;
}

.level3 {
	z-index: 13;
}

.level4 {
	z-index: 14;
}
/* Interaktives Einblenden  */

#nav > li:hover .level1,
#nav > li.hover .level1 {
	left: -1px;
	/* den obersten Level verzögert einblenden */
	
	-moz-transition-property: left;
	/* ab FX 4.0 */
	
	-moz-transition-delay: 0.3s;
}

#nav li:hover > .level2,
#nav .level1 >li.hover .level2 {
	left: 10em;
}

#nav li:hover > .level3,
#nav .level2 >li.hover .level3 {
	left: 10em;
}

#nav li:hover > .level4,
#nav .level3 >li.hover .level4 {
	left: 10em;
}


 section {
	height:40px;
	text-align: 2px auto; 
	background: #F1F3F4;
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	border-color: #df6c20; /* #d5d5d5; */
	padding: 5px;
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
} 

article {
	background: #ffede0;
	border-color: #df6c20;
	overflow: auto;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

/*aside {
	background: #ebf5d7;
	border-color: #8db243;
	-webkit-flex: 2 1 0;
	flex: 2 1 0;
}*/

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
}

/****************************************/
/* Spezielle Textformate */
/****************************************/
	.einruecken { left: 15%; }
    .mitte { vertical-align: middle; }
	.rotfett { color: #FF0000; font-weight: bold; }
	.greenfett { color: green; font-weight: bold; }
	.blaufett  {  color: #0000FF;	font-weight: bold; }
	.braunfett  { color: #663250; font-weight: bold; }
	.rosafett { color: deeppink; font-weight: bold; }
	.br { border-right: 1px solid; }
	.h2 { 
	font-family: "Old English Text MT", Times, serif;
	text-shadow: black 3px 2px 1px; font-size:1.5em;
	letter-spacing: 0.1em; 
	color: red; }	
	.H1 {
	 font-family: Old English Text MT; color: #FF0000; text-shadow:black 3px 2px 1px;
	 text-align: center;
	 margin: 0;
	 font-size: 2.5em;
	 }
	.H1a { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:35px;
	 color: pink; } 
	.H1b { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:35px;
	 color: orange; } 	 
	.H1c { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 2px 2px 1px; font-size:35px;
	 color: blue; } 	 

	 .H2 { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:2.2em;
	 color: #FF0000;
	 } 

	 .H2a { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:2.2em;
	 color: deeppink;
	 } 

	 .H2b { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:2.2em;
	 color: brown;
	 } 

	 .H2c { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:2.2em;
	 color: blue;
	 } 

	 .H2d { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:2.2em;
	 color: green;
	 } 

	 .H2e { 
	 font-family: "Old English Text MT", Times, serif;
	 text-shadow: black 3px 2px 1px; font-size:2.2em;
	 color: black;
	 }