/* trackpipe/public/css/stub_page.css */
/* fan/visitor stub page */
body:containing[div.stub-page-content.fan] {
    background: #FFFFFF;
}

body {
    -webkit-font-smoothing: antialiased;
}

#propOpenWrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

#pgBd {
    flex: 1;
}

.lang-picker {
    display: none !important;
}

/* used to visually hide text but keep it available for screen readers */    
.hiddenAccess {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

.stub-page-content.fan h1, .stub-page-content.band h1 {
    font-size: 26px;
}

.stub-page-content.fan {
    text-align: center;
    font-size: 14px;
    width: 350px;
    margin: auto;
    color: #363636;
    margin-top: 105px;
}

.stub-page-content.fan .bio-pic {
    border-radius: 50%;
    width: 170px;
    height: 170px;
    border: 1px solid #eee;
    margin: auto;
}

.stub-page-content.fan .bio-pic.placeholder {
    background-color: #408ea3;
    background: -webkit-linear-gradient(left, #6046FE, #1DA0C3);
    margin: auto;
}

.stub-page-content.fan h1 {
    margin: 20px 0 7px 0;
    font-size: 26px;
}

.stub-page-content.fan h4, .stub-page-content.fan p {
    font-weight: 400;
    margin: 7px 0 0 0;
}

.stub-page-content.fan #following-actions button {
    background-color: #1DA0C3;
    padding: 10px 0 11px 0;
    margin: 25px 0 11px 0;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    width: 180px;
    border: none;
}

.stub-page-content.fan p.follow-text {
    margin: 0 0 25px 0;
    font-style: italic;
    font-weight: 600;
    color: #1DA0C3;
}

/* admin/band stub page */

.stub-page-content.band {
    padding: 50px 20px;
    font-size: 13px;
    width: 400px;
}

.stub-page-content.band p {
    margin: 20px 0 30px 0;
    line-height: 20px;
    width: 360px;
}

.stub-page-content.band .cta a {
    border: 1px solid #e8e8e8;
    border-right: none;
    padding: 13px 20px;
    float: left;
    margin: 0;
}

.stub-page-content.band .cta a:first-of-type {
    font-weight: bold;
}

.stub-page-content.band .cta a:last-of-type {
    border-right: 1px solid #e8e8e8;
    font-size: 13px;
}

.rightColumn #bio-container {
    margin-top: 65px;
}

.rightColumn #bio-container .secondaryText {
    color: #888888;
}

@media only screen and (max-width: 740px) {
    .stub-page-content.fan {
        margin: 110px auto;
    }
}

/* trackpipe/public/css/bio.css */

#bio-container {
    font:normal 12px/1.25em 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-bottom:1.75em;
}

#bio-container.anim-hidden {
    visibility:hidden;
}

div.rightColumn.cart-visible #bio-container {
    padding-top: 1em;
}

#bio-container .upload-progress {
    display: inline-block;
    width: 120px;
    margin-top: 47px;
}

#bio-container .artists-bio-pic .upload-progress .progress_outer {
    width: 80px;
    height: 5px;
}

#bio-container .artists-bio-pic .upload-progress .progress_inner {
    height: 5px;
}

#bio-container .artists-bio-pic {
    outline: none;
    text-align: center;
    margin-bottom: .75em;
}

#bio-container .artists-bio-pic.empty {
    height: 100px;
    border: 1px dashed #c0c0c0;
}

#bio-container .artists-bio-pic div.bio-pic {
    display: none;
}

#bio-container .bio-pic a {
    display: block;
}

#bio-container.ko-ready .artists-bio-pic div.bio-pic, #bio-container .artists-bio-pic .signed-out.bio-pic{
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 30px;
    text-align: center;
}

#bio-container .artists-bio-pic a.bio-image-upload {
    display: none;
}

#bio-container.ko-ready .artists-bio-pic.empty a.bio-image-upload {
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    margin-top: 43px !important;
    outline-style: none;
    display: block;
}

#bio-container .artists-bio-pic.uploaded .delete-link, #bio-container .artists-bio-text .bio-text-add {
    outline: none;
    font-weight: bold;
    display: block;
}

