@charset "utf-8";

#zeiss_tutorial 
{
    font-family:Arial, sans-serif;
    font-weight:bolder;
    color:white;

	width:500px;
	height:580px;
    margin:10px auto;
    box-shadow:3px 3px 5px #999999;
}
#zeiss_mainscene 
{
    position: absolute;
    background-color:#f0f0f0;
    opacity: 0;
}
.zeiss_title {
    position:absolute;
    top:14px;
    width:100%; 
    text-align:center;
    font-size:22px;
    text-shadow:3px 3px 3px rgba(0,0,0,.5);
}
.window_label {
    position:absolute;
    font-size:12px;
    color:#003E77;
    text-shadow:1px 1px 2px rgba(0,0,0,.3);
    text-align: center;
}
.diagram_label {
    position: absolute;
    font-size:12px;
    text-align: center;
    color:black;
    line-height:1;
}
.ctl_label {
	position:absolute;
	top:328px;
    font-size:12px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: center;
}
.counter_label {
    position:absolute;
    top:328px;
    font-size:12px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: right;
}
#arrows {
    position:absolute;
    left:81px; top:134px;
    width:255px; height:119px;
}
#arrow1 {
    position:absolute;
    left:81px;
    width:7px; height:14px;
}
#arrow2 {
    position:absolute;
    left:140px;
    width:7px; height:14px;
}
#horizLine1 {
    position:absolute;
    left:82px; top:7px;
    width:84px; height:1px;
}
#vertLine {
    position:absolute;
    left:147px;
    width:2px; height:119px;
}
#arrow3 {
    position:absolute;
    left:147px; top:105px;
    width:8px; height:14px;
}
#arrow4 {
    position:absolute;
    left:185px; top:105px;
    width:8px; height:14px;
}
#horizLine2 {
    position:absolute;
    left:148px; top:112px;
    width:170px; height:1px;
}
#blackLine {
    position:absolute;
    left:75px; top:358px;
    width:350px; height:2px;
}
#leftDiagramContainer {
    position:absolute;
    left:78px; top:56px;
    width:172px; height:305px;
    overflow:hidden;
}
#leftWaves {
    position:absolute;
    left:3px; top:201px;
    width:169px; height:103px;
}
#rightDiagramContainer {
    position:absolute;
    left:250px; top:56px;
    width:190px; height:305px;
    overflow:hidden;
}
#rightWaves {
    position:absolute;
    left:2px; top:201px;
    width:169px; height:103px;
}
#circlesContainer {
    position:absolute;
    left:78px; top:56px;
    width:362px; height:305px;
}
#leftCirclesMask {
    position:absolute;
    left:0px; top:0px;
    width:172px; height:305px;
    overflow:hidden;
}
#leftCircles {
    position:absolute;
    left:0px;
    width:328px; height:328px;
}
#leftCirclesCan {
   position:absolute;
    left:-14px; top:-79px;
    width:328px; height:328px;
}
#rightCirclesMask {
    position:absolute;
    left:171px; top:0px;
    width:175px; height:305px;
    overflow:hidden;
}
#rightCircles {
    position:absolute;
    left:0px; top:0px;
    width:328px; height:328px;
}
#rightCirclesCan {
   position:absolute;
    left:174px; top:-79px;
    width:328px; height:328px;
}
#lightBeam {
    position:absolute;
    left:213px; top:384px;
    width:74px; height:31px;
}
#radiusLbl {
    position:absolute;
    left:111px; top:117px;
    width:44px; height:50px;
}
#patternsLbl {
    position:absolute;
    left:319px; top:201px;
    width:51px; height:22px;
}
#distanceLbl {
    position:absolute;
    left:217px; top:250px;
    width:69px; height:12px;
}
#intensityLbl {
    position:absolute;
    left:359px; top:279px;
    width:71px; height:50px;
}
#illuminationLbl {
    position:absolute;
    left:160px; top:429px;
    width:180px; height:10px;
}
#wavelengthCounter {
    position:absolute;
    left:72px; top:507px;
}
#distanceCounter {
    position:absolute;
    left:227px; top:507px;
    width:45px;
}
#apertureCounter {
    position:absolute;
    left:399px; top:507px;
}
#wavelengthSldrLbl {
    left:16px; top:480px;
    width:150px;
}
#wavelengthSldr {
	position:absolute;
	left:30px;
	top:530px;
	width:120px;
}
#distanceSldrLbl {
    left:174px; top:480px;
    width:150px;
}
#distanceSldr {
    position:absolute;
    left:190px;
    top:530px;
    width:120px;
}
#apertureSldrLbl {
    left:335px; top:480px;
    width:150px;
}
#apertureSldr {
    position:absolute;
    left:350px;
    top:530px;
    width:120px;
}
/*------------------ColorSlider Style---------------------*/
.csld_trackback
{
    position: absolute;
    top:8px;
    height:12px;
    background-color: #84AFD1;
    opacity: 0.5;
    background: #1F5381;
    background: -moz-linear-gradient(#1F5381, ##1E5F92);
    background: -webkit-linear-gradient(#1F5381, ##1E5F92);
    background: -o-linear-gradient(#1F5381, ##1E5F92);
    background: -ms-linear-gradient(#1F5381, ##1E5F92);
    background: linear-gradient(#1F5381, ##1E5F92);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#1F5381', endColorstr='##1E5F92');
}
.csld_track {
    position: absolute;
    top:11px;
    height:6px;
    background:url(../images/400-700_spectrum.png);
}
.csld_handle {
    position: absolute;
    height: 28px;
    cursor:pointer;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    background: #114F80;
    background: -moz-linear-gradient(#114F80, #012344);
    background: -webkit-linear-gradient(#114F80, #012344);
    background: -o-linear-gradient(#114F80, #012344);
    background: -ms-linear-gradient(#114F80, #012344);
    background: linear-gradient(#114F80, #012344);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#114F80', endColorstr='#012344');
}
.csld_handleup {
    position: absolute;
    left: 2px;
    top: 2px;
    height: 24px;
    background: #FFFFFF;
    background: -moz-linear-gradient(#FFFFFF, #A0D4FF);
    background: -webkit-linear-gradient(#FFFFFF, #A0D4FF);
    background: -o-linear-gradient(#FFFFFF, #A0D4FF);
    background: -ms-linear-gradient(#FFFFFF, #A0D4FF);
    background: linear-gradient(#FFFFFF, #A0D4FF);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#A0D4FF');
}
.csld_handledown {
    position: absolute;
    left: 2px;
    top: 2px;
    height: 24px;
    background: #FFFFFF;
    background: -moz-linear-gradient(#FFFFFF, #FFEC44);
    background: -webkit-linear-gradient(#FFFFFF, #FFEC44);
    background: -o-linear-gradient(#FFFFFF, #FFEC44);
    background: -ms-linear-gradient(#FFFFFF, #FFEC44);
    background: linear-gradient(#FFFFFF, #FFEC44);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#FFEC44');
}
/*----------------End ColorSlider Style-------------------*/