﻿@charset "utf-8";

#zeiss_tutorial 
{
    font-family:Arial, sans-serif;
    font-weight:bolder;
    color:white;

	width:480px;
	height:550px;
    margin:10px auto;
    box-shadow:3px 3px 5px #999999;
}
#zeiss_mainscene 
{
    position: absolute;
    background-color:#f0f0f0;
    opacity: 0;
}
.zeiss_title {
    position:absolute;
    top:19px;
    width:100%; 
    text-align:center;
    font-size:19px;
    text-shadow:3px 3px 3px rgba(0,0,0,.5);
}
.ctl_label {
	position:absolute;
	top:328px;
    font-size:13px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: center;
}
#autoscanBtn {
    position:absolute;
    left:20px;
    top:495px;
    width:100px;
    height:30px;
}
#mySldrLbl {
    position:absolute;
    left:130px;
    top:484px;
    width:220px;
}
#mySldr {
	position:absolute;
	left:130px;
	top:505px;
	width:220px;
}
#resetBtn {
    position:absolute;
    left:360px;
    top:495px;
    width:100px;
    height:30px;
}
#specimenTxt{
    position:absolute;
    left: 25px; top: 242px;
}
#ccdIPTxt{
    position:absolute;
    left: 25px; top: 304px;
}
#imageTxt{
    position:absolute;
    left: 25px; top: 454px;
}
#topGraph{
    position:absolute;
    left: -138px; top: 58px;
    width: 755px; height: 244px;
    background:url(../images/graphLines.png);
    z-index: 1;
}
#boxContainer{
    position:absolute;
    left: 50px; top: 118px;
    width: 377px; height: 122px;
}
#bottomGraph{
    position:absolute;
    left: -138px; top: 209px;
    width: 755px; height: 244px;
    background:url(../images/graphLines.png);
    transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom; 
    -moz-transform-origin: bottom;  
    -o-transform-origin: bottom;
    z-index: 1;
}
#rectContainer{
    position:absolute;
    left: 50px; top: 329px;
    width: 377px; height: 122px;
}
#lineCanvas{
    position:absolute;
    left:23px; top:217px;
    width: 440px; height: 250px;
    z-index: 2;
}
.scale{
    -webkit-transform: scale(0.5,0.5);
    -moz-transform: scale(0.5,0.5);
    -ms-transform: scale(0.5,0.5);
    -o-transform: scale(0.5,0.5);
}
.scanBallInit{
    -webkit-transform: scale(0.25,0.25);
    -moz-transform: scale(0.25,0.25);
    -ms-transform: scale(0.25,0.25);
    -o-transform: scale(0.25,0.25);
    opacity: 0.5;
}
#beamContainer{
    position:absolute;
    left:-373px;
    width: 815px; height: 158px;
    background:url(../images/beam.png) 0px 0px;
    background-size:9.9% !important;
}
#beamMask{
    position:absolute;
    left:23px; top:85px;
    width: 435px; height: 157px;
    overflow:hidden;
    -moz-mask-box-image:
        -moz-linear-gradient(left, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-box-image:
        -webkit-linear-gradient(left, transparent 0%, black 5%, black 95%, transparent 100%);
    -o-mask-box-image:
        -o-linear-gradient(left, transparent 0%, black 5%, black 95%, transparent 100%);
    -ms-mask-box-image:
        -ms-linear-gradient(left, transparent 0%, black 5%, black 95%, transparent 100%);
}
#formulaContainer{
    position:absolute;
    left:45px; top:53px;
    width:90px; height:40px;
}

#formulaBG{
    position:absolute;    
    left: 7px; top:1px;
    width:76px; height:18px;
    background-color: #4C6874;
    border-radius:3px;
}
#formulaTxt{
    top:1px; width:76px;
    letter-spacing:2px;
}
#formulaCanvas{
    position:absolute;
    top:20px;
    width: 90px; height: 20px;
}
#scanContainer{
    position:absolute;
    left:175px; top:366px;
    width:130px; height:38px;
    z-index: 2;
}
#scanBG{
    position:absolute;
    width:260px; height:75px;
    left:-65px; top:-18px;
    background:url(../images/scanBG.png);
    box-shadow: 0px 0px 5px #000000;
}
#scanTxt{
    position:absolute;
    left:-1px; top:3px;
    width:130px;
    font-size: 16px;
}
#scanBallContainer{
    position:absolute;
    width:130px; height:20px; 
    top:19px;
}
#curveContainer{
    position:absolute;
    left:54px; top:251px;
    width:380px; height:56px;
    -webkit-transform: scale(1,0.9);
    -moz-transform: scale(1,0.9);
    -ms-transform: scale(1,0.9);
    -o-transform: scale(1,0.9);
}
#curveBG{
    position:absolute;
    left:-188px; top:-24px;
    width:753px; height:104px;
    background:url(../images/curveBG.png);
}
#curveCanvas{
    position:absolute;
    top: -2px;
    width:380px; height:56px;
    transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom; 
    -moz-transform-origin: bottom;  
    -o-transform-origin: bottom;
}
.symb {
    font-family: Wingdings;
}