/* /*========================================================================
* Hoerpfad
* 
* Allgemeines Layout für alle Seiten.
* 
* Ursprüngliches Konzept und Layout: Lukas Lanzendörfer
* Umsetzung:          Stephan Sigg (stephan.sigg@gmail.com), 2011
* Überarbeitung, neues Layout:      Noah Jäggi (coursoant1(at)gmail.com), 2018
* Überarbeitung, Neugestaltung:     Nicolas Matter (contact(at)nicolasmatter.com), 2019
========================================================================*/

/* @import immmer am als Erstes stehen lassen!*/
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Patrick+Hand+SC|Roboto:300&display=swap');

* { margin:0; padding:0; }

body
{
  background-color: #F4F1E6;

}

h1
{
  font-family: 'Amatic SC', sans-serif;
  font-weight: bold;
}

h2
{
  font-family: 'Roboto', sans-serif;
  font-size: 100%
}

h3 {
  text-align: center;
  font-family: 'Amatic SC', sans-serif;
  font-size: 220%;
}

.box 
{
  position: relative;
  display: table-cell;
  align-items: center;
}

.box h3
{
  font-family: 'Amatic SC', sans-serif;
  font-size: 220%;
  margin-top: 8%;
}

#cf img {
  position:absolute;
  width: 400px;
  margin-top: 24%;
}

#cf img.top:hover {
  opacity:0;
}

#cf div.hef
{
  display:block;
  opacity:0;
  margin-left:-31.3%;
  margin-top: -55%;
  width:400px;
  height:500px;
}

.text
{
  position: relative;
  z-index: 999;   
  text-align: left;
  margin-left: 20%;
  font-family: 'Roboto';
  font-weight: lighter;
  font-size:108%;
  color: rgb(26, 40, 54);
  width: 64%; /* Set the width of the positioned div */
}

ul, ol {
  margin-left:20px;
}

ol li {
  padding-top:50px;
  font-weight:bold;
}

dl {
  line-height:1.8em;
}

dl dt {
  font-weight:bold;
}

dl dd {
  margin-left:20px;
}

.clearfix {
  clear:auto;
}

.hidden {
  display:none;
}


img {
  border:0;
}

a {
  text-decoration: none;
}

a:link, a:visited {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal; 
  font-variant: normal; 
  font-weight: 400; line-height: 15px;
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: none;
}

div#wrapper {
  margin:0 auto;
  width:1000px;
	min-height: 400;
}

div#titel {
  height:66px;
  width:800px;
  /* background:#b2ccd9 url("../navigation/hoerspur_titel_underline.jpg") repeat-x top; */
  background-color: #517FAD;
  margin: 10px auto 0 auto;
}

div#titel p#content a{
  display:block;
  
  width:239px;
  height:66px;
}

div#titel p#content a:hover
{
  background:url("../navigation/hoerpfad_titel_nzoom.png") left top no-repeat;
}

div#titel p a#logo {
background:url("../navigation/hoerpfad_titel_neu.png") left top no-repeat;
float:left;
}
div#titel p a#schnecke {
  /*background:url("../navigation/hoerspur_schnecke.jpg") left top no-repeat;*/
  float: right;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
}

div#schnecke {
  float:right;
}
div#zugriff {
  clear:both;
  height:40px;
  background:#517FAD;
  width:800px;
  margin:0 auto;
}

div#zugriff div {
  background:#517FAD;
  width:800px;
  height:40px;
}

div#zugriff p#stufen {
  float:right;
}

div#zugriff p#stufen a {
  display:block;
  float:left;
  width:80px;
  height:40px;
}

div#zugriff p a#klangschueler {
  background:url("../navigation/ks.png") left top no-repeat;
  
}
div#zugriff p a#klangschueler:hover {
  background:url("../navigation/ks_over.png") left top no-repeat;
}
div#zugriff p a#tonweiser {
  background:url("../navigation/tw.png") left top no-repeat;
}

div#zugriff p a#tonweiser:hover {
  background:url("../navigation/tw_over.png") left top no-repeat;
}

div#zugriff p a#hoerguru {
  background:url("../navigation/hg.png") left top no-repeat;
}

div#zugriff p a#hoerguru:hover {
  background:url("../navigation/hg_over.png") left top no-repeat;
}


