@charset "utf-8";

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

.mainWindow2 {
    position: relative;
    /* left: -25px; top: -60px; */
    display: inline-block;
    width: 480px; height: 280px;
}

#absWrapper {
	position: absolute;
	width: 100%;
	left: 0px;
	top: -65px;
}

#lens {
    position: absolute;
    left: 245px; top: 123px;
    width: 41px; height: 123px;
}

#rayCan {
    position: absolute;
    left: 94px; top: 144px;
    width: 365px; height: 96px;
}

#centerLine {
    position: absolute;
    left: 65px; top: 184px;
    width: 400px; height: 2px;
    background-color: black;
}

#objectHorizDashedCan {
    left: 63px; top: 182px;
}

#imageHorizDashedCan {
    left: 355px; top: 182px;
}

.arrow {
    position: absolute;
    width: 10px; height: 29px;
}

.yellowDot {
    position:absolute;
    width: 10px; height: 10px;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    background: -webkit-radial-gradient(6px 6px, circle farthest-side, rgb(255, 255, 0) 10%, rgb(204, 204, 0) 70%, rgb(153, 153, 0) 90%, rgb(102, 102, 0) 100%);
    background: -moz-radial-gradient(6px 6px, circle farthest-side, rgb(255, 255, 0) 10%, rgb(204, 204, 0) 70%, rgb(153, 153, 0) 90%, rgb(102, 102, 0) 100%);
}

.dotLineCan {
    position: absolute;
    left: 7px; top: -10px;
    width: 13px; height: 13px;
}

.vertDashedLine {
    position: absolute;
    width: 6px; height: 96px;
}

.horizDashedLine {
    position: absolute;
    width: 110px; height: 6px;
}

#objectComponentsContainer {
    position: absolute;
    left: 74px; top: 90px;
}

#objectVertDashedCan {
    left: 22px;
}

#objectArrowContainer {
    position: absolute;
    left: 20px; top: 60px;
    width: 10px; height: 34px;
    overflow: hidden;
}

#objectArrowCan {
    position: absolute;
    left: 0px; top: 40px;
    width: 10px; height: 34px;
}

#objectVertComponentsContainer {
    position: absolute;
    left: 10px; top: 90px;
}

#objectLbl {
    left: 20px; top: -20px;
}

#objectDotLineCan {
    left: 17px;
}

#objectDot {
    left: 10px;
}

#objectHeightLbl {
    left: 4px; top: 68px;
}

#objectHeightArrowDownCan {
    left: -5px; top: -24px;
}

#objectHeightArrowUpCan {
    left: 5px; top: 95px;
}

#frontFocalContainer {
    position: absolute;
    left: 198px; top: 180px;
}

#frontFocalVertDashedCan {
    left: 2px;
}

#frontFocalLbl {
    left: -20px; top: 15px;
}

#rearFocalContainer {
    position: absolute;
    left: 325px; top: 180px;
}

#rearFocalVertDashedCan {
    left: 2px;
}

#rearFocalLbl {
    left: 20px; top: -20px;
}

#imageComponentsContainer {
    position: absolute;
    left: 354px; top: 180px;
}

#imageVertDashedCan {
    left: 2px; top: -96px;
}

#imageArrowContainer {
    position: absolute;
    top: 6px;
    width: 10px; height: 46px;
    overflow: hidden;
}

#imageArrowCan {
    position: absolute;
    left: 0px; top: -51px;
    width: 10px; height: 46px;
}

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

#imageLbl {
    left: -10px; top: 20px;
}

#imageDotLine {
    position: absolute;
    left: 4px; top: 10px;
    width: 2px; height: 10px;
    background-color: black;
}

#imageHeightLbl {
    left: 35px; top: -22px;
}

#imageHeightArrowDownCan {
    left: 35px; top: -24px;
}

#imageHeightArrowUpCan {
    left: 35px; top: 5px;
}

#frontFocalDotLineCan {
    left: -9px; top: 7px;
}

#objectPlaneContainer {
    position: absolute;
    left: 220px; top: 240px;
}

#objectPlaneLbl {
    left: 5px;
}

#planeRightArrowCan {
    position: absolute;
    left: 20px;
    width: 26px; height: 10px;
}

#objectPlaneSolidLine {
    position: absolute;
    left: 45px; top: -161px;
    width: 1px; height: 205px;
    background-color: black;
}

#imagePlaneContainer {
    position: absolute;
    left: 266px; top: 240px;
}

#imagePlaneLbl {
    left: 30px;
}

#planeLeftArrowCan {
    position: absolute;
    width: 26px; height: 10px;
}

#imagePlaneSolidLine {
    position: absolute;
    left: -1px; top: -161px;
    width: 1px; height: 205px;
    background-color: black;
}

