 html

{

    -moz-user-select     : none;

    -khtml-user-select   : none;

    -webkit-user-select  : none;

    -o-user-select       : none;

    user-select          : none;

}



#simscreen

{

	position: relative;

	left:0px;

	top:0px;

	height: 600px; 

	width:800px;

	border:solid 1px;

	background-color: #dce5ec;

}



#title{

	position:relative;

	left: 0px;

	top: 0px;

	height:40px;

	font-size: 20px;

	text-align:center;

	background-color: #ff6600;

	font-family: verdana;

	color: White;

	text-transform: uppercase;

}



#title h3

{

	padding-top:5px;

	margin:0px;

}



.simsubscreen

{

	position:absolute;
	
	left: 10px;
    
    top: 40px;
    
    height: 558px;
    
    width: 788px;

	background-color: #dce5ec;

}



.incanvas

{

	margin:10px 0 0 10px;

	padding:0;

}



#nextButton

{

	position:absolute;

	left:750px;

	top:530px;

	cursor:pointer;

}



.circlebg

{
	border-radius:20%;

	padding: 0px 2px 0px 2px;

	font-size:20px;

	color:#FFF;

	text-align:center;

	background: #2150a0;
}



.steptext

{

	display:inline;

	font-size:14px;

}



/* canvas 1 */

/* curing cube 1*/
/* Chrome, Safari, Opera */

@-webkit-keyframes cubeFromCuringTank1

{

	0% {left:175px; top:225px;}

	20%{left:175px; top:140px;}

	100% {left:650px; top:140px;}

}



/* Standard syntax */

@keyframes cubeFromCuringTank1

{

	0% {left:175px; top:225px;}

	20%{left:175px; top:140px;}

	100% {left:650px; top:140px;}

}

/* Date cube 1*/
/* Chrome, Safari, Opera */
@-webkit-keyframes cubedateFromCuringTank1

{
	0% {left: 192px; top: 230px;}
	20%{left:192px; top:138px;}
	100% {left:665px; top:138px;}
}


/* Standard syntax 

@keyframes cubedateFromCuringTank1

{
	0% {left: 192px; top: 230px;}
	20%{left:192px; top:145px;}
	100% {left:667px; top:145px;}
}*/


/* curing cube 2*/
/* Chrome, Safari, Opera */

@-webkit-keyframes cubeFromCuringTank2

{

	0% {left:120px; top:315px;}

	20%{left:120px; top:140px;}

	100% {left:550px; top:140px;}

}



/* Standard syntax */

@keyframes cubeFromCuringTank2 

{

	0% {left:120px; top: 315px;}

	20%{left:120px; top:140px;}

	100% {left:550px; top:140px;}

}


/* Date cube 2*/
/* Chrome, Safari, Opera */
@-webkit-keyframes cubedateFromCuringTank2

{
	0% {left: 135px; top: 314px;}
	20%{left:135px; top:138px;}
	100% {left:565px; top:138px}
}   




/* Standard syntax 

@keyframes cubedateFromCuringTank2

{
	0% {left: 192px; top: 230px;}
	20%{left:192px; top:145px;}
	100% {left:567px; top:145px;}
}*/


/* curing cube 3*/
/* Chrome, Safari, Opera */

@-webkit-keyframes cubeFromCuringTank

{

	0% {left:235px; top:305px;}

	20%{left:235px; top:140px;}

	100% {left:450px; top:140px;}

}



/* Standard syntax  */

@keyframes cubeFromCuringTank 

{

	0% {left:235px; top:305px;}

	20%{left:235px; top:140px;}

	100% {left:450px; top:140px;}

}


/* Date cube 3*/
/* Chrome, Safari, Opera */
@-webkit-keyframes cubedateFromCuringTank3

{
	0% { left: 250px; top: 303px;}
	20%{left: 250px; top: 138px;}
	100% {left: 465px; top: 138px;}
}



