/* + Reset Webkit to look more like Chrome {{{ */

button {
    border: 2px outset rgb(118, 118, 118);
    font-size: 0.835em;
    padding: 1px 6px;
}

input, textarea {
    border: 2px inset rgb(118, 118, 118);
    font-size: 0.835em;
    padding: 3px;
}

/* + }}} */


* {
    font-family: sans-serif;
    //font-family: Defender;
}


/*
input::after {
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
  width: 20px;
  height: 20px;
    display: inline-block;
}
*/

html {
    background-color: black;
    color: white;
}

body {
    margin: 8px;
    padding: 0;
}

canvas {
    image-rendering: pixelated;
}


input
{
    border: 2px rgb(118, 118, 118) inset;
    background-color: #555;
    color: #ffffff;
    padding: 3px;
    /*
    border: 1px solid #333;
    text-shadow: 1px 1px 2px #333;
    */
}

textarea {
    border: 2px rgb(118, 118, 118) inset;
    background-color: #555;
    color: #ffffff;
    padding: 3px;
}

button {
    background-color: #555;
    color: #ffffff;
}

.aboutSection {
    display: flex;
    align-items: center;
    padding: 8px;
    float: right;

    font-family: Defender;
    letter-spacing: -1px;
    color: #0ff;
}
.aboutSectionHeadingInvert {
    font-family: Defender;
    letter-spacing: -1px;
    color: #fff;
    padding-right: 8px;
}
/*
.aboutSectionHeadingInvert {
    font-family: Defender;
    letter-spacing: -1px;
    background-color: #0ff;
    color: #000;
    padding-right: 4px;
    padding: 9px;
}
*/
.aboutSectionHeading {
    font-family: Defender;
    letter-spacing: -1px;
    color: #fff;

    /* background-color: yellow; */
    border: 1px solid #fff;
    padding: 8px;

    position: relative;
    padding-right: 4px;

    text-decoration: none;
}

/* + Settings {{{ */

.settingsSection {
    display: inline-flex;
    align-items: flex-start;
    padding: 8px;
}
.settingsSectionHeading {
    font-family: Defender;
    letter-spacing: -1px;

    background-color: green;
    color: black;
    padding: 8px;
}

/* + + Open/close {{{ */

.settingsSectionHeading {
    cursor: pointer;
    user-select: none;
}
.settingsSectionHeading {
    position: relative;
}

.settingsSection .sectionFoldIcon_outward {
    display: none;
}
.settingsSection .sectionFoldIcon_inward {
    display: inline;
}
.settingsSection.closed .sectionFoldIcon_outward {
    display: inline;
}
.settingsSection.closed .sectionFoldIcon_inward {
    display: none;
}

.settingsSection.closed .settingsSectionDetail {
    display: none;
}

/* + + }}} */

.settingsSectionDetail {
    border: 4px solid green;
    padding: 8px;
}

/* + }}} */

.sectionContainer > * {
    /*outline: 1px solid #0ff;*/
}

/* + Waveform {{{ */

