html
{
    -moz-user-select     : none;
    -khtml-user-select   : none;
    -webkit-user-select  : none;
    -o-user-select       : none;
    user-select          : none;
}

input[type=text]:focus {
    padding: 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    border-radius: 4px;
    text-align:center;
    background-color:#D3D3D3
}

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

#copyright{
position: absolute;
left:45px;
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;}


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

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

}

.incanvas
{
margin:5px 0 0 5px;
padding:0;
}
#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
}


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

/* Standard syntax */
@keyframes hammerturn-1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(100deg);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes hammerturn-2 {/*needle rotation*/
0% {-webkit-transform: rotate(0deg);}    
100% {-webkit-transform: rotate(69deg);}
}

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

/* Chrome, Safari, Opera */
@-webkit-keyframes hammerturn-3 {/*needle rotation*/
0% {-webkit-transform: rotate(0deg);}    
100% {-webkit-transform: rotate(49deg);}
}

/* Standard syntax */
@keyframes hammerturn-3 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(49deg);}
}




/* CSS to swing hammer not used in javascript instead rotation() is used */
@-moz-keyframes swing{
0%  { transform: rotate(0deg);}
1% { transform: rotate(1deg);}
2% {transform: rotate(2deg);}  
3% { transform: rotate(3deg);}
4% {transform: rotate(4deg);}
5% {transform: rotate(5deg);} 
6% {transform: rotate(6deg);} 
7% {transform: rotate(7deg);} 
8% {transform: rotate(8deg);} 
9% {transform: rotate(9deg);} 
10% {transform: rotate(10deg);} 
11% {transform: rotate(11deg);} 
12% {transform: rotate(12deg);} 
13% {transform: rotate(13deg);} 
14% {transform: rotate(14deg);} 
15% {transform: rotate(15deg);} 
16% {transform: rotate(16deg);} 
17% {transform: rotate(17deg);} 
18% {transform: rotate(18deg);} 
19% {transform: rotate(19deg);} 
20% {transform: rotate(20deg);} 
21% {transform: rotate(21deg);} 
22% {transform: rotate(22deg);} 
23% {transform: rotate(23deg);} 
24% {transform: rotate(24deg);} 
25% {transform: rotate(25deg);} 
}

@-webkit-keyframes swing{
0%  { transform: rotate(0deg);}
4% { transform: rotate(-4deg);}
8% {transform: rotate(-8deg);}  
12% { transform: rotate(-12deg);}
16% {transform: rotate(-16deg);}
20% {transform: rotate(-20deg);} 
24% {transform: rotate(-24deg);} 
28% {transform: rotate(-28deg);} 
32% {transform: rotate(-32deg);} 
36% {transform: rotate(-36deg);} 
40% {transform: rotate(-40deg);}
44% {transform: rotate(-44deg);} 
48% {transform: rotate(-48deg);} 
52% {transform: rotate(-52deg);} 
56% {transform: rotate(-56deg);} 
60% {transform: rotate(-60deg);} 
64% {transform: rotate(-64deg);} 
68% {transform: rotate(-68deg);} 
72% {transform: rotate(-72deg);} 
76% {transform: rotate(-76deg);} 
80% {transform: rotate(-80deg);} 
84% {transform: rotate(-84deg);} 
86% {transform: rotate(-86deg);} 
90% {transform: rotate(-90deg);} 
93% {transform: rotate(-94deg);} 
96% {transform: rotate(-98deg);}
100%{transform: rotate(-105deg);}    
}


@keyframes swing{
0%  { transform: rotate(0deg);}
4% { transform: rotate(-4deg);}
8% {transform: rotate(-8deg);}  
12% { transform: rotate(-12deg);}
16% {transform: rotate(-16deg);}
20% {transform: rotate(-20deg);} 
24% {transform: rotate(-24deg);} 
28% {transform: rotate(-28deg);} 
32% {transform: rotate(-32deg);} 
36% {transform: rotate(-36deg);} 
40% {transform: rotate(-40deg);}
44% {transform: rotate(-44deg);} 
48% {transform: rotate(-48deg);} 
52% {transform: rotate(-52deg);} 
56% {transform: rotate(-56deg);} 
60% {transform: rotate(-60deg);} 
64% {transform: rotate(-64deg);} 
68% {transform: rotate(-68deg);} 
72% {transform: rotate(-72deg);} 
76% {transform: rotate(-76deg);} 
80% {transform: rotate(-80deg);} 
84% {transform: rotate(-84deg);} 
86% {transform: rotate(-86deg);} 
90% {transform: rotate(-90deg);} 
93% {transform: rotate(-94deg);} 
96% {transform: rotate(-98deg);}
100%{transform: rotate(-105deg);}      
}




@-webkit-keyframes mymove2 {
    from   {left: 200px; top: 290px;}
    to  {left:-290px; top:290px;}
    }

@keyframes mymove2 {
   from   {left: 200px; top: 290px;}
    to  {left:-290px; top:290px;}
     
}



