* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    width: 100%;
    min-height: 100%;
}


.customplayer {
    border: 1px solid black;
    position: relative;
    background: black !important;
}

    .customplayer .controlbar {
        background: #DEDEDE;
        height: 26px;
        max-height: 26px;
        width: 100%;
        position: relative;
        background: #efefef; /* Old browsers */
        background: -moz-linear-gradient(top, #efefef 0%, #dfdfdf 76%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(76%,#dfdfdf)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #efefef 0%,#dfdfdf 76%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #efefef 0%,#dfdfdf 76%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #efefef 0%,#dfdfdf 76%); /* IE10+ */
        background: linear-gradient(to bottom, #efefef 0%,#dfdfdf 76%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
        transition-property: visibility, opacity;
        transition-duration: 1s;
        transition-delay: 0s;
        visibility: visible;
        z-index: 100;
    }

    .customplayer.isLive .controlbar .timeslider {
        margin: 0 205px 0 -25px !important;
    }

    .customplayer.isLive .controlbar .current {
        right: 160px !important;
    }

    .customplayer.isLive .controlbar .duration {
        display: none !important;
    }

    .customplayer.no-controls .controlbar {
        display: none;
    }

    .customplayer .wallpaper {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        background: #ccc;
    }

    .customplayer.isPaused .wallpaper img {
        position: relative;
        display: block;
        margin: 0 auto;
        top: 50%;
        margin-top: -60px;
    }

    .customplayer .wallpaper img {
        display: none;
    }

    .customplayer.controlhide .controlbar {
        visibility: hidden;
        opacity: 0;
    }

    /*fullscreen*/
    .customplayer .controlbar .fullscreen {
        height: 14px;
        width: 23px;
        border: 1px solid black;
        background: #A9A9A9;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        bottom: 5px;
        right: 15px;
        cursor: pointer;
        background: #a9a9a9; /* Old browsers */
        background: -moz-linear-gradient(top, #a9a9a9 0%, #a3a3a3 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9a9a9), color-stop(100%,#a3a3a3)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #a9a9a9 0%,#a3a3a3 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #a9a9a9 0%,#a3a3a3 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #a9a9a9 0%,#a3a3a3 100%); /* IE10+ */
        background: linear-gradient(to bottom, #a9a9a9 0%,#a3a3a3 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9a9a9', endColorstr='#a3a3a3',GradientType=0 ); /* IE6-9 */
    }

        .customplayer .controlbar .fullscreen .fullinside {
            height: 7px;
            width: 11px;
            background: white;
            position: relative;
            top: 3.5px;
            left: 6px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            transition-property: width, height, top,left;
            transition-duration: 0.5s;
            transition-delay: 0s;
        }

        .customplayer .controlbar .fullscreen:hover .fullinside {
            height: 10px;
            width: 19px;
            top: 2px;
            left: 2px;
        }

    .customplayer.isFullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        border: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        z-index: 99999 !important;
        -webkit-box-shadow: 0 !important;
        -moz-box-shadow: 0 !important;
        box-shadow: 0 !important;
        background-image: none !important;
        background-color: red;
    }

        .customplayer.isFullscreen .controlbar .fullscreen .fullinside {
            height: 10px;
            width: 19px;
            top: 2px;
            left: 2px;
            transition-property: width, height, top,left;
            transition-duration: 0.5s;
            transition-delay: 0s;
        }

        .customplayer.isFullscreen .controlbar .fullscreen:hover .fullinside {
            height: 7px;
            width: 11px;
            top: 3.5px;
            left: 6px;
        }

    /*current and duration*/
    .customplayer .controlbar .time {
        width: 100%;
    }

        .customplayer .controlbar .time div {
            position: absolute;
            font-size: 12px;
            bottom: 4px;
        }

        .customplayer .controlbar .time div {
            width: 50px;
            text-align: center;
        }

        .customplayer .controlbar .time .current {
            right: 210px;
        }

        .customplayer .controlbar .time .duration {
            right: 155px;
        }

    /*play button*/
    .customplayer .controlbar .playbutton {
        z-index: 100;
        width: 13px;
        height: 13px;
        position: absolute;
        top: 8px;
        left: 15px;
        background-position: -1px -32px;
        cursor: pointer !important;
    }

    /*volume*/
    .customplayer .controlbar .volume {
        position: absolute;
        bottom: 5px;
        right: 190px;
        height: 14px;
    }


    .customplayer .controlbar .volslider {
        width: 150px;
        position: absolute;
        top: -10px;
    }

    .customplayer .controlbar .volicon {
        width: 18px;
        height: 13px;
        cursor: pointer;
        left: 40px;
        background-position: -1px -100px;
        position: absolute;
        z-index: 100;
    }

    .customplayer.no-volumeslider .volslider {
        display: none;
    }

    .customplayer.no-volumeslider .controlbar .time .current {
        right: 130px;
    }

    .customplayer.no-volumeslider .controlbar .time .duration {
        right: 95px;
    }

    .customplayer.no-volumeslider .controlbar .timeslider {
        margin: 0 160px 0 -25px;
    }

    .customplayer.isMuted .controlbar .volicon {
        background-position: -1px -80px !important;
    }

    .customplayer.isPaused .controlbar .playbutton {
        background-position: -1px -1px !important;
    }

    .customplayer.isPlaying wallpaper {
    }

    /*timeline*/
    .customplayer .controlbar .timeslider {
        top: -3px;
        position: relative;
        margin: 0 255px 0 -25px;
    }

    .customplayer .controlbar .playbutton,
    .customplayer .controlbar .volicon,
    .customplayer.isMuted,
    .customplayer.isPaused {
        background-image: url('img/black.png');
        background-size: 37px 300px;
    }

    .customplayer .ui-slider-handle {
        width: 11px !important;
        height: 11px !important;
        background: #0C0C0C !important;
        -webkit-border-radius: 20px !important;
        -moz-border-radius: 20px !important;
        border-radius: 20px !important;
        cursor: pointer !important;
        margin-left: -6px !important;
        position: relative;
        margin-top: -6.5px !important;
    }

    .customplayer .ui-slider-track {
        border: 1px solid #DC9B92 !important;
        height: 3px !important;
        background: #DC9B92 !important;
    }

    .customplayer .ui-btn:focus {
        -webkit-box-shadow: 0 0 12px #ccc !important;
        -moz-box-shadow: 0 0 12px #ccc !important;
        box-shadow: 0 0 12px #ccc !important;
    }

    .customplayer .ui-slider-bg {
        background: red !important;
    }