/*So wird ein Kommentar in ein Stylesheet eingefügt*/

/* Dies ist ein Stylesheet-Dokument (mystyle.css) zur externen Formatierung von html Dateien.
  Die Datei mit der Endung .css wird in das html-Dokument in den Head-Tag so eingebunden: 
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  Das gilt, wenn die css-Datei sich im gleichen Verzeichnis befindet wie die html-Datei.
  Andernfalls muss die Datei mit dem absoluten oder relativen (bezogen auf das Verzeichnis der html-Datei) 
  Dateipfad eingebunden werden.*/
  
/* css-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften. 
  So kann man beispielsweise ein Format für Überschriften 1. Ordnung definieren und für Eigenschaften 
  wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmen.*/
 
/* Die css-Formatierung setzt sich aus dem Selektor, der die gewünschten Elemente selektiert, und einer 
  Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

  Selektor { Eigenschaft:Wert; }

  Die Kombination aus Eigenschaft und Wert in geschweiften Klammern wird als Deklaration bezeichnet. 
  Deklarationen mehrerer Eigenschaften für das gleiche Element werden durcn Semikolons abgetrennt.
  Bei umfangreichen Deklarationen schreibt man die einzelnen eigenschaften und ihre wertzuweisung meist so untereinander:
  
  Selektor {
      Eigenschaft1:Wert1;
      Eigenschaft2:Wert2;
     ...
     } */


/*so, nun geht's los: */

/* Hier wird definiert, welchen Hintergrund der Body-Bereich hat. */

body {
  border:solid 0px black; /* Nur zur Sichtbarmachung des Bodybereichs */
  background-image:url("http://www.songs-and-stories.de/Grafiken/Hintergrund_dunkel.jpg"); 
  background-repeat:repeat; 
  background-attachment:fixed; /* Der IE7 interpretiert offenbar background-attachment:fixed nur, wenn vorher das Attribut background-repeat gesetzt wurde. */
  margin-top:0.5em;
  min-width:30em; /*Mindestbreite verhindert Anzeigefehler in modernen Browsern */
  /*font-size:100.01%; /*um Fehler bei der Schrifgrößenänderung im Internet-Explorer zu vermeiden*/
  font-size:14px;
	}
  
/* Hier wird die Schriftauszeichnung des gesamten Inhalts vorformatiert. Der Selektor * steht hier für alle Elemente.
  Natürlich werden nur solche berücksichtigt, die auch Schrift enthalten. Die Größenbezeichnung em ist eine relative. 
  Wie 1 em in jedem Browser definiert wird, ist unterschiedlich. */

* { font-family:Helvetica,Arial,sans-serif;}
p { color:white;/*#003366;*/}
a { color:white;}




/* Es folgen die Formatierungen von Überschriften, Listenpunkten und zentrierten Elementen: */

h1 { font-size:1.6em; }
h2 { font-size:1.4em; }
h3 { font-size:1.3em; }
h4 { font-size:1.2em; }

h1 { text-align:center;  }

h1, h2, h3, h4 { 
      color:white;
      font-weight:200;       
      margin-top:0em; 
      }


    
.zentriert{
    text-align:center;
    }

li { font-size:0.8em;
     color:white;/*#003366;*/
     line-height:130%;
     list-style-position:outside; /* Bedeutet, das mit <br> umgebrochene Zeilen innerhaklb des Listenpunktes eingerückt werden. */      
     }
ul { list-style-type:circle; color:white;} /*Art des Listenzeichens, hier ausgefüllter Kreis */

#Seitenname { color:white; }



/*Div-Bereiche*/


#Mittelbereich {  /*Bereich, in dem der gesamte Inhalt, also Kopfbereich, Info-Box, linke Box, Inhaltsbereich, rechte Box und Fusszeile liegt*/
    
    margin:auto;
    /*border-width:1px; border-color:white; border-style:solid; zu Testzwecken*/
    max-width:1200px;
    padding-top:1em;
    padding-left:0px;
    padding-right:0px; 
    
    background-color: transparent;  /* zu Testzwecken */
    }



     
  div.linke_box { /*Hier wird ein linker Box-Bereich f&uuml;r ergänzende Infos definiert */
    
    float:left;
    width: 18%;
    background-color: transparent;
    padding:0px;
    margin: 0px;
    
    background-position: right top;
    background-repeat: repeat-y;
    font-size:0.9em; 
    
    }
   
   div.rechte_box { /*Hier wird ein rechter Box-Bereich f&uuml;r ergänzende Infos definiert */
    
    float:right;
    width: 18%;
    background-color: transparent;
    padding:0px;
    margin: 0px;
    
    background-position: right top;
    background-repeat: repeat-y;
    font-size:0.9em; 
    
    } 
    

