@import "normalize.less";
.sliderbar(@marginvalue){
    .bar{
        position: relative;
        top: 13px;
        height: 2px;
        width: auto;
        margin: 0 @marginvalue;
        background-color: #fff;
        .progress{
            position: absolute;
            width: 0px;
            height: 2px;
            background-color: #acf;
        }
        .slideRect{
            position: absolute;
            top: -6px;
            height: 12px;
            width: 12px;
            border-radius: 3px;
            background-color: #fff;
        }
    }
}
html, body{
    height: 100%;
    overflow: hidden;
}
.wrap{
    overflow: hidden;
    font-size: 0;
    video{
        display: none;
    }
    canvas{
        background-color: #000;
    }
    .positionWrap{
        position: relative;
        width: 100%;
        height: 30px;
        &>div{
            float: left;
            height: 30px;
            &.slideWrap{
                width: 100%;
                background-color: black;
                .slide{
                    width: auto;
                    height: 100%;
                    padding: 0 130px 0 80px;
                    .sliderbar(10px)
                }
            }
            &.start{
                width: 80px;
                margin-left: -100%;
                background-color: black;
                span{
                    display: inline-block;
                    width: 18px;
                    height: 20px;
                    margin: 5px 0 0 12px;
                    background-image: url(../img/playersprite-min.png);
                    &.startbtn.active{
                        background-position: -17px 0;
                    }
                    &.stopbtn{
                        background-position: -36px 0;
                    }
                }
            }
            
            &.volumn{
                width: 130px;
                margin-left: -130px;
                background-color: black;
                .volumnbtn{
                    position: relative;
                    top: -2px;
                    float: left;
                    width: 24px;
                    height: 20px;
                    margin: 5px 0 0 0;
                    background-image: url(../img/playersprite-min.png);
                    background-position: -58px 0;
                    &.muted{
                        background-position: -86px 0;
                    }
                }
                .sliderbar(30px);
            }
        }
    }
}