@charset "utf-8";

body {
	height: 470px;
	/* width: 426px;  */
	text-align: center;
}

#ccdBG{
	left: 58px;
	position: absolute;
	top: 90px;
	z-index: 1;
}

#masking{
	position: absolute;
	top: 45px;
	left: 57px;
	z-index: 2; 
}

#mainWindow{
	/* position: absolute; */
	/* left: 8px; */
	/* top: 47px; */
	position: relative;
	display: inline-block;
	height: 372px;
	width: 396px;
}

.whiteWindow {
	/* left: 12px; */
	/* position: absolute; */
	/* top: 50px; */
	position: relative;
	display: inline-block;
	height: 326px;
	width: 350px;
}

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

.controlPanelBack {
	position: relative;
	display: inline-block;
}

#button {
	display: inline-block;
	width: 80px;
	height: 30px;
	margin: 10px auto;
}

#disappearingText1{
	color: black;
	position: absolute;
	top: 20px;
	left: 33px;
	opacity: 0;
}
#disappearingText2{
	color: black;
	position: absolute;
	top: 15px;
	left: 203px;
	opacity: 0;
}

#disappearingText3{
	color: black;
	position: absolute;
	top: 20px;
	left: 103px;
	opacity: 0;
}

.textLabel{
	color: black;
	position: absolute;
}

#ccdLabel{
	top: 80px;
	left: 7px;
}

#maskingLabel{
	top: 72px;
	left: 286px;
}

#pixelLabel{
	top: 166px;
	left: 16px;
}

#siliconLabel{
	top: 146px;
	left: 297px;
}

#electrodeLabel{
	top: 261px;
	left: 9px;
}

#horReaRegLabel{
	top: 265px;
	left: 274px;
}

#yellowArrow{
	position: absolute;
	top: 187px;
	left: 100px;
	height: 31px;
	width: 68px;
	z-index: 2;
	opacity: .25;
}

#readoutNode{
	position: absolute;
	top: 198px;
	left: 3px;
	z-index: 1;
	font-family: arial;
	color: red;
}

#redLabelLine{
	position: absolute;
	top: 203px;
	left: 85px;
	width: 20px;
	z-index: 1;
	color: red;
	border-top: 2px solid red;
}

#arrowMask{
	left: 158px;
	top: 0px;
	overflow: hidden;
	width: 50px;
	height: 200px;
	z-index: 1;
	position: absolute;
}

#movingArrow1{
	z-index: 2;
	position: absolute;
	left: 0px;
	top: -55px;
	opacity: 0; 
}

#movingArrow2{
	z-index: 3;
	position: absolute;
	left: 0px;
	top: -54px;
	opacity: 0; 
}

#movingArrow3{
	z-index: 4;
	position: absolute;
	left: 0px;
	top: -53px;
	opacity: 0; 
}

#movingArrow4{
	z-index: 5;
	position: absolute;
	left: 0px;
	top: -52px;
	opacity: 0; 
}

#movingArrow5{
	z-index: 6;
	position: absolute;
	left: 0px;
	top: -51px;
	opacity: 0; 
}

#movingArrow6{
	z-index: 7;
	position: absolute;
	left: 0px;
	top: -50px;
	opacity: 0; 
}

#movingArrow7{
	z-index: 8;
	position: absolute;
	left: 0px;
	top: -49px;
	opacity: 0; 
}

#movingArrow8{
	z-index: 9;
	position: absolute;
	left: 0px;
	top: -48px;
	opacity: 0; 
}

#movingArrow9{
	z-index: 10;
	position: absolute;
	left: 0px;
	top: -47px;
	opacity: 0; 
}

#movingArrow10{
	z-index: 11;
	position: absolute;
	left: 0px;
	top: -46px;
	opacity: 0; 
}

#movingArrow11{
	z-index: 12;
	position: absolute;
	left: 0px;
	top: -45px;
	opacity: 0; 
}

#movingArrow12{
	z-index: 13;
	position: absolute;
	left: 0px;
	top: -44px;
	opacity: 0; 
}

#movingArrow13{
	z-index: 14;
	position: absolute;
	left: 0px;
	top: -43px;
	opacity: 0; 
}

#movingArrow14{
	z-index: 15;
	position: absolute;
	left: 0px;
	top: -42px;
	opacity: 0; 
}

#movingArrow15{
	z-index: 16;
	position: absolute;
	left: 0px;
	top: -41px;
	opacity: 0; 
}

#movingArrow16{
	z-index: 17;
	position: absolute;
	left: 0px;
	top: -40px;
	opacity: 0; 
}

#movingArrow17{
	z-index: 18;
	position: absolute;
	left: 0px;
	top: -39px;
	opacity: 0; 
}

