<style type="text/css" media="screen">

/*  #FFFFCC ist das helle Dafu-gelb  */

	body
	{
		/* text-align: center; */
		margin-right: 0%;
		margin-left:  0%;
		height:100%;
                margin: 0;
		padding: 0;
		font: 80% arial, hevetica, sans-serif;  /* das muss in den Container - hier hat es keine Auswirkung */
		color: #000;
		background-color: #FFFFCC;  /* Dafu-Gelb; #D6D6D6 is Light gray */

	}

	#container  /* hier drin wird der gesamte Content angezeigt. Aber nicht der Header, ein schmaler Bereich außen rum, eine 1 px dünne Linie  */
	{
		float: center;
                margin: 0 auto;
		max-width: 100%;  /* 98% gibt einen dünnen weißen Rand, aber wenn man den Bildschirm verkleinert, bleibt das Menü da stehen ... */
                text-align: left;
		background-color: #FFFFCC;
		border: 1px solid black;
		font: 85% arial, hevetica, sans-serif;

	}

	#header
        {
                background-color: #FFFFCC;
                border-left: 5px solid #FFFFCC;
                border-top: 10px solid #FFFFCC;
		/* position: fixed; top: 10; left: 10;  diese drei Werte sorgen dafür, dass der Header oben immer zu sehen bleibt */
		/* das "englisch" und "zum Inhalt wandern dann aber nach links, direkt neben den Titel */
        }

	#header h1
        {
		margin: 2px;
	}

