@import url('https://css.netcentrx.net/msgbox-v2.4.css');
body {
  background-color: #0b1304;
  /* background-image: url(../img/rainbow-score.jpg); */
  /*background-image: url(../img/circle-images.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;*/
}
section {
  /* background-image: url(../img/circle-images.jpg); */
  background-image: url(../img/rainbow-score.jpg);
  width: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  border-radius:1.5rem;
}

.container {
  display: grid;
  grid-template-columns: 1fr 80px 240px 1fr;
  grid-template-rows: 50px 50px 70px 135px 70px 155px 2px 60px 45px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . ."
    ". header header ."
    ". question staff ."
    ". octaves staff ."
    ". shownotes staff ."
    ". msg staff ."
    ". buttons buttons ."
    ". console console ."
    ". footer footer .";
}

.header {
  grid-area: header;
  background: teal;
  border-radius:0.5rem 0.5rem 0 0;
}
.header h1 {
  font-family: sans-serif;
  font-size: 1.5rem;
  text-align: center;
  margin: 0.75rem;
  color:#fff;
  text-shadow:1px 1px 1px #555, 2px 2px 2px #111;
}

.question {
  grid-area: question;
  background: #ccc;
  text-align: center;
}

.octaves {
  grid-area: octaves;
  background: #ccc;
  text-align: center;
}

.shownotes {
  grid-area: shownotes;
  background: #ccc;
  text-align: center;
}

.showNotes {
  text-align: left;
}


.msg {
  grid-area: msg;
  background: #ccc;
  text-align: center;
}

.staff {
  grid-area: staff;
  background: #fff;
}

.buttons {
  grid-area: buttons;
}

.console {
  grid-area: console;
}

.footer {
  grid-area: footer;
}

html,
body,
.container {
  height: 100%;
  margin: 0;
}

.notes {
  display: grid;
  z-index: 5;
  margin: 0 auto;
  text-align: center;
  width: 230px;
  height: 380px;
  grid-template-columns: 65px 90px 60px 15px;
  grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "spacer_1 spacer_2 spacer_3 spacer_4"
    "c8_1 c8_2 c8_3 c8_4"
    "b7_1 b7_2 b7_3 b7_4"
    "a7_1 a7_2 a7_3 a7_4"
    "g7_1 g7_2 g7_3 g7_4"
    "f7_1 f7_2 f7_3 f7_4"
    "e7_1 e7_2 e7_3 e7_4"
    "d7_1 d7_2 d7_3 d7_4"
    "c7_1 c7_2 c7_3 c7_4"
    "b6_1 b6_2 b6_3 b6_4"
    "a6_1 a6_2 a6_3 a6_4"
    "g6_1 g6_2 g6_3 g6_4"
    "f6_1 f6_2 f6_3 f6_4"
    "e6_1 e6_2 e6_3 e6_4"
    "d6_1 d6_2 d6_3 d6_4"
    "c6_1 c6_2 c6_3 c6_4"
    "b5_1 b5_2 b5_3 b5_4"
    "a5_1 a5_2 a5_3 a5_4"
    "g5_1 g5_2 g5_3 g5_4"
    "f5_1 f5_2 f5_3 f5_4"
    "e5_1 e5_2 e5_3 e5_4"
    "d5_1 d5_2 d5_3 d5_4"
    "c5_1 c5_2 c5_3 c5_4"
    "b4_1 b4_2 b4_3 b4_4"
    "a4_1 a4_2 a4_3 a4_4"
    "g4_1 g4_2 g4_3 g4_4"
    "f4_1 f4_2 f4_3 f4_4"
    "e4_1 e4_2 e4_3 e4_4"
    "d4_1 d4_2 d4_3 d4_4"
    "c4_1 c4_2 c4_3 c4_4"
    "b3_1 b3_2 b3_3 b3_4"
    "a3_1 a3_2 a3_3 a3_4"
    "g3_1 g3_2 g3_3 g3_4"
    "f3_1 f3_2 f3_3 f3_4"
    "e3_1 e3_2 e3_3 e3_4"
    "d3_1 d3_2 d3_3 d3_4"
    "c3_1 c3_2 c3_3 c3_4";
}

