/* video container */
.videoContainer{
    width:100%;
    height:528px;
    position:relative;
    overflow:hidden;
    background:#000;
    color:#ccc;
}

.funContainer{
    width:100%;
    height:70px;
    position:absolute;
    bottom:0;
    left:0;
    overflow:hidden;
    background:#000;
    color:#ccc;
}

/* video caption css */
.caption{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:10px;
    color:#ccc;
    height:40px;
    font-weight:bold;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #1F1F1F; /* fallback */
    background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
    background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
    background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}

.tvbtmControl{
    background: -moz-linear-gradient;
    background: -webkit-linear-gradient;
    background-position: top;
    background-color: rgba(0,0,0,0.60);
    position: relative;
    height: 50px;
    width: 100%;
    opacity: 1;
}

:-moz-full-screen .tvbtmControl {
    width: 100%;
}
.funbtmControl{
    background: -moz-linear-gradient;
    background: -webkit-linear-gradient;
    background-position: top;
    background-color: rgba(0,0,0,0.60);
    position: relative;
    height: 50px;
    width: 720px;
    margin: 0px auto;
    opacity: 1;
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.videoContainer .control{
    position: absolute;
    /*bottom: 0%;*/
    bottom: -80px;
    left: 0%;
    width: 100%;
    /*height: 60px;*/
    height: 60px;
    z-index: 555555555555;
    /*border: 1px solid #404040;
    display: none;*/
    background-color: rgba(0,0,0,0.60);
}
:-moz-full-screen .videoContainer .control {
    bottom: 0;
    width: 100%;
}
.videoContainer .player-head-wrap{
	 position: absolute;
    /*bottom: 0%;*/
    top: 0px;
    left: 0%;
    width: 100%;
    /*height: 60px;*/
    height: 60px;
    z-index: 555555555555;
    /*border: 1px solid #404040;
    display: none;*/
    background-color: rgba(0,0,0,0.60);
}
.btmControl{
    /*background: -moz-linear-gradient;
    background: -webkit-linear-gradient;
    background-position: top;
    background-color: rgba(0,0,0,0.60);*/
    position: relative;
    /*height: 50px;*/
    /*height: 25px;*/
    width: 100%;
    margin: 0px auto;
    opacity: 1;
}
/* Main button */
.mainControl{
    width: 100%;
    text-align: center;
    /* [disabled]margin-top: auto; */
    margin-right: auto;
    margin-left: auto;
    /* [disabled]margin-bottom: auto; */
    border-radius: 7px 7px 0 0;
    position: relative;
    /*bottom: -20px;*/
}
.tvbtmControl .mainControl{
	bottom: 20px;
}	
.videoContainer .control a.btnmain{
    cursor: pointer;
    /*float: left;*/
    display: inline-block;
    font-size: 14px;
}
.videoContainer .control a.btnmain:focus{
    outline: none;
    margin-left: 0px;
}
.videoContainer .control a.lvl1{
    width:40px;
    height:40px;
    /*margin-left: 1%;*/
    /*margin-right: 40%;*/
    /*padding-left: 0px;
    margin-top: 5px;
    margin-bottom: 2px;*/
    position: absolute;
    bottom: -55px;
    left: 12px;
}

.videoContainer .control a {

}

.videoContainer .control a.lvl2{
    width:40px;
    height:40px;
    /*margin-top: 5px;
    margin-bottom: 2px;*/
}
.videoContainer .control a.lvl3{
    width:40px;
    height:40px;
    /*margin-top: 5px;
    margin-bottom: 2px;*/
    /* margin-right: 38%; */
}

.videoContainer .control a.lvl4{
    width:40px;
    height:40px;
    /*margin-top: 5px;
    margin-bottom: 2px;*/
}
.videoContainer .control a.lvl5{
    /*width:40px;
    height:40px;*/
    /*padding-top: 20px;*/
    margin-right: 10px;
    width: 55px;
    height: 24px;
    line-height: 21px;
    bottom: 17px;
    border: 2px solid #4e545b;
    border-radius: 5px;
    color: #fff;
    position: relative;
    /*margin-top: 5px;
    margin-bottom: 2px;*/
}
.videoContainer .control a.lvl5:hover,
.videoContainer .control a.lvl6:hover {
    border-color: #00c2fe;
    color: #00c2fe;
}

.videoContainer .control a.lvl6{
    /*width:40px;
    height:40px;*/
    /*padding-top: 20px;*/
    margin-right: 15px;
    width: 55px;
    height: 24px;
    line-height: 21px;
    bottom: 17px;
    border: 2px solid #4e545b;
    border-radius: 5px;
    color: #fff;
    position: relative;
    /*margin-top: 5px;
    margin-bottom: 2px;*/
}
.videoContainer .control a.lvl7{
    width:40px;
    height:40px;
    margin-right: 1%;
    margin-left: 1%;
    float: right;
    top: 9px;
    /*padding-left: 0px;
    margin-top: 5px;
    margin-bottom: 2px;*/
}
.videoContainer .control a.speed{
    width:30px;
    height:40px;
}

.videoContainer .control a.btnSound{
    background: url(../images/btn_vol.png);
    
}
.videoContainer .control a.btnSound:hover{
    background: url(../images/btn_vol_hover.png);
    /*margin-left: 1%;
    margin-right: 32%;*/
}
.videoContainer .control a.btnSound:focus{
    background: url(../images/btn_vol.png);
    /*margin-left: 1%;
    margin-right: 32%;*/
}
.videoContainer .control a.muted{
    background:url(../images/btn_vol_no.png);
}
.videoContainer .control a.muted:hover{
    background:url(../images/btn_vol_no_hover.png);
    /* margin-left: 1%;
    margin-right: 32%; */
}
.videoContainer .control a.muted:focus{
    background:url(../images/btn_vol_no.png);
    /* margin-left: 1%;
    margin-right: 32%; */
}

.videoContainer .control a.btnPlay{
    background:url(../images/play_b.png);

}
.videoContainer .control a.btnPlay:hover{
    background:url(../images/play_b_hover.png);
}


.videoContainer .control a.btnPlay:focus{
    background:url(../images/play_b.png);
}
.videoContainer .control a.paused{
    background:url(../images/player_pause.png);   
}
.videoContainer .control a.paused:hover{
    background:url(../images/player_pause_hover.png);
}
.videoContainer .control a.paused:focus{
    background:url(../images/player_pause.png);
}
.videoContainer .control a.btnBck{
    background:url(../images/player_pre.png);
}
.videoContainer .control a.btnBck:hover {
    background:url(../images/player_pre_hover.png);
}
.videoContainer .control a.btnBck:focus{
    background:url(../images/player_pre.png);
}
.videoContainer .control a.btnFwd{
    background:url(../images/player_next_b.png);
}
.videoContainer .control a.btnFwd:hover{
    background:url(../images/player_next_b_hover.png);
}
.videoContainer .control a.btnFwd:focus{
    background:url(../images/player_next_b.png);
}

.videoContainer .control a.btnStop{
    background:url(../images/player_stop.png);
}
.videoContainer .control a.btnStop:hover, .videoContainer .control a.btnStop:focus{
    background:url(../images/player_stop.png);
}

.videoContainer .control a.btnSpeed{
    /*background: url(../images/speed.png);*/
    /*margin-left: 17%;
    margin-right: 1%;*/
}

.videoContainer .control a.btnSpeed:hover{
    /*background: url(../images/speed_hover.png);*/
    /*margin-left: 17%;
    margin-right: 1%;*/
}

.videoContainer .control a.btnSpeed2{
    /*background: url(../images/speed2.png);*/
    /*margin-left: 17%;
    margin-right: 1%;*/
}

.videoContainer .control a.btnSpeed2:hover{
    /*background: url(../images/speed2_hover.png);*/
    /*margin-left: 17%;
    margin-right: 1%;*/
}

.videoContainer .control a.btnSpeed4{
    /*background: url(../images/speed4.png);*/
    /*margin-left: 17%;
    margin-right: 1%;*/
}

.videoContainer .control a.btnSpeed4:hover{
    /*background: url(../images/speed4_hover.png);*/
    /*margin-left: 17%;
    margin-right: 1%;*/
}

.videoContainer .control a.Quality0{
    /*background: url(../images/quality-0.png);*/
}

.videoContainer .control a.Quality0:hover{
    /*background: url(../images/quality-0_hover.png);*/
}

.videoContainer .control a.Quality1{
    /*background:url(../images/quality-1.png);*/
}

.videoContainer .control a.Quality1:hover{
    /*background:url(../images/quality-1_hover.png);*/
}

.videoContainer .control a.Quality2{
    /*background:url(../images/quality-2.png);*/
}
.videoContainer .control a.Quality2:hover{
    /*background:url(../images/quality-2_hover.png);*/
}

.videoContainer .control a.Quality3{
    /*background:url(../images/quality-3.png);*/
}

.videoContainer .control a.Quality3:hover{
    /*background:url(../images/quality-3_hover.png);*/
}

.videoContainer .control a.Quality4{
    /*background:url(../images/quality-4.png);*/
}

.videoContainer .control a.Quality4:hover{
    /*background:url(../images/quality-4_hover.png);*/
}

.videoContainer .control a.Quality5{
    /*background:url(../images/quality-5.png);*/
}

.videoContainer .control a.Quality5:hover{
    /*background:url(../images/quality-5_hover.png);*/
}

.control a.fullscreen{
    /*background: url(../images/fullscreen.png);*/
    background: url(../images/player/ic-fullscreen-zoom.png) no-repeat;
    background-size: 70%;
}
.control a.fullscreen:hover{
    /*background: url(../images/fullscreen_hover.png);*/
    background: url(../images/player/ic-fullscreen-zoom-hover.png) no-repeat;
    background-size: 70%;
}
.control a.fullscreen:focus{
    /*background: url(../images/player/ic-fullscreen-zoom.png);
    margin-right: 1%;
    margin-left: 1%;*/
}

.control a.defaultscreen{
    /*background: url(../images/btn_smallscreen.png);*/
    background: url(../images/player/ic-fullscreen-default.png) no-repeat;
    background-size: 70%;
}
.control a.defaultscreen:hover{
    /*background: url(../images/btn_smallscreen_b.png);
    margin-right: 1%;
    margin-left: 1%;*/
    background: url(../images/player/ic-fullscreen-default-hover.png) no-repeat;
    background-size: 70%;
}
.control a.defaultscreen:focus{
    /*background: url(../images/player/btn_smallscreen.png);
    margin-right: 1%;
    margin-left: 1%;*/
}

.funContainer .control{
    
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 60px;
    z-index: 555555555555;
    border: 1px solid #404040;
    display: none;
}
/* .btmControl{
    background: -moz-linear-gradient;
    background: -webkit-linear-gradient;
    background-position: top;
    background-color: rgba(0,0,0,0.60);
    position: relative;
    height: 50px;
    opacity: 1;
}
Main button
.mainControl{
    width: 100%;
    text-align: center;
    [disabled]margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    [disabled]margin-bottom: auto;
    border-radius: 7px 7px 0 0;
} */
.funContainer .control a.btnmain{
    
    cursor: pointer;
    float: left;
}
.funContainer .control a.btnmain:focus{
    outline: none;
    margin-left: 0px;
}
.funContainer .control a.lvl1{
    width:40px;
    height:40px;
    margin-left: 1%;
    margin-right: 40%;
    padding-left: 0px;
    margin-top: 5px;
    margin-bottom: 2px;
}
.funContainer .control a.lvl2{
    width:40px;
    height:40px;
    margin-top: 5px;
    margin-bottom: 2px;
}
.funContainer .control a.lvl3{
    width:40px;
    height:40px;
    margin-top: 5px;
    margin-bottom: 2px;
    /* margin-right: 38%; */
}

.funContainer .control a.lvl4{
    width:40px;
    height:40px;
    margin-top: 5px;
    margin-bottom: 2px;
}
.funContainer .control a.lvl5{
    width:40px;
    height:40px;
    margin-top: 5px;
    margin-bottom: 2px;
    
}

.funContainer .control a.lvl6{
    width:40px;
    height:40px;
    margin-top: 5px;
    margin-bottom: 2px;
}
.funContainer .control a.lvl7{
    width:40px;
    height:40px;
    margin-right: 1%;
    float: right;
    margin-left: 1%;
    padding-left: 0px;
    margin-top: 5px;
    margin-bottom: 2px;
}
.funContainer .control a.speed{
    width:30px;
    height:40px;
}

.funContainer .control a.btnSound{
    background: url(../images/btn_vol.png);
    
}
.funContainer .control a.btnSound:hover{
    background: url(../images/btn_vol_hover.png);
    /* margin-left: 1%;
    margin-right: 32%; */
}
.funContainer .control a.btnSound:focus{
    background: url(../images/btn_vol.png);
    /* margin-left: 1%;
    margin-right: 32%; */
}
.funContainer .control a.muted{
    background:url(../images/btn_vol_no.png);
}
.funContainer .control a.muted:hover{
    background:url(../images/btn_vol_no_hover.png);
    /* margin-left: 1%;
    margin-right: 32%; */
}
.funContainer .control a.muted:focus{
    background:url(../images/btn_vol_no.png);
    /* margin-left: 1%;
    margin-right: 32%; */
}

.funContainer .control a.btnPlay{
    background:url(../images/play_b.png);

}
.funContainer .control a.btnPlay:hover{
    background:url(../images/play_b_hover.png);
}


.funContainer .control a.btnPlay:focus{
    background:url(../images/play_b.png);
}
.funContainer .control a.paused{
    background:url(../images/player_pause.png);   
}
.funContainer .control a.paused:hover{
    background:url(../images/player_pause_hover.png);
}
.funContainer .control a.paused:focus{
    background:url(../images/player_pause.png);
}
.funContainer .control a.btnBck{
    background:url(../images/player_pre.png);
}
.funContainer .control a.btnBck:hover {
    background:url(../images/player_pre_hover.png);
}
.funContainer .control a.btnBck:focus{
    background:url(../images/player_pre.png);
}
.funContainer .control a.btnFwd{
    background:url(../images/player_next_b.png);
}
.funContainer .control a.btnFwd:hover{
    background:url(../images/player_next_b_hover.png);
}
.funContainer .control a.btnFwd:focus{
    background:url(../images/player_next_b.png);
}

.funContainer .control a.btnStop{
    background:url(../images/player_stop.png);
}
.funContainer .control a.btnStop:hover, .funContainer .control a.btnStop:focus{
    background:url(../images/player_stop.png);
}

.funContainer .control a.btnSpeed{
    background: url(../images/speed.png);
    margin-left: 17%;
    margin-right: 1%;
}

.funContainer .control a.btnSpeed:hover{
    background: url(../images/speed_hover.png);
    margin-left: 17%;
    margin-right: 1%;
}

.funContainer .control a.btnSpeed2{
    background: url(../images/speed2.png);
    margin-left: 17%;
    margin-right: 1%;
}

.funContainer .control a.btnSpeed2:hover{
    background: url(../images/speed2_hover.png);
    margin-left: 17%;
    margin-right: 1%;
}

.funContainer .control a.btnSpeed4{
    background: url(../images/speed4.png);
    margin-left: 17%;
    margin-right: 1%;
}

.funContainer .control a.btnSpeed4:hover{
    background: url(../images/speed4_hover.png);
    margin-left: 17%;
    margin-right: 1%;
}

.funContainer .control a.Quality0{
    background: url(../images/quality-0.png);
    margin-left: 0%;
}

.funContainer .control a.Quality0:hover{
    background: url(../images/quality-0_hover.png);
    margin-left: 0%;
}

.funContainer .control a.Quality1{
    background:url(../images/quality-1.png);
}

.funContainer .control a.Quality1:hover{
    background:url(../images/quality-1_hover.png);
}

.funContainer .control a.Quality2{
    background:url(../images/quality-2.png);
}
.funContainer .control a.Quality2:hover{
    background:url(../images/quality-2_hover.png);
}

.seeStyle{
    position:absolute;
    top:1;
    left:10;
    z-index:10;
    background:url(../images/btn_collect.png);
    width:40;
    height:100%;
}

.shareStyle{
    position:absolute;
    top:1;
    right:10;
    z-index:10;
    background:url(../images/share.png);
    width:40;
    height:100%;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
    width:80%;
    height:3px;
    margin: 0 auto;
    top: -6px;
    position:relative;
    cursor:pointer;
    z-index: 3;
    /*background: #444; /* fallback */
    /*background:-moz-linear-gradient(top,#333,#555);
    background:-webkit-linear-gradient(top,#333,#555);
    background:-o-linear-gradient(top,#333,#555);*/
    /*box-shadow:0 -3px 3px #111 inset;
    -moz-box-shadow:0 -3px 3px #111 inset;
    -webkit-box-shadow:0 -3px 3px #111 inset;*/
    /*border-radius: 3px;*/
}
.progress span {
    height:100%;
    position:absolute;
    /*top:3px;*/
    left:0;
    display:block;
}
.timeBar{
    z-index:10;
    width:0;
    /*background: #3FB7FC; /* fallback */
    /*background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
    background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
    background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);*/
    border-radius: 0 0 5px 5px;
    background: #3FB7FC;
}
.timeBarBack{
    z-index:4;
    width:100%;
    border-radius: 0 0 5px 5px;
    background: #c0c0c0;
}
.progress span.timeBarCircle {
    z-index: 999;
    top: -6px;
    width: 18px;
    height: 18px;
    background: url(../images/player/volume/btn_progess.png) no-repeat;
}
.timeBarIcon {
    width: 18px;
    height: 18px;
}
.bufferBar{
    z-index:5;
    width:0;
    background: #777; /* fallback */
    /*background:-moz-linear-gradient(top,#999,#666);
    background:-webkit-linear-gradient(top,#999,#666);
    background:-o-linear-gradient(top,#999,#666);*/
    box-shadow:0 -3px 3px #555 inset;
    -moz-box-shadow:0 -3px 3px #555 inset;
    -webkit-box-shadow:0 -3px 3px #555 inset;
    border-radius: 5px 5px 0 0;
}


/* OTHERS CSS */
/* video screen cover */
.loading, #init{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(loading.gif) no-repeat 50% 50%;
    z-index:2;
    display:none;
}
#init{
    background:url(../images/bigplay.png) no-repeat 50% 50% !important;
    cursor:pointer;
}