#bio-container .delete-link {
    position: absolute;
    background: #fff;
    color: #0687f5;
    width: 15px;
    height: 14px;
    line-height: 14px;
    font-size: 93%;
    text-align: center;
    border: 1px solid #eee;
    bottom: 3px;
    right: 3px;
}

#bio-container .artists-bio-text p {
    word-wrap: break-word;
}

#bio-container .artists-bio-text {
    display: none;
}

#bio-container.ko-ready .artists-bio-text, #bio-container.ko-ready div.signed-out-artists-bio-text {
    display: block;
}

#bio-container.ko-ready form.edit-bio-text-form {
    background-color: #fff;
    background-color: rgba(255,255,255,0.25);
    margin-bottom: 0.75em;
}

#bio-container .edit-bio-text-form textarea {
    width: 110px;
    height: 180px;
    padding: 4px;
    color: #595959;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    box-shadow: 0 0 5px #fff;
    border: 1px solid #ccc;
    border-color: #9c9c9c #9c9c9c #ccc #ccc;
}


#bio-container .edit-bio-text-form textarea:focus {
    -moz-transition-duration: 0.3s;
    -moz-transition-property: all;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    box-shadow: 0 0 5px #B4D7F9;
    outline: medium none;
    border: 1px solid #50a1e6;
}

#bio-container .edit-bio-text-form .bio-character-count {
    background-color:#eee;
    background-color:rgba(0,0,0,0.05);
    color: #444;
    text-align: right;
    text-align: center;
    font-size: 10px;
    margin-bottom: 2px;
    padding: 2px 0;
/*    display: none; */
}

.invertIconography #bio-container .edit-bio-text-form .bio-character-count {
    color: #ccc;
}

#bio-container .edit-bio-text-form .too-many-characters,
.invertIconography #bio-container .edit-bio-text-form .too-many-characters {
    color: red;
}

#bio-container .error {
    color: #e00;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 5px;
}

#bio-container .edit-bio-text-form button {
    width: 50%;
    font-size: 1em;
    border: none;
    margin: 0;
    height: 25px;
}

#bio-container .edit-bio-text-form button {
    margin-bottom: 0;
}

#bio-container .edit-bio-text-form button.save-bio {
    color: #fff;
    background-color: #0687f5;
}

#bio-container .cancel-bio-edit {
    color: #0687f5;
    background-color: transparent;
}

#bio-container .edit-bio-text-form button.save-bio.disabled, #bio-container .edit-bio-text-form button.save-bio.disabled:hover {
    text-decoration: none;
    opacity: 0.3;
}

#bio-container .artists-bio-pic.uploaded .html5-upload-wrapper {
    display: none !important;
}

#band-name-location {
    word-wrap: break-word;
    margin: 0 0 1em;
}
#band-name-location .title {
    font-size:14px;
    font-weight: bold;
    border-top: 0;
    margin: 0 0 3px;
    display: block;
}
#band-name-location .location {
    display: block;
}

#bio-text {
    word-wrap: break-word;
    margin-top: 0;
}

#band-links {
    padding: 0;
    margin: 0 0 1em;
}

#band-links li {
    list-style-type: none;
    margin: 0 0 5px;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
}

#recommended {
    margin: 0 0 1em;
}

#staff-picks, #bcweekly-shows, #bio-container .bcdaily-stories {
    border: 1px solid #0687f5;
    padding: 3px 4px;
    background: lightyellow;
    color: #0687f5;
    margin: 0;
    margin: 0 0 1em;
}

#staff-picks li, #bcweekly-shows li, #bio-container .bcdaily-stories li {
    list-style-type: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
}

#staff-picks li a, #bcweekly-shows li a, #bio-container .bcdaily-stories a {
    color: #0687f5;
}


/*** Gift Card indicator ***/

#sidebar-gift-card-accepted {
    position: relative;
    margin-bottom: 1em;
}

.sidebar-gift-card-tooltip {
    position: absolute;
    bottom: 17px; /* icon height (10px) + padding bottom and top (3.5px each) from .gift-card-icon-bordered */
    left: -8px;
    width: 120px; /* matches .rightColumn */

    display: none; /* visibility controlled by jquery bc_tooltips */
}

