body {
	font-family: 'Microsoft Yahei','Helvetica Neue',sans-serif,SimHei;
	overflow: hidden;
	background: #3b3837;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(255, 0, 0, 0); /*解决背景闪的bug*/
}

//Mixin
.size(@width, @height) {
	width: @width;
	height: @height;
}

//icon
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?-32qlpk');
	src:url('../fonts/icomoon.eot?#iefix-32qlpk') format('embedded-opentype'),
		url('../fonts/icomoon.woff?-32qlpk') format('woff'),
		url('../fonts/icomoon.ttf?-32qlpk') format('truetype'),
		url('../fonts/icomoon.svg?-32qlpk#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-music:before {
	content: "\e600";
}
.icon-play:before {
	content: "\e601";
}
.icon-backward:before {
	content: "\e603";
}
.icon-forward:before {
	content: "\e604";
}
.icon-volume-medium:before {
	content: "\e605";
}
.icon-volume-mute:before {
	content: "\e606";
}
.icon-loop:before {
	content: "\e607";
}
.icon-loop2:before {
	content: "\e608";
}
.icon-shuffle:before {
	content: "\e609";
}
.icon-vynil:before {
	content: "\e60a";
}

//index
.indexBg {
	position: absolute;
	top: 0;
	.size(100%, 100%);
	text-align: center;
	z-index: 99;

	.indexMe {
		margin: 30% auto 0;
		padding: 10px 0;

		img {
			display: block;
			width: 100px;
			margin: 0 auto;
			border-radius: 50%;
			border: 2px solid #fff;
		}

		.indexName {
			display: block;
			margin-top: 10px;
		}
	}

	p {
		font-size: 18px;
		color: #fff;
	}

	.indexBtn {
		position: absolute;
		bottom: 0;
		width: 100%;
		margin-bottom: 0;
		background: rgba(0, 0, 0, 0.3);

		i {
			margin-right: 10px;
			vertical-align: middle;
		}

		a {
			display: inline-block;
			padding: 15px 0;
			text-decoration: none;
			color: #fff;
			vertical-align: middle;
		}
	}
}
//背景模糊效果
.dim {
	display: block;
	position: absolute;
	top: 0;
	.size(100%, 100%);
	-webkit-filter: blur(6px);
	filter: blur(6px);
	z-index: 9;
	overflow: hidden;
}

//music
.music {
	.size(100%, 100%);
	overflow: hidden;
}

.musicContent {
	overflow: hidden;
	.musicHeader {
		margin: 10px 10px 0 10px;
		padding: 10px 0;
		text-align: center;
		overflow: hidden;
	}

	.musicList {
		.size(233px, 200px);
		margin: -38px auto 0px;
		text-align: center;
		padding-top: 40px;
		background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379));
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379));
		border-radius: 50%;
		border: 5px solid rgba(0, 0, 0, .9);
	}

	.iconMusic {
		display: inline-block;
		.size(60px, 60px);
		margin: 4%;
		line-height: 60px;
		font-size: 31px;
		text-align: center;
		border: 5px solid rgba(0, 0, 0, .9);
		border-radius: 50%;
		background: gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379));
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2a489), to(#f68379));
	}

	.icon-pause {
		width: 70px;
		height: 70px;
		background: url(http://7xkinp.com1.z0.glb.clouddn.com/music.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.rotate {
        -moz-animation: spin 8s infinite linear;
        -o-animation: spin 8s infinite linear;
        -webkit-animation: spin 8s infinite linear;
        animation: spin 8s infinite linear;
  	}
}

.footer {
	width: 100%;
	margin-top: 30px;
	font-size: 16px;
	text-align: center;
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(360deg); }
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}