* { box-sizing: border-box; }
audio { display: none; vertical-align:middle; position:relative; }
body  { background-color: #f2e9cc; margin:0; padding: 0; height:100%; overflow: auto; font-weight: normal; font-family:Tahoma, Geneva, sans-serif; font-size: 14px; color: #000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } 
h2 { margin-left: 1%; }
nav { width: 100%; height: auto; overflow: auto;}
input[name="timeLine"] { -webkit-appearance: none; }
input[name="timeLine"] { -moz-appearance: none; }
input[name="timeLine"]::-webkit-slider-thumb,input[name="timeLine"]::-moz-range-thumb { background-color: black; opacity: 1; width: 11px; height: 11px; border-radius: 5px; }
input[name="volume"] { -webkit-appearance: none; }
input[name="volume"] { -moz-appearance: none; }
input[name="volume"]::-webkit-slider-thumb,input[name="volume"]::-moz-range-thumb { background-color: black; opacity: 1; width: 11px; height: 11px; border-radius: 5px; }
input[name="speed"] { -webkit-appearance: none; }
input[name="speed"] { -moz-appearance: none; }
input[name="speed"]::-webkit-slider-thumb,input[name="speed"]::-moz-range-thumb { background-color: black; opacity: 1; width: 11px; height: 11px; border-radius: 5px; }
input[name="zoom"] { -webkit-appearance: none; }
input[name="zoom"] { -moz-appearance: none; }
input[name="zoom"]::-webkit-slider-thumb,input[name="zoom"]::-moz-range-thumb { background-color: black; opacity: 1; width: 11px; height: 11px; border-radius: 5px; }
.idxNavLink { display: inline; float: right; font-size: .7em; color: #000099; margin-right: 2%; } 
.idxNavLink:hover { text-decoration:underline; cursor:pointer; } 
#topRowDiv { overflow: auto; display: flex; position: relative; z-index: 2; width: 98%; height: auto; margin: 4px auto 0 auto; } 
#fileIndex { width: 99%; color: #000000; overflow: auto; padding: 1px; border-radius: 2px; } 
.fileIndexList { max-width: 500px; margin: 0 auto; }
.fileIndexScore { float: left; }
#fileIndexLink { float: left; margin: 0 0 5px 0; color: #0000ff; cursor:pointer; } 
#fileIndexLink:hover { text-decoration:underline; } 
#tinyTitle { float: left; margin: 0 0 0 10px; font-size: 1em; }
#buttonControl { float: right; display: inline; height: auto; margin: 0 10% 0 0; padding: 1px; cursor:pointer; }
#buttonControl:hover { text-decoration:underline; } 
#playButtonTiny{ float: left; display: none; margin: 0 5px 0 0; cursor:pointer; }
#nContainer { margin: 0px auto 0 auto; overflow: auto; padding: 0 0 0 0; text-align: center; touch-action: none; }
#notation { position: relative; display: inline-block; margin: 0; padding: 0; top: 0; }
#message { display:none; position: relative; width: 90%; margin: 0 auto; font-size: 1.3em; text-align: center; overflow: auto; color: #000000; }
.cnfDivOn { position: absolute; top: 10px; left: 0; z-index: 200; width: 200px; height: 160px; text-align: center; color: #000000; background-color: #f2f2dc;; border: solid 1px black; border-radius: 5px;  }
.cnfButton { clear: both; display: block; position: relative; margin: 0 auto; margin-top: 30px; width: 55px; height: 22px;  padding: 2px; font-size: .9em; overflow: hidden; color: #000000; background-color: #f2e9cc; border-style: solid; border-width: 2px; border-color: #4b4b4b; border-radius: 6px; }
.cnfButton:hover { text-decoration:none; cursor:pointer; color: #ffffff; background-color: #99bbff; } 
.cnfText { clear: both; display: block; font-size: 1em; position: relative; }
#loadStatus{ position: relative; display: none; width: 100%; max-width: 500px; height: 12px; margin: 0 auto; border: solid 1px #000000; }
#loadStatusShade{ position: relative; width: 1%; height: 100%; background-color: #0000ff; }
#buttonContainer { display: none; z-index: 1; top: -8px; width: 99%; max-width: 730px; height: auto; overflow: hidden; margin: 0 auto 0 auto; padding: 0 0 0 7px; }
#playButton { float:left; margin: 0; height: 29px; width: 29px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: none; outline:none;  cursor:pointer; }
#aContainer { float: left; display: flex; position: relative; height: 36px; margin: 6px 0 0 0; overflow: hidden; padding: 0; border: solid 2px red; }
#aButton { float: left; position: relative; display: none; width: 26px; height: 24px; margin-top: 4px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: none; outline:none; }
.aButtonOff { background: url('../img/adminButtonOff.png'); }
.aButtonOn { background: url('../img/adminButtonOn.png'); }
#rButton{ float: left; position: relative; display: none; margin: 4px 0 0 5%; width: 26px; height: 24px; cursor: pointer; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; outline:none; border: none; }
.rButtonOff { background: url('../img/recordButtonOff.png'); }
.rButtonOn { background: url('../img/recordButtonOn.png'); }
#sButton{ float: left; position: relative; display: none; margin: 4px 0 0 5%; width: 26px; height: 24px; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; outline:none; border: none; }
.sButtonOff{ opacity: .9; background: url('../img/saveButtonOff.png'); }
.sButtonOn{  cursor: pointer; background: url('../img/saveButtonOn.png'); }
#hButton { float: left; position: relative; display: none; height: 20px; width: 20px; margin-top: 15px; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: none; outline:none; }
.hButtonOff { background: url('../img/helpButtonOff.png'); }
.hButtonOn { background: url('../img/helpButtonOn.png'); }
#iFrameHelp { width: 200px; height: 200px; background-color: #0000ff; }
#timeLine { width: 80%; height: 6px; margin: 10px 0 0 6px; float: left; background-color: #cccccc; position: relative; }
#timeLine:focus { outline: none; }
#currentTime { float: left; margin: 7px 0 0 6px; font-size: 1em; }
#volumeContainer { float: left; margin: 2px 0 0 0; display: flex; height: auto; }
#volume { height: 6px; margin: 8px 0 0 6px; float: left; background-color: #cccccc; }
#volume:focus { outline: none; }
#volumeIcon { float: left; width: 22px; height: 22px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: none; outline:none; cursor:pointer; }
#volumeDisplay { float: left; margin: 5px 0 0 2px; padding: 0; text-align: right; width: 34px; }
#playContainer { clear: both; float: left; margin: 11px 4% 0 0; display: flex; width: 55%; height: auto; border: }
#loopContainer { float: left; margin: 6px 3% 0 0; padding: 2px; display: flex; height: 36px; }
#loopButton { height: 24px; width: 24px; margin: 3px 0 0 10px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; float:left; border: none; outline:none; cursor:pointer; }
#loopBeginDiv { float: left; margin-left: 12px; font-size: .8em; text-align: center; cursor: pointer; }
#loopEndDiv { float: left; margin-left: 10px; font-size: .8em; text-align: center; cursor: pointer; } 
#loopAdjustDiv { float: left; margin-left: 10px; width: 50px; font-size: .8em; text-align: center;} 
#loopBeginFld { width: 30px; height: 14px; font-size: 1em; text-align: center; padding: 1px; font-weight: bold; border: solid 1px #000000; }
#loopEndFld { width: 30px; height: 14px; font-size: 1em; text-align: center; padding: 1px; font-weight: bold; border: solid 1px #000000; }
#loopArrowLeft { clear: both; float: left; margin: 0 1px 0 0; height: 14px; width: 10px; background: url('../img/arrowLeft.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; outline:none; border: none; }
#loopAdjustFld {  float: left; width: 26px; height: 14px; font-size: 1em; text-align: center; padding: 0px; font-weight: bold; border: solid 1px #000000; }
#loopArrowRight { float: left; margin: 0 0 0 1px; height: 14px; width: 10px; background: url('../img/arrowRight.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; outline:none; border: none; }
#zoomContainer { float: left; display: flex; margin: 7px 4% 0 0; height: auto; }
#zoomLabel { float: left; height: auto; color: black; }
#zoom { float: left; height: 6px; margin: 4px 0 0 6px; background-color: #cccccc; }
#zoom:focus { outline: none; }
#zoomDisplay { float: left; margin: 0 0 0 2px; padding: 0; text-align: right; width: 34px; }
#speedContainer { float: left; display: flex; margin: 7px 5% 0 0; height: auto; }
#speedLabel { float: left; height: auto; color: black; }
#speed { float: left; height: 6px; margin: 4px 0 0 6px; background-color: #cccccc; }
#speed:focus { outline: none; }
#speedDisplay { float: left; margin: 0 0 0 2px; padding: 0; text-align: right; width: 34px; }
.ulDiv { margin: 0 0 30px 0; padding: 0; border: none; } 
.catTitle { margin: 0 2px 0 2px; font-size: 1.2em; font-weight: normal; border-style: solid; border-width: 0 0 1px 0; border-color: #eeeeee; } 
.aDivOn { float: left; position: absolute; display: block; margin: 0; z-index: 100; }  
.aDivOff { z-index: -100; display: none; }
.tDiv { float: left; position: relative; display: block; width: 74px; height: 30px; } 
.mDot { float: left; position: relative; cursor: move; display: block; z-index: 100; width: 16px; height: 34px; text-align: right; font-size: .5em; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.mDotOff { color: #6666dd; border-right:16px solid #6666dd; }
.mDotOff:hover { cursor: move; color: #3333dd; border-right:16px solid #3333dd; }
.mDotOn { color: #dd6666; border-right:16px solid #dd6666; }
.mDotOn:hover { cursor: move; color: #dd3333; border-right:16px solid #ff0000; }
.bSel { float: left; position: relative; height: 16px; font-size: .8em; color: #000000; background-color: #ffffff; border: solid 1px #000000; }
.aInput{ float: left; position: relative; height: 16px;  margin: 0; display: block; font-size: .9em; width: 30px; text-align: right; background-color: #ffffff; border: solid 1px #000000; }  
.topContainerIndex { border: none; box-shadow: none; }  
.topContainerScore { border-style: solid; border-width: 0 0 1px 0; border-color: #d2c9ac; box-shadow: 5px 4px 17px rgba(0,0,0,.1); }  
.zoomLabelNormal { text-decoration: none; }
.zoomLabelReset { text-decoration: underline; cursor:pointer; }
.speedLabelNormal { text-decoration: none; }
.speedLabelReset { text-decoration: underline; cursor:pointer; }
#beatButton { float: left; width: 24px; height: 24px; margin: 3px 0 0 0; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; float:left; border: none; outline:none; cursor:pointer; }
.beatButtonOff {background: url('../img/beatButtonOff.png'); }
.beatButtonOn {background: url('../img/beatButtonOn.png'); }
.play{background: url('../img/playButton.jpg'); }
.pause{background: url('../img/pauseButton.jpg'); }
.speakerOn{background: url('../img/speakerOn.png'); }
.speakerOff{background: url('../img/speakerOff.png'); }
.loopButtonOn{background: url('../img/loopOnButton.png'); }
.loopButtonOff{background: url('../img/loopOffButton.png'); }
.loopFldOn { color: #0000ff; background-color: #66eeee; }
.loopFldOff { color: #000000; background-color: #dddddd; }
.shadeOff { position: absolute; background-color: none; z-index: 1; } 
.shadeOn { opacity: 0.2; position: absolute; z-index: 1; background-color: #9999ff; cursor:pointer; } 
.cOn {  float: left; opacity: 1; position: relative; z-index: -5; margin-left: 0px; height: 100%; background-color: #3333ff; margin: 0; padding: 0px; } 
.cOff { display: none; }
.lOn { opacity: 0.2; display: block; position: absolute; z-index: 200; background-color: #ccbb66; } 
.lOff { display: none; } 
.resetButton { float: left; display: none; position: relative; margin: 0; font-size: 1em; font-weight: bold; width: 15px; height: 16px; padding-top: 2px; overflow: hidden; text-align: center; color: #ffffff; background-color: #dd6666; border: solid 1px #000000; }  
.resetButton:hover { text-decoration:none; cursor:pointer; color: #000000; background-color: #ff0000; } 
@media screen and (max-width: 699px)  {
.playTiny { width: 20px; height: 18px; margin: 0 25px 0 0; border-right: none; border-top: solid 12px transparent; border-left: solid 18px #000000; border-bottom: solid 12px transparent; }
.pauseTiny { width: 17px; height: 20px; margin: 3px 12px 4px 0; border-top: none; border-bottom: none; border-left: solid 5px #000000; border-right: solid 5px #000000; }
.liDiv { list-style-type: none; line-height:1.5em; padding: 4px 2% 4px 2%; color:#000099; font-size: 1.1em; background-color: #f2e9cc; border-style: solid; border-width: 1px 1px 0 0; border-color: #ddddee #bbbbcc #ddddee #bbbbcc; border-radius: 3px; box-shadow: 1px 3px 6px #bbbbcc;  }
}
@media screen and (min-width: 700px)  {
.playTiny { width: 16px; height: 16px; margin: 0 4px 0 0; border-right: none; border-top: solid 8px transparent; border-left: solid 16px #000000; border-bottom: solid 8px transparent; }
.pauseTiny { width: 13px; height: 15px; margin: 0 12px 2px 0; border-top: none; border-bottom: none; border-left: solid 4px #000000; border-right: solid 4px #000000; }
.liDiv { list-style-type: none; line-height:1.2em; padding: 4px 2% 4px 2%; color:#000099; font-size: 1.1em; background-color: #f2e9cc; border-style: solid; border-width: 1px 1px 0 0; border-color: #ddddee #bbbbcc #ddddee #bbbbcc; border-radius: 3px; box-shadow: 1px 3px 6px #bbbbcc;  }
}
.liDiv:hover { text-decoration:none; color: #3333bb; background-color: #e1d8bb; cursor:pointer; }