.treble {
  position: absolute;
  top: 270px;
  left: 50%;
  margin-left: -75px;
  width: 50px;
}
.question_number {
  font-size: 0.7rem;
  color: #fff;
  width: 60px;
  height: 50px;
  font-family: sans-serif;
  border: 1px groove #600;
  background: #800;
  text-align: center;
  border-radius: 0.75rem;
  margin:0.25rem;
  padding: 0.25rem;
}

.qst_num {
  text-align: center;
  color: yellow;
  font-size: 1.5rem;
  font-weight: bold;
}
.showNotes {
  vertical-align: middle;
  display: inline-block;
  border: 1px solid #555;
  font-family: sans-serif;
  width: 50px;
  height: 50px;
  background: #008;
  overflow: hidden;
  padding-top: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 0.5rem;
  margin:0.25rem;
  z-index: 6;
}
.newNote, 
.quiz {
  border-radius:0.5rem;
  background: #da6304;
  color:#fff;
  font-size: 1.2rem;
  padding: 0.5rem 0.65rem;
  border:2px groove #b95140;
  text-shadow: 0.05rem 0.05rem 0.05rem #777, 0.055rem 0.055rem 0.055rem #555, 0.06rem 0.06rem 0.06rem #333;
  box-shadow: 2px 2px 2px #555, 3px 3px 3px #222;
  cursor:pointer;
}

#checkIt {
  border-radius:0.5rem;
  background: #278a5b;
  color:#fff;
  font-size: 1.0rem;
  padding: 0.5rem 0.5rem;
  border:2px groove #327c14;
  text-shadow: 0.05rem 0.05rem 0.05rem #777, 0.055rem 0.055rem 0.055rem #555, 0.06rem 0.06rem 0.06rem #333;
  box-shadow: 2px 2px 2px #555, 3px 3px 3px #222;
  cursor:pointer;
}

.left {
  text-align:left;
  color:#800;
}
.right {
  text-align:right;
  color:#008;
}
.shownote {
  font-family: sans-serif;
  font-size: 1.05rem;
  vertical-align:middle;
}

.gray-bkgd {
  background:rgba(240,240,240,0.5);
}

.left-border {
  border-left:1px solid #222;
}
.right-border {
  border-right:1px solid #222;
}

.top-border {
  border-top:1px solid #222;
}
.bottom-border {
  border-bottom:1px solid #222;
}

.brd-btm { 
  border-bottom:2px solid #ccc;
}
.ledger {
  border-bottom: 2px solid black;
}
/**/
#octaves {
  width: 60px;
  font-family: sans-serif;
  font-size: 0.7rem;
  background: #0e2b87;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 2px #555, 3px 3px 3px #222;
  border: 2px solid #222;
  margin: 0.05rem;
  padding: 0.25rem 0.25rem;
  cursor:pointer;
}

.user_input {
  width: 64px;
  display:inline-block;
  font-family: sans-serif;
  font-size: 3.2rem;
  background: #004040;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 2px #555, 3px 3px 3px #222;
  border: 2px solid #222;
  margin: 0.25rem;

}

/*================================================*/
.msgbox_results {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 0.5fr;
  gap: 0px 0px;
  height:250px;
  max-height:350px;
  grid-auto-flow: row;
  grid-template-areas:
    ". correct_answer user_answer mt ."
    ". correct_answer_displayed user_answer_displayed choices ."
    ". quiz_results quiz_results quiz_results ."
}

.console {
  font-family: sans-serif;
  font-size: 0.85rem;
  color:#fff;
}

.correct_answer { grid-area: correct_answer; }

.user_answer { grid-area: user_answer; }

.mt { grid-area: mt;text-align: center; }

.correct_answer_displayed { grid-area: correct_answer_displayed; }

.user_answer_displayed { grid-area: user_answer_displayed; }

.choices { grid-area: choices;text-align: center;font-size: 1.5rem;font-weight: bold; }

