@charset "utf-8";

body
  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
  }

h1
  {
    font: 150% Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: italic;
    color: #000000;
  }

#holder
  {
    width: 760px;
    background: #FFFF22;
    background-image: linear-gradient(#EEEE00, #FFFF66);
    margin: 0 auto 0 auto;
  }

#abdecker
  {
    position: fixed;
    top: -9999px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: #A0A0A0;
    padding: 10px 20px;
    opacity: 0.1;
    z-index: 99;
  }

#alertfeld1
  {
    position: fixed;
    width: 210px;
    margin-top: -210px;
    margin-left: -357px;
    top: -9999px;
    left: 50%;
    border: 5px solid #0040FF;
    border-radius: 8px;
    background-image: url("../bilder/HB_Training.jpg");
    text-align: center;
    padding: 10px 20px;
    z-index: 100;
  }

#alertfeld2
  {
    position: fixed;
    width: 350px;
    margin-top: -180px;
    margin-left: -40px;
    top: -9999px;
    left: 50%;
    border: 5px solid #0040FF;
    border-radius: 8px;
    background-image: url("../bilder/HB_Training.jpg");
    text-align: center;
    padding: 10px 20px;
    z-index: 100;
  }

#alertfeld4
  {
    position: fixed;
    width: 350px;
    margin-top: -150px;
    margin-left: -40px;
    top: -9999px;
    left: 50%;
    border: 5px solid #0040FF;
    border-radius: 8px;
    background-image: url("../bilder/HB_Training.jpg");
    text-align: center;
    padding: 10px 20px;
    z-index: 100;
  }

#alertfeld1 p,#alertfeld2 p,#alertfeld4 p
  {
    text-align: left;
  }

#anleitung, #notfall_kein_ton
  {
    position: fixed;
    width: 350px;
    font-size: 0.85em;
    margin-top: -225px;
    margin-left: -175px;
    top: -9999px;
    left: 50%;
    border: 5px solid #0040FF;
    border-radius: 8px;
    background-image: url("../bilder/HB_Training.jpg");
    text-align: left;
    padding: 10px 20px;
    z-index: 100;
  }

#anleitungstext, #notfalltext
  {
    height: 350px;
    overflow-y: scroll;
    background: #FFFFFF;
    padding: 5px 10px;
    border: 2px solid black;
  }

#Ladecontainer
  {
    position: fixed;
    top: -100px;
    left: -20px;
    height: 10px;
    width: 760px;
    overflow-y: hidden;
    margin: 0px 20px;
    text-align: center;
    background-color: rgba(100, 100, 100, 0.8);
    z-index: 8;
  }

#Ladecontainer p
  {
    opacity: 1.0;
  }

#Arbeitscontainer
  {
    position: relative;
    height: 1280px;
    overflow-y: hidden;
    z-index: 9;
  }

#Einstellungen
  {
    width: 36%;
    height: 800px;
    text-align: center;
    background: #FFFFCC;
    margin: 10px 1% 10px 2%;
    border: 1px solid;
    border-color: #000000;
    float: left;
    z-index: 10;
  }

#Fragetableau
  {
    position: relative;
    width: 54%;
    height: 800px;
    text-align: center;
    font-size: 0.9em;
    background: #FFFFCC;
    margin: 10px 2% 10px 1%;
    border: 1px solid;
    border-color: #000000;
    float: right;
  }

/*#Intervallcontainer
  {
    width: 40%;
    height: 620px;
    text-align: left;
    padding: 0px 10px;
    font-size: 0.9em;
    float: left;
    border: 1px solid black;
    margin-left: 10px;
  }

#Anwaehler, #Abwaehler
  {
    display: box;
    width: 90%;
    padding: 5px;
    margin: 5px;
    background-color: #FFBBBB;
    border: 2px solid;
    border-color: #FF4444;
    border-radius: 8px;
    box-shadow: #FF8888 5px -2px 10px;
    font: 80% Verdana, Arial, Helvetica, sans-serif;
    transition: all 1s ease;
  }

#Sonstigescontainer
  {
    width: 40%;
    height: 620px;
    text-align: right;
    padding: 0px 10px;
    font-size: 0.9em;
    float: right;
    border: 1px solid black;
    margin-right: 10px;
  }*/

#Einstellungen h4
  {
    display: block;
    text-align: center;
    margin: 10px 0px;
  }

#Intervallausloeser, #Untertonausloeser, #Obertonausloeser
  {
    width: 25%;
    height: 26px;
    background: #6644FF;
    color: white;
    margin: 0px 3px;
  }

#Abschaltausloeser
  {
    width: 55%;
    height: 30px;
    background: #6644FF;
    color: white;
    margin: 0px 3px;
  }

#Vorgabecontainer
  {
    visibility: hidden;
  }

#Antwortcontainer_diatonisch
  {
    height: 0px;
    visibility: hidden;
  }

#Antwortcontainer_chromatisch
  {
    height: auto;
    visibility: hidden;
  }

#Bewertungscontainer
  {
    visibility: hidden;
  }

#Bewertungsausgabe
  {
    width: 80px;
    font-weight: bold;
    text-align: center;
    background: #FFFFFF;
    color: #FFFFFF;
  }

#Umschaltcontainer2
  {
    visibility: hidden;
  }

#Abfragestart
  {
    display: box;
    width: 60%;
    padding: 5px;
    background-color: #FFBBBB;
    border: 2px solid;
    border-color: #FF4444;
    border-radius: 8px;
    box-shadow: #FF8888 5px -2px 10px;
    font: 80% Verdana, Arial, Helvetica, sans-serif;
    transition: all 1s ease;
  }

#Neuaufgabe
  {
    display: box;
    width: 40%;
    padding: 5px;
    background-color: #FFBBBB;
    border: 2px solid;
    border-color: #FF4444;
    border-radius: 8px;
    box-shadow: #FF8888 5px -2px 10px;
    font: 80% Verdana, Arial, Helvetica, sans-serif;
    transition: all 1s ease;
  }

#Abfrageende
  {
    display: box;
    width: 40%;
    padding: 5px;
    background-color: #FFBBBB;
    border: 2px solid;
    border-color: #FF4444;
    border-radius: 8px;
    box-shadow: #FF8888 5px -2px 10px;
    font: 80% Verdana, Arial, Helvetica, sans-serif;
    transition: all 1s ease;
  }

#Abfragestart:hover, #Neuaufgabe:hover, #Abfrageende:hover, #Anwaehler:hover, #Abwaehler:hover
  {
    background-color: #FF8888;
  }

#Abspielcontainer
  {
    visibility: hidden;
  }

#Antwortcontainer_diatonisch input, #Antwortcontainer_chromatisch input
  {
    width: 120px;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 5px;
    transition: all 1s ease;
  }

#Antwortcontainer_diatonisch input:hover, #Antwortcontainer_chromatisch input:hover
  {
    color: black;
  }

#Antwort_Prim, #Antwort_Reineprim { background-color: #A81707; }
#Antwort_Prim:hover, #Antwort_Reineprim:hover { background-color: #F57162; }

#Antwort_Sekund, #Antwort_Kleinesekund, #Antwort_Grossesekund { background-color: #9E5218; }
#Antwort_Sekund:hover, #Antwort_Kleinesekund:hover, #Antwort_Grossesekund:hover { background-color: #DB9967; }

#Antwort_Terz, #Antwort_Kleineterz, #Antwort_Grosseterz { background-color: #8F7211; }
#Antwort_Terz:hover, #Antwort_Kleineterz:hover, #Antwort_Grosseterz:hover { background-color: #E6C559; }

#Antwort_Quart, #Antwort_Reinequart { background-color: #4F6B0D; }
#Antwort_Quart:hover, #Antwort_Reinequart:hover { background-color: #A7C957; }

#Antwort_Tritonus, #Antwort_Schraegertritonus { background-color: #01632F; }
#Antwort_Tritonus:hover, #Antwort_Schraegertritonus:hover { background-color: #42C27E; }

#Antwort_Quint, #Antwort_Reinequint { background-color: #026B6B; }
#Antwort_Quint:hover, #Antwort_Reinequint:hover { background-color: #41DBDB; }

#Antwort_Sext, #Antwort_Kleinesext, #Antwort_Grossesext { background-color: #143B85; }
#Antwort_Sext:hover, #Antwort_Kleinesext:hover, #Antwort_Grossesext:hover { background-color: #6295F5; }

#Antwort_Septim, #Antwort_Kleineseptim, #Antwort_Grosseseptim { background-color: #4920A8; }
#Antwort_Septim:hover, #Antwort_Kleineseptim:hover, #Antwort_Grosseseptim:hover { background-color: #9F77FC; }

#Antwort_Oktav, #Antwort_Reineoktav { background-color: #690969; margin-bottom: 10px;}
#Antwort_Oktav:hover, #Antwort_Reineoktav:hover { background-color: #CF63CF; }

.Klickknopfzeile
  {
    text-align: right;
    margin: 8px 30px 8px 0px;
    line-height: 10px;
  }

.fensterschliesser
  {
    display: box;
    width: 60%;
    padding: 5px;
    background-color: #FFBBBB;
    border: 2px solid;
    border-color: #FF4444;
    border-radius: 8px;
    box-shadow: #FF8888 5px -2px 10px;
    font: 80% Verdana, Arial, Helvetica, sans-serif;
    transition: all 1s ease;
  }

@media screen and (max-width: 800px)
  {
    #alertfeld1
      {
        margin-left: -130px;
      }

    #alertfeld2, #alertfeld4
      {
        margin-left: -200px;
      }
  }