#objectLeftArrowCan {
    position: absolute;
    left: 100px; top: 93px;
    width: 75px; height: 10px;
}

#objectRightArrowCan {
    position: absolute;
    left: 191px; top: 93px;
    width: 75px; height: 10px;
}

#imageLeftArrowCan {
    position: absolute;
    left: 265px; top: 93px;
    width: 71px; height: 10px;
}

#imageRightArrowCan {
    position: absolute;
    left: 288px; top: 93px;
    width: 71px; height: 10px;
}

#frontFocalLeftArrowCan {
    position: absolute;
    left: 203px; top: 266px;
    width: 27px; height: 10px;
}

#frontFocalRightArrowCan {
    position: absolute;
    left: 239px; top: 266px;
    width: 27px; height: 10px;
}

#rearFocalLeftArrowCan {
    position: absolute;
    left: 265px; top: 266px;
    width: 27px; height: 10px;
}

#rearFocalRightArrowCan {
    position: absolute;
    left: 303px; top: 266px;
    width: 27px; height: 10px;
}

#objectSpaceLbl {
    left: 164px; top: 90px;
}

#imageSpaceLbl {
    left: 294px; top: 90px;
}

#frontFocalLengthLbl {
    left: 232px; top: 265px;
}

#rearFocalLengthLbl {
    left: 295px; top: 265px;
}

.lateralFormulaContainer {
    position: absolute;
    left: 45px; top: 265px;
}

#lateralText {
    position: absolute;
    left: 34px; top: 0px;
    width: 130px;
}

#lateralTextContainer {
    position: absolute;
    left: 0px; top: 20px;
    width: 190px; height: 58px;
    padding: 20px 0 20px 7px;
}

#lateralTextContainer > *{
	position: relative;
    left: -35px;
}

.lateralEquRow {
    position: relative;
    vertical-align: middle;
    display: inline;
    margin: 0 3px;
}

.lateralValsRow {
    vertical-align: middle;
    display: inline-block;
    margin: 0 3px;
    line-height: 16px;
}

.fractionBar {
    position: relative;
    left: 0px; top: -1px;
    width: 10px; height: 1px;
    display: inline-block;
    background-color: black;
}

#lateralTextContainer > :nth-child(3),
#lateralTextContainer > :nth-child(5) {
    width: 15px;
}

#latMagLbl {
    position: absolute;
    width: 58px;
    left: 107px; top: 28px;
    text-align: left;
}

#staticHeightRatioLbl {
    left: -111px; top: 0px;
    text-align: left;
}

#dynamicHeightRatioLbl {
    left: -94px; top: 0px;
    width: 14px;
}

.focalFormulaContainer {
    position: absolute;
    left: 238px; top: 265px;
}

.focalFormulaContainer > * {
	position: relative;
}

#focalTextContainer {
    position: absolute;
    left: 0px; top: 20px;
    width: 240px;
    padding: 25px 10px 15px 8px;
}

.focalEquRow {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin: 0 3px;
    top: -6px;
}

.focalValsRow {
    vertical-align: middle;
    display: inline-block;
    margin: 0 3px;
    line-height: 16px;
}

.focalNumRow {
    position: absolute;
    display: inline-block;
    margin: 0 3px;
    top: 12px;
}

.focalDenomRow {
    position: absolute;
    display: inline-block;
    margin: 0 3px;
    top: 35px;
}

.diagramTextBlack {
	position: absolute;
}

#focalTextContainer > :nth-child(6) {
    width: 15px;
    margin-left: 20px;
}

#focalTextContainer > :nth-child(8),
#focalTextContainer > :nth-child(10) {
    width: 15px;
}

#focalTextContainer > * {
	position: relative;
}

#staticFocalRatioLbl {
    left: -209px; top: -5px;
    text-align: center;
}

#staticObjectSpaceRatioLbl {
    left: -191px; top: -5px;
    text-align: left;
}

#staticImageSpaceRatioLbl {
    left: -1px; top: -37px;
    text-align: left;
}

#dynamicFocalRatioLbl {
    left: 18px; top: -37px;
}

#dynamicObjectSpaceRatioLbl {
    left: 32px; top: -37px;
}

#dynamicImageSpaceRatioLbl {
    left: 42px; top: -37px;
    width: 21px;
}

.controlPanelBack {
    display: inline-block;
    /* margin: 12px 3px; */
	vertical-align: middle;
	padding: 4px;
	margin: 4px;
}

#positionSldr {
    display: inline-block;
    position: relative;
    width: 90px;
}

#focalSldr {
    display: inline-block;
    position: relative;
    width: 90px;
}

#heightSldr {
    display: inline-block;
    position: relative;
    width: 90px;
}

#planesSldr {
    display: inline-block;
    position: relative;
    width: 90px;
}