/**
** ESTILOS BASE del reproductor HTML5
**/
#videoplayer.videoplayer-plugin{ height: 92%; width: 96%; margin:0; padding: 2%; font-family:Arial,sans-serif;}
#videoplayer.videoplayer-plugin div.viewport{ width:100%; height: auto; /*max-width: 100%;*/ padding:0; margin:0 auto 0 auto; float: left;
        background: #000; outline:2px solid #444;  }

#videoplayer.videoplayer-plugin div.playlist{ width:30%; height: 100%;  float:left; overflow-y: visible; display: block; }
#videoplayer.videoplayer-plugin div.playlist .title{ width: 96%; margin:0;  float:left; color:#fff; font-size:20px; font-weight: normal;
        padding:10% 2% 4% 2%; background: #FFA800; color:#444; outline:2px solid #444; }

#videoplayer.videoplayer-plugin  div.playlist ol{  border-collapse: collapse; width: 100%; margin:2px 0 0 0; padding: 0 0 0 0; list-style-position: inside; font-size:14px; list-style-type: decimal-leading-zero;}
#videoplayer.videoplayer-plugin  div.playlist ol li{ width: 92%; float:left; padding:2% 4%; outline:1px solid #444;  color:#fff;}
#videoplayer.videoplayer-plugin  div.playlist ol li.active{ background: #444; color:#FFA800}
#videoplayer.videoplayer-plugin  div.playlist ol li.active a{ color:#FFA800; text-decoration: none;}

#videoplayer.videoplayer-plugin  div.playlist ol li:hover{ cursor: pointer; color:#FFA800;  }
#videoplayer.videoplayer-plugin  div.playlist ol li a{ text-decoration: none; color:#fff;}

#videoplayer.videoplayer-plugin div.player{ width: 70%; height: auto; margin:0; float:left; position:relative; outline:2px solid #444; z-index:500; overflow: visible;}
#videoplayer.videoplayer-plugin div.player video{ width: 100%; height: auto; float:right; z-index:500 }

#videoplayer.videoplayer-plugin .controls {position:absolute; height: 100%; top: 0; right: 0; width: 100%; float:right; z-index:1000; overflow: visible; }
#videoplayer.videoplayer-plugin .controls p{ margin:0; padding: 1%; width: 98%; float:left; position: relative; top:-150px; right: 0; z-index:10000;  /*pointer-events: none;*/ }

#videoplayer.videoplayer-plugin .controls p a.button{ width:auto; padding: 1% 2%;  background: #444; border:1px solid #444; color:#fff;  text-decoration: none; float:right; border-radius: 2px; margin-left: 10px; }
#videoplayer.videoplayer-plugin .controls p a.active{ background:#fff; color:#000; border:1px solid #000;}

#videoplayer.videoplayer-plugin .time{ font-size:11px; width:auto; position:absolute; right: 0; bottom:-100px; min-height: 10px; padding:3px 5px 2px 7px;
    background: #444; color:#fff; z-index: 10000; border-top-left-radius: 3px; }

#videoplayer.videoplayer-plugin .caption{ font-size:11px; font-style: italic; width:auto; position:absolute; left: 0; bottom:0; max-width:50%; min-height: 10px;
    padding:2px; background: #fff; z-index: 900; display:none }
/* Toggle Caption */ .visible{ display: block; } .invisible{ display: none; }


#videoplayer span.error{ background: #ff0000;}
#videoplayer span.info{ background: #f1f1f1; color:#000}
#videoplayer span.success{ background: #00ff00;}

        /* List Collapsed */
#videoplayer.videoplayer-plugin.list-collapsed { }
#videoplayer.videoplayer-plugin.list-collapsed .viewport{ width: auto;  position: relative;}
#videoplayer.videoplayer-plugin.list-collapsed .player{ width: auto; height: 100%;}



#videoplayer.videoplayer-plugin div.player{
    background:url("ring.gif") center center no-repeat #000;
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}



@media all and (max-width: 800px){
    #videoplayer.videoplayer-plugin div.playlist{ display: none;}
    #videoplayer.videoplayer-plugin div.player{ width: 100%;}
}


