body {
    background-color: #FFFFFF;
}

h1 {
    color: #55AA55;
}
h3 {
    color: #5555AA;
}
.navButton {
    background-color: #6666AA;
    border: none;
    color: white;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
}
.playButton {
    background-color: #66CC66;
    border: none;
    color: white;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
}
.stopButton {
    background-color: #CC6666;
    border: none;
    color: white;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
}
.clearButton {
    background-color: #CCCCCC;
    border: none;
    color: black;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
}

#Content {
    margin-left: 20px;
}

#testScaleType {
    margin-left: 20px;
}

#testIntervalDiv {
    margin-left: 20px;
}
#testIntervalDiv2 {
    margin-left: 20px;
}

#scaleDiv {
    margin-left: 20px;
}

#intervalDiv {
    margin-left: 20px;
}

#chordDiv {
    margin-left: 20px;
}

#keyNoteDiv {
    margin-left: 20px;
}

#navButtons {
    margin-left: 20px;
}

#myCanvas {
    margin-left: 20px;
}

/*---------------
#keyboard {
    margin-left: 40px;
}
----------------*/

.keyboard {
    height: 200px; width: 800px;
    margin-left: 40px;
}

#whichNoteDiv {
    margin-left: 20px;
}

#radioButtons {
    margin-left: 20px;
}

#noteListDiv {
    margin-left: 20px;
}

#checkboxSwitches {
    margin-left: 20px;
}

#tempoDiv {
    margin-left: 20px;
}

#evalIntervalMessage {
    position: absolute;
    top: 720px;
    left: 350px;
/*------------------
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
-----------------------*/
}
.correct {
    color: green;
}
.incorrect {
    color: red;
}
#evalScaleMessage {
    position: absolute;
    top: 700px;
    left: 580px;
}

@font-face {
    font-family: EmntlFIN;
    src: local(EmntlFIN), url('fonts/EmntlFIN.ttf') format('opentype');
}
@font-face {
    font-family: Bach;
    src: local(Bach), url('fonts/bach41.TTF') format('opentype');
}
@font-face {
    font-family: Bach;
    src: local(Bach), url('fonts/bach4d.TTF') format('opentype');
}

@font-face {
    font-family: MusiSync;
    src: local(MusiSync), url('https://www.guitarland.com/fonts/MusiSync.ttf') format('opentype');
}
@font-face {
    font-family: Maestro;
    src: local(Maestro), url('https://www.guitarland.com/fonts/Maestro.ttf') format('opentype');
}
@font-face {
    font-family: MaestroTimes;
    src: local(Maestro), url('https://www.guitarland.com/fonts/MaestroTimes.ttf') format('opentype');
}

/*------------------ Music Fonts ----------------------------

-------------- MusiSync -------------------------------

    font-family: "MusiSync";
    font-size: 36px;

&#63 &#71   &#66  &#88    &#98 &#113    &#244    &#245    &#246      &#247
bass treble sharp dblsharp flat up-quart up-quart up-quart down-quart down-quart

------------------- Bach -------------------------
&#35  &#36    &#42     &#64 &#177
sharp natural dblsharp flat upstem-quarter

    font-family: "Bach";
    font-size: 36px;

------------------- Bach stem=down -----------------
&#177 
down-quarter

    font-family: "Bach stem-down";
    font-size: 36px;

------------------------------------------------------------*/