/* PAGE CONTENT STYLES BEGINS*/

#page_content{
	width:100%;
	height:100%;
	position:relative;
	top:0px;
	left:0px;
	
}
#page_content *{
	font-family:'Proxima Nova Regular';
}
#vlab_assets{
	width:100%;
	height:100%;
}
.lab_screen{
	width:100%;
	height:100%;
}
#lab_screen1{
	background:url(../images/main_bg.png) no-repeat;	
}
#electroUnit{
	position: absolute;
	width: 111px;
	height: 62px;
	top: 142px;
	left: 30px;
	background: url("../images/rna.png") no-repeat;
	
	-webkit-animation	: pointAni1 0.8s steps(3) infinite;
	-moz-animation		: pointAni1 0.8s steps(3) infinite;
	-o-animation		: pointAni1 0.8s steps(3) infinite;
	animation			: pointAni1 0.8s steps(3) infinite;
}
@-webkit-keyframes pointAni1{
     to { background-position: -333px; }
}
@keyframes pointAni1{
     to { background-position: -333px; }
}

#measure_Unit{
	position: absolute;
	width: 109px;
	height: 64px;
	top: 142px;
	left: 563px;
	background: url("../images/measure_sprite.png") no-repeat left center;;
	
	-webkit-animation	: pointAni 0.8s steps(4) infinite;
	-moz-animation		: pointAni 0.8s steps(4) infinite;
	-o-animation		: pointAni 0.8s steps(4) infinite;
	animation			: pointAni 0.8s steps(4) infinite;
}
@-webkit-keyframes pointAni{
     to { background-position: -440px; }
}
@keyframes pointAni{
     to { background-position: -440px; }
}
.tube_drag{
	position: absolute;
	width: 23px;
	height: 160px;
	top: 272px;
	cursor: pointer;
}
#testTube1{
	left: 463px;
	background: url(../images/tube1.png) no-repeat;
}
#testTube2{
	left: 497px;
	background: url(../images/tube2.png) no-repeat;
}
#testTube3{
	left: 530px;
	background: url(../images/tube3.png) no-repeat;
}
#testTube4{
	left: 565px;
	background: url(../images/tube4.png) no-repeat;
}
#testTube5{
	left: 599px;
	background: url(../images/tube5.png) no-repeat;
}
#testTube6{
	left: 634px;
	background: url(../images/tube6.png) no-repeat;
}

#droptube {
	position: relative;
	width: 159px;
	height: 54px;
	top: 152px;
	left: 262px;
}


#lab_book{
	position: absolute;
	width: 26%;
	height: 22%;
	left: 64%;
	top: 70%;
	cursor:pointer;
	padding-left:8px;
}


#lab_book:hover{
background: url(../images/book_hover_blk.png) no-repeat -1px 0px;
opacity:1;

}
.pages{
	position: absolute;
	width: 659px;
	height: 423px;
	top: 92px;
	left: 12px;
	z-index: 9999;
	display:none;
}

.hide
{
	display: none;
}
.page1{
	background:url("../images/page1.png")no-repeat;
	display:none;
}
.page2{
	background:url("../images/page2.png")no-repeat;
	display:none;
}
.page3{
	background:url("../images/page3.png")no-repeat;
	display:none;
}
.page4{
	background:url("../images/page4.png")no-repeat;
	display:none;
}
.page5{
	background:url("../images/page5.png")no-repeat;
	display:none;
}
.page6{
	background:url("../images/page6.png")no-repeat;
	display:none;
}
.page7{
	background:url("../images/page7.png")no-repeat;
	display:none;
}
.page8{
	background:url("../images/page8.png")no-repeat;
	display:none;
}

.dropper{
	position: relative;
	width: 21px;
	height: 126px;
	top: 321px;
	left: 311px;
	cursor:pointer;
	background: url("../images/drop.png")no-repeat;	
}
.dropper.active{
	background: url("../images/dropper.png")no-repeat;
	top:229px;
}

.drag{
	width: 52px;
	height: 81px;
	top: 484px;
	cursor:pointer;
	position:absolute;
	z-index:190;
}
.test1{	
	left: 197px;
	background:url(../images/test1.png) no-repeat left top;	
}

.test1.active{
	background-position:-65px 0px;
}
.test2{
	left: 260px;
	background: url(../images/test2.png) no-repeat left top;
}
.test2.active{
	background-position:-65px 0px;
}
.test3{
	left: 323px;
	background: url(../images/test3.png) no-repeat left top;
}
.test3.active{
	background-position:-65px 0px;
}

.dropper_drop{
	width: 37px;
	height: 120px;
	top: 436px;
	cursor: pointer;
	z-index: 1000;
	position: absolute;
}
#tt1{
	left: 197px;	
}
#tt2{
	left: 260px;
	
}
#tt3{
	left: 323px;
} 
.drop {
	position: absolute;
	width: 82px;
	height: 46px;
	top: 364px;
	left: 88px;
}
.drop.active{
	background: url(../images/droparea.png) no-repeat left top;
}

.table{
	position: absolute;
	width: 220px;
	height: 15px;
	top: 311px;
	left: 460px;
	z-index: 99;
	background: url(../images/table.png) no-repeat left top;
}

#comptr_screen{	
	position: absolute;
	width: 158px;
	height: 124px;
	top: 128px;
	left: 261px;
}	

#comptr_screen.img1{
	background: url(../images/1.png) no-repeat;
}
#comptr_screen.img2{
	background: url(../images/2.png) no-repeat;
}
#comptr_screen.img3{
	background: url(../images/3.png) no-repeat;
}
#comptr_screen.img4{
	background: url(../images/4.png) no-repeat;
}
#comptr_screen.img5{
	background: url(../images/5.png) no-repeat;
}
#comptr_screen.img6{
	background: url(../images/6.png) no-repeat;
}
#comptr_screen.img7{
	background: url(../images/7.png) no-repeat;
}

.close_btn{
	width: 18px;
	height: 18px;
	left: 644px;
	top: 99px;
	cursor: pointer;
	z-index: 9999;
	position: absolute;
}
.arrow{
	position: absolute;
	width: 23px;
	height: 20px;
	cursor: pointer;
	z-index: 9999;

}
#forward_btn{
	left: 606px;
	top: 460px;	
}
#forward_btn:hover{
	background: url("../images/right-arrow.png")no-repeat;
}
#previous_btn{
	left: 43px;
	top: 460px;
}
#previous_btn:hover{
	background: url("../images/left-arrow.png")no-repeat;
}

.buttons{
	position: absolute;
	height: 25px;
	background: url(../images/button.png) no-repeat;
	top: 611px;
	left:267px;
	cursor:pointer;
}

#reset_button{
	background-position: bottom right;
	width: 60px;
	left: 318px;
}
#reset_button:hover{
	background-position:top right;
}

.dna_drop{
	position: absolute;
	height: 158px;
	width: 174px;
	top: 99px;
	left: 503px;
	z-index: 1000;
}

.rna_drop{
	position: absolute;
	height: 158px;
	width: 174px;
	top: 99px;
	left: 25px;
	z-index: 1000;
}
.tube_drop{
	position: absolute;
	height: 85px;
	width: 123px;
	top: 151px;
	font-size: 20px;
	color: #fff;
	left: 286px;
	text-align: center;
}

/* PAGE CONTENT STYLES ENDS*/