#currently_playing
{
  background: url('/@{webroot}/images/alpha/000_80.png');
  bottom: 0;
  left: 0;
  min-width: 900px;
  padding: 20px;
  position: fixed;
  right: 0;
  z-index: 9999;

  .box-shadow(#222, 0, 0, 10px);

  &.minimize {
    height: 10px;
    padding: 10px;
    .thumb {
      img {
        display: none;
      }
      p {
        margin-left: 20px;
        margin-top: -20px;
        width: 500px;
      }
    }
    .volume {
      display: none;
    }
    .controls {
      div{
        margin-top: -15px;
        height: 20px;
        width: 20px;
        background-size: 20px;
      }
    }
    span.playlist {
      display: none;
    }
    .progress {
      margin-top: -10px;
    }
    .visibility {
      top: -29px;
      ul li.minimize {
        background: url('/@{webroot}/images/arrow_up.png') no-repeat center;
        &:hover {
          background-color: #333;
          cursor: pointer;
        }
      }
    }
  }

  .thumb {
    .albumart  {
      position: fixed;
      bottom: 10px;
      left: 10px;
      height: auto;
      max-width: 130px;
      .box-shadow(#000, 0, 0, 15px);
    }

    .episodeart  {
      float: left;
      position: fixed;
      bottom: 10px;
      left: 10px;
      max-width: 200px;
      height: auto;
      .box-shadow(#000, 0, 0, 15px);
    }

    .posterart  {
      position: fixed;
      bottom: 10px;
      left: 10px;
      max-width: 100px;
      height: auto;
      .box-shadow(#000, 0, 0, 15px);
    }

    .item_info {
      float: left;
      line-height: 1.5em;
      width: 400px;

      .show:hover,
      .season:hover,
      .episode:hover,
      .movie:hover {
        border-bottom: 1px solid #555;
        cursor: pointer;
      }

      .separator {
        margin: 0 3px;
      }
    }
  
    .item_info_artist  {
      float: left;
      position: relative;
      margin-left: 132px;
      line-height: 1.5em;
      width: 400px;

      .artist:hover,
      .album:hover  {
        border-bottom: 1px solid #555;
        cursor: pointer;
      }

      .separator {
        margin: 0 3px;
      }
    }

    .item_info_show  {
      float: left;
      position: relative;
      margin-left: 202px;
      line-height: 1.5em;
      width: 400px;

      .show:hover,
      .season:hover,
      .episode:hover {
        border-bottom: 1px solid #555;
        cursor: pointer;
      }

      .separator {
        margin: 0 3px;
      }
    }

    .item_info_movie  {
      float: left;
      position: relative;
      margin-left: 102px;
      line-height: 1.5em;
      width: 400px;

      .movie:hover {
        border-bottom: 1px solid #555;
        cursor: pointer;
      }
    }
  }
  .controls {
    margin-left: 45%;
    margin-top: 10px;
    width: 260px;

    div {
      margin: 2px;
      border: 2px solid #333;
      cursor: pointer;
      float: left;
      height: 30px;
      text-indent: -9999px;
      width: 30px;

      .border-radius(20px);

      &:hover {
        background-color: #333;
      }

      &.option {
        height: 50px;
        width: 20px;
        margin-top: -15px;
        border: none;

        &:hover {
          background-color: transparent;
        }

        div {
          height: 15px;
          width: 15px;
        }
      }
    }

    .stop {
      background: #111 url('/@{webroot}/images/player_buttons/stop.png') no-repeat center;
    }
    .play_pause {
      background: #111 url('/@{webroot}/images/player_buttons/play_pause.png') no-repeat center;
    }
    .next {
      background: #111 url('/@{webroot}/images/player_buttons/next.png') no-repeat center;
    }
    .previous {
      background: #111 url('/@{webroot}/images/player_buttons/previous.png') no-repeat center;
    }
    .fast_forward {
      background: #111 url('/@{webroot}/images/player_buttons/fast_forward.png') no-repeat center;
    }
    .rewind {
      background: #111 url('/@{webroot}/images/player_buttons/rewind.png') no-repeat center;
    }
    .shuffle {
      background: #111 url('/@{webroot}/images/player_buttons/shuffle.png') no-repeat center;
    }
    .repeat {
      background: #111 url('/@{webroot}/images/player_buttons/repeat.png') no-repeat center;
    }
    .active {
      background-color: #444;
    }
    #repeat_one {
      background: #444 url('/@{webroot}/images/player_buttons/repeat_one.png') no-repeat center;
    }
    #repeat_all {
      background: #444 url('/@{webroot}/images/player_buttons/repeat_all.png') no-repeat center;
    }
  }

  .progress {
    float: right;
    font-size: 0.9em;
    height: 40px;
    position: relative;
    width: 400px;
    cursor: pointer;
    
    .current {
      bottom: 8px;
      left: 0;
      position: absolute;
    }
    
    .total {
      bottom: 8px;
      right: 0;
      position: absolute;
    }
    
    .bar {
      border: 1px solid #777;
      height: 5px;
      margin-top: 8px;
      width: 398px;
      .border-radius(3px);
      
      .inner {
        background-color: #eee;
        height: 5px;
      }
    }
    
    #tooltip {
      font-size: 80%;
      width:40px;
      margin-left: -20px;
      padding:2px;
      text-align: center;
      margin-top: -25px;
    }

    #tooltip:after {
      display: block;
      content: "";  
      border-color: white transparent transparent transparent;
      border-style: solid;
      border-width: 5px;
      height:0;
      width:0;
      margin: 0 auto;
    }
  }
  .volume {
    margin-left:10px;
    float: left;
    margin-top: -10px;
    line-height: 50px;
    width: 5px;
    height: 50px;
    position: relative;
    cursor: pointer;
    border: 1px solid #777;
    .border-radius(3px);
    
    .volume-icon{
      background: url('/@{webroot}/images/player_buttons/volume.png') no-repeat center;
      position: absolute;
      left: -2px;
      bottom: -20px;
      height: 15px;
      width: 15px;
    }

    .bar {
      position: absolute;
      left: 0; 
      background-color: white;
      width: 100%; 
      bottom: 0;
      
      .inner {
        background-color: white;
        margin: 0 auto; 
        text-align: center;
      }
    }
    #tooltip {
      font-size: 80%;
      height: 50px;
      margin-left: 10px;
      padding:2px;
      text-align: center;
    }
  }

  .playlist:hover {
    border-bottom: 1px solid #555;
    cursor: pointer;
  }

  .synopsis {
    display: none;
  }

  .visibility {
    opacity: 0;
    position: relative;
    top: -39px;
    float: right;
    z-index: 9999999;
    background: url('/@{webroot}/images/alpha/000_80.png');
    border-radius: 5px 5px 0px 0px;
    padding: 2px;
    .transition (opacity, 0.6s);
    ul li {
      &.close {
        background: url('/@{webroot}/images/remove_icon.png') no-repeat center;
        height: 15px;
        width: 15px;
        float: right;
      }
      &.minimize {
        background: url('/@{webroot}/images/arrow_down.png') no-repeat center;
        height: 15px;
        width: 15px;
        float: right;
      }
      &:hover {
        background-color: #333;
        cursor: pointer;
      }
    }
  }

  &:hover {
    .visibility {
      opacity: 1;
    }
  }
}
