/*通用部分*/

* { margin: 0; padding: 0; font-family: "微软雅黑"; font-weight: normal; }

a { text-decoration: none; color: #FFF; }

img { border: 0; }

a:hover { color: #188eee; }

ul li { list-style: none; }

.m-content { width: 100px; margin: 0 auto; }

/*音频部分*/

a { outline: none; }

#player { width: 662px; height: 50px; position: relative; margin-top: 5px; }

#player .ctrl { text-shadow: 0 1px 2px #000; line-height: 16px; }

#player .ctrl .control { margin-top: 10px; height: 25px; }

#player .ctrl .control .lefticon { width: 662px; height: 30px; }

#player .ctrl .control .left .img { height: 30px; width: 30px; margin-left: 20px; display: inline-block; background-image: url(allicons.png); background-repeat: no-repeat; background-position: -5px -368px; }

#player .ctrl .control .left .icon { display: inline-block; cursor: pointer; width: 30px; height: 30px; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }

#player .ctrl .icon:hover, #player .ctrl .icon.enable { opacity: 1; }

#player .ctrl .icon:active { opacity: 0.3; }

#player .ctrl .control .playback { background-image: url(allicons.png); background-repeat: no-repeat; background-position: -50px -436px; }

#player .ctrl .control .playback.playing { background-image: url(allicons.png); background-repeat: no-repeat; background-position: -5px -436px; }

#player .ctrl .control .timer { width: 438px; height: 26px; line-height: 26px; font-size: 14px; color: #333; text-align: right; }

#player .ctrl .control .progress { width: 438px; height: 13px; margin-top: 10px; float: left; }

#player .ctrl .control .progress .slider { background-color: #282a31; height: 13px; width: 100px; position: relative; cursor: pointer; -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; }

#player .ctrl .control .progress .slider:hover a, .slider.enable a { opacity: 1; color: #FFF; }

#player .ctrl .control .progress .slider a { background: url(allicons.png) no-repeat -5px -405px; margin-left: -5px; margin-top: -8px; position: absolute; opacity: 1; width: 26px; height: 26px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }

#player .ctrl .control .progress .slider .loaded, .slider .pace { position: absolute; height: 100%; opacity: 0.7; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

#player .ctrl .control .progress .slider .loaded { background: rgba(255, 255, 255, 0.1); }

#player .ctrl .control .progress .slider .pace { background: #258fb8; }

#player .ctrl .control .volume {

	width: 50px;

	height: 35px;

	float: left;

	margin-left: 30px;

	position: absolute;

	left: 300px;

	top: 0px;

}

#player .ctrl .control .volume .icon { background-repeat: no-repeat; background-position: center; cursor: pointer; width: 30px; height: 30px; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }

#player .ctrl .control .volume .mute { background: url(allicons.png) no-repeat -50px -334px; width: 32px; height: 32px; float: left; }

#player .ctrl .control .volume .mute.enable { background: url(allicons.png) no-repeat -5px -334px; }

#player .ctrl .control .volume .slider { background-color: #282a31; float: left; height: 10px; width: 80px; margin: 12px 20px; position: relative; cursor: pointer; -moz-border-radius: 25px; -webkit-border-radius: 25px; -o-border-radius: 25px; -ms-border-radius: 25px; -khtml-border-radius: 25px; border-radius: 25px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; }

#player .ctrl .control .volume .slider:hover a, .slider.enable a { opacity: 1; }

#player .ctrl .control .volume .slider a { margin-left: -5px; position: absolute; opacity: 1; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.1s; }

#player .ctrl .control .volume .slider .loaded, .slider .pace { position: absolute; height: 100%; opacity: 0.7; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }

#player .ctrl .control .volume .slider .loaded { background: rgba(255, 255, 255, 0.1); }

#player .ctrl .control .volume .slider .pace { background: #258fb8; }