div.Inhalt { /*Hier wird die Formatierung des Bereichs definiert, der im div-Block-Inhalt liegt */
    margin:0;
    padding:0;
    clear: both; /* Verhindert das Umfließen bzw. Floaten nachfolgender Boxen, wenn das nicht ausdrücklich gewollt ist */
    /*border-width:3px; border-color:yellow; border-style:solid; zu Testzwecken*/
  
  }
/* Gilt für alle Absätze, die im div-Block liegen, der mit der class="Inhalt" gekennzeichnet ist*/
  /*.Inhalt p {           
    font-size: ;
    margin: 1em 0;
  }*/
  
  
  
div.info_box { /*Hier wird ein Box-Bereich definiert, in dem der Einleitungstext für jede Seite steht */
    /*position:relative;*/
    margin: 0 19%;
    
    padding:0;
    
    /*border-width:2px; border-color:red; border-style:solid; zu Testzwecken*/
    background-color:#FFFFCC;
    }
  
  div.info_box_top_L { /*linke, obere Ecke */
    float:left;
    margin:0;
    padding:0;
    background-image:url('../../Grafiken/Rahmen_oben_links.gif');
    background-position: right bottom;
    background-repeat:no-repeat;
    width: 30px;
    height:15px;
    }
    
  div.info_box_top_M { /*oberer Rahmen */
    margin:0;
    padding:0;
    background-image:url('../../Grafiken/Rahmen_oben_Mitte.gif');
    background-position: left bottom;
    background-repeat:repeat;
    height:15px;
    }
    
  div.info_box_top_R { /*rechte, obere Ecke */
    float:right;
    margin:0;
    padding:0;
    background-image:url('../../Grafiken/Rahmen_oben_rechts.gif');
    background-position: right bottom;
    background-repeat:no-repeat;
    width: 30px;
    height:15px;
    }
    
  div.info_box_bottom_L { /*linke, untere Ecke */
    float:left;
    margin:0;
    padding:0;
    background-image:url('../../Grafiken/Rahmen_unten_links.gif');
    background-position: left top;
    background-repeat:no-repeat;
    height:30px;
    width: 15px;
    }
    
  div.info_box_bottom_M { /*unterer Rahmen */
    margin:0;
    padding:0;
    background-image:url('../../Grafiken/Rahmen_unten_Mitte.gif');
    background-position: left top;
    background-repeat:repeat;
    height:15px;
    }
    
  div.info_box_bottom_R { /*linke, untere Ecke */
    float:right;
    margin:0;
    padding:0;
    background-image:url('../../Grafiken/Rahmen_unten_rechts.gif');
    background-position: right top;
    background-repeat:no-repeat;
    height:30px;
    width: 15px;
    }
 
  div.info_box_inhalt { /*Inhalt der info_box_box*/
    width:;
    margin:0px;
    padding: 0 15px;
    border-style:solid;
    border-width: 0px 0px 0px 1px; 
    border-color:#FFFFCC silver #FFFFCC silver;
    background-image:url('../../Grafiken/Rahmen_rechts.gif');
    background-position: right top;
    background-repeat: repeat-y;
    font-size:1.2em; 
    color:blue;
    }
          
  /*alle Absätze, die im elternelemet div mit der class info_box_inhalt enthalten sind:*/
  div.info_box_inhalt p { 
    font-family:"Myriad Condensed Web",Helvetica,Arial,sans-serif;
    font-size:1.1em; 
    color:navy;
    /*margin:0px;*/ /* Das funktioniert komischerweise nicht */
    padding: 0 1em;
    }
  
  /*alle links, die im elternelemet div mit der class info_box_inhalt enthalten sind:*/  
  div.info_box_inhalt a { 
    font-family:"Myriad Condensed Web",Helvetica,Arial,sans-serif;
    /*font-size:1.1em; */
    color:navy;
    /*margin:0px;*/ /* Das funktioniert komischerweise nicht */
    }
    
   /*alle kursiven Texte, die im elternelemet div mit der class info_box_inhalt enthalten sind:*/
  div.info_box_inhalt i { 
    font-family:"Myriad Condensed Web",Helvetica,Arial,sans-serif;
    font-size:;
    color:navy;
    }
    
