/* Styles from this file will be removed and integrated
 * into the SASS setup */

.dark .podcasts a {
  color  : #DDDDDD;
  cursor : pointer;
}

.dark .podcasts a:hover {
  color : #E0EEFF;
}

.dark .date {
  color   : inherit;
  opacity : 0.7;
}

.attribution {
  color          : rgba(255, 255, 255, 0.6);
  font-size      : 10px;
  text-transform : uppercase;
  text-align     : right;
  line-height    : 11px;
  margin-bottom  : 10px;
}

.dark .news-item .dateline, .dark .podcast .dateline {
  font-size : 0.8em !important;
  color     : #CCCCCC;
  opacity   : 1.0 !important;
}

.light .news-item .dateline, .light .podcast .dateline {
  font-size : 0.8em !important;
  color     : #777777;
  opacity   : 1.0 !important;
}

/* Fix for light UI */
#main-player {
  width  : 1px;
  height : 1px;
}

.artist-info-active .album-art, .artist-info-active .podcast-art {
  -webkit-filter : none;
  -moz-filter    : none;
  filter         : none;
}

/*
 * Consider merging these into recenlty-played.
 */

.playlist li {
  overflow : hidden;
  position : relative;
  padding  : 18px 24px;
}

.playlist li .playlist-art {
  position : absolute;

  top      : 18px;
  left     : 24px;
}

.playlist li .playlist-art img {
  width   : 72px;
  height  : 72px;
  display : block;
}

.playlist li .playlist-info {
  padding-left : 88px;
  min-height   : 72px;
  float        : left;
  width        : 70%;
}

.playlist li .action {
  float : right;
}

.playlist li .action img {
  width   : 72px;
  height  : 72px;
  display : block;
}

.playlist-track {
  font-weight : bold;
  font-size   : 16px;
  line-height : 22px;
}

.playlist-artist-and-album {
  font-weight : 400;
  font-size   : 14px;
  line-height : 18px;
}

.playlist-album:before {
  content       : "\2014";
  font-size     : 13px;
  padding-right : 3px;
}

.playlist-info .buy-link:before {
  content : ""
}

.dark .playlist li:hover {
  background-color : rgba(255, 255, 255, 0.1);
  cursor           : pointer;
}

.dark .playlist li {
  border-bottom : 1px solid rgba(255, 255, 255, 0.3);
}

.dark .playlist li.selected {
  background-color : rgba(255, 255, 255, 0.3);
}

.light .playlist li:hover {
  background-color : rgba(51, 51, 51, 0.3);
  cursor           : pointer;
}

.light .playlist li {
  border-bottom : 1px solid rgba(51, 51, 51, 0.3);
}

.light .playlist li.selected {
  background-color : rgba(51, 51, 51, 0.3);
}

/* Roll .standard-background in with album-art and podcast-art*/
.standard-background {
  top                     : 0px;
  left                    : 300px;
  bottom                  : 0px;
  background-color        : transparent;
  -webkit-background-size : contain;
  -moz-background-size    : contain;
  -o-background-size      : contain;
  background-size         : contain;
  background-repeat       : no-repeat;
  background-position     : left center;
  position                : absolute;

  -webkit-transition      : -webkit-filter 0.4s;
  width                   : 100%;
}

.artist-detail-container h3 {
  font-size : 32px;
}

.news-item {
  position : relative;
}

.news-item .recently-played-art {
  position     : relative;
  float        : left;
  clear        : both;
  margin-top   : 5px;
  margin-right : 12px;
  overflow     : hidden;
  left         : auto;
  top          : auto;
}

.news-item.has-photo .news-container {
  position : relative;
  left     : auto;
  right    : auto;
}

.news-container h3 {
  line-height : normal;
}

.news li {
  overflow : hidden;
  padding  : 5px 10px;
}

.photo-item {
  text-align : center;
}

.cell.medium .photo-item img {
  max-width : 640px;
}

.recently-played-art img {
  width      : auto;
  height     : auto;
  max-width  : 72px;
  max-height : 72px;
}

.hero-table {

  bottom   : 0px;
  position : absolute;
  height   : auto;
  top      : 0px;
}

.has-banner .hero-table {
  bottom : 110px;
}

.dark .banner {
  background : #000000;
}

.light .banner {
  background : #FFFFFF;
}

.banner-container {
  bottom : 0;
}

.standard-background {
  background-color : #000000;
}

.album-art, .podcast-art, .standard-background {
  bottom        : 0px;
  border-bottom : 1px solid #666666;
}

.has-banner .album-art, .has-banner .podcast-art, .has-banner .standard-background {
  bottom : 110px;
}

.banner-ad-active .banner-container {
  text-align : center;
}

.album-art, .podcast-art, .standard-background {
  background-size     : cover;
  background-position : center center;
}

.mobile-menu-active .controls-and-info {
  /*   height: 130px;*/
}

.song-info, .podcast-info {
  padding-top : 10px;
}

@media (max-width : 768px) {
  .song-info, .podcast-info {
    padding-top : 3px;
  }
}

.artist-detail-container {
  position : fixed;
  left     : 300px;
  right    : 0px;
  bottom   : 0px;
}

.has-banner .artist-detail-container {
  bottom : 129px;
}

@media (min-width : 768px) {
  .banner-ad-active .cell .cell-inner {
    padding-bottom : 0px;
  }
}