﻿@charset "utf-8";

#zeiss_tutorial 
{
    font-family:Arial, sans-serif;
    font-weight:bolder;
    color:white;

	width:550px;
	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:14px;
    width:100%; 
    text-align:center;
    font-size:22px;
    text-shadow:3px 3px 3px rgba(0,0,0,.5);
}
.diagram_label {
    position: absolute;
    color:#C2DEF6;
    font-size:12px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: center;
    opacity:0.5;
}
.ctl_label {
	position:absolute;
	top:488px;
    font-size:13px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    text-align: center;
}

/*Graph Layout*/
#graphContainer {
    position: absolute;
    left:88px; top:72px;
}
.labelTick {
    position: absolute;
    background-color:white;
}
.graphLabel {
    position: absolute;
    color:#C2DEF6;
    font-size:12px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
    width:25px;
    text-align: center;
}
#graphBG {
    position: absolute;
    width:403px; height:155px;
    background-size: 100% !important;
    border: solid 2px white;
    border-top-width: 0;
    border-right-width: 0;
}
#panels {
    position: absolute;
    width:100%; height:100%;
}
#posLine {
    position: absolute;
    width:1px; height:100%;
    background-color: rgba(255, 255, 255, 0.34);
    background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.11));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.11));
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.11));
    background: -o-linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.11));
    background: -ms-linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.11));
    background-color: -webkit-linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.11));
}
#blueLines {
    position: absolute;
    width:100%; height:100%;
    background-size: 100% !important;
}
#orangeLines {
    display: none;
    position: absolute;
    width:100%; height:100%;
    background-size: 100% !important;
}
.lineLblContainer {
    position: absolute;
    top:5px;
}
.lineLblContainer > div {
    position: relative;
    color:#C2DEF6;
    font-size:10px;
    margin-bottom: 2px;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);
}
#blueLbls {
    left:370px;
}
#orangeLbls {
    left:318px;
}
#intensityLbl {
    left:-56px; top:155px;
    width:155px;

    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;

    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}
#wavelengthLbl {
    left:-2px; top:184px;
    width:405px;
}

/*Specimen*/
.skewedSpec {
    position: absolute;
    width:175px; height:175px;

    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;

    transform: skew(0deg, 26deg) scale(0.4, 0.54);
    -ms-transform: skew(0deg, 26deg) scale(0.4, 0.54);
    -webkit-transform: skew(0deg, 26deg) scale(0.4, 0.54);
    -o-transform: skew(0deg, 26deg) scale(0.4, 0.54);
    -moz-transform: skew(0deg, 26deg) scale(0.4, 0.54);

    box-shadow:0 0 10px #5A93D1;
}
#specStack {
    position: absolute;
    left:43px; top:330px;
}
#specCan {
    position: absolute;
    left:362px; top:296px;
    width:175px; height:175px;
}

/*Controls Section*/
#stackSldrLbl {
    left:31px;
    text-align: left;
}
#profileCBLbl {
    position:absolute;
    width:220px;
    left:320px;
}
#stackSldr {
	position:absolute;
	left: 37px;
    top: 508px;
    width: 251px;
}
#specimenCB {
    position: absolute;
    left: 365px; top: 266px;
    width: 169px; height:24px;  
    
}
#profileCB {
    position: absolute;
    left: 330px; top: 509px;
    width: 200px; height:26px;  
}