@charset "utf-8";

body {
	/* width: 520px; */
	height: 477px;
	text-align: center;
}

.tutorialTitleText {
	position: absolute;
	left: 0;
	top: 6px;
	font: bold 18px/1 Arial;
}

.diagramTextBlack {
	display: block;
	position: static;
	margin: 50px 0 10px 0;
}

.mainWindow{
	position: relative;
	display: inline-block;
	width: 459px; height: 313px;
}

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

.tutWrap {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

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

#img{
	position: absolute;
	width: 400px;
	height: 140px;
	top: 15px;
	left: 30px;
}

#movingLineContainer {
	position: absolute;
	width: 5px;
	height: 81px;
	left: 32px;
	top: 86px;
	overflow: hidden;
}

#i3PrimeArrow {
	position: absolute;
	width: 9px;
	height: 13px;
	left: 29.75px;
	top: 70px;
}

#dashedLine1 {
	position: absolute;
	width: 5px;
	height: 146px;
	left: 0px;
}

#dashedLine2 {
	position: absolute;
	width: 5px;
	height: 67px;
	left: 91px;
	top: 145px;
}

#dashedLine3 {
	position: absolute;
	width: 5px;
	height: 86px;
	left: 167px;
	top: 128px;
}

#dashedLine4 {
	position: absolute;
	width: 5px;
	height: 49px;
	left: 225px;
	top: 35px;
}

#dashedLine5 {
	position: absolute;
	width: 5px;
	height: 58px;
	left: 340px;
	top: 110px;
}

#canvasBG {
	position: absolute;
	top: 5px;
	left: 0px;
	width: 491px;
	height: 261px;
}

#tubeArrow{
	position: absolute;
	width: 62px;
	height: 9px;
	top: 32px;
	left: 166px;
}

#distArrow{
	position: absolute;
	width: 307px;
	height: 9px;
	top: 160px;
	left: 35px;
}

#infinArrow{
	position: absolute;
	width: 75px;
	height: 9px;
	top: 210px;
	left:  94px;
}

#objectiveTxt{
	position: absolute;
	left: 25px;
	top: 15px;
}

#i2{
	position: absolute;
	left: 25px;
	top: 5px;
}

#i2ArrowContainer {
	position: absolute;
	height: 35px;
	width: 10px;
	left: 34px;
	top: 52px;
	overflow: hidden;
}

#i2Arrow {
	position: absolute;
	height: 35px;
	width: 10px;
	left: 0px;
	top: 0px;
}

#fI2{
	position: absolute;
	left: 51.5px;
	top: 93px;
}

#opticalTubeLength{
	position: absolute;
	left: 115px;
	top: 15px;
}

#eyepiece{
	position: absolute;
	left: 270px;
	top: 20px;
}

#infinity{
	position: absolute;
	left: 90px;
	top: 235px;
}

#i3{
	position: absolute;
	left: 202px;
	top: 9px;
}

#invertedArrowContainer {
	position: absolute;
	height: 35px;
	width: 10px;
	left: 222px;
	top: 87px;
	overflow: hidden;
}

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

#i3Arrow{
	position: absolute;
	left: 31px;
	top: 68px;
}

#tubeLensText{
	position: absolute;
	left: 114px;
	top: 90px;
	width: 35px;
}

#i3Prime{
	position: absolute;
	left: 45px;
	top: 60px;
}

#focalLengthTag{
	position: absolute;
	left: 265px;
	top: 170px;
}

#i4{
	position: absolute;
	left: 440px;
	top: 70px;
}

#fI4{
	position: absolute;
	left: 303px;
	top: 67px;
}

#curveContainer {
	position:absolute;
	left:326px; top:46px;
	width:100px; height:39px;
	overflow:hidden;
}

#curveArrow {
	position:absolute;
	left:0px; top:2px;
}

#f1{
	position: absolute;
	height: 9px;
	width: 9px;
	top:82px;
	left:51px;
}

#f2{
	position: absolute;
	width: 9px;
	height: 9px;
	top: 82px;
	left: 302px;
}

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