*{
	margin:0em;
	padding:0em;
}

:focus{
	outline:none;
}

::selection {
	/* background: #c93ed5; Safari 
	color:#fff;*/
}

::-moz-selection {
	/*background: #c93ed5;  Firefox 
	color:#fff;*/
}

body { 
	background: #F1F2F3;
	font-family: '微软雅黑';
	margin:0em;
	padding:0em;
}

/* tplayer style*/
#t_wrapper{
	position: fixed;
	bottom:0;
	left:0;
	z-index:999;
	width:100%;
	margin:0px auto;
	padding-top:16px;
	background:none;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
}
.t_wrapper_bj{ background:#000; opacity:0.95; filter:alpha(opacity=95); overflow:hidden;}
#t_wrapper .closes{ 
	position:absolute; 
	right:0; 
	top:0; 
	z-index:9999;
	width:37px; 
	height:16px;
	background:url(../images/music-top-bj.png) no-repeat; 
	text-align:center;
	cursor:pointer;
}
.lock{ width:16px; height:12px; margin:2px auto 0 auto; background:url(../images/playbar.png) no-repeat;}
.open_lock{ background-position:0 0;}
.open_lock:hover{ background-position:0 -20px;}
.close_lock{ background-position:-20px 0;}
.close_lock:hover{ background-position:-20px -20px;}

#t_cover{
	position:relative;
	float:left;
	height:80px;
	width:80px;
	overflow:hidden;
}

#t_cover img{
	position:relative;
	min-width: 7em;
	max-height: 7em;
	top: 50%;
	left:50%;
  	-webkit-transform: translate(-50%,-50%);
  	-moz-transform: translate(-50%,-50%);
  	-ms-transform: translate(-50%,-50%);
  	-o-transform: translate(-50%,-50%);
  	transform: translate(-50%,-50%);
}

#t_cover img{
	-webkit-animation: coveroin 0.75s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: coveroin 0.75s;
	-moz-animation-fill-mode: forwards;
	-mos-animation: coveroin 0.75s;
	-mos-animation-fill-mode: forwards;
	-o-animation: coveroin 0.75s;
	-o-animation-fill-mode: forwards;
	animation: coveroin 0.75s;
	animation-fill-mode: forwards;
}

#t_top{
	position:relative;
	height:28px;
	padding-top:0;
	padding-left:100px;
	padding-right:20px;
	
}

#t_title_info{
	position:relative;
	color:#FFF;
	font-size:14px;
	text-align:center;
	line-height:28px;
	height:28px;
	white-space: nowrap;
	-webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.artist{
	font-weight:400;
}

#t_middle{
	position:relative;
	height:14px;
	margin:0 20px 0 100px;
	overflow:hidden;
}

#play{
	position:relative;
	width:16px;
	height:16px;
	float:left;
	color: #FFF;
	line-height:16px;
	cursor:pointer;
}
 
#play:hover{
	color: #c93ed5;
}

#play:before{
	position: absolute;
	margin-top: 0;
	content: "\f04b";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
}

#pause{	
	position:relative;
	width:1.25em;
	height:1.25em;
	float:left; 
	color: #FFF;
	cursor:pointer;
 }
 
#pause:hover{
	color: #c93ed5;
}

#pause:before{
	position: absolute;
	margin-top: -.074em;
	content: "\f04c";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size: 1.5em;
}

.visible{display:block; }
.hidden{display:none; }

#t_progress{
	position:relative;
	margin:0 10px;
	width: -webkit-calc(100% - 2.8em);
	width:-moz-calc(100% - 2.8em);
	width:-mos-calc(100% - 2.8em);
	width:-o-calccalc(100% - 2.8em);
	width:calc(100% - 2.8em);
	height:14px;
	float: left;
	background:#FFF;
	cursor:pointer;
}

.ui-slider-horizontal{
	
}

.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
	background-color: #c93ed5;
}

#current{
	position:absolute;
	left:5px;
	color:#333;
	z-index:5;
	line-height:14px;
}

#duration{
	position:absolute;
	right:5px;
	color:#333;
	z-index:5;
	line-height:14px;
}

#error{
	position:absolute;
	color:#fff;
	z-index:5;
	left: 50%;
  	-webkit-transform: translateX(-50%);
  	-moz-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	-o-transform: translateX(-50%);
  	transform: translateX(-50%);
}


#prev{
	position:relative;
	width:14px;
	height:14px;
	float:left;
	margin-left:6px;
	color: #FFF;
	cursor:pointer;
 }
 
#prev:hover{
	color: #c93ed5;
}

#prev:before{
	position: absolute;
	content: "\f04a";
	width:14px;
	height:14px;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size:14px;
	line-height:14px;
}

#next{
	position:relative;
	width:14px;
	height:14px;
	float:left;
	margin-left:16px;
	color: #FFF;
	cursor:pointer;
}
 
#next:hover{
	color: #c93ed5;
}

#next:before{
	position: absolute;
	content: "\f04e";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size:14px;
	line-height:14px;
}

#t_bottom{
	position:relative;
	height:38px;
	margin:0 30px 0 100px;
}

#range{
	position:absolute;
	bottom:1.25em;
	right:0em;
}


#vol:before{
	content: "\f028";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	height:14px;
	line-height:14px;
	width:14px;
	text-align:center;
	position: absolute;
	left: -20px;
	top: -5px;
	color: #FFF;
}
#val{
	position: absolute;
	display: block;
	top: -30px;
	width: 26px;
	height: 20px;
	line-height:20px;
	text-align: center;
	border: 1px solid #c93ed5;
	box-sizing: border-box;
	background:#c93ed5;
	color:#fff;
}

