#container{
   position:absolute;
   left:0px;
   height:0px;
   width: 1100px; 
   height:768px;
   border:0px solid #73AD21;
}
#container1{
    position:absolute;
    left:270px;
    top:230px;
    border: 0px solid #73AD21;
    width:554px;
    height: 272px;;
 }
#blackboard{
    position:absolute;
    left: 0px; 
    top:0px;
 }
 #demo1{
    position:absolute;
    left: 150px; 
    top:158px;
    color: #ffffff;
 }
 #demo1a{
   position:absolute;
   left: 230px; 
   top:156px;
   color: #ffffff;
}
#demo1b{
   position:absolute;
   left:290px; 
   top:156px;
   color: #ffffff;
}
#demo1c{
   position:absolute;
   left: 350px; 
   top:156px;
   color: #ffffff;
}
 #demo2{
    position:absolute;
    left: 150px; 
    top:178px;
    color: #ffffff;
 }
 #demo2a{
   position:absolute;
   left: 230px; 
   top:176px;
   color: #ffffff;
}
#demo2b{
   position:absolute;
   left: 290px; 
   top:176px;
   color: #ffffff;
}
#demo2c{
   position:absolute;
   left: 350px; 
   top:176px;
   color: #ffffff;
}
 #demo3{
    position:absolute;
    left: 150px; 
    top:198px;
    color: #ffffff;
 }
 #demo3a{
   position:absolute;
   left: 230px; 
   top:195px;
   color: #ffffff;
}
#demo4a{
    position:absolute;
    left: 230px; 
    top:215px;
    color: #ffffff;
 }
#demo3b{
   position:absolute;
   left: 290px; 
   top:195px;
   color: #ffffff;
}
#demo4b{
    position:absolute;
    left: 290px; 
    top:215px;
    color: #ffffff;
 }
#demo3c{
   position:absolute;
   left: 350px; 
   top:195px;
   color: #ffffff;
}
#demo4c{
    position:absolute;
    left: 350px; 
    top:215px;
    color: #ffffff;
 }
 #demo4{
    position:absolute;
    left: 150px; 
    top:215px;
    color: #ffffff;
 }
#desk1{
    position:absolute;
    left: 10px; 
    top:90px;
 }
#a{
    position:absolute;
    left: 57px; 
    top:20px;
 }
 #b{
    position:absolute;
    left:192px; 
    top:20px;
 }
 #c{
    position:absolute;
    left: 318px; 
    top:20px;
 }
 #desk2{
    position:absolute;
    left: 690px; 
    top:90px;
 }
 #d1{
    position:absolute;
    left: 795px; 
    top:20px;
    cursor: pointer;
 }
 #d2{
    position:absolute;
    left: 950px; 
    top:60px;
    cursor: pointer;
 }
 #desk{
    position:absolute;
    left: 270px; 
    top:656px;
 }
 #cup1{
    position:absolute;
    left: 390px; 
    top:582px;
 }
 #myCanvas1{
    position:absolute;
    left: 400px; 
    top:615px;
 }
 #myCanvas1a{
    position:absolute;
    left: 407px; 
    top:638px;
 }
 #demoCup1{
    position:absolute;
    left: 430px; 
    top:567px;
 }
 #cup2{
    position:absolute;
    left: 515px; 
    top:582px;
 }
 #myCanvas2{
    position:absolute;
    left: 525px; 
    top:615px;
 }
 #myCanvas2a{
    position:absolute;
    left: 533px; 
    top:638px;
 }
 #demoCup2{
    position:absolute;
    left: 555px; 
    top:567px;
 }
 #cup3{
    position:absolute;
    left: 640px; 
    top:582px;
 }
 #myCanvas3{
   position:absolute;
   left: 650px; 
   top:615px;
}
#myCanvas3a{
    position:absolute;
    left: 658px; 
    top:638px;
 }
#demoCup3{
    position:absolute;
    left: 680px; 
    top:567px;
 }
#cupUp{
   position:absolute;
   left: 585px; 
   top:623px;
   visibility: hidden;
}
#d1a{
   position:absolute;
   left: 235px; 
   top:140px;
   color: #ffffff;
}
#d2a{
   position:absolute;
   left: 295px; 
   top:140px;
   color: #ffffff;
}

#odigies{
   position:absolute;
   left: 37px; 
   top:230px;
}
#production{
   position:absolute;
   left: 858px; 
   top:650px;
}
#clean{
    position:absolute;
    left: 168px; 
    top:633px;
    cursor: pointer;
    visibility: hidden;
 }
 .tooltip {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 780px; 
   top:135px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
 .tooltip1 {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltip1 .tooltiptext1 {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 914px; 
   top:135px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 
 .tooltip1:hover .tooltiptext1 {
   visibility: visible;
 }
 .tooltip2 {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 .tooltipTheory  {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltipTheory .tooltiptextTheory {
   visibility: hidden;
   width: 250px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 430px; 
   top:147px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 .tooltipTheory:hover .tooltiptextTheory  {
   visibility: visible;
 }
 #A{
   position:absolute;
   left:28px; 
   top:120px;
}
#B{
   position:absolute;
   left:163px; 
   top:120px;
}
#C{
   position:absolute;
   left:292px; 
   top:120px;
}
#calculator{
   position:absolute;
   left:50px; 
   top:607px;
   cursor: pointer;
   visibility: hidden;
}
#digmata{
   position:absolute;
   left:440px; 
   top:735px; 
}
#restart{
   position:absolute;
   left:10px; 
   top:665px; 
   cursor: pointer;
   visibility:hidden ;
}
#book{
   position: absolute;
   left:507px; 
    top:24px;
   cursor: pointer;
 }
 #pdf1, #pdf2, #pdf3{
   position: absolute;
   left:829px; 
    top:230px;
   visibility: hidden;
 }
 #pdf0{
   position: absolute;
   left:920px; 
    top:230px;
   visibility: hidden;
 }
 #confirm,#confirm1,#confirm1a,#confirm1b,#confirm1c,#confirm1d,#confirm1e,#confirm1h,#confirm1g,#confirm1j,#confirm1l {
   display: none;
   background-color: #FFFFFF;
   border: 2px solid #363232;
   position: fixed;
   width: 250px;
   left: 85%;
   margin-left: -100px;
   padding: 6px 8px 8px;
   box-sizing: border-box;
   text-align: center;
}
#confirm button {
   background-color: #f4fdfd;
   display: inline-block;
   border-radius: 5px;
   border: 1px solid #aaa;
   padding: 5px;
   text-align: center;
   width: 40px;
   cursor: pointer;
}
#confirm .message {
   text-align: center;
}
.tooltipClean {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltipClean .tooltiptextClean {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 120px; 
   top:697px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 .tooltipClean:hover .tooltiptextClean {
   visibility: visible;
 }
 .tooltipSolution {
   position:absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 .tooltipSolution .tooltiptextSolution {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   left: 12px; 
   top:699px;
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 .tooltipSolution:hover .tooltiptextSolution {
   visibility: visible;
 }