*{border:0;color:inherit;font:inherit;text-shadow:inherit;margin:0;padding:0}
html{height:100%;background:#fff;background:url(bk.gif)}
body{height:100%;font:12px "Trebuchet MS"}
#content{min-height:100%;height:auto!important;margin:0 auto -30px}
a{text-decoration:none}
header{background:#000;background:url(sq.gif);display:block;text-align:center;height:70px;padding:.8em 0 1em}
footer{width:100%;text-align:center;height:30px;color:#E2E2E2;background:url(sq.gif)}
footer p{padding-top:5px}
.push{height:30px}
footer a,#about{font-weight:bold;color:#3C71C1}
header > h1{line-height:.9}
header > h2{color:#E2E2E2}
.s1{font-size:5em;font-weight:bold;color:#3C71C1}
.s2{font-size:5em;font-weight:bold;color:#E2E2E2}
header > a{font-size:120%;line-height:2.1em;margin-right:.5em;margin-left:.5em;-webkit-box-shadow:0 1em 1em -.5em rgba(255,255,255,.4) inset, 0 .1em .3em -.1em black;box-shadow:0 1em 1em -.5em rgba(255,255,255,.4) inset, 0 .1em .3em -.1em black;background:#ffdb9c;background:rgba(255,217,160,.9);padding:.4em;border-radius:.2em;-moz-border-radius:.2em}
header > a:hover{background:#ff6d34;background:rgba(255,107,48,.9)}
header > a.active{background:#ff6d34;background:rgba(255,107,48,.9);font-size:120%}
.heart-wrap{width:320px;color:black;overflow:hidden;text-align:center;margin:3em auto auto;padding:.5em .3em}
.songs-wrap{width:90%;max-width:1000px;position:relative;text-align:center;display:none;margin:0 auto 1em}
.about-wrap{width:90%;position:relative;text-align:center;font-size:1.1em;display:none;margin:1em auto}
#result-text{font-weight:bold;font-size:1.3em;margin:1em 0}
#result-text sup{font-size:.7em}
#heart-text{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-75px;width:150px;z-index:9999;font-size:1.8em;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,.8);-moz-user-select:none;-webkit-user-select:none;user-select:none}
.heart-down{position:relative;width:320px;height:280px;cursor:pointer}
.heart-down:before,.heart-down:after{position:absolute;content:"";left:160px;top:10px;width:160px;height:260px;background:red;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;-o-transform-origin:0 100%;transform-origin:0 100%;-webkit-box-shadow:.1em -.1em .1em red;box-shadow:.1em -.1em .1em red;border-radius:80px 80px 0 0;-moz-border-radius:80px 80px 0 0}
.heart-down:after{left:0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-box-shadow:.1em -.1em .1em red;box-shadow:.1em -.1em .1em red}
.heart-up{position:relative;width:320px;height:280px;cursor:pointer}
.heart-up:before,.heart-up:after{position:absolute;content:"";left:160px;top:10px;width:161px;height:260px;background:red;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;-o-transform-origin:0 100%;transform-origin:0 100%;-webkit-box-shadow:.1em -.1em .1em red;box-shadow:.1em -.1em .1em red;border-radius:78px 78px 0 0;-moz-border-radius:78px 78px 0 0}
.heart-up:after{left:0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-box-shadow:.1em -.1em .1em red;box-shadow:.1em -.1em .1em red}
.cursor-default{cursor:default}
.cursor-pointer{cursor:pointer}
button,input[type="genre"]{background:#444;background:rgba(226,226,226,.7);font-weight:bold;font-size:125%;color:#000;-webkit-box-shadow:0 1em 1em -.5em rgba(255,255,255,.4) inset, 0 .1em .3em -.1em black;box-shadow:0 1em 1em -.5em rgba(255,255,255,.4) inset, 0 .1em .3em -.1em black;padding:.2em .3em}
input[type="genre"]{width:13em;margin-bottom:1em;margin-top:1em;padding:.2em .3em}
button:hover{background:#3C71C1}
#controls{display:none}
.songs{display:block;clear:both}
.songs li{list-style-type:none;position:relative;width:31.333%;float:left;margin:0 1% 2em}
.songs li:nth-child(3n+1){clear:left}
.li-hover{background:#EDF5FF}
.song-img{float:left;margin-right:5px;width:80px;height:80px;padding:1px}
.song-waveform{width:80px;height:80px}
.song-artist{margin-top:10px;font-size:1em;text-align:left}
.song-title{margin-top:1px;font-size:1.1em;font-weight:bold;text-align:left}
.song-misc{margin-top:1px;font-size:.8em;text-align:left}
.song-data{min-height:70px}
.song-links{display:none;text-align:left}
p.song-btns{line-height:80px}
.song-btns a:hover{opacity:0.9}
.song-btns img{height:30px;width:30px;vertical-align:middle;-webkit-box-shadow:0 1em 1em -.5em rgba(255,255,255,.4) inset, 0 .1em .3em -.1em black;box-shadow:0 1em 1em -.5em rgba(255,255,255,.4) inset, 0 .1em .3em -.1em black}
#more_button{display:none}
#loader{width:20px;display:none;margin:2em auto}
@media screen and (max-width: 320px) {
.songs-wrap{width:98%}
.songs li{width:96%;float:none;clear:none;margin:0 1% 2em}
.song-img{width:55px;height:55px}
.song-waveform{width:55px;height:55px}
.heart-wrap{margin-top:.1em}
footer p{font-size:.7em}
.song-artist{margin-top:0;font-size:.8em}
.song-data{min-height:57px}
.song-links{min-height:57px}
p.song-btns{line-height:55px}
.song-btns img{height:35px;width:35px}
.about-wrap{font-size:.9em}
}
@media screen and (min-width: 321px) and (max-width: 400px) {
.songs-wrap{width:94%}
.songs li{width:90%;float:none;clear:none;margin:0 1% 2em}
.song-img{width:55px;height:55px}
.song-waveform{width:55px;height:55px}
.heart-wrap{margin-top:.2em}
footer p{font-size:.8em}
.song-artist{margin-top:0;font-size:.8em}
.song-data{min-height:57px}
.song-links{min-height:57px}
p.song-btns{line-height:55px}
.song-btns img{height:35px;width:35px}
.about-wrap{font-size:.9em}
}
@media screen and (min-width: 401px) and (max-width: 480px) {
.songs li{width:48%;float:left;clear:none;margin:0 1% 2em}
.songs li:nth-child(3n+1){clear:none}
.songs li:nth-child(2n+1){clear:left}
.song-img{width:67px;height:67px}
.song-waveform{width:67px;height:67px}
.heart-wrap{margin-top:2em}
.song-artist{margin-top:0;font-size:1em}
.song-data{min-height:59px}
p.song-btns{line-height:67px}
.song-btns img{height:35px;width:35px}
.about-wrap{font-size:1em}
}
@media screen and (min-width: 481px) and (max-width: 769px) {
.songs li{width:48%;float:left;clear:none;margin:0 1% 2em}
.songs li:nth-child(3n+1){clear:none}
.songs li:nth-child(2n+1){clear:left}
.song-img{width:67px;height:67px}
.song-waveform{width:67px;height:67px}
.heart-wrap{margin-top:2em}
.song-artist{margin-top:0;font-size:1em}
.song-data{min-height:59px}
p.song-btns{line-height:67px}
.song-btns img{height:35px;width:35px}
.about-wrap{font-size:1em}
}