.jouele {
  width: 100%;
  position: relative;
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 13px;
}

.jouele,
.jouele * {
  line-height: 16px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.jouele-progress-area {
  position: relative;
  width: 100%;
  height: 16px;
}

.jouele-progress-area * {
  position: absolute;
}

.jouele-mine {
  width: 100%;
}

.jouele-mine-bar,
.jouele-load-bar,
.jouele-play-bar {
  box-sizing: border-box;
}

.jouele-mine-bar {
  height: 8px;
  border: 1px #d0cfc3 solid;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.67), inset 0 1px 0 rgba(255, 255, 255, 0.67);
  width: 100%;
  top: 4px;
  z-index: 10;
}

.jouele-load-bar {
  height: 8px;
  border: 0;
  border-radius: 4px;
  width: 100%;
  top: 4px;
  z-index: 20;
  cursor: pointer;
  cursor: hand;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9a89a), color-stop(50%, #dbdacf), color-stop(100%, #f2f0e5));
  background: -webkit-linear-gradient(#a9a89a 0%, #dbdacf 50%, #f2f0e5 100%);
  background: -moz-linear-gradient(#a9a89a 0%, #dbdacf 50%, #f2f0e5 100%);
  background: -o-linear-gradient(#a9a89a 0%, #dbdacf 50%, #f2f0e5 100%);
  background: linear-gradient(#a9a89a 0%, #dbdacf 50%, #f2f0e5 100%);
}

.jouele-play-bar {
  height: 8px;
  top: 4px;
  border-radius: 4px;
  z-index: 30;
  cursor: pointer;
  cursor: hand;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #023fb2), color-stop(50%, #108edf), color-stop(100%, #18b5ed));
  background: -webkit-linear-gradient(#023fb2 0%, #108edf 50%, #18b5ed 100%);
  background: -moz-linear-gradient(#023fb2 0%, #108edf 50%, #18b5ed 100%);
  background: -o-linear-gradient(#023fb2 0%, #108edf 50%, #18b5ed 100%);
  background: linear-gradient(#023fb2 0%, #108edf 50%, #18b5ed 100%);
}

.jouele-play-lift {
  left: 4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin: 3px -5px 3px -5px;
  box-shadow: 0 1px 3px rgba(61, 58, 12, 0.67);
  z-index: 40;
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #e3e3e3), color-stop(100%, #fefefd));
  background: -webkit-linear-gradient(bottom, #e3e3e3 0%, #fefefd 100%);
  background: -moz-linear-gradient(bottom, #e3e3e3 0%, #fefefd 100%);
  background: -o-linear-gradient(bottom, #e3e3e3 0%, #fefefd 100%);
  background: linear-gradient(bottom, #e3e3e3 0%, #fefefd 100%);
  cursor: pointer;
  cursor: hand;
}

.jouele-buffering {
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  background: url("../img/jouele-buffering.gif") no-repeat;
}

.jouele-info-area {
  z-index: 100;
  position: relative;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.67);
}

.jouele-play-control {
  position: absolute;
  left: 0;
  top: -1px;
  width: 16px;
  height: 16px;
  margin-left: -3px;
  margin-right: 8px;
  cursor: pointer;
  cursor: hand;
}

.jouele-unavailable,
.jouele-play,
.jouele-pause {
  width: 16px;
  height: 16px;
}

.jouele-unavailable,
.jouele-play,
.jouele-pause,
.jouele-download {
  background: 16px center;
  background: url("../img/jouele-sprite.png") no-repeat;
  background: rgba(0, 0, 0, 0) url("../img/jouele-sprite.svg") no-repeat;
  background-repeat: no-repeat;
}

.jouele-download {
  position: absolute;
  right: 0;
  top: -1px;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  margin-right: -3px;
  border: none;
  text-decoration: none;
}

.jouele-time {
  float: right;
  min-width: 120px;
  min-height: 1em;
  font-size: 11px;
  line-height: 18px;
  top: 2px;
  color: #606060;
  margin-left: 1em;
  text-align: right;
  white-space: nowrap;
}

.jouele-play-time {
  display: inline;
  margin-right: .5em;
}

.jouele-total-time {
  display: inline;
  margin-right: 16px;
}

.jouele-name {
  margin: 0 16px;
  min-height: 16px;
  text-align: left;
}

.jouele-option-progress-when-playing .jouele-progress-area {
  margin-top: -16px;
  top: 0;
  opacity: 0;
  -webkit-transition-property: opacity, margin-top;
  -moz-transition-property: opacity, margin-top;
  -o-transition-property: opacity, margin-top;
  transition-property: opacity, margin-top;
  -webkit-transition-duration: 0.33s, 0.33s;
  -moz-transition-duration: 0.33s, 0.33s;
  -o-transition-duration: 0.33s, 0.33s;
  transition-duration: 0.33s, 0.33s;
  -webkit-transition-timing-function: ease-out, ease-out;
  -moz-transition-timing-function: ease-out, ease-out;
  -o-transition-timing-function: ease-out, ease-out;
  transition-timing-function: ease-out, ease-out;
}

.jouele-status-playing .jouele-progress-area {
  margin-top: 0;
  opacity: 1;
}

.jouele-skin-silver .jouele-mine-bar {
  border-color: #929288;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.33), inset 0 1px 0 rgba(255, 255, 255, 0.33);
}
.jouele-skin-silver .jouele-play-lift {
  box-shadow: 0 1px 3px #3d3a0c;
}
.jouele-skin-silver .jouele-info-area {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.33);
}
.jouele-skin-silver .jouele-time {
  color: #000;
}

.jouele-skin-dark * {
  color: #ccc;
}
.jouele-skin-dark .jouele-mine-bar {
  border: #505050 1px solid;
  background: #666;
  box-shadow: none;
}
.jouele-skin-dark .jouele-load-bar {
  border: #424240 1px solid;
  box-shadow: none;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #272725), color-stop(50%, #474745), color-stop(100%, #4f4f4f));
  background: -webkit-linear-gradient(#272725 0%, #474745 50%, #4f4f4f 100%);
  background: -moz-linear-gradient(#272725 0%, #474745 50%, #4f4f4f 100%);
  background: -o-linear-gradient(#272725 0%, #474745 50%, #4f4f4f 100%);
  background: linear-gradient(#272725 0%, #474745 50%, #4f4f4f 100%);
}
.jouele-skin-dark .jouele-play-bar {
  border: #0864c7 1px solid;
  box-shadow: none;
}
.jouele-skin-dark .jouele-unavailable,
.jouele-skin-dark .jouele-play,
.jouele-skin-dark .jouele-pause,
.jouele-skin-dark .jouele-download {
  background: url("../img/jouele-sprite-skin-dark.png") no-repeat;
  background: rgba(0, 0, 0, 0) url("../img/jouele-sprite-skin-dark.svg") no-repeat;
}
.jouele-skin-dark .jouele-play-lift {
  box-shadow: 0 1px 3px #3d3a0c;
}
.jouele-skin-dark .jouele-info-area {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.jouele-skin-dark .jouele-status-playing .jouele-name {
  color: #fff;
}

* .jouele-unavailable, .jouele-skin-dark .jouele-unavailable {
  background-position: 0px;
}
* .jouele-play, .jouele-skin-dark .jouele-play {
  background-position: -16px;
}
* .jouele-pause, .jouele-skin-dark .jouele-pause {
  background-position: -32px;
}
* .jouele-download, .jouele-skin-dark .jouele-download {
  background-position: -48px;
}