/* concatenation of: base_phone.css, footer_phone.css, dialog_phone.css, bubble_message.css, navbar_phone.css */
/* ------------- BEGIN base_phone.css --------------- */
/*
 * Fundamental styles for the phone (narrow screen) layout.
 * CSS in this file should be very general: applicable to most or all pages.
 * Avoid pixel units! Use %, em, and rem instead.
 */

/***** Reset ************************************************/

body, h1, h2, h3, h4, h5, ul, ol, li, dl, dt, dd, p, button  {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    color: #333;
}
li {
    list-style-type: none;
}
a {
    text-decoration: none;
}
img {
    border: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td, th {
    font-weight: normal;
    padding: 0;
    text-align: left;
    vertical-align: baseline;
}
button, input, select {
    max-width: 100%;
    font-size: 1rem;
}
button {
    font-family: sans-serif;
}


/***** General styles ****************************************/

html {
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 100%; /* base font size: all other font sizes should be expressed in rems or ems */
    margin: 0;
    padding: 0;
}

body {
    background: url(../../img/bg-mobile-light-20120612.gif) #f0f0f0;
}

a {
    color: #0687F5;
}

p {
    margin: 1rem 0;
    font-size: 0.8125rem;
}

.horizontal-list {
    display: inline;
}

.horizontal-list > li {
    display: inline-block;
    padding: 0 0.5em;
} 
.horizontal-list.dividers > li {
    padding: 0 0.5em 0 0.2em;
    border-right: solid thin #3f484b;
}

.horizontal-list.dividers > li:last-child {
    border-right: none;
}

ol.unstyled, ul.unstyled {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#pgBd {
    margin-bottom: 11rem; /* reserve space for the absolutely-positioned pgFt */
}

.leftMiddleColumns, .rightColumn, #pgBd > .content {
    /* Ideally we'd put this on #pgBd, but it makes a marginless customHeaderWrapper more difficult.
       Specified in rems instead of % so we can align with the left padding in #band-navbar > li a. */
    margin: 0.625rem;
}

.secondaryText {
    color: #777;
}

.notable {
    color: #c00;
}

.alert {
    color: #c00;
    font-weight: bold;
}

.base-text-color {
    color: #333;
}

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

/* dark */

body.invertIconography {
    background: url(../../img/bg-mobile-dark-20120809.gif) #1a1a1a;
}

body.invertIconography, 
.invertIconography h1, 
.invertIconography h2, 
.invertIconography h3, 
.invertIconography h4, 
.invertIconography h5, 
.invertIconography ul, 
.invertIconography ol, 
.invertIconography li, 
.invertIconography p,
.invertIconography button,
.invertIconography .base-text-color {
    color: #777;
}

.invertIconography a {
    color: #1f64ae;
}

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

.invertIconography .notable {
    color: #a30b0b;
}

.invertIconography .alert {
    color: #a30b0b;
    font-weight: bold;
}


/***** Buttons **********************************************/

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

/* dark */
.invertIconography a.buttonLink {
    color: #919191;
    background: #323232;
}

.compound-button, 
.buyItem .ft.compound-button,
.invertIconography .yui-module .compound-button  /* buttons in dialogs */
{
    display: block;
    width: 93%;
    margin: 0.625rem auto;
    color: #0687F5;
    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 {
    color: #1F64AE;
    -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);
}


/***** Banner ************************************************/

#top-banner {
    width: 100%;
    background-color: #ffffc5;
    text-align: center;
    font-size: 1rem;
    padding: 0.75rem;
    color: #999;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}


/***** Custom header **************************************/

#customHeaderWrapper > * {
    display: none;
}

div#customHeader {
    display: block;  /* overrides previous */
}

#customHeader > * {
    display: none;  /* hide desktop and other headers */
}

#customHeader > .phone-header {
    display: block; /* overrides previous */
}

.phone-header img {
    width: 100%;
}


/***** Tab bar ********************************************/

#customHeaderWrapper > #band-navbar {
    display: block;
}

#customHeaderWrapper > #band-navbar.hide-phone {
    display: none;
}

#band-navbar {
    font-size: 0;
    background-color: rgba(0, 0, 0, 0.08);
}
#band-navbar > li {
    display: inline-block;
}
#band-navbar > li a {
    display: block;
    font-size: 0.875rem;    /* 14px */
    font-weight: bold;
    color: #333;
    line-height: 2.0625rem; /* 35px - 2px(padding-top) */
    padding: 0.125rem 0.625rem 0; /* Room on the top for active border, 20 pixels on left & right */
}
#band-navbar > li a.active {
    border-top: solid 0.125rem #333;
    padding-top: 0;
}
#band-navbar > li.edit {
    display: none;
}

