@font-face {
	font-family: 'iconfont_bplayer';  /* project id 67267 */
	src: url('//at.alicdn.com/t/font_ksctw5cl4pjy8pvi.eot');
	src: url('//at.alicdn.com/t/font_ksctw5cl4pjy8pvi.eot?#iefix') format('embedded-opentype'),
	url('//at.alicdn.com/t/font_ksctw5cl4pjy8pvi.woff') format('woff'),
	url('//at.alicdn.com/t/font_ksctw5cl4pjy8pvi.ttf') format('truetype'),
	url('//at.alicdn.com/t/font_ksctw5cl4pjy8pvi.svg#iconfont') format('svg');
}

bplayer {
	display: block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.iconfont_bplayer {
	font-family:"iconfont_bplayer";
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
}

.bPlayer {
	box-sizing: border-box;
	position: relative;
	font-family:
		Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", STXihei, STHeiti, Heiti, SimSun, sans-serif;
	width: 100%;
	height: 60px;
	background-color: #FFF;
	cursor: default;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	color: #000;
	text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 2px;
}

.cover_bplayer {
	background-color: #CCC;
	height: 60px;
	width: 60px;
	position: absolute;
	left: 0;
	top: 0;
}
.cover_bplayer:before {
	content: "\e605";
	font-family:"iconfont_bplayer";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	line-height: 60px;
	text-align: center;
	font-size: 40px;
	color: #FFF;
}

.coverimg_bplayer {
	position: absolute;
	background-size: cover;
	height: 100%;
	width: 100%;
}

.controlbtn_bplayer {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 60px;
	text-align: center;
	font-size: 40px;
	color: #FFF;
	background-color: rgba(0,0,0,0.27);
	opacity: 0;
	display: block;
	transition: opacity 500ms;
	text-shadow: #FFF 0px 0px 2px;
}
.controlbtn_bplayer.playBtn_bplayer {
	opacity: 0.8;
}
.controlbtn_bplayer:hover {
	opacity: 1;
}

.info_bplayer {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	height: 60px;
	width: 100%;
}

.titlewrap_bplayer {
	padding-left: 72px;
	padding-right: 140px;
	line-height: 60px;
	height: 60px;
	font-size: 20px;
	white-space: nowrap;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
}

.author_bplayer {
	font-size: 80%;
	opacity: 0.8;
}
.author_bplayer:before {
	content: " - ";
}

.buttons_bplayer {
	position: absolute;
	top: 20px;
	font-size: 16px;
	right: 0;
}
.btn_bplayer {
	height: 20px;
	width: 20px;
	line-height: 20px;
	text-align: center;
	margin-right: 8px;
	float: right;
	opacity: 1;
	transition: opacity 500ms;
}

.progress_bplayer {
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 100%;
	transition: height 500ms;
}
.progress_bplayer:hover {
	height: 6px;
}
.loaded_bplayer {
	position: absolute;
	left: 0;
	height: 100%;
	width: 0;
	background-color: #AAA;
	transition: width 300ms linear;
}
.played_bplayer {
	position: absolute;
	left: 0;
	height: 100%;
	width: 0;
	background-color: #A91212;
	box-shadow: #A91212 0px 0px 3px;
	transition: width 100ms linear;
	overflow: hidden;
}
.glow_bplayer {
	position: absolute;
	right: 0;
	width: 20px;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
}
.progressctl_bplayer {
	position: absolute;
	left: 0;
	height: 100%;
	width: 100%;
}

.time_bplayer {
	position: absolute;
	top: 20px;
	right: 65px;
	line-height: 20px;
	font-size: 12px;
}
.total_bplayer:before {
	content: " / ";
}

.volume_bplayer {
	position: relative;
	line-height: 20px;
	height: 20px;
	width: 20px;
	float: right;
	margin-right: 8px;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0);
	background-color: #FFF;
	transition: box-shadow 500ms, width 500ms;
}
.volume_bplayer:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 109px;
}
.volumebtn_bplayer {
	float: right;
	margin: 0;
}
.volumebar_bplayer {
	position: absolute;
	top: 0;
	right: 20px;
	height: 20px;
	width: 88px;
}
.volumebg_bplayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	margin: 8px 0 8px 5px;
	height: 4px;
	background-color: #AAA;
}
.volumeval_bplayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	margin: 8px 0 8px 5px;
	height: 4px;
	background-color: #A91212;
	box-shadow: #A91212 0px 0px 3px;
}
.volumectl_bplayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	margin-left: 6px;
	padding-right: 3px;
	height: 20px;
}


.disabled_bplayer {
	opacity: 0.2;
}

.hidden_bplayer {
	opacity: 0;
	display: none;
}

.narrow_bplayer .buttons_bplayer {
	top: 35px;
}
.narrow_bplayer .time_bplayer {
	top: 35px;
}

.narrow_bplayer .titlewrap_bplayer {
	padding-right: 0;
	line-height: 40px;
	font-size: 16px;
}


/* Section for bPayer_slim */
.bPlayer.slim_bPlayer {
	height: 30px;
}

.slim_bPlayer .cover_bplayer {
	height: 30px;
	width: 30px;
}
.slim_bPlayer .cover_bplayer:before {
	line-height: 30px;
	font-size: 20px;
}

.slim_bPlayer .controlbtn_bplayer {
	line-height: 30px;
	font-size: 20px;
}

.slim_bPlayer .info_bplayer {
	height: 30px;
}

.slim_bPlayer .titlewrap_bplayer {
	padding-left: 38px;
	padding-right: 140px;
	line-height: 30px;
	height: 30px;
	font-size: 16px;
}

.slim_bPlayer .buttons_bplayer {
	top: 0;
	height: 30px;
}
.slim_bPlayer .btn_bplayer {
	height: 30px;
	line-height: 30px;
}

.slim_bPlayer .time_bplayer {
	top: 0;
	height: 30px;
	line-height: 30px;
}

.slim_bPlayer .volume_bplayer {
	height: 30px;
	transition: width 500ms;
}
.slim_bPlayer .volume_bplayer:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0);
	width: 109px;
}
.slim_bPlayer .volumebar_bplayer {
	height: 30px;
}
.slim_bPlayer .volumebg_bplayer {
	margin: 13px 0 13px 5px;
}
.slim_bPlayer .volumeval_bplayer {
	margin: 13px 0 13px 5px;
}
.slim_bPlayer .volumectl_bplayer {
	height: 30px;
}

