.pt-play-all,
.pt-previous,
.pt-next {
  font-size:4rem;
  line-height:4rem;
  outline:0;
}
.pt-play-pause {
  font-size:2.5rem;
  outline:0;
  vertical-align:middle;
}
.pt-previous {
  float:right;
}
.pt-permalink {
  float:right;
  display:block;
}
.pt-permalink:hover {
  border-bottom:dotted 1px #DDD;
}
.pt-next {
  float:right;
  margin-left:40px;
}
/* Hide/Show */
.pause-btn,
.pt-play-pause.pt-playing .play-btn,
.pt-play-all.pt-playing .play-btn {
  display:none;
  outline:0;
}
.pt-play-pause.pt-playing .pause-btn,
.pt-play-all.pt-playing .pause-btn {
  display:inline-block;
  outline:0;
}
.pause-btn {
  position:relative;
  letter-spacing:-.005em;
}
.pt-scrubber {
  background-color:#222;
  margin-bottom:-10px;
}

.pt-scrubber .pt-statusbar {
  opacity:.5;
  height:2px;
  position: relative;
  transition:height .25s;
  margin:10px auto;
}
.pt-scrubber.dragging .pt-statusbar {
  cursor: grabbing;
  cursor:-webkit-grabbing;
}
.pt-scrubber .pt-statusbar .pt-position,
.pt-scrubber .pt-statusbar .pt-loading {
  position: absolute;    
  height: 100%;
  left: 0;
  top: 0;
  width:0;
}
.pt-scrubber .pt-statusbar .pt-position {
  /*background-color: #666666;*/
  background-color:#FF0000;
  position:relative;
}
.pt-scrubber .pt-statusbar .pt-loading {
  background-color:#444444;
}
footer .pt-scrubber .pt-statusbar .pt-handle {
  opacity:0;
  transition:opacity .5s;
}
footer:hover .pt-scrubber .pt-statusbar {
  height:5px;
}
footer:hover .pt-scrubber .pt-statusbar .pt-handle {
  position:absolute;
  width:1.4rem;
  height:1.4rem;
  right:-1rem; /* Half of width */
  top:-.5rem; /* Slightly less than half of height*/
  background:#FF0000;
  cursor: pointer;
  opacity:1;
  border-radius:50%;
}
.pt-time {
  font-size:2rem;
  color:#ddd;
  font-family:Inconsolata, monospace;
  float:right;
}
.pt-current-track-title {

}
.pt-list {
  margin:0;
  padding:0;
  list-style-type:none;
  font-size:1.1em;
}
.pt-list a {
  font-size:1.5rem;
  display:block;
  padding:.5rem .5rem 0 .5rem;
  /*border-left:solid 2px transparent;*/
  outline:none;
}
.pt-list li.last a {
  border-bottom:none;
}
.pt-list a:hover,
.pt-list a.pt-playing, 
.pt-list a.pt-paused {
  color:#FFF;
}
.pt-list .highlight a,
.pt-list .highlight a:hover,
.pt-list .highlight a.pt-playing, 
.pt-list .highlight a.pt-paused {
  /*color:#f1c40f;*/
}
.pt-link.pt-loading { opacity:.2;}
.pt-link.pt-playing { opacity: 1; font-weight:bold;}
.pt-link.pt-paused  { opacity:.5; font-weight:bold;}
.pt-link.pt-error { font-style:italic; opacity:.5;}

/** Not sure if loading in Font Awesome icons this way will break in certain
  *  browsers, but going for it.
  *  See: http://fortawesome.github.io/Font-Awesome/cheatsheet
  */
.pt-list a:before {
  font-family:Fontawesome;
  content: '\f04b';/* fa-play */
  padding-right:.75em;
  font-style:normal;
}
.pt-list a.pt-playing:before {
  font-family:Fontawesome;
  content: '\f04c'; /* pause */
  padding-right:.75em;
}

.pt-play-pause.pt-buffering {
  -webkit-animation: buffering 1.4s infinite;
  animation:  buffering 1.4s infinite;
}

.pt-link.pt-error:before {
  font-family:Fontawesome;
  content: '\f071'; /* fa-exclamation-triangle */
}

/* Utility class to hide elements if no links found on page load */
.pt-hide {
  display:none;
}
.pt-picture {
  display:none;
  height:25px;
  width:25px;
  line-height:25px;
  text-align:center;
  margin-right:10px;
  border:solid #222 1px;
  vertical-align:middle;
  color: #222;
  background-color:#CCC;
  border-radius:100%;
}
.pt-controls {
  opacity:0;
  transition:all .2s;
  display:inline-block;
  z-index:4;
}
body.pt-playing .pt-controls,
body.pt-paused .pt-controls {
  opacity:1;
}
.pt-scrubber {
  opacity:0;
  transition:all .2s;
  z-index:5;
}
body.pt-playing .pt-scrubber,
body.pt-paused .pt-scrubber {
  opacity:1;
}


/* Buffering animation */
@-webkit-keyframes buffering {
     0%  { opacity: 1.0}
    10%  { opacity: .90}
    20%  { opacity: .80}
    30%  { opacity: .70}
    40%  { opacity: .60} 
    50%  { opacity: .50}
    60%  { opacity: .60}
    70%  { opacity: .70}
    80%  { opacity: .80}
    90%  { opacity: .90}
    100% { opacity: 1.0}
}

@keyframes buffering {
     0%  { opacity: 1.0}
    10%  { opacity: .90}
    20%  { opacity: .80}
    30%  { opacity: .70}
    40%  { opacity: .60} 
    50%  { opacity: .50}
    60%  { opacity: .60}
    70%  { opacity: .70}
    80%  { opacity: .80}
    90%  { opacity: .90}
    100% { opacity: 1.0}
}