/*Standardwerte für verschiedene Browsern zurücksetzen */
*{ 
    padding: 0;
    margin: 0;
}

/*Hier Header mit Bild etc sowie footer*/
p.titel {
    font-family:Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:1em;
    padding:1.35em 0 0 0;
    text-align:center;
	margin-top:0;
}
@media screen and (max-width: 33em) {

p.titel {
	font-size: 0.75em;; /* für Handy Hochformat */
}	
}
#imgFrog {
    float:right;
    width: 150px; 
    height: 66px;
	margin: 0;
}

#imgStammbaum {
	padding: 5px;
	width: 50%; 
}

body {
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:18px;
    background-color:white;
    -webkit-animation: bugfix infinite 1s;  /*Fix für ios/Android*/
}

@-webkit-keyframes bugfix {                 /*Fix für ios/Android*/
  from {padding:0;} 
  to {padding:0;} 
}

header.Hauptheader {
    background-color:#003300;
    color:white; 
    height:auto; /*damit der Text auch sichtbar ist, wenn der Header zu kurz ist*/
    min-height:66px; /*66px ist die Logo-Höhe */
}

#footer {
    background-color:#003300;
    color:white;
    text-align:center;
    margin-top: 10px;
	width: 100%;
	height: auto;
	padding: 2px;
}
/*Ende Haupt-Header und Footer*/

/*Standard-Elemente*/
h1 {
    font-size:2.5em;
    font-weight: bold;
    margin-bottom:1.5em;
    text-align:center;
    color:#172C14;
	padding-left: 10px;
}

h2 {
    font-size:2em;
    font-weight: bold;
    margin-top:1.5em;
    margin-bottom:1em;
    color:#172C14;
	padding-left: 10px;
}

h3 {
    font-size:1.8em;
    font-weight: bold;
    margin-top:1em;
    margin-bottom:0.5em;
    color:#172C14;
	padding-left: 10px;
}

h4 {
    font-size:1.6em;
    font-weight: bold;
    margin-top:1em;
    margin-bottom:0.5em;
    color:#172C14;
	padding-left: 10px;
}

h5 {
    font-size:1.4em;
    font-weight: bold;
    margin-top:0.5em;
    color:#172C14;
	padding-left: 10px;
}

h6 {
    font-size:1.2em;
    font-weight: bold;
    margin-top:0.5em;
    color:#172C14;
	padding-left: 10px;
}

ul {
    padding-left: 2em;
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 1em;
    margin-top: 1em;
	padding: 0 10px 0 3px;
}

a {
    font-size: 1em;
	padding-left: 10px;
}

blockquote {     /*für Zitate*/
	font-style:italic;	
}

cite{      /*für Quellen*/
	
}
/*Ende Standard-Elemente*/

/*Tabellen*/
table {
    width:100%;
    padding: 2.5em;
    margin-bottom: 2.5em;
}
 
caption {
    font-size: 1.5em;
    box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%);
    padding: 0.2em 0.2em 0.2em 2em;
    width: auto;
	/*margin-left: 0;*/
    position: relative;
}

td {
  font-style:italic;
  text-align: left;
  width:auto;
  padding:0.5em;
}   

td:empty {
  box-shadow: none;
}
/*Tabelle Ende*/

/*Summary Detail*/
 details {
    padding: 5px;
    background-color: #f6f7f8;
	width: 97%;
}
 summary {
	 margin-left: 10px;
	 padding-left: 5px;
	 background: #003300;
	 color: #FFFFFF;
	 border: solid #FFFFFF 1px;
	 cursor: pointer;
	 width: 98%;
}
.subsummary {
	background: #005000;
	margin-left: 20px;
}
.subsubsummary {
	background: #fff;
	color: #000;
	border: 1px solid #003300;
	margin-left: 40px;
}

.ENsubsubsummary {			/*nur auf erhöhtem Niveau*/
	background: #d6d6d6;
	color: #000;
	border: 1px solid #003300;
	margin-left: 40px;
	font-style:italic;
}

header.subheader {
	font-size:1.8em;
    font-weight: bold;
}

details ul {
	list-style: none;
	margin-bottom: 1em;
}

details ul li{
	margin-bottom: 0.5em;
}
 
/*ENDE Summary Detail*/

/*AB HIER NUR NOCH DAS TOGGLE MENU*/
/*Verhalten und Aussehen des Menu-Button*/
.btn {
  font-size: 1.7em;
  float: left;
  margin: 0.4em;
  background: #003300;
  padding: 0em;
  color: #fff;
  cursor: pointer;
}

 .btn:hover {
    background-color: #003300;
}

