html
{
	-moz-user-select     : none;
	-khtml-user-select   : none;
	-webkit-user-select  : none;
	-o-user-select       : none;
	user-select          : none;
}
input[type=text]:focus {
    margin: 5px 0;
    display: inline-block;
    border: 1px solid black;
    border-radius: 2px;
    text-align:center;
    background-color:light-grey;
}
input{
	text-align:center;
	font-family:verdana;
	font-size:14px;
}
#table
{
	padding:0px;
	border-collapse: collapse;
    width: 60%;
}
th,td
{
	height:30px;
}


#simscreen
{
	position: relative;
	left:0px;
	top:0px;
	height: 600px; 
	width:800px;
	border:solid 1px;
}

.tmr
{
	position: absolute;
	left:30px;
	top: 60px;
	height: 100px; 
	width:190px;
	border:solid 1px;
}

#copyright{
	position: absolute;
	left:50px;
	top: 580px;
	font-family: verdana; 
	font-size:12px
}

#title{
	position:relative;
	left: 0px;
	top: 0px;
	height:40px;
	font-size: 24px;
	text-align:center;
	background-color: black;
	font-family: verdana;
	color: White;
	text-transform: uppercase; 
}

#title h3{
	padding-top:2px;
	margin:0px;}

#container{
	position:relative;
	width:304px;
	height:77px;
	overflow:hidden;
}


.stepfont
{
	font-family: verdana;
	font-size: 14px;
}


.simsubscreen
{
	position:absolute;
	left: 50px;
	top: 50px;
	height:530px;
	width:745px;

}

.incanvas
{
	margin:5px 0 0 5px;
	padding:0;
	font-family: verdana;
}
#nextButton{
    position: absolute;
    left: 750px;
    top: 530px;
	cursor:pointer;
}
#nextButton1{
    position: absolute;
    left: 750px;
    top: 530px;
	cursor:pointer;
}

#prevButton{
    position: absolute;
    left: 0px;
    top: 532px;
	cursor:pointer;
}

.steptext
{
	display:inline;
	font-size:14px;
	font-family: verdana;
}

.steptext-6
{
	display:inline;
	font-family: verdana;
	font-size:14px;
}

.steptext-2
{
	display:inline;
	font-family: verdana;
	font-size:14px;

}

.circlebg
{
	border-radius:100%;
	font-size:25px;
	color:#fff;
	text-align:center;
	background:#000
}

th {
	padding: 10px;
}

/* -------------------------------------- water ---------------------------------------- */
/* Chrome, Safari, Opera */
@-webkit-keyframes water-4 {
	0% {-webkit-transform: translate(0, 0 );}
	100% {-webkit-transform: translate(0, 40px );}
}

/* Standard syntax */
@keyframes water-4 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(0, 40px);}
}

@-webkit-keyframes water-1 {
	0% {-webkit-transform: translate(0, 0 );}
	100% {-webkit-transform: translate(0, -10px );}
}

/* Standard syntax */
@keyframes water-1 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(0, -10px);}
}

@-webkit-keyframes water-3 {
	0% {-webkit-transform: translate(0, 0 );}
	100% {-webkit-transform: translate(0, -20px );}
}

/* Standard syntax */
@keyframes water-3 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(0, -20px);}
}

@-webkit-keyframes water-5 {
	0% {-webkit-transform: translate(0, 0 );}
	100% {-webkit-transform: translate(0, -35px );}
}

/* Standard syntax */
@keyframes water-5 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(0, -35px);}
}
/* -------------------------------------- constant speed arrow ---------------------------------------- */

/* Chrome, Safari, Opera */
@-webkit-keyframes arrow-1 {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(-50deg);}
}

/* Standard syntax */
@keyframes arrow-1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-50deg);}
}
/* -------------------------------------- constant speed arrow 2 ---------------------------------------- */
/* Chrome, Safari, Opera */
@-webkit-keyframes arrow-11 {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(70deg);}
}

/* Standard syntax */
@keyframes arrow-11 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(70deg);}
}



