html {
    line-height: 1em;
}

body {
    font-size: 62.5%;
    background-color: transparent;
}

a:focus {
    outline: none;
}

#player {
    width: 100%;
    height: 100%;
    max-width: 700px;
}
.big #player {
}

#player *:hover {
}

#artarea {
    position: relative;
}
#nonartarea{
    border:1px solid #eee;
    border:1px solid rgba(0,0,0,0.18);
    border-top-width: 0;
    background-color: #fff;
}
.smallartwork #nonartarea {
    border: none;
}

#infolayer {
    padding-bottom: 15px;
}
#infolayer {
    position: absolute;
    width: 100%;
    background: #fff;
    bottom: 101%;
    left: 0px;
    border: 1px solid rgba(0,0,0,0.1);
    opacity: 0;
}
#infolayer.fixed {
    position: static;
    width: auto;
    background: none;
    bottom: auto;
    left: auto;
    border: 0;
/*    height: 119px; */
    opacity: 1;
}
.hastracklist #infolayer.fixed {
    height: 89px;
}

.smallartwork #infolayer.fixed,
.noartwork #infolayer.fixed {
    height: 120px;
}

#merch {
    display: none;
}

/* album settings */

.albumplayer #subtext {
    display: none;
}

.albumplayer #album {
    display: none;
}

.albumplayer.hasmerch #merch {
    display: block;
}

/* standalonetrackplayer settings */

.standalonetrackplayer #subtext,
.standalonetrackplayer #prevnext,
.standalonetrackplayer #album,
.standalonetrackplayer #currenttitle,
.standalonetrackplayer #tracklist {
    display: none;
}
.standalonetrackplayer.exclusive #currenttitle {
    display:block;
}
.standalonetrackplayer.exclusive #currenttitle_tracknum {
    display:none;
}
.standalonetrackplayer #currenttimeblock {
    margin-left: 76%;
    width: 24%;
}

.standalonetrackplayer #timelinecontainer {
    float: left;
    top: -20px;
    margin: 0 0 -20px;
}

/* albumtrackplayer settings */

.albumtrackplayer #subtext,
.albumtrackplayer #prevnext,
.albumtrackplayer #currenttitle,
.albumtrackplayer #tracklist {
    display: none;
}

.albumtrackplayer #album {
    display: none;
}

.albumtrackplayer #artist {
    margin: 0px 0 18px;
}

.albumtrackplayer #currenttimeblock {
    margin-left: 76%;
    width: 24%;
}

.albumtrackplayer #timelinecontainer {
    float: left;
    top: -20px;
    margin: 0 0 -20px;
}

/* general */

#art, .art {
    width: 100%;
    visibility: visible;
    padding-top: 100%;
    background-size: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    outline: 1px solid rgba(0,0,0,0.1);
    outline-offset: -1px;
}

.smallartwork #artarea,
.noartwork #artarea {
    width: 0px;
}

#infolayer .art {
    width: 120px;
    height: 120px;
}
#infolayer .artlink {
    display: none;
}
#infolayer > * {
    display: inline-block;
    vertical-align: top;
}

#infolayer .info {
    left: 0px;
    right: 0px;
    position: static;
    display: block;
}
#infolayer.fixed .info {
}
.smallartwork #infolayer .info,
.noartwork #infolayer .info {
    position: absolute;
    height: 120px;
}


.art {

}
.smallartwork #infolayer .artlink {
    display: inline-block;
}
.noartwork #infolayer .artlink {
    display: inline-block;
}
.noartwork #infolayer .art {
    visibility: hidden;
}

#maintext {
    display: inline-block;
    width: 70%;
    padding: 0 0 0 2.86%; /* 10/350 */
    visibility: visible;
    line-height: 2em;
    font-weight: bold;
    margin: 6px 0 0;
    font-size: 13px;
}
#maintextlink,
.trackspecified #tracknamelink {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 100%;
}

.download #maintext {
    width: 60%;
}
.download #linkarea {
    width: 39%;
}
.download #buyordownload a {
    padding: 0 0.3em 0 0;
}

