/* line 17, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */


/* line 22, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */


/* line 24, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none; }

/* line 26, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* line 28, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

/* line 30, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none; }
  /* line 103, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

/* line 32, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none; }

/* line 116, /Users/Rose/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

/* line 8, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */


/* line 11, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */

.audio-player-wrapper
  width: 225px
  margin: 100px auto 0 auto
  background-color: #ddddda
  border-bottom-right-radius: 4px
  border-bottom-left-radius: 4px
  &.error
    .audio-player-image
      background: #f78471
      &:before
        position: absolute
        top: 0
        bottom: 0
        height: 10px
        width: 100%
        text-align: center
        margin: auto
        color: white
        content: "Error loading"
        font-family: "Open Sans", sans-serif
        font-weight: 600
        font-size: 13px
      > *
        display: none

.audio-player-image
  position: relative
  height: 149px
  -webkit-backface-visibility: hidden
  > img
    position: absolute
    top: 0
    left: 0
    max-width: 100%
    height: auto
    &.fading
      +transition(opacity 200ms linear)
      z-index: 1
      opacity: 0

.audio-player-song-name
  position: absolute
  z-index: 2
  bottom: 5px
  right: 5px
  font-family: "Open Sans", sans-serif
  font-weight: 600
  font-size: 11px
  color: white
  text-shadow: 0 1px 1px rgba(#000, .9)
  text-transform: uppercase

.audio-player-controls
  padding: 15px

+keyframes(loadingStripes)
  0%
    background-position: -20px
  100%
    background-position: 0px

.audio-player-progress
  display: block
  width: 100%
  height: 5px
  border-radius: 25px
  background-color: $main_blue
  overflow: hidden
  &.loading
    +background-image(linear-gradient(-45deg, $dark_blue 25%, transparent 25%, transparent 50%, $dark_blue 50%, $dark_blue 75%, transparent 75%, transparent))
    background-size: 20px 20px
    +animation(loadingStripes 700ms linear infinite)

.audio-player-progress-bar
  +transition(width 200ms linear)
  display: block
  height: 100%
  width: 0
  max-width: 100%
  background-color: $dark_blue
  border-radius: 25px

.audio-player-button {
  display: block ;
  position: relative ;
  float: left;
  width: 35px;
  height: 35px;
  margin: 0 5px;
  border-radius: 100%;
  border: 3px solid $dark_blue;
  opacity: .8;
  color:#FFF;
  cursor: pointer;
  &:hover
    opacity: 1;
  &::before;
    position: absolute;
    top: -1px;
    bottom: 0;
    left: -12px;
    right: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    line-height: 1px;
    font-size: 20px;
    color: $dark_blue;
  &.icon-pause::before;
    font-size: 18px;
    top: 1px;
    left: -15px;
  &.icon-backward::before;
    left: -17px;
  &.small
    width: 25px;
    height: 25px;
    margin-top: 5px;
    &::before
      font-size: 15px;
}

{
.audio-player-button-wrappers
  +clearfix
  display: block;
  width: 133px;
  margin: 15px auto 0 auto;
}