html, body {height:100%;}
body {padding:0; margin:0; color:#283136; min-height:100%; display:flex; flex-direction:column; font-family:Arial, sans-serif; background:#fff;}
input, textarea, button {}
.clearfix1:before {content: ""; display:table; clear:both;}
.clearfix2:after {content: ""; display:table; clear:both;}
.text-unmargin p:first-child {margin-top:0;}
.text-unmargin p:last-child {margin-bottom:0;}
ul,ol {margin:0; padding:0; list-style:none;}
ul li, ol li {margin:0; padding:0;}


.main {width:100%; padding:20px; box-sizing:border-box; max-width:1000px; margin:0 auto;}

.lyrics {padding-top:20px;}
.lyrics .logo {display:block; width:100%; max-width:300px; margin:0 auto;}
.lyrics .main .texts {font-size:14px; line-height:20px; max-width:400px; width:100%; margin:0 auto;}
.lyrics .main .texts h2 {font-size:18px; margin:0 0 -5px 0;}
.lyrics .main .texts hr {border:none; margin:20px 0 20px 0; border-top:1px #ccc solid;}
.lyrics .main .texts ul.nav a {color:#f30100;}
.lyrics .main .texts ul.nav li {margin:0 0 5px 0;}

.cover {width:100%; font-size:0; max-width:460px; margin:0 10px 50px 0; float:left;}
.cover img {width:100%; display:block; margin:0 0 20px 0;}

.player {width:100%; max-width:460px; margin:0 0 50px 10px; float:right;}
.player a {color:#f30100;}

.text {text-align:center; font-size:14px; line-height:22px; margin:0 0 20px 0;}
.text .rider {position: absolute; top: 38px; right: 20px; font-size: 16px; margin: 0;}
.text .rider a {color: #283136;}
@media (max-width: 600px) {
	.text .rider {position: static; margin: 15px 0;}
}


.disc {width:80%; display:block; margin:0 auto 20px auto; border-radius:500px; box-shadow:0 0 10px 5px rgba(0,0,0,0.2);}

.audiojs {margin:0 0 20px 0;}

ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width:100%; border-top: 1px solid #ccc; font-size: 1em; }
ol li { position: relative; margin: 0px; padding: 45px 2px 45px 2px; border-bottom: 1px solid #ccc; cursor: pointer;}
ol li a { display: block; text-indent: -2.6ex; padding: 0px 0px 0px 20px; }
li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
li.playing a {color: #000; }
li.playing:before {content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 45px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);}

.rotating {-webkit-animation: spin 4s infinite linear;}
@-webkit-keyframes spin {
	0%  {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}	
}

h1 {font-size:25px; text-align:center; color:#87270e;}

footer {padding:20px 0 0 0; text-align:center; font-size:14px; clear:both;}

@media (max-width: 1000px) {
	.player {margin:0 auto 50px auto; float:none;}
	.cover {margin:0 auto 50px auto; float:none;}
	footer {padding:20px 0 50px 0;}
}

@media (max-width: 640px) {
	.audiojs {width:250px;} 
	.audiojs .scrubber {width:85px;}
}