.Mittelbox {  <!--Dei mittlere Box, dunkel hinterlegt wie Darkbox (s.u.), aber festgelegten Abständen zu den Seitenboxen-->
    color: white;
    background-image:url(../Grafiken/bg-trans.png); 
    /*padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;*/
    padding:1em;
    margin:0 19% 0 19%;
    
    border-width:1px 2px 2px 1px; 
    border-style:solid; 
    border-color:#898F9C black black black;
    }
       
.darkbox { /*Dunke Box fuer Texte*/
    color: white;
    background-image:url(../Grafiken/bg-trans.png); 
    /*padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;*/
    padding:1em;
    margin-top: 0px;
    margin-bottom: 0px;
    border-width:1px 2px 2px 1px; 
    border-style:solid; 
    border-color:#898F9C black black black;
    }
    
/*Tabellen-Layout*/

table {
           border:0px; 
           /*table-layout:fixed;*/
           width:100%;
           font-size:0.9em;
           margin: 0px;
           padding:0px;
           }
        caption {
           color:white;
           align:top;
           }
           
        tr {
           min-height:100px;
           }
           
        td { 
           color:white;
           vertical-align:top; 
           border:1px solid #465D75; /*border zu testzwecken auf 0 gesetzt*/
           padding: 0.5em;
           }
        th { 
           background-image:url(../Grafiken/bg-trans.png); /*zu Testzwecken hinzugef&uuml;gt*/
           color:white;
           border:1px solid #465D75; /*border zu testzwecken auf 0 gesetzt*/
           padding: 0;
           }
           
        .cover {
          padding:2px 0 2px 1em;
          /*width:100px;*/
          }
        
    .table {
          color:white;
          font-weight:bold;
          /*text-decoration:none;*/
          }
    div #tableinhalt { /*definiert den Hintergrund für die Tabelle, die links eine über die ganze Spalte gehende Grafik haben soll */
          /*background-color:#264655; zu Testzwecken entfernt */
          /*background-image:url(Grafiken/baum_mit_Pfeil_web.jpg); Zu Testzwecken entfernt */
          background-image:url(../../Grafiken/bg-trans.png); /*zu Testzwecken hinzugef&uuml;gt*/
          /*background-repeat:no-repeat;
          background-position:left top;*/ /* zu Testzwecken entfernt*/
          padding: 0;
          }

   #Impressum { color:white; position: relative; margin-right:1em;}
   
   #Fusszeile {  /*ein bestimmer Bereich <div id="Fusszeile">) */
    /*margin-left: auto; margin-right:auto; margin-top:0em;*/
    max-width:750px;
    clear: both;
    margin:0 auto;

    padding: 2em 0 ; /* 2em vertikaler Innenabstand, damit die Hintergrundgrafik hineinpasst */
    text-align: right;
    background-image:url('../../Grafiken/Fusszeile_dunkel.gif'); 
    background-size:70%;
    background-origin: border;
    background-repeat:no-repeat; 
    background-position:center; /*Zu Testzwecken ge&auml;ndert*/
    /*width:749px;*/
    font-size: 1em;
    
    /*background-color: #fed; border: 1px solid silver;*/
   }
   

        
    .menue a {
    background-image:url(../Grafiken/bg-trans.png); 
    border-width:1px;
    text-align:center;
    color:silver;
    border-style:solid;
    border-width: 1px 2px 2px 2px;
    border-color:#898F9C black black black;
    padding:1px 2px 1px 2px;
           
    }
    
    .menue a:link { text-decoration:none; color:white; }
    .menue a:visited { text-decoration:none; }
    .menue a:hover { text-decoration:none; color:white; }
    .menue a:active { color:white; }
    .menue a:focus { color: white; text-decoration:none; }
    
    #carousel1 {
      width:100%;
      }
          
    .carousel_container {
				width: 100%;
				height: 400px;
				margin: 0px auto;
				border: 1px solid #898F9C;
        }