﻿/*　*/
.wkvideoif
{
	position:absolute;
	height:32px;
	margin:0;
	padding:0;
	left:0;
	right:0;
	top:0;
	bottom:0;
	
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	cursor:default;
	font-family: arial, sans-serif;

	white-space:nowrap;
	overflow:hidden;
}
.wkvideoifFullscreenContainer
{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background-color:#000;
	overflow:hidden;
}
.wkvideoif.audio
{
	position:relative;
	display:inline-block;
}
.wkvideoifBody
{
	position:absolute;
	width:100%;
	height:100%;;
	margin:0;
	padding:0;
	
	white-space:nowrap;

	background: rgba(0,0,0,.8);
	background: -moz-linear-gradient(top,		rgba(32,32,32,.8) 0%,	rgba(0,0,0,.7) 50%,	rgba(32,32,32,.8) 100%);
	background: -webkit-linear-gradient(top,	rgba(32,32,32,.8) 0%,	rgba(0,0,0,.7) 50%,	rgba(32,32,32,.8) 100%);
	background: linear-gradient	(to bottom,		rgba(32,32,32,.8) 0%,	rgba(0,0,0,.7) 50%,	rgba(32,32,32,.8) 100%);
	
	transition-property: opacity;
	transition-duration: 0.25s;
}
.wkvideoifButton{
	position:relative;
	display:inline-block;
	margin:2px;
	width:28px;
	height:28px;
	border-radius:4px;
	background-color:rgba(0,0,0,.25);
}
.wkvideoifPlay,
.wkvideoifPause
{
	float:left;
	margin-left:4px;
}
.wkvideoifPlay:hover,
.wkvideoifPause:hover
{
	background-color:rgba(0,0,0,.5);
}
.wkvideoifPlay::before
{
	content:"";
	position:absolute;
	width:0;
	height:0;
	left:10px;
	top:8px;
	border-top:6px solid transparent;
	border-left:12px solid #fff;
	border-right:none;
	border-bottom:6px solid transparent;
}
.wkvideoifPause::before,
.wkvideoifPause::after
{
	content:"";
	position:absolute;
	top:9px;
	width:0;
	height:10px;
	border-left:4px solid #fff;
}
.wkvideoifPause::before
{
	right:50%;
	margin-right:1px;
}
.wkvideoifPause::after
{
	left:50%;
	margin-left:1px;
}
.wkvideoifTimedisp
{
	position:relative;
	float:left;
	width:auto;
	height:28px;
	margin:2px;
	padding:0 4px 0 4px;
	line-height:28px;
	font-size:12px;
	color:#fff;
	border-radius:4px;
	background-color:rgba(0,0,0,.25);
}
.wkvideoifCurrentTime,
.wkvideoifTotalTime
{
	display:inline-block;
}
.wkvideoifRWrapper
{
	position:absolute;
	top:0;
	right:0;
	height:100%;
	overflow:hidden;
}
.wkvideoifRWrapper .wkvideoifButton,
.wkvideoifRateButton
{
	float:right;
}
.wkvideoifFullscreenOn,
.wkvideoifFullscreenOff
{
	margin-right:4px;
}
.wkvideoifFullscreenOn:hover,
.wkvideoifFullscreenOff:hover
{
	background-color:rgba(0,0,0,.5);
}
.wkvideoifFullscreen1
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.wkvideoifFullscreenOn::before,
.wkvideoifFullscreenOn::after,
.wkvideoifFullscreenOff::before,
.wkvideoifFullscreenOff::after,
.wkvideoifFullscreen1::before,
.wkvideoifFullscreen1::after
{
	content:"";
	position:absolute;
	width:3px;
	height:3px;
	border:1px solid #fff;

}
.wkvideoifFullscreen1::before
{
	left:7px;
	top:7px;
}
.wkvideoifFullscreen1::after
{
	right:7px;
	top:7px;
}
.wkvideoifFullscreenOff::before,
.wkvideoifFullscreenOn::before
{
	left:7px;
	bottom:7px;
}
.wkvideoifFullscreenOff::after,
.wkvideoifFullscreenOn::after
{
	right:7px;
	bottom:7px;
}
.wkvideoifFullscreenOn .wkvideoifFullscreen1::before
{
	border-top:1px solid #fff;
	border-right:1px solid transparent;
	border-bottom:1px solid transparent;
	border-left:1px solid #fff;
}
.wkvideoifFullscreenOn .wkvideoifFullscreen1::after
{
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-bottom:1px solid transparent;
	border-left:1px solid transparent;
}
.wkvideoifFullscreenOn::before
{
	border-top:1px solid transparent;
	border-right:1px solid transparent;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
}
.wkvideoifFullscreenOn::after
{
	border-top:1px solid transparent;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	border-left:1px solid transparent;
}