#subtext {
    padding: 0 2.86%; /* 10/350 */
    line-height: 15px;
    font-size: 13px;
    visibility: visible;
}
#subtextlink.fgtext {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    vertical-align: top;
    color: #333;
    text-decoration:none;
}
#subtextlink:before {
    content: 'by ';
}
#linkarea,
#linkareaalt {
    font-size: 0;
    display: inline-block;
    width: 29%;
    padding: 0 2.86% 0 0; /* 10/350 */
    text-align: right;
    visibility: visible;
    font-weight: bold;
    line-height: 2em;
    font-size: 13px;
    margin: 6px 0 0;
}

@media (min-width: 300px) and (max-width: 500px) {
    .exclusive #linkarea {
        padding: 0;
    }
}

@media (min-width: 600px) {
    .exclusive #linkarea {
        padding: 0 1% 0 0;
    }
}

#buyordownload,
#buyordownloadalt {
    line-height: 2em;
    font-size: 13px;
    display:inline-block;
    margin-right: 4%;
}
#buyordownload a,
#buyordownloadalt a {
    padding: 0 0.7em;
}
#share,
#sharealt {
    line-height: 2em;
    font-size: 13px;
    display:inline-block;
}

.exclusive #share,
.exclusive #sharealt,
.exclusive #linkareaalt #sharealt {
  display: none;
}

#share a,
#sharealt a {
    padding: 0 0 0 0.3em;
}

#sharelink,
#sharelinkalt {
    visibility: visible;
}
#tinyplayer {
    display: none;
}
#play_link {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    visibility: visible;
}
#big_play_button {
    visibility: visible;
    width: 50px;
    height: 50px;
    background: #000;
    background: rgba(0,0,0,0.75);
    position: absolute;
    left: 2.86%;
    bottom: 2.86%;
    cursor: pointer;
    -moz-border-radius:2px;
    -webkit-border-radius: 2px;
    border-radius:2px;
}
#artarea:hover #big_play_button {
    background: #000;
    background: rgba(0,0,0,0.85);
}
.big #big_play_button {

}

#artarea:hover #big_play_button {
    visibility: visible;
}

#big_play_icon {
    border-color: transparent transparent transparent #fff;
    border-style: dashed dashed dashed solid; /* dashed for smooth rendering in ff */
    border-width: 10px 0px 10px 18px;
    margin: 15px auto;
    top: 0;
    left: 1px;
    position: relative;
    width: 0px;
    height: 0px;
}
.big #big_play_icon {

}

.playing #big_play_icon {
    margin: 14px auto;
    border-style: solid;
    border-width: 0px 6px 0px 6px;
    border-color: #fff;
    width: 17px;
    height: 20px;
    left: 0;
}

.big .playing #big_play_icon {
    border-style: solid;
    border-width: 0px 18px 0px 18px;
    border-color: black;
    width: 44px;
    height: 38px;
}

#play {
    display: none;
}
#prevnext {
    display: inline-block;
    margin: 5px 0 0;
    width: 26%;
    padding: 0 2.86%;
    font-size: 0;
}
#prev {
    vertical-align: top;
    display: inline-block;
    visibility: visible;
    width: 55%;
    height: 20px;
    background-image: none;
    text-align: center;
}
#next {
    vertical-align: top;
    display: inline-block;
    visibility: visible;
    width: 45%;
    height: 20px;
    background-image: none;
    text-align: center;
    padding-left: 10%;
}

#prev .icon {
    display: inline-block;
    border-color: transparent #888 transparent transparent;
    border-style: dashed solid dashed dashed; /* dashed for smooth rendering in ff */
    border-width: 5px 8px 5px 0px;
    width: 0;
    height: 0;
    position: relative;
    top: 1px;
}
#prev .icon:before {
    content:" ";
    display:block;
    border-color: transparent #888 transparent transparent;
    border-style: dashed solid dashed dashed; /* dashed for smooth rendering in ff */
    border-width: 5px 8px 5px 0px;
    width: 0;
    height: 0;
    position:absolute;
    top:-5px;
    left: 7px;
}
#prev .icon:after {
    content:" ";
    display:block;
    background-color:#888;
    width: 2px;
    height: 10px;
    position: absolute;
    top: -5px;
    left: -2px;
}

