* {  margin: 0;  padding: 0;}body {  font: 14px "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;  background: #B03A3A;  color: #fff;}a {  outline: none;  text-decoration: none;}.left {  float: left;}.right {  float: right;}.clear {  clear: both;}#background {  background-size: cover;  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  -moz-user-select: none;  -khtml-user-select: none;  -webkit-user-select: none;  -o-user-select: none;  user-select: none;}#player {  width: 500px;  height: 130px;  padding: 25px;  margin: 50px auto 30px;  position: relative;}#player .cover {  background: rgba(0, 0, 0, 0.5);  border: 1px solid #333;  position: absolute;  top: 25px;  left: 25px;  overflow: hidden;  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  -o-border-radius: 10px;  -ms-border-radius: 10px;  -khtml-border-radius: 10px;  border-radius: 10px;  width: 130px;  height: 130px;  -moz-box-shadow: 0 2px 10px black;  -webkit-box-shadow: 0 2px 10px black;  -o-box-shadow: 0 2px 10px black;  box-shadow: 0 2px 10px black;}#player .cover img {  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  -o-border-radius: 10px;  -ms-border-radius: 10px;  -khtml-border-radius: 10px;  border-radius: 10px;  width: 130px;  height: 130px;}#player .ctrl {  margin-left: 155px;  text-shadow: 0 1px 2px #000;  line-height: 16px;}#player .ctrl .tag strong, #player .ctrl .tag span {  display: block;  text-overflow: ellipsis;}#player .ctrl .tag span {  font-size: 12px;  margin-top: 5px;  color: #ccc;}#player .ctrl .icon {  background-repeat: no-repeat;  background-position: center;  display: inline-block;  opacity: 0.6;  cursor: pointer;  width: 24px;  height: 24px;  -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 {  margin-top: 10px;  height: 25px;}#player .ctrl .control .rewind {  background-image: url(../images/rewind.png);}#player .ctrl .control .playback {  background-image: url(../images/play.png);}#player .ctrl .control .playback.playing {  background-image: url(../images/pause.png);}#player .ctrl .control .fastforward {  background-image: url(../images/fastforward.png);}#player .ctrl .control .volume .mute {  background-image: url(../images/volume.png);}#player .ctrl .control .volume .mute.enable {  background-image: url(../images/mute.png);}#player .ctrl .control .volume .slider {  margin-top: 11px;  margin-left: 10px;  width: 100px;}#player .ctrl .progress {  margin-top: 10px;}#player .ctrl .progress .timer {  font-size: 12px;  color: #ccc;  margin-top: 8px;}#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle {  background-position: center bottom;}#player .ctrl .progress .repeat {  background-image: url(../images/repeat.png);}#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all {  opacity: 1;}#player .ctrl .progress .repeat.once {  position: relative;}#player .ctrl .progress .repeat.once:before {  content: "1";  position: absolute;  top: 3px;  right: -2px;  font-size: 8px;}#player .ctrl .progress .shuffle {  background-image: url(../images/shuffle.png);}.slider {  background: rgba(0, 0, 0, 0.3);  height: 5px;  position: relative;  cursor: pointer;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  -o-border-radius: 5px;  -ms-border-radius: 5px;  -khtml-border-radius: 5px;  border-radius: 5px;  -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;}.slider:hover a, .slider.enable a {  opacity: 1;}.slider a {  background: #fff;  margin-left: -2.5px;  position: absolute;  opacity: 0;  width: 5px;  height: 5px;  -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;}.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;}.slider .loaded {  background: rgba(255, 255, 255, 0.1);}.slider .pace {  background: #258fb8;}#playlist {  background: rgba(0, 0, 0, 0.5);  width: 470px;  margin: 0 auto 50px;  padding: 10px 15px;  list-style: none;  position: relative;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  -o-border-radius: 5px;  -ms-border-radius: 5px;  -khtml-border-radius: 5px;  border-radius: 5px;  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);  -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}#playlist li {  color: #aaa;  font-size: 12px;  line-height: 2;  padding-left: 25px;  cursor: pointer;  text-overflow: ellipsis;  -moz-transition: 0.3s;  -webkit-transition: 0.3s;  -o-transition: 0.3s;  transition: 0.3s;}#playlist li:hover {  color: #fff;}#playlist li.playing {  background: url(../images/playing.png) no-repeat 0 center;  color: #fff;  font-weight: bold;}footer {  position: relative;  font-size: 12px;  color: white;  margin-top:160px;  text-shadow: 0 1px 2px #000;  text-align: center;}footer a {  color: #fff;  font-weight: bold;}footer a:hover {  text-decoration: none;}