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

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

#title{
	width:100%;
    position:absolute;
    left: 0px;
    top: 0px;
    height:40px;
    font-size: 20px;
    text-align:center;
    background-color: black;
    font-family: verdana;
    color: white;
    text-transform: uppercase;
}

.tooltip {
  position: initial;
  display: inline-block;
  border-bottom: 1px dotted black;
  color:red;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;  padding: 5px 10px 5px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip {
  position: initial;
  display: inline-block;
  border-bottom: 1px dotted black;
  color:red;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;  padding: 5px 10px 5px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

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

#question-div{
    position: absolute;
    left:300px;
    top:350px;
    width:300px;
    height:120px;
    border:solid 1px gray;
    background-color: gray;
    filter: alpha(opacity=55);
    color:white;
    visibility:hidden;
}

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

}

.incanvas
{
    margin:15px 0 0 5px;
    padding:0;
}

/*table {*/
/*    font-family: verdana, sans-serif;*/
/*    border-collapse: collapse;*/
/*        border: 0px solid black;*/
/**/
/*    width: 50%;*/
/*left:50px;*/
/*    top:100px;*/
/**/
/*}*/

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 5px;
    font-size:14px;
}

#nextButton{
    position: absolute;
    left: 750px;
    top: 530px;
    cursor:pointer;
}

.steptext{
    display:inline;
}

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



/*#table, td, th {*/
/*    border: 1px solid black;*/
/*}*/
/**/
/**/
/*#table {*/
/*    border-collapse: collapse;*/
/*    width: 80%;*/
/*}*/
/**/
/*#th {*/
/*    height: 50px;*/
/*}*/
/**/
/**/
/*table td{*/
/*  width: 10%;*/
/*  border-collapse: collapse;*/
/*  border: 0px solid black;*/
/*}*/
/**/
/**/
/*table th{*/
/*  width: 100%;*/
/*  border-collapse: collapse;*/
/*  border: 1px solid black;*/
/*}*/
#formulaButton1{
    border: 0px solid black;
    padding: 5px;
    cursor:pointer;
}

#formulaVolume {
    position:absolute;
    left:350px;
    top:190px;
    border: 1px solid black;
    padding: 4px;
    visibility:hidden;

}

#formulaButton01{
    border: 1px solid black;
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;

}

#formulaVolume1 {
    position:absolute;
    left:550px;
    top:190px;
    border: 1px solid black;
    padding: 4px;
    visibility:hidden;

}

#abc2{
    border: 1px solid black;
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#bca2{
    border: 1px solid black;
    left:570px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}



#abc1{
    /* border: 1px solid black; */
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#bca1{
    /* border: 1px solid black; */
    left:570px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}


#abc{
    /* border: 1px solid black; */
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#bca{
    /* border: 1px solid black; */
    left:570px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#abc11{
    /* border: 1px solid black; */
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#bca11{
    /* border: 1px solid black; */
    left:570px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#ca1{
    border: 1px solid black;
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#ca2{
    border: 1px solid black;
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#ca3{
    border: 1px solid black;
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

#cal2{
    border: 1px solid black;
    left:550px;
    top:290px;
    padding: 5px;
    cursor:pointer;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    font-family: verdana;
    font-size:14px;
}

.tooltip .tooltiptext {
    font-family: verdana;
    font-size:14px;
    visibility: hidden;
    width: 230px;
    background-color: lightgrey;
    color: black;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;

    /* Position the tooltip */
    position: absolute;
    left:-30px;
    top:20px;
    z-index: 100;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    height: 100px;
    width: 500px;
}
.door
{
  background-color: white;
  position:absolute;
  top:158px;
  left:20px;
  width:200px;
  height:175px;
  /* border: 10px solid grey; */
  border: 5px double black;
  transform-origin: right;
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
}
.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(125deg);
}
@-webkit-keyframes placeContainerinOven
{
	0% {left: 75px; top: 430px;}
	80% {left:75px; top:190px;}
	100% {left:75px; top:200px;}
}

@keyframes placeContainerinOven
{
	0% {left: 75px; top: 430px;}
	80% {left:75px; top:190px;}
	100% {left:75px; top:200px;}
}

@-webkit-keyframes placeContainerBack
{
	0% {left:75px; top:200px;}
	20% {left:75px; top:190px;}
	100% {left: 75px; top: 430px;}
}

@keyframes placeContainerBack
{
	0% {left:75px; top:200px;}
	20% {left:75px; top:190px;}
	100% {left: 75px; top: 430px;}
}

@-webkit-keyframes move1 {
    from {left: 500px; top: 50px;}
    to {left: 140px; top: 210px;}
}
@keyframes move1 {
    from {left: 500px; top: 50px;}
    to {left: 140px; top: 210px;}
}