/*Die checkbox ist nur ein Dummy um 2 States für das Menu zu haben. Sichtbar soll sie nicht sein also 999em nach links damit*/
#toggle {
  position: absolute;
  left: -999px;
}

/*ab hier der eigentliche Navigation-Container*/
nav {
  position: absolute; /*damit der Button mitscrollt oder damit das menu scrollbar ist? Eins von beiden wars*/
  left: -75%;
  width: 75%;
  /*height: 100%; auskommentiert da es vorher in Verbindung mit Position fixed nicht scrollbar war */
  padding: 4.2em 0 0 0;
  background: #003300;
  -webkit-transition: left 0.5s;
     -moz-transition: left 0.5s;
       -o-transition: left 0.5s;
          transition: left 0.5s;
}

    /*die Klasse close beinhaltet das X, den Kreis und die Funktion*/
.close {
  cursor: pointer;
  color: #b3b3b3; /*muss grau sein, damit man ihn beim runterscrollen vor weißem Hintergrund sieht*/
}
 
.close:hover {
  color: #111;
}
 
.close span {
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0.2em 0.6em;
}

    /*ab hier die ul mit der ID nav*/
#nav {
  margin: 0.1875em 0 0 0;
  padding: 0;
  list-style: none;
}
    /*hier die links im Menu*/
#nav a {
  text-decoration: none;
  color: #fff;
  padding: 1em 0 1em 5%;
  display: block;
  border-bottom: 1px solid #002200;
  height: 2em;
  background-image: -webkit-linear-gradient(top, #004400, #003500);
  background-image:    -moz-linear-gradient(top, #004400, #003500);
  background-image:      -o-linear-gradient(top, #004400, #003500);
  background-image:         linear-gradient(top, #004400, #003500);
}
 
#nav a:hover, nav a:focus, nav a:active {
  background: #4b4746;
  background-image: -webkit-linear-gradient(top, #006600, #008800);
  background-image:    -moz-linear-gradient(top, #006600, #008800);
  background-image:      -o-linear-gradient(top, #006600, #008800);
  background-image:         linear-gradient(top, #006600, #008800);
}

/*hier der Wrapper (Außenbereich)mit dem Menue*/
.wrapper {
  width: 100%;
  overflow: hidden;
}

/*ab hier der Inner (Innenbereich für die einzelnen Seiten)*/ 
.inner {
  float: right;
  width: 100%;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

/*ab hier steht was passiert, wenn die Checkbox checked ist*/
:checked ~ nav {
  left: 0;
}

:checked ~ .wrapper .inner {
    margin-right: -75%;
}

:checked ~ nav .close {
  position: fixed;
  top: 1.4em;
  left: 0.5em;
}

/*-----------------------------------------------------------------------------------------*/
/*Design für große Displays*/
/*-----------------------------------------------------------------------------------------*/

/*Hier der header-Bereich*/
@media screen and (min-width: 50em) {
  header.Hauptheader {
    padding: 0.25em;
	margin: 0;
    height: auto;
	min-height:5em;
  }
  
  p.titel {
    font-family:elephant;
    font-size:1.4em;
    text-align:left;
    margin-right: 0.6em;
	margin-bottom: 0em;
    padding:0.25em 0 0 0;
	margin-top:0;
    } 

  #imgFrog {
    float:left;
    margin-right: 6.5em;
  }
     
  .btn {
    display: none; /*Menu-Button ausblenden*/
  }

}

@media screen and (min-width: 50em) {
  :checked ~ .wrapper .inner {
    margin-right: 0%;
    -webkit-transition: 0;
       -moz-transition: 0;
         -o-transition: 0;
            transition: 0;
  }
}

/*Ausblenden des Close-Button*/
@media screen and (min-width: 50em) {
  nav .close, :checked ~ nav .close {
    display: none;
  }
}

/*Hier die Navigation. Achtung! Die nav ist nicht im Header*/
@media screen and (min-width: 45em) {
    /*hier der Container für die Navi*/
    nav, :checked ~ nav {
    float: right;
    position: absolute;
    left: 0em;
    top: 0em;
    background: transparent;
	padding: 0;
    height: auto;
    width: 100%;
    -webkit-transition: 0;
       -moz-transition: 0;
         -o-transition: 0;
            transition: 0;
  }
}

/*hier die unsorted list*/
@media screen and (min-width: 50em) {
  #nav {
    position: absolute;
    top: 4em;
    left: 0%;
    border: 0;
  }
             
  #nav li {
    display: inline;
    float: left;
  }
             
  #nav a {
    padding: 0 1.5em;
    display: inline;
    background: #004400;
  }
                 
  #nav a:hover, nav a:focus, nav a:active {
    background: #008800;
  }
 
  #sidebar {
    margin-top: 5.5em;
  }

}