/* concatenation of: tralbum_phone.css, download_panel_phone.css, cart_phone.css, popup_image_phone.css, peekaboo_text.css */
/* ------------- BEGIN tralbum_phone.css --------------- */
/*
 * Tralbum page CSS: phone view.
 *
 * This file is specific to album, track, and related pages.
 */


/***** Tralbum title and art *****************************************/

.trackView,
#merch-item {
    position: relative;  /* positioning context for #tralbumArt */
}

#name-section {
    line-height: 1.125rem;
    text-align: center;
}

#name-section h3 {
    font-size: 0.875rem;
    display: inline-block;
}

#name-section h3 span a {
    color:#333;
}

.trackView #name-section {
    padding-top: 6.25%;  /* space it out from the top of the page/checkout */
}

.trackView.has-art #name-section {
    padding-top: 103.125%;  /* lower the title below the tralbumArt; 100% + (2000/640) */
}

#merch-item.has-art.has-thumbs {
    padding-top: 96.875%; /* lower the title below the main art and a row of thumbs; 75% + 0.25*75% + (2000/640) */
}
#merch-item.has-art {
    padding-top: 78.125%;  /* lower the title below the 4:3 merch art; 75% + (2000/640) */
}

#name-section > * {
    display: inline;
}

#name-section h2 {
    font-weight: bold;
    font-size: 0.875rem;
}

.trackView #tralbumArt img {
    width: 100%;
    position: absolute; 
    top: 0;  /* raise the image above the trackTitle */
}

#merch-item > .art {
    position: absolute;
    top: 0;
    width: 100%;
}
#merch-item img.main-art {
    width: 100%;
}
#merch-item .merch-thumbs {
    margin-top: 2.6%;
    width: 100%;
    font-size: 0;
}
#merch-item .merch-thumbs > li {
    display: inline-block;
    width: 23%;
    margin-right: 2.6%; /* 3 gaps to make up for 12% shortage (4x3%) */
}
#merch-item .merch-thumbs > li:last-child {
    margin-right: 0;
}
#merch-item .merch-thumbs img {
    width: 100%;
}

#missing-tralbum-art {
    display: none;
}

/* dark */

.invertIconography #name-section h3 span a {
    color: #919191;
}

/***** Item descriptions ********************************************/

span.lightweightBreak {
    display: inline-block;
    width: 0em;
    height: 0.5rem;
}

/***** Buy and share links ********************************************/

.tralbumCommands > * {
    margin: 1.25rem 0;
}

.buyItem .hd, .buyItem .bd {
    display: inline;  
}

.buyItem .bd {
   font-size: 0.75rem;
   line-height: 140%;
}

.buyItem .ft {
    font-size: 0.8125rem;
}

.buyItem .ft .end {
    white-space: nowrap;
}

.buyItem h3 {
    font-size: 0.9375rem;
    font-weight: bold;
}

.buyItem h3 a {
    color: inherit;
}

.buyItem h3:after {
    content: "–"; /* an endash, not an emdash */
    font-weight: normal;
}

.buyItem h4.notable {
    font-weight: bold;
    padding: 0.625rem 0 0.625rem;
    font-size: 0.875rem;
    text-align: center;
    color: #c00;
}

.buyItemExtra {
    font-size: 0.8125rem;
    font-weight: normal;
}

.buyItemEdition {
    width: 85%;
    margin: 0 auto;
    font-size: 0.625rem;
    margin-top: -0.6875rem;
    line-height: 1.5rem;
    text-align: center;
}

.buyItemEdition .notable {
    padding-left: 0.25rem;
}

.buy-offsite-item {
    display: none;
}

#share-link {
    font-weight: bold;
}

/* share-link icon */
#share-link-share:before {
    /* sprite h/w ratio: 1/1 */
    content: '';
    display: inline-block;
    width: 1.3em;
    height: 0;
    padding-top: 1.3em; /* height */
    margin-right: 0.3125rem;
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 44%;
    vertical-align: text-top;
}

.no-svg #share-link-share:before {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}


#share-link-embed {
    display: none;
}

.compound-button, .buyItem .ft.compound-button {
    display: block;
    width: 93%;
    margin: 0.625rem auto;
    line-height: 1.875rem;
    text-align: center;
    font-weight: bold;
    border: solid rgba(0,0,0,0.3) thin;
    border-radius: 0.3125rem;
    font-size: 0.875rem;
    -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    box-shadow:         0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
}

/* dark */

