body {
    font-family: 'Ubuntu', sans-serif;
}

#pianoKeys {
    display: block;
    position: absolute;
    left: 1%;
    width: 98%;
    height: 100px;
    bottom: 1%;
}

#controls {
    display: block;
    position: absolute;
    border: solid 1px black;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 110px;
    padding: 6px;
    white-space: nowrap;
    overflow: scroll;
}

#helpBlock {
    height: 100%;
    border: solid 1px black;
    vertical-align: top;
    overflow: scroll;
}

#helpBlock .textArea {
    padding: 18px;
    font-size: 12px;
    white-space: normal;
    line-height: 16px;
    position: relative;
}

#helpBlock .textArea img {
    width: 80%;
    margin-left: 10%;
}

#helpBlock .shareButton {
    position: absolute;
    right: 11px;
    top: 30px;
    border: solid 1px black;
    height: 23px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    padding-top: 1px;
    font-family: 'Ubuntu', sans-serif;
    cursor: pointer;
}

.controlBlock {
    float: left;
    height: 100%;
    width: 150px;
    margin-right: 5px;
    border: solid 1px black;
    vertical-align: top;
    overflow: scroll;
}

.blockTitle {
    background-color: darkgray;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    padding: 3;
}

.controlList {
    display: block;
    position: relative;
    padding: 4px;
    margin: 0;
    background-color: lightgrey;
    border-bottom: solid 1px white;
    overflow-y: scroll;
}

.controlTitle {
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
}

.addWidget {
    color: white;
    text-align: center;
    cursor: pointer;
    height: 24px;
}

.addWidgetMenu {
    background-color: lightgrey;
    height: 22px;
    color: black;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    width: 126px;
}

.controlItem {
    display: block;
    list-style: none;
    border-bottom: solid 1px white;
    position: relative;
    margin-bottom: 3px
}

/*******************/
/* CONTROL HEIGHTS */
/*******************/

.volume,
.gate,
.delay,
.feedbackCombFilter {
    height: 70px;
}

.noiseGenerator,
.audioInput {
    height: 100px;
}

.pulseOscillator,
.pwmOscillator,
.lowpassCombFilter {
    height: 124px;
}

.sampler {
    height: 181px;
}

.oscillator,
.filter {
    height: 151px;
}

.compressor {
    height: 176px;
}

.amOscillator,
.fmOscillator {
    height: 229px;
}

.amplitudeEnvelope {
    height: 306px;
}

.lfo {
    height: 178px;
}

/*********/
/* MENUS */
/*********/

.waveformMenu,
.modulationWaveformMenu,
.colorMenu,
.audioInputMenu,
.filterTypeMenu,
.targetMenu {
    position: absolute;
    display: block;
    background-color: lightgray;
    height: 22px;
    color: black;
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}

.waveformMenu,
.colorMenu,
.audioInputMenu,
.filterTypeMenu {
    width: 137px;
    top: 19px;
    left: 2px;
}

.modulationWaveformMenu {
    width: 106px;
    left: 33px;
}

.lfo .targetMenu {
    top: 151px;
    width: 137px;
    left: 2px;
}

.menuCaption {
    font-size: 11px;
    text-transform: uppercase;
    position: absolute;
    top: 5px;
    left: 2px;
}

.modulationWaveformControl {
    top: 151px;
    position: absolute;
}

.deleteButton {
    background-color: lightgray;
    border: solid 1px white;
    color: white;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 15px;
    padding: 0px 4px;
    font-size: 8px;
    line-height: 8px;
}

.deleteButton:hover {
    border: solid 1px red;
    color: red;
}

.editFieldControl {
    position: absolute;
    width: 35%;
    text-align: center;
    border: solid 1px black;
    height: 30px;
    padding: 5%;
}

.oscillator .partialsControl,
.noiseGenerator .rateControl,
.audioInput .volumeControl,
.sampler .volumeControl,
.filter .frequencyControl,
.lfo .frequencyControl {
    top: 48px;
}

.oscillator .volumeControl,
.noiseGenerator .volumeControl,
.sampler .keyCenterControl,
.filter .rolloffControl,
.lfo .phaseControl {
    top: 48px;
    left: 73px;
}

.oscillator .phaseControl,
.filter .gainControl,
.lfo .minControl{
    top: 100px;
}

