@charset "UTF-8";
/* Wichtig: Bitte darauf achten, dass die Bilder, welche die 
    Buttons schmücken die gleiche Größe wie diese haben. */
#buttons {
  /* Diese Eigenschaften müssen nicht verändert werden */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/* Gruppierung */
/* Regeln werden auf alle 
    Button1 .. Button8 angewendet */
#button1, #button2,
#button3, #button4,
#button5, #button6,
#button7, #button8,
#button9 {
  /* Diese Eigenschaften müssen nicht verändert werden */
  /* Alle Buttons haben die selben Grundeigenschaften */
  background-size: contain;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  position: absolute;
  cursor: pointer;
  outline: none; }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button1 {
  background-image: url("../../inhalte/buttons/PlayPause_1.png");
  width: 50px;
  height: 50px;
  left: 300px;
  top: 480px; }
  #button1:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/PlayPause_2.png"); }
  #button1:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/PlayPause_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button2 {
  display: none;
  background-image: url("../../inhalte/buttons/Pause_1.png");
  width: 50px;
  height: 50px;
  left: 350px;
  top: 480px; }
  #button2:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/Pause_2.png"); }
  #button2:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/Pause_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button3 {
  background-image: url("../../inhalte/buttons/switch_1.svg");
  width: 50px;
  height: 50px;
  left: 50px;
  top: 480px;
  stroke: #cccccc; }
  #button3:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/switch_2.svg"); 
    stroke: #c6c6c6;
  }
  #button3:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/switch_3.svg"); 
    stroke: #d8d8d8;
  }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button4 {
  background-image: url("../../inhalte/buttons/Faster_1.png");
  width: 50px;
  height: 50px;
  left: 350px;
  top: 480px; }
  #button4:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/Faster_2.png"); }
  #button4:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/Faster_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button5 {
  background-image: url("../../inhalte/buttons/Slower_1.png");
  width: 50px;
  height: 50px;
  left: 250px;
  top: 480px; }
  #button5:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/Slower_2.png"); }
  #button5:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/Slower_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button6 {
  background-image: url("../../inhalte/buttons/PermutationForward_1.png");
  width: 50px;
  height: 50px;
  left: 400px;
  top: 480px; }
  #button6:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/PermutationForward_2.png"); }
  #button6:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/PermutationForward_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button7 {
  background-image: url("../../inhalte/buttons/PermutationBackward_1.png");
  width: 50px;
  height: 50px;
  left: 200px;
  top: 480px; }
  #button7:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/PermutationBackward_2.png"); }
  #button7:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/PermutationBackward_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button8 {
  background-image: url("../../inhalte/buttons/ObjectForward_1.png");
  width: 50px;
  height: 50px;
  left: 450px;
  top: 480px; }
  #button8:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/ObjectForward_2.png"); }
  #button8:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/ObjectForward_3.png"); }

/*========================================================================*/
/*        BUTTON                                                          */
/* Bild welches für den button angezeigt wird: variabel (background-image)*/
/* Breite: 75px (width)                                                   */
/* Höhe: 30px (height)                                                    */
/* Abstand zur linken Kante/Rahmen: 50px (left)                           */
/* Abstand zur oberen Kante/Rahmen: variabel (top)                        */
/*========================================================================*/
#button9 {
  background-image: url("../../inhalte/buttons/ObjectBackward_1.png");
  width: 50px;
  height: 50px;
  left: 150px;
  top: 480px; }
  #button9:hover {
    /* Das Bild ändert sich, wenn die Maus über dem Button 'schwebt' */
    background-image: url("../../inhalte/buttons/ObjectBackward_2.png"); }
  #button9:active {
    /* Das Bild ändert sich, solange der button gedrückt (und gehalten) wird */
    background-image: url("../../inhalte/buttons/ObjectBackward_3.png"); }