/* -------------------------------------- ---------------------------------------- */
/* Chrome, Safari, Opera */
@-webkit-keyframes valveturn-2 {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(-10deg);}
}

/* Standard syntax */
@keyframes valveturn-2 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-10deg);}
}

@-webkit-keyframes valveturn-3 {
	0% {-webkit-transform: rotate(0deg);}    
	50% {-webkit-transform: rotate(-20deg);}
	100% {-webkit-transform: rotate(-45deg);}

}

/* Standard syntax */
@keyframes valveturn-3 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-20deg);}
	100% {transform: rotate(-45deg);}
}

@-webkit-keyframes valveturn-5 {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(20deg);}
}

/* Standard syntax */
@keyframes valveturn-5 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(20deg);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes valveturn-4 {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(-15deg);}
}

@keyframes valveturn-6 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-30deg);}
	100% {transform: rotate(-60deg);}

}

/* Chrome, Safari, Opera */
@-webkit-keyframes valveturn-6 {
	0% {-webkit-transform: rotate(0deg);}    
	50% {-webkit-transform: rotate(-30deg);}
    100% {transform: rotate(-60deg);}
}

@keyframes valveturn-7 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(1800deg);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes valveturn-7 {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(1800deg);}
}

/* Standard syntax */
@keyframes valveturn-4 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-15deg);}
}

/* Standard syntax */
@keyframes water0 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(0, -100px);}
}

/* Standard syntax */
@keyframes water0 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(0, -100px);}
}


/*-----------------------------------------hook gauge----------------------- */
/* Chrome, Safari, Opera */
@-webkit-keyframes myhook-1 {
	0% {-webkit-transform: translate(0, 0 );}
	50% {-webkit-transform: translate(0, -15px );}
	100% {-webkit-transform: translate(0, 8px );}
}

/* Standard syntax */
@keyframes myhook-1 {
    0% {transform: translate(0, 0);}
	50% {transform: translate(0, -15px);}	
    100% {transform: translate(0, 8px);}
}

@-webkit-keyframes mymv-1 {
	0% {left: 50px; top:305px;}
    50% {left: 130px; top:305px;}
	100% {left: 50px; top:305px;}
}

/* Standard syntax */
@keyframes mymv-1 {
	0% {left: 50px; top:305px;}
    50% {left: 130px; top:305px;}
	100% {left: 50px; top:305px;}
}


@-webkit-keyframes mymv-2 {
	from{left: 130px; top:345px;}
	to {left: 50px; top:345px;}

}

/* Standard syntax */
@keyframes mymv-2{
	from {left: 130px; top:345px;}
	to {left: 50px; top:345px;}

}

@-webkit-keyframes mymv-3 {
	from {left: 110px; top:200px;}
	to {left: 150px; top:304px;}
}

/* Standard syntax */
@keyframes mymv-3{
	from {left: 110px; top:200px;}
	to {left: 150px; top:304px;}
}

@-webkit-keyframes mymv-4 {
	from {left: 160px; top:300px;}
	to {left: 415px; top: 230px;}
}

/* Standard syntax */
@keyframes mymv-4{
	from  {left: 160px; top:300px;}
	to {left: 415px; top: 230px;}   
}

@-webkit-keyframes mymv-5 {
	from {left: 160px; top:300px;}
	to {left: 415px; top: 230px;}
}

/* Standard syntax */
@keyframes mymv-5{
	from  {left: 160px; top:300px;}
	to {left: 415px; top: 230px;}   
}


@-webkit-keyframes myhook-2 {
	0% {-webkit-transform: translate(0, 0 );}
	50% {-webkit-transform: translate(0, -50px );}
	100% {-webkit-transform: translate(0, -15px );}
}

/* Standard syntax */
@keyframes myhook-2 {
    0% {transform: translate(0, 0px);}
	50% {transform: translate(0, -50px);}
	100% {transform: translate(0, -15px);}
}

@keyframes mymv-ln{
	from  {left: 114px; top: 64px;}
	to {left: 114px; top: 70px;}   
}


@keyframes mymv-arw{
	from  {left: 130px; top: 193px;}
	to {left: 130px; top: 196px;}   
}