@keyframes move2  {
    from {left: 230px; top:100px;}
    to {left: 52px;top: 105px;}
}
@-webkit-keyframes move2 {
    from {left: 230px; top:100px;}
    to {left: 52px;top: 105px;}
}

@keyframes move3 {
    from {left: 230px; top:100px;}
    to {left: 112.5px;top: 105px;}
}
@-webkit-keyframes move3 {
    from {left: 230px; top:100px;}
    to {left: 112.5px;top: 105px;}
}
/* step2 */

@keyframes move4 {
    from {left: 400px; top: 200px;}
    to {left: 100px; top: 50px;}
}
@keyframes move5 {
    from {left: 50px; top: 175px;}
    to {left: 500px; top: 80px;}
}
@-webkit-keyframes move5 {
    from {left: 50px;top: 175px;}
    to {left: 500px;top: 80px;}
}

/* step3 */

@keyframes move6 {
    from {left: 100px; top: 60px;}
    to {left:122px; top: 140px;}
}
@-webkit-keyframes move6 {
    from {left: 100px; top: 60px;}
    to {left:122px; top:140px;}
}

@keyframes move7 {
    from {left: 38px;}
    to{left: 58px; }
}
@-webkit-keyframes move7 {
    from {left: 38px; }
    to{left: 58px; }
}

@keyframes move8 {
    from {left: 58px; }
    to  {left: 38px; }
}
@-webkit-keyframes move8 {
    from {left: 58px;}
    to  {left: 38px; }
}

@keyframes move9 {
    from {left: 150px; top:350px;}
    to {left: 480px; top: 200px;}
}
@-webkit-keyframes move9 {
    from {left: 150px; top:350px;}
    to {left: 480px; top: 200px;}
}

@keyframes moveContainer {
    from {left: 115px; top: 340px;}
    to {left: 500px; top: 200px;}
}
@-webkit-keyframes moveContainer {
    from {left: 115px; top: 340px;}
    to {left: 500px; top: 200px;}
}

@keyframes move10 {
    0% {left: 500px; top: 215px;}
    50% {left: 120px; top: 90px;}
   100% {left: 120px; top: 160px;}
}
@-webkit-keyframes move10 {
    0% {left: 500px; top: 215px;}
    50% {left: 120px; top: 90px;}
   100% {left: 120px; top: 160px;}
}

@keyframes move11 {
    from {left: 50px; top: 290px;}
    to{left: 60px; top: 295px;}
}
@-webkit-keyframes move11 {
    from {left: 50px; top: 290px;}
    to{left: 60px; top: 295px;}
}
@keyframes move12 {
    from {left: 60px; top: 295px;}
    to{left: 50px; top: 290px;}
}
@-webkit-keyframes move12 {
    from {left: 60px; top: 295px;}
    to{left: 50px; top: 290px;}
}

@keyframes move13 {
    from {left: 30px; top: 280px;}
    to {left: 300px;top: 140px;}
}

@-webkit-keyframes move13 {
    from {left: 30px; top: 280px;}
    to {left: 300px;top: 140px;}
}

@keyframes moveTrowel {
    from {left: 300px; top: 200px;}
    to {left: 180px; top: 270px; }
}

@-webkit-keyframes moveTrowel {
    from {left: 300px; top: 200px;}
    to {left: 180px; top: 270px; }
}

/* step4 */

@-webkit-keyframes mixSoil 
{
    0%   {left:260px; top:260px;}
    25%  {left:125px; top: 280px;}
    50%  {left:260px; top: 280px;}
    75% { left:125px; top: 300px;}
    100% { left:270px; top: 300px;}
}

@keyframes mixSoil 
{
    0%   {left:260px; top:260px;}
    25%  {left:125px; top: 280px;}
    50%  {left:260px; top: 280px;}
    75% { left:125px; top: 300px;}
    100% { left:270px; top: 300px;}
}

@keyframes move22 {
    from {left: 300px; top: 200px;}
    to {left:200px; top: 270px;}
}

@-webkit-keyframes move22 {
    from {left: 300px; top: 200px;}
    to {left:200px; top: 270px;}
}

@keyframes move222 {
    from {left:200px; top: 270px;}
    to {left:150px; top:320px;}
}

@-webkit-keyframes move222 {
    from {left:200px; top: 270px;}
    to {left:150px; top:320px;}
}

@keyframes move23 {
    from {left: 250px; top: 200px;}
    to {left: 330px; top:340px;}
}

@-webkit-keyframes move23 {
    from {left:250px; top: 200px;}
    to {left: 330px; top:340px;}
}

@keyframes move232 {
    from {left: 250px; top: 200px;}
    to {left: 330px; top:360px;}
}

@-webkit-keyframes move232 {
    from {left:250px; top: 200px;}
    to {left: 330px; top:360px;}
}