.invertIconography .compound-button,
.invertIconography .buyItem .ft.compound-button {
    -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.4);
    box-shadow:         0 0.0625rem 0.125rem 0 rgba(0,0,0,0.4);
    background: rgb(55,55,55);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(55,55,55,1)), color-stop(100%,rgba(33,33,33,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(55,55,55,1) 0%,rgba(33,33,33,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(55,55,55,1) 0%,rgba(33,33,33,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(55,55,55,1) 0%,rgba(33,33,33,1) 100%); /* W3C */
    border: solid rgba(0,0,0,0.7) thin;
    border-top-color:rgba(255,255,255,0.2);
}
.invertIconography .yui-module .compound-button {
    -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    box-shadow:         0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C */    
    border: solid rgba(0,0,0,0.3) thin;
}

.invertIconography .yui-module a.compound-button {
    color: #0687f5;
}

.invertIconography .yui-module {
    color: #333;
}

.invertIconography .buyItem h4.notable {
    color: #a30b0b;
}

.invertIconography #share-link-share:before {
    /* sprite h/w ratio: 1/1 */
    content: '';
    display: inline-block;
    width: 1.3em;
    height: 0;
    padding-top: 1.3em; /* height */
    margin-right: 0.3125rem;
    background: url(../../img/mobile-sprites-dark-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 44%;
    vertical-align: text-top;
}

.invertIconography .no-svg #share-link-share:before {
    background-image: url(../../img/mobile-sprites-dark-20120822.png);
}


/***** Package images ****************************************/

.gallery_viewer {
    margin: 10% 0 3%;
    font-size: 0; /* eliminate single space between each list item */  
    white-space: nowrap;  
}

.gallery_item {
    display: inline-block;
    width: 18%;
    padding-right: 2%;
}

ul.gallery_viewer li.gallery_item.first.last {
    width: 40%;
}

.gallery_item.last {
    padding-right: 0;
}

.gallery_item img {
    width: 100%;
    border: solid #ccc thin;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

/* dark */

.invertIconography .gallery_item img {
    border: solid #717171 thin;
}

/***** Track list ****************************************/

.track_list {
    width: 100%;
    margin: 1.875rem 0;
}

.track_list tr {
    vertical-align: top;
    border-top: thin solid #d5d5d5;
    border-bottom: thin solid #d5d5d5;
}

.track_list td {
    padding: 0.625rem 0 0.563rem;
}

.track_list a {
    color: #333;
}

.track_list .play-col {
    width: 9%;
    text-align: center;
}

.track_list .track-number-col {
    font-size: 0.8125rem;
    width: 5%;
    text-align: right;
    padding-right: 0.625rem;

/*    font-size: 0.8125rem; */
}

.track_list .title {
    font-size: 0.8125rem;
}

.track_list .title > * {
    padding-right: 0.3em;
}

.track_list .info-col {
    width: 9%;
    vertical-align: middle;
    text-align: center;
}

/* repurpose the info-col by hiding its original contents */
.track_list .info-col .info_link {
    display: none;
}

/* ">" icon; see "valign layout hack" below */
.track_list .linked .info-col:after {
    /* sprite h/w ratio: 1/1 */
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0;
    padding-top: 0.8em; /* height */
    vertical-align: middle;
    background: url(../../img/mobile-sprites-light-20120613.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 16%;
}

.no-svg .track_list .linked .info-col:after {
    background-image: url(../../img/mobile-sprites-light-20120613.png);
}

.track_list .download-col {
    display: none;
}

/* valign layout hack: this element introduces inline text to the cell, allowing us to use 
   vertical-align:middle on the cell icon element. The result is that the icon is always 
   vertically aligned with the text in the other cells in a given row, regardless of font size or 
   line height. Note that the "content" property can't be empty or a regular space in this case, 
   but a nbsp works. */ 
.track_list .play-col:before, .track_list .info-col:before {
    content: '\00A0'; /* nbsp */
    display: inline-block;
    background: red;
    width: 0;
    overflow: hidden;
    vertical-align: middle;
}

/* dark */
.invertIconography .track_list tr {
    vertical-align: top;
    border-top: thin solid #232323;
    border-bottom: thin solid #232323;
}

.invertIconography .track_list a {
    color: #919191;
}

/***** Tralbum about, credit, tags ************************/

.about-label, .tags-inline-label, .feed-label, .tralbum-feed {
    display: none;
}

.tralbum-about {
    font-style: italic;
}

.tralbumData, .info {
    margin:0.3125rem 0 0 0;
    font-size: 0.8125rem;
    line-height: 140%;
}

.credits-label, .lyrics-label, .tags-label {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    font-weight: bold;
}

.tags-label, .tralbum-tags {
    display: none; /* temp */   
} 

.tralbum-tags .tag {
    display: inline-block;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.5em 0.3em 0.3em 0;
    padding: 0.2em 0.6em;
    white-space: nowrap;
    border-radius: 0.4em;
    background: rgba(0,0,0,0.04);
}

/* dark */
.invertIconography .tralbum-tags .tag {
    background: rgba(190,190,190,0.08);
}

/***** bio and other sidebar stuff ************************************/

.rightColumn .title,
h3.more-merch {
    margin: 1.875rem 0 0.9375rem;
    border-top: solid #ccc thin;
    padding-top: 1.25rem; 
    font-size: 0.9375rem;
    text-transform: lowercase;
}
/* Don't lowercase band name in the more merch heading */
h3.more-merch a {
    text-transform: none;
}
.more-merch-container .merch-grid > li {
    display: none;
}
.more-merch-container.show-all .merch-grid > li,
.more-merch-container .merch-grid > li.first-four {
    display: inline-block;
}

#bio-container.empty-mobile {
    display: none;
}

/* Bio photo: this image's aspect ratio can vary, but to preserve image quality, we'll bound the 
   max dimensions to a square measuring 100% of the page *width*. Landscape images are easy... */
#bio-container .landscape .band-photo {
    width: 100%;
}

/* ...portrait is harder! */
#bio-container .band-photo-container.portrait {
    position: relative; /* consider padding part of the element's height */
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%;  /* height */
}

