@font-face
{
    font-family: emulogic;
    src: url("fonts/emulogic.ttf")
}
@font-face
{
    font-family:fontawesome;
    src: url("fonts/fontawesome-webfont.ttf");
}

html, body, #wrap 
{
     font-family: emulogic;
     height: 100%;
     margin: 0px;
     text-align: center;
     width: 100%;
     background-color: #20b1e0;
     color: white;
}

#hamburgerButton
{
    font-family: fontawesome;
    position: absolute;
    top: 0;
    left: 9px;
    font-size: 10vmin;
    color: white;
    cursor: pointer;
}

.hamburgerMenuBlankBackVisible
{
  background-color: rgba(81, 81, 81, 0.5);
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  color: green;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.hamburgerMenu
{
  position: absolute;
  top: 20%;
  left: 10%;
  background-color: white;
  display: table;
  width: 80%;
}

.hamburgerMenuRowHidden
{
    display:none;
}

.hamburgerMenuRowVisible
{  
  display: table-row;
  width: 100%;  
  height: 5vh;
  font-size: 4vmin;
}

.hamburgerMenuRowHidden.One
{
  color: #555555;
  background-color: #cfc7ed;
}

.hamburgerButtonsHidden
{
    display: none;
}

.hamburgerButtonsVisible
{
    background-color: #5129A3;
    display: table-column;
    float: left;
    box-sizing: border-box;
    border: 5px solid white;
    color: white;
    height: 10vmin;
    width: 33.33%;
    cursor: pointer;
    font-size: 3vmin;
}

.hamburgerButtonsVisible:hover
{
    background-color: #cfc7ed;
    color: #555555;
        cursor: pointer;
}

#wrap
{
    display:table;
}

.openingOptionsScreenVisible
{
    background-color: lightblue;
    position: absolute;
    width: 100%;
    height: 100%;
}

#topDiv
{
    color: white;
    background-color: #20b1e0;
    display: inline-block;
    height: 11vmin;
    font-size: 4vmin;
    width: 85%;
}

#putButtonsHere 
{
    width: 100%;    
}

#bottomDiv
{
    color: black;
    background-color: #99e6ff;
    display: table-row-group;
    height: 10%;
    font-family:emulogic;
    line-height: 9vh;
    cursor: pointer;
    font-size: 3vmin;
    position: absolute;
    bottom: 19vmin;
    width: 100%;
}

#bottomDiv:hover
{
    color: black;
    background-color: #2196f3;
        cursor: pointer;
}



.buttonPatternContainer
{
    display: inline-block;
    background-color: #99e6ff;
    color: black;
    width: 18.75%;
    height: 9vh;
    line-height: 9vh;
    font-size: 2.5vmin;
    text-align: center;
    border-radius: 0px;
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    font-family: emulogic;
    cursor: pointer;
    border-bottom: 5px solid #20b1e0;
    border-right: 2px dashed #20b1e0;
}

#pickUpMeasure
{
    display: inline-block;
    background-color: #99e6ff;
    color: black;
    width: 14%;
    line-height: 9vh;
    font-size: 1.8vmin;
    text-align: center;
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    font-family: emulogic;
    cursor: pointer;
    border-bottom: 5px solid #20b1e0;
    border-right: 2px dashed #20b1e0;
}

.buttonPatternContainer:hover, #pickUpMeasure:hover
{
    color: black;
    background-color: white;
        cursor: pointer;
}

.rhythmPattern, .pickupPattern
{
    background-color: #f3f3f3;
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    display: inline-block;
    min-width: 30%;
    height: 10%;
    margin: .5vh .5vh 0vh .5vh;
        cursor: pointer;
}
.rhythmPattern:hover, .pickupPattern:hover
{
    cursor: pointer;
    background-color: rgb(153, 230, 255);
}

.openingOptionsScreenHidden
{
    display: none;
}

.rhythmPatternButtonHidden, .pickupPatternButtonHidden
{
    display: none;
}

.pageOfBeatPatternsHidden, .pageOfPickupPatternsHidden
{
    display: none;
}

.pageOfBeatPatternsVisible, .pageOfPickupPatternsVisible
{
    background-color: rgba(197, 217, 255, 0.75);
    position: absolute;
    top: 1%;
    left: 1%;
    bottom: 1%;
    right: 1%;
    border-radius: 20px;
    display: inline;
    text-align: center;
    border: 5px solid rgba(128, 128, 128, 0.13);
    padding: 5px;
}

.measureDiv
{
    background-color: #20b1e0;
    text-align: right;
    display: flex;
    border-bottom: 5px solid #20b1e0;

}

#timeSignature
{
    color: rgba(128, 128, 128, 0);
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    width: 10%;
}

.measureNumbers
{    
    width: 10%;
    text-align: center;
    background-color: #5dd4fa;
    font-size: 2.5vmin;
    line-height: 9vh;    
}
#spacerFirstMeasure
{
    width: 14%;
    background-color: #20b1e0;
}
#spacerOtherMeasures
{
    width: 24%;
    background-color: #20b1e0;
}

#audioControlContainer
{
    display: flex;
    width: 100%;
    border-bottom: 2vmin solid #20b1e0;
    border-top: 2vmin solid #20b1e0;
}

.audioControls
{
    font-family: fontawesome;
    font-size: 13vmin;
    cursor:pointer;
    width: 25%;
    color: #5dd4fa;
    vertical-align:middle;
    background-color: #20b1e0;

}

.audioControls:hover
{
    color: white;
        cursor: pointer;
}

.audioControls:active
{
    color: dodgerblue;
}

.div-table
{
  display:table;         
  width:100%;         
  background-color:white;         
  /*border:1px solid white;*/         
  /*border-spacing:1vmin;*//*cellspacing:poor IE support for  this*/
  position: absolute;
  bottom: 0;
}
.div-table-row
{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col
{
  color: #20b1e0;
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:33%;
  font-size: 3vmin;
}

.openingOptionsMenuWrap, .openingOptionsSecondMenuWrap
{
    display: table;
    width: 80%;
    position: relative;
    top: 40%;
    margin: auto;
    font-size: 2.5vmin;
}

.openingOptionsMenuCaption, .openingOptionsSecondMenuCaption
{
    background-color: darkblue;
    display: table-row;
    height: 10vmin;
    line-height: 10vmin;
}

.openingOptionsMenuCaption.Options
{
    display: table-column;
    float: left;
    width: 50%;
}

.openingOptionsSecondMenuCaption.Options
{
    display: table-column;
    float: left;
    width: 33.3%;
}

.openingOptionsMenuCaption.Options:hover, .openingOptionsSecondMenuCaption.Options:hover
{
    background-color: white;
    color: blue;
}

.optionsPageWrapVisible
{
  display: table;
  position: absolute;
  margin: auto;
  text-align: center;
  top: 10%;
  left: 10%;
  width: 80%;
}

.optionsPageWrapHidden
{
    display: none;
}

.optionsPageRow
{
  background-color: white;
  color: #555555;
  display: table-row;
  height: 10vmin;
  line-height: 10vmin;
  font-size: 3vmin;
}

.optionsPageRow.One
{
  background-color: white;
}

.optionsPageCell
{
  background-color: #5129A3;
  display: table-column;
  float: left;
  box-sizing: border-box;
  border: 5px solid white;
  color: white;
  height: 10vmin;
  line-height: 9vmin;
      cursor: pointer;
}

.optionsPageCell:hover
{
    background-color:#CFC7ED;
    color:#555555;
    cursor: pointer;
}

.optionsPageCell.One, .optionsPageCell.Three
{
  width: 33%;
}
.optionsPageCell.Two
{
  width: 34%;
}
.optionsPageCell.Four, .optionsPageCell.Five
{
  width: 50%;
}

.optionsPageRow.Four, .optionsPageRow.Seven
{
    color: white;
}

.optionsPageRow.Eight
{
  background-color: #CFC7ED;
  display: table;
  width: 100%;
      cursor: pointer;
}

.optionsPageRow.Eight:hover
{
  background-color: #5129A3;
  color: white;
  cursor: pointer;
}

.backgroundOfOptionsMenuVisible
{
    background-color: rgba(212, 212, 212, 0.6) ;
    position: absolute;

    width: 100%;
    height: 100%;
}

.backgroundOfOptionsMenuHidden
{
    display: none;
}

.playAgainContainerVisible
{
  width: 80%;
  height: 25%;
  display: table;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  background-color: pink;
}
.playAgainContainerHidden
{
  display: none;
}


.playAgainButtonVisible
{
  display: table-cell;
  vertical-align: middle;
  background-color: #5129A3;
  color: white;
  font-size: 4vmin;
  box-shadow: 10px 10px 5px gray;
  cursor: pointer;
}

.playAgainButtonVisible:hover
{
  background-color: #00afff;
  box-shadow: 15px 15px 10px gray;
  font-size: 4vmin;
      cursor: pointer;
}

.playAgainButtonHidden
{
  display: none;
}

.playAgainBlankBackVisible
{
  background-color: rgba(81, 81, 81, 0.5);
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  color: green;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.playAgainBlankBackHidden
{
  display: none;
}

.enterNameBlankBackVisible
{
  background-color: rgba(212, 212, 212, 0);;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  color: #5129A3;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.enterNameContainerVisible
{
  position: absolute;
  top: 20%;
  left: 10%;
  background-color:#f6f6f6;
  display: table;
  width: 80%;
  height: 60%;  
}

.hiddenElement
{
    display: none;
}

.userNameTextVisible
{
    display: block;
    font-size: 3.5vmin;
    text-align: center;
    height: 10vh;
    line-height: 10vh;
    color: #5129a3;
}

.userNameTextBoxVisible
{
    background-color: lightgray;
    display: initial;
    font-family: Emulogic;
    height: 6vh;
    font-size: 3vmin;
    text-align: center;
    margin-bottom: 7vh;
    color: #555555;
}

.userNameSubmitButtonVisible {
    display: block;
    background-color: #00afff;
    height: 10vh;
    line-height: 10vh;
    cursor: pointer;
    width: 80%;
    margin: auto;
    font-size: 4vmin;
}

.userNameSubmitButtonVisible:hover
{
    background-color: #5dd4fa;
        cursor: pointer;
}

#exitPickupPatternMenu, #exitBeatPatternMenu
{
    font-family: Emulogic;
    width: 30%;
    height: 10vh;
    line-height: 10vh;
    cursor: pointer;
    background-color: #555555;
    color: white;
    margin: .5vh auto 0vh auto;
}

#exitPickupPatternMenu:hover, #exitBeatPatternMenu:hover
{
    background-color: #00afff;
        cursor: pointer;
}

.helpPageVisible
{
    background-color: rgba(85, 85, 85, 0.81);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background:url(instructions/TwoBeatInstructionsPage_01.png) center center no-repeat;
    background-size: contain;
    box-sizing: border-box;
    border: solid rgba(85, 85, 85, 0.81) 1vmin;
}