@charset "utf-8";
/* CSS Document */
/* Author: alsoflying */
/* Date: 2017.9 */
/*通用样式处理*/
input:focus,select:focus,textarea:focus,button:focus{outline:none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1; }
ol, ul {list-style:none; }
blockquote, q {quotes:none; }
blockquote:before, blockquote:after,q:before, q:after {content: '';content:none; }
table {border-collapse: collapse;border-spacing: 0;}
html,body {width:100%; height:100%;}
*+html html,body {height:auto;}
body {font:14px/20px "Microsoft YaHei",SimHei,"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#333;-webkit-text-size-adjust:100%; background:#f5f5f5;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size:1em;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit; }

em {font-style:normal; }
strong {font-weight: normal;}
small {font-size: 80%; }

a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); cursor:pointer;}
a, a:visited { color: #333; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #333; }
p a, p a:visited { line-height: inherit; }

ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
i {font-style:normal;}

img.scale-with-grid {max-width: 100%; height: auto; }

.button,button,input[type="submit"],input[type="reset"],input[type="button"],input[type="number"] {-webkit-appearance:none;-moz-appearance:none;font:14px "Microsoft YaHei",SimHei,"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}

button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
input:disabled{border: 1px solid #DDD;background-color: #F5F5F5;color:#ACA899;}

input[type="text"],input[type="date"],input[type="tel"],input[type="password"],input[type="email"],input[type="number"],textarea {border: 1px solid #dcdcdc; outline: none; font:14px "Microsoft YaHei",SimHei,"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #000; max-width: 100%;display:block;background: #fff; -webkit-appearance:none;-moz-appearance:none; -moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
select {border: 1px solid #dcdcdc; font: 14px "Microsoft YaHei",SimHei,"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #000; max-width: 100%;display:block;background: #fff; margin:0;}
input[type="text"]:focus,input[type="date"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus,select:focus {color: #333; border-color:#448aca;}
textarea {min-height: 40px; }
label,legend {display: block;font-weight: normal;}
input[type="checkbox"] {display: inline;}
input[type=checkbox],input[type=radio] {vertical-align:middle; margin:0 3px 3px 0;}
input.readonly,.readonly{background-color:#eee;}

body{
    background-color: #000;
    height: 100%;
}
.main{width:100%;height:100%;position: relative;}
.player{position: absolute;top: 0;bottom: 36px;left: 0;right: 0;}
.player-tools{height: 36px;width: 100%;position: absolute;bottom: 0;left: 0;right: 0;background-image: url("./../image/barback.png");}
.player-btn{width: 50px;height: 100%;float: left;position: relative;}
.player-btn>.btn{width: 14px;height: 17px;background: none;border: none;background: transparent;position: absolute;top: 7.5px;left: 15px;cursor: pointer;padding: 0;}
.player-btn>.btn:hover{opacity: .8;}
.progress-bar{height: 10px;display:block;background-color: #000;border-radius:2px;margin-top: 13px;margin: 13px 540px 0 50px;position: relative;}
.progress-text{float: left;margin: 8px 0 0 10px;color: #fff;font-size: 12px;}
.progress-text>.played{margin-right: 3px;}
.progress-text>.total-duration{margin-left: 3px;}
.player-switch{width: 80px;height: 22px;background:rgba(23,24,26,1);border-radius:2px;color: #D0D0D0;font-size:12px;text-align: center;line-height: 22px;cursor: pointer;}
.player-stream{width: 50px;height: 22px;background:rgba(23,24,26,1);border-radius:2px;color: #D0D0D0;font-size:12px;text-align: center;line-height: 22px;cursor: pointer;}
.player-speed{width: 50px;height: 22px;background:rgba(23,24,26,1);border-radius:2px;color: #D0D0D0;font-size:12px;text-align: center;line-height: 22px;cursor: pointer;}
.player-right{float: right;position: relative;height: 100%;width: 540px;}
.player-volume-btn{float: left;height: 100%;position: relative;margin-right: 22px;}
.player-volume-btn>.btn{background: none;border: none;background: transparent;height: 20px;width: 20px;padding: 0;margin-top: 10px;cursor: pointer;}
.player-volume-btn>.btn:hover{opacity: .8;}
.player-fullscreen{float: left;height: 100%;position: relative}
.player-fullscreen>.btn{background: none;border: none;background: transparent;height: 20px;width: 20px;padding: 0;margin-top: 10px;cursor: pointer;}
.player-fullscreen>.btn:hover{opacity: .8;}
#progress-bar .ui-slider-range-min{background-color: #000;}
#progress-bar .ui-slider-handle {position: absolute;width: 14px;height: 14px;background: url("./../image/thumb.png") no-repeat;background-size: auto 100%;background-position: center;border-radius: 0;top: 50%;margin-top: -8px;margin-left:-7px;left: 50px;outline: none;border: 1px solid transparent;}
.player-volume-bar{width:100px; height:8px; background-color:#000;border-radius:3px; float:left; margin-top:16px; margin-right: 22px;position:relative; font-size:0;}
.ui-slider-horizontal .ui-slider-range-min {background: #fff;border-radius:3px;}
.ui-slider .ui-slider-range {position: absolute;display: block;border: 0;}
.ui-slider-horizontal .ui-slider-range {top: 0;height: 100%;}
.ui-slider-horizontal .ui-slider-range-min {left: 0;}
.ui-slider .ui-slider-handle {position: absolute;width: 14px;height: 14px;background: url("./../image/btn.png") no-repeat 100% 100%;border-radius: 50px;top: 50%;margin-top: -8px;margin-left:-7px;left: 50px;outline: none;border: 1px solid #000;}

.player-btn>.btn>img.play{display: block;}
.player-btn>.btn>img.pause{display: none;}

.player-btn.pause>.btn>img.play{display: none;}
.player-btn.pause>.btn>img.pause{display: block;}

.flashModePlayerSet{
    margin-right: 160px !important;
}
.playerSetting-switch{
    position: relative;
    width: auto;
    height: auto;
    margin: 7px 0 0 20px;
    float: left;
}
.playerSetting-speed{
    position: relative;
    width: auto;
    height: auto;
    margin: 7px 0 0 20px;
    float: left;
}
#playerSelect {
    min-width: 120px;
    bottom: 35px;
    z-index: 9;
    left: -22px;
    position: absolute;
    background: #17181A;
}
#playerStreamSelect {
    min-width: 80px;
    bottom: 35px;
    z-index: 9;
    left: -22px;
    position: absolute;
    background: #17181A;
}
#multipleCont {
    min-width: 100px;
    bottom: 35px;
    z-index: 9;
    left: -22px;
    position: absolute;
    background: #17181A;
    font-size: 12px;
}
#playerSelect .h5_select_box,#playerStreamSelect .h5_select_box{
    background-color: #17181A;
    border: 1px solid #0C0C0C;
    padding: 14px 21px;
}
#multipleCont .h5_select_box{
    background-color: #17181A;
    border: 1px solid #0C0C0C;
    padding: 14px 34px;
}
#playerSelect .playerSelectOn,#playerStreamSelect .playerSelectOn{
    display: block;
    line-height: 22px;
    color: #fff;
    text-align: left;
}
#multipleCont .playerSelectOn{
    display: block;
    line-height: 28px;
    color: #fff;
    text-align: left;
}
.network_bg{
    color: #439CF8 !important;
}
em{
    display: none;
}
.playerSetting-stream{
    position: relative;
    width: auto;
    height: auto;
    margin: 7px 0 0 20px;
    float: left;
}
.autoplay-volume {
    width: 425px;
    height: 60px;
    background: rgba(29, 29, 29, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 13px 0px rgba(72, 48, 143, 0.2);
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 999;
    display: none;
}

.autoplay-volume>.autoplay-volume-btn {
    border-radius: 2px;
    width: 80px;
    height: 26px;
    line-height: 26px;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    outline:none;
}
.autoplay-volume>.autoplay-volume-btn:hover {
    opacity: 0.9;
}
.autoplay-volume>.autoplay-volume-play {
    background: rgba(2, 152, 212, 1);
    margin-left: 30px;
}
.autoplay-volume>.autoplay-volume-ignore {
    background: rgba(89, 89, 89, 1);
    margin-left: 10px;
}

.autoplay-volume>.autoplay-volume-text {
    font-size: 16px;
    color: #fff;
    line-height: 60px;
    margin-left: 20px;
    font-weight: 400;
}