/* portrait, cont. */
#bio-container .portrait .band-photo {
    position: absolute;
    top: 0;
    height: 100%;
}

#bio-container p, #band-links li {
    margin: 0.625rem 0;
    font-size: 0.8125rem;
    line-height: 140%;
}

#band-links {
    margin-top: 0.9375rem;
}

#band-links li {
    margin: 0;
}

#recommended {
    display: none; /* temp */
    margin: 0.9375em 0;
    font-size: 0.8125rem;
    font-weight: bold;
}

/* dark */
.invertIconography .rightColumn .title,
.invertIconography h3.more-merch {
    border-top: solid rgba(255,255,255,0.2) thin;
}

/***** shows, discography, merch grid *********************/

ol.merch-grid p {
    margin: 0;
}

#discography ul,
ol.merch-grid {
    margin-bottom: -6%; /* compensate for bottom margin of final li row */
}

#discography li,
ol.merch-grid > li {
    display: inline-block;  
    width: 46%;
    margin-bottom: 6%;
    vertical-align: top;
    font-size: 0.8rem;
}

#discography.truncated li.extra {
    display: none;
}

#discography li:nth-child(odd),
ol.merch-grid > li:nth-child(odd) {
    margin-right: 4%;
}

#discography .thumbthumb,
ol.merch-grid .art {
    display: inline-block;
    width: 100%;
}
/* Force 4:3 thumb clipping for tralbum images used in merch grid. */
ol.merch-grid .art {
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}

#discography .thumbthumb img,
ol.merch-grid .art img {
    width: 100%;
}
ol.merch-grid .art img {
    position: absolute;
    top: 0;
}
/* Force 4:3 thumb clipping for tralbum images used in merch grid. */
ol.merch-grid .art img.tralbum {
    top: -12.5%;
}

/* empty merch items are omitted from the grid, so only need to handle discography here */
#discography .thumbthumb.empty {
    height: auto; /* layout madness! height is determined by inner pseudo-elem, below */
    border: solid rgba(0,0,0,0.18) thin;
    background-color: rgba(0,0,0,0.05);
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

/* The .thumbthumb.empty element can't use the padding==height trick, as that can't take into
   account the height of the borders. So we use an inner elem to determine the height. */
#discography .thumbthumb.empty:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 100%; /* height */
}

#discography .trackTitle,
ol.merch-grid .title {
    font-size: 0.75rem;
    margin-top: 0.625rem;
    word-wrap: break-word;
    font-weight: bold;
}

#discography li a,
ol.merch-grid a {
    color: #333;
}

#discography .trackYear,
ol.merch-grid .price {
    font-size: 0.625rem;
    margin-top: 0.2em;
    color: #777;
}

ol.merch-grid .price.sold-out {
    color: #d33;
}

ol.merch-grid .price > .price {
    font-weight: bold;
}

.more-merch-link {
    display: none;
}
#discography .showMore,
.more-merch-container .more-merch-link {
    display: block;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
}