/* Standard syntax */

@keyframes cubedateFromCuringTank3

{
	0% { left: 250px; top: 303px;}
	20%{left:250px; top:138px;}
	100% {left: 465px; top: 138px;}
}

/* canvas 4 */

/* Chrome, Safari, Opera */

@-webkit-keyframes cubeFromctm

{

	0% {left: 38px; top:385px;}

	/*25%{transform:rotate(0deg);}*/
	25% {left:38px; top:210px;}

	/*50%{transform: rotate(90deg);}*/
	50% {left:38px; top:210px;}

	/*75%{transform: rotateY(-90deg);}*/
	75% {left:38px; top:210px;}

	/*100%{transform: rotateY(-90deg);}*/
	100%{left:38px; top:210px;}

}



/* Chrome, Safari, Opera */

@-webkit-keyframes cubedateFromctm

{
	0% { left: 45px; top: 382px;}
 
	50% {left:45px; top:207px;}

	100%{left:45px; top:207px;}
 
}

/* Standard syntax 

@keyframes cubedateFromctm 

{

	0% {left:62px; top:390px;}

	100%{left:62px; top:215px;}

}*/



@-webkit-keyframes movetoppad11

{

	0% {left: 37px; top: 130px;}

	/*50% {left: 35px; top:210px;}*/

	100%{left: 37px; top: 210px;}

}

@-webkit-keyframes movetoppad21

{

	0% {left: 37px; top: 300px;}

	/*50% {left: 44px; top:260px;}*/

	100%{left: 37px; top: 265px;}

}

@-webkit-keyframes movegauge11

{

	0% {left: 35px; top: 130px;}

	/*50% {left: 44px; top:260px;}*/

	100%{left: 35px; top: 226px;}

}

/* Standard syntax */

@keyframes cubeFromCuringctm 

{

	0% {left:42px; top:214px;}

	100%{left:42px; top:214px;}

}

/* Chrome, Safari, Opera */

@-webkit-keyframes cubechangectm

{

	0% {left:42px; top:206px; }



	100%{left: 376px; top: 204px;}

}

/* Standard syntax */

@keyframes cubechangectm 

{

	0% {left:42px; top:206px; }

	100%{left: 376px; top: 204px;}
	
}

/* Chrome, Safari, Opera */

@-webkit-keyframes cubedatechangectm

{

	0% {left:53px; top:230px; transform: rotate(90deg);}


	100%{left:388px; top:230px; transform: rotate(0deg);}

}

/* Standard syntax */

@keyframes cubedatechangectm 

{

	0% {left:53px; top:230px; transform: rotate(90deg);}


	100%{left:388px; top:230px; transform: rotate(0deg);}

}


/* Chrome, Safari, Opera */

@-webkit-keyframes cubechange

{
	0%{transform:rotate(0deg);}
	
	30%{transform:rotate(60deg);}

	60%{transform:rotate(120deg);}

	100%{transform:rotate(180deg);}

}

/* Standard syntax */

@keyframes cubechange 

{
	0%{transform:rotate(0deg);}
	
	30%{transform:rotate(60deg);}

	60%{transform:rotate(120deg);}

	100%{transform:rotate(180deg);}
	
}
/* Chrome, Safari, Opera */

@-webkit-keyframes wipeOutMoisture

{

	0% {left:390px; top:375px;}

	30% {left:390px; top:100px;}

	40% {left:525px; top:100px;}

	50% {left:425px; top:100px;}

	60% {left:525px; top:100px;}

	70% {left:390px; top:100px;}

	100% {left:390px; top:375px;}

}



/* Standard syntax */

@keyframes wipeOutMoisture 

{

	0% {left:390px; top:375px;}

	30% {left:390px; top:100px;}

	40% {left:625px; top:100px;}

	50% {left:425px; top:100px;}

	60% {left:625px; top:100px;}

	70% {left:390px; top:100px;}

	100% {left:390px; top:375px;}

}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin10