#movingArrow18{
	z-index: 19;
	position: absolute;
	left: 0px;
	top: -38px;
	opacity: 0; 
}

#movingArrow19{
	z-index: 20;
	position: absolute;
	left: 0px;
	top: -37px;
	opacity: 0; 
}

#movingArrow20{
	z-index: 21;
	position: absolute;
	left: 0px;
	top: -36px;
	opacity: 0; 
}

#movingArrow21{
	z-index: 22;
	position: absolute;
	left: 0px;
	top: -35px;
	opacity: 0; 
}

#movingArrow22{
	z-index: 23;
	position: absolute;
	left: 0px;
	top: -34px;
	opacity: 0; 
}

#movingArrow23{
	z-index: 24;
	position: absolute;
	left: 0px;
	top: -33px;
	opacity: 0; 
}

#movingArrow24{
	z-index: 25;
	position: absolute;
	left: 0px;
	top: -32px;
	opacity: 0; 
}

#movingArrow25{
	z-index: 26;
	position: absolute;
	left: 0px;
	top: -31px;
	opacity: 0; 
}

#movingArrow26{
	z-index: 27;
	position: absolute;
	left: 0px;
	top: -30px;
	opacity: 0; 
}

#movingArrow27{
	z-index: 28;
	position: absolute;
	left: 0px;
	top: -29px;
	opacity: 0; 
}

#movingArrow28{
	z-index: 29;
	position: absolute;
	left: 0px;
	top: -28px;
	opacity: 0; 
}

#movingArrow29{
	z-index: 30;
	position: absolute;
	left: 0px;
	top: -27px;
	opacity: 0; 
}

#movingArrow30{
	z-index: 31;
	position: absolute;
	left: 0px;
	top: -26px;
	opacity: 0; 
}


#movingArrow31{
	z-index: 32;
	position: absolute;
	left: 0px;
	top: -25px;
	opacity: 0; 
}

#movingArrow32{
	z-index: 33;
	position: absolute;
	left: 0px;
	top: -24px;
	opacity: 0; 
}

#movingArrow33{
	z-index: 34;
	position: absolute;
	left: 0px;
	top: -23px;
	opacity: 0; 
}

#movingArrow34{
	z-index: 35;
	position: absolute;
	left: 0px;
	top: -22px;
	opacity: 0; 
}

#movingArrow35{
	z-index: 36;
	position: absolute;
	left: 0px;
	top: -21px;
	opacity: 0; 
}

#movingArrow36{
	z-index: 37;
	position: absolute;
	left: 0px;
	top: -20px;
	opacity: 0; 
}

#movingArrow37{
	z-index: 38;
	position: absolute;
	left: 0px;
	top: -19px;
	opacity: 0; 
}

#movingArrow38{
	z-index: 39;
	position: absolute;
	left: 0px;
	top: -18px;
	opacity: 0; 
}

#movingArrow39{
	z-index: 40;
	position: absolute;
	left: 0px;
	top: -17px;
	opacity: 0; 
}

#movingArrow40{
	z-index: 41;
	position: absolute;
	left: 0px;
	top: -16px;
	opacity: 0; 
}

#allColumns{
	position: absolute;
	top: 70px;
	left: 58px;
	width: 230px;
	height: 130px;
	z-index: 1;
}

#column1{
	position: absolute;
	top: 40px;
	left: 20px;
	width: 140px;
	height: 62px;
}
#eGroup1{
	top: 15px;
	left: -5px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup2{
	top: 7px;
	left: 28px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup3{
	top: -10px;
	left: 62px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup4{
	top: -21px;
	left: 90px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#column2{
	position: absolute;
	top: 70px;
	left: 75px;
	width: 144px;
	height: 66px;
}

#eGroup5{
	top: 3px;
	left: -33px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup6{
	top: -10px;
	left: 8px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup7{
	top: -20px;
	left: 32px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup8{
	top: -35px;
	left: 63px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#column3{
	position: absolute;
	top: 70px;
	left: 65px;
	width: 145px;
	height: 66px;
}

#eGroup9{
	top: 23px;
	left: 0px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup10{
	top: 10px;
	left: 24px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup11{
	top: -8px;
	left: 60px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#eGroup12{
	top: -20px;
	left: 98px;
	z-index: 2;
	position: absolute;
	opacity: 0;
}

#rightPointArrow{
	position: absolute;
	top: 215px;
	left: 81px;
	z-index: 2;
	opacity: 0;
}

#leftPointArrow{
	position: absolute;
	top: 220px;
	left: 173px;
	z-index: 2;
	opacity: 0;
}