/* spectrum.css */

#SpectrumSimulator * {
  margin:0;
  padding:0;
}
#SpectrumSimulator {
  position:relative;
  width:960px;
  height:370px;
  margin:0 0 0 20px;
  background:rgba(128,128,128,0.2);
  border-radius:6px;
  -webkit-text-size-adjust:100%;
}
#SpectrumSimulator strong {
  position:absolute;
  left:580px;
  top:20px;
  width:380px;
  text-align:center;
  color:#fff;
  font-size:16px;
  text-shadow:0 0 3px #000,0 0 3px #000;
}

#SpectrumSimulator p#Graph {
  float:left;
  position:relative;
  width:560px;
  height:330px;
  margin:20px 40px 20px 20px;
}
#SpectrumSimulator p#Graph canvas {
  position:absolute;
  left:0;
  top:0;
}
#SpectrumSimulator p#Graph canvas#Spectrum {
  z-index:3;
}
#SpectrumSimulator p#Graph canvas#Gridx {
  z-index:2;
}
#SpectrumSimulator p#Graph canvas#Gridy {
  z-index:1;
  border:solid 1px #999;
}

#SpectrumSimulator p em {
  display:block;
  text-align:center;
  white-space:nowrap;
  font-style:normal;
}
#SpectrumSimulator p input {
  padding:0 1px 0 0;
  text-align:right;
  font-size:15px;
  color:#fff;
  text-shadow:0 0 3px #000,0 0 3px #000;
}

#SpectrumSimulator a {
  position:absolute;
  z-index:2;
  display:block;
  width:24px;
  height:24px;
  border-radius:18px;
  outline:none;
  box-shadow:0 0 3px 2px rgba(0,0,0,0.6);
}
#SpectrumSimulator span {
  position:absolute;
  z-index:1;
  display:block;
  background:#ccc;
  border:solid 1px #000;
  border-radius:3px;
  box-shadow:0 0 3px 2px rgba(0,0,0,0.3);
}

#SpectrumSimulator input[type=range] {
  -webkit-appearance:none;
}

/* Chrome */
#SpectrumSimulator input[type=range]::-webkit-slider-runnable-track {
  height:20px;
}
#SpectrumSimulator input[type=range]#chInputBlue::-webkit-slider-runnable-track {
  background: #36f;
}
#SpectrumSimulator input[type=range]#chInputCW6000K::-webkit-slider-runnable-track {
  background: #bdf;
}
#SpectrumSimulator input[type=range]#chInputWW3000K::-webkit-slider-runnable-track {
  background: #f90;
}
#SpectrumSimulator input[type=range]#chInputGreen::-webkit-slider-runnable-track {
  background: #3c3;
}
#SpectrumSimulator input[type=range]#chInputHyperRed::-webkit-slider-runnable-track {
  background: #c03;
}
#SpectrumSimulator input[type=range]#PowerInput::-webkit-slider-runnable-track {
  background: #eee;
}
#SpectrumSimulator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:50px;
  height:50px;
  margin:-15px 0 0 0;
  background-size:100%;
  border-radius:20px;
  border:0;
}
#SpectrumSimulator input[type="range"]#chInputBlue::-webkit-slider-thumb {
  background:url(button/470nm.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputCW6000K::-webkit-slider-thumb {
  background:url(button/6000K.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputWW3000K::-webkit-slider-thumb {
  background:url(button/3000K.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputGreen::-webkit-slider-thumb {
  background:url(button/530nm.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputHyperRed::-webkit-slider-thumb {
  background:url(button/660nm.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#PowerInput::-webkit-slider-thumb {
  background:url(button/power.png) no-repeat 0 0;
}

/* Firefox */
#SpectrumSimulator input[type=range]::-moz-range-track {
  height:20px;
}
#SpectrumSimulator input[type=range]#chInputBlue::-moz-range-track {
  background: #36f;
}
#SpectrumSimulator input[type=range]#chInputCW6000K::-moz-range-track {
  background: #bdf;
}
#SpectrumSimulator input[type=range]#chInputWW3000K::-moz-range-track {
  background: #f90;
}
#SpectrumSimulator input[type=range]#chInputGreen::-moz-range-track {
  background: #3c3;
}
#SpectrumSimulator input[type=range]#chInputHyperRed::-moz-range-track {
  background: #c03;
}
#SpectrumSimulator input[type=range]#PowerInput::-moz-range-track {
  background: #eee;
}
#SpectrumSimulator input[type="range"]::-moz-range-thumb {
  width:50px;
  height:50px;
  margin:-15px 0 0 0;
  background-size:100%;
  border-radius:20px;
  border:0;
}
#SpectrumSimulator input[type="range"]#chInputBlue::-moz-range-thumb {
  background:url(button/470nm.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputCW6000K::-moz-range-thumb {
  background:url(button/6000K.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputWW3000K::-moz-range-thumb {
  background:url(button/3000K.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputGreen::-moz-range-thumb {
  background:url(button/530nm.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#chInputHyperRed::-moz-range-thumb {
  background:url(button/660nm.png) no-repeat 0 0;
}
#SpectrumSimulator input[type=range]#PowerInput::-moz-range-thumb {
  background:url(button/power.png) no-repeat 0 0;
}

#SpectrumSimulator #Power {
  position:relative;
  float:left;
  margin:90px 0 0 0;
  text-align:center;
}
#SpectrumSimulator #Power p {
  position:absolute;
  width:50px;
  top:220px;
  margin:0 1px 0 0;
  font-size:13px;
  color:#fff;
  text-shadow:0 0 3px #000,0 0 3px #000;
}
#SpectrumSimulator #Power p input {
  width:30px;
  margin:0 1px 0 0;
  font-weight:bold;
  font-size:14px;
  background:transparent;
  border:0;
}
#SpectrumSimulator #Power #PowerSlider {
  position:absolute;
  top:0;
  left:11px;
}
#SpectrumSimulator #Power #PowerSlider input {
  position:absolute;
  z-index:2;
  display:block;
  width:190px;
  height:20px;
  margin:100px 0 0 -80px;
  transform:rotate(-90deg);
}