.sidebar-gift-card-tooltip-inner {
    position: relative;
    width: 100%;
    background: #f5f5f5;
    border: solid 1px #bfbfbf;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    padding: 8px;
    margin-bottom: 8px;
}

/* stupidly specific rules to override the overzealous custom design rules that use #id selectors */
#pgBd .sidebar-gift-card-tooltip-inner {
    color: #333;
}
#pgBd .sidebar-gift-card-tooltip-inner a {
    color: #0687f5;
}

.sidebar-gift-card-tooltip-triangle {
    width: 0;
    height: 0;
    border-style-left: inset;
    border-style-right: inset;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ccc;
    position: absolute;
    left: 13px;
    bottom: -6px;
}
.sidebar-gift-card-tooltip-triangle:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #f5f5f5;
    position: relative;
    left: -6px;
    top: -7.5px;
}

/* trackpipe/public/css/popup_image.css */

/* popup image viewer */

/* .imageviewer_XXX styles refers to the original implementation and will be deleted eventually
 * .popupimage_XXX is the new black.  the desktop version of the new code is still being developed,
 * so the .imageviewer_XXX are still the ones active in production. -- kj
 */


.popupimage_gallery {
    display: table-cell;
    vertical-align: middle;
    position: fixed;
    left: 0; top: 0;
    bottom: 0; right: 0;
    background: rgba( 255, 255, 255, 0.5 );
    z-index: 10;
}

.popupimage_container {
    position: relative;
    display: table;
    left: 0;
    height: 100%; width: 1000%;
    list-style: none;
    padding: 0;
}

.popupimage_item {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: auto;
}

.popupimage_item img {
    display: block;
    background: #000;
    margin-left: auto;
    margin-right: auto;
}

.popupimage_item.loading {
    background: url(/img/playerbusy_transp.gif) no-repeat;
    background-position: 50% 50%;
}


/* --- widgets --- */

.popupimage_nav {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 33%;
    -webkit-tap-highlight-color: rgba( 0,0,0,0 );
}

.popupimage_nav.dismiss {
    left: 33%;
    width: 34%;
}

.popupimage_nav.prev {
    left: 0;
}

.popupimage_nav.next {
    right: 0;
}

.popupimage_navicon {
/* *** old:
    display: inline-block;
    visibility: hidden;
    position: absolute;
    cursor: pointer;
    top: 50%;
    margin-top: -15px;
    background-image:url(/img/popup_image.png);
    background-repeat:no-repeat;
    width: 30px;
    height: 30px;
*** */

    display: inline-block;
    position: absolute;
    top: 85%;
    margin: auto;
    background: url(/img/mobile-sprites-20150520.svg) no-repeat;
    background-size: 500% auto;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    z-index: 1;
}

.no-svg .popupimage_navicon {
    background-image: url(/img/mobile-sprites-20150520.png);
}

.popupimage_navicon.dismiss {
    left: 50%;
    margin-left: -1rem;
    background-position: 0 31.6%;
}

.popupimage_navicon.prev {
    left: 1em;
    background-position: 0 35.8%;
}

.popupimage_navicon.next {
    right: 1em;
    background-position: 0 40.0%;
}

.popupimage_loading {
    position: absolute;
    display: inline-block;
    background-color: black; 
    opacity: 0.5;
    filter:alpha(opacity=50);
    text-align: center;
    vertical-align: middle;
    z-index: 1;
}

.popupimage_spinny_lg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy.gif) no-repeat;
    background-position: 50% 50%;
}

.popupimage_spinny_sm {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_small.gif) no-repeat;
    background-position: 50% 50%;
}

/* ---------- */

.imageviewer_top {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    text-align: center;
    z-index: 201; /* on top of menubar 2018 */
}

.imageviewer_top td {
    border: 0;
}

.imageviewer_back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
}

.imageviewer_dismiss {
    cursor: pointer;
    position: relative;
    top: 2em; left: -1em;
    background-image: url(/img/popup_image_v2.png);
    background-size: 30px;
    background-repeat:no-repeat;
    width:30px;
    height:30px;
    z-index: 10;
}

.imageviewer_image {
    clear: both;
    border: 2px solid rgba(0,0,0,0.1);
    max-width: none;
    display: inherit;
}