{
	0% {transform: rotate(-130deg);}
/* 	10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }*/	
	100% { transform: rotate(-88deg); }/* 
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); }
	100% { transform: rotate(-130deg); } */

}


/* Standard syntax */

@keyframes clockpin10 

{

	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); } */	
	100% { transform: rotate(-88deg); }/*
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); } 
	100% { transform: rotate(-130deg); } */


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin210

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg);}
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 
	50% { transform: rotate(-88deg); }*/
	100% { transform: rotate(-88deg); } 

}


/* Standard syntax */

@keyframes clockpin210 

{

	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 
	50% { transform: rotate(-88deg); }*/
	100% { transform: rotate(-88deg); }  


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin15

{/* */
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg); }
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }	
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/* 
    70% { transform: rotate(52deg); }
    80% { transform: rotate(85deg);}
	90% { transform: rotate(0deg); }*/
	100% { transform: rotate(-130deg); } 

}


/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin215

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg);}
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/*
    70% { transform: rotate(52deg); }	
	80% { transform: rotate(85deg); } */
	100% { transform: rotate(85deg); } 

}




/* Chrome, Safari, Opera */

@-webkit-keyframes clock_unload

{
	0% {transform: rotate(-40deg);}
	/*10% { transform: rotate(-113deg);}
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 
	50% { transform: rotate(-88deg); }*/
	100% { transform: rotate(-88deg); } 

}


/* Standard syntax */

@keyframes clock_unload 

{

	0% {transform: rotate(-40deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 
	50% { transform: rotate(-88deg); }*/
	100% { transform: rotate(-88deg); }  


}





/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin10a

{
	0% {transform: rotate(-88deg);}
/* 	10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }*	
	50% { transform: rotate(-80deg); }* 
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); }*/
	100% { transform: rotate(-40deg); } 

}


/* Standard syntax */

@keyframes clockpin10a 

{

	0% {transform: rotate(-88deg);}

	100% { transform: rotate(-40deg); } 


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin210a

{
	0% {transform: rotate(-88deg);}

	100% { transform: rotate(-40deg); } 

}


/* Standard syntax */

@keyframes clockpinbr1 

{

	0% {transform: rotate(-40deg);}

	100% { transform: rotate(-20deg); } 


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpinbr1

{
	0% {transform: rotate(-40deg);}

	100% { transform: rotate(-20deg); } 

}

/* Standard syntax */

@keyframes clockpin210a 

{

	0% {transform: rotate(-88deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 
	50% { transform: rotate(-80deg); }*/
	100% { transform: rotate(-40deg); }  


}
/* Standard syntax */

@keyframes recube 

{

	0% {left: 90px;}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }*/	
	 
	50% {left: 99px;}
	100% {left: 90px;}  


}
/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin15a

{/* */
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg); }
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }	
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/* 
    70% { transform: rotate(52deg); }
    80% { transform: rotate(85deg);}
	90% { transform: rotate(0deg); }*/
	100% { transform: rotate(-130deg); } 

}


/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin215a

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg);}
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/*
    70% { transform: rotate(52deg); }	
	80% { transform: rotate(85deg); } */
	100% { transform: rotate(85deg); } 

}











/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin10b

{
	0% {transform: rotate(-130deg);}
/* 	10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }*/	
	50% { transform: rotate(-93deg); }/* 
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); }*/
	100% { transform: rotate(-130deg); } 

}


/* Standard syntax */

@keyframes clockpin10b 

{

	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); } */	
	50% { transform: rotate(-93deg); }/*
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); } */
	100% { transform: rotate(-130deg); } 


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin210b

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg);}
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 */
	50% { transform: rotate(-93deg); }
	100% { transform: rotate(-93deg); } 

}


/* Standard syntax */

@keyframes clockpin210b 