/* moving handler */
/* Chrome, Safari, Opera */
@-webkit-keyframes handler1 {
0% {left:229.75px; top:305.25px;}
10%{left:230px; top:306px;}
20% {left:231px; top:307px;}
30% {left:232px; top:308px;}
40% {left:233px; top:308px;}
50% {left:234px; top:308px;}
60% {left:235px; top:308px;}
70% {left:236px; top:308px;}
80% {left:237px; top:308.75px;}
85% {left:238px; top:308.75px;}
90% {left:239px; top:309px;}
100% {left:230px; top:309px;}
}

/* Standard syntax */
@keyframes handler1 {
0% {left:229.75px; top:305.25px;}
10%{left:230px; top:306px;}
20% {left:231px; top:307px;}
30% {left:232px; top:308px;}
40% {left:233px; top:308px;}
50% {left:234px; top:308px;}
60% {left:235px; top:308px;}
70% {left:236px; top:308px;}
80% {left:237px; top:308.75px;}
85% {left:238px; top:308.75px;}
90% {left:239px; top:309px;}
100% {left:230px; top:309px;}
}


@-webkit-keyframes handler2 {
0% {left:220px; top:382.20px;}
10%{left:222px; top:382.20px;}
20% {left:224px; top:382px;}
30% {left:226px; top:382px;}
40% {left:228px; top:382px;}
50% {left:230px; top:382px;}
60% {left:232px; top:382px;}
70% {left:234px; top:382px;}
80% {left:236px; top:382px;}
85% {left:238px; top:382px;}
90% {left:240px; top:382px;}
100% {left:242px; top:382px;}
}

/* Standard syntax */
@keyframes handler2 {
0% {left:220px; top:382.20px;}
10%{left:222px; top:382.20px;}
20% {left:224px; top:382px;}
30% {left:226px; top:382px;}
40% {left:228px; top:382px;}
50% {left:230px; top:382px;}
60% {left:232px; top:382px;}
70% {left:234px; top:382px;}
80% {left:236px; top:382px;}
85% {left:238px; top:382px;}
90% {left:240px; top:382px;}
100% {left:242px; top:382px;}
}

/* move image 71 upwards */
@-webkit-keyframes move1 {
    from   {left:25px; top:270px;}
    to  {left:25px; top:265px;}
    }

@keyframes move1 {
   from   {left:25px; top:270px;}
    to  {left:25px; top:265px;}
 }
 
 @-webkit-keyframes move2 {
    from   {left:25px; top:265px;}
    to  {left:25px; top:255px;}
    }

@keyframes move2 {
   from   {left:25px; top:265px;}
    to  {left:25px; top:255px;}
 }
 
 
  @-webkit-keyframes move3 {
    from   {left:25px; top:255px;}
    to  {left:25px; top:245px;}
    }

@keyframes move3 {
   from   {left:25px; top:255px;}
    to  {left:25px; top:245px;}
 }
 
 
 
 @-webkit-keyframes move4 {
    from   { left:50px; top:250px;}
    to  {left:50px; top:245px;}
    }

@keyframes move4 {
   from   {left:50px; top:250px;}
    to  {left:50px; top:245px;}
 }
 
 @-webkit-keyframes move5 {
    from   {left:50px; top:245px;}
    to  {left:50px; top:235px;}
    }

@keyframes move5 {
    from   {left:50px; top:245px;}
    to  {left:50px; top:235px;}
    }
 }
 
 
@-webkit-keyframes move6 {
    from   {left:50px; top:235px;}
    to  {left:50px; top:224.5px;}
    }

@keyframes move6 {
   from   {left:50px; top:235px;}
    to  {left:50px; top:224.5px;}
 }
 
@-webkit-keyframes moveHand {
	from {left:570px; top:227px;}
	to {left:574px; top:227px;}
}

@keyframes moveHand{
   from {left:570px; top:227px;}
   to{left:574px; top:227px;}
}	

/* // */
@-webkit-keyframes moveHand1{
	from {left:551.5px; top:119.5px;}
	to {left:565.5px; top:119.5px;}
}

@keyframes moveHand1{
    from {left:551.5px; top:119.5px;}
	to {left:565.5px; top:119.5px;}
}

@-webkit-keyframes moveHand2{
	from {left:551.5px; top:119.5px;}
	to {left:578px; top:119.5px;}
}

@keyframes moveHand2{
    from {left:551.5px; top:119.5px;}
	to {left:578px; top:119.5px;}
}

@-moz-keyframes rot1{
0%  { transform: rotate(0deg);}
100% { transform: rotate(219deg);}
}
@keyframes rot1{
0%  { transform: rotate(0deg);}
100% { transform: rotate(219deg);}
}



#3-1n {
    position:relative; 
    height: 200px; 
    width: 200px; 
    margin: 30px;
    background: red;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#3-1n2 {
    position:relative; 
    height: 200px; 
    width: 200px; 
    margin: 30px;
    background: red;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

@-moz-keyframes rotNeedle{
0%  { transform: rotate(100deg);}
100% { transform: rotate(0deg);}
}
@keyframes rotNeedle{
0%  { transform: rotate(100deg);}
100% { transform: rotate(0deg);}
}

@-webkit-keyframes moveWheel {
0% {-webkit-transform: translate(0, 0 );}
100% {-webkit-transform: translate(8px, 0 );}
}

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