.imageviewer_nav {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 200px;
    max-width: 33%;
    top: 0;
}

.ie .imageviewer_nav {
    /* fixes problems laying out empty elements */
    background: white;
    filter: alpha(opacity=0);
    opacity: 0;
}

.imageviewer_nav.prev {
    left: 0;
}

.imageviewer_nav.next {
    right: 0;
}

.imageviewer_navicon {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    cursor: pointer;
    top: 50%;
    margin-top: -15px;
    background-image: url(/img/popup_image_v2.png);
    background-size: 30px;
    background-repeat:no-repeat;
    width: 30px;
    height: 30px;
}

.imageviewer_navicon.next {
    right: 30px;
    background-position:0 center;
}

.imageviewer_navicon.prev {
    left: 30px;
    background-position:0 bottom;
}

.imageviewer_nav:hover span.imageviewer_navicon {
    visibility: visible;
}

.imageviewer_loading {
    position: absolute;
    display: inline-block;
    background-color: black; 
    opacity: 0.5;
    filter:alpha(opacity=50);
    text-align: center;
    vertical-align: middle;
}

.imageviewer_spinny_lg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_transp.gif) no-repeat;
    background-position: 50% 50%;
}

.imageviewer_spinny_sm {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter:alpha(opacity=50);
    background: url(/img/playerbusy_small.gif) no-repeat;
    background-position: 50% 50%;
}


/* trackpipe/public/css/fan/band_follow_opt_in.css */
.external-follow-confirm .ui-dialog-buttonset button,
.mailing-list-opt-in .ui-dialog-buttonset button {
    background: rgb(0,161,198);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    padding: 0 1em;
    text-align: center;
    border: none;
    vertical-align: top;
    padding: 12px 12px;
    height: 43px;
    line-height: 16px;
}
.external-follow-confirm .ui-dialog-buttonset button:hover,
.mailing-list-opt-in .ui-dialog-buttonset button:hover {
    background: rgb(0,161,198);
    text-decoration: underline;
}
.external-follow-confirm .ui-dialog-buttonset button:focus,
.mailing-list-opt-in .ui-dialog-buttonset button:focus {
    background: rgb(0,161,198);
}
.external-follow-confirm .ui-dialog-content.ui-widget-content,
.mailing-list-opt-in .ui-dialog-content.ui-widget-content {
    padding-bottom: 0;
}
.mailing-list-opt-in.label .ui-dialog-buttonset button {
    max-width: 420px;
}
.external-follow-confirm .ui-dialog-buttonset button:last-child,
.mailing-list-opt-in.band .ui-dialog-buttonset button:last-child {
    width: 190px;
    background: #FFF;
    border: 1px solid rgb(0,161,198);
    color: rgb(0,161,198);
}
.external-follow-confirm .heading {
    margin: 0 auto 15px auto;
}
.mailing-list-opt-in .heading {
     margin: 0 auto;
}
.mailing-list-opt-in .heading,
.external-follow-confirm .heading {
    font-weight: normal;
    font-size: 17px;
    line-height: 20px;
    max-width: 420px;
}
.external-follow-confirm .heading {
    height: 39px;
    padding: 20px 0;

}
body:lang(ja) .mailing-list-opt-in .heading,
body:lang(ja) .external-follow-confirm .heading {
    font-size: 16px;
    line-height: 1.4;
}
.mailing-list-opt-in .email-abuse {
    margin: 10px auto 10px auto;
    color: #777;
    font-size: 12px;
    line-height: 14px;
    max-width: 420px;
}
.mailing-list-opt-in .notify-me-container {
    font-size: 15px;
    margin: 15px auto;
    max-width: 420px;
}
.mailing-list-opt-in .notify-me-container .first {
    margin-bottom: 5px;
}
.mailing-list-opt-in .notify-me {
    display: block;
}
.mailing-list-opt-in .notify-me-label {
    display: inline-block;
}
.mailing-list-opt-in .notify-me-message {
    display: inline-block;
    font-weight: bold;
    width: 390px;
}
.mailing-list-opt-in .notify-me-container input[type="checkbox"] {
    vertical-align: top;
}