h2 { font-family: arial, helvetica, sans-serif; font-weight: bold; text-align: center; color: black }
h3 { font-family: arial, helvetica, sans-serif; font-weight: bold; margin-left: 10mm; color: black }
h4 { font-family: arial, helvetica, sans-serif; font-weight: bold; margin-left: 10mm; color: red }

	a:link { font-weight: bold; color: #009; }
	a:visited { color: #006; }
	a:hover, a:active { color: #fff; background-color: #009; }


	#image_in_header
	{
		margin: 0px 0px 0px 0px;  /* oben rechts unten links */
		border: 0;
		/* border: 2px #FFFFCC; */
		/* display: block; */
	}

	#zeroborder
	{
		border: 0;
	}

	a img
	{
		border: none;
		vertical-align: middle;
		outline: none;  text-decoration: none;
		/* das vertical-align sorgt dafür dass (nicht nur) im IE die Unterstreichung des Bildes mit Link in der Mitte des Bildes angezeigt wird, HINTER dem Bild ... Kein Impact in Chrome und FF */
		/* ohne das verschiebt sich der Content unter dem Bild jeweils um die Link-Unterstrich-Breite :-( */
		/* with the "vertical-align: middle" you can still see the underline from the hover, now in the middle of the images which do not have a BG color. */
	}

	.fontrot { color: #FF0000; }  /* red */
	.fontblau { color: #0000FF; }  /* blue */
	/* usage: <span class=fontrot> text </span> */

	.bgwhite { background: #FFFFFF; }  /* weißer Hintergrund für die Tabelle mit dem V2R-Reader-Link */


/* --------------- nav,  Navigation von SelfHTML adaptiert ------------------------- */
/*  https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs#Dropdown-Men.C3.BC_mit_CSS  */

		nav {
			background-color: #FFFFCC;
			border: none;  /* 1px solid black; */
			height: 1.0em;
			padding: 0em;
			/*  padding: 20px;float: right; */
			width: 70em;
				/* min-width: 65em; */
		}

		nav:after {
			clear: left;
			content: "";
		}

		nav ul {
			margin: 0;
			padding: 0;
			text-align: center;
			white-space: nowrap;
 			/* min-width: 80em;  verändert die Menü-Breite, schiebt es aber nach links, und das gelbe geht auch weiter nach rechts */
			overflow-x: visible;   /* auto scroll  no-display */
			margin-bottom: -0.6em;
		}

		nav li {
			float: left; /*  wenn man das rausnimmt, ist das Menü senkrecht untereinander und die Untermenüs überschreiben die Menüpunkte darunter */
			list-style: none;
			margin: 0;
			padding: 0;
			position: relative;
			font-size: 1.0em;  /* war 2em, ändert aber nichts */
			white-space: nowrap;
		}

		/* Unternavigation ausblenden */
		nav ul ul {
			font: 0/0 serif;
			margin: 0;
			padding: 0;
			position: absolute;  /* relative schiebt den Content unter das ausgeklappte Untermenü ... */
			top: 2.5em;
			z-index: -1;
				/* -webkit-transition: all 0.2s ease-in;
				    transition: all 0.2s ease-in;  sorgt für sanftes ein- und ausblenden */
				/*  diese schenke ich mir: all: alle Eigenschaften werden verändert (Standardwert)  |  ease-in für die transition-timing-function */
 			<!-- transition-delay:0.2s; -->
		}

		/*  Unternavigation einblenden */
		nav ul li:hover ul {
			font: inherit;
			z-index: auto;
			<!-- transition-delay: 0.1s; -->
				/* display:inline-block; position: relative; hmmm, tuz nicht. Zumindest nicht hier */
		}

		nav ul ul li {
			float: none;
			margin-bottom: -0.6em;  /* -0.5 lässt noch etwas Platz zwischen den Untermenüs */
			width: auto;    /*  15em;  gleichmäßige Breite für die Unter-Menüs, aber das ist manchmal zu schmal, oder zu breit ...  */
			display: block;
			font-size: 1em;  /* Prozente oder em ändern die Fontgröße der Untermenüs nicht; das muss ich für kleine Bildschirme noch anpassen! */
		}

		nav a,
		nav span {
			background-color: lightgrey; /* #FFFFCC;   silver royalblue; */
				/* background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, gold 9px, gold 10px); sofgt für schräge Streifen */
				/* border: 1px solid blue;  das macht eine Box um jeden Menüpunkt */
				/* border-radius: 10px 10px 0 0;  macht runde Ecken im Haupt-Menü */
				/* box-shadow: 0px 5px 10px white inset; macht den Rand der Menüs etwas heller */
			color: gold;
			display: block; /*  wenn man das rausnimmt, ist das Menü und vor allem das Untermenü total zusammen geschoben ...  */
			font-weight: bold;
			margin: 0.6em 0 0 0;  /*  selfhtml  margin: 0.6em 0 0 0;  sorgt für einen Abstand zwischen den Menü-Punkten,
						  aber wie bekomme ich den Bereich dazwischen auch grau?  -  OK, durch einen negativen unteren Abstand in UL LI UL
						  oder einfachen, wenn ich hier UND da den unteren Rand auf Null setze :-)  */
			padding: 0.4em;
				/* padding: 1em 0.4em 1em 0.4em; stattdessen den Margin um je 0.2 em erhöht */
			text-decoration: none;
				/* Breite den in li enthaltenen Elementen zuweisen */
			width: auto;  /* 6.4em; */
				/* -webkit-transition: all 0.0s ease-in;
				   transition: all 0.0s ease-in;  sorgt für sanftes ein- und ausblenden */
		}

		nav div {   /*  wie nav a und nav span, aber andere font-Farbe, damit die | Trenner auch blau sind und nicht golden ... */
			background-color: lightgrey; /* #FFFFCC;   silver royalblue; */
				/* background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, gold 9px, gold 10px); sofgt für schräge Streifen */
				/* border: 1px solid blue;  das macht eine Box um jeden Menüpunkt */
				/* border-radius: 10px 10px 0 0;  macht runde Ecken im Haupt-Menü */
				/* box-shadow: 0px 5px 10px white inset; macht den Rand der Menüs etwas heller */
			<!-- color: gold; -->
			display: block; /*  wenn man das rausnimmt, ist das Menü und vor allem das Untermenü total zusammen geschoben ...  */
			font-weight: bold;
			margin: 0.6em 0 0 0;  /*  selfhtml  margin: 0.6em 0 0 0;  sorgt für einen Abstand zwischen den Menü-Punkten,
						  aber wie bekomme ich den Bereich dazwischen auch grau?  -  OK, durch einen negativen unteren Abstand in UL LI UL
						  oder einfachen, wenn ich hier UND da den unteren Rand auf Null setze :-)  */
			padding: 0.4em;
				/* padding: 1em 0.4em 1em 0.4em; stattdessen den Margin um je 0.2 em erhöht */
			text-decoration: none;
				/* Breite den in li enthaltenen Elementen zuweisen */
			width: auto;  /* 6.4em; */
				/* -webkit-transition: all 0.0s ease-in;
				   transition: all 0.0s ease-in;  sorgt für sanftes ein- und ausblenden */
		}

		nav ul ul a,
		nav ul ul span {
			/* border-radius: 10px;  macht runde Ecken in Unter-Menüs */
		}

		/* aktuelle Unterseite kennzeichnen */
		nav a:focus,
		nav a:hover,
		nav span {
			color: royalblue;
			background-color: gold;   /*  wie lasse ich das zugehörige Hauptmenü auch noch gold?  */
		}

		nav a:focus,
		nav a:hover {
			margin-top: 0;
			padding: 1em 0.4em 0.4em;
		}

		nav ul ul a:hover {
			margin: 0.6em 0 0 0;
			padding: 0.4em;
			/* padding: 1em 0.4em 1em 0.4em; klappt noch nicht ... */
		}

		/* aktuelle Unterseite kennzeichnen */
		/* noch die richtigen Farben definieren ... ! */
		nav ul ul span {
			background-color: maroon;
			color: gold;
		}

/* --------------- nav, von SelfHTML adaptiert (Ende) ------------------- */

	#menu
	{
		/* position: relative; 	   padding-top:100px; */
		/* wie kann ich das Menü immer oben sichtbar halten? */
		float: left;
		width: 200px;
		background-color: #FFFFCC;
                border-left: 30px solid #FFFFCC;
                line-height: 1.3em;
	}

	menu ul { margin-left:10px; padding-left:10px; }


	#skipmenu
	{
		float: right;
		font: 80% arial, hevetica, sans-serif;
	}

	#hostedby
	{
		margin-left: auto; margin-right: 20%;  /* align: center;  */
		margin-top: 20px;
	}

	#seiteninhalt
	{
			/* position: relative;	   padding-top:100px; */
		margin-right: 10px;
		margin-left: 200px;
		max-width: 900px;   /*  dafu: 1100  */
		background-color: #FFFFCC;
                line-height: 1.3em;
			/* white-space: nowrap; sorgt hier dafür, dass Text nicht mehr umgebrochen wird und auch über Grafiken geschrieben wird (in Chrome) */
	}

	#footer
	{
		clear: both;
		/* max-width: 1200px; */
		/max-width: 900px;
		text-align: center;
		height: 44px;
                bottom: 0;
		background-color: #FFFFCC;
                border-left: 10px solid #FFFFCC;
	}

	#nachoben  /* rechts unten einen Pfeil nach oben einblenden */
	{  position: fixed;  bottom: 6px;  right: 6px;  }


	.image-float-right
	{
		/*  display: inline-block;  */
		text-align: right;
		clear: right;
		text-decoration: none;
		color: black;
		padding: 2px;
		margin: 1px 1px 20px 10px auto;  /* links und unten 10 Pixel, oben und rechts nur 1 px - Bilder werden oben rechts im Content-Bereich platziert */
		float: right;
		/*  zoom: 1;  */
		/*  *display: inline;  */
	}

	.image-float-left
	{
		/*  display: inline-block;  */
		text-align: right;
		clear: right;
		text-decoration: none;
		color: black;
		padding: 2px;
		margin: 1px 10px 20px 1px auto;  /* rechts und unten 10 Pixel, oben und links nur 1 px - Bilder werden oben links im Content-Bereich platziert */
		float: left;
		/*  zoom: 1;  */
		/*  *display: inline;  */
	}

	.image-float-right-ie
		/*  damit ich das eigentlich funktionierende CSS beim experimentieren für IE nicht zerstöre ...  */
		/*  führt aber zu nix, es scheint wirkich nur mit figure und figcaption zu gehen ...  */
	{
		display: inline-block;
		text-align: right;
		clear: right;
		text-decoration: none;
		color: black;
		padding: 2px;
		margin: 1px 1px 20px 10px auto;  /* links und unten 10 Pixel, oben und rechts nur 1 px - Bilder werden oben rechts im Content-Bereich platziert */
		float: right;
		/*  zoom: 1;  */
		/*  *display: inline;  */
	}

	#image-float-right a{
		display:inline-block;
		text-decoration: none;
		color:red;
	 }