#val:after{
	position:absolute;
	content:"";
	bottom: -0.68em;
	right: -0.068em;
    width: 0;
    height: 0;
    border-top: 0.625em solid #c93ed5; 
    border-left: 0.625em solid transparent;
}

#rangeVal{
	position:relative;
	width:100px;
	height:4px;
	background:#FFF;
	cursor:pointer;
}

#range .ui-slider-handle{
	position:absolute;
	width:0.75em;
	height:0.75em;
	border-radius:100%;
	top: -0.175em;
	background:#FFF;
}

.noselectpls{
	display:none;
	position:absolute;
	bottom:2em;
	left:50%;
	cursor:pointer;
	color:#FFF;
	-webkit-animation: heyopenpls 2s ease infinite;
	-moz-animation: heyopenpls 2s ease infinite;
	-mos-animation: heyopenpls 2s ease infinite;
	-o-animation: heyopenpls 2s ease infinite;
	animation: heyopenpls 2s ease infinite;
}


.noselectpls:hover{
	color:#c93ed5;
}

.noselectpls:before{
	content: "\f107";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: 900;
	font-size: 2.25em;
	position: absolute;
	-webkit-animation: plshowbtndwn .5s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: plshowbtndwn .5s;
	-moz-animation-fill-mode: forwards;
	-mos-animation: plshowbtndwn .5s;
	-mos-animation-fill-mode: forwards;
	-o-animation: plshowbtndwn .5s;
	-o-animation-fill-mode: forwards;
	animation: plshowbtndwn .5s;
	animation-fill-mode: forwards;
}


.selectpls{
	color:#c93ed5;
	position:absolute;
	bottom:2em;
	left:50%;
	cursor:pointer;
}

.selectpls:before{
	content: "\f107";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: 900;
	font-size: 2.25em;
	position: absolute;
	-webkit-animation: plshowbtnup .5s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation: plshowbtnup .5s;
	-moz-animation-fill-mode: forwards;
	-mos-animation: plshowbtnup .5s;
	-mos-animation-fill-mode: forwards;
	-o-animation: plshowbtnup .5s;
	-o-animation-fill-mode: forwards;
	animation: plshowbtnup .5s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }

	40%		{ -webkit-transform: translateY(-1.25em); }

	60%		{ -webkit-transform: translateY(-.75em); }
}

@-moz-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }

	40%		{ -moz-transform: translateY(-1.25em); }

	60%		{ -moz-transform: translateY(-.75em); }
}

@-mos-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -mos-transform: translateY(0); }

	40%		{ -mos-transform: translateY(-1.25em); }

	60%		{ -mos-transform: translateY(-.75em); }
}

@-o-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }

	40%		{ -o-transform: translateY(-1.25em); }

	60%		{ -o-transform: translateY(-.75em); }
}

@keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

	40%		{ transform: translateY(-1.25em); }

	60%		{ transform: translateY(-.75em); }
}

@-webkit-keyframes plshowbtnup{
	0%		{ -webkit-transform:rotate(0deg); }
	100%	{ -webkit-transform:rotate(180deg); }
}

@-moz-keyframes plshowbtnup{
	0%		{ -moz-transform:rotate(0deg); }
	100%	{ -moz-transform:rotate(180deg); }
}

@-mos-keyframes plshowbtnup{
	0%		{ -mos-transform:rotate(0deg); }
	100%	{ -mos-transform:rotate(180deg); }
}

@-o-keyframes plshowbtnup{
	0%		{ -o-transform:rotate(0deg); }
	100%	{ -o-transform:rotate(180deg); }
}

@keyframes plshowbtnup{
	0%		{ transform:rotate(0deg); }
	100%	{ transform:rotate(180deg); }
}

@-webkit-keyframes plshowbtndwn{
	0%		{ -webkit-transform:rotate(180deg); }
	100%	{ -webkit-transform:rotate(360deg);	}
}

@-moz-keyframes plshowbtndwn{
	0%		{ -moz-transform:rotate(180deg); }
	100%	{ -moz-transform:rotate(360deg);	}
}

@-mos-keyframes plshowbtndwn{
	0%		{ -mos-transform:rotate(180deg); }
	100%	{ -mos-transform:rotate(360deg);	}
}

@-o-keyframes plshowbtndwn{
	0%		{ -o-transform:rotate(180deg); }
	100%	{ -o-transform:rotate(360deg);	}
}

@keyframes plshowbtndwn{
	0%		{ transform:rotate(180deg); }
	100%	{ transform:rotate(360deg);	}
}

@-webkit-keyframes coveroin{
	0%		{ -webkit-transform:translate(-50%,-150%); }
	100%	{ -webkit-transform:translate(-50%,-50%); }
}

@-moz-keyframes coveroin{
	0%		{ -moz-transform:translate(-50%,-150%); }
	100%	{ -moz-transform:translate(-50%,-50%); }
}

@-mos-keyframes coveroin{
	0%		{ -mos-transform:translate(-50%,-150%); }
	100%	{ -mos-transform:translate(-50%,-50%); }
}

@-o-keyframes coveroin{
	0%		{ -o-transform:translate(-50%,-150%); }
	100%	{ -o-transform:translate(-50%,-50%); }
}

@keyframes coveroin{
	0%		{ transform:translate(-50%,-150%); }
	100%	{ transform:translate(-50%,-50%); }
}