/* dark */
.invertIconography #band-navbar {
    background-color: rgba(0, 0, 0, 1);
}

.invertIconography #band-navbar > li a {
    color: #777;
}

.invertIconography #band-navbar > li a.active {
    border-top: solid 0.125rem #777;
}

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

.bandmember-only
{
    display: none !important;
}

/***** Contact Form ******************************/

#contactForm .tableLayout dt {
    font-size: 0.75rem;
    font-weight: bold;
}

#contactForm dl.tableLayout dt {
    width: 25%;
    margin:0;
    display: inline-block;
    text-align:right;
    padding-right:2%;
    vertical-align: top;
    margin-top: 0.25rem;
}

#contactForm dl.tableLayout dd {
    width: 67%;
    margin: 0;
    display: inline-block;

}
#contactForm dl.tableLayout dd textarea {
    height: 3rem;
}

#contactForm dl.tableLayout dd textarea, 
#contactForm dl.tableLayout dd input,
#contactForm dl.tableLayout button {
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 0.875rem;
}

#contactForm dl.tableLayout dd textarea, 
#contactForm dl.tableLayout dd input {
    width: 100%;
}

#contactForm dl.tableLayout dd p {
    margin: 0.3125rem 0 1rem;
    width: 100%;
    font-size: 0.75rem;
}

#contactForm button#contact\.send {
    background: none repeat scroll 0 0 #0687F5;
    border: thin solid #2072B8;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.4rem 1.5rem;
    margin-right: 0.5rem;
    margin-top: -1ex; /* to remove inline style of parent*/
    -webkit-border-radius: 5px;
    border-radius: 5px;

}

#contactForm button#contact\.cancel {
    border: thin solid #fff;
    color: #0687f5;
    padding: 0.4rem 0rem;
    background: #FEFEFE;
    margin-top: -1ex; /* to remove inline style of parent */
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/***** Common Widget Graphics ********************/

.bc-ui {
    background:url(../../img/_sprite-bc-ui-20130116.png);
}
/* ------------- BEGIN footer_phone.css --------------- */
/*

This file contains CSS for both the old and new phone footers. In the old case (client-side phone detection),
the footer HTML is the same for desktop vs. phone. In the new case (server-side phone detection), the footer
HTML is unique to the phone view, and therefore simpler. Eventually the old case here should be removed.  
  - sdg 2013.05.29

*/

/***** COMMON to both old and new versions **************************************/

#propOpenWrapper {
    position: absolute;
    width: 100%;
    min-height: 100%;  /* allows us to pin the footer to the bottom of viewport on short pages; see pgFt below */
}

#pgFt {
    position: absolute;
    bottom: 0;  /* for pages shorter than the viewport, pin footer to the bottom */
    width: 100%;
    padding: 1.5em 4% 2em;
    font-size: 0.8rem;
    background: #333;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

#pgFt a {
    color: #999;
}

#footer-logo {
    /* image h/w ratio: 1/6.4 */
    display: inline-block;
    width: 0;
    height: 0;
    padding-top: 4.69%; /* height */ 
    padding-left: 30%;  /* width */
    background: url(../../img/logo-white.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}
.no-svg #footer-logo {
    background-image: url(../../img/logo-white-mobile.png);
}

/***** NEW phone footer: HTML is unique to the phone view **************************************/

.pgft-phone {
    text-align: justify;
    /* see text-align-last hack below */
    -moz-text-align-last: justify;
         text-align-last: justify;

    background: #8a9295 !important;
    color: #f5f5f5 !important;
}

.pgft-phone a, .pgft-phone a:visited, .pgft-phone a:active {
    color: #f5f5f5 !important;
}

/* Hack: we want text-align-last, but as of May 2013 it's only supported in Firefox and IE. Instead, force 
   text-align to act like text-align-last by adding an invisible, second "line". Thanks to 
   http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text */
.pgft-phone .navgroup:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.pgft-phone .navgroup {
    /* The text-align-last hack adds an extra line's worth of whitespace to the bottom of the block in all browsers
       except IE. Compensate for that here by enforcing the height of the block. */
    height: 1.6em;
    line-height: 1.6em;
    margin-bottom: 1.8em;
}
.pgft-phone .navgroup:last-child {
    margin-bottom: 0;
}

.pgft-phone #footer-logo {
    position: relative;
    vertical-align: middle;
}

.pgft-phone #footer-logo a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


/***** OLD phone footer: HTML is shared with desktop view **************************************/

#pgFt-inner {
    position: relative; /* make this a positioning context for #legal */
}