div#untertitel {
  clear:both;
  height:80px;
  background:#517FAD;
  width:800px;
  margin:0 auto;
}

div#untertitel div {
  background:#517FAD;
  width:800px;
  height:80px;
}

div#untertitel p#zurueckhome {
  float:left;
}

div#untertitel p#zurueckhome a {
  display:block;
  float:left;
  width:160px;
  height:80px;
}

div#untertitel p a#backlink {
  background:url("../navigation/back.png") left top no-repeat;
}

div#untertitel p a#backlink:hover {
  background:url("../navigation/back_over.png") left top no-repeat;
}

div#untertitel p a#homelink {
  background:url("../navigation/home.png") center top no-repeat;
}

div#untertitel p a#homelink:hover {
  background:url("../navigation/home_over.png") center  top no-repeat;
}

div#untertitel p#kontaktimpressum {
  padding:0px 10px 0 0;
  font-size:15px;
  float:right;
  text-align:right;
  color:#FFFCF2;
  margin-top: 6px;
}

div#untertitel p#kontaktimpressum a
{
  color: #FFFCF2;
  font-size:12px;
}

div#untertitel p#kontaktimpressum a:hover
{
  color: black;
}

div#unten {
  width:800px;
  margin:0 auto;
  background: #FFFCF2;
  align-content: center;
}

.kurz {min-height: 500px;
}
.mittel {min-height: 700px;
}
.lang {min-height: 800px;
}

.kontaktimpressum {
  min-height: 220px;
  padding-top: 10px;
  font-family: 'Roboto', sans-serif;
}
 
div#unten .content {
  padding: 35px;
  display: inline-block;
  min-height:440px;
  
  text-align:center;
}


#menu {
    width: 800px;
    list-style:none;
	margin: 15;
	padding: 20;
	
	}

#menu li {
  float:left;
  border-style: solid;
  border-width:9px;
  border-color: transparent;
  }

#menu li a {
  display:block;
  width:235px;
  height:220px;
	
  }

#startmenu {
	list-style:none;
  width: 80%;
  height:500px;

  margin-left: 10%;
  background-color: #FFFCF2;
}
#startmenu li {
  width:50%;
  display: inline-block;
  }

#startmenu li a {
  display: inline-block;
  height:400px;
  width:80%;
  list-style:none;
  padding: 10px;
  }

a.stufe_1
{
  background:url("../index/bilder/stufe1_gr.png") center top no-repeat;
  background-color: #6a99b5;
  width:100%;
}

#stufe_2 a{
  /* background:url("../index/bilder/stufe2_gr.png") center top no-repeat; */
  text-align:center;
  
}
#stufe_3 a{
  background:url("../index/bilder/stufe3_gr.png") center top no-repeat;
  text-align:center;
}


.stufe_1:hover
{
  /* background:url("../index/bilder/stufe1.png") center top no-repeat; */
  background-color: green;
}

#stufe_2 a:hover{
  background:url("../index/bilder/stufe2.png") center top no-repeat;
  text-align:center;
}
#stufe_3 a:hover{
  background:url("../index/bilder/stufe3.png") center top no-repeat;
  text-align:center;
}

#textfeld{
  /*background:url("../index/bilder/leer1.png") center top no-repeat;*/
  float: right;
	margin:0 auto;
text-align:left;
  width:0px;
  height:40px;
	padding: 0 155px 0 155px;
}
div#side {
  align-content: center;
	width:90px;
  height:120px;
  background:#e6ffff;
  margin: 200px 0px 0px;
  padding-left: 8px;
  border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	border-color: #FFD816;
	
  /*padding-top:5%; /* center the top of child elements vetically */
  /*padding-bottom:5%;
 /* relative size and position on page  */
  position:relative;
  top: 0px;}

.right {
	float: right;

 }
 .left {
float: left;
 }

div#side p#stufen {
  float:right;
}

/* div#side p#stufen a {
  display:block;
  float:left;
  width:90px;
  height:120px;
} */
div#side p a#klangschueler {
  background:url("../navigation/ks.png") left top no-repeat;
  
}
div#side p a#tonweiser {
  background:url("../navigation/tw.png") left top no-repeat;
  
}
div#side p a#hoerguru {
  background:url("../navigation/hg.png") left top no-repeat;
  
}

/* für "Geräusche Raten" */


div#navigation {
  float:left;
  width:260px;
  height:527px;
}

