@charset "utf-8";

.mainscene{
    width: 486px;
    height: 440px;
    text-align: center;
}

.blackLine{
    background-color: black;
    position: absolute;
    width: 2px;
}

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

.sliderTrack{
    background-image: url("spectrum.jpg");
    background-size: 180px 15px;
    background-repeat: no-repeat;
}

#backgroundImage{
    width: 441px; height: 276px;
    margin-top: 20px;
}

#sldr .sliderTrackThresh {
    display: none;
}

#btn {
    display: inline-block;
    position: relative;
}

#electronCanvas{
    position: absolute;
    top: 164px; left: 58px;
}

#fallingPhotonsCanvas{
    position: absolute;
    top: 2px; left: 162px;
}

#redLineCanvas{
    position: absolute;
    top: 139px; left: 47px;
}

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

#topWindow{
    position: relative;
    display: inline-block;
    width: 441px; height: 296px;
    padding: 4px;
}

/*----------------------------------------Text----------------------------------------*/

#ls1Text{
    position: absolute;
    top: 23px; left: 108px;
}

#ipText{
    position: absolute;
    top: 26px; left: 202px;
}

#ls2Text{
    position: absolute;
    top: 26px; left: 306px;
}

#scText{
    position: absolute;
    top: 76px; left: 8px;
}

#pdText{
    position: absolute;
    top: 79px; left: 228px;
}

#ecgText{
    position: absolute;
    top: 128px; left: 89px;
}

#pText{
    position: absolute;
    top: 150px; left: 171px;
}

#tg1Text{
    position: absolute;
    top: 134px; left: 241px;
}

#tg2Text{
    position: absolute;
    top: 135px; left: 326px;
}

#ccdText{
    position: absolute;
    top: 151px; left: 374px;
}

#epText{
    position: absolute;
    top: 198px; left: -20px;

    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#ptsText{
    position: absolute;
    top: 240px; left: 134px;
}

/*-------------------------------------Black Lines-------------------------------------*/
#ls1Line{
    top: 48px; left: 126px;
    height: 14px;
}

#ls2Line{
    top: 50px; left: 322px;
    height: 14px;
}

#sdLine{
    top: 90px; left: 68px;
    height: 28px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#ecgLine{
    top: 115px; left: 124px;
    height: 14px;
}

#pdLine{
    top: 88px; left: 221px;
    height: 30px;
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}

#tg1Line{
    top: 119px; left: 264px;
    height: 14px;
}

#tg2Line{
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: 125px; left: 334px;
    height: 11px;
}

#ccdLine{
    top: 127px; left: 396px;
    height: 20px;
}

#tutorialTitle {
    margin-bottom: 8px !important;
}