@charset "utf-8";

/*.controlBackContainer{
    width: 550px;
}
*/
.mainscene{
    width: 446px; height: 300px;
}

/*.mainWindow{
    position: absolute;
    display: inline-block;
    width: 500px; height: 214px;
    top: 57px; left: 22px;
    background: none;
    border: none;
}
*/
.mainWindow > *{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

#allLensContainer{
    position: absolute;
    width: 470px; height: 240px;
    top: 0px; left: 0px;
}

#arrowCanvas{
    width: 470px; height: 240px;
    top: 10px; left: 10px;
    z-index: 1;
}

#arrowContainer{
    position: absolute;
    width: 470px; height: 240px;
    top: 0px; left: 0px;
}

#blackArrowDown{
    position: absolute;
    z-index: 3;
    top: 88px; left: 245px;
}

#blackArrowUp{
    position: absolute;
    z-index: 4;
    top: 144px; left: 245px; 
}

#canvasContainer{
    position: absolute;
    width: 470px; height: 240px;
    top: 0px; left: 0px;
}

#changingTheta{
    position: absolute;
    top: 172px; left: 154px; 
    width: 80px; height: 20px;
    -webkit-backface-visibility: hidden;
}

#controlBack1{
    position: relative;
    right: 32px;
}

#controlBack2{
    position: relative;
    left: 32px;
}

#dashCanvas{
    position: absolute;
    width: 470px; height: 240px;
    top: 10px; left: 10px;
    z-index: 2;
}

#everything{
    position: absolute;
    top: -14px; left: -22px;
    width: 470px; height: 240px;
}

#imageText{              
    top: 84px; left: 422px;
}

#infinityCanvas{
    position: absolute;
    top: 10px; left: 10px;
    width: 470px; height: 240px;
}

#infinitySpaceText{
    position: absolute;
    top: 64px; left: 150px; 
    -webkit-backface-visibility: hidden;
}

#lens1{
    position: relative;
    width: 30px; height: 80px;
    left: 0px; top: 0px;
}

#lens1Container{
    position: absolute;
    width: 36px; height: 106px;
    top: 104px; left: 96px; 
    z-index: 2;
}

#lens2{
    position: absolute;
    top: 0px; left: 0px; 
    z-index: 3;
    width: 40px; height: 104px;
    z-index: 7;
} 

#objectiveText{
    top: 188px; left: 78px; 
}

#sldr_focal{
    display: inline-block;
    position: relative;
    width: 150px;
}

#sldr_pupil{
    display: inline-block;
    position: relative;
    width: 150px;
}

#specimenText{
    top: 126px; left: 30px; 
}

#staticCanvas{
    position: absolute;
    width: 470px; height: 240px;
    top: 10px; left: 10px;
    z-index: 0;
}

#textContainer{
    position: absolute;
    width: 470px; height: 240px;
    top: 0px; left: 0px;
}

#textContainer > p {
    position: absolute;
}

#thetaValue{
    position: absolute;
    top: 24px; left: 0px;
    width: 80px; height: 20px;
}

#topTheta{
    position: absolute;
    width: 100px; height: 20px;
    top: 92px; left: 184px;
    -webkit-backface-visibility: hidden;
}

#tubeLens{
    position: absolute;
    top: 88px; left: 30px; 
    width: 90px; height: 50px;
    z-index: 4;
}

#tubeLensContainer{
    width: 120px; height: 105px;
    position: absolute;
    top: 90px; left: 257px; 
    z-index: 3;
}