#next .icon {
    display: inline-block;
    border-color: transparent transparent transparent #888;
    border-style: dashed dashed dashed solid;
    border-width: 5px 0px 5px 8px;
    width: 0;
    height: 0;
    position: relative;
    top: 1px;
}
#next .icon:before {
    content:" ";
    display:block;
    border-color: transparent transparent transparent #888;
    border-style: dashed dashed dashed solid;
    border-width: 5px 0px 5px 8px;
    width: 0;
    height: 0;
    position:absolute;
    top:-5px;
    left: -15px;
}
#next .icon:after {
    content:" ";
    display:block;
    background-color:#888;
    width: 2px;
    height: 10px;
    position: absolute;
    top: -5px;
}

#prev .icon,
#next .icon {
    margin: 3px 0 0 6px;
}

#prev:hover .icon {
    border-color: transparent #333 transparent transparent;
}
#prev:hover .icon:before {
    border-color: transparent #333 transparent transparent;
}
#prev:hover .icon:after {
    background-color:#333;
}
#next:hover .icon:before {
    border-color: transparent transparent transparent #333;
}
#next:hover .icon:after {
    background-color:#333;
}
#next:hover .icon {
    border-color: transparent transparent transparent #333;
}

#prev.hiddenelem,
#next.hiddenelem  {
    opacity: 0.1;
}

#timelinecontainer {
    position: relative;
    display: inline-block;
    overflow: visible;
    height: 20px;
    width: 73%;
    padding: 0 0 0 2.86%; /* room for next/prev */
    margin: 5px 0 0;
    visibility: visible;
    vertical-align: top;
}
#timeline {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 100%;
    visibility: visible;
    vertical-align: top;
}
.inline_player .progbar_empty {
    position: relative;
    top: 3px;
    height: 12px;
    overflow: visible;
    border: solid 1px;
    border-color:#efefef;
    border-color: rgba(0, 0, 0, 0.15);
}

.inline_player.playing .progbar_empty {
    border-color:#666;
    border-color: rgba(0, 0, 0, 0.4);
}

.inline_player .progbar_fill {
    display: block;
    height: 100%;
    width: 0;
    background: #f1f1f1;
}

.inline_player .thumb {
    position: absolute;
    width: auto;
    top: 0;
    left: 0;
    height: 14px;
    width: 24px;
    background:#eee;
    border: solid 1px rgba(0,0,0,0.2);
    cursor: pointer;
    margin-top: -2px;
    margin-left: -1px;
}

.playing .thumb {
    background: #fff;
    border: solid 1px rgba(0,0,0,0.4);
    -webkit-transition: border .1s linear;
    transition: border .1s linear;
}

.thumb.ui-draggable-dragging {
    background: #fff;
}

#artist:before {
    content: 'by ';
}
#album:before {
    content: 'from ';
}
#artist,
#album {
    padding: 0 2.86%; /* 10/350 */
    line-height: 15px;
    font-size: 13px;
    visibility: visible;
    width: 100%;
    overflow: hidden;
    vertical-align: top;
    color: #333;
    text-decoration:none;
}
#artist {
    line-height: 16px;
}
#currenttitlerow {
    margin: 6px 0 0;
    line-height: 2em;
    font-size: 0;
    padding: 0 2.86%; /* 10/350 */
    color: #333;
}
#currenttitle {
    vertical-align: top;
    display:inline-block;
    visibility: visible;
    width:80%;
    line-height: 2em;
    font-size: 11px;
}
#currenttitle_title {
    display:inline-block;
    min-width:90%;
    max-width:96%;
    padding-right: 1%;
    line-height: 2em;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#currenttitle_tracknum {
    display:inline-block;
    line-height: 2em;
    vertical-align: top;
    max-width: 9%;
    margin-right:1%;
}
#currenttimeblock {
    display: inline-block;
    width: 20%;
    text-align: right;
}

#currenttime {
    vertical-align: top;
    display: inline-block;
    visibility: visible;
    color:#999;
    color: rgba(0,0,0,0.5);
    text-align: left;
    font-size: 11px;
    line-height: 2em;
}

