/*#gui { position: absolute; top: 200px; right: 400px }*/

.red {
  color:red;
}

/*flex box layout*/
.container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}

  .header{
    width: 100%;
    height: 80px;
    background: black;

  }

  .holygrail-body{
    flex: 1 0 auto;
    display: flex;

    .content{
      flex: 1 0 auto;
      background: black;
    }

    .nav{
      width: 100px;
      list-style: none;
      text-align: left;
      order: -1;
      background: black;
      margin: 0;
    }

    .aside{
      width: 100px;
      background: black;
    }
  }

  .footer{
    width: 100%;
    height: 60px;
    background: cyan;
  }

  @media (max-width: 700px) {
    .holygrail-body{
       flex-direction: column;

      .nav, .aside{
        width: 100%;
      }
    }
  }

}


















#p5Div, #threejsDiv {
  /*display: inline-block;*/
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}
#p5Div {
  z-index: 1;
}

#html {
  z-index: 2;
  /*display:none;*/
}

body {
margin: 0;
overflow: hidden;
background-color: black;
}







.off {
border:'blue 1px solid';

}

.on {
border:'lightblue 1px solid'
background-color: blue;
}





.retrotext {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  overflow: hidden;
  border: none;
  font: normal 25px/1 "VT323", Helvetica, sans-serif;
  color:rgb(0, 156, 255);
  /*text-align: center;*/
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-shadow: 5px 5px 0 rgba(1, 19, 144, 1) ;
}


#main {
z-index:3;
flex: 1 0 auto;
/*display:contents;*/
position:relative;
top:48%;
left:32%;
transition: 2s ease-in-out;
opacity:1;
/*color:white;*/
}

.noopacity {
opacity:0 !important;
}

td {
color:white;
}

.pad {
  border-collapse: collapse;
  box-sizing: border-box;
  /*position: relative;*/
  /*position: absolute;*/
  position:absolute;
  width:40px;
  height:40px;
  border:blue 2px solid;
  background-color:black;
  opacity: 0.8;
  border-radius: 5px;
}

.padborder {
border:'blue 2px solid';
}



.synthpad {
  border-collapse: collapse;
  box-sizing: border-box;
  position: absolute;
  width:40px;
  height:40px;
  border:rgb(0, 82, 167) 2px solid;
  background-color:black;
  transition: 500ms linear 0s;
  opacity: 0.8;
  border-radius: 5px;


}

.synthpad:hover {

  border:white;


}



.basspad {
  border-collapse: collapse;
  box-sizing: border-box;
  position: absolute;
  width:40px;
  height:40px;
  border:rgb(0, 68, 111) 2px solid;
  background-color:black;
  transition: 100ms ease-in-out 0s;
  opacity: 0.8;
  border-radius: 5px;
}


.boxo {
  width:40px;
  height:40px;
  background-color:black;
}

table, tr, td {
  border-collapse: collapse;
  box-sizing: border-box;
}

.kicktoggle, .clearkick {
top:120px;
}

.snaretoggle, .clearsnare {
top:160px;
}

.hattoggle, .clearhat {
top:200px;
}

.synthtoggle,.octave, .octave2,.clearsynth {
top:280px;
/*background-image: url(../images/sine.png);*/
}

.basstoggle, .bassoctave, .bassoctave2,.clearbass {
top:340px;
}

.recordbutton,.recordbutton2,.recordbutton3, {
left:230px;
}
.recordbutton, .clearrec {
top:400px;
}

.recordbutton2, .clearrec2 {
top:440px;
}

.recordbutton3, .clearrec3 {
top:480px;
}


.tempobuttons {
  left:230px;
  top:520px;
  position:absolute;
  background-color: black;
  opacity: 0.8;
  border: 1px solid blue;
  box-sizing: border-box;
  height: 40px;
  width: 40px;
  z-index: 3;
}


.tempo {
left:-80px;
width: 40px;
font-size: 20px;
/*background-image: url(../images/sine.png);*/
}

.tempoup {
left:-40px;
/*background-image: url(../images/sine.png);*/
}

.tempodown {
left:-120px;
/*background-image: url(../images/sine.png);*/
}




.samplebuttons {
  cursor: pointer;
  left:-120px;
  position:absolute;
  background-color: black;
  opacity: 0.8;
  border: 1px solid blue;
  box-sizing: border-box;
  height: 40px;
  width: 120px;
  z-index: 3;
}

.clearbuttons {
  width:40px;
  left:640px;
}

.octave,.bassoctave {
  left:680px;
  width:40px;
}

.octave2,.bassoctave2 {
  left:720px;
  width:40px;
}

.playbutton {
  width:40px;
  top:25px;
  left:40px;
  border: none;
  /*background-image: url('/images/pause.png');*/
  background-image: url('http://i.imgur.com/9fWIuCF.png');
  background-size: 30px;
  background-repeat: no-repeat;
}

.pauseimg {
  /*background-image: url('/images/play.png');*/
  background-image: url('http://i.imgur.com/nGiVW37.png');
}

.eqbutton {
  top:20px;
  left:100px;
  border: none;
}

.clearbutton {
  top:20px;
  left:200px;
  border: none;
}

.masterbutton {
  top:20px;
  left:300px;
  border: none;
}

.loginbutton {
  top:20px;
  left:380px;
  border: none;
}

#userlog {
  background-color: black;
  color:white;
  width:300px;
  height:200px;
  z-index: 100px;
  display: none;
  
}

.show {
  display:block !important;
}

.hide {
  display:none !important;
}







#p5Div {
position: absolute;
}