@font-face{
  font-family: Bravura;
  src:
    url('BravuraText.woff2') format('woff2'),
    url('BravuraText.woff') format('woff');
  font-display:swap;
}
@media print{
  @page {
    size: landscape
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;

    font-size: 80% !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 2.4em !important;
    height: 2.4em !important;
    padding-left: 8px !important;
    line-height: 1.4em !important;
    margin: 1px !important;
  }
  #choices,#metronomething,#chordthing,#savedthing,#snotes,.credits,#title,#snoteopts{
    display:none;
  }
  #printonly{
    display:block !important;
  }
  td{
    background-color:white !important;
  }
  td span, td select{
    background-color:white !important;
    border:none !important;
    color:#eee !important;
  }
  td.inscale span, td.inscale select{
    border: 1px solid black !important;
    border-radius:1.4em !important;
    color:lightgray !important;
  }
  td.scalenote0 span, td.scalenote0 select{
    border-color:black !important;
    border-width:2px !important;
    border-radius:1.4em !important;
    color:black !important;
  }
  thead,tfoot{
    color:black !important;
    background-color:white !important;
  }
}
body{
  font-family:Sans-Serif,Bravura;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#tooltip{
  font-size:large;
  width:100px;
  border-radius:8px;
  border: 3px solid #dd0;
  background-color: #ff0;
  opacity:0.9;
  color:lightblue;
  text-align:center;
  vertical-align:middle;
  position:absolute;
  top:-100px;
  left:100px;
}
.together{
  white-space:nowrap;
}
#printonly{
  display:none;
}
p.noscript{
  background-color:#ffb;
  font-weight:bold;
  padding:2em;
  text-align:center;
}
fieldset{
  display:inline-block;
  border:2px solid #eee;
  border-radius:8px;
}
legend{
  color:#333;
}
#fbwrap{
  width:100%;
  overflow-x:auto;
}
#fretboard{
  width:100%;
  border-collapse:collapse;
  background-color:#f8f8f8;
  border: 2px solid lightgray !important;
  border-radius:8px;
  overflow:hidden;
}
td{
  border:1px solid #888;
  text-align:center;
  vertical-align:middle;
  color:lightgray;
}
td span{
  font-size:80%;
  vertical-align:middle;
  display:inline-block;
  width:1.4em;
  height:1.4em;
  padding:5px;
  border: 2px solid lightgray;
  border-radius:1.4em;
  background-color:white;
  line-height:1.4em;
  margin:1px;
}
td.inscale span{
  border-color:gray;
}
#snotes label{
  display: inline-block;
  width:2em;
  height:2em;
  vertical-align:middle;
  border-radius:2em;
  line-height:2em;
  border: 2px solid lightgray;
  cursor:pointer;
  margin:5px;
}
#snoteopts{
  text-align:center;
  padding-bottom:0.3em;
}
#snotes label:hover{
  border-color:gray
}
#snotes input{
  display:none;
}
input#lefty,input#sharps,input#weird{
  display:none;
}
label[for=lefty],label[for=sharps],label[for=weird],#intervalstyle,#splay{
  border:2px solid lightgray;
  padding:4px;
  border-radius:6px;
  height:1.2em;
  display:inline-block;
  background-color:#f8f8f8;
  width:3.5em;
  vertical-align:middle;
  text-align:center;
  color:black;
}
label[for=lefty]:hover,label[for=sharps]:hover,#intervalstyle:hover,#splay:hover,label[for=weird]:hover{
  border-color:gray;
}
label[for=weird]{
  float:right;
  display:block;
  margin-right:0.5em;
}
#fretboard td.scalenote0 span{
  border-color:black;
  font-weight:bold;
  color:white;
  background-color:black;
  line-height:1.4em;
}
.righty td.f0{
  border-right:3px double black;
}
.lefty td.f0{
  border-left:5px double black;
}

td.f0.scalenote0 select{
  color:white;
  background-color:black;
}
thead,tfoot{
  color:#f8f8f8;
  background-color:#111;
  font-size:75%;
  border:1px solid black;
  font-family:Sans-Serif;
  font-weight:bold;
  cursor:pointer;
}
th{
  font-weight:normal;
}
select{
  background-color:#f8f8f8;
  vertical-align:middle;
  border:2px solid lightgray;
  border-radius:6px;
  font-size:100%;
  height:30px;
  font-family:Sans-Serif,Bravura;
}
select:hover{
  border-color:gray;
}
.f0 select{
  //opacity:0.7;
  font-size:120%;
}
#choices,
#metronome,
#saveddiv,
#snotes{
  text-align:center;
  vertical-align:middle;
  background-color:white;
}
#saveddiv p{
  padding-top:0.4em;
}
#saved{
  list-style-type:square;
  text-align:left;
}


