/* ACHTUNG! Man sollte alle Hilfskommentare hier herausl�schen, bevor man das CSS
 * produktiv nutzt, damit die Datei so klein wie m�glich bleibt.
 */

 /* NORMALISIERUNG:
    Manche WebDesigner stellen die margins und paddings aller Elemente auf 0, um eine einheitliche Darstellung zu erreichen, andererseits muss man dann ALLES wieder neu formatieren.
	box-sizing f�r alle Elemente ist jedoch sehr sinnvoll, da man damit Rahmen und Innenabst�nde automatisch in der Breite einschlie�t und so leichter layouten kann. */ 
* {    
	box-sizing: border-box;
}

/* -- Allgemeines -- */
html {
  background-color:#4e0107;
  background-attachment: fixed;
  color: black;
}

body {
  margin: 0 auto;
  padding: 1%; /* Ein wenig Abstand, damit der Anschein eines Blattes auf der Wand immer erhalten bleibt. */
  max-width: 75em; /* Eine Begrenzung der Breite auf h�hstens 75em. Das machen wir um nicht zu lange Textbreiten zu erhalten, welche dann schlecht zu lesen sind. */
  font-family: verdana, arial, sans-serif ;
  font-size: 0.8em; /* Ein Kompromiss �ber den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen im Browser selbst eingestellte Textgr��e f�r zu gro�, wissen aber nicht wie man das �ndert. */
  border: 1px solid #aaa; /* Eine kleine optische Abgrenzung. */
  border-top: 0; /* Ganz oben allerdings w�rde es mit dem grauen Rand komisch aussehen, deshalb weg damit. */
  background: white;
}

.skip { /* Da ein wichtiger Screenreader das display: none; auch f�r sich versteht und nichts vorliest, obwohl das hier sich vor allem an Blinde richtet, muss man es so l�sen, dass man diesen Link au�erhalb des Sichtfeldes bringt. Somit wird er trotzdem vorgelesen. */
  position: absolute;
  margin-left: -999px;
}


