/*
  Build with love, Notepad++ and TrueColors

  WhiteSmoke #F5F5F5 (body-backgound, playlist, shadow inset)
  Gainsboro  #DCDCDC (button background)
  LightGray  #D3D3D3 (playlist-inset)
  DarkGray   #A9A9A9 (text-shadow)
  DimGray    #696969 (h1)
  Gray       #808080 (borders, shadows)
  Green      #008000 (progress bar)
  adarkgray  #303030 (text)
  Orange     #FFA500 (play button, volume slider, progress bar)
  RoyalBlue  #4169E1 (link)
  Red        #FF0000 (link, play button, progress bar)
  
  table (audioplayer) width in px:
  4 x  30 button width
  8 x  10 button margin
  1 x 110 volume slider width
  2 x   5 volume slider margin
  4 x   3 #text
  2 x  10 table padding
  2 x   1 table border
  354     total, should fit for most smartphones - anyway: viewport initial-scale = 0.9
  */

  /* MYCHADU'S ANALYSER */

  .divHeaderAnalyzer {
   width: 935px; /* 883px divAnalyzer + 2px borders + 40px paddings + 10px space for viewport */
   height: auto;
   margin: auto;
   padding: 0px;
  }

  .divAnalyzer {
   width: 883px;  /* 881px #keyboard + 2px borders */
   height: auto;
   border: 1px solid Gray;
   border-radius: 15px;
   margin: auto;
   padding: 0px 20px 0px 20px;
  }

  .divAudioFile, .divAudioControl {
   width: 437px;  /* ((437px + 2px borders) * 2 ) + 5px space = 883px */
   height: 50px;
   border: 1px solid Gray;
   border-radius: 5px;
   margin: 5px 0px 0px 0px;
   padding: 5px 0px 0px 0px;
  }

  .divAudioFile {
   float:left;
   /* line-height: 50px;  vertical align, for later use, see above */
  }

  .divAudioControl {
   float:right;
  }

  .audioFile, .audioControl {
   width: 427px;
   border-radius: 5px;  /* IE: no border-radius but 3D */
   cursor: pointer;
  }

  .audioControl {
   height: 46px;  /* Firefox, IE: height of the audioControl | Chrome (h=32px), Opera (h=30px), Android (h=46px?): shift downwards */
  }

  .divAudioA, .divAudioB, .divAudioS {
   height: 50px;  /* best result for IE */
   border: 1px solid Gray;
   border-radius: 5px;
   margin: 5px 0px 0px 0px;
   padding: 5px 0px 0px 0px;
  }

  .divAudioA {
   width: 198px;
   float:left;
  }

  .divAudioB {
   width: 471px;
   float:left;
   margin: 5px 0px 0px 5px;
  }

  .divAudioS {
   width: 198px;
   float:right;
  }

  .audioA, .audioB, .audioS {
   width:188px;
   border: none;
   cursor: pointer;
   margin: 0px 0px 0px 0px;
   padding: 0px;
  }

  .audioB {
   width:461px;
  }

  #keyboard {
   width: 881px;  /* don't change: see js */
   height: 130px;  /* don't change: see js */
   border: 1px solid Gray; /* border is not part of the width */
   border-radius: 5px 5px 0px 0px;
   margin: 5px auto 0px auto;
  }

  .tableNotes, .tableFrequencies {
   width: 880px;  /* total 881px = (88 * 10px Keys) + 1px left border - the right border collapsed */
   border: 1px solid Gray;
   border-collapse: collapse;  /* the rightmost td border-right with table border-right */
   border-spacing: 0px;
   box-sizing: content-box;  /* does not seem to be a default value - ? */
   font-size: 0.7rem;
   padding: 0px 0px 0px 0px;
  }

  .tableNotes {
   height: 75px;
   margin: 0px auto 0px auto;
   table-layout: fixed;
   text-align: center;
  }

  .tableFrequencies {
   margin: 3px auto 0px auto;
   table-layout: fixed;
   text-align: left;
  }

  td {
   border-right: 1px solid Gray;
   padding: 0px 0px 0px 0px;
   vertical-align: top;
  }

  .blackKey {
   background-color: black;
  }

  .freq1 {
   width: 29px;
  }

  .freq2 {
   width: 119px;  
  }

  .freq3 {
   width: 129px;
  }

  .divText {
   width: 925px;  /* see: divAnalyzer */
   height: 600px;
   margin: auto;
   padding: 0px;
  }

  .divHowItWorks, .divImpressum {
   width: 431px;  /* 2 * 431px + 40px padding + 4px borders + 19px space = 925px, see: divAnalyzer */
   height: 440px;
   border: 1px solid Gray;
   border-radius: 15px;
   float: left;
   margin: 20px 0px 20px 0px;
   padding: 10px;
  }

  .listText {
   text-align: left;
  }

  ol {
   list-style-type: decimal;
   margin: 0px 0px 0px 25px;
   padding: 0px;
  }

  .divImpressum {
   float: right;
  }

  /* MYCHADU'S MUSIC and MYCHADU'S ANALYSER */

  #wallpaper {
   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
   background-attachment: fixed;
   background-image: url(Mychadu_LunarEclipse_20160618.png);
   background-position: center top;
   background-size: cover;   
   position: fixed;
   opacity: 0.09;   
   z-index: -10;
  }

  body:before { 
   width: 100%;
   height: 20px;
   box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
   content: "";
   position: fixed;
   left: 0px;
   top: -20px;
   z-index: 10;
  }

  body {
   background-color: rgba(255,165,0,0.08); /* Orange */
   color: #303030;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 0.7rem;
   line-height: 130%;
   text-align: center;
  }

  h1 {
   color: DimGray;
   font-family: "Segoe Print",serif,Arial,Helvetica,sans-serif;
   font-size: 1.6rem;
   font-weight: normal;
   letter-spacing: 4px;
   line-height: 200%;
   margin: 50px 0px 10px 0px;
   text-shadow: 2px 2px 2px DarkGray;   
  }

  h2 {
   color: #303030;
   font-size: 0.7rem;
   letter-spacing: 1px;
   margin: 20px 0px 5px 0px;
  }
  
  .noJS {
   color: Red;
   font-size: 1.6rem;
  }

  .impressum {
   width: auto;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 0.7rem;
   margin: auto; /* center text */
  }

  .datenschutz {
   width: 350px;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 0.7rem;
   margin: auto; /* center text */
   text-align: justify;
  }

  .qrCode {
   width: auto;
   Height: auto;
   margin: 20px 0px 0px 0px;
  }

  .fine {
   font-family: Arial,Helvetica,sans-serif;
   font-size: 0.7rem;
   margin: 10px 0px 20px 0px;
   text-align: center;
  }

  a:link, a:visited {
   color: RoyalBlue;
   text-decoration: None;
  }

  a:hover {
   color: Red;
   text-decoration: None;
  }   

  #wrapper {
   background-color: WhiteSmoke; /* background while loading picture */
   background-image: url("Mychadu0.jpg");
   background-position: center;
   background-size: cover;
   border-radius: 10px;
   display: inline-block; /* wrapper-width (div) := audioplayer-width (table) */
  }

  #audioplayer {
   width: auto;
   height: auto;
   background-color: rgba(255,255,255,0.4); /* color-filter for wrapper-background-image */
   background-position: center;
   background-size: cover;
   border: solid 1px Gray;
   border-radius: 10px;
   border-spacing: 0px; /* else: default 2px */
   box-shadow: 0px 0px 2px 1px WhiteSmoke inset;
   cursor: default;
   margin: auto; /* center table */
   padding: 0px 10px 5px 10px;
   position: relative; /* ancestor */
   white-space: nowrap;
  }

  /* Shadow on the lower left side ("before"): a rotated "beam" with shadow - behind (z=-10) the table */
  /* Shadow on the lower right side ("after"): another rotated "beam" with shadow - behind (z=-10) the table */
  #audioplayer:before, #audioplayer:after {
   width: 50%; /* Length of the beam = 50% of the table width */
   background: transparent;
   box-shadow: 0 15px 10px Gray;
   content: "";
   bottom: 16px; /* distance from the bottom */
   left: 3px; /* distance from the left */
   position: absolute; /* relative to its first positioned (not static) ancestor element */
   top: 80%; /* distance from the top */
   transform: rotate(-6deg);
   z-index: -10;
  }

  #audioplayer:after {
   left: auto; /* left position is not spezified*/
   right: 3px; /* distance from the right */
   transform: rotate(6deg);
  }

  .tableData, .tableGraph, .tableProgress {
   height: 25px;
   border: 0px;
   vertical-align: bottom; /* aligns buttons inbetween the td */
   padding: 0px 0px 0px 0px;
  }

  .tableGraph {
   height: 30px;
  }

  .tableProgress {
   height: 10px;
  }

  #time {
   width: 120px;
   margin: auto;
   padding: 0px;
  }

  .buttonAudio, .buttonAudioPlay {
   width: 30px;
   height: 25px;
   background-color: Gainsboro;
   border: solid 1px Gray;
   border-radius: 3px;
   box-shadow: 0px 0px 1px 1px White inset, 0px 3px 2px -2px Gray;
   color: #303030;
   cursor: pointer;
   font-size: 0.8rem;
   margin: 0px 10px 0px 10px;
   padding: 0px;
   text-align: center;
   vertical-align: top;  /* aligns button values with the buttons */
  }

  .buttonAudioPlay {
   font-size: 1.0rem;
  }

  .buttonAudio:hover, .buttonAudioPlay:hover {
   color: Red;
  }

  .buttonAudio:active, .buttonAudioPlay:active {
   box-shadow: 0px 0px 0px 0px Gray;
   transform: translateY(2px);
  }

  .playlist {
   width: auto;
   height: 25px;
   background-color: WhiteSmoke;
   border: solid 1px Gray;
   border-radius: 3px;
   box-shadow: 0px 2px 0px -1px LightGray inset;
   color: DimGray;
   cursor: pointer;
   font-size: 0.9rem;
   margin: 0px 10px 0px 10px;
   padding: 0px;
  }

  .playlist:hover {
   color: Purple;
  }

  .radioAutoplay {
   cursor: pointer;
   margin: 0px 0px 0px 10px;
   vertical-align: middle;
  }

  .radioColor {
   cursor: pointer;
   margin: 0px 0px 0px 10px;
   vertical-align: middle;   
  }

  .checkboxVis {
   cursor: pointer;
   margin: 0px 0px 0px 10px;
   vertical-align: middle;
  }  

  label {
   cursor: pointer;
   color: #303030;
  }

  .rangeVolume {
  -webkit-appearance: none;
  width: 105px;
  height: 5px;
  background: Gainsboro;
  border: solid 1px Gray;
  border-radius: 3px;
  cursor: pointer;
  margin: 0px 5px 0px 5px;
  outline: none;
  padding: 0px;
  vertical-align: middle;
  }

  .rangeVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: DimGray;
  border: solid 1px Gray;
  border-radius: 50%;  
  cursor: pointer;
}

  .rangeVolume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: DimGray;
  border: solid 1px Gray;
  border-radius: 50%;  
  cursor: pointer;
}

  #graph {
   width: 256px;
   height: 25px;
   margin: 0px 0px 0px 0px;
   padding: 0px;
  }

  #progressbar {
   border: solid 1px Gray;
   border-radius: 3px;
   padding: 0px; /* else 1px space */
   margin: 0px 10px 0px 10px;
  }

  #progress {
   width: 0%; /* initial width */
   height: 4px;
   background-color: Green;
   box-shadow: 0px 2px 4px White inset;
   border-radius: 3px;
   color: White;
   font-family: Arial,Helvetica,sans-serif;
   font-size: 0.7rem;
   text-shadow: 1px 1px 0px Gray; 
   -webkit-animation: changecolor 12s infinite; /* Chrome, Safari, Opera */
   animation: changecolor 12s infinite; /* Standard syntax */
  }

  /* Chrome, Safari, Opera progress appearance */
  @-webkit-keyframes changecolor {
   0% {background-color: Green;}
   20% {background-color: Green;}
   25% {background-color: Orange;}
   45% {background-color: Orange;}
   50% {background-color: Red;}
   70% {background-color: Red;}
   75% {background-color: Orange;}
   95% {background-color: Orange;}
   100% {background-color: Green;}
  }

  /* Standard syntax progress appearance */
  @keyframes changecolor {
   0% {background-color: Green;}
   20% {background-color: Green;}
   25% {background-color: Orange;}
   45% {background-color: Orange;}
   50% {background-color: Red;}
   70% {background-color: Red;}
   75% {background-color: Orange;}
   95% {background-color: Orange;}
   100% {background-color: Green;}
  }

  .buttonSlide {
   width: auto;
   height: auto;
   background-color: transparent;
   border: none;
   color: #303030;
   cursor: pointer;
   font-size: 1.1rem;
   margin: 0px 0px 0px 0px;
   padding: 0px;
   text-align: center;
   vertical-align: middle;
  }

  .buttonSlide:hover {
   color: Red;
  }

  #slideNumber {
   display: inline;
   margin: 0px 100px 0px 100px;
   text-align: center;
   vertical-align: middle;
  }