/*
 *TBASE
*/

/* --------------- Fluidity --------------- */
/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }
/* Aspect ratios for media objects i.e canvas, iframe, video, svg etc. Defaults to 16x9 */
.aspect-ratio { height: 0; padding-top: 56.25%; position: relative; }
.aspect-ratio--object { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 100; }
/* Responsive Utilities */
img, canvas, iframe, video, audio, svg { max-width: 100%; }

@-ms-viewport{
  width: device-width;
}

/* Typography */
h1 {
    color: rgb(255, 255, 255);
    font-family: Arial,sans-serif;
    font-size: 2.5rem;
	margin: .2em auto;
	text-align: center;
	text-transform: uppercase;
}
h1 span {
    color: #000000;
}
h2 {
	color: rgb(255, 255, 255);
	margin-bottom: -.5em;	
	text-align: center;	
}
#controls h2 {
	text-align: center;
}
h3 {
    margin: 0.5em 1em;
    text-transform: uppercase;
}
a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: rgb(0, 0, 0);
	text-decoration:none;
}
#credits {
	clear: both;
	text-align: center;
	width: 100%;
}

/* Utility */
#controls ::selection { 
	background: transparent; 
	color: #fff; /* Safari */
}

/* Layout */
* {
    box-sizing:border-box;   /* Everything else */
}
html {
	overflow-y: scroll; /* force scrollbar to eliminate horizontal jump */
}
body {
	background-color: #000000;
	background-image: url('images/background.jpg');
	color: #000000;
	/* Helvetica/Arial-based sans serif stack */
	font-family: Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
}
#page-wrap {
	margin: 2em auto 0;
	max-width: 980px;
}
.info {
	text-align: center;
}

/* Mixing Board */
.panel {
	background-color: rgb(0, 0, 0);
	border-radius: 0.5em;
    color: #ffffff;
	margin: 2em 0;
    padding: 1em;
}

.panel strong {
	color: #ff0000;
}
.strip {
	background-image: url("images/gray.png");
	border: 1px solid #ffffff;
    border-radius: .5em;
	
    color: rgb(255, 255, 255);
	display: inline-block;
	margin: 0 auto .5em;
	padding: 0;
	width: 100%;
}
.dark {
	background-color: #000000;
	background-image: none;
}
.stripSection {
	float: left;
	height: 100%;
	padding: .5em 0 0;
}
.last {
	border-right: none;
}

.stripTransport {
    color: rgb(255, 255, 255);
	margin: 0 auto .5em;
	padding: .5em;
}

/* Control Inputs 
input[type="range"] {

}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #444;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	border: 2px solid #6ACC28;
	vertical-align: middle;	
}
*/

/* Labels */
.label {
	float: left;	
	margin-bottom: .25em;
	margin-top: 0;	
}
.label span {
    display: block;
	margin-bottom: .125em;
    text-align: center;
    /* vertical-align: top; */
    
}
.label span.checkbox-label {
	min-width: 3.875em;
}

/* -------------- Slider --------------- */
.sliderContainer {
	margin-top: .5em;
	margin-right: .25em;
	margin-bottom: 0em;
	margin-left: 5em;
}

/* Slider Thumb */
input[type=range].slider {
  appearance: none;
  height: 100%;
  width: 100%;
  margin: 10px 0;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
  background: #ff4e4e;
  border-radius: 0px;
  border: 0px solid #ff3b3b;
}
input[type=range].slider::-webkit-slider-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ddddbb;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.75px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #2c2c2c;
}
input[type=range].slider::-moz-range-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
  background: #222222;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range].slider::-moz-range-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ddddbb;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slider::-ms-fill-lower {
  background: #181818;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
}
input[type=range].slider::-ms-fill-upper {
  background: #222222;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
}
input[type=range].slider::-ms-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ffff0a;
  cursor: pointer;
  height: 28.5px;
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #222222;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #2c2c2c;
}

/* Slider Track */
input[type=range].slider {
 appearance: none;
  width: 100%;
  margin: 5.75px 0;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
  background: #222222;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range].slider::-webkit-slider-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ddddbb;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.75px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #2c2c2c;
}
input[type=range].slider::-moz-range-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
  background: #222222;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range].slider::-moz-range-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ddddbb;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slider::-ms-fill-lower {
  background: #181818;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
}
input[type=range].slider::-ms-fill-upper {
  background: #222222;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
}
input[type=range].slider::-ms-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ddddbb;
  cursor: pointer;
  height: 28.5px;
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #222222;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #2c2c2c;
}

/* Slider General */
input[type=range].slider {
 appearance: none;
  width: 100%;
  margin: 10px 0;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  
  background: #ffffff;
  border-radius: 0px;
  
}
input[type=range].slider::-webkit-slider-thumb {
  
 
  height: 10px;
  width: 10px;
  border-radius: 0px;
  background: #000000;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 0px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range].slider::-moz-range-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
  background: #222222;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range].slider::-moz-range-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #444444;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ddddbb;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  width: 100%;
  height: 28.5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slider::-ms-fill-lower {
  background: #181818;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
}
input[type=range].slider::-ms-fill-upper {
  background: #222222;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0.2px 0.2px 1px #000000, 0px 0px 0.2px #0d0d0d;
}
input[type=range].slider::-ms-thumb {
  box-shadow: 0.7px 0.7px 2.1px #111111, 0px 0px 0.7px #1e1e1e;
  border: 0px solid #ffffff;
  height: 40px;
  width: 18px;
  border-radius: 0px;
  background: #ffff26;
  cursor: pointer;
  height: 28.5px;
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #222222;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #ffffff;
}


/* Checkbox */
input[type="checkbox"] {
	display:none;
	margin: .25em;
}
input[type="checkbox"] + label span {
	background: url('images/check.png') -39px top no-repeat;
	cursor: pointer;
	height: 1.1875em;
	margin: 1em auto 1.375em;
	vertical-align: middle;
	width: 1.1875em;
}
input[type="checkbox"]:checked + label span {
	background: url('images/check.png') -58px top no-repeat;
}

/* Source and Trasport Section */
input[type="file"] {
	-webkit-box-align: baseline;
	background-color: #000;	
	border: 1px solid #ffffff;
	border-radius: .3em;
	color: inherit;
	text-align: start;
	max-width: 100%;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
	-webkit-box-align: center;
	text-align: center;
	cursor: default;
	padding: .5625em 1em .625em;
	font-size: 1em;
}

/* Knobs */
.knobContainer {
	height: 5em;
	text-align: center;
	width: 5em;
	float: left;
}

/* Miscellaneous */
.small-text {
	font-size:.8em;
}
.active {
    color: #ffffff;
}
.biege {
    color: rgb(255, 255, 255);
}
.green {
    color: #ffffff;
}
.yellow {
    color: #ffffff;
}
.orangeLight {
    color: #ffffff;
}
.orangeDark {
    color: #ffffff;
}
.red {
    color: rgb(255, 255, 255);
}
.blue {
    color: #ffffff;
}
.pink {
    color: #ffffff;
}
.purple {
    color: #ffffff;
}

/* --------------- mobile css --------------- 
============================================================================*/
@media (min-width: 24em) {
/* tablet css */	

}
@media (min-width: 48em) {
/* tablet css */
	input[type="file"] {
		-webkit-box-align: baseline;
		background-color: #000000;	
		border: 1px solid #262626;
		border-radius: .5em;
		color: inherit;
		text-align: start;
		max-width: 24%;
	}
}
@media (min-width: 80em) {
/* desktop css */

}
@media (min-width: 100em) {
/* widescreen desktop css */

}