@keyframes move24 {
    from {left: 180px; top: 270px;}
    to {left: 90px; top:290px;}
}

@-webkit-keyframes move24 {
    from {left: 180px; top: 270px;}
    to {left:90px; top:290px;}
}

@keyframes move25 {
    from {left: 200px; top: 200px;}
    to {left: 120px; top:285px;}
}

@-webkit-keyframes move25 {
    from {left: 200px; top: 200px;}
    to {left: 120px; top:285px;}
}

@keyframes move26 {
    from {left: 130px; top:280px;}
    to {left: 100px; top:285px;}
}

@-webkit-keyframes move26 {
    from {left: 130px; top:280px;}
    to {left: 100px; top:285px;}
}

@keyframes move27 {
    from {left: 38px; top: 290px;}
    to{left: 50px; top: 293px;}
}

@-webkit-keyframes move27 {
    from {left: 38px; top: 290px;}
    to{left: 50px; top: 293px;}
}

@keyframes move28 {
    from {left: 50px; top: 293px;}
    to  {left: 38px; top: 290px;}
}

@-webkit-keyframes move28 {
    from {left: 50px; top: 293px;}
    to  {left: 38px; top: 290px;}
}

@-webkit-keyframes move29 
{
    0%   {left:115px; top:157px;}
    100%  { left:500px; top:100px;}
}

@keyframes move29 
{
    0%   {left:115px; top:157px;}
    100%  { left:500px; top:100px;}
}

@keyframes moveContainer  
{
    from {left:110px; top:390px;}
    to {left: 545px; top: 240px}
}

@-webkit-keyframes moveContainer 
 {
    from {left:110px; top:390px;}
    to {left: 545px; top: 240px}
}

@keyframes moveCalibratingContainer  
{
    from {left: 132.5px; top: 310px;}
    to {left: 510px; top: 200px}
}

@-webkit-keyframes moveCalibratingContainer
{
    from {left: 132.5px; top: 310px;}
    to {left: 510px; top: 200px}
}

@keyframes moveTrowel71 {
    from {left: 450px; top: 180px;}
    to {left:310px; top: 330px;}
}

@-webkit-keyframes moveTrowel71 {
    from {left: 450px; top: 180px;}
    to {left:310px; top: 330px;}
}

@keyframes move32 {
    from {left: 50px; top: 300px;}
    to { left: 350px; top: 180px;}
}

@-webkit-keyframes move32 {
    from {left: 50px; top: 300px;}
    to { left: 350px; top: 180px;}
}

@keyframes move33 {
    from {left: 325px; top: 155px;}
    to { left: 520px; top: 155px;}
}

@keyframes move33 {
    from {left: 325px; top: 155px;}
    to { left: 520px; top: 155px;}
}

@keyframes move34 {
    from {left: 520px; top: 155px;}
    to { left: 325px; top: 155px;}
}

@keyframes move34 {
    from {left: 520px; top: 155px;}
    to { left: 325px; top: 155px;}
}


@keyframes move35 {
    from {left: 325px; top: 155px;}
    to { left: 520px; top: 155px;}
}

@keyframes move35 {
    from {left: 325px; top: 155px;}
    to { left: 520px; top: 155px;}
}

@keyframes move3511 {
    from { left: 350px; top: 180px;}
    to { left: 50px; top: 300px;}
}

@-webkit-keyframes move3511 {
    from {left: 350px; top: 180px;}
    to {left: 50px; top: 300px;}
}

@keyframes move36 {
    from {left: 50px; top: 310px;}
    to {left: 440px; top: 260px;}
}

@-webkit-keyframes move36 {
    from {left: 50px; top: 310px;}
    to {left: 440px; top: 260px;}
}


@keyframes moveTrowel72
{
    from {left:310px; top: 330px;}
    to {left:110px; top: 280px;}
}

@-webkit-keyframes moveTrowel72
{
    from {left:310px; top: 330px;}
    to {left:110px; top: 280px;}
}

@-webkit-keyframes rotMv3
{
    0% {transform:rotate(0deg)}
    100%{transform:rotate(-30deg)}
}

@keyframes rotMv3
{
    0% {transform:rotate(0deg)}
    100% {transform:rotate(-30deg)}
}


@-webkit-keyframes move41
{
    0% {transform:rotate(0deg)}
    100%{transform:rotate(-30deg)}
}

@keyframes move41 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(-30deg)
    }
}

@-webkit-keyframes move133
{
    0% {transform:rotate(0deg)}
    100%{transform:rotate(30deg)}
}

@keyframes move133{
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(30deg)
    }
}

@keyframes move351 {
    from {left: 50px; top: 310px;}
    to { left: 450px; top: 260px;}
}

@-webkit-keyframes move351 {
    from {left: 50px; top: 310px;}
    to {left: 450px; top: 260px;}
}