* {
	transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
}
::selection {
	background: green;
	color: #fff;
	text-shadow: none;
}
html, body {
	margin: 0;
	padding: 0;
	font-family: 'Microsoft Yahei','微软雅黑',arial;
}
html {
	background-color:#4F4F4F;/*#1b2426;#777779#4F4F4F 333333#3C3534;*/
}
header h1 {
	display: inline-block;
}
header h1 a {
	color: #bbb;
}
a {
	color: #999;
	text-decoration: none;
}
a:hover {
	color: #eee;
	text-decoration: underline;
}
.imageBg {
	background: url(images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.colorBg {
	background-image: none;
}
.wrapper {
	text-align: center;
	width: 99%;
	margin: 0 auto;
}

#player {
	text-align: center;
	/*position: fixed;
	top: 5px;*/
	opacity: 0.2;
	left: 0;
	right: 0;
	line-height:1em;
	z-index: 99;
}
#player:hover {
	opacity: 1;
}

#player span{
    display: inline-block;
    margin-right: 15px;
    cursor: pointer;
}

.loop{
    background: url(images/play_icn_loop_solo.png);
    width: 36px;
    height: 36px;
}


.playNext{
    background: url(images/play_icn_loop.png);
    width: 36px;
    height: 36px;
}

.prev{
    background: url(images/play_btn_prev.png);
    width: 50px;
    height: 50px;
}
.play{
    background: url(images/play_rdi_btn_play.png);
    width: 70px;
    height: 70px;
}
.pause{
    background: url(images/play_rdi_btn_pause.png);
    width: 70px;
    height: 70px;
}
.next{
    background: url(images/play_btn_next.png);
    width: 50px;
    height: 50px;
}
.list {
    background: url(images/play_icn_src.png);
    width: 36px;
    height: 36px;
}
#playlist {
	text-align: left;
	padding: 5px;
	left: 0;
	background-color: rgba(50, 50, 50, 0.5);
}
.info a {
	color: #bbb;
	text-decoration: underline;
}
.bg {
	width: 12px;
	height: 12px;
	display: inline-block;
	cursor: pointer;
}
#bg_pic {
	background-color: #5493B6;
}
#bg_dark {
	background-color: #272822;
}
#playlist ol {
	height: auto;
	overflow: auto;
	margin: 0;
}
#lyricWrapper {
    /*height: 20em;font-color:#999;#9D97A1;#989898;#E5E5E5;font-weight:bold;position: relative;*/
    overflow: hidden;
    margin-top: 5px;
    font-size:1.4em;
    color:#CDC9C9;
	line-height:1.3em;
	height: auto;
    
}

/* http://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text */
#lyricContainer {
    top: 10px;
    height: auto;
    position: relative;
    text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; 
}

/*the highlight color of the current lyric line*/
.current-line-0 {
font-weight:bold;	color: #FAFA17;/*亮黄色*/
}
.current-line-1 {
font-weight:bold;	color: #adff2f;/*绿色亮红色#ff1493;*/
}
.current-line-2 {
font-weight:bold;	color: #F8FBFF;/*近白色*/
}
.current-line-3 {
font-weight:bold;	color: #0cc7dc; /天蓝色*深红色#c617e8;*/
}
.current-song, .current-song a {
	color: #A6E22D;
}
/*hide the default audio controls when overflow, the 526px is the width of the controls in IE
@media screen and (max-width: 526px) {
	#player {
		display: none;
   }
}
*/
/*custom scrollbar for webkit browsers*/
#playlist ol::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 15px;
	background-color: #F5F5F5;
}

#playlist ol::-webkit-scrollbar
{
	width: 5px;
	border-radius: 15px;
	background-color: #F5F5F5;
}

#playlist ol::-webkit-scrollbar-thumb
{
	border-radius: 15px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #BCBCBC;
}