@charset "utf-8";

#zeiss_tutorial 
{
    font-family:Arial, sans-serif;
    font-weight:bolder;
    color:white;
	width:500px;
	height:450px;
    margin:10px auto;
    box-shadow:3px 3px 5px #999999;
}
#zeiss_mainscene 
{
    position: absolute;
    background-color:#f0f0f0;
    opacity: 0;
}
.zeiss_title {
    position:absolute;
    top:17px;
    width:100%; 
    text-align:center;
    font-size:22px;
    text-shadow:3px 3px 3px rgba(0,0,0,.5);
}
.diagram_label {
    position: absolute;
    font-size:12px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: center;
}
.ctl_label {
	position:absolute;
	top:387px;
    font-size:13px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: center;
}
#chromophoreCanvas{
    position:absolute;
    left:5px;
    top:100px;
    width:345px;
    height:225px;
}
#line{
    position:absolute;
    width:43px;
    height:1px;
    left:200px;
    top:240px;
    background-color: #ffffff;
    box-shadow:1px 1px 3px rgba(0,0,0,.7);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}
#glow{
    left:-10px;
    top:-2px;
    width:437px;
    height:463px;
    background:url(../images/greenGlow.png);
    visibility:hidden;
}
#btnLbl1 {
    left:72px;
    width:141px;
}
#btn1 {
	position:absolute;
	left:72px;
	top:405px;
    width:141px;
    height:30px;
}
#laserSymbol1 {
    position:absolute;
    left:70px;top:399px;
    width:43px;height:43px;
    background:url(../images/laserSymbol.png);
    pointer-events: none;
}
#btnLbl2 {
    left:287px;
    width:141px;
}
#btn2 {
    position:absolute;
    left:287px;
    top:405px;
    width:141px;
    height:30px;
}
#laserSymbol2 {
    position:absolute;
    left:284px;top:399px;
    width:43px;height:43px;
    background:url(../images/laserSymbol.png);
    pointer-events: none;
}
#ccTxt {
    width:100%;
    top:70px;
    font-size:14px;
    visibility:hidden;
}
#tcTxt {
    width:100%;
    top:70px;
    font-size:14px;
}
#glyTxt {
    left:342px;
    top:131px;
}
#cysTxt {
    left:279px;
    top:308px;
}
#tyrTxt {
    left:156px;
    top:94px;
}
#htBG{
    left:207px; top:260px;
    width:70px; height:18px;
}
#htTxt{
    left:207px; top:262px;
    width:70px; height:18px;
}
#dsBG{
    left:310px; top:193px;
    width:70px; height:18px;
}
#dsTxt{
    left:310px; top:195px;
    width:70px; height:18px;
}
#fsBG{
    left:310px; top:193px;
    width:110px; height:18px;
}
#fsTxt{
    left:310px; top:195px;
    width:110px; height:18px;
}
.hidden{
    visibility:hidden;
}
.bg{
    position: absolute;
    background-color: #000000;
    border-radius:3px;
    opacity: 0.25;
}
.scale {
    position:absolute;
    transform: scale(0.5, 0.5);
    -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);
}