.soundplayer {
  height: 33px;
  min-width: 380px;
  margin-bottom: 33px;
}
.soundplayer .length,
.soundplayer .time,
.soundplayer a.pause, .soundplayer a.play,
.soundplayer .volumeLevel,
.soundplayer .volume,
.soundplayer .loadbytes,
.soundplayer .progress,
.soundplayer .volumeSlider,
.soundplayer .volumeScrubber {
  float: left;
}

.soundplayer .length,
.soundplayer .loadbytes,
.soundplayer .progress,
.soundplayer .volumeUnit,
.soundplayer .volumeLevel {
 height: 10px;
}

/* COLOR */
/* GREY */
.soundplayer {
  background-color: #999;
}
.soundplayer .length {
  background-color: #999;
  border: 1px solid #FFF;
}
.soundplayer .loadbytes {
  background-color: #ccc;
}
.soundplayer .progress {
  background-color: #FFF;
}
.soundplayer .scrubber {
  background-color: #EBEBEB;
}
.soundplayer .title {
  background: #FAFAFA url('../images/background.png') repeat-x 0 0;
  color: #666;
}
.soundplayer .time {
  color: #FFF;
}
.soundplayer .volumeLevel {
  background-color: #FFF;
}
.soundplayer .volumeSlider {
  background-color: #999;
}
a.play {
  background: #828282 url('../images/button_play.png') no-repeat 12px 11px;
}
a.pause {
  background: #828282 url('../images/button_pause.png') no-repeat 12px 11px;
}

/* WHITE */
.soundplayer.white {
  background-color: #FFF;
  border: 1px solid #666;
}
.soundplayer.white .length {
  background-color: #FFF;
  border: 1px solid #666;
}
.soundplayer.white .loadbytes {
  background-color: #ccc;
}
.soundplayer.white .progress {
  background-color: #666;
}
.soundplayer.white .scrubber {
  background-color: #666;
}
.soundplayer.white .title {
  background: #FFF url('../images/background.png') repeat-x 0 0;
  color: #666;
  border-top: 1px solid #666;
}
.soundplayer.white .time {
  color: #666;
}
.soundplayer.white .volumeLevel {
  background-color: #666;
}
.soundplayer.white .volumeSlider {
  background-color: #FFF;
}
a.play {
  background: #666 url('../images/button_play.png') no-repeat 12px 11px;
}
a.pause {
  background: #666 url('../images/button_pause.png') no-repeat 12px 11px;
}

/* BLUE */
.soundplayer.blue {
  background-color: #FFF;
  border: 1px solid #007FFF;
}
.soundplayer.blue .length {
  background-color: #FFF;
  border: 1px solid #007FFF;
}
.soundplayer.blue .loadbytes {
  background-color: #45A2FF;
}
.soundplayer.blue .progress {
  background-color: #007FFF;
}
.soundplayer.blue .scrubber {
  background-color: #007FFF;
}
.soundplayer.blue .title {
  background: #FFF url('../images/background.png') repeat-x 0 0;
  color: #45A2FF;
  border-top: 1px solid #007FFF;
}
.soundplayer.blue .time {
  color: #007FFF;
}
.soundplayer.blue .volumeLevel {
  background-color: #007FFF;
}
.soundplayer.blue .volumeSlider {
  background-color: #FFF;
}
.blue a.play {
  background: #007FFF url('../images/button_play.png') no-repeat 12px 11px;
}
.blue a.pause {
  background: #007FFF url('../images/button_pause.png') no-repeat 12px 11px;
}

/* PINK */
.soundplayer.pink {
  background-color: #FFF;
  border: 1px solid #EE0B5E;
}
.soundplayer.pink .length {
  background-color: #FFF;
  border: 1px solid #EE0B5E;
}
.soundplayer.pink .loadbytes {
  background-color: #ccc;
}
.soundplayer.pink .progress {
  background-color: #EE0B5E;
}
.soundplayer.pink .scrubber {
  background-color: #EE0B5E;
}
.soundplayer.pink .title {
  background: #FFF url('../images/background.png') repeat-x 0 0;
  color: #333;
  border-top: 1px solid #EE0B5E;
}
.soundplayer.pink .time {
  color: #EE0B5E;
}
.soundplayer.pink .volumeLevel {
  background-color: #EE0B5E;
}
.soundplayer.pink .volumeSlider {
  background-color: #FFF;
}
.pink a.play {
  background: #EE0B5E url('../images/button_play.png') no-repeat 12px 11px;
}
.pink a.pause {
  background: #EE0B5E url('../images/button_pause.png') no-repeat 12px 11px;
}

/* END COLOR */

.soundplayer .length {
  display: block;
  margin: 11px 5px 0 5px;
  width: 200px;
}
.soundplayer .progressBar {
  position: relative;
  width: 200px;
}
.soundplayer .loadbytes,
.soundplayer .progress {
  top:0;
  position:absolute;
}s
.soundplayer .loadbytes {
  width: 0px;
  z-index: 100;
}
.soundplayer .progress {
  width: 0px;
  z-index: 200;
}
.soundplayer .scrubber {
  display: block;
  height: 14px;
  position: absolute;
  visibility: hidden;
  width: 1px;
  top: -7px;
  z-index: 300;
}
.soundplayer .scrubber.visible {
  visibility: visible;
}
.soundplayer a.pause, .soundplayer a.play {
  text-indent:100px;
  overflow: hidden;
}
a.play {
  width: 33px;
  height: 33px;
}
a.pause {
  visibility: collapse;
  width: 0px;
}
.playing a.pause {
  visibility: visible;
  width: 33px;
  height: 33px;
}
.playing a.play {
  visibility: hidden;
  width: 0px;
}
.soundplayer .tracks {
  visibility: hidden;
}
.soundplayer .title {
  clear: both;
  height: 22px;
  overflow: hidden;
  line-height: 22px;
  text-indent: 5px;
}
.soundplayer .time {
  width: 30px;
  font-size: 10px;
}
.soundplayer #end.time {
  margin: 11px 10px 0 5px;
}
.soundplayer #current.time {
  margin: 11px 5px 0 10px;
  text-align: right;
}
.soundplayer .volume {
  width: 33px;
  height: 16px;
  overflow: hidden;
  padding: 11px 0 0 0;
  position: relative;
}
.soundplayer .volumeUnit {
  width: 3px;
  margin-left: 2px;
  position:relative;
  float: left;
  display: inline;
}
.soundplayer .volumeLevel {
  bottom:0;
  position:absolute;
  width: 3px;
}
.soundplayer .volumeSlider,
.soundplayer .volumeSlope {
  top:0;
  position:absolute;
  height: 22px;
  width: 33px;
}
.soundplayer .volumeSlope {
  background: url("../images/slider_volume_off.png") no-repeat left bottom;
  z-index: 300;
}
.soundplayer .volumeSlider {
  opacity: 0.4;
  z-index: 400;
}