@charset "utf-8";

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

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

#alertfeld1
  {
    position: fixed;
    width: 328px;
    margin-top: -150px;
    margin-left: -360px;
    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: 255px;
    margin-top: -150px;
    margin-left: 55px;
    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;
  }

#anleitung
  {
    position: fixed;
    width: 350px;
    font-size: 0.85em;
    margin-top: -225px;
    margin-left: -190px;
    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
  {
    height: 300px;
    overflow-y: scroll;
    background: #FFFFFF;
    padding: 5px 10px;
    border: 2px solid black;
  }

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

#teilabdecker
  {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #808080;
    opacity: 0.9;
    z-index: 20;
  }

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

#Einstellungen
  {
    width: 398px;
    background: #FFFFCC;
    margin: 10px 5px 10px 10px;
    min-height: 0px;
    border: 1px solid;
    border-color: #000000;
    float: left;
  }

#Schluesselauswahl
  {
    width: 180px;
    min-height: 600px;
    background: #FFFF66;
    margin: 10px 5px 10px 10px;
    border: 1px solid;
    border-color: #000000;
    float: left;
  }

#Weiterauswahl
  {
    width: 180px;
    min-height: 600px;
    text-align: center;
    background: #FFFF66;
    margin: 10px 10px 10px 5px;
    border: 1px solid;
    border-color: #000000;
    float: right;
  }

#Spieltableau
  {
    width: 324px;
    background: #FFFFBB;
    margin: 10px 10px 10px 5px;
    border: 1px solid;
    border-color: #000000;
/*    min-height: 800px;*/
    float: right;
  }

#Notenanzeige
  {
    width: 303px;
    min-height: 600px;
    text-align: center;
    background: #FFFF66;
    margin: 10px 10px 10px 10px;
    border: 1px solid;
    border-color: #000000;
    float: left;
  }

#Fragefenster
  {
    visibility: hidden;
  }

#Loesungsausgabe
  {
    visibility: hidden;
  }

#Namensknoepfe1
  {
    visibility: hidden;
  }

#Namensknoepfe2
  {
    visibility: hidden;
  }

#Namensknoepfe3
  {
    visibility: hidden;
  }

#Oktavenknoepfe1
  {
    visibility: hidden;
  }

#Fortsetzung
  {
    visibility: hidden;
  }

.Nochmal
  {
    display: block;
    width: 200px;
    margin: 0px 50px;
    padding: 10px;
    background-color: #FFBBBB;
    border: 2px solid;
    border-color: #FF4444;
    border-radius: 10px;
    box-shadow: #FF8888 5px -2px 10px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    transition: background-color 1s ease;
  }

.Nochmal:hover
  {
    background-color: #FF8888;
  }

.Abschluss
  {
    clear: both;
  }

.Namensknopf
  {
    display: box;
    width: 37px;
    padding: 3px;
    background-color: #FFBBBB;
    border-radius: 7px;
    transition: background-color 1s ease;
  }

.Namensknopf:hover
  {
    background-color: #FF8888;
  }

.Oktavenknopf
  {
    display: box;
    width: 70px;
    padding: 3px;
    background-color: #FFBBBB;
    border-radius: 7px;
    transition: background-color 1s ease;
  }

.Oktavenknopf:hover
  {
    background-color: #FF8888;
  }

.unsichtbar
  {
    visibility: hidden;
  }

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

.veraenderbar:hover
  {
    background-color: #FF8888;
  }

.ausg
  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 190px;
  }

.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;
  }

.notfallbutton
  {
    width: 450px;
    height: 30px;
    font-size: 0.9em;
  }

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

    #alertfeld2
      {
        margin-left: -150px;
      }
  }