/* volume */
.volume-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 15;
}
.volume{
    position: relative;
    /*margin-left: 50px;*/
    /*margin-right:85%;*/
    /*bottom:10px;*/
    bottom: 0;
    left:3px;
    cursor:pointer;
    width:55px;
    /*height:5px;*/
    height: 215px;
    background: #000;
    border: 2px solid #00a7dc;
    border-radius: 5px;
    z-index: 5;
    /*background:url(../images/player/volume/unuse.png);*/
}
.volume .volumeCover{
    /*margin: 10% 0;*/
    position:absolute;
    top:10%;
    left:0;
    background:url(../images/player/volume/btn_progess.png) no-repeat center center;
    width:100%;
    height:80%;
    z-index: 5;
}
.volume .volumeBar{
    display: inline-block;
    width: 5px;
    height:40%;
/*  height: 155px;*/
    /*margin: 0 auto;*/
    vertical-align:middle;
    position:absolute;
    bottom:10%;
    left: 23px;
    background:url(../images/player/volume/use.png) repeat-y center 0;
    z-index:1;

}
.volume .volumeNBar{
    display: inline-block;
    width: 5px;
    height:80%;
/*  height: 155px;*/
    /*margin: 0 auto;*/
    vertical-align:middle;
    position:absolute;
    bottom:10%;
    left: 23px;
    background:url(../images/player/volume/unuse.png) repeat-y center 0;
    z-index:0;
}
.volume .volumeoff{
    background-color:#333;
}

