@charset "utf-8";

.mainscene{
    width: 550px; height: 450px;
}

.mainWindow{
    position: relative;
    display: inline-block;
    width: 500px; height: 270px;
    top: 21px;
    background: #fff;
    border-color: #fff;
}

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

.mb0{
    margin-bottom: 0;
}

#canWrap{
    position: relative;
    height: 215px;
    width: 280px;
    top: 19px;
}

.grayBoxTop{
    background-color: #999;
    width: 50px;
    height: 10px;
}

.grayBoxBtm{
    background-color: #999;
    width: 50px;
    height: 10px;
}

.topPart{
    position: relative;
    top: 0px;
}

.btmPart{
    position: relative;
    /*top: 61px;*/
}

#topGrayBox{
    position: absolute;
    left: 195px;
    top: 35px;
}

#btmGrayBox{
    position: absolute;
    left: 195px;
    top: 141px;
}

#waveIn{
    position: absolute;
    top: 116px;
    left: 118px;
}

#waveOut{
    position: absolute;
    top: 116px;
    left: 308px;
}

#topDelta{
    position: absolute;
    top: 121px;
    left: 195px;
}

#bttmDelta{
    position: absolute;
    top: 228px;
    left: 195px; 
}

.sldrClass{
    display: inline-block;
    position: relative;
    width: 100px;    
}

.guideBar{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 279px;
    height: 2px;
    left: 106px;
}

#topBar{
    top: 75px;
}

#bttmBar{
    top: 181px;
}