* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Arial', sans-serif;
	font-size: 8px;
	color: rgb(50,90,140);
}

.container {
	/*-webkit-filter: blur(2px);*/
	width: 400px;
	padding: 0;
	margin: 0;
	background: linear-gradient(to bottom, rgb(239,239,239) 0%,rgb(229,229,229) 100%);
}
.button {
	border-radius: 0;
	border: 1px solid rgb(187,187,187);
	height: 20px;
	width: 50px;
	display: inline-block;
	/*background: linear-gradient(to bottom, rgb(249,249,249) 0%,rgb(229,229,229) 100%);*/
	background: linear-gradient(to bottom, rgb(239,239,239) 70%,rgb(219,219,219) 100%);
	color: rgb(50,90,140);
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	text-decoration: none;
	position: relative;
}
.button.reset {
	position: absolute;
	left: 10px;
	top: 10px
}
.button.presets select {
	/*dont use display:none -> it will not work*/
	display: hidden;
	height: 100%;
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	display: inline;
	font-size: 10px;
	left: 0;
	top:0;
	position: absolute;
	background:transparent;
	color: transparent;
	-webkit-appearance: none;
}


.button.indicator {
	color: rgb(120,120,120);
	background: linear-gradient(to bottom, rgb(239,239,239) 70%,rgb(219,219,219) 100%);
}
/* label changes checkbox value, so we can hide the input
		and style the label, sibling selector to change on checked */
.invis {
	position: absolute;
	width: 1; height: 1;
	opacity: 0;
}
input[type=checkbox]:checked ~ .button.indicator{
	color: rgb(50,90,140);
	background: linear-gradient(to bottom, rgb(189,189,189) 0%,rgb(239,239,239) 40%);
	/*text-shadow:0px 0px 1px rgb(170,170,170);*/
}
.button:hover {
	color: rgb(16,49,91);
	background-color: rgb(239,239,239);
	cursor: hand;
}
.button:focus {
	outline: none;
}
/* this extra selector needed to allow :active styling
 		on checked label due to too much specificity */
input[type=checkbox]:checked ~ .button:active,
.button:active {
	background: linear-gradient(to bottom, rgb(199,199,199) 0%,rgb(249,249,249) 90%);
	border: 1px solid rgb(170,170,170);
	color: rgb(50,90,140);
}
.controls-main {
	position: relative;
	height: 44px;
	padding: 0;
	/*background:linear-gradient(to bottom, rgb(249,249,249) 0%,rgb(239,239,239) 100%);*/
	/*border-bottom:1px solid rgb(229,229,229);*/
}
.chart {
	position: absolute;
	right: 12px;
}
.controls-sliders {
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	/*background:linear-gradient(to bottom, rgb(249,249,249) 0%,rgb(239,239,239) 100%);*/
}
.controls-sliders .slider {
	width: 30px;
	padding: 0;
	margin: 0;
	display: inline-block;
	text-align: center;
	background-repeat: no-repeat;
	background-position: top center;
}
.controls-sliders .slider input {
	-webkit-appearance: slider-vertical;
	cursor: hand;
	height: 120px;
	width: 30px;
}
.controls-sliders .slider label {
	width: 100%;
	height: 100%;
	display: block;
	line-height: 16px;
	font-size: 10px;
}
.controls-sliders .slider.master {
	width: 50px;
}
.controls-sliders .slider.empty {
	width: 4px;
}
.controls-sliders .sliders {
}
.controls-options {
	/*border-top:1px solid rgb(229,229,229);
	 background:linear-gradient(to bottom, rgb(239,239,239) 0%,rgb(229,229,229) 100%);*/
	position: relative;
	height: 40px;
}
.controls-options .left {
	position: absolute;
	display: inline-block;
	left: 10px;
	top: 10px
}
.controls-options .right {
	position: absolute;
	display: inline-block;
	right: 10px;
	top: 10px
}
.controls-options .preset-name {
	font-size: 10px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	padding-right: 5px;
	text-align: right;
}