.peekaboo-list.truncated .peekaboo-list-extra {
    display: none !important;
}

#showography ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;
    margin: 1rem 0 0;
}

#showography li {
    display: table-row;
    height: 2.5em;
}

#showography li > * {
    display: table-cell;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#showography .secondaryText {
    color: #333;
}

#showography .showDate {
    width: 4em;
}

#showography .showVenue {
    padding-right: 1em;
}

#showography .showMore {
    font-size: 0.8rem;
}

/* dark */

.invertIconography #discography li a,
.invertIconography ol.merch-grid a {
    color: #777;
}

.invertIconography #discography .thumbthumb.empty {
    border: solid rgba(255,255,255,0.1) thin;
    background-color: rgba(255,255,255,0.03);
}

.invertIconography #discography .trackYear,
.invertIconography ol.merch-grid .price {
    color: #5e5e5e;
}

.invertIconography ol.merch-grid .price.sold-out {
    color: #d33;
}

.invertIconography #showography .secondaryText {
    color: #5e5e5e;
}

/***** Inline player ************************************************/

/*
    The major player elements (Play, slider, Next/Prev) are laid out as inline-block children.
    To prevent spaces between the tags from causing gaps in the layout, I've chosen to format
    the html to remove them. The font-size:0 alternative generally works, but not on all mobile 
    browsers we're targeting (ex: Android 2.3.4).
*/

.inline_player {
    display: none; /* hide all inline players by default; overridden below */
    position: relative;
    margin: -0.125rem 0 0.5rem;
    text-align: center;
    white-space: nowrap;
    margin-left: -0.5%;
}

.inline_player.phone-view {
    display: block;
}

.inline_player_inner > * {
    vertical-align: middle;
}

.inline_player .playbutton {
    position: relative;
    display: inline-block;
    width: 18%;
    height: 0;
    padding-top: 18%; /* height */
    margin-right: 0.5%;
}

.inline_player .playbutton .icon {
    /* sprite h/w ratio: 1/1 */
    position: absolute;
    width: 45%;
    height: 0;
    padding-top: 45%; /* height */
    top: 27.5%;
    left: 27.5%;
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
}

.no-svg .inline_player .playbutton .icon {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}

.inline_player .playbutton.playing .icon {
    background-position: 0 4%;
}

.inline_player .playbutton.busy .icon {
    background-image: url(../../img/playerbusy.svg);
    background-position: 50% 50%;
}

.no-svg .inline_player .playbutton.busy .icon {
    background-image: url(../../img/playerbusy_transp.gif);
}

.inline_player .progbar {
    position: relative;
    display: inline-block;
    width: 42%;
    border: solid 0.0625rem;
    border-color: transparent #fff #fff transparent;
    border-radius: 99999rem; /* max */
}

/* single-track player has no next/prev buttons, so progbar is a bit wider, roughly visually centered */
.inline_player.one-track .progbar {
    width: 44%;
}

.inline_player.one-track .time_total {
    margin-right: 20%;
}

/* 
   A note on units: starting with progbar_empty, I use rems in several places to specify
   element and border sizes. Ideally we'd use percentages for everything, but borders
   don't accept % units, and the height of progbar_empty can't be based on its parent
   because the parent doesn't have an explicit height (and can't, as it's based on the
   height of its other contents). The better unit to use here would be "vw", which is relative
   to the viewport width, but that isn't available in most browsers as of early 2012. 
   
   A note on border-radius: because the heights of some elements here are based on the heights
   of inner or outer relatives, ideally we'd use border-radius: 50% to get fully-roundend ends.
   Unfortunately, using % doesn't appear to be supported in Android 2.x. Luckily an easy hack 
   exists: just set the radius to a huge value, letting the browser pin the actual radius to 
   its maximum (half the height of the element).
   
    - sdg 2012.03.12 
 */ 

.inline_player .progbar_empty {
    position: relative;
    width: auto;
    height: 0.438rem;
    overflow: hidden;
    border: solid 0.1rem;
    border-color: rgba(0,0,0,0.2) rgba(0,0,0,0.05) rgba(0,0,0,0.05) rgba(0,0,0,0.2);
    border-radius: 99999rem; /* max */
}

/* inner shadow above the 'empty' and 'fill' content */
.inline_player .progbar_empty:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 99999rem; /* max */
    -webkit-box-shadow: inset 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    box-shadow:         inset 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
}

.inline_player .progbar_fill {
    display: block;
    height: 100%;
    width: 0;
    background: #333333;
    opacity: 0.1;
    border-radius: 99999rem; /* max */
}

