.hidden {
    display: none;
}

table {
  border-collapse: collapse;
}

body {
    margin: 0;
    padding: 0;
    background-color: #ddf;
}

#header {
    width: 100%;
    height: 10.5ex;
    background-color: #cce;
    margin: 0;
    padding: 0;
}

#inner_header {
    padding-top: 1em;
    margin-left: 2em;
}

h1 {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, "Trebuchet MS", Georgia;
}


#global {
  margin-left: 2em;
  margin-top: 2em;
  max-width: 40em;
}


#controls {
    min-height: 4em;
    display: inline-block;
    background-color: #eef;
    border: 1px solid black;
}

#controls_inner {
    padding: 0.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    font-family: "Trebuchet MS", Verdana, Georgia, Arial;
}


#scale_notes {
    height: 4em;
    float: right;
    background-color: white;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid black;
}

#scale_notes td, #scale_notes th {
    width: 2em;
    padding: 0.15em;
    margin: 0;
    border: 1px solid grey;
}


.separator {
    clear: both;
}


.harmonica, .label, #notes {
    font-family: "lucida console", "DejaVu Sans Mono", "Andale Mono", "courier new", courier, monospace;
}

#harmonica_notes, #label_notes {
    margin-top: 1em;
}

.harmonica, .label {
    border-style: none;
    text-align: center;
    font-size: 125%;
}

.harmonica td, .label td {
    width: 2em;
    height: 1.3em;
    padding: 0.15em;
    margin: 0;
}

.harmonica .inner {
    background-color: white;
}

.harmonica .inner td {
    border: 1px solid grey;
}

.harmonica .inner, .label .inner {
    border: 2px solid black;
}

.label .inner {
    border-color: transparent;
}

.harmonica .holes {
    color: white;
    background-color: #444;
}

.harmonica .unselected {
    color: #aaa;
}

.label {
    margin-right: 0.75em;
}

.blow_bend {
    vertical-align: top;
}

.draw_bend {
    vertical-align: bottom;
}

.blow_bend div, .draw_bend div {
    font-size: 62%;
    font-weight: lighter;
    font-style: italic;
    color: #888;
}

.harmonica, .label {
    float: right;
}


.tonic {
    border: 1px solid black;
    padding: 2px;
}

.label .tonic {
    border-color: transparent;
}


.degree_1          {background-color: #9f9;}
.degree_2          {background-color: #dff;}
.degree_3          {background-color: #ccf;}
.degree_4          {background-color: #ffd;}
.degree_5.mod_-1   {background-color: #bdf;}
.degree_5          {background-color: #9cf;}
.degree_6          {background-color: #fde;}
.degree_7          {background-color: #fca;}
.unselected .inner {background-color: #fff;}


@media all and (max-width: 50em) {
    .label {
        display: none;
    }

    #scale_notes {
        margin-top: 1.5em;
    }

    #scale_notes, .harmonica {
        float: none;
    }

    .harmonica, .label {
        margin-top: 0;
    }
}