.wkvideoifFullscreenOff .wkvideoifFullscreen1::before
{
	border-top:1px solid transparent;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	border-left:1px solid transparent;
}
.wkvideoifFullscreenOff .wkvideoifFullscreen1::after
{
	border-top:1px solid transparent;
	border-right:1px solid transparent;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
}
.wkvideoifFullscreenOff::before
{
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-bottom:1px solid transparent;
	border-left:1px solid transparent;
}
.wkvideoifFullscreenOff::after
{
	border-top:1px solid #fff;
	border-right:1px solid transparent;
	border-bottom:1px solid transparent;
	border-left:1px solid #fff;
}
.wkvideoifRateButton
{
	position:relative;
	width:32px;
	height:auto;
	top:50%;
	margin-top:-8px;
	overflow:hidden;
}
.wkvideoifRateBox
{
	position:absolute;
	width:32px;
	height:auto;
	overflow:hidden;
	z-index:9999;
}
.wkvideoifRateBoxHead
{
	font-size:9px;
	text-align:center;
	color:#ccc;
	background-color:rgba(0,0,0,1);
}
.wkvideoifRateBoxCell
{
	position:relative;
	font-size:10px;
	text-align:center;
	color:#ccc;
	background-color:rgba(32,32,32,0.5);
	border:1px solid transparent;
	height:16px;
	line-height:16px;
}
.wkvideoifRateBoxCellSelected
{
	color:#fff;
	background-color:rgba(0,0,0,0.25);	
}
.wkvideoifRateBoxCell:hover
{
	background-color:rgba(0,0,0,.5);
}
.wkvideoifRateBox .wkvideoifRateBoxCellSelected,
.wkvideoifRateBox .wkvideoifRateBoxCell:hover
{
	color:#000;
	background-color:rgba(255,255,255,0.8);
}
.wkvideoifMuteOff,
.wkvideoifMuteOn
{
}
.wkvideoifMuteOff:hover,
.wkvideoifMuteOn:hover
{
	background-color:rgba(0,0,0,.5);
}
.wkvideoifMuteOff::before,
.wkvideoifMuteOn::before
{
	content:"";
	position:absolute;
	right:50%;
	top:50%;
	width:0;
	margin-top:-4px;
	margin-left:-1px;
	height:8px;
}
.wkvideoifMuteOff::before
{
	border-left:4px solid #fff;
}
.wkvideoifMuteOn::before
{
	border-left:4px solid #666;
}
.wkvideoifMuteOff::after,
.wkvideoifMuteOn::after
{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:0;
	height:0;
	margin-left:-8px;
	margin-top:-8px;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left:6px solid transparent;
}
.wkvideoifMuteOff::after
{
	border-right:7px solid #fff;
}
.wkvideoifMuteOn::after
{
	border-right:7px solid #666;
}
.wkvideoifVolume
{
	position:absolute;
	width:28px;
	z-index:9999;
}
.wkvideoifSeekLineBase,
.wkvideoifSeekLine
{
	position:absolute;
	top:50%;
	left:0;
	right:0;
	height:0;
	border-top:1px solid #999;
}
.wkvideoifVolumeLineBase,
.wkvideoifVolumeLine
{
	position:absolute;
	left:25%;
	right:25%;
	bottom:0;
	height:100%;
	background-color:#333;
	border:1px solid #000
}
.wkvideoifVolumeLine,
.wkvideoifSeekLine
{
	background-color:#f00;
}

.wkvideoifVolumeKnob
{
	position:absolute;
	left:25%;
	right:25%;
	bottom:0;
	height:1px;
	background-color:#fff;
	border:1px solid #000
}
.wkvideoifSeekKnob
{
	position:absolute;
	top:50%;
	left:0;
	margin-top:-4px;
	margin-left:-4px;
	border-radius:4px;
	width:8px;
	height:8px;
	background-color:#fff;
}
.wkvideoifSeek
{
	position:absolute;
	top:2px;
	height:28px;
}