.quiz_results { grid-area: quiz_results; }

.shadow { 
  color:#fff;
  text-shadow:1px 1px 1px #999, 2px 2px 2px #555;
}

html, body , .msgbox_results {
  height: 100%;
  margin: 0;
}

/* For presentation only, no need to copy the code below */
.no_select {
  /* user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -o-user-select: none;
  -moz-user-select: none;

  pointer-events:none; */
  cursor: pointer;
}

.large {
  font-size: 2.5rem;
}

.center {
  text-align: center;
}
/*================================================*/

.buttons {
  grid-area: buttons;
  height: 40px;
  max-height: 40px;
  background: #110c6c;
  text-align: center;
  margin: 0;
  border-radius: 0.5rem;
  padding: 0 0.75rem 0.5rem 0.5rem;
}

div[role="button"].btn {
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  text-shadow: 0.06rem 0.06rem 0.06rem #999, 0.07rem 0.07rem 0.07rem #777;
  width: 2.5rem;
}
div[role="button"].wider {
  width: 2.5rem;
}
/** **/

div[role="button"].btn {
  cursor: pointer;
  font-size: initial;
  letter-spacing: normal !important;
  text-align: center;
  line-height: normal;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  font: 400 1.2rem sans-serif;
  border: 1px solid #222;
  padding: 0.3rem 0.1rem 0.3rem 0.1rem;
}
div[role="button"].btn:hover,
div[role="button"].btn:active {
  padding: 0.275rem 0.15rem 0.325rem 0.05rem;
  background: #004040;
}
div[role="group"].btn-group {
  font-size: 0;
  letter-spacing: 0.25rem;
  display: inline-block;
  white-space: nowrap;
}

div[role="group"].btn-group-spacing {
  font-size: 0;
  letter-spacing: 0.1rem !important;
  display: inline-block;
  white-space: nowrap;
}

.bg-teal {
  background: #ffffff;
  background-color: teal;
  color: #ffffff;
}

.bg-teal:active,
.bg-teal:hover {
  background-color: var(--secondary);
  padding: 0.0625rem 0.125rem 0.0625rem 0.125rem;
}

.bg-teal-outline {
  background: transparent;
  background-color: transparent;
  color: blue;
  border: 0.1rem solid var(--main2);
}

.bg-teal-outline:active,
.bg-teal-outline:hover {
  background-color: #808080;
  color: #ffffff;
}

/**/
.f5_1,
.f5_2,
.f5_3,
.f5_4,
.d5_1,
.d5_2,
.d5_3,
.d5_4,
.b4_1,
.b4_2,
.b4_3,
.b4_4,
.g4_1,
.g4_2,
.g4_3,
.g4_4,
.e4_1,
.e4_2,
.e4_3,
.e4_4 {
  border-bottom: 2px solid black;
}
.e5_1,
.d5_1,
.c5_1,
.b4_1,
.a4_1,
.g4_1,
.f4_1,
.e4_1 {
  border-left: 4px solid black;
}
.e5_4,
.d5_4,
.c5_4,
.b4_4,
.a4_4,
.g4_4,
.f4_4,
.e4_4 {
  border-right: 10px solid black;
}

.e5_3,
.d5_3,
.c5_3,
.b4_3,
.a4_3,
.g4_3,
.f4_3,
.e4_3 {
  border-right: 2px solid black;
}

.c8_2,
.b7_2,
.a7_2,
.g7_2,
.f7_2,
.e7_2,
.d7_2,
.c7_2,
.b6_2,
.a6_2,
.g6_2,
.f6_2,
.e6_2,
.d6_2,
.c6_2,
.b5_2,
.a5_2,
.g5_2,
.f5_2,
.e5_2,
.d5_2,
.c5_2,
.b4_2,
.a4_2,
.g4_2,
.f4_2,
.e4_2,
.d4_2,
.c4_2,
.b3_2,
.a3_2,
.g3_2,
.f3_2,
.e3_2,
.d3_2,
.c3_2 {
  align-items: center;
  justify-items: center;
  justify-content: center;
  text-align: center;
}