{

	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 */
	50% { transform: rotate(-93deg); }
	100% { transform: rotate(-93deg); }  


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin15b

{/* */
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg); }
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }	
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/* 
    70% { transform: rotate(52deg); }
    80% { transform: rotate(85deg);}
	90% { transform: rotate(0deg); }*/
	100% { transform: rotate(-130deg); } 

}


/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin215b

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg);}
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/*
    70% { transform: rotate(52deg); }	
	80% { transform: rotate(85deg); } */
	100% { transform: rotate(85deg); } 

}


/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin10c

{
	0% {transform: rotate(-130deg);}
/* 	10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }*/	
	50% { transform: rotate(-98deg); }/* 
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); }*/
	100% { transform: rotate(-130deg); } 

}


/* Standard syntax */

@keyframes clockpin10c 

{

	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); } */	
	50% { transform: rotate(-98deg); }/*
	60% { transform: rotate(-55deg); }
    70% { transform: rotate(-62deg); }
    80% { transform: rotate(-79deg);}
	80% { transform: rotate(-96deg); }
	90% { transform: rotate(-113deg); } */
	100% { transform: rotate(-130deg); } 


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin210c

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg);}
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 */
	50% { transform: rotate(-98deg); }
	100% { transform: rotate(-98deg); } 

}


/* Standard syntax */

@keyframes clockpin210c 

{

	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-113deg); }
	20% { transform: rotate(-96deg); }
	30% { transform: rotate(-79deg); }
	40% { transform: rotate(-62deg); }	
	 */
	50% { transform: rotate(-98deg); }
	100% { transform: rotate(-98deg); }  


}

/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin15c

{/* */
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg); }
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }	
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/* 
    70% { transform: rotate(52deg); }
    80% { transform: rotate(85deg);}
	90% { transform: rotate(0deg); }*/
	100% { transform: rotate(-130deg); } 

}


/* Chrome, Safari, Opera */

@-webkit-keyframes clockpin215c

{
	0% {transform: rotate(-130deg);}
	/*10% { transform: rotate(-104deg);}
	20% { transform: rotate(-78deg); }
	30% { transform: rotate(-52deg); }
	40% { transform: rotate(-26deg); }
	50% { transform: rotate(0deg); } */
	60% { transform: rotate(85deg); }/*
    70% { transform: rotate(52deg); }	
	80% { transform: rotate(85deg); } */
	100% { transform: rotate(85deg); } 

}



















/* Chrome, Safari, Opera */

@-webkit-keyframes crek1

{

	0% {left:86px; top:282px;}

	100%{left:53px; top:455px; transform: rotate(-90deg);}

	/*100% {left:365px; top:210px;}*/

}

/* Standard syntax */

@keyframes crek1 

{

	0% {left:86px; top:282px;}

	100%{left:53px; top:455px; transform: rotate(-90deg);}
	
}

/* Chrome, Safari, Opera */

@-webkit-keyframes crek2

{

	0% {left:108px; top:282px;}

	100%{left:153px; top:455px; transform: rotate(90deg);}

	/*100% {left:365px; top:210px;}*/

}

/* Standard syntax */

@keyframes crek2 

{

	0% {left:108px; top:282px;}

	100%{left:153px; top:455px; transform: rotate(90deg);}
	
}


/* Chrome, Safari, Opera */

@-webkit-keyframes crek3

{

	0% {left: 99px; top:282px;}

	100%{left: 95px; top:455px; transform: rotate(270deg);}

	/*100% {left:365px; top:210px;}*/

}

/* Standard syntax */

@keyframes crek3 

{

	0% {left: 99px; top:282px;}

	100%{left: 95px; top:455px; transform: rotate(270deg);}
	
}

/*start Blinking*/

.blink_me {
  animation: blinker 1s linear infinite;
  color: #083685;
}

@keyframes blinker {
  50% {
  	color: #2150a0;
    opacity: 0;
  }
}