/* - Logo bzw. Kopf - */
header {
  background: url(https://dl.dropbox.com/s/me25lub03p4b0df/Titel1.jpg?dl=0) 0 0 no-repeat black; /* Das Bild mit der Blume hat einen �bergang zum Schwarzen, das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch, dass die Hintergrundfarbe auch schwarz ist, entsteht der Eindruck, als ob das Bild unendlich lang w�re. */
  height: 64px; /* Das Blumenbild ist 64px hoch also w�hlen wir das auch als H�he f�r unseren Kopf. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
  padding: 0 1em;
  text-align: right;
  line-height: 54px;
  font-size: 4em; /* Das Logo soll auch in unseren Kopf passen, deswegen ist es ein wenig kleiner. */
}
header a#logo {
  color: white; /* Die vorher eingestellte Farbe passt nicht um auch als Logofarbe zu dienen, deshalb w�hlen wir hier wei�. */
  text-decoration: none;
}
header a#logo span { /* Der letzte Buchstabe soll invertiert dargestellt werden. */
  color: #9d0f1b;
  padding-right: 0.1em; /* Ein Hack, damit das wei�e rechts und links genau so breit ist. */
  font-weight: bold;
}
a { color: #0B4D8C; text-decoration: underline; } /* Alle unbesuchten Links bekommen eine leicht bl�uliche Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
a:visited { color: #9d0f1b; } /* Besuchte Links werden rot, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */
a:focus {color: #9d0f1b;}

/* - Der Hauptinhaltsteil - */
main {
  padding: 0 2%; 
  line-height: 1.5em; /* Zur besseren Lesbarkeit erh�hen wir die Zeilenh�he. */
}

section{
  display: inline-block;
  width: 73%;
  position: relative;
  margin-top: 2em;
}

/* - Sidebar, Rechte Spalte - */
aside {
  width: 25%; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Sidebar werden, damit immer gen�gend Platz f�r den richtigen Inhalt bleibt. */
  float: right; /* Damit erreichen wir, dass der Inhalt links neben der Sidebar vorbeiflie�t und nicht erst unten drunter anf�ngt. */
  clear: right;
  padding: 0em 1% 1em;
  margin: 10em 1% 0 1%;
  border-left: 2px dotted #aaa; /* Hiermit trennen wir optisch die Sidebar vom eigentlichen Inhalt ab. */
  font-size: 0.9em; /* Die Schriftgr��e setzen wir hier ein wenig herunter damit erkennbar wird, dass das Informationen zweiter Rangordnung sind. */
}

aside dt { /* Die einzelnen �berschriften in der Sidebar */
  font-size: 1.2em;
  font-family: Georgia, Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Sidebar. */
}
aside dd { /* Die Unterpunkte der Sidebar. */
  padding: 0;
  margin: 0.2em 0;
}

h1 { /* Die �berschrift jeder Seite stellen wir besonders da, denn sie ist sehr wichtig. */
  font-size: 2.7em;
  font-weight: normal;
  line-height: 1.0em;
  padding: 0.6em 0 0.2em 2%;
  margin: 0;
  border-bottom: 1px dashed #9d0f1b;
}
h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4, h5, h6 { /* Alle �berschriften bekommen eine besondere Farbe, und da sie sehr gro� sind, k�nnen wir es uns erlauben hier eine Schrift mit Serifen zu w�hlen. Wir spielen hier ein wenig mit Typographie, und entgehen dem Einheitsbrei auf vielen Seiten. */
  color: #9d0f1b;
  font-family: Georgia, Times, serif;
}

/*DL, DT, DD Datenliste*/
dl 	{ margin-bottom:50px;}
 
dl dt {	
    float:left;
    font-weight:bold;
    margin-right:5px;
    padding:5px; 
    width:50%;
}
 
dl dd {
    margin:2px 0;
    padding:5px 0;
}

img { /* Alle Bilder bekommen einen sch�nen Rahmen. */
  border: solid 1px #aaa;
  padding: 1px;
}

.gif{border: solid 0px #aaa;
  padding: 0px;}

.fleft { /* Sachen, an denen der Text vorbeiflie�en soll, werden diese Klassen zugewiesen. */

  float: left;
  width: 100%;
  margin: 0 1em 0.2em 0; /* Man sollte einen sch�nen Abstand w�hlen, sonst kleben die Sachen so am Text. */
  
}

.fright {

  float: right;
  margin: 0 0 0.2em 1em;
 
}

.imgright {
  width: 48%;
  float: right;
 
}

.imgleft {
  width: 48%;
  float: left;
}

.orgel { width: 70%; }

.asideimg {width: 80%;}

.imghaupt {
  float: left;
  width: 60%;

}

.rhaupt {margin-left: 63%;
      
}

.rhauptunten { position: absolute;
bottom: 0;
margin-left: 63%;
}

.linkorg {font-size: 2em;}

.marktrans {opacity:0.9;}

/* -- Layoutspezifisches -- */

footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie aside, falls aside l�nger sein sollte. */
  padding: 2%;
  text-align:center;
  border-top: 2px dotted #9d0f1b; /* Hiermit trennen wir optisch den footer vom eigentlichen Inhalt ab. */
}

footer .copy span {
	margin:0 auto;
	display:block;
}


/* - Men� - */
nav ul {
  background: #9d0f1b;
  padding: 5px 5%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Men�s rechts und links sein. */
  margin: 0;
  text-align: right;
  color: yellow; /* Hier definieren wir die Farbe des Men�punktes, der kein Link ist, also den Men�punkt der Seite auf der wir uns gerade befinden. */
}
nav ul li {
  font-size: 1.2em;
  display: inline; /* Damit die Men�punkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Men�punkten schalten wir ab. */
  border-left: 1px solid white; /* Ein optischer Trennungsstrich */
  padding: 0 .5em 0 .5em;
  font-weight: bold;
}
nav ul li a {
  color: white; /* Hier ist das mit der Linkfarbe genauso, sie soll wei� sein. */
  padding:0.1em 1em;
  border-radius:0.2em;
  text-decoration: none;
}

nav ul li a:hover,
nav ul li a:focus {   /* Wenn der Link durch Maus oder Tastatur aktiviert wird, leuchtet er gelb auf! */
	color: black;
	background: white;
	opacity:0.4;
}

nav ul li a:visited {
  color: white;
} /* Besuchte Links werden rot, bleiben dennoch unterstrichen. Somit erkennt man wo man sich schon befunden hat. */

div.map {width:100%; height: 400px;}

/* 1-Spaltenlayout  mit Navigation unten*/
@media only screen and (max-width: 600px) {
nav ul {
	display:block; 
	background:transparent;				/*Der gr�ne Schatten wird deaktiviert, stattdessen wird nav ul li a mit gr�nem Hintergrund sichtbar! */
	margin: 1em 0;
}
nav ul li{width:90%;margin: 5px 0;  }   /* Damit man auf SmartPhones navigieren kann, werden die Men�punkte jetzt �ber 90% der Screen-Breite gezogen */
nav ul li.active{padding:0 2em; background:green; border-radius:10px;}
nav ul li a{display:inline-block;width:100%; color:white; background:#9d0f1b; margin:5px 0; border-radius:10px;text-align:center;}
nav ul li a:after{display:none;} 

section, 				/* kein Spalten-Layout mehr, alles wird untereinander dargestellt*/
section.spalte {
	float:none;
	display:block;
	width:100%;
  border-bottom: 2px dotted #9d0f1b;
}

aside {
	float:none;
	display:block;
	width: 100%;
  margin-bottom: 2em;
  margin-top: 2em;
}

.tds { display: block ; }

.fleft, .fright {   		/*Damit die Bilder jetzt nicht zu klein werden, nehmen sie die halbe Breite des Bildschirms ein.*/
	width: 100%;
}
header {
  background: url(https://dl.dropbox.com/s/me25lub03p4b0df/Titel1.jpg?dl=0) 0 0 no-repeat black; /* Das Bild mit der Blume hat einen �bergang zum Schwarzen, das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch, dass die Hintergrundfarbe auch schwarz ist, entsteht der Eindruck, als ob das Bild unendlich lang w�re. */
  margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
  padding: 0 1em;
  text-align: center;
  line-height: 54px;
  font-size: 2.5em; /* Das Logo soll auch in unseren Kopf passen, deswegen ist es ein wenig kleiner. */
}

tbody.kk { font-size: 9px }
th { font-size: 10px }
sup { font-size: 5px }

div.map {width:100%; height: 500px;}

.orgel { width: 100%; } 

.asideimg {width: 30%;}

.imghaupt {
  width: 100%;
  margin-bottom: 2em;}

.rhauptunten {
  position: relative;
  width: 100%;
  margin-left: 0%;
}

.rhaupt {
  width: 100%;
  margin-left: 0%;
}

.fleft {float: rigth;}

}