source: extensions/piwigo_videojs/video-js/redsheen-skin.css @ 32537

.video-js-redsheen {
  background-color: #b00e0e;
        position:relative;
        padding:0;
        font-size:10px;
        vertical-align:middle;
}

.video-js .vjs-tech {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}

.video-js:-moz-full-screen {
        position:absolute;
}

body.vjs-full-window {
        padding:0;
        margin:0;
        height:100%;
        overflow-y:auto;
}

.video-js.vjs-fullscreen {
        position:fixed;
        overflow:hidden;
        z-index:1000;
        left:0;
        top:0;
        bottom:0;
        right:0;
        width:100%!important;
        height:100%!important;
        _position:absolute;
}

.video-js:-webkit-full-screen {
        width:100%!important;
        height:100%!important;
}

.vjs-poster {
        margin:0 auto;
        padding:0;
        cursor:pointer;
        position:relative;
        width:100%;
        max-height:100%;
}

.video-js-redsheen .vjs-text-track-display {
        text-align:center;
        position:absolute;
        bottom:4em;
        left:1em;
        right:1em;
        font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.video-js .vjs-text-track {
        display:none;
        color:#2f2f2f;
        font-size:1.4em;
        text-align:center;
        margin-bottom:.1em;
        background:#000;
        background:rgba(0,0,0,0.50);
}

.video-js .vjs-subtitles {
        color:#020202;
}

.video-js .vjs-captions {
        color:#f2ff00;
}

.vjs-tt-cue {
        display:block;
}

.vjs-fade-in {
        visibility:visible!important;
        opacity:1!important;
        -webkit-transition:visibility 0 linear 0s,opacity .3s linear;
        -moz-transition:visibility 0 linear 0s,opacity .3s linear;
        -ms-transition:visibility 0 linear 0s,opacity .3s linear;
        -o-transition:visibility 0 linear 0s,opacity .3s linear;
        transition:visibility 0 linear 0s,opacity .3s linear;
}

.vjs-fade-out {
        visibility:hidden!important;
        opacity:0!important;
        -webkit-transition:visibility 0 linear 1.5s,opacity 1.5s linear;
        -moz-transition:visibility 0 linear 1.5s,opacity 1.5s linear;
        -ms-transition:visibility 0 linear 1.5s,opacity 1.5s linear;
        -o-transition:visibility 0 linear 1.5s,opacity 1.5s linear;
        transition:visibility 0 linear 1.5s,opacity 1.5s linear;
}

.vjs-redsheen-skin .vjs-controls {
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        margin:0;
        padding:0;
        height:2.6em;
        color:#460505;
        border-top:1px solid #da7272;
        background:#520000;
        visibility:hidden;
        opacity:0;
}

.vjs-redsheen-skin .vjs-control {
        position:relative;
        float:left;
        text-align:center;
        margin:0;
        padding:0;
        height:2.6em;
        width:2.6em;
}

.vjs-redsheen-skin .vjs-control:focus {
        outline:0;
}

.vjs-redsheen-skin .vjs-control-text {
        border:0;
        clip:rect(0 0 0 0);
        height:1px;
        margin:-1px;
        overflow:hidden;
        padding:0;
        position:absolute;
        width:1px;
}

.vjs-redsheen-skin .vjs-play-control {
        width:5em;
        cursor:pointer!important;
}

.vjs-redsheen-skin.vjs-paused .vjs-play-control div {
        width:15px;
        height:17px;
        background:url(video-js.png);
        margin:.5em auto 0;
}

.vjs-redsheen-skin.vjs-playing .vjs-play-control div {
        width:15px;
        height:17px;
        background:url(video-js.png) -25px 0;
        margin:.5em auto 0;
}

.vjs-redsheen-skin .vjs-rewind-control {
        width:5em;
        cursor:pointer!important;
}

.vjs-redsheen-skin .vjs-rewind-control div {
        width:19px;
        height:16px;
        background:url(video-js.png);
        margin:.5em auto 0;
}

.vjs-redsheen-skin .vjs-mute-control {
        width:3.8em;
        cursor:pointer!important;
        float:right;
}

.vjs-redsheen-skin .vjs-mute-control div {
        width:22px;
        height:16px;
        background:url(video-js.png) -75px -25px;
        margin:.5em auto 0;
}

.vjs-redsheen-skin .vjs-mute-control.vjs-vol-0 div {
        background:url(video-js.png) 0 -25px;
}

.vjs-redsheen-skin .vjs-mute-control.vjs-vol-1 div {
        background:url(video-js.png) -25px -25px;
}

.vjs-redsheen-skin .vjs-mute-control.vjs-vol-2 div {
        background:url(video-js.png) -50px -25px;
}

.vjs-redsheen-skin .vjs-volume-control {
        width:5em;
        float:right;
}

.vjs-redsheen-skin .vjs-volume-bar {
        position:relative;
        width:5em;
        height:.6em;
        margin:1em auto 0;
        cursor:pointer!important;
        -moz-border-radius:.3em;
        -webkit-border-radius:.3em;
        border-radius:.3em;
        background:#000000;
}

.vjs-redsheen-skin .vjs-volume-level {
        position:absolute;
        top:0;
        left:0;
        height:.6em;
        -moz-border-radius:.3em;
        -webkit-border-radius:.3em;
        border-radius:.3em;
        background:#ff8500;
}

.vjs-redsheen-skin .vjs-volume-handle {
        position:absolute;
        top:-.2em;
        width:.8em;
        height:.8em;
        background:#ccc;
        left:0;
        border:1px solid #fff;
        -moz-border-radius:.6em;
        -webkit-border-radius:.6em;
        border-radius:.6em;
}

.vjs-redsheen-skin div.vjs-progress-control {
        position:absolute;
        left:4.8em;
        right:4.8em;
        height:1em;
        width:auto;
        top:-1.3em;
        border-bottom:1px solid #1f1f1f;
        border-top:1px solid #222;
        background:#333;
        background:-moz-linear-gradient(top,#222,#333);
        background:-webkit-gradient(linear,0% 0,0% 100%,from(#222),to(#333));
        background:-webkit-linear-gradient(top,#222,#333);
        background:-o-linear-gradient(top,#333,#222);
        background:-ms-linear-gradient(top,#333,#222);
        background:linear-gradient(top,#333,#222);
}

.vjs-redsheen-skin .vjs-progress-holder {
        position:relative;
        cursor:pointer!important;
        padding:0;
        margin:0;
        height:1em;
        -moz-border-radius:.6em;
        -webkit-border-radius:.6em;
        border-radius:.6em;
        background:#111;
        background:-moz-linear-gradient(top,#111,#262626);
        background:-webkit-gradient(linear,0% 0,0% 100%,from(#111),to(#262626));
        background:-webkit-linear-gradient(top,#111,#262626);
        background:-o-linear-gradient(top,#111,#262626);
        background:-ms-linear-gradient(top,#111,#262626);
        background:linear-gradient(top,#111,#262626);
}

.vjs-redsheen-skin .vjs-progress-holder .vjs-play-progress,.vjs-redsheen-skin .vjs-progress-holder .vjs-load-progress {
        position:absolute;
        display:block;
        height:1em;
        margin:0;
        padding:0;
        left:0;
        top:0;
        -moz-border-radius:.6em;
        -webkit-border-radius:.6em;
        border-radius:.6em;
}

.vjs-redsheen-skin .vjs-play-progress {
        background:#fff;
        background:-moz-linear-gradient(top,#fff 0,#d6d6d6 50%,#fff 100%);
        background:-webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#fff),color-stop(50%,#d6d6d6),color-stop(100%,#fff));
        background:-webkit-linear-gradient(top,#fff 0,#d6d6d6 50%,#fff 100%);
        background:-o-linear-gradient(top,#fff 0,#d6d6d6 50%,#fff 100%);
        background:-ms-linear-gradient(top,#fff 0,#d6d6d6 50%,#fff 100%);
        background:linear-gradient(top,#fff 0,#d6d6d6 50%,#fff 100%);
        background:#efefef;
        background:-moz-linear-gradient(top,#efefef 0,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
        background:-webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#efefef),color-stop(50%,#f5f5f5),color-stop(50%,#dbdbdb),color-stop(100%,#f1f1f1));
        background:-webkit-linear-gradient(top,#efefef 0,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
        background:-o-linear-gradient(top,#efefef 0,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
        background:-ms-linear-gradient(top,#efefef 0,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef',endColorstr='#f1f1f1',GradientType=0);
        background:linear-gradient(top,#efefef 0,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
}

.vjs-redsheen-skin .vjs-load-progress {
        opacity:.8;
        background:#666;
        background:-moz-linear-gradient(top,#666,#333);
        background:-webkit-gradient(linear,0% 0,0% 100%,from(#666),to(#333));
        background:-webkit-linear-gradient(top,#666,#333);
        background:-o-linear-gradient(top,#666,#333);
        background:-ms-linear-gradient(top,#666,#333);
        background:linear-gradient(top,#666,#333);
}

.vjs-redsheen-skin div.vjs-seek-handle {
        position:absolute;
        width:16px;
        height:16px;
        margin-top:-.3em;
        left:0;
        top:0;
        background:url(video-js.png) 0 -50px;
        -moz-border-radius:.8em;
        -webkit-border-radius:.8em;
        border-radius:.8em;
        -webkit-box-shadow:0 2px 4px 0 #000;
        -moz-box-shadow:0 2px 4px 0 #000;
        box-shadow:0 2px 4px 0 #000;
}

.vjs-redsheen-skin .vjs-time-controls {
        position:absolute;
        right:0;
        height:1em;
        width:4.8em;
        top:-1.3em;
        border-bottom:1px solid #1f1f1f;
        border-top:1px solid #222;
        background-color:#333;
        font-size:1em;
        line-height:1em;
        font-weight:400;
        font-family:Helvetica,Arial,sans-serif;
        background:#333;
        background:-moz-linear-gradient(top,#222,#333);
        background:-webkit-gradient(linear,0% 0,0% 100%,from(#222),to(#333));
        background:-webkit-linear-gradient(top,#222,#333);
        background:-o-linear-gradient(top,#333,#222);
        background:-ms-linear-gradient(top,#333,#222);
        background:linear-gradient(top,#333,#222);
}

.vjs-redsheen-skin .vjs-current-time {
        left:0;
}

.vjs-redsheen-skin .vjs-duration {
        right:0;
        display:none;
}

.vjs-redsheen-skin .vjs-remaining-time {
        right:0;
}

.vjs-time-divider {
        display:none;
}

.vjs-redsheen-skin .vjs-time-control {
        font-size:1em;
        line-height:1;
        font-weight:400;
        font-family:Helvetica,Arial,sans-serif;
}

.vjs-redsheen-skin .vjs-time-control span {
        line-height:25px;
}

.vjs-secondary-controls {
        float:right;
}

.vjs-redsheen-skin .vjs-fullscreen-control {
        width:3.8em;
        cursor:pointer!important;
        float:right;
}

.vjs-redsheen-skin .vjs-fullscreen-control div {
        width:16px;
        height:16px;
        background:url(video-js.png) -50px 0;
        margin:.5em auto 0;
}

.vjs-redsheen-skin.vjs-fullscreen .vjs-fullscreen-control div {
        background:url(video-js.png) -75px 0;
}

.vjs-redsheen-skin .vjs-big-play-button {
        display:block;
        z-index:2;
        position:absolute;
        top:50%;
        left:50%;
        width:8em;
        height:8em;
        margin:-42px 0 0 -42px;
        text-align:center;
        vertical-align:center;
        cursor:pointer!important;
        border:.2em solid #fff;
        opacity:.95;
        -webkit-border-radius:25px;
        -moz-border-radius:25px;
        border-radius:25px;
        background:#454545;
        background:-moz-linear-gradient(top,#454545 0,#232323 50%,#161616 50%,#3f3f3f 100%);
        background:-webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#454545),color-stop(50%,#232323),color-stop(50%,#161616),color-stop(100%,#3f3f3f));
        background:-webkit-linear-gradient(top,#454545 0,#232323 50%,#161616 50%,#3f3f3f 100%);
        background:-o-linear-gradient(top,#454545 0,#232323 50%,#161616 50%,#3f3f3f 100%);
        background:-ms-linear-gradient(top,#454545 0,#232323 50%,#161616 50%,#3f3f3f 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545',endColorstr='#3f3f3f',GradientType=0);
        background:linear-gradient(top,#454545 0,#232323 50%,#161616 50%,#3f3f3f 100%);
        -webkit-box-shadow:4px 4px 8px #000;
        -moz-box-shadow:4px 4px 8px #000;
        box-shadow:4px 4px 8px #000;
}

.vjs-redsheen-skin div.vjs-big-play-button:hover {
        -webkit-box-shadow:0 0 80px #fff;
        -moz-box-shadow:0 0 80px #fff;
        box-shadow:0 0 80px #fff;
}

.vjs-redsheen-skin div.vjs-big-play-button span {
        position:absolute;
        top:50%;
        left:50%;
        display:block;
        width:35px;
        height:42px;
        margin:-20px 0 0 -15px;
        background:url(video-js.png) -100px 0;
}

.vjs-loading-spinner {
        display:none;
        position:absolute;
        top:50%;
        left:50%;
        width:55px;
        height:55px;
        margin:-28px 0 0 -28px;
        -webkit-animation-name:rotatethis;
        -webkit-animation-duration:1s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;
        -moz-animation-name:rotatethis;
        -moz-animation-duration:1s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotatethis {
        0% {
                -webkit-transform:scale(0.6) rotate(0deg);
        }
        
        12.5% {
                -webkit-transform:scale(0.6) rotate(0deg);
        }
        
        12.51% {
                -webkit-transform:scale(0.6) rotate(45deg);
        }
        
        25% {
                -webkit-transform:scale(0.6) rotate(45deg);
        }
        
        25.01% {
                -webkit-transform:scale(0.6) rotate(90deg);
        }
        
        37.5% {
                -webkit-transform:scale(0.6) rotate(90deg);
        }
        
        37.51% {
                -webkit-transform:scale(0.6) rotate(135deg);
        }
        
        50% {
                -webkit-transform:scale(0.6) rotate(135deg);
        }
        
        50.01% {
                -webkit-transform:scale(0.6) rotate(180deg);
        }
        
        62.5% {
                -webkit-transform:scale(0.6) rotate(180deg);
        }
        
        62.51% {
                -webkit-transform:scale(0.6) rotate(225deg);
        }
        
        75% {
                -webkit-transform:scale(0.6) rotate(225deg);
        }
        
        75.01% {
                -webkit-transform:scale(0.6) rotate(270deg);
        }
        
        87.5% {
                -webkit-transform:scale(0.6) rotate(270deg);
        }
        
        87.51% {
                -webkit-transform:scale(0.6) rotate(315deg);
        }
        
        100% {
                -webkit-transform:scale(0.6) rotate(315deg);
        }
}

@-moz-keyframes rotatethis {
        0% {
                -moz-transform:scale(0.6) rotate(0deg);
        }
        
        12.5% {
                -moz-transform:scale(0.6) rotate(0deg);
        }
        
        12.51% {
                -moz-transform:scale(0.6) rotate(45deg);
        }
        
        25% {
                -moz-transform:scale(0.6) rotate(45deg);
        }
        
        25.01% {
                -moz-transform:scale(0.6) rotate(90deg);
        }
        
        37.5% {
                -moz-transform:scale(0.6) rotate(90deg);
        }
        
        37.51% {
                -moz-transform:scale(0.6) rotate(135deg);
        }
        
        50% {
                -moz-transform:scale(0.6) rotate(135deg);
        }
        
        50.01% {
                -moz-transform:scale(0.6) rotate(180deg);
        }
        
        62.5% {
                -moz-transform:scale(0.6) rotate(180deg);
        }
        
        62.51% {
                -moz-transform:scale(0.6) rotate(225deg);
        }
        
        75% {
                -moz-transform:scale(0.6) rotate(225deg);
        }
        
        75.01% {
                -moz-transform:scale(0.6) rotate(270deg);
        }
        
        87.5% {
                -moz-transform:scale(0.6) rotate(270deg);
        }
        
        87.51% {
                -moz-transform:scale(0.6) rotate(315deg);
        }
        
        100% {
                -moz-transform:scale(0.6) rotate(315deg);
        }
}

div.vjs-loading-spinner .ball1 {
        opacity:.12;
        position:absolute;
        left:20px;
        top:0;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball2 {
        opacity:.25;
        position:absolute;
        left:34px;
        top:6px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball3 {
        opacity:.37;
        position:absolute;
        left:40px;
        top:20px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball4 {
        opacity:.5;
        position:absolute;
        left:34px;
        top:34px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:10px;
        -webkit-border-radius:10px;
        -moz-border-radius:15px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball5 {
        opacity:.62;
        position:absolute;
        left:20px;
        top:40px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball6 {
        opacity:.75;
        position:absolute;
        left:6px;
        top:34px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball7 {
        opacity:.87;
        position:absolute;
        left:0;
        top:20px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

div.vjs-loading-spinner .ball8 {
        opacity:1;
        position:absolute;
        left:6px;
        top:6px;
        width:13px;
        height:13px;
        background:#fff;
        border-radius:13px;
        -webkit-border-radius:13px;
        -moz-border-radius:13px;
        border:1px solid #ccc;
}

.vjs-redsheen-skin .vjs-menu-button {
        float:right;
        margin:.2em .5em 0 0;
        padding:0;
        width:3em;
        height:2em;
        cursor:pointer!important;
        border:1px solid #111;
        -moz-border-radius:.3em;
        -webkit-border-radius:.3em;
        border-radius:.3em;
        background:#4d4d4d;
        background:-moz-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4d4d4d),color-stop(50%,#3f3f3f),color-stop(50%,#333),color-stop(100%,#252525));
        background:-webkit-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:-o-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:-ms-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
}

.vjs-redsheen-skin .vjs-menu-button div {
        background:url(video-js.png) 0 -75px no-repeat;
        width:16px;
        height:16px;
        margin:.2em auto 0;
        padding:0;
}

.vjs-redsheen-skin .vjs-menu-button ul {
        display:none;
        opacity:.8;
        padding:0;
        margin:0;
        position:absolute;
        width:10em;
        bottom:2em;
        max-height:15em;
        left:-3.5em;
        background-color:#111;
        border:2px solid #333;
        -moz-border-radius:.7em;
        -webkit-border-radius:1em;
        border-radius:.5em;
        -webkit-box-shadow:0 2px 4px 0 #000;
        -moz-box-shadow:0 2px 4px 0 #000;
        box-shadow:0 2px 4px 0 #000;
        overflow:auto;
}

.vjs-redsheen-skin .vjs-menu-button:focus ul,.vjs-redsheen-skin .vjs-menu-button:hover ul {
        display:block;
        list-style:none;
}

.vjs-redsheen-skin .vjs-menu-button ul li {
        list-style:none;
        margin:0;
        padding:.3em 0 .3em 20px;
        line-height:1.4em;
        font-size:1.2em;
        font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
        text-align:left;
}

.vjs-redsheen-skin .vjs-menu-button ul li.vjs-selected {
        text-decoration:underline;
        background:url(video-js.png) -125px -50px no-repeat;
}

.vjs-redsheen-skin .vjs-menu-button ul li:focus,.vjs-redsheen-skin .vjs-menu-button ul li:hover,.vjs-redsheen-skin .vjs-menu-button ul li.vjs-selected:focus,.vjs-redsheen-skin .vjs-menu-button ul li.vjs-selected:hover {
        background-color:#ccc;
        color:#111;
        outline:0;
}

.vjs-redsheen-skin .vjs-menu-button ul li.vjs-menu-title {
        text-align:center;
        text-transform:uppercase;
        font-size:1em;
        line-height:2em;
        padding:0;
        margin:0 0 .3em;
        color:#fff;
        font-weight:700;
        cursor:default;
        background:#4d4d4d;
        background:-moz-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4d4d4d),color-stop(50%,#3f3f3f),color-stop(50%,#333),color-stop(100%,#252525));
        background:-webkit-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:-o-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:-ms-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
        background:linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);
}

.vjs-redsheen-skin .vjs-captions-button div {
        background-position:-25px -75px;
}

.vjs-redsheen-skin .vjs-chapters-button div {
        background-position:-100px -75px;
}

.vjs-redsheen-skin .vjs-chapters-button ul {
        width:20em;
        left:-8.5em;
}