@keyframes mymv-ndl{
	from {left: 40.5px; top: 330px;}
	to {left: 40.5px; top: 336px;}   
}


@keyframes mymv-zmv{
	from  {left: 415px; top: 200px;}
	to {left: 415px; top: 203px;}   
}

@keyframes mymv-arw2{
	from  {left: 130px; top: 196px;}
	to {left: 130px; top: 250px;}   
}



@keyframes mymv-zmv2{
	from  {left: 415px; top: 203px;}
	to {left: 415px; top: 282px;}   
}


@keyframes mymv-zmv1{
	from  {left: 415px; top: 203px;}
	to {left: 415px; top: 279px;}   
}

@keyframes mymv-zmv3{
	from  {left: 415px; top: 203px;}
	to {left: 415px; top: 276px;}   
}

@keyframes mymv-zmv4{
	from  {left: 415px; top: 203px;}
	to {left: 415px; top: 275px;}   
}

@keyframes mymv-zmv5{
	from  {left: 415px; top: 203px;}
	to {left: 415px; top: 273px;}   
}
/* rod move */
@keyframes rod-move{
	from  {left:100px; top: 100px;}
	to {left:104px; top: 256px;}   
}
@-webkit-keyframes  rod-move{
	from  {left:100px; top: 100px;}
	to {left:104px; top: 256px;}   
}


/* cali-move		 */
@keyframes cali-move{
	from  {left:180px; top: 202px;}
	to {left:120px; top: 202px;}   
}
@-webkit-keyframes  cali-move{
	from  {left:180px; top: 202px;}
	to {left:120px; top: 202px;}   
}


/* hand-move */
@keyframes hand-move{
	from  {left:560px; top: 85px;}
	to {left:400px; top: 85px;}   
}

@-webkit-keyframes hand-move{
	from  {left:560px; top: 85px;}
	to {left:400px; top: 85px;}   
}


/* zimg */
@keyframes zimg-move{
	from  {left:60px; top: 270px;}
	to {left:400px; top: 125px;}   
}

@-webkit-keyframes zimg-move{
	from  {left:60px; top: 270px;}
	to {left:400px; top: 125px;}   
}


/* mld2 */
@keyframes mld2-move{
	from  {left:400px; top: 125px;}
	to {left:400px; top: 135px;}   
}

@-webkit-keyframes mld2-move{
from  {left:400px; top: 125px;}
to {left:400px; top: 135px;}   
}

@keyframes drod-move{
	0%  { left:583px; top: 255px;}
	5% { left:583px; top: 258px;}   
	10% { left:583px; top: 260px;}   
	15% { left:583px; top: 262px;}   
	20% { left:583px; top: 264px;}   
	25% { left:585px; top: 266px;}   
	30% { left:586px; top: 268px;}   
	35% { left:587px; top: 268px;}   
	40% { left:588px; top: 268px;}   
	45% { left:589px; top: 268px;}   
	50% { left:590px; top: 270px;}   
	55% { left:592px; top: 270px;}   
	60% { left:594px; top: 270px;}   
	65% { left:594px; top: 280px;}   
	70% { left:594px; top: 282px;}   
	80% { left:595px; top: 284px;}   
	90% { left:596px; top: 286px;}   
	100% { left:598px; top: 287px;}   
}

@-webkit-keyframes drod-move{
	0%  { left:583px; top: 255px;}
	5% { left:583px; top: 258px;}   
	10% { left:583px; top: 260px;}   
	15% { left:583px; top: 262px;}   
	20% { left:583px; top: 264px;}   
	25% { left:585px; top: 266px;}   
	30% { left:586px; top: 268px;}   
	35% { left:587px; top: 268px;}   
	40% { left:588px; top: 268px;}   
	45% { left:589px; top: 268px;}   
	50% { left:590px; top: 270px;}   
	55% { left:592px; top: 270px;}   
	60% { left:594px; top: 270px;}   
	65% { left:594px; top: 280px;}   
	70% { left:594px; top: 282px;}   
	80% { left:595px; top: 284px;}   
	90% { left:596px; top: 286px;}   
	100% { left:598px; top: 287px;}  
}


