@charset "UTF-8";
.jspScrollable {
  position: relative;
  outline: none; }
  .jspScrollable.bottom:after {
    background: none; }
  .jspScrollable .jspVerticalBar {
    background: #fafafa;
    margin-bottom: 5px;
    z-index: 2;
    width: auto; }
  .jspScrollable .jspDrag {
    width: 6px; }
  .jspScrollable .jspTrack {
    background: #fafafa; }
  .jspScrollable .jspDrag {
    background: #ccc;
    border-radius: 5px; }

/************************/
/*Site General Settings*/
/**********************/
html, body {
  font-family: "helvetica55", helvetica, arial, sans-serif;
  color: #4c4c4c;
  height: 100%;
  overflow: hidden; }

.scroller {
  overflow: hidden; }

#container {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 25px 18px 10px;
  min-width: 280px;
  height: auto !important;
  position: relative; }
  @media only screen and (max-width: 320px) {
    #container {
      padding: 3%;
      min-width: 90%; } }

#main {
  position: relative;
  margin: 0px auto;
  padding: 0;
  overflow: hidden;
  height: inherit;
  width: 100%; }

/* ************** */
/* header section */
/* ************** */
#header {
  position: relative;
  padding: 7px 11px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  #header .album_image {
    margin-right: 12px;
    /* temp */
    background: #ccc;
    height: 70px;
    width: 81px;
    float: left; }
  #header h1 {
    line-height: 1.15;
    margin: 5px 0;
    min-height: 35px;
    width: 100%;
    /* responsive */
    font-size: 18px; }
    @media only screen and (min-width: 480px) {
      #header h1 {
        font-size: 18px; } }
    @media only screen and (min-width: 790px) {
      #header h1 {
        font-size: 24px; } }
    @media only screen and (min-width: 980px) {
      #header h1 {
        font-size: 30px;
        line-height: 1; } }
  #header #playlist_buttons {
    display: block;
    padding: 7px;
    clear: left; }
  #header .buy_playlist {
    padding: 0 2px;
    position: absolute;
    bottom: 7px;
    right: 5px;
    /* responsive */ }
    @media only screen and (min-width: 480px) {
      #header .buy_playlist {
        float: right;
        margin: 9.1px 0 0 10px; } }
  #header .play_all,
  #header .pause_all {
    position: absolute;
    font-size: 16px;
    padding-left: 17px;
    bottom: 7px;
    left: 7px; }
  #header .play_all:before {
    content: "";
    height: 0;
    width: 0;
    left: 0;
    top: 2px;
    position: absolute;
    border: 1px solid transparent;
    border-width: 8px 12px;
    border-left-color: #000; }
  #header .pause_all:before {
    content: "▌▌";
    letter-spacing: -3px;
    margin-top: -3px;
    font-size: 14px !important;
    height: 0;
    width: 0;
    left: 0;
    top: 2px;
    position: absolute; }

/* *************** */
/* content section */
/* *************** */
#playlist {
  padding: 0;
  list-style: none;
  margin-top: 20px;
  overflow: hidden; }
  #playlist .song {
    margin-bottom: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    width: 100%;
    padding: 5px 7px;
    position: relative; }
    @media only screen and (max-width: 480px) {
      #playlist .song {
        display: inline-block; } }
  #playlist .song > span {
    height: 24px;
    line-height: 24px;
    display: block; }
    @media only screen and (max-width: 480px) {
      #playlist .song > span {
        display: block; } }
  #playlist .song_title {
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* responsive */
    font-size: 14px;
    width: 75%; }
    @media only screen and (min-width: 480px) {
      #playlist .song_title {
        font-size: 14px;
        width: 240px; } }
    @media only screen and (min-width: 980px) {
      #playlist .song_title {
        font-size: 16px;
        width: 365px; } }
  #playlist .song_player {
    font-size: 12px; }
  #playlist .song_buy {
    padding: 0 2px;
    font-size: 14px;
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    text-align: center; }
    #playlist .song_buy a {
      text-decoration: none; }
    @media only screen and (max-width: 480px) {
      #playlist .song_buy {
        width: 60px;
        display: inline-block;
        right: 6px;
        top: 25%;
        bottom: 25%;
        height: 50%; }
        #playlist .song_buy a {
          position: absolute;
          left: 0;
          right: 0;
          margin-top: 3px; } }

/* audio player */
.audio_player {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1; }
  .audio_player .song_buttons .play {
    display: inline-block;
    position: relative;
    top: 4px;
    height: 16px;
    width: 16px;
    color: transparent; }
  .audio_player .song_buttons .play:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border: 1px solid transparent;
    border-width: 8px 12px;
    border-left-color: #000; }
  .active .audio_player .song_buttons .play {
    display: none; }
  .audio_player .song_buttons .pause {
    display: inline-block;
    position: relative;
    top: 4px;
    height: 16px;
    width: 16px;
    color: transparent;
    display: none; }
  .audio_player .song_buttons .pause:before {
    content: "▌▌";
    letter-spacing: -3px;
    margin-top: -3px;
    position: absolute;
    font-size: 14px !important; }
  .active .audio_player .song_buttons .pause {
    display: inline-block; }
  .audio_player .position {
    font-size: 12px; }

/* audio slider */
.slider {
  background: transparent url("/bundles/wixsoundcloud/images/player/bg_bar.png") top left repeat-x;
  height: 8px;
  width: 3px;
  display: inline-block;
  width: 50%;
  border-right: 1px solid #000;
  margin: 0 10px;
  position: relative;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }
  .slider .ui-slider-range {
    width: 0%;
    height: 8px;
    margin-top: 1px;
    position: absolute;
    z-index: 2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
  @media only screen and (max-width: 480px) {
    .slider {
      width: 36%; } }
  .slider .loaded {
    background: transparent url("/bundles/wixsoundcloud/images/player/bg_bar_buffer.png") top left repeat-x;
    height: 6px;
    width: 6px;
    display: inline-block;
    height: 8px;
    margin-top: 1px;
    position: absolute;
    z-index: 1; }
  .slider .ui-slider-handle {
    margin: -2px 0px 0px -7px;
    position: absolute;
    z-index: 3;
    background: transparent url("/bundles/wixsoundcloud/images/player/buttons_tracker.png") top left no-repeat;
    height: 14px;
    width: 14px;
    display: inline-block; }
  @media only screen and (min-width: 480px) {
    .slider {
      display: inline-block; } }
  @media only screen and (min-width: 980px) {
    .slider {
      width: 75%; } }

.view_more {
  font-size: 14px;
  text-align: center;
  display: block; }
  .view_more:hover {
    text-decoration: underline; }

.disabled {
  opacity: 0.3; }