.oscillator .detuneControl,
.filter .qControl,
.lfo .maxControl {
    top: 100px;
    left: 73px;
}

.pulseOscillator .widthControl,
.pwmOscillator .modulationFrequencyControl,
.volume .volumeControl,
.delay .delayTimeControl,
.compressor .thresholdControl,
.gate .thresholdControl,
.feedbackCombFilter .delayTimeControl,
.lowpassCombFilter .delayTimeControl {
    top: 20px;
}

.pulseOscillator .volumeControl,
.pwmOscillator .volumeControl,
.compressor .ratioControl,
.gate .smoothingControl,
.feedbackCombFilter .resonanceControl,
.lowpassCombFilter .resonanceControl {
    top: 20px;
    left: 73px;
}

.pulseOscillator .phaseControl,
.pwmOscillator .phaseControl,
.compressor .attackControl,
.lowpassCombFilter .dampeningControl {
    top: 72px;
}

.pulseOscillator .detuneControl,
.pwmOscillator .detuneControl,
.compressor .releaseControl {
    top: 72px;
    left: 73px;
}

.amOscillator .partialsControl,
.fmOscillator .partialsControl {
    top: 48px;
}

.amOscillator .volumeControl,
.fmOscillator .volumeControl  {
    top: 48px;
    left: 73px;
}

.amOscillator .phaseControl,
.fmOscillator .phaseControl {
    top: 100px;
}

.amOscillator .detuneControl,
.fmOscillator .detuneControl {
    top: 100px;
    left: 73px;
}

.fmOscillator .harmonicityControl  {
    top: 178px;
}

.fmOscillator .modulationIndexControl  {
    top: 178px;
    left: 73px;
}

.amOscillator .harmonicityControl {
    top: 178px;
}

.compressor .kneeControl {
    top: 124px;
}

.audioInput .volumeControl,
.volume .volumeControl,
.delay .delayTimeControl,
.amOscillator .harmonicityControl,
.compressor .kneeControl,
.lowpassCombFilter .dampeningControl {
    width: 86%;
}

.amOscillator .harmonicityControl .editFieldField,
.audioInput .volumeControl .editFieldField,
.volume .volumeControl .editFieldField,
.delay .delayTimeControl .editFieldField,
.compressor .kneeControl .editFieldField,
.amplitudeEnvelope .sustainControl .editFieldField,
.lowpassCombFilter .dampeningControl .editFieldField {
    width: 89%;
}

.fileChooserButton {
    border: solid 1px black;
    position: absolute;
    top: 19px;
    width: 97%;
    height: 17px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 5px;
    cursor: pointer;
}

.fileChooserButton:hover {
    background-color: darkgray;
}

.fileChooserInput {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.loopToggle {
    border: solid 1px black;
    position: absolute;
    top: 100px;
    width: 97%;
    height: 17px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 5px;
}

.loopToggle[selected] {
    background-color: #666;
    color: white;
}
.sampler .loopStartControl {
    top: 130px;
}
.sampler .loopEndControl {
    left: 73px;
    top: 130px;
}
.attackControl {
    top: 20px;
}

.decayControl {
    top: 98px
}

.sustainControl {
    top: 176px;
    width: 88%;
}

.releaseControl {
    top: 228px;
}

.editFieldCaption {
    width: 100%;
    font-size: 11px;
    text-transform: uppercase;
}

.editFieldField {
    position: absolute;
    display: block;
    width: 80%;
    text-align: center;
    border: solid 1px black;
    font-family: 'Ubuntu', sans-serif;
}

.editFieldAndMenuControl {
    position: absolute;
    width: 88%;
    text-align: center;
    border: solid 1px black;
    height: 56px;
    padding: 5%;
}

.editFieldAndMenuCaption {
    width: 100%;
    font-size: 11px;
    text-transform: uppercase;
}

.editFieldAndMenuField {
    position: absolute;
    display: block;
    width: 89%;
    text-align: center;
    border: solid 1px black;
    font-family: 'Ubuntu', sans-serif;
    top: 20px;
}

.editFieldAndMenuMenu {
    position: absolute;
    display: block;
    top: 43px;
    left: 8px;
    background-color: lightgray;
    height: 20px;
    color: black;
    font-family: 'Ubuntu', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    width: 123px;
}