@keyframes drodLeft-move{
	0%  { left:560px; top: 255px;}
	5% { left:560px; top: 258px;}   
	10% { left:560px; top: 260px;}   
	15% { left:560px; top: 262px;}   
	20% { left:560px; top: 264px;}   
	25% { left:558px; top: 266px;}   
	30% { left:557px; top: 268px;}   
	35% { left:556px; top: 268px;}   
	40% { left:555px; top: 268px;}   
	45% { left:554px; top: 268px;}   
	50% { left:553px; top: 270px;}   
	55% { left:551px; top: 270px;}   
	60% { left:549px; top: 270px;}   
	65% { left:549px; top: 270px;}   
	70% { left:549px; top: 270px;}   
	80% { left:548px; top: 270x;}   
	90% { left:547px; top: 270px;}   
	100% { left:547px; top: 275px;transform: rotate(-185deg);}   
}

@-webkit-keyframes drodLeft-move{
	0%  { left:560px; top: 255px;}
	5% { left:560px; top: 258px;}   
	10% { left:560px; top: 260px;}   
	15% { left:560px; top: 262px;}   
	20% { left:560px; top: 264px;}   
	25% { left:558px; top: 266px;}   
	30% { left:557px; top: 268px;}   
	35% { left:556px; top: 268px;}   
	40% { left:555px; top: 268px;}   
	45% { left:554px; top: 268px;}   
	50% { left:553px; top: 270px;}   
	55% { left:551px; top: 270px;}   
	60% { left:549px; top: 270px;}   
	65% { left:549px; top: 270px;}   
	70% { left:549px; top: 270px;}   
	80% { left:548px; top: 270x;}   
	90% { left:547px; top: 270px;}   
	100% { left:547px; top: 277px;transform: rotate(-185deg);}   
}

/* Drod-2 move */
@keyframes drod2-move{
	0% { left:330px; top: 225px;}
	5% { left:330px; top: 228px;}   
	10%{ left:330px; top: 230px;}   
	15% { left:330px; top: 232px;}   
	20% { left:330px; top: 234px;}   
	25% { left:330px; top: 236px;}   
	30% { left:330px; top: 238px;}   
	35% { left:330px; top: 240px;}   
	40% { left:330px; top: 242px;}   
	45% { left:330px; top: 244px;}   
	50% { left:330px; top: 246px;}   
	55% { left:330px; top: 248px;}   
	60% { left:330px; top: 250px;}   
	65% { left:332px; top: 250px;}   
	70% { left:333px; top: 252px;}   
	80% { left:334px; top: 252px;}   
	85% { left:335px; top: 252px;}   
	90% { left:339px; top: 258px;}   
	95% { left:340px; top: 260px;}   
	100% { left:347px; top: 274px;}   
}
@-webkit-keyframes drod2-move{
	0% { left:330px; top: 225px;}
	5% { left:330px; top: 228px;}   
	10%{ left:330px; top: 230px;}   
	15% { left:330px; top: 232px;}   
	20% { left:330px; top: 234px;}   
	25% { left:330px; top: 236px;}   
	30% { left:330px; top: 238px;}   
	35% { left:330px; top: 240px;}   
	40% { left:330px; top: 242px;}   
	45% { left:330px; top: 244px;}   
	50% { left:330px; top: 246px;}   
	55% { left:330px; top: 248px;}   
	60% { left:330px; top: 250px;}   
	65% { left:332px; top: 250px;}   
	70% { left:333px; top: 252px;}   
	80% { left:334px; top: 252px;}   
	85% { left:335px; top: 252px;}   
	90% { left:339px; top: 258px;}   
	95% { left:340px; top: 260px;}   
	100% { left:347px; top: 274px;}     
}

