@charset "utf-8";

body {
    /* width: 490px; */
	height: 420px;
	text-align: center;
}

.blackLine {
    position: absolute;
    background-color: black;
}

.diagramCanvas {
    position: absolute;
    width: 130px; height: 240px;
    top: 20px; left: 0px; 
}

.specimen {
    position: absolute;
    top: 18px; left: 0px;
    width: 150px; height: 150px;
}

.controlPanelBack {
	position: relative;
	display: inline-block;
	margin: 4px;
	padding: 4px;
	vertical-align: middle;
}

.whiteWindow {
	position: relative;
	display: inline-block;
	width: 430px;;
	height: 270px;
	margin-top: 5px;
}

#absWrapper {
	position: absolute;
	left: 0px;
	top: -40px;
	width: 100%;
	display: inline-block;
}

#airyArrow {
    position: absolute;
    top: 15px; left: 0px;
}

#airyCanvas {
    position: absolute;
    width: 115px; height: 110px;
    top: 14px; left: 4px;
}

#airyContainer {
    position: absolute;
    top: 50px; left: 180px;
    width: 140px; height: 120px; 
}

#airyLabelText {
    position: absolute;
    top: 18px; right: 2px;
    width: 68px;
    z-index: 2;
}

#airyPlaneText {
    position: absolute;
    top: 0px; left: 0px;
}

#dataCanvas {
    visibility: hidden;
}

#diagramContainer {
    position: absolute;
    top: 42px; right: -11px;
    width: 150px; height: 257px;
}

#diagramTitle {
    position: absolute;
    top: 7px; left: -40px;
}

#dropDown {
    width: 200px; height: 27px;
    margin-top: 1px;
}

#dropDownContainer {
    /* position: absolute; */
    /* height: 70px; */
    /* bottom: 6px; left: 7px; */ 
}

#dropDownTitle {
    margin-top: 1px; 
}

#focalText {
    position: absolute;
    top: 31px; right: 20px;
    width: 65px;
}

#lens {
    position: absolute;
    top: 186px; left: 1px; 
    width: 82px; height: 31px; 
}

#oAxisLine {
    bottom: 22px; right: 88px;
    width: 16px; height: 2px;
}

#oAxisText {
    position: absolute;
    bottom: 16px; right: 17px;
}

#objectiveLine {
    bottom: 43px; right: 71px;
    width: 2px; height: 5px;
}

#objectiveText {
    position: absolute;
    bottom: 31px; right: 22px;
}

#opContainer {
    position: absolute;
    bottom: 0px; right: 27px;
    width: 100px; height: 100px;
}

#opLine {
    bottom: 5px; right: 70px;
    width: 8px; height: 2px;
}

#opText {
    position: absolute;
    bottom: 0px; right: 0px; 
}

#pointArrow {
    position: absolute;
    bottom: 16px; left: -4px;
}

#pointCanvas {
    position: absolute;
    width: 101px; height: 117px;
    bottom: 23px; left: 9px;
}

#pointContainer {
    position: absolute;
    top: 153px; left: 180px;
    width: 120px; height: 150px; 
}

#pointLabelText {
    position: absolute;
    top: 11px; right: -18px;
    width: 72px;
    z-index: 2;
}

#pointPlaneText {
    position: absolute;
    bottom: 0px; left: 0px;
}

#specimenImage {
    width: 150px; height: 150px;
    visibility: hidden;
    filter:         drop-shadow(5px 5px 3px #818181);
    -webkit-filter: drop-shadow(5px 5px 3px #818181);
    -moz-filter:    drop-shadow(5px 5px 3px #818181);
    -ms-filter:     drop-shadow(5px 5px 3px #818181);
    -o-filter:      drop-shadow(5px 5px 3px #818181);
}

#specimenImageContainer {
    position: absolute;
    top: 81px; left: 10px; 
    width: 150px; height: 175px;
}

#specimenCanvas {
    filter:         drop-shadow(5px 5px 3px #818181);
    -webkit-filter: drop-shadow(5px 5px 3px #818181);
    -moz-filter:    drop-shadow(5px 5px 3px #818181);
    -ms-filter:     drop-shadow(5px 5px 3px #818181);
    -o-filter:      drop-shadow(5px 5px 3px #818181);
}

#sldr {
    display: inline-block;
    position: relative;
    width: 200px;
}

#sldrContainer {
    /* position: absolute; */
    /* height: 70px; */
    /* bottom: 6px; right: 7px; */
}

#zoneText {
    position: absolute;
    top: -4px; right: 40px;
    word-spacing: -1px;
}