/* outer thumb */
.inline_player .thumb {
    position: absolute;
    left: 0;
    top: -0.3125rem;
    border: solid 0.0625rem #afafaf;
    border-radius: 99999rem; /* max */
    cursor: pointer;
    -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    box-shadow:         0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
}

/* inner thumb */
.inline_player .thumb:after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background: #efefef;
    border: solid #fff 0.0625rem;
    border-radius: 99999rem; /* max */
}

.inline_player .time {
    display: inline-block;
    padding: 0;
    font-size: 0.625rem;
    color: rgba(0,0,0,0.5);
}

.inline_player .time.hiddenelem {
    visibility: hidden; /* reserve layout space */
}

.inline_player .time_elapsed {
    padding-right: 1%;
    text-align: right;
}

.inline_player .time_total {
    padding-left: 1%;
    text-align: left;
/*    padding-right: 1%;*/
}

.inline_player .nextprev {
    position: relative;
    display: inline-block;
    width: 10%;
    height: 0;
    padding-top: 18%; /* height */
}

.inline_player .nextprev .icon {
    /* sprite h/w ratio: 1/1 */
    position: absolute;
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    width: 40%;
    height: 0;
    padding-top: 40%; /* height */
    top: 39%;
    left: 30%;
    background-size: 100% auto;
    background-position: 0 8%;
}

.no-svg .inline_player .nextprev .icon {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}

.inline_player .prevbutton .icon {
    left: 45%;
    background-position: 0 12%;
}

.inline_player .nextprev.hiddenelem {
    opacity: 0.2;
}

/* for the single-track player, hide next/prev entirely */
.inline_player.one-track .nextprev.hiddenelem {
    display: none;    
}

.inline_player .track_info {
    margin: auto 0;
    padding: 1% 5%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    white-space: nowrap;
}

.inline_player .track_info span.title {
    padding: 0 0 1%;
}

.inline_player .track_info a {
    color: #333;
}

/* don't display the track title for one-track players */
.inline_player .title-section.hiddenelem {
    display: none;
}


/* dark */
.invertIconography .inline_player .playbutton .icon {
    background: url(../../img/mobile-sprites-dark-20120822.svg) no-repeat;    
}

.no-svg .invertIconography .inline_player .playbutton .icon {
    background-image: url(../../img/mobile-sprites-dark-20120822.png);
}

.invertIconography .inline_player .playbutton.playing .icon {
    background-position: 0 4%;
}

.invertIconography .inline_player .playbutton.busy .icon {
    background-image: url(../../img/playerbusy_dark.svg);
    background-position: 50% 50%;
}

.no-svg .invertIconography .inline_player .playbutton.busy .icon {
    background-image: url(../../img/playerbusy_mobile_dark.gif);
}

.invertIconography .inline_player .nextprev .icon {
    /* sprite h/w ratio: 1/1 */
    position: absolute;
    background: url(../../img/mobile-sprites-dark-20120822.svg) no-repeat;
    width: 40%;
    height: 0;
    padding-top: 40%; /* height */
    top: 39%;
    left: 30%;
    background-size: 100% auto;
    background-position: 0 8%;
}

.no-svg .invertIconography .inline_player .nextprev .icon {
    background-image: url(../../img/mobile-sprites-dark-20120822.png);
}

.invertIconography .inline_player .prevbutton .icon {
    left: 45%;
    background-position: 0 12%;
}

.invertIconography .inline_player .progbar {
    border-color: rgba(255,255,255,0.05) rgba(255,255,255,0.1) rgba(255,255,255,0.2) rgba(255,255,255,0.1);
}

.invertIconography .inline_player .track_info a {
    color: #777;
}

.invertIconography .inline_player .progbar_empty {
    border-color: rgba(0,0,0,0.2) rgba(0,0,0,0.05) rgba(0,0,0,0.05) rgba(0,0,0,0.2);
}

.inline_player .progbar_empty:before {
    -webkit-box-shadow: inset 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
    box-shadow:         inset 0 0.0625rem 0.125rem 0 rgba(0,0,0,0.2);
}

.inline_player .progbar_fill {
    background: #515151;
    opacity: 0.5;
}
.invertIconography .inline_player .thumb {
    -webkit-box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,1);
    box-shadow:         0 0.0625rem 0.125rem 0 rgba(0,0,0,1);
    border: solid #515151 0.0625rem;
}

.invertIconography .inline_player .thumb:after {
    background: #777;
    border: solid #333 0.0625rem;
}