#footer-logo-wrapper {
    padding-top: 3.5em; /* move this element below #legal */
    line-height: 2em;   /* breathing room, in case the text contents wrap */
    text-align: justify;
    text-align-last: justify; /* see hack below */
}

#footer-logo-wrapper > * {
    vertical-align: middle;
}

#footer-logo-wrapper a {
    color: #eee;
}

#footer-logo .hiddenAccess {
    display: none;
}

#phone-view-switcher-wrapper {
    display: inline-block;
}

#legal {
    /* raise this element above #footer-logo-wrapper */
    position: absolute;
    top: 0;
    width: 100%;
    
    text-align: justify;
    text-align-last: justify; /* see hack below */
}

/* Hack: we want text-align-last, but it's not widely supported as of Feb 2012. Instead, force 
   text-align to act like text-align-last by adding an invisible, second "line". Thanks to 
   http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text */
#footer-logo-wrapper:after, 
#legal:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

/* Cancel justification between words in child elements */
#footer-logo-wrapper > *, 
#legal > * {
    text-justify: none;    /* not yet supported as of Feb 2012 */
    display: inline-block; /* hack: same effect */
}

#pgFt .static-content,
#legal #login-artist,
#legal #site-status {
    display: none;
}

/* dark */

.invertIconography #pgFt {
    background: #000;
}

.invertIconography #pgFt a {
    color: #777;
}

/* ------------- BEGIN dialog_phone.css --------------- */
/*
 * Dialog CSS: phone view.
 *
 * This file is for the base dialog CSS only: don't put rules for specific dialogs here.
 */

.yui-dialog {
    position: absolute;
    /* the top coord is set by YUI Dialog */
    left: 2.5% !important; /* override YUI Dialog's horizontal centering */
    right: 2.5%;
    overflow-x: hidden;
    z-index: 10;
    background: #fff;
    -webkit-box-shadow: 0 0 1rem 0 #404040;
    box-shadow:         0 0 1rem 0 #404040;
}

.yui-dialog .hd {
    padding: 0.625rem 0.625rem;
    background: #5e5e5e;
}

.yui-dialog .hd .content {
    margin-right: 3.5rem; /* make room for the Close button, which for some reason isn't inside the .hd */
    letter-spacing: 0.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: bold;
}

.yui-dialog .bd {
    padding: 0.625rem;
}

.yui-dialog .ft {
    padding: 0 0.625rem 0.625rem;
    text-align: right;
}

.yui-dialog .ft button {
    display: inline-block;
    min-width: 5rem;
    min-height: 2rem;
    margin-right: 0.5rem;
    border: none;
    background: #999;
    color: #fff;
    border-radius: 0.3rem;
}

.yui-dialog .ft .button-group > :last-child button {
    margin-right: 0;
}

.yui-dialog .ft button[disabled] {
    opacity: 0.5;
}

.yui-dialog .container-close {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.7rem;
    background: #717171;
    color: #bfbfbf;
    border-radius: 0.2rem;
}

.yui-dialog .container-close:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
    background: url(../../img/mobile-sprites-dark-20130118.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 23.87%; 
    vertical-align: text-bottom;
}

.no-svg .yui-dialog .container-close:before {
    background-image: url(../../img/mobile-sprites-dark-20130118.png);
}

body.nouveau-masked {
    position: relative;
}

.masked .mask, .nouveau-masked .nouveau-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.6;
    /* disable tap highlight on the mask itself */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 2;
}

/* ------------- BEGIN bubble_message.css --------------- */
/*
 * Bubble message base.
 *
 * Currently used for mobile only, but could be used for desktop.
 *
 * This file is for the base bubble CSS only: don't put rules for specific message instances here.
 */

.bubble-msg {
    display: none;
    position: fixed;
    top: 45%;
    left: 50%;
    z-index: 5;
}

.bubble-msg-inner {
    position: relative;
    left: -50%;
    padding: 0.5em 1em;
    color: #000;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    background: #fff;
    border-radius: 0.5em;
    border: solid thin #000;
    -webkit-box-shadow: 0 0.2rem 0.6rem 0 rgba(0,0,0,0.4);
    box-shadow:         0 0.2rem 0.6rem 0 rgba(0,0,0,0.4);
}

/* ------------- BEGIN navbar_phone.css --------------- */

#navbar-wrapper {
    display: none;
}

.has-navbar-phone #navbar-wrapper {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* border-top: solid 5px #848484; */
    background-color: #ddd;
    background-image: none;
    border-bottom: dotted 1px #aaa;
}

#navbar {
    position: relative;
    height: 43px;
    width: 100%;
    margin: 0 auto;
    color: white;
    font-size: 0.85rem;
}

