@charset "utf-8";

body{
	/* width: 438px; */
	height: 392px;
	text-align: center;
}

#textExample{
	margin: 50px 0 10px 0;
}

.mainWindow{
	position: relative;
	display: inline-block;
	left: -15px;
	width: 500px; height: 270px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 25px 0 10px 0;
	border: none;
	background: none;
}

.mainWindow > *{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

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

.controlText {
	margin: 4px auto;
}

.objectsContainer {
	position: relative;
	display: inline-block;
	padding: 10px;
	width: 433px;
	height: 220px;
}

#yellowRays {
	position: absolute;
	width: 380px;
	height: 143px;
	left: 38px;
	top: 17px;
}

#pinkRay {
	position: absolute;
	height: 141px;
	width: 225px;
	top: 87px;
	left: 36px;
}


/*Images*/

#lens {
	position: absolute;
	width: 400px;
	height: 140px;
	left: 34px;
	top: 9px;
}

#eyeball {
	position: absolute;
	width: 400px;
	height: 140px;
	top: 9px;
	left: 34px;
}

#yellowDot1 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: 76px;
	left: 49px;
}

#yellowDot2 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: 76px;
	left: 133px;
}

#yellowDot3 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: 76px;
	left: 206px;
}

#yellowDot4 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: 76px;
	left: 300px;
}


/*Arrows/Arrowheads*/

#grayArrow {
	position: absolute;
	height: 15px;
	width: 9px;
	left: 0px;
	top: 0px;
}

#grayArrowContainer {
	position: absolute;
	height: 15px;
	width: 9px;
	left: 34px;
	top: 65px;
	overflow: hidden;
}

#invertedGrayArrow {
	position: absolute;
	height: 29px;
	width: 10px;
	left: 0px;
	top: 0px;
}

#invertedGrayArrowContainer {
	position: absolute;
	height: 29px;
	width: 10px;
	left: 214px;
	top: 79px;
	overflow: hidden;
}

#blackArrowHead {
	position: absolute;
	width: 7px;
	height: 8px;
	top: 160px;
	left: 36px;
}

#blackArrowHead2 {
	position: absolute;
	width: 7px;
	height: 8px;
	top: 22px;
	left: 138px;
}

#grayArrowHead {
	position: absolute;
	width: 9px;
	height: 12px;
	top: 209px;
	left: 31px;
}

#whiteArrow {
	position: absolute;
	width: 87px;
	height: 79px;
	top: 0px;
	left: 0px;
}

#whiteArrowContainer {
	position: absolute;
	width: 90px;
	height: 44px;
	top: 35px;
	left: 338px;
	overflow: hidden;
}

#reversedBlackArrowHead {
	position: absolute;
	width: 7px;
	height: 8px;
	top: 22px ;
	left: 213px;
}

#reversedBlackArrowHead2 {
	position: absolute;
	width: 7px;
	height: 8px;
	top: 160px;
	left: 342px;
}


/*Lines */

#longHorizontalLine {
	position: absolute;
	width: 304px;
	height: 1px;
	top: 163.5px;
	left: 40px;
}

#shortHorizontalLine {
	position: absolute;
	width: 75px;
	height: 1px;
	top: 25.5px;
	left: 141px;
}

#rightDashedLine {
	position: absolute;
	width: 1px;
	height: 58px;
	top: 107px;
	left: 348px;
}

#opticalDashedLine1 {
	position: absolute;
	width: 1px;
	height: 57px;
	top: 25px;
	left: 219px;
}

#opticalDashedLine2 {
	position: absolute;
	width: 0px;
	height: 57px;
	top: 25px;
	left: 137px;
}

#movingDashedLine {
	position: absolute;
	width: 1px;
	height: 148px;
	top: 0px;
	left: 0px;
}

#dashedLineContainer {
	position: absolute;
	width: 1px;
	height: 144px;
	top: 80px;
	left: 35px;
	overflow: hidden;
}


/*Labels */

#objectiveLbl {
	position: absolute;
	top: 10px;
	left: 17px;
}

#tubeLengthLbl {
	position: absolute;
	top: 9px;
	left: 123px;
}

#eyepieceLbl {
	position: absolute;
	top: 9px;
	left: 268px;
}

#f1Lbl {
	position: absolute;
	top:85px;
	left: 50px;
}

#f2Lbl {
	position: absolute;
	top: 86px;
	left: 128px;
}

#f3Lbl {
	position: absolute;
	top: 66px;
	left: 201px;
}

#f4Lbl {
	position: absolute;
	top: 86px;
	left: 301px;
}

#cmLbl {
	position: absolute;
	top: 169px;
	left: 226px;
}

#i2Lbl {
	position: absolute;
	top: 40px;
	left: 29px;
}

#i3LeftLbl {
	position: absolute;
	top: 195px;
	left: 44px;
}

#i3RightLbl {
	position: absolute;
	top: 110px;
	left: 199px;
}

#i4Lbl {
	position: absolute;
	top: 28px;
	left: 410px;
}

#textContainer{
	top: 15px;
	margin-right: 30px;
	padding: 20px;
}

#textContainer > *{
	margin: 5px 0;
}

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

#btn{
	display: inline-block;
	position: relative;
	width: 66px; height: 30px;
}

#toggleBtn{
	display: inline-block;
	position: relative;
	width: 110px; height: 30px;
}

#segment > div{
	height: 26px;
	padding: 0 8px;
}