@charset "utf-8";

.mainscene{
	height: 440px;
	text-align: center;
}

.colorCanvas{
	position: absolute;
	top: 18px; left: 2px;
}

.container{
	margin-left: 24px; 
	margin-right: 24px;

	position: relative;
	display: inline-block;
	margin-top: 10px;
}

.controlText {
	margin-bottom: 5px;
}

.controlPanelBack{
	display: inline-block;
	padding: 8px;
	text-align: center;
	vertical-align: middle;
	height: 50px;
	margin: 5px;
}

.dropDown{
	width: 190px; height: 27px;
}

.hide{
	visibility: hidden;
	position: absolute;
}

.line{
	float: left;
	margin-top: 9px;
	margin-right: 2px;
	margin-left: 5px;
	width: 10px; height: 2px;
}

.sldr {
	display: inline-block;
	position: relative;
	width: 190px;
}

.specimenDisplay {
	/*box-shadow: 3px 3px 5px #818181;*/
	filter:         drop-shadow(5px 5px 3px #818181);
	-webkit-filter: drop-shadow(5px 5px 3px #818181);
	-moz-filter:    drop-shadow(5px 5px 3px #818181);
	-ms-filter:     drop-shadow(5px 5px 3px #818181);
	-o-filter:      drop-shadow(5px 5px 3px #818181);
	background: white;
	margin-top: 6px;
}

.symb{
	position: relative;
	display: inline-block;
}

.symb > *{
	position: relative;
	display: inline-block;
}

#arrowContainer{
	position: absolute;
	top: 17px; left: -17px;
	width: 210px; height: 20px;
}

#barCanvas{
	position: absolute;
	top: 18px; left: 0px;
}

#key{
	position: absolute;
	top: 262px; right: 21px;
}

#leftArrow{
	position: absolute;
	top: -1px; left: 0px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;    
	border-left: 15px solid black;
	filter:         drop-shadow(2px 2px 2px gray);
	-webkit-filter: drop-shadow(2px 2px 2px gray);
	-moz-filter:    drop-shadow(2px 2px 2px gray);
	-ms-filter:     drop-shadow(2px 2px 2px gray);
	-o-filter:      drop-shadow(2px 2px 2px gray);
}

#l1{
	background: red;
}

#l2{
	background: blue;
}

#l3{
	background: black;
}

#profileContainer{
	top: -7px;
}

#rightArrow{
	position: absolute;
	top: -1px; left: 195px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;    
	border-right: 15px solid black;
	filter:         drop-shadow(2px 2px 2px gray);
	-webkit-filter: drop-shadow(2px 2px 2px gray);
	-moz-filter:    drop-shadow(2px 2px 2px gray);
	-ms-filter:     drop-shadow(2px 2px 2px gray);
	-o-filter:      drop-shadow(2px 2px 2px gray);
}

#rightHue{
	position:absolute;
	top: 19px; left: 176px;
	width: 10px; height: 167px;
	background: linear-gradient(top, #FF0E17, #FC03F5, #1102FB, #01FCEB, #10FD11, #FBE402, #FF1A12);
	background: -webkit-linear-gradient(top, #FF0E17, #FC03F5, #1102FB, #01FCEB, #10FD11, #FBE402, #FF1A12);
	background: -moz-linear-gradient(top, #FF0E17, #FC03F5, #1102FB, #01FCEB, #10FD11, #FBE402, #FF1A12);
	background: -o-linear-gradient(top, #FF0E17, #FC03F5, #1102FB, #01FCEB, #10FD11, #FBE402, #FF1A12);
	background: -ms-linear-gradient(top, #FF0E17, #FC03F5, #1102FB, #01FCEB, #10FD11, #FBE402, #FF1A12);
	visibility:hidden;
}

#segment > div { 
	height: 24px; 
	padding: 0px 13px;
}

#twoFiftyFiveLabel{
	position: absolute;
	top: 17px; left: -24px;
}

#xLabel{
	position: absolute;
	top: 190px;  left: 44px;
}

#yLabel{
	position: absolute;
	top: 96px; left: -36px;
	-ms-transform: rotate(-90deg); 
	-webkit-transform: rotate(-90deg); 
	transform: rotate(-90deg);
}

#zeroLabel{
	position: absolute;
	top: 177px; left: -10px;
}