/*
    dark emerald: #50C878;
    light emerald: #007F0F;
*/

* {
    margin: 0;
    padding: 0;
    font-size: 14pt;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #FFFFFF url('img/main-background.jpg') no-repeat left top;
    background-size: cover;
    color: #000000;
    width: 100vw;
    height: 100vh;
}

small {
    font-size: 10pt;
}

.center {
    margin: 0 auto;
    align-items: center;
    align-content: center;
    alignment: center;
    alignment-baseline: center;
    horiz-align: center;
    justify-content: center;
    text-align: center;
    text-align-all: center;
}

.no-click-i {
    /* Makes things like the labels on SVG <text> elements not block clicks from going through to the element underneath. */
    pointer-events: none;
}

.input-text {
    width: 60px;
}

/* The "Dark Side" button itself */
button.light-side {
    font-weight: bold;
    color: #000000;
    background-color: #FFFFAA;
    border: 3px solid rebeccapurple;
    margin: 0 auto;
    padding: 6px;
}
button.dark-side {
    font-weight: bold;
    color: #CCCCFF;
    background-color: #000088;
    border: 3px solid mediumpurple;
    margin: 0 auto;
    padding: 6px;
}

#power_button {
    font-weight: bold;
    color: #007F0F;
    background-color: #50C878;
    border: 3px solid mediumpurple;
    margin: 0 auto;
    padding: 6px;
    float: right;
    clear: right;
}



div.scale_chooser_table {
    display: table;
    width: 100%;
    background-color: transparent;
    /*border: 1px solid rebeccapurple;*/
    border-spacing: 5px;
    clear: both;
}
div.scale_chooser_row {
    display: table-row;
    width: 100%;
    height: 14%;
    clear: both;
    background-color: transparent;
}
div.scale_chooser_column {
    float: left;
    display: table-column;
    width: 25%;
    height: 5vh;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(80, 200, 120, 0.3) !important;
    border: 2px solid rebeccapurple;
    border-spacing: 5px;
}
div.scale_chooser_column button {
    text-align: center;
    vertical-align: middle;
    font-size: 14pt;
    font-weight: bold;
    color: #007F0F;
    background-color: #50C878;
    border: 1px solid rebeccapurple;
}



div#main_container {
    /* The div that has *everything* in it. */
    width: 100vw;
    height: 100vh;
}

div.container {
    /* Any div that only holds other divs, with no content of its own. */
    padding: 0;
    background-color: transparent;
    border: 0;
}

div.contents {
    /* Any div that has contents of its own to show; a "panel." */
    padding: 2px;
    border: 3px solid rebeccapurple;
    background-color: rgba(255, 255, 255, 0.55);
    text-align: left;
    vertical-align: middle;
}

div.contents span {
    /* The actual areas with text in them, as opposed to the entire panel. */
    background-color: rgba(102, 51, 153, 0.20);
    padding: 5px;
}

div.powered-down:not(.always-visible) {
    /* Any div while it's "powered-down." When the power switch is off. Why did I put in a power switch, it's so stupid... */
    background-color: transparent;
    color: transparent;
    border: 3px solid rgba(0, 0, 0, 0.25);
}

.powered-down:not(.always-visible) * {
    /* All elements inside a powered-down div; this makes them invisible. */
    background-color: transparent;
    display: none;
}

span.info-col-left {
    float: left;
    clear: left;
    text-align: right;
    width: 40%;
    line-height: 1.75;
}

span.info-col-right {
    float: left;
    width: 60%;
    text-align: left;
    font-weight: bold;
    line-height: 1.75;
}


/********** Top Row */
div#top_row {
    width: 100%;
    height: 10vh;
    clear: left;
}

/************** Message Window */
div#message_window_container {
    width: 100%;
    height: 100%;
    padding: 4px;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
}

div#message_window_container span {
    background-color: white;
    padding: 5px;
}


/********** Middle Row */
div#middle_row {
    width: 100%;
    height: 55vh;
    clear: left;
}

/************** Middle Row Left */
div#middle_row_left {
    width: 30%;
    height: 100%;
    float: left;
}

/****************** Circle Of Fifths */
div#circle_of_fifths_container {
    width: 100%;
    height: 100%;
    display: inline-block;
}

/************** Middle Row Center */
div#middle_row_center {
    width: 20%;
    height: 100%;
    float: left;
}

/****************** Tonic Info */
div#tonic_info_container {
    width: 100%;
    height: 50%;
}

/****************** Main Controls */
div#main_controls_container {
    width: 100%;
    height: 50%;
}

/************** Middle Row Right */
div#middle_row_right {
    width: 50%;
    height: 100%;
    float: left;
}

/****************** Scale Chooser */
div#scale_chooser_container {
    width: 100%;
    height: 82%;
}

/****************** Scale Designer */
div#scale_designer_container {
    width: 100%;
    height: 18%;
}
div#scale_designer_container svg {
    position: relative;
    top: 0;
    left: 0;
}



/********** Bottom Row */
div#bottom_row {
    width: 100%;
    height: 35vh;
    clear: left;
}

/************** Bottom Row Left */
div#bottom_row_left {
    width: 50%;
    height: 100%;
    float: left;
}

/****************** Notator */
div#notator_container {
    width: 100%;
    height: 50%;
}

/****************** The Piano */
div#piano_container {
    width: 100%;
    height: 50%;
}

/************** Bottom Row Right */
div#bottom_row_right {
    width: 50%;
    height: 100%;
    float: left;
    clear: right;
}

/****************** Suggestor */
div#suggestor_container {
    width: 100%;
    height: 100%;
}