@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.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -o-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
}

.mainscene {
    width: 390px;
    height: 410px;
    text-align: center;
}

.mainWindow2 {
    position: relative;
    left: -100px;
    margin-top: 30px;
    width: 90%; height: 60%;
    display: inline-block;
}

.mainWindow2 div {
    position: absolute;
}

#phaseLbl {
    left: 193px; top: -20px;
    width: 155px;
}

#clockingSchemeImg {
    position: absolute;
    left: 130px; top: 40px;
}

#nTypeLbl {
    left: 210px; top: 105px;
}

#pTypeLbl {
    left: 235px; top: 124px;
}

#nTypeLblContainer {
    position: absolute;
    left: 140px; top: 101px;
    width: 290px; height: 12px;
}

.nTypeLblPos {
    position: relative;
    display: inline;
    margin-right: 80px;
}

.nTypeLblNeg {
    position: relative;
    display: inline;
    left: 19px; top: -17px;
    margin: 0 59px 0 20px;
}

#pixelLblContainer {
    position: absolute;
    left: 120px; top: 20px;
    width: 290px; height: 12px;
}

.pixelLbl {
    position: relative;
    display: inline;
    margin-right: 20px;
}

.phaseTwoPixelLbl {
    position: relative;
    display: inline;
    margin-right: 68px;
}

#phaseWaveCan {
    position: absolute;
    left: 120px; top: 60px;
    width: 320px; height: 250px;
}

#pixelArrow1 {
    position: absolute;
    left: 130px;
    width: 215px; height: 17px;
}

#pixelArrowCan1 {
    position: absolute;
    left: 0px; top: 0px;
    width: 215px; height: 17px;
}

#pixelLbl1 {
    left: 62px; top: -2px;
    /* background-color: white; */
    background-color: #002f56;
    padding: 4px;
}

#pixelArrow2 {
    position: absolute;
    left: 261px;
    width: 170px; height: 17px;
}

#pixelArrowCan2 {
    position: absolute;
    left: 0px; top: 0px;
    width: 160px; height: 17px;
}

#pixelLbl2 {
    left: 77px; top: -2px;
    /* background-color: white; */
    background-color: #002f56;
    padding: 4px;
}

.controlBack {
    padding: 4px;
}

.controlPanelBack {
    display: inline-block;
    margin: 4px;
    padding: 6px;
    vertical-align: middle;
}

#btnBack {
    width: 122px;
    /* margin-right: 40px; */
}

#nextBtn {
    display: inline-block;
    position: relative;
    width: 84px; height: 35px;
    margin-bottom: 11px;
}

#autoBtn {
    display: inline-block;
    position: relative;
    width: 84px; height: 35px;
}

#phaseSeg {
    width: 121px;
}

#phaseSeg > div { 
    width: 100px;
    height: 26px;
    padding: 0 8px;
}

#pixelLblContainer .labelText {
    position: relative;
}

canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}