#SpectrumSimulator #Power #PowerSlider a {
  left:0;
  top:0;
  background:#fff;
  border:solid 5px #fff;
  cursor:n-resize;
}
#SpectrumSimulator #Power #PowerSlider span {
  left:7px;
  top:14px;
  width:16px;
  height:180px;
  background:#fff;
}

#SpectrumSimulator #Channel {
  float:left;
  position:relative;
  margin:90px 0 0 0;
}
#SpectrumSimulator #Channel p {
  float:left;
  position:relative;
  width:50px;
  margin:220px 1px 0 0;
  font-size:13px;
  color:#fff;
  text-shadow:0 0 3px #000,0 0 3px #000;
}
#SpectrumSimulator #Channel p input {
  width:30px;
  margin:0 1px 0 0;
  font-weight:bold;
  font-size:14px;
  background:transparent;
  border:0;
}

#SpectrumSimulator #Channel div {
  position:absolute;
  top:0;
  left:0;
}
#SpectrumSimulator #Channel div a {
  left:0;
  top:0;
  border:solid 5px #fff;
  cursor:n-resize;
}
#SpectrumSimulator #Channel div span {
  left:7px;
  top:14px;
  width:16px;
  height:180px;
}
#SpectrumSimulator #Channel div input {
  position:absolute;
  z-index:2;
  display:block;
  width:190px;
  height:20px;
  margin:100px 0 0 -80px;
  transform:rotate(-90deg);
}
#SpectrumSimulator #Channel div#chBlue {
  left:8px;
}
#SpectrumSimulator #Channel div#chBlue a {
  background:#39f;
}
#SpectrumSimulator #Channel div#chBlue span {
  background:#39f;
}
#SpectrumSimulator #Channel div#chCW6000K {
  left:59px;
}
#SpectrumSimulator #Channel div#chCW6000K a {
  background:#bdf;
}
#SpectrumSimulator #Channel div#chCW6000K span {
  background:#bdf;
}
#SpectrumSimulator #Channel div#chWW3000K {
  left:110px;
}
#SpectrumSimulator #Channel div#chWW3000K a {
  background:#f90;
}
#SpectrumSimulator #Channel div#chWW3000K span {
  background:#f90;
}
#SpectrumSimulator #Channel div#chGreen {
  left:161px;
}
#SpectrumSimulator #Channel div#chGreen a {
  background:#3c3;
}
#SpectrumSimulator #Channel div#chGreen span {
  background:#3c3;
}
#SpectrumSimulator #Channel div#chHyperRed {
  left:212px;
}
#SpectrumSimulator #Channel div#chHyperRed a {
  background:#c03;
}
#SpectrumSimulator #Channel div#chHyperRed span {
  background:#c03;
}