@charset "utf-8";

.mainscene{
    width: 375px; height: 511px;
}

.btn{
    position: absolute;
    width: 36px; height: 30px;
    bottom: 11px; 
}

.btnCanvas{
    position: absolute;
    width: 10px; height: 20px;
    top: 2px;
}

.circuit{
    width: 200px; height: 200px;
}

.controlBackContainer{
    bottom: 6px;
}

.mainWindow > *{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.mainWindow{
    position: absolute;
    width: 355px; height: 271px;
    top: 87px; left: 8px;
    background: none;
    border: none;
}

.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);
}

#circuitImage{
    position: absolute;
    top: 30px; left: 103px;
    z-index: 1;
}

#circuitCanvas{
    position: absolute;
    top: 30px; left: 103px;
}

/*------------------------------------------------------------------*/

#cross {
    background: yellow;
    width: 1px; height: 19px;
    position: relative;
}

#cross:after {
    background: yellow;
    content: "";
    width: 19px; height: 1px;
    top: 9px; left: -9px;
    position: absolute;
}

#crossContainer{
    position: absolute;
    top: 124px; left: 202px;
}

#reticleContainer{
    position: absolute;
    top: 71px; left: 128px;
    width: 150px; height: 120px;
}

.reticle{
    position: absolute;
    background: yellow;
}

#topLeftRet{
    height: 10px; width: 1px;
    top: 0px; left: 0px; 
}

#topLeftRet:after{
    content: "";
    position: absolute;
    background: yellow;
    height: 1px; width: 10px;
    top: 0px; left: 0px;
}

#topRightRet{
    height: 10px; width: 1px;
    top: 0px; right: 0px; 
}

#topRightRet:after{
    content: "";
    position: absolute;
    background: yellow;
    height: 1px; width: 10px;
    top: 0px; right: 0px;
}

#botLeftRet{
    height: 10px; width: 1px;
    bottom: 0px; left: 0px;
}

#botLeftRet:after{
    content: "";
    position: absolute;
    background: yellow;
    height: 1px; width: 10px;
    bottom: 0px; left: 0px;
}

#botRightRet{
    height: 10px; width: 1px;
    bottom: 0px; right: 0px;
}

#botRightRet:after{
    content: "";
    position: absolute;
    background: yellow;
    height: 1px; width: 10px;
    bottom: 0px; right: 0px;
}


/*-----------------------------------------------------*/

#dropDown{
    width: 254px; height: 27px;
    margin-top: 1px;
}

#dropDownContainer{
    width: 280px; height: 70px;
}

#dropDownTitle{
    margin-top: 1px; 
}

#imageContainer{
    position: absolute;
    top: 0px; left: -30px;
}

#leftBtn {
    left: 11px;
}

#leftBtnCanvas{
    left: 10px; 
}

#mask{
    position: absolute;
    width: 221px; height: 221px;
    top: 20px; left: 96px; 
    z-index: 2;
}

#objective{
    position: absolute;
    width: 242px; height: 244px;
    top: 9px; left: 82px;
    z-index: 3;
}

#rightBtn {
    right: 11px;
}

#rightBtnCanvas{
    right: 10px;
}

#sldr {
    display: inline-block;
    position: relative;
    width: 160px;
}

#sldrContainer{
    width: 280px;
}

#smallerTitleText{
    position: absolute;
    top: 40px; left: 185px;
    font-size: 14px;
}