@charset "utf-8";

/** This shrinks the loading screen for smaller tutorials. 
    May need to play around with the value per each tutorial **/
.splashBackground {
    -moz-transform: scale(0.85, 0.85);
    -ms-transform: scale(0.85, 0.85);
    -o-transform: scale(0.85, 0.85);
    -webkit-transform: scale(0.85, 0.85);
    transform: scale(0.85, 0.85);
}

.mainscene {
    width: 370px; height: 510px;
}

.whiteText {
    display: inline-block;
    position: relative;
    left: 10px; top: 105px;
}

.mainWindow2 {
    width: 90%; height: 60%;
    display: inline-block;
}

#objectiveContainer {
    position: relative;
    left: 42px; top: 12px;
    width: 245px; height: 245px;
    border-radius: 100%;
    overflow: hidden;
}

#backgroundDiv {
    position: absolute;
    left: 4px; top: 4px;
    width: 221px; height: 221px;
    border-radius: 100%;
    background-color: black;
}

#sampleCan {
    position: absolute;
    left: 4px; top: 4px;
    width: 221px; height: 221px;
    border-radius: 100%;
}

#zoomCan {
    position: absolute;
    left: 0px; top: 0px;
    width: 504px; height: 336px;
    visibility: hidden;
}

#objectiveImg {
    position: relative;
    width: 245px; height: 245px;
}

#crosshairCan {
    position: absolute;
    left: 45px; top: 58px;
    width: 152px; height: 128px;
}

#translationContainer {
    position: relative;
    left: 219px; top: -103px;
    width: 100px; height: 66px;
    border: 1px solid black;
}

#translationSampleCan {
    position: absolute;
    left: 0px; top: 0px;
    width: 100px; height: 66px;
}

#translationCan {
    position: absolute;
    left: 0px; top: 0px;
    width: 100px; height: 66px;
}

.controlBack {
    display: inline-block;
    margin: 12px 3px;
}

#sldrBack {
    position: relative;
    left: -82px; top: 0px;
    width: 170px;
    background: none;
    border: none;
}

.sldrLbl {
    display: inline;
}

#intenseSldrLbl {
    margin:  0 11px;
}

#focusSldr {
    display: inline-block;
    position: relative;
    height: 90px;
}

#intenseSldr {
    display: inline-block;
    position: relative;
    height: 90px;
    margin: 0 21px;
}

#zoomSldr {
    display: inline-block;
    position: relative;
    height: 90px;
}

#sampleCB {
    display: inline-block;
    position: relative;
    width: 170px; height: 30px;
}