.invertIconography .inline_player .time {
    color: rgba(119,119,119,0.7);
}



/***** Track list player ********************************************/

/* see "valign layout hack" above */
.track_list .play-col a {
    display: inline-block;
    width: 1.25rem;
    height: 1rem; /* 1.25rem */
    vertical-align: middle;
    padding: 0 0 0 0.625rem;
}

.track_list .play_status {
    /* sprite h/w ratio: 1/1 */
    display: block;
    width: 0.6875rem;
    height: 0.6875rem;
    margin: 0.1rem 0.1rem 0.1rem 0.1rem;
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
}

.no-svg .track_list .play_status {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}

.track_list .play_status.disabled,
.invertIconography .track_list .play_status.disabled,
.no-svg .track_list .play_status.disabled {
    background-image:none;
}


.track_list .play_status.playing {
    background-position: 0 4%;
}

/* dark */
.invertIconography .track_list .play_status {
    background: url(../../img/mobile-sprites-dark-20120822.svg) no-repeat;
}

.no-svg .invertIconography .track_list .play_status {
    background-image: url(../../img/mobile-sprites-dark-20120822.png);
}

.invertIconography .track_list .play_status.playing {
    background-position: 0 4%;
}


/***** Dialog instances **********************************/

.share-dialog li {
    text-align: center;
}


/***** Bubble message instances **************************/

.added-to-cart {
    color: #0687F5;
    border-color: #0687F5;
}

/* up arrow icon */
.added-to-cart:after {
    /* sprite h/w ratio: 1/1 */
    content: '';
    display: inline-block;
    width: 1em;
    height: 0;
    padding-top: 1em; /* height */
    margin-left: 0.5rem;
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 20%;
}

.no-svg .added-to-cart:after {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}

/* dark */
.invertIconography .added-to-cart {
    color: #0687f5;
    border-color: #0687f5;
}

/***** Misc **********************************************/

.goto-top-button.compound-button {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
}   

.goto-top-button span:first-child {
    padding-right: 1.2em; /* compensates for width of icon, below, for text centering */
}

/* up arrow icon */
.goto-top-button:before {
    /* sprite h/w ratio: 1/1 */
    content: '';
    display: inline-block;
    width: 1em;
    height: 0;
    padding-top: 1em; /* height */
    margin-right: 0.3125rem;
    background: url(../../img/mobile-sprites-dark-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 20%;
}

.no-svg .goto-top-button:before {
    background-image: url(../../img/mobile-sprites-dark-20120822.png);
}

/***** Private Streaming ******************************/


#top-banner {
    width: 100%;
    background-color: #ffffc5;
    text-align: center;
    line-height: 140%;
    padding: 1rem 0.5rem;
}

#top-banner.private-streaming {
    font-size: 0.8125rem;
    color: #999;
    font-family: Georgia, serif;
    text-transform: lowercase;
    background: #3e3d44;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3e3d44), color-stop(100%,#0a0a0a));
    background: -webkit-linear-gradient(-45deg,  #3e3d44 0%,#0a0a0a 100%);
    background: linear-gradient(-45deg,  #3e3d44 0%,#0a0a0a 100%);
}

#top-banner.private-streaming .label {
    display: inline-block;
}

#top-banner.private-streaming .title {
    text-transform: none;
    font-style: italic;
    display: inline-block;
    max-width:90%;
}


/***** Hide desktop elements ******************************/

#editDeleteCommands,
.edit-save-buttons,
.license-label,
.thumbthumb .warningBadge,
#share-buttons-list,
.bigThanks, .collect-item-actions,
#private-merch-heading, .merch-grid.private,
.merch-page #discography,
.seekText, .seekMask
{
    display: none !important;
}

/* ------------- BEGIN download_panel_phone.css --------------- */
/* Buy/download dialog and related (phone view) ---------- */

.buy-dlg {
    font-size: 0.8125rem;    
}

.buy-dlg select, .buy-dlg input.textInput {
    max-width: 95%;
}

.buy-dlg input.numeric {
    width: 3.1em;
    padding: 0 0.2em;
    color: #333;
    font-size: 1.6rem;
    text-align: right;
}

.buy-dlg #orderQuantity.numeric {
    text-align: left;
}

.buy-dlg h3 {
    margin: 0 0 0.3em;
    font-weight: bold;
}

.buy-dlg .section + .section {
    margin-top: 1em;
}

.buy-dlg .alert {
    margin: 0.3em 0 0;
}

