﻿/**css reset**/
*{padding:0;margin:0;list-style: none;}
img{border: none;}
input{outline: none;}
video{position: absolute;z-index: 1;}

/**引入图标字体库**/
@font-face {font-family: 'uxiconfont';
    src: url('../lib/uxicon/uxiconfont.eot'); /* IE9*/
    src: url('../lib/uxicon/uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../lib/uxicon/uxiconfont.woff') format('woff'), /* chrome、firefox */
    url('../lib/uxicon/uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../lib/uxicon/uxiconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;color:#fff;cursor: default;}

/**播放器主体**/
.video_body{overflow:hidden;position:relative;background:#000;padding:0!important;font:12px/1 tahoma,arial,\5b8b\4f53;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;}

/**底部控制栏**/
.video_controls{height:40px;position:absolute;bottom:0;width:100%;background-color:rgba(0,0,0,.5);z-index: 3;}

/**控制栏内容**/
.video_controls_l{float: left;width: 850px;}
.video_controls i{display: block;float:left;height:40px; line-height: 40px;-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));}
.video_controls i:hover{text-shadow: 0 0 8px rgba(72,146,239,.6);}
.v_play{float: left;}
.v_play i.play{font-size:20px ;padding:0 5px;}
.v_play i.play, .v_items i.addurl, .v_items i.save{width: 30px;text-align: center;}
.v_play i.play:hover, .v_items i.addurl:hover, .v_items i.addurl.active, .v_items i.save:hover, .video_controls_r i:hover, .video_controls_r i.setting.active{background-color:rgba(0,0,0,.4);cursor: pointer;color: #4892ef;-webkit-transition: color 0.3s ease-out 0s;-moz-transition: color 0.3s ease-out 0s;-ms-transition: color 0.3s ease-out 0s;-o-transition: color 0.3s ease-out 0s;transition:color 0.3s ease-out 0s;}
.v_play b{float: left;font-weight: normal;font-size: 12px;padding:0 10px 2px 10px;line-height: 16px;color:#fff;background-color:rgba(0,0,0,.4);margin:11px 10px;cursor:default;-webkit-border-radius: 9px;
    -moz-border-radius: 9px;border-radius: 9px;}
.v_play b em{font-style:normal;}
.v_play b:hover{background-color:rgba(0,0,0,.8);-webkit-transition: background-color 0.5s ease-out 0s;-moz-transition: background-color 0.5s ease-out 0s;-ms-transition: background-color 0.5s ease-out 0s;-o-transition: background-color 0.5s ease-out 0s;transition:background-color 0.5s ease-out 0s;}
.v_items{float: right;}
.v_items i.volume{line-height: 36px;padding:0 5px 0 10px;}
.volume_percentage{background: none;color:#fff;float: right;display: block;width:32px;text-align:right;line-height: 40px;margin-right:10px;}
.v_volume{width:100px;position:relative;height:2px;float: left;margin: 18px 5px;}
.video_controls_r{float:right;width: 150px;}
.video_controls_r i{float: right;padding:0 10px;}
.video_controls_r i.setting{float: left;font-size: 18px;}

/**使用<progress>和<range>标签来模拟播放进度**/
.video_range{position: absolute;bottom: 42px;width: 100%;z-index: 2;}
.v_range{width: 100%;-webkit-appearance: none !important;height:0;cursor:pointer;position: absolute;z-index: 3;top:1px;border: none;}
.v_range::-webkit-slider-thumb {-webkit-appearance: none !important;height:2px;width:1px;background: none repeat scroll 0 0 #4892ef;}
.v_progress {width: 100%;height: 2px;border:none;background-color: #fff;position: absolute;z-index: 1;opacity:0.5;}
.v_progress:hover{opacity:0.9;}
.v_progress::-webkit-progress-bar {background-color: #fff;}
.v_progress::-webkit-progress-value {background-color: #4892ef;}
.other_range::-webkit-slider-thumb{height:8px;width:8px;background: none repeat scroll 0 0 #000;box-shadow: 0 0 3px #fff;}
.other_range::-webkit-slider-thumb:hover{box-shadow: 0 0 5px #4892ef;}

/**右侧信息栏**/
.video_infos{width:130px;height:100%;position: absolute;overflow:hidden;background-color:rgba(0,0,0,.5);position: absolute;right:0;z-index:2;padding:0 10px;color:#fff;}
.video_infos dl{width:130px;height: 100%;overflow:hidden;padding-right:10px;}
.video_infos a{color: #ccc;text-decoration: underline;}
.video_infos a:hover{color: #4892ef;-webkit-transition: color 0.8s ease-out 0s;-moz-transition: color 0.8s ease-out 0s;-ms-transition: color 0.8s ease-out 0s;-o-transition: color 0.8s ease-out 0s;transition:color 0.8s ease-out 0s;}
.video_infos dt{padding-top:14px;line-height: 18px;width:130px;overflow: hidden;}
.video_infos dt i{width:24px;font-size:18px ;color:#ccc;float: left;}
.video_infos dt:hover i{color:#4892ef;-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.7))); -webkit-transition: color 0.8s ease-out 0s;-moz-transition: color 0.8s ease-out 0s;-ms-transition: color 0.8s ease-out 0s;-o-transition: color 0.8s ease-out 0s;transition:color 0.8s ease-out 0s;}
.video_infos dt.c_bitrate{padding-top:20px;}
.video_infos em{font-style: normal;}
/*.video_infos em.noact{text-decoration:line-through; color:#999}*/
.video_infos dd{font-style: normal;line-height: 24px;padding-bottom:10px;border-bottom:solid 1px rgba(255,255,255,.3);padding-left:24px;width:106px;overflow: hidden;}
.video_infos dd.v_bitrate{height:24px;}
.video_infos dd.v_bitrate, .video_infos dd.v_playstatus, .video_infos dd.v_share, .video_infos dd.v_help{padding-left:0;width: 130px;}
.v_playstatus{padding-top:5px;}
.v_playstatus b{background-color:#999;font-weight: normal;padding:3px 5px;margin-right:2px;color:#555;white-space: nowrap;}
.v_playstatus b.active{background-color: rgba(72,146,239,.7);color:#fff;}
.v_playstatus b.active:hover{background-color: rgba(72,146,239,1);-webkit-transition:background-color 0.5s ease-out 0s;-moz-transition: background-color 0.5s ease-out 0s;-ms-transition: background-color 0.5s ease-out 0s;-o-transition: background-color 0.5s ease-out 0s;transition:background-color 0.5s ease-out 0s;}
.video_infos dd .v_progress{width:130px;margin-top:15px;}
.video_infos dd .other_range{top:122px;width:130px;}
.v_help p{line-height: 16px;color:#999;padding:5px 0;}
.v_share{padding-top:10px;}
.v_share a{display:inline-block;width:22px;height:22px;background: url(../css/share_icon.png) no-repeat;margin-right:3px;}
.v_share a.vs_sina:hover{background-position: 0 bottom;}
.v_share a.vs_t{background-position:-22px 0;}
.v_share a.vs_t:hover{background-position: -22px bottom;}
.v_share a.vs_fackbook{background-position: -44px 0;}
.v_share a.vs_fackbook:hover{background-position: -44px bottom;}
.v_share a.vs_twitter{background-position: -66px 0;}
.v_share a.vs_twitter:hover{background-position: -66px bottom;}
.v_share a.vs_linkedin{background-position: -88px 0;}
.v_share a.vs_linkedin:hover{background-position: -88px bottom;}
.v_share a:hover{-webkit-transition:background 0.5s ease-out 0s;-moz-transition: background 0.5s ease-out 0s;-ms-transition: background 0.5s ease-out 0s;-o-transition: background 0.5s ease-out 0s;transition:background 0.5s ease-out 0s;}

/**播放按钮**/
.v_bigplaybtn{background-color:#000;position: absolute;width:100px;height:100px;left:50%;top:50%;margin:-50px 0 0 -50px;-moz-border-radius: 5px;border-radius: 5px;box-shadow: 0 0 10px #4892ef;z-index: 4;opacity: .3;}
.v_bigplaybtn:hover{opacity: .6;-webkit-transition: opacity 0.5s ease-out 0s;-moz-transition: opacity 0.5s ease-out 0s;-ms-transition: opacity 0.5s ease-out 0s;-o-transition: opacity 0.5s ease-out 0s;transition:opacity 0.5s ease-out 0s;}
.v_bigplaybtn i{font-size: 48px;display: block;line-height: 100px;text-align: center;cursor: pointer !important;-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.3)));  }
.v_bigplaybtn i:hover{color:#4892ef;font-size:56px;-webkit-transition: color 0.8s ease-out 0s;-moz-transition: color 0.8s ease-out 0s;-ms-transition: color 0.8s ease-out 0s;-o-transition: color 0.8s ease-out 0s;transition:color 0.8s ease-out 0s;-webkit-transition: font-size 0.4s ease-out 0s;-moz-transition: font-size 0.4s ease-out 0s;-ms-transition: font-size 0.4s ease-out 0s;-o-transition: font-size 0.4s ease-out 0s;transition:font-size 0.4s ease-out 0s;}

/**信息提示**/
.video_tipinfo{font-style:normal;white-space:nowrap;padding:5px 1% 8px 1%;width:98%;height:12px;top:-25px;text-shadow: #999 0px 0 1px;display: block;overflow:hidden;line-height: 12px;background-color:rgba(0,0,0,.4); position: absolute ;margin:0 auto;color:#fff;z-index: 5;}
.video_tipinfo:hover{background-color: rgba(0,0,0,.5);}
.video_tipinfo a{color:#c00;text-decoration: underline;}

/**信息窗口**/
.video_window{width: 380px;height:170px;zoom:.01;background-color: #fff;position: absolute;top:50%;left:50%;margin:-85px 0 0 -180px;z-index: 6;}
.video_window>h2{background-color: #000;color:#fff;border-bottom: solid 1px #fafafa;line-height: 36px;padding:0 10px;font-size:12px;-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.9)), to(rgba(0,0,0,1)));}
.video_window>i{position: absolute;right:0;top:0;display: block;width: 36px;line-height: 36px;text-align: center;color:#fff;font-weight:100;font-size:24px;font-family:arial;}
.video_window>i:hover{background-color: #c00;cursor: pointer;-webkit-transition: background-color 0.8s ease-out 0s;-moz-transition: background-color 0.8s ease-out 0s;-ms-transition: background-color 0.8s ease-out 0s;-o-transition: background-color 0.8s ease-out 0s;transition:background-color 0.8s ease-out 0s;}
.vw_content{padding:20px;}
.video_urlinput{height:28px;line-height: 28px;border: solid 1px rgba(72,146,239,.7);border-right:none;float: left;padding:0 5px;width:200px;}
.video_urlinput:focus{border-color: rgba(72,146,239,1);}
.video_playbtn, .video_choosebtn{border: none;height:30px;padding:0 10px;font-size: 12px;font-weight: bold;float: left;color:#fff;cursor: pointer;background-color:rgba(72,146,239,.7);}
.video_choosebtn{background-color:rgba(235,53,11,1);margin-left:5px;}
.video_playbtn:hover, .video_choosebtn:hover{background-color: rgba(72,146,239,1);-webkit-transition: background-color 0.8s ease-out 0s;-moz-transition: background-color 0.8s ease-out 0s;-ms-transition: background-color 0.8s ease-out 0s;-o-transition: background-color 0.8s ease-out 0s;transition:background-color 0.8s ease-out 0s;}
{background-color: rgba(72,146,239,1);-webkit-transition: background-color 0.8s ease-out 0s;-moz-transition: background-color 0.8s ease-out 0s;-ms-transition: background-color 0.8s ease-out 0s;-o-transition: background-color 0.8s ease-out 0s;transition:background-color 0.8s ease-out 0s;}
.vw_content p{line-height: 18px;padding-bottom:13px;color:#666;}
.vw_content p i{color:#c00;font-style: normal;}

/****/
.video_mask{position: absolute;width: 100%;height:100%;top:0;left:0;z-index: 1;}

/**plugins**/
#tiptip_holder {display: none;position: absolute;	top: 0;	left: 0;z-index: 7;}
#tiptip_holder.tip_top {	padding-bottom: 5px;}
#tiptip_holder.tip_bottom {padding-top: 5px;}
#tiptip_holder.tip_right {padding-left: 5px;}
#tiptip_holder.tip_left {padding-right: 5px;}
#tiptip_content {font-size: 12px;color: #fff;padding: 3px 8px;background-color: rgb(25,25,25);background-color: rgba(25,25,25,0.9); margin-bottom:-6px;}
#tiptip_arrow, #tiptip_arrow_inner {position: absolute;border-color: transparent;border-style: solid;	border-width: 6px;height: 0;	width: 0;}
.smart_menu_box{display:none; width:120px; position:absolute; z-index:999;}
.smart_menu_body{padding:1px;background-color:rgba(0,0,0,.75);}
.smart_menu_ul{margin:0; padding:0; list-style-type:none;}
.smart_menu_li{position:relative;}
.smart_menu_a{display:block; height:25px; line-height:24px; padding:0 5px 0 15px; color:#fff; font-size:12px; text-decoration:none; overflow:hidden;}
.smart_menu_a:hover, .smart_menu_a_hover{background-color:#4892ef; color:#fff; text-decoration:none;-webkit-transition: background-color 0.3s ease-out 0s;-moz-transition: background-color 0.3s ease-out 0s;-ms-transition: background-color 0.3s ease-out 0s;-o-transition: background-color 0.3s ease-out 0s;transition:background-color 0.3s ease-out 0s;}
.smart_menu_li_separate{line-height:0; margin:3px; border-bottom:1px solid rgba(0,0,0,.2); font-size:0;}
.smart_menu_triangle{width:0; height:0; border:5px dashed transparent; border-left:5px solid #666; overflow:hidden; position:absolute; top:7px; right:5px;}
.smart_menu_a:hover .smart_menu_triangle, .smart_menu_a_hover .smart_menu_triangle{border-left-color:#fff;}
.smart_menu_li_hover .smart_menu_box{top:-1px; left:118px;}
.rollbar-path-vertical, .rollbar-path-horizontal {position: absolute;background-color: #eee;background-color: rgba(220,220,220,0.8);z-index: 100;}
.rollbar-path-horizontal {bottom: 5px;right:0;	width: 100%;height: 2px;}
.rollbar-path-vertical {	right:1px;top:0; height:100%;width:2px; }
.rollbar-handle{position: absolute;top: 0;	left: 0;background-color: #4892ef; }
.rollbar-path-vertical .rollbar-handle {height: 20%;width: 100%;}
.rollbar-path-horizontal .rollbar-handle {width: 20%;height: 100%;}