.spacer_1 {
  grid-area: spacer_1;
}
.spacer_2 {
  grid-area: spacer_2;
}
.spacer_3 {
  grid-area: spacer_3;
}
.spacer_4 {
  grid-area: spacer_4;
}

.c8_1 {
  grid-area: c8_1;
}
.c8_2 {
  grid-area: c8_2;
}
.c8_3 {
  grid-area: c8_3;
}
.c8_4 {
  grid-area: c8_4;
}
.b7_1 {
  grid-area: b7_1;
}
.b7_2 {
  grid-area: b7_2;
}
.b7_3 {
  grid-area: b7_3;
}
.b7_4 {
  grid-area: b7_4;
}
.a7_1 {
  grid-area: a7_1;
}
.a7_2 {
  grid-area: a7_2;
}
.a7_3 {
  grid-area: a7_3;
}
.a7_4 {
  grid-area: a7_4;
}
.g7_1 {
  grid-area: g7_1;
}
.g7_2 {
  grid-area: g7_2;
}
.g7_3 {
  grid-area: g7_3;
}
.g7_4 {
  grid-area: g7_4;
}
.f7_1 {
  grid-area: f7_1;
}
.f7_2 {
  grid-area: f7_2;
}
.f7_3 {
  grid-area: f7_3;
}
.f7_4 {
  grid-area: f7_4;
}
.e7_1 {
  grid-area: e7_1;
}
.e7_2 {
  grid-area: e7_2;
}
.e7_3 {
  grid-area: e7_3;
}
.e7_4 {
  grid-area: e7_4;
}
.d7_1 {
  grid-area: d7_1;
}
.d7_2 {
  grid-area: d7_2;
}
.d7_3 {
  grid-area: d7_3;
}
.d7_4 {
  grid-area: d7_4;
}
.c7_1 {
  grid-area: c7_1;
}
.c7_2 {
  grid-area: c7_2;
}
.c7_3 {
  grid-area: c7_3;
}
.c7_4 {
  grid-area: c7_4;
}
.b6_1 {
  grid-area: b6_1;
}
.b6_2 {
  grid-area: b6_2;
}
.b6_3 {
  grid-area: b6_3;
}
.b6_4 {
  grid-area: b6_4;
}
.a6_1 {
  grid-area: a6_1;
}
.a6_2 {
  grid-area: a6_2;
}
.a6_3 {
  grid-area: a6_3;
}
.a6_4 {
  grid-area: a6_4;
}
.g6_1 {
  grid-area: g6_1;
}
.g6_2 {
  grid-area: g6_2;
}
.g6_3 {
  grid-area: g6_3;
}
.g6_4 {
  grid-area: g6_4;
}
.f6_1 {
  grid-area: f6_1;
}
.f6_2 {
  grid-area: f6_2;
}
.f6_3 {
  grid-area: f6_3;
}
.f6_4 {
  grid-area: f6_4;
}
.e6_1 {
  grid-area: e6_1;
}
.e6_2 {
  grid-area: e6_2;
}
.e6_3 {
  grid-area: e6_3;
}
.e6_4 {
  grid-area: e6_4;
}
.d6_1 {
  grid-area: d6_1;
}
.d6_2 {
  grid-area: d6_2;
}
.d6_3 {
  grid-area: d6_3;
}
.d6_4 {
  grid-area: d6_4;
}

.b5_1 {
  grid-area: b5_1;
}

.a5_1 {
  grid-area: a5_1;
}

.g5_1 {
  grid-area: g5_1;
}

.f5_1 {
  grid-area: f5_1;
}

.e5_1 {
  grid-area: e5_1;
}

.d5_1 {
  grid-area: d5_1;
}

.c5_1 {
  grid-area: c5_1;
}

.b4_1 {
  grid-area: b4_1;
}

.a4_1 {
  grid-area: a4_1;
}

.g4_1 {
  grid-area: g4_1;
}

.f4_1 {
  grid-area: f4_1;
}

.e4_1 {
  grid-area: e4_1;
}

.d4_1 {
  grid-area: d4_1;
}