.buy-dlg .disabled {
    color: #999;
    text-decoration: line-through;
}

.buy-dlg .warning {
    background: lightyellow;
    padding: 5px;
    margin: -5px;
}

/* ----- buttons ------------------------------- */

.buy-dlg .ft {
    padding: 0 0 0.625rem;
    text-align: left;
}

.buy-dlg .buttons-section {
    white-space: nowrap;
    clear:both;
}

.buy-dlg .buttons-section button {
    display: block; /* enables margin collapsing */
/*    min-width: 80px; */
    min-width: 7rem;
    height: 2.3em;
    margin: 0;
    padding: 0 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.8125rem;
    text-decoration: none;
    color: #fff;
    background: #4F8E25;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-weight: bold;
}

.buy-dlg .cart-button-wrapper button {
    background: #097EC6; 
}

.buy-dlg .buttons-section .ft * {
    display: inline-block;
    vertical-align: baseline;
}

.buy-dlg .buttons-section .or {
    padding: 0 0.1em;
    color: #999;
}

/* ----- paypal payment ------------------------------- */

.buy-dlg .format-section {
    color: #666;
    font-size: 0.6875rem;
}

.buy-dlg .nyp-summary {
    display: inline-block; /* don't allow this content to partially wrap; do it all-or-nothing */
    margin-top: 0.3em;     /* margin visible if it wraps */
}

.buy-dlg .price .secondary, .buy-dlg .small-text {
    color: #666;
}

.buy-dlg .display-price {
    font-size: 1.6rem;
}

.buy-dlg .fixed-price {
    font-weight: bold;
}

.buy-dlg #normal-price-wrapper {
    padding-right: 0.3em;
    font-size: 1.3rem;
    font-weight: bold;
}

.buy-dlg #shipping-summary {
    display: block;
    margin: 0.3em 0 0;
}
/* ----- purchase note ------------------------------- */

.buy-dlg .purchase-note-section {
    margin-bottom:2.5em;
}

.buy-dlg .purchase-note-section .emphasis {
    font-weight:bolder;
}

.buy-dlg .purchase-note-section #purchase-note-input {
    width:550px;
    max-width: 96%;
    font-size: 16px;
}

.buy-dlg .purchase-note-section #purchase-note-countdown {
    margin-right: 5px;
    float: right;
}

.buy-dlg .purchase-note-section #purchase-note-footer a {
    float:left;
    margin-bottom:2.5em;
}

/* ----- email payment ------------------------------- */

.buy-dlg .email-section .subsection {
    margin: 0 0 1em;
}

.buy-dlg #fan_email_address {
    width: 90%;
    margin: 0.2em 0;
}

.buy-dlg #fan_email_country {
    width: 54%; 
}

.buy-dlg #fan_email_postalcode {
    width: 34%;
    margin-left: 1%;
}

/* ----- misc ------------------------------- */

.buy-dlg #download-panel-busy {
    display: none;
    text-align: center;
}

.buy-dlg #download-panel-busy:before {
    content: '';
    display: block;
    width: 10%;
    height: 0;
    padding-top: 10%; /* height */
    margin: 1em auto;
    background: url(../../img/playerbusy.svg) no-repeat 50% 50%;
    background-size: 100% auto;
}

.no-svg .buy-dlg #download-panel-busy:before {
    background-image: url(../../img/playerbusy_transp.gif);    
}

.buy-dlg #download-panel-complete {
    display: none;
}

/* ------------- BEGIN cart_phone.css --------------- */
/* Shopping cart (phone view) ---------- */

#sidecartBody {
    background: #fff;
}

#sidecartHeader {
    padding: 4.6875%; /* 30/640 */
    text-align: center;
    background: #fff;
}

#sidecartHeader > * {
    vertical-align: middle;
}

#sidecartHeader .title {
    color: #0687F5;
    font-size: 1rem;
}

#sidecart.expanded #sidecartHeader {
    background: #fff;
}

#sidecart.expanded #sidecartHeader  .title {
    color: #888;
}

#sidecartHeader .cart-icon {
    position: absolute;
    top: auto;
    right: 1.5rem;
    width: 1.563rem;
    height: 0;
    padding-top: 1.125rem; /* height */
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 27.5%;
}

.no-svg #sidecartHeader .cart-icon {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}

#sidecartHeader .cart-number {
    position: absolute;
    top: -31%;
    left: 75%;
    min-width: 0.75rem;
    padding: 0 0.0625rem;
    background: #5ac523;
    border: 1px solid #43b214;
    border-radius: 0.1875rem;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: bold;
}