.waveformSection {
    box-sizing: border-box;
    padding: 8px;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.waveformSectionHeading {
    font-family: Defender;
    letter-spacing: -1px;
    background-color: blue;
    color: black;
    padding: 8px;
}

/* Detail */
.waveformSectionDetail {
    box-sizing: border-box;
    border: 4px solid blue;
    width: 100%;
}
.waveformCanvasMargin {
    margin: 8px;
    overflow: hidden;
}
.waveformSectionDetail canvas {
    display: block;
}

/* + + Open/close {{{ */

.waveformSectionHeading {
    cursor: pointer;
    user-select: none;
}
.waveformSectionHeading {
    position: relative;
}

.waveformSection .sectionFoldIcon_outward {
    display: none;
}
.waveformSection .sectionFoldIcon_inward {
    display: inline;
}
.waveformSection.closed .sectionFoldIcon_outward {
    display: inline;
}
.waveformSection.closed .sectionFoldIcon_inward {
    display: none;
}

.waveformSection.closed .waveformSectionDetail {
    display: none;
}

/* + + }}} */

/* + }}} */

/* + Spectrum {{{ */

.spectrumSection {
    box-sizing: border-box;
    padding: 8px;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
}
.spectrumSectionHeading {
    font-family: Defender;
    letter-spacing: -1px;
    background-color: red;
    color: black;
    padding: 8px;
}

.spectrumSection {
    position: relative;
}
.spectrumCycleButton {
    position: absolute;
    /*
    height: 25px;
    left: 178px;
    */
    right: 8px;
    background-color: red;
    color: black;
    height: 34px;
    border: none;
    font-weight: bold;
    font-size: 25px;
    padding: 0 7px;
}

.spectrumSectionDetail {
    border: 4px solid blue;
    padding: 8px;
}
.spectrumSectionDetail canvas {
    display: block;
}

/* + + Open/close {{{ */

.spectrumSectionHeading {
    cursor: pointer;
    user-select: none;
}
.spectrumSectionHeading {
    position: relative;
}

.spectrumSection .sectionFoldIcon_outward {
    display: none;
}
.spectrumSection .sectionFoldIcon_inward {
    display: inline;
}
.spectrumSection.closed .sectionFoldIcon_outward {
    display: inline;
}
.spectrumSection.closed .sectionFoldIcon_inward {
    display: none;
}

.spectrumSection.closed .spectrumSectionDetail {
    display: none;
}

.spectrumSection.closed .spectrumCycleButton {
    display: none;
}

/* + + }}} */

/* + }}} */

.playSection {
    box-sizing: border-box;
    align-self: flex-start;
    flex-grow: 1;

    display: inline-flex;
    flex-direction: row;
    flex-shrink: 0;
}
.playButton, .stopButton, .recordButton {
    margin: 0px 7px;
    padding: 10px;
    display: block;
    font-size: 26px;
    width: 74px;
    white-space: nowrap;
}


.soundSection {
    padding: 8px;
}

.soundSectionHeaderBar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.soundSectionHeading {
    font-family: Defender;
    letter-spacing: -1px;
    background-color: #ccc;
    color: #000;
    padding: 8px;
    display: inline;

    align-self: stretch;
    flex-grow: 0;
}

.soundSection {
    /*line-height: 19px;*/
}
.soundSectionHeading {
    position: relative;
    /*top: -14px;*/
    margin-right: 8px;
}

.tabBar {
    display: inline-block;
    /*border-bottom: 4px solid #ccc;*/
    text-align: center;

    flex-grow: 0;
}
.tabBar:after {
    /* clearfix */
    /*
    content: "";
    display: table;
    clear: both;
    */
}

.tab {
    display: inline-block;
    border: none;

    /* unselected */
    box-shadow: 0 4px 0 #333 inset, 4px 0 0 #333 inset, -4px 0 0 #333 inset;
    padding: 14px 16px 10px 16px;
    margin: 4px 4px 4px 4px;
    background-color: #000;
}
.tab.selected {
    box-shadow: 0 4px 0 #ccc inset, 4px 0 0 #ccc inset, -4px 0 0 #ccc inset;

    padding: 14px 16px 14px 16px;
    margin: 4px 4px 0px 4px;
    background-color: #333;
}

.soundSectionDetail {
    border: 4px solid #ccc;

    background-color: #333;
    padding: 8px;

    /* Pull up to be overlapped by tabs */
    margin-top: -4px;
}

/*
.tab:hover {
    background-color: rgb(212, 207, 199);
}
.tab:hover:before {
    border-color: transparent transparent rgb(212, 207, 199) transparent;
}
.tab:hover:after {
    border-color: transparent transparent transparent rgb(212, 207, 199);
}
.tab {
    color: #000;
    background-color: rgb(239, 239, 239);
    border: none; 
    border-radius: 2px 2px 0 0;
    padding: 10px 20px;
    margin: 0 20px;
    width: auto;
    position: relative;
    text-decoration: none;
    display:inline-block;
}

.tab:before, .tab:after {
    content:'';
    position: absolute;
    width: 0;
    height: 0;
    top: 0px;
    border-style: solid;
}

.tab:before {
    border-width: 0 0 35px 20px;
    border-color: transparent transparent rgb(239, 239, 239) transparent;
    left: -20px;
}

.tab:after {
    border-width: 35px 0 0 20px;
    border-color: transparent transparent transparent rgb(239, 239, 239);
    right: -20px;
}
*/


.handlerDetail {
    display: none;
}
.handlerDetail.visible {
    display: flex;
}

/* + Presets {{{ */

.presetList {
    padding: 16px;
    flex-shrink: 0;
}

.presetList button {
    margin-bottom: 2px;
}

.presetsGroupHeading {
    padding-bottom: 10px;
    color: #f0f;

    //text-align: center;
    font-family: Defender;
    letter-spacing: -1px;
}

/* + }}} */

/* + Parameters {{{ */

.parameters {
    padding: 16px;
}

.parameterGroup {
    padding: 16px;
    display: inline-block;
    vertical-align: top;
    margin-right: 16px;
    margin-bottom: 16px;
    background-color: #444;
}

.parameterGroup_arrowToNext {
    width: 17px;
    margin-top: 21px;
    margin-right: -1px;
    fill: #444;
    stroke: none;
}

.parametersGroupHeading {
    padding-bottom: 10px;
    color: #ff0;

    //text-align: center;
    font-family: Defender;
    letter-spacing: -1px;
}
.parameterGroupHeading {
    margin-bottom: 10px;
    background-color: #333;

    text-align: center;
    padding: 4px 12px;
    letter-spacing: 1px;
}

.parameterControl {
    margin: 3px 0;
}

.parameterLabel:after {
    content: ": "
}
.parameterLabel {
}

/* + }}} */


.keystroke {
    display: block;
    border: 1px solid #bbb;
    border-radius: 3px;
    background-color: #444;
    color: #ccc;
    padding: 3px;
    font-size: 80%;
    box-shadow: 2px 2px 2px #222;
    vertical-align: top;
    margin: 4px auto 0 auto;
    font-size: 10.6px;
}


/* + Runtime {{{ */

.runtimeSection {
    box-sizing: border-box;
    padding: 8px;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
}
.runtimeSectionHeading {
    font-family: Defender;
    letter-spacing: -1px;
    background-color: orange;
    color: black;
    padding: 8px;
}

.runtimeSection {
    position: relative;
}

.runtimeSectionDetail {
    border: 4px solid orange;
    padding: 8px;
    font-family: monospace;
    overflow-x: auto;
    white-space: nowrap;

    min-width: 100px;
    min-height: 16px;
}

.runtimeKey {
    font-family: monospace;
    color: #f84;
}
.runtimeValue {
    font-family: monospace;
    //color: #48f;
    color: #8cf;
    font-weight: bold;
}

/* + + Open/close {{{ */

.runtimeSectionHeading {
    cursor: pointer;
    user-select: none;
}
.runtimeSectionHeading {
    position: relative;
}

.runtimeSection .sectionFoldIcon_outward {
    display: none;
}
.runtimeSection .sectionFoldIcon_inward {
    display: inline;
}
.runtimeSection.closed .sectionFoldIcon_outward {
    display: inline;
}
.runtimeSection.closed .sectionFoldIcon_inward {
    display: none;
}

.runtimeSection.closed .runtimeSectionDetail {
    display: none;
}

/* + + }}} */

/* + }}} */