/* Drod-2 move */
@keyframes drod2Left-move{
	0% { left:285px; top: 225px;}
	5% { left:285px; top: 228px;}   
	10%{ left:285px; top: 230px;}   
	15% { left:285px; top: 232px;}   
	20% { left:285px; top: 234px;}   
	25% { left:285px; top: 236px;}   
	30% { left:285px; top: 238px;}   
	35% { left:285px; top: 240px;}   
	40% { left:285px; top: 242px;}   
	45% { left:285px; top: 244px;}   
	50% { left:285px; top: 246px;}   
	55% { left:285px; top: 248px;}   
	60% { left:285px; top: 250px;}   
	65% { left:283px; top: 250px;}   
	70% { left:282px; top: 252px;}   
	80% { left:281px; top: 252px;}   
	85% { left:280px; top: 252px;}   
	90% { left:276px; top: 258px;}   
	95% { left:275px; top: 258px;}   
	100% { left:268px; top: 263px;}   
}
@-webkit-keyframes drod2Left-move{
	0% { left:285px; top: 225px;}
	5% { left:285px; top: 228px;}   
	10%{ left:285px; top: 230px;}   
	15% { left:285px; top: 232px;}   
	20% { left:285px; top: 234px;}   
	25% { left:285px; top: 236px;}   
	30% { left:285px; top: 238px;}   
	35% { left:285px; top: 240px;}   
	40% { left:285px; top: 242px;}   
	45% { left:285px; top: 244px;}   
	50% { left:285px; top: 246px;}   
	55% { left:285px; top: 248px;}   
	60% { left:285px; top: 250px;}   
	65% { left:283px; top: 250px;}   
	70% { left:282px; top: 252px;}   
	80% { left:281px; top: 252px;}   
	85% { left:280px; top: 252px;}   
	90% { left:276px; top: 258px;}   
	95% { left:275px; top: 258px;}   
	100% { left:268px; top: 263px;}    
}


/* Swing movement css
Not required in this simulation */

@keyframes drod-rot{
	0%  { transform: rotate(0deg);}
	5% { transform: rotate(80deg);}   
	10% { transform: rotate(-80deg);}   
	15% { transform: rotate(70deg);}   
	20% { transform: rotate(-70deg);}   
	25% { transform: rotate(60deg);}   
	30% { transform: rotate(-60deg);}   
	35% { transform: rotate(50deg);}   
	40% { transform: rotate(-50deg);}   
	45% { transform: rotate(40deg);}   
	50% { transform: rotate(-40deg);}   
	55% { transform: rotate(30deg);}   
	60% { transform: rotate(-30deg);}   
	65% { transform: rotate(20deg);}   
	70% { transform: rotate(-20deg);}   
	80% { transform: rotate(10deg);}   
	90% { transform: rotate(-10deg);}   
	100% { transform: rotate(0deg);}   
}
@-webkit-keyframes drod-rot{
	0%  { -webkit-transform: rotate(0deg);}
	5% { -webkit-transform: rotate(80deg);}   
	10% {-webkit-transform: rotate(-80deg);}   
	15% {-webkit- transform: rotate(70deg);}   
	20% { -webkit-transform: rotate(-70deg);}   
	25% { -webkit-transform: rotate(60deg);}   
	30% { -webkit-transform: rotate(-60deg);}   
	35% { -webkit-transform: rotate(50deg);}   
	40% { -webkit-transform: rotate(-50deg);}   
	45% { -webkit-transform: rotate(40deg);}   
	50% { -webkit-transform: rotate(-40deg);}   
	55% { -webkit-transform: rotate(30deg);}   
	60% { -webkit-transform: rotate(-30deg);}   
	65% { -webkit-transform: rotate(20deg);}   
	70% {-webkit- transform: rotate(-20deg);}   
	80% { -webkit-transform: rotate(10deg);}   
	90% { -webkit-transform: rotate(-10deg);}   
	100% { -webkit-transform: rotate(0deg);}   
}
@-webkit-keyframes needle-move {
	0% {-webkit-transform: rotate(0deg);}    
	100% {-webkit-transform: rotate(60deg);}
}



@keyframes needle-move {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(60deg);}
}



/*-----------------------------------------blink----------------------- */
/*------------------------------------ZOOOM--------------*/
.zoom
{
	 zoom: 150%; 
}