#sidecart-phone-reveal {
    display: none;
}

#sidecartContents {
    font-size: 0.8125rem;
    color: #333;
}

#sidecartContents {
    margin: 0 3.125%; /* 20/640 */
}

#sidecartContents .item {
    padding: 0.625rem 0;
    border-top: solid #e5e5e5 thin;
}

#sidecartContents .item.last {
    border-bottom: solid #e5e5e5 thin;
}

#sidecartContents .item a {
    color: black;
}

#sidecartContents .item p {
    margin: 0;
}

#sidecartContents .cartItemContents {
    position: relative;
}

#sidecartContents .cartItemContents > * {
    vertical-align: top;
}

#sidecartContents .cartItemContents .thumb {
    display: inline-block;
    width: 15%;
    height: 0;
    padding-top: 15%; /* height */
    margin: 0 2% 0 0;
    background: no-repeat; /* image url is set in template */
    background-size: 100% auto;
    border: solid #e5e5e5 thin;
}

#sidecartContents .cartItemContents .thumb.package {
    padding-top: 11.25%; /* 4:3 aspect ratio */
}

#sidecartContents .cartItemContents p {
    display: inline-block;
    width: 70%; /* to make room for thumb image and delete button */
    margin-top: -0.1em;
}

#sidecartContents .price {
    display: block;
    padding-top: 0.4em;
}

#sidecartContents .item .delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 7.5%;
    height: 0;
    padding-top: 7.5%; /* height */
    border: solid #e5e5e5 thin;
    border-radius: 0.4em;
}

#sidecartContents .item .delete span {
    display: block;
    text-indent: -9999rem;
    width: 50%;
    height: 0;
    padding-top: 50%; /* height */
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 23.87%;  
    margin-top: -77%;
    margin-left: 27.5%;
    opacity: 0.55;
}

.no-svg #sidecartContents .item .delete span {
    background-image: url(../../img/mobile-sprites-light-20120822.png);
}

#sidecartReveal {
    border-bottom: thin solid #ccc;
}

#sidecartFooter {
    margin: 1rem 3.125% 0; /* 20/640 */
    padding-bottom: 5%;
}

#sidecartFooter table#summary {
    width: 100%;
}
#sidecartFooter td, #sidecartFooter th {
    padding: 0 0.3em 0.4em 0;
    text-align: left;
}

#sidecartFooter th {
    padding-right: 0.3125rem;
    width: 13%;
    font-size: 0.875rem;
}
#sidecartFooter td {
    width: auto;
    font-size: 0.875rem;
}
#sidecartFooter td.numeric {
    width:15%;
}

#sidecartFooter .numeric {
    text-align: right;
}

#sidecartFooter .small, #sidecartFooter .currency {
    font-size: 0.8rem;
}

#sidecartFooter .total > *, #sidecartFooter .summary-notes {
    padding-top: 0.5em;
}

#sidecartFooter .total th, #sidecartFooter .total .numeric {
    font-weight: bold;
}

#sidecartFooter .summary-notes {
    text-align: center;
    font-size: 0.875rem;
    padding-bottom: 0.5rem;
}

#sidecartFooter .summary-notes > span:not(:first-child):before {
    content: " — "; /* emdash */
}

#sidecart a.buttonLink {
    display: block;
    width: 80%;
    margin: 0.625rem auto;
    line-height: 2.25rem;
    text-align: center;
    font-weight: bold;
    border: none;
    border-radius: 0.4em;
    color: #fff;
    background: #4F8E25;
    font-size: 0.8125rem;
}


/* dark */
.invertIconography #sidecartHeader {
    background: #efefef;
}


/* ------------- BEGIN popup_image_phone.css --------------- */

/* popup image viewer */

/* --- gallery structure --- */

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

.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 {
    display: inline-block;
    position: absolute;
    top: 85%;
    margin: auto;
    background: url(../../img/mobile-sprites-light-20120822.svg) no-repeat;
    background-size: 100% auto;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    z-index: 1;
}

.no-svg .popupimage_navicon {
    background-image: url(../../img/mobile-sprites-light-20120822.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;
}

.popupimage_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%;
}

.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%;
}

/* ------------- BEGIN peekaboo_text.css --------------- */
/* The more/less link is hidden by default */
.peekaboo-link {
    display: none;
}

/* For browsers which don't support CSSOM and truncate.js, enable the fallback (PeekabooText) */
.no-cssom .peekaboo-link {
    display: inline;
}
.no-cssom .peekaboo-text {
    display: none;
}