﻿.webPlayer {
    display: inline-block;
    position: relative;
    font-family: 'Segoe UI', Verdana, sans-serif;
    clear: both;
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 13px;
    box-shadow: 0 0 1px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.5);
    text-align: center;
}

    .webPlayer a.smooth {
        transition: all 0.1s linear;
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
    }

    .webPlayer * {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .webPlayer.jp-video-full > .controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.8;
        z-index: 14;
    }

    .webPlayer.jp-video-full, .webPlayer.jp-video-full object, .webPlayer.jp-video-full video {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        z-index: 13;
    }

        .webPlayer.jp-video-full > .playerScreen, .webPlayer.jp-video-full > .playerScreen > .video-play {
            z-index: 14;
        }

    .webPlayer .playerScreen {
        cursor: pointer;
    }

        .webPlayer .playerScreen .video-play {
            display: block;
            position: absolute;
            /*z-index: 11;*/
            width: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 50px;
            opacity: 0.6;
            background-color: rgba(0,0,0,0.4);
        }

        .webPlayer .playerScreen .video-play-icon {
            margin-left: 0px !important;
            font-size: 54px;
            width: 84px;
            height: 84px;
            color: #cccccc;
            border: 9px solid #999999;
            border-radius: 52px;
            line-height: 70px;
            top: 50%;
            position: absolute;
            left: 50%;
            margin-left: -52px !important;
            margin-top: -52px !important;
            ;
        }

            .webPlayer .playerScreen .video-play-icon:before {
                content: "\e072";
                margin-left: 12px;
            }

        .webPlayer .playerScreen .video-play:not(.no-hover):hover .video-play-icon,
        .webPlayer .playerScreen .video-play:active .video-play-icon {
            border-color: #ffffff;
            color: #CF5D00;
        }

    .webPlayer .controls {
        display: block;
        position: relative;
        height: 40px;
        background: #0b0b0b;
        color: #969696;
        padding: 5px 10px;
        /*z-index: 12;*/
        border: 1px solid #000000;
    }

        .webPlayer .controls .leftblock {
            position: absolute;
            left: 3px;
            width: 50px;
        }

            .webPlayer .controls .leftblock .play, .webPlayer .controls .leftblock .pause {
                display: block;
                margin: 0 auto;
                color: #CF5D00;
                font-size: 16px;
                width: 34px;
                height: 34px;
                margin-top: 1px;
                color: #cccccc;
                line-height: 32px;
                font-size: 16px;
                border: 2px solid #666666;
                border-radius: 20px;
            }

                .webPlayer .controls .leftblock .play:before {
                    content: "\e072";
                    margin-left: 2px;
                }

                .webPlayer .controls .leftblock .pause:before {
                    content: "\e073";
                    margin-left: 2px;
                }

                .webPlayer .controls .leftblock .play:not(.no-hover):hover, 
                .webPlayer .controls .leftblock .pause:not(.no-hover):hover,
                .webPlayer .controls .leftblock .play:active, 
                .webPlayer .controls .leftblock .pause:active {
                    color: #CF5D00;
                    border: 2px solid #cccccc;
                }

        .webPlayer .controls .rightblock .fullScreen, .webPlayer .controls .rightblock .fullScreenOFF {
            display: block;
            float: right;
            width: 20px;
            height: 20px;
            color: #cccccc;
            line-height: 34px;
            font-size: 20px;
        }

            .webPlayer .controls .rightblock .fullScreen:before {
                content: "\e140";
            }

            .webPlayer .controls .rightblock .fullScreenOFF:before {
                content: "\e140";
            }

            .webPlayer .controls .rightblock .fullScreen:not(.no-hover):hover, 
            .webPlayer .controls .rightblock .fullScreenOFF:not(.no-hover):hover,
            .webPlayer .controls .rightblock .fullScreen:active, 
            .webPlayer .controls .rightblock .fullScreenOFF:active {
                color: #CF5D00;
            }

        .webPlayer .controls .play-progress {
            position: relative;
            display: block;
            margin: 0 130px 0 50px;
            text-align: left;
        }

            .webPlayer .controls .play-progress span {
                font-size: 12px;
                margin-left: 1px;
                color: #f0f0f0;
            }

            .webPlayer .controls .play-progress .vprogressbar {
                display: block;
                height: 4px;
                background-color: #3C3C3C;
                background: rgba(255,255,255,0.05);
                margin: 2.5px 0;
            }

                .webPlayer .controls .play-progress .vprogressbar .seekBar {
                    position: relative;
                    display: block;
                    cursor: pointer;
                    padding: 1px;
                    background: rgba(255,255,255,0.15);
                }

                    .webPlayer .controls .play-progress .vprogressbar .seekBar .playBar {
                        display: block;
                        height: 2px;
                        padding: 0;
                        background: #FFFFFF;
                    }

                    .webPlayer .controls .play-progress .vprogressbar .seekBar a {
                        display: block;
                        position: absolute;
                        top: -2px;
                        width: 8px;
                        height: 8px;
                        border-radius: 5px;
                        background: #CF5D00;
                        margin-left: -3px;
                    }

                        .webPlayer .controls .play-progress .vprogressbar .seekBar a div {
                            width: 8px;
                            height: 8px;
                        }

            .webPlayer .controls .play-progress .time {
                display: block;
                position: absolute;
                width: 50px;
                font-size: 11px;
            }

                .webPlayer .controls .play-progress .time.current {
                    left: 1px;
                    text-align: left;
                    color: #f0f0f0;
                }

                .webPlayer .controls .play-progress .time.duration {
                    right: 0px;
                    text-align: right;
                }

        .webPlayer .controls .rightblock {
            position: absolute;
            right: 10px;
            width: 110px;
            top: 5px;
        }

            .webPlayer .controls .rightblock .volumeText {
                display: block;
                position: absolute;
                bottom: -20px;
                text-align: center;
                width: 80px;
                font-size: 11px;
                color: #cccccc;
            }

            .webPlayer .controls .rightblock .volumeBar {
                display: block;
                position: absolute;
                height: 4px;
                background-color: #3C3C3C;
                background: rgba(255,255,255,0.05);
                width: 80px;
                top: 19px;
                left: 0;
                cursor: pointer;
            }

                .webPlayer .controls .rightblock .volumeBar .currentVolume {
                    position: relative;
                    height: 2px;
                    padding: 1px;
                }

                    .webPlayer .controls .rightblock .volumeBar .currentVolume .curvol {
                        display: block;
                        height: 2px;
                        padding: 0;
                        background: #FFFFFF;
                    }

                    .webPlayer .controls .rightblock .volumeBar .currentVolume a {
                        display: block;
                        position: absolute;
                        top: -2px;
                        margin-left: -3px;
                        width: 8px;
                        height: 8px;
                        border-radius: 5px;
                        background: #CF5D00;
                    }

                        .webPlayer .controls .rightblock .volumeBar .currentVolume a div {
                            display: block;
                            width: 8px;
                            height: 8px;
                        }

    .webPlayer.audioPlayer .play-progress {
        margin-right: 100px;
    }

    .webPlayer.audioPlayer .rightblock {
        width: 85px;
    }

        .webPlayer.audioPlayer .rightblock .volumeText {
            bottom: -42px;
        }

    .webPlayer.audioPlayer .fullScreen {
        display: none;
    }

    .webPlayer.audioPlayer .fullScreenOFF {
        display: none;
    }

.time.duration {
    color: #cccccc;
}

.jp-video-full img {
    /*width: auto !important;*/
    width: 100% !important;
    height: auto !important;
    /*display: block !important;*/
    display: none !important;
    position: absolute !important;
    left: 0px !important;
    /*top: 0px !important;*/
    top: 50% !important;
}

.jp-video-full.vplayer img {
    height: 100% !important;
    left: 50% !important;
    /*margin-left: -22.9%;*/
    display: none !important;
}

.jp-state-full-screen .playerScreen .noload {
    bottom: 0px;
}
