.vid-visual-cortex {padding:0 20px 20px;}

.controlBoxContainer {width:100%;}
.controlBox {horiz-align:center;}
.control-header {font-size:24px; padding-top:0.4em; padding-bottom:0.3em; margin:0; vertical-align:auto;}
.tuningExperiment {display:flex; flex-flow:row wrap;}

.oscilloscopeContainer {width:90%; horiz-align:center; margin:0 auto;}


/* ---------- STIMULUS ---------- */
#stimulusMonitorContainer {width:70%; height:0; padding-bottom:70%; border:5px solid black; background-color:#848484; margin:0 15%; vertical-align:center;}
#stimulusMonitor {width:100%; height:100%; position:absolute; padding:0;}
#controlBox {width:280px; height:200px; background-color:#DFE0DD; border-radius:8px; border:1px solid; margin:20px auto; vertical-align:top;}
#tuningCurveGraph {width:96%; height:auto; margin:10px 4% 0 0;}

.svgContainer {position:relative; width:100%; align-self:center;}
.svgContainer:before {content:""; display:block; padding-top:calc(70% + 10px);}
.svgContainer > div {position:absolute; top:0; left:0; bottom:0; right:0;}


/* ---------- KNOBS ---------- */
canvas {margin-top:32px; margin-left:8px;}
input, select {text-align:center;}
.download-input {min-width:50px; width:80px !important;}

#directionContainer {width:144px; height:180px; margin:0 10px; text-align:center; display:inline-block; vertical-align:top;}
#directionContainer > h3 {margin:0 0 5px 0;}
#contrastContainer {text-align:center; display:inline-block; vertical-align:top;}
#contrastContainer > h3{margin:0 0 5px 0;}

#knobDiv {background-image:url("../img/visual/directionKnob.png"); width:144px; height:144px; padding:0;}
.knob {width:80px; height:90px; margin:0 auto;}

#startStim {margin-top:20px;}
#clearData {margin-top:40px;}
#downloadData {margin-top:10px;}

.form-init-neuron {padding:10px 20px; margin:auto;}
#nameSeed {width:200px; margin-bottom:10px;}
#submitSeed {width:140px; margin-bottom:10px;}
#initMessage {font-size:1.3em; color:red; margin-left:15px; margin-right:15px; display:none;}
#initWarn {font-size:1.2em; text-align:center; font-weight:bold; color:#FF4500;}


/* ---------- @media ---------- */
@media only screen and (max-width:600px) {
    .form-init-neuron {horiz-align:center; text-align:center;}
}

@media only screen and (min-width:768px) {
    .vid-visual-cortex {width:40%; min-width:320px; float:right; padding:5px 20px;}

    .svgContainer {width:50%;}
    .controlBoxContainer {width:50%; align-self:center;}
    .oscilloscopeContainer {width:47%; align-self:center;}
}