.leicht_navigation {
  background:url("../index/inhalt/quiz/bilder/bgr_leicht_l.jpg") left top no-repeat;
}
.mittel_navigation {
  background:url("../index/inhalt/quiz/bilder/bgr_mittel_l.jpg") left top no-repeat;
}
.schwierig_navigation {
  background:url("../index/inhalt/quiz/bilder/bgr_schwierig_l.jpg") left top no-repeat;
}
.sehrschwierig_navigation {
  background:url("../index/inhalt/quiz/bilder/bgr_sehrschwierig_l.jpg") left top no-repeat;
}

div#buttons {
  width:230px;
  margin:60px auto 0 auto;
}

a.button {
  display:block;
  width:160px;
  height:90px;
  float:left;
  margin-left:28px;
}

.leicht_navigation a#button_cancel:link, .leicht_navigation  a#button_cancel:visited {
  background:url("../index/inhalt/quiz/bilder/cancel_leicht.jpg") no-repeat left top;
}
.leicht_navigation a#button_cancel:hover {
  background:url("../index/inhalt/quiz/bilder/cancel_leicht_over.jpg") no-repeat left top;
}
.mittel_navigation a#button_cancel:link, .mittel_navigation  a#button_cancel:visited {
  background:url("../index/inhalt/quiz/bilder/cancel_mittel.jpg") no-repeat left top;
}
.mittel_navigation a#button_cancel:hover {
  background:url("../index/inhalt/quiz/bilder/cancel_mittel_over.jpg") no-repeat left top;
}
.schwierig_navigation a#button_cancel:link, .schwierig_navigation  a#button_cancel:visited {
  background:url("../index/inhalt/quiz/bilder/cancel_schwierig.jpg") no-repeat left top;
}
.schwierig_navigation a#button_cancel:hover {
  background:url("../index/inhalt/quiz/bilder/cancel_schwierig_over.jpg") no-repeat left top;
}
.sehrschwierig_navigation a#button_cancel:link, .sehrschwierig_navigation  a#button_cancel:visited {
  background:url("../index/inhalt/quiz/bilder/cancel_sehrschwierig.jpg") no-repeat left top;
}
.sehrschwierig_navigation a#button_cancel:hover {
  background:url("../index/inhalt/quiz/bilder/cancel_sehrschwierig_over.jpg") no-repeat left top;
}

.leicht_navigation a#button_help:link, .leicht_navigation  a#button_help:visited {
  background:url("../index/inhalt/quiz/bilder/help_leicht.jpg") no-repeat left top;
}
.leicht_navigation a#button_help:hover {
  background:url("../index/inhalt/quiz/bilder/help_leicht_over.jpg") no-repeat left top;
}
.mittel_navigation a#button_help:link, .mittel_navigation  a#button_help:visited {
  background:url("../index/inhalt/quiz/bilder/help_mittel.jpg") no-repeat left top;
}
.mittel_navigation a#button_help:hover {
  background:url("../index/inhalt/quiz/bilder/help_mittel_over.jpg") no-repeat left top;
}
.schwierig_navigation a#button_help:link, .schwierig_navigation  a#button_help:visited {
  background:url("../index/inhalt/quiz/bilder/help_schwierig.jpg") no-repeat left top;
}
.schwierig_navigation a#button_help:hover {
  background:url("../index/inhalt/quiz/bilder/help_schwierig_over.jpg") no-repeat left top;
}
.sehrschwierig_navigation a#button_help:link, .sehrschwierig_navigation  a#button_help:visited {
  background:url("../index/inhalt/quiz/bilder/help_sehrschwierig.jpg") no-repeat left top;
}
.sehrschwierig_navigation a#button_help:hover {
  background:url("../index/inhalt/quiz/bilder/help_sehrschwierig_over.jpg") no-repeat left top;
}

div#navigation h2#kategorie_titel, div#navigation table#kategorien {
  width:160px;
  margin-left:35px;
}

div#navigation h2#kategorie_titel {
  clear:left;
  height:20px;
  padding-top:0;
  margin-bottom:10px;
  line-height:1em;
  font-size:1em;
  font-weight:bold;
}

table#kategorien {
  margin-bottom:20px;
}

div#schwierigkeitsgrad {
  margin-left:20px;
}

div#inhalt {
  margin-left:220px;
  width:560px;
  height:507px;
  padding:10px;
}

