body { background:#066;}
.whole-note {
    background-image: url(/staff/img/whole-note.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}
.whole-note-aqua {
    background-image: url(/staff/img/whole-note-aqua.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}
.whole-note-blue {
    background-image: url(/staff/img/whole-note-blue.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}
.whole-note-fuschia {
    background-image: url(/staff/img/whole-note-fuschia.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}

.whole-note-gold {
    background-image: url(/staff/img/whole-note-gold.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}
.whole-note-green {
    background-image: url(/staff/img/whole-note-green.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}
.whole-note-orange {
    background-image: url(/staff/img/whole-note-orange.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}

.whole-note-purple {
    background-image: url(/staff/img/whole-note-purple.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}
.whole-note-red {
    background-image: url(/staff/img/whole-note-red.svg);
    width: 1.8rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    display:inline-grid;
}

.aqua { 
    color:#338DB3;
}
.blue {  
    color:#0F00FF;
}
.fuschia  {
    color:#ff00ff;
}
.green {
    color:#37AF31;
}
.gold { 
    color:#79731D;
}
.purple { 
    color:#8A00FF;
}
.orange { 
    color:#FFA500;
}

.red { 
    color:#E41616;
}

.noted:hover {
    display:inline-block;
    opacity:1;
    transition:0.15s;
    z-index: 2;
}
.noted {
    display:inline-block;
    opacity:0;
    transition:0.5s;
    z-index: 1;
    font-family: sans-serif;
    font-size: 1.2rem;
    vertical-align:middle;
    text-transform:uppercase;
    font-weight: bold;
    text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999, 0.06rem 0.06rem 0.06rem #333;
}


.treble-clef {
    background-image: url(/staff/img/treble-clef.svg);
    width: 8rem;
    height: 6.7rem;
    background-repeat: no-repeat;
    position:absolute;
}

.bass-clef {
    background-image: url(/staff/img/bass-clef.svg);
    width: 3rem;
    height: 4.6rem;
    background-repeat: no-repeat;
    position:absolute;
}

.treble {
    position: relative;
    background:#fff;
    width: 14rem;
    margin: 0 auto;
    height: 19rem;
}

.treble {
  display: grid;
  grid-template-columns: 1rem 4rem 5rem 4rem ;
  grid-template-rows:
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0 0; 
  grid-auto-flow: row;
  grid-template-areas:
    "h1 h1 h1 h1" 
    ". . C8 ."
    ". . B7 ."
    ". . A7 ."
    ". . G7 ."
    ". . F7 ."
    ". . E7 ."
    ". . D7 ."
    ". . C7 ."
    ". . B6 ."
    ". . A6 ."
    ". . G6 ."
    ". . F6 ."
    ". . E6 ."
    ". . D6 ."
    ". . C6 ."
    ". . B5 ."
    ". . A5 ."
    ". . G5 ."
    ". F5-2 F5 ."
    "left-bar E5-2 E5 ."
    "left-bar D5-2 D5 ."
    "left-bar C5-2 C5 ."
    "left-bar B4-2 B4 ."
    "left-bar A4-2 A4 ."
    "left-bar G4-2 G4 ."
    "left-bar F4-2 F4 ."
    "left-bar E4-2 E4 ."
    "left-bar . D4 ."
    "left-bar . C4 ."
    "left-bar . B3 ."
    "left-bar . A3 ."
    "left-bar . G3 ."
    "left-bar . F3 ."
    "left-bar . E3 ."
    "left-bar . D3 ."
    "left-bar . C3 ."
    "left-bar . spacer .";
}

.bass {
  background:#fff;
  width: 14rem;
  margin: 0 auto;
  /* margin-top: 0.5rem; */
  height: 26rem;
}

.bass {
  display: grid;
  grid-template-columns: 1rem 4rem 5rem 4rem ;
  grid-template-rows:
    3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
    1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
    1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "left-bar2 . spacer ."
    "left-bar2 . c5 ."
    "left-bar2 . b4 ."
    "left-bar2 . a4 ."
    "left-bar2 . g4 ."
    "left-bar2 . f4 ."
    "left-bar2 . e4 ."
    "left-bar2 . d4 ."
    "left-bar2 . c4 ."
    "left-bar2 . b3 ."
    "left-bar2 a3-2 a3 ."
    "left-bar2 g3-2 g3 ."
    "left-bar2 f3-2 f3 ."
    "left-bar2 e3-2 e3 ."
    "left-bar2 d3-2 d3 ."
    "left-bar2 c3-2 c3 ."
    "left-bar2 b2-2 b2 ."
    "left-bar2 a2-2 a2 ."
    "left-bar2 g2-2 g2 ."
    ". . f2 ."
    ". . e2 ."
    ". . d2 ."
    ". . c2 ."
    ". . b1 ."
    ". . a1 ."
    ". . g1 ."
    ". . f1 ."
    ". . e1 ."
    ". . d1 ."
    ". . c1 ."
    ". . b0 ."
    ". . a0 ."
    ". . spacer2 ."
    ". . . ."
    "comment comment comment comment"
    "disable disable disable disable";
}


.left-bar {
  grid-area: left-bar;
}


.spacer {
  grid-area: spacer;
}

.spacer {
  height: 4rem;
}


.ledger {
  border-bottom: 0.125rem solid black;
}
/* .note:hover {
  display:grid;
  width: 5rem;
  height: 0.5rem;
  background: rgba(250,250,250,0.2);
  transition 0.5s;
  justify-items: center;
} */

.note {
  display:grid;
  width: 5rem;
  height: 0.5rem;
  transition 0.5s;
  background: rgba(250,250,250,0.2);
  justify-items: center;
  cursor:crosshair;
}


.left-bar,
.left-bar2 {
  border-left: 0.5rem solid black;
  border-right: 0.125rem solid black;
}


/*==================================*/
.center { 
  text-align: center;
}
.h1 {
  grid-area: h1;
  font-family: sans-serif;
  font-size: 1.2rem;
  color:#fff;
  padding: 0.5rem;
  /* border-radius: 0.5rem 0.5rem 0 0; */
  background: transparent;
  background: #000;  
}
.C8 {
grid-area: C8;
}

.B7 {
grid-area: B7;
}

.A7 {
grid-area: A7;
}

.G7 {
grid-area: G7;
}

.F7 {
grid-area: F7;
}

.E7 {
grid-area: E7;
}

.D7 {
grid-area: D7;
}

.C7 {
grid-area: C7;
}

.B6 {
grid-area: B6;
}

.A6 {
grid-area: A6;
}

.G6 {
grid-area: G6;
}

.F6 {
grid-area: F6;
}

.E6 {
grid-area: E6;
}

.D6 {
grid-area: D6;
}

.C6 {
grid-area: C6;
}

.B5 {
grid-area: B5;
}

.A5 {
grid-area: A5;
}

.G5 {
grid-area: G5;
}

.F5 {
grid-area: F5;
}

.E5 {
grid-area: E5;
}

.D5 {
grid-area: D5;
}

.C5 {
grid-area: C5;
}

.B4 {
grid-area: B4;
}

.A4 {
grid-area: A4;
}

.G4 {
grid-area: G4;
}

.F4 {
grid-area: F4;
}

.E4 {
grid-area: E4;
}

.D4 {
grid-area: D4;
}

.C4 {
grid-area: C4;
}

.B3 {
grid-area: B3;
}

.A3 {
grid-area: A3;
}

.G3 {
grid-area: G3;
}

.F3 {
grid-area: F3;
}

.E3 {
grid-area: E3;
}

.D3 {
grid-area: D3;
}

.C3 {
grid-area: C3;
}

.left-bar {
grid-area: left-bar;
}

.F5-2 {
grid-area: F5-2;
}

.E5-2 {
grid-area: E5-2;
}

.D5-2 {
grid-area: D5-2;
}

.C5-2 {
grid-area: C5-2;
}

.B4-2 {
grid-area: B4-2;
}

.A4-2 {
grid-area: A4-2;
}

.G4-2 {
grid-area: G4-2;
}

.F4-2 {
grid-area: F4-2;
}

.E4-2 {
grid-area: E4-2;
}

.c5 {
grid-area: c5;
}

.b4 {
grid-area: b4;
}

.a4 {
grid-area: a4;
}

.g4 {
grid-area: g4;
}

.f4 {
grid-area: f4;
}

.e4 {
grid-area: e4;
}

.d4 {
grid-area: d4;
}

.c4 {
grid-area: c4;
}

.b3 {
grid-area: b3;
}

.a3 {
grid-area: a3;
}

.g3 {
grid-area: g3;
}

.f3 {
grid-area: f3;
}

.e3 {
grid-area: e3;
}

.d3 {
grid-area: d3;
}

.c3 {
grid-area: c3;
}

.b2 {
grid-area: b2;
}

.a2 {
grid-area: a2;
}

.g2 {
grid-area: g2;
}

.f2 {
grid-area: f2;
}

.e2 {
grid-area: e2;
}

.d2 {
grid-area: d2;
}

.c2 {
grid-area: c2;
}

.b1 {
grid-area: b1;
}

.a1 {
grid-area: a1;
}

.g1 {
grid-area: g1;
}

.f1 {
grid-area: f1;
}

.e1 {
grid-area: e1;
}

.d1 {
grid-area: d1;
}

.c1 {
grid-area: c1;
}

.b0 {
grid-area: b0;
}

.a0 {
grid-area: a0;
}

.spacer2 {
grid-area: spacer2;
}

.left-bar2 {
grid-area: left-bar2;
}

.a3-2 {
grid-area: a3-2;
}

.g3-2 {
grid-area: g3-2;
}

.f3-2 {
grid-area: f3-2;
}

.e3-2 {
grid-area: e3-2;
}

.d3-2 {
grid-area: d3-2;
}

.c3-2 {
grid-area: c3-2;
}

.b2-2 {
grid-area: b2-2;
}

.a2-2 {
grid-area: a2-2;
}

.g2-2 {
grid-area: g2-2;
}
/*==================================*/
.comment {
    grid-area: comment;
    text-align: center;
    font-family: sans-serif;
    padding: 0.25rem;
    background: #33036b;
    margin-top: 5px;
    color: #fff;
    width: 13rem;
    font-size: 0.85rem;
    margin: 0.5rem auto;
    border-radius: 0.25rem;
    text-shadow: 0.05rem 0.05rem 0.05rem #999, 0.055rem 0.055rem 0.055rem #666, 0.06rem 0.06rem 0.06rem #333;
}

.comment:hover {
    background: #3f307f;
}

.disable {
    grid-area: disable;
    text-align: center;
    font-family: sans-serif;
    padding: 0.25rem;
    background: transparent;
    border-radius: 0.25rem;
}

footer {
  position:relative!important;
  width:20rem;
  margin:0 auto;
}