@keyframes loadspin {
	0% {transform: rotate(360deg)}
	100% {transform: rotate(0deg)}
}
/* hide Opera video-detach-button */
body + div[style] {display: none !important}

.cnplayer {
	position:relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
    font: 12px/15px monospace;	
	background: black;
	background-image: repeating-linear-gradient(135deg,
		transparent,transparent 10px,
		rgba(255,255,255,.12) 10px,
		rgba(255,255,255,.12) 20px);
	background-image: none;
}
._cnplayer {
	width: 360px;
	height: 270px;
}
.cnplayer-player,
.cnplayer-advert,
.cnplayer-poster,
.cnplayer-status,
.cnplayer-cntrls {
	position: absolute;
	left:0; width:100%;
	top:0; height:100%;
	z-index: 1;
}
.cnplayer-poster {
	pointer-events: none;
	background: rgba(22,22,22,1);
	display: flex !important;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.cnplayer-poster:before,
.cnplayer-poster:after {
	content: '';
	position: absolute;
	left:0; width:100%;
	top:0; height:100%;
	z-index: 1;
}
.cnplayer-poster:before {box-shadow: inset 0 0 0 1px rgba(222,222,222,.25)}
.cnplayer-poster:after {
	opacity: .2;
	background: transparent none repeat 0 0;
	background-image: 
		linear-gradient(90deg, transparent 0%, transparent 50%, rgb(30,40,70) 50%, rgb(30,40,70)),
		linear-gradient(180deg, transparent 0%, transparent 50%, rgb(30,40,70) 50%, rgb(30,40,70));
	background-size: 2px 2px;
}
.cnplayer-poster > img {
	position: relative;
	display: inline-block;
	min-width: 100%;
	height: auto;
	width: auto;
}
.cnplayer-poster.hddn {
	opacity: .0;
	z-index: -1;
}

.cnplayer-status {
	left:4px;width:auto;
	top:4px;height:auto;
	background: dodgerblue;
	color: white;
	padding: 2px 4px;
}
.cnplayer-player {}
.cnplayer-player:before {
	content: '';
	position: absolute;
	left:0; width:100%;
	top:0; height:100%;
	opacity: 0;
	z-index: 2;
	background: rgba(0,0,0,.0) none no-repeat 50% 50%;
	background-image: repeating-linear-gradient(135deg,
		transparent,transparent 10px,
		rgba(255,255,255,.05) 10px,
		rgba(255,255,255,.05) 20px);
	box-shadow: inset 0 0 0px 1px cyan;
}
.cnplayer-player > div {
	background: rgba(0,0,0,.5);
	position: relative;
	left:0; width:100%;
	top:0; height:100%;
}
.cnplayer-player > div > ins {
	position: absolute;
	left:0;width: auto;
	top:0;height: auto;
	max-width: 100%;
	overflow: hidden;
	padding: 1px 3px;
	white-space: pre;
	text-align: left;
	pointer-events: none;
	text-decoration: none;
	font: 12px/16px monospace;
	color: cyan;
	z-index: 2;
	background: rgba(50,50,50,.75);
	transition: top .25s linear 0s;
}
.cnplayer-player > div > ins.dsbl {
	top: -17px;
	color: darkgray;
}

.cnplayer-player > div > .jwplayer {
	display: block;
	position: absolute;
	left:0; width:100% !important;
	top:0; height:100% !important;
}
.cnplayer-advert {
	background-color: rgba(0,0,0,.05);
	left:0px; width:100%;
	top:0px; height:100%;
}
.cnplayer-advert.wndw {
	left:50%;width:360px;
	top:0px;height:270px;
	margin: 0 0 0 -180px;
}
.cnplayer-advert.hddn {
	visibility: hidden;
	opacity: 0;
	z-index:-1;
}
.cnplayer-advert > div.imawrapper {}

/* BigPlayButton */
.cnplayer-button {
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 70px;
	height: 48px;
	margin: -24px 0 0 -35px;
	border: 1px solid rgba(0,203,240,.5);
	border-radius: 3px;
	outline: 0 !important;
	background: rgba(50,50,50,.75) url(./controls.png) no-repeat 50% -180px;
	color: rgb(0,203,240);
	font: 36px/65px 'Glyphicons Halflings';
	transition: opacity .2s 0s linear;
}
.cnplayer-button {opacity:.75}
.cnplayer-button:hover {opacity:1}
.cnplayer.ps-playing .cnplayer-button {opacity:0;z-index:0;}

.cnplayer-cntrls {
	position: relative;
	top: 100%;
	height: 30px;
	max-width: 540px;
	max-width: 96%;
	margin: -40px auto 0;
	font: 12px/29px 'Roboto', 'Arial';
	background: rgba(0,0,0,.75);
	box-shadow: inset 0 0 0 1px rgba(0,203,240,.5);
	border-radius: 3px;
	cursor: default;
	transition: opacity .25s .0s ease-in-out;
	transition-property: opacity, margin-top;
}
.cnplayer .cnplayer-cntrls {
	margin-top: -24px;
	opacity: 0;
}
.cnplayer.st-hover .cnplayer-cntrls {
	margin-top: -40px;
	opacity: 1;
}

.cnplayer-cntrls time,
.cnplayer-cntrls button {
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
	color: whitesmoke;
	background: rgba(255,255,255,0);
	height: 100%;
	transition: background-color .2s 0s linear;
}
.cnplayer-cntrls time {
	width: 50px;
	text-align: center;
}

.cnplayer-cntrls button {
	background: rgba(255,255,255,0) url(./controls.png) no-repeat 0 0;
	width: 30px;
	font-family: 'Arial';
	color: white;
}
.cnplayer-cntrls button:hover {background-color: rgba(255,255,255,.05)}

.cnplayer-cntrls button.full,
.cnplayer-cntrls button.mute {float: right}
.cnplayer-cntrls button.play {float: left}
.cnplayer-cntrls time.curr {float: left}
.cnplayer-cntrls time.dura {float: right}
.cnplayer-cntrls span,
.cnplayer-cntrls u,
.cnplayer-cntrls s,
.cnplayer-cntrls b {
	display: block;	
	overflow: hidden;
}
.cnplayer-cntrls u {height: 100%}
.cnplayer-cntrls u > s {
	background: whitesmoke;
	border-radius: 4px;
	margin: 11px 0 0;
	height: 8px;
	cursor: pointer;
	cursor: default;	
}
.cnplayer-cntrls u > s > b {
	background: tomato;
	height: 100%;
	width: 12%;
}
.cnplayer-cntrls u.volume {
	float: right;
	width: 80px;
}
.cnplayer-cntrls u.volume > s {
	height: 7px;
	margin: 12px 0 0 4px;
	background: gray;
}
.cnplayer-cntrls u.volume > s > b {
	background: rgb(0,203,240);
}

.cnplayer-cntrls span {
	text-align: left;
	color: whitesmoke;
	height: 100%;
	line-height: 30px;
	padding: 0 4px 0 8px;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: none;
}

.cnplayer-cntrls > i {
	position: absolute;
	margin-left: -25px;
	width: 50px;
	left: 100px;
	bottom: 100%;
	line-height: 20px;
	color: whitesmoke;
	font-style: normal;
	text-align: center;
	pointer-events: none;
	border-radius: 3px 3px 0 0;
	background: rgba(0,140,180,1);
	text-shadow: 0 0 2px rgba(0,0,0,1);
	transition: opacity .2s 0s linear;
}
.cnplayer-cntrls > i.hddn {opacity: 0}
.cnplayer-cntrls > i:after {
	content: ' ';
	position:absolute;
	left:50%;top:100%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: rgba(0,140,180,1);
	border-bottom-width: 0;
}

.cnplayer .cnplayer-cntrls button.play {background-position: 0 0}
.cnplayer .cnplayer-cntrls button.play:hover {background-position: -30px 0}
.cnplayer.ps-playing .cnplayer-cntrls button.play {background-position: 0 -30px}
.cnplayer.ps-playing .cnplayer-cntrls button.play:hover {background-position: -30px -30px}

.cnplayer .cnplayer-cntrls button.mute {background-position: 0 -120px}
.cnplayer .cnplayer-cntrls button.mute:hover {background-position: -30px -120px}
.cnplayer.vs-muted .cnplayer-cntrls button.mute {background-position: 0 -150px}
.cnplayer.vs-muted .cnplayer-cntrls button.mute:hover {background-position: -30px -150px}

.cnplayer .cnplayer-cntrls button.full {background-position: 0 -60px}
.cnplayer .cnplayer-cntrls button.full:hover {background-position: -30px -60px}
.cnplayer.ps-fullscreen .cnplayer-cntrls button.full {background-position: 0 -90px}
.cnplayer.ps-fullscreen .cnplayer-cntrls button.full:hover {background-position: -30px -90px}

.cnplayer.ps-fullscreen {
	width: 100%;
	height: 100%;
	margin: 0;
}

.cnplayer.ps-noduration .cnplayer-cntrls u.seeker,
.cnplayer.ps-noduration .cnplayer-cntrls time.dura {display:none}

.cnplayer.ps-livestream .cnplayer-cntrls span {display:block}
.cnplayer.ps-livestream .cnplayer-cntrls u.seeker,
.cnplayer.ps-livestream .cnplayer-cntrls time.curr,
.cnplayer.ps-livestream .cnplayer-cntrls time.dura {display:none}

.cnplayer.st-idle {}
.cnplayer.st-idle .cnplayer-cntrls {visibility:hidden}
.cnplayer.st-idle .cnplayer-button:before {content:'\e090'}
.cnplayer.st-idle .cnplayer-button {opacity: .05;
	cursor: default;
	background: rgba(255,255,255,1.255);
	border-radius: 50%;
	margin-top: -35px;
	height: 70px;
	border: none;
	padding: 0px;
}

.cnplayer.st-load {}
.cnplayer.st-load .cnplayer-cntrls {visibility:hidden}
.cnplayer.st-load .cnplayer-button {visibility:hidden}

.cnplayer.ls-buff .cnplayer-cntrls button.play {
	background: transparent;	
	pointer-events: none;
	margin: 5px 5px 0 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgb(0,203,240);
	border-top-color: transparent;
	animation: loadspin .6s linear 0s infinite reverse;
}

.cnplayer.ls-buff:after,
.cnplayer.st-load:after {
	content:'';
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border-radius: 50%;
	border: 3px solid rgba(0,203,240,1);
	border-top-color: transparent;
	animation: loadspin .6s linear 0s infinite reverse;
}
.cnplayer.ls-buff:after {opacity: .25}
.cnplayer.st-hover.ls-buff:after{opacity: .0}

.cnplayer.st-fail {}
.cnplayer.st-fail .cnplayer-cntrls {visibility:hidden}
.cnplayer.st-fail .cnplayer-button {
	z-index: 2;
	opacity: 1;
	cursor: pointer;
	border-color: tomato;
	color: tomato;
	background-image: none;
	line-height: 45px;
}
.cnplayer.st-fail .cnplayer-button:before {content:'\e090'}