#metronomething,#chordthing,#savedthing{
  border:2px solid lightgray;
  border-radius:8px;
  background-color:#f8f8f8;
}
#metronome{
  display:none;
}
#metronome span{
  line-height:2em;
  color:lightgray;
}
#metronome .mcontrol{
  font-size:350%;
  cursor:pointer;
}
#metronome #beats,
.repeat{
  font-size:350%;
}
#metronome #beats span{
  padding-right:0.5em;
  vertical-align:top;
}
#metronome .mcontrol:hover{
  color:black;
}
#beats{
  display:inline;
}
#bpm{
  width:62%;
}
#metronome #bpmn{
  font-size:100%;
  color:black;
}
#metronome span.n{
  font-size:110%;
}
#bpmselect *{
  vertical-align:middle;
  color:gray;
}
#snotes{
  text-align:center;
  font-size:80%;
}
.scalenote{
  background-color:#f8f8f8;
  color:lightgray;
}
.scalenote0.inscale{
  background-color:red;
}
.inscale{
  color:black;
}
.credits{
  text-align:center;
  font-size:smaller;
  width:100%;
  margin-top:5em;
}
.credits,
.credits a,
.credits a:visited{
  color:gray;
}
#title{
  font-family:"Bradley Hand",Purisa,Cursive,Script;
  font-style:italic;
  font-size:120%;
  text-align:center;
  background-color:gray;
  color:white;
  padding:0.3em;
  margin:0 0 1em 0;
  border:3px solid darkgray;
  border-radius:1.2em;
}
a{
  text-decoration:none;
  color:blue;
}
a:hover{
  color:blue;
}

option[disabled]{
  color:lightgray;
}
#mute,#more,#less,#start{
  vertical-align:super; 
}
#tips{
  display:inline-block;
  color:#f8f8f8;
  background-color:#c44;
  margin:15px;
  padding:5px;
  border-radius:1em;
  text-decoration:none;
  font-weight:bold;
}
.button{
  margin:0.4em;
  cursor:pointer;
  width:90%;
  display:inline-block;
}
#shchords,#shmetronome,#shsaved{
 margin-top:0;
 margin-bottom:0;
}
#shchords .info{
  color: gray;
  font-size: smaller;
  display: inline-block;
  width: 94vw;
  margin: 1em;
}
#chords{
  display:none;
  text-align:center;
  columns:7;
  background-color:white;
  padding:0.5em;
}
#chords section{
  break-after:column;
}
.chord{
  font-size:smaller;
  border:2px solid lightblue;
  border-radius:1em;
  display:inline-block;
  width:4em;
  padding:4px;
  margin:4px;
}
.chord:hover{
  border:2px solid red;
  background-color: red;
  color:white;
}
label.inchord,.inchord span,.inchord select{
  background-color:gray !important;
  color:white !important;
}
.reset{
  border:3px solid lightgray;
  padding:0.5em;
  padding:0.5em;
  border-radius:6px;
  background-color:#f8f8f8;
  text-decoration:none;
  font-size:initial;
  color:black;
  line-height:3.5em;
  display:inline;
}
.reset:hover{
  background-color:red;
  color:white !important;
}
.savebutton{
  border:3px solid lightgray;
  padding:0.5em;
  padding:0.5em;
  border-radius:6px;
  background-color:#f8f8f8;
  text-decoration:none;
  font-size:initial;
  color:black;
  line-height:3.5em;
  display:inline;
  cursor:pointer;
  margin:0.5em;
}
.savebutton:hover{
  border-color:gray;
}
.delsave{
  color:red;
  font-weight:bold;
  font-size:larger;
  margin-right:0.5em;
}

.scalenote0.inscale{
  background-color:red;
}
.scalenote1.inscale{
  background:repeating-linear-gradient(135deg,
  red,
  orange,
  red 7px,
  orange 7px);
}
.scalenote2.inscale{
  background-color:orange;
}
.scalenote3.inscale{
  background:repeating-linear-gradient(135deg,
  orange,
  yellow,
  orange 7px,
  yellow 7px);
}
.scalenote4.inscale{
  background-color:yellow;
}
.scalenote5.inscale{
  background-color:lightgreen;
}
.scalenote6.inscale{
  background:repeating-linear-gradient(135deg,
  lightgreen,
  lightskyblue,
  lightgreen 7px,
  lightskyblue 7px);
}
.scalenote7.inscale{
  background-color:lightskyblue;
}
.scalenote8.inscale{
  background:repeating-linear-gradient(135deg,
  lightskyblue,
  violet,
  lightskyblue 7px,
  violet 7px);
}
.scalenote9.inscale{
  background-color:violet;
}
.scalenote10.inscale{
  background:repeating-linear-gradient(135deg,
  violet,
  magenta,
  violet 7px,
  magenta 7px);
}
.scalenote11.inscale{
  background-color:magenta;
}

.f0{
  width:5%
}
  .f1{
  width:4.7193715634085%
}
  .f2{
  width:4.4544935907017%
}
  .f3{
  width:4.2044820762686%
}
  .f4{
  width:3.9685026299205%
}
  .f5{
  width:3.7457676921917%
}
  .f6{
  width:3.5355339059327%
}
  .f7{
  width:3.3370996354251%
}
  .f8{
  width:3.1498026247372%
}
  .f9{
  width:2.9730177875068%
}
  .f10{
  width:2.8061551207734%
}
  .f11{
  width:2.6486577358982%
}
  .f12{
  width:2.5%
}
  .f13{
  width:2.3596857817042%
}
  .f14{
  width:2.2272467953508%
}
  .f15{
  width:2.1022410381343%
}
  .f16{
  width:1.9842513149602%
}
  .f17{
  width:1.8728838460959%
}
  .f18{
  width:1.7677669529664%
}
  .f19{
  width:1.6685498177125%
}
  .f20{
  width:1.5749013123686%
}
  .f21{
  width:1.4865088937534%
}
  .f22{
  width:1.4030775603867%
}
  .f23{
  width:1.3243288679491%
}
  .f24{
  width:1.25%
}