#navbar-wrapper.extended,
#navbar.extended,
#navbar li.item .extended,
#navbar li.item.extended,
#navbar li.search.extended {
    display: none!important;
}

#navbar #collection-main {
    display: none;
}

#navbar a {
    color: #408294;
}

#navbar > ul.horizontal {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
}

#navbar > ul.horizontal > li {
    float: left;
    padding: 0;
    margin: 0;
}

#navbar > ul.horizontal > li > a,
#navbar > ul.horizontal > li.message,
#navbar > ul.horizontal > li > .disabled,
#navbar > ul.horizontal > li > ul.menu > li:first-child > a,
#header-margin-logo {
    display: block;
    height: 43px;
    line-height: 43px;
    padding: 0 15px;
    /* border-top: solid 5px #848484; */
    
    /* CSS 3 transition animations */
    transition: background 0.1s ease-out;
    -webkit-transition: background 0.1s ease-out;
    -moz-transition: background 0.1s ease-out;
}

#navbar > ul.horizontal > li > ul.menu > li:first-child > a {
    padding: 0 15px 0 10px;
}

#navbar > ul.horizontal > li > div.disabled {
    color: #aab3a9;
    cursor: default;
}

#navbar > ul.horizontal > li > div.message {
    color: #888;
    cursor: default;
}

#navbar .header-logo {
    background: url('../../img/bandcamp-logo-bc-color.svg') 30% 50% no-repeat;
    text-indent: -9999rem;
    width: 42px;
    height: 43px;
    background-size: 60%;
}

.no-svg #navbar .header-logo {
    background-image: url('../../img/bandcamp-logo-bc-color.png');
}

#navbar .divider {
    border-left: 1px solid #AAA;
    border-right: 1px solid #EEE;
    width: 0;
    height: 43px;
    display:inline-block;
}

#navbar li#account-note {
    display: none;
}

/* dropdown menu */

#navbar ul.menu {
    z-index:100;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navbar ul.menu > li {
    margin: 0;
    padding: 0;
}

#navbar ul.menu > li:first-child > a {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#navbar ul.menu > li.item {
    background: url(../../img/navbar-border.png) #f1f1f1 repeat-x left bottom;
    display: none;
}
#navbar ul.menu > li.item:last-child {
    background-image:none;   
}

#navbar ul.menu > li.item > a,
#navbar ul.menu > li.item > span {
    display: block;
    height: 43px;
    line-height: 43px;
    padding: 0 15px;
}


#navbar ul.menu > li > a > .left {
    display: block;
    float: left;
}

#navbar ul.menu > li > a > .left > .userpic {
    display: block;
    float: left;
    background-color: #fff;
    margin:8px 10px 0 0;
    width: 25px;
    height: 25px;    
    border: solid 1px rgba(0,0,0,.2);
}

#navbar ul.menu > li > a > .center {
    display: inline-block;
    float:left;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left:0.1em;
}

#navbar ul.menu > li:first-child > a > .right {
    display:inline-block;
    float:left;
    width: 9px;
    height: 5px;
    overflow: hidden;
    margin:20px 0 0 7px;
    background-position:0 -1px;
}

#site-nav {
    position: absolute;
    left: 0;
}

#user-nav {
    position: absolute;
    right: 0;
}

#user-nav .menu {
    display: none;
}

#legal {
    float: right;
}

#navbar #user-nav ul.menu > li {
    min-width: 125px;
}

#navbar #user-nav ul.menu > li.item > a {
    padding-left: 47px; 
}

#navbar > ul.horizontal > li.trim-left a,
#navbar > ul.horizontal > li.trim-left div {
    padding-left: 0.3rem;
}
#navbar > ul.horizontal > li.trim-right a,
#navbar > ul.horizontal > li.trim-right div {
    padding-right: 0.3rem;
}

/* cart icon */

#navbar #cart-item {
    display: none;
}

#navbar #cart-item.expanded {
    background: white;
}

#navbar #cart-item a {
    display: inline-block;
    vertical-align: top;
}

.cart-icon {
    display: inline-block;
    vertical-align: middle;
}

.cart-icon .inner {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.1rem; /* tweak */
    text-indent: -9999rem;
    background: url(../../img/mobile-sprites-light-20121102.svg) no-repeat;
    background-size: 100% auto;
    background-position: 0 28%;
}

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

.cart-number {
    padding: 0.1em 0.4em;
    background-color: #5ac523;
    font-size: 0.6875rem;
    font-weight: bold;
    text-align: center;
    border-radius: 0.1875rem;
    color: #fff;
}