* {

  margin: 0;

  padding: 0;

  border: none;

  outline: none;

}



body {

  font-family: Arial;

  font-size: 13px;

  line-height: 1.5em;

  color: #fff;

  background: #1e7e34; /* Old browsers */

}



.clearfix { clear: both; }



#container {

  width: 880px;  

  background: -webkit-linear-gradient(90deg, #1d86e2 10%, #1e7e34 90%); /* Chrome 10+, Saf5.1+ */
  background: -moz-linear-gradient(90deg, #1d86e2 10%, #1e7e34 90%); /* FF3.6+ */
  background: -ms-linear-gradient(90deg, #1d86e2 10%, #1e7e34 90%); /* IE10 */
  background: -o-linear-gradient(90deg, #1d86e2 10%, #1e7e34 90%); /* Opera 11.10+ */
  background: linear-gradient(90deg, #1d86e2 10%, #1e7e34 90%); /* W3C */
  overflow: auto;

  margin: 7px auto;

  border-radius: 13px;

  box-shadow: 0 10px 8px -8px #333;

}



#audio-image {

  position: relative;

  overflow: hidden;
  

}



#audio-image .cover { width: 100% !important; }



#audio-info { text-align: center; font-size:18px; color:#fff; height: 19px;}



#audio-info .artist { font-weight: bold; }



input#volume {

  width: 80%;

  margin-left: 18%;

  -webkit-appearance: none !important;

  background: #f9fd00;

  height: 2px;

  cursor: pointer;

}

input#volume::-webkit-slider-thumb {

 -webkit-appearance:none !important;

 background:url(../images/knob.png) no-repeat;

 height:13px;

 width:15px;

 cursor: pointer;

}



#buttons {

  width: 63%;

  display: block;

  overflow: auto;

  text-align:center;

  float:none;

    margin-top: -84px;
    margin-left: 165px;

}



button#play {

  width: 70px;

  height: 70px;

  background: url(../images/play.png) no-repeat;

  float: left;

  margin-top: -3px;

   margin-right: 18px;

  cursor: pointer;

}



button#pause {

  width: 70px;

  height: 70px;

  background: url(../images/pause.png) no-repeat;

  float: left;

margin-top: -2px;  

  margin-right: 18px;

  cursor: pointer;

}



button#stop {

  width: 70px;

  height: 70px;

  background: url(../images/stop.png) no-repeat;

  float: left;

margin-top: -4px;

  cursor: pointer;

}



button#prev {

  width: 70px;

  height: 70px;

  background: url(../images/prev.png) no-repeat;

  float: left;

  margin-top: 15px;

  margin-left: 66px;

  cursor: pointer;

}



button#back {

  width: 70px;

  height: 70px;

  background: url(../images/back.png) no-repeat;

  float: left;

  margin-top: 15px;

  cursor: pointer;

}



button#forward {

  width: 70px;

  height: 70px;

  background: url(../images/forward.png) no-repeat;

  float: left;

  margin-top: 14px;

  cursor: pointer;

}



button#next {

  width: 70px;

  height: 70px;

  background: url(../images/next.png) no-repeat;

  float: left;

  margin-top: 14px;

  cursor: pointer;

}

#tracker1 {

    position: relative;
    margin-top: -44px;
    width: 25%;
    background: url(../images/logo.png) no-repeat;
    height: 55px;
    float: left;

}


#tracker {

  position: relative;
 
  float: left;
}



#progress-bar {

  width: 80%;

  margin-left: 2%;

  margin-bottom: 20px;

  margin-top: 9px;

  height: 10px;

  background: url(../images/progress_bg.png) no-repeat;

  float: left;

}



#progress {

  background: url(../images/progress.png) no-repeat;

  height: 10px;

  display: inline-block;

}


#duration {

  position: absolute;

  top: 0;

  right: 10px;

  padding: 4px 8px;

  background: #000;

  border-radius: 5px;

  color:#fff;

}



#playlist { list-style: none; display:none; }



#playlist li {

  cursor: pointer;

  margin: 5px;

}



#playlist li.active {

  font-weight: bold;

  padding: 3px;

  background: #666;

}