.c4_1 {
  grid-area: c4_1;
}

.b3_1 {
  grid-area: b3_1;
}

.a3_1 {
  grid-area: a3_1;
}

.b5_2 {
  grid-area: b5_2;
}

.a5_2 {
  grid-area: a5_2;
}

.g5_2 {
  grid-area: g5_2;
}

.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;
}

.d4_2 {
  grid-area: d4_2;
}

.c4_2 {
  grid-area: c4_2;
}

.b3_2 {
  grid-area: b3_2;
}

.a3_2 {
  grid-area: a3_2;
}

.b5_3 {
  grid-area: b5_3;
}

.a5_3 {
  grid-area: a5_3;
}

.g5_3 {
  grid-area: g5_3;
}

.f5_3 {
  grid-area: f5_3;
}

.e5_3 {
  grid-area: e5_3;
}

.d5_3 {
  grid-area: d5_3;
}

.c5_3 {
  grid-area: c5_3;
}

.b4_3 {
  grid-area: b4_3;
}

.a4_3 {
  grid-area: a4_3;
}

.g4_3 {
  grid-area: g4_3;
}

.f4_3 {
  grid-area: f4_3;
}

.e4_3 {
  grid-area: e4_3;
}

.d4_3 {
  grid-area: d4_3;
}

.c4_3 {
  grid-area: c4_3;
}

.b3_3 {
  grid-area: b3_3;
}

.a3_3 {
  grid-area: a3_3;
}

.b5_4 {
  grid-area: b5_4;
}

.a5_4 {
  grid-area: a5_4;
}

.g5_4 {
  grid-area: g5_4;
}

.f5_4 {
  grid-area: f5_4;
}

.e5_4 {
  grid-area: e5_4;
}

.d5_4 {
  grid-area: d5_4;
}

.c5_4 {
  grid-area: c5_4;
}

.b4_4 {
  grid-area: b4_4;
}

.a4_4 {
  grid-area: a4_4;
}

.g4_4 {
  grid-area: g4_4;
}

.f4_4 {
  grid-area: f4_4;
}

.e4_4 {
  grid-area: e4_4;
}

.d4_4 {
  grid-area: d4_4;
}

.c4_4 {
  grid-area: c4_4;
}

.b3_4 {
  grid-area: b3_4;
}

.a3_4 {
  grid-area: a3_4;
}

.g3_1 {
  grid-area: g3_1;
}
.g3_2 {
  grid-area: g3_2;
}
.g3_3 {
  grid-area: g3_3;
}
.g3_4 {
  grid-area: g3_4;
}
.f3_1 {
  grid-area: f3_1;
}
.f3_2 {
  grid-area: f3_2;
}
.f3_3 {
  grid-area: f3_3;
}
.f3_4 {
  grid-area: f3_4;
}
.e3_1 {
  grid-area: e3_1;
}
.e3_2 {
  grid-area: e3_2;
}
.e3_3 {
  grid-area: e3_3;
}
.e3_4 {
  grid-area: e3_4;
}
.d3_1 {
  grid-area: d3_1;
}
.d3_2 {
  grid-area: d3_2;
}
.d3_3 {
  grid-area: d3_3;
}
.d3_4 {
  grid-area: d3_4;
}
.c3_1 {
  grid-area: c3_1;
}
.c3_2 {
  grid-area: c3_2;
}
.c3_3 {
  grid-area: c3_3;
}
.c3_4 {
  grid-area: c3_4;
}

/* For presentation only, no need to copy the code below */
/*
.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

*/

@media only screen and (max-width: 500px) {
  .container {
    grid-template-columns: 30px 80px 240px 30px;
  }
  /* .container {
    display: grid;
    grid-template-columns: 125px 375px;
    grid-template-rows: 50px 50px 55px 115px 65px 155px 40px 80px 85px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". ."
      "header header"
      "question staff"
      "octaves staff"
      "shownotes staff"
      "msg staff"
      "buttons buttons"
      "console console"
      "footer footer";
  } */
  
  body {
    width:500px;
  }
}