#totaltime {
    vertical-align: top;
    display: inline-block;
    visibility: visible;
    color:#999;
    color: rgba(0,0,0,0.5);
    font-size: 11px;
    line-height: 2em;
}

.inline_player #totaltime:before {
    content: "\00a0/ ";
    visibility: visible;
    color:#999;
    color: rgba(0,0,0,0.5);
}

#merch {
    width: 100%;
    visibility: visible;
    padding: 10px 0 0 2.86%;
}
.merchthumb {
    padding-top: 17.15%;
    padding-right: 17.15%;
    height:0;
    width: 0;
    margin-right: 2.95%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    display: inline-block;
    cursor: pointer;
    outline: 1px solid transparent;
    vertical-align: top;
}
.merchthumb.selected {
    outline: 1px solid #0676f5;
    outline-offset: 1px;
}

/* share */

.ui-widget {
    font-family: "Helvetica Neue",Arial,sans-serif;
}

#sharedialog {
    font-size: 13px;
}

#sharedialog p {
    margin: 1em 0 1.5em;
}

#sharedialog input {
    font-size: 11px;
}

.ui-widget-overlay {
    opacity: 0.7;
    background: #000;
}

.ui-dialog.ui-widget-content {
    border: none;
    color: #333;
}

.ui-dialog .ui-dialog-titlebar.ui-widget-header {
    font-size: 14px;
    text-align:center;
    padding: 1em 0;
}

.ui-dialog .ui-dialog-title {
    margin: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    right: 0.5em;
}

.ui-dialog .ui-dialog-titlebar-close span {
    margin: 0;
}

/* logo */
.logo, #logoalt, #logoalt2 {
    display: none;
}

.logo .icon,
#logoalt .icon,
#logoalt2 .icon {
    background: url(../../../img/_sprite-bc-embeds-20130528.png) no-repeat 0 0px;
}

/* logo */

.smallartwork #infolayer .logo, .noartwork #infolayer .logo {
    display: block;
    position: absolute;
    color: #000;
    top: 0;
    right: 0;
    width: 30px;
    font-size: 13px;
    font-weight: bold;
    line-height: 2em;
    margin: 6px 2.86% 0 0;
}

.smallartwork #infolayer .logo .icon, .noartwork #infolayer .logo .icon {
    display: inline-block;
    opacity: 0.4;
    width: 30px;
    height: 10px;
    position: relative;
    top: 7px;
    vertical-align: top;
}

.smallartwork.exclusive #infolayer .logo .icon, .noartwork.exclusive #infolayer .logo .icon {
    top: 8px;
}


/* theme dark */

.theme-dark .logo .icon {
    background-position: 0 -10px;
}

/* exclusivity */

.private-tralbum-overlay {
    position: absolute;
    width:100%;
    height:100%;
    z-index:1002;
    background-color: #E1E1E1;
    opacity:0.9;
    color: black;
    font-weight: bold;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 14px;
    text-align:center;
    padding: 50% 3% 0 3%;
}

@media (max-width: 249px) {
    .size-large ~ .private-tralbum-overlay {
        padding: 40% 3% 0 3%;
    }

    .private-tralbum-overlay {
        font-size: 11px;
    }
}

@media (min-width: 250px) and (max-width: 299px) {
    .size-large ~ .private-tralbum-overlay {
        padding: 45% 3% 0 3%;
    }

    .private-tralbum-overlay {
        font-size: 12px;
    }
}

.smallartwork ~ .private-tralbum-overlay,
.noartwork ~ .private-tralbum-overlay  {
    padding: 12% 3% 0 3%;
}

@media (min-width: 450px) and (max-width: 599px) {
    .smallartwork.standalonetrackplayer ~ .private-tralbum-overlay {
        padding: 10% 3% 0 3%;
    }
}

@media (min-width: 600px) and (max-width: 699px) {
    .smallartwork.standalonetrackplayer ~ .private-tralbum-overlay {
        padding: 8% 3% 0 3%;
    }
}

@media (min-width: 700px) {
    .smallartwork.standalonetrackplayer ~ .private-tralbum-overlay {
        padding: 7% 3% 0 3%;
    }
}