.control-wrap {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -60px;
    text-align: center;
    z-index: 10;
}

.time-wrap {
    width: 100%;
    position: absolute;
    top: -18px;
}
.playTime {
    width: 50%;
    padding-left: 2%;
    position:relative;
    /*margin-left: 50px;
    margin-right:70%;
    margin-top:5px;
    margin-bottom:2px;*/
    /*bottom:10px;*/
    left:3px;
    text-align: left;
    float: left;
}
.surplusTime {
    width: 50%;
    padding-right: 2%;
    position: relative;
    right: 0;
    /*bottom: 10px;*/
    text-align: right;
    float: right;
}

.option-wrap {
    width: 30%;
    position: absolute;
    right: 0;
    bottom: -63px;
    z-index: 15;
    text-align: right;
}
.option-wrap > div {
    position: relative;
    display: inline-block;
    width: auto;
}
.option-wrap a {
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}
.option-wrap .tips-wrap {
    position: absolute;
    border: 2px solid #00c2fe;
    border-radius: 5px;
    width: 55px;
    height: auto;
    z-index: 10;
    /*left: -3px;*/
    bottom: 45px;
    background: rgba(0,0,0,.8);
}

.option-wrap .tips-wrap > div {
    width: 100%;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #00506a;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}

.option-wrap .tips-wrap > div:last-child {
    border-bottom: none;
}

.player-tools .subtitle-tips {
	width: 49px;
	height: auto;
	position: absolute;
	top: 37px;
	right: 1%;
	border: 2px solid #00f2fe;
	border-radius: 5px;
	background: rgba(0,0,0, .8);
}
.player-tools .subtitle-tips > div {
	width: 100%;
	height: 38px;
	font-size: 14px;
	color: #fff;
	line-height: 38px;
	text-align: center;
	border-bottom: 1px solid #00506a;
	cursor: pointer;
}
.player-tools .subtitle-tips > div:last-child {
	border-bottom: none;
}

.tv-screen .control .progress {
    display: none;
}

:-webkit-full-screen {
    width:100px;
}

:-moz-full-screen {
    width:100px;
}

:-ms-fullscreen {
    width:100px;
}

:fullscreen {
    width:100px;
}