div.spezial {
  padding:20px 40px 20px 20px;
  width:544px;
  height:487px;
}

.leicht_inhalt {
  background:url("../index/inhalt/quiz/bilder/bgr_leicht_r.jpg") left top no-repeat;
}
.mittel_inhalt {
  background:url("../index/inhalt/quiz/bilder/bgr_mittel_r.jpg") left top no-repeat;
}
.schwierig_inhalt {
  background:url("../index/inhalt/quiz/bilder/bgr_schwer_r.jpg") left top no-repeat;
}
.sehrschwierig_inhalt {
  background:url("../index/inhalt/quiz/bilder/bgr_sehrschwer_r.jpg") left top no-repeat;
}

/* ===================================== */

#kategorien a {
  display:block;
  width:86px;
  height:85px;
}

a.kategorie_freizeit:link, a.kategorie_freizeit:visited {
  background: url("../index/inhalt/quiz/bilder/freizeit.jpg");
}
a.kategorie_freizeit:hover, a.kategorie_freizeit_active {
  background: url("../index/inhalt/quiz/bilder/freizeit_active.jpg");
}
a.kategorie_freizeit_active {
  cursor:default;
}

a.kategorie_arbeit:link, a.kategorie_arbeit:visited {
  background: url("../index/inhalt/quiz/bilder/arbeit.jpg");
}
a.kategorie_arbeit:hover, a.kategorie_arbeit_active {
  background: url("../index/inhalt/quiz/bilder/arbeit_active.jpg");
}
a.kategorie_arbeit_active {
  cursor:default;
}

a.kategorie_baustelle:link, a.kategorie_baustelle:visited {
  background: url("../index/inhalt/quiz/bilder/baustelle.jpg");
}
a.kategorie_baustelle:hover, a.kategorie_baustelle_active {
  background: url("../index/inhalt/quiz/bilder/baustelle_active.jpg");
}
a.kategorie_baustelle_active {
  cursor:default;
}

a.kategorie_bauernhof:link, a.kategorie_bauernhof:visited {
  background: url("../index/inhalt/quiz/bilder/bauernhof.jpg");
}
a.kategorie_bauernhof:hover, a.kategorie_bauernhof_active {
  background: url("../index/inhalt/quiz/bilder/bauernhof_active.jpg");
}
a.kategorie_bauernhof_active {
  cursor:default;
}

a.kategorie_verkehr:link, a.kategorie_verkehr:visited {
  background: url("../index/inhalt/quiz/bilder/verkehr.jpg");
}
a.kategorie_verkehr:hover, a.kategorie_verkehr_active {
  background: url("../index/inhalt/quiz/bilder/verkehr_active.jpg");
}
a.kategorie_verkehr_active {
  cursor:default;
}

a.kategorie_natur:link, a.kategorie_natur:visited {
  background: url("../index/inhalt/quiz/bilder/natur.jpg");
}
a.kategorie_natur:hover, a.kategorie_natur_active {
  background: url("../index/inhalt/quiz/bilder/natur_active.jpg");
}
a.kategorie_natur_active {
  cursor:default;
}

#laden {
  width:42px;
  height:42px;
  margin:230px auto 0 auto;
  background: url("../index/inhalt/quiz/bilder/laden.gif") no-repeat left top;
}

#loesungen {
  width:526px;
  height:258px;
  margin-left:20px;
  padding-top:40px;
}

#loesungen a {
  display:block;
  float:left;
  width:162px;
  height:124px;
  margin:0 10px 10px 0;
  background:red;
}

#player {
  width:463px;
  height:133px;
  margin:20px 0 0 40px;
  padding:20px;
  background:url("../index/inhalt/quiz/bilder/player_bgr.jpg") no-repeat left top;
}

a#play {
  display:block;
  width:123px;
  height:123px;
}

a.play_passive {
  background:url("../index/inhalt/quiz/bilder/play_passive_15.jpg") no-repeat left top;
}

a.play_active {
  background:url("../index/inhalt/quiz/bilder/play_active_15.jpg") no-repeat left top;
}

#player_geloest {
  background: none repeat scroll 0 0 red;
  margin: -90px 0 0 130px;
  top: -300px;
  width: 350px;
}

#player_geloest li {
  list-style:none;
  float:left;
  margin-left:5px;
  width:62px;
}