/* ==========================================================================
   Reset
   ========================================================================== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
    vertical-align: top;
}

/* Normalise display of HTML5 elements across browsers */
article,aside,figcaption,figure,footer,header,hgroup,nav,section {
    display:block
}

/* Add styling not present in older browsers*/
mark {
    background: #fff59b;
    color: #000;
    padding: 2px 4px;
}

input, select {
    vertical-align: baseline;
}

textarea {
    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
}

input[type=text],
input[type=password],
textarea {
    font-size: 12px;
    background: #fff;
    color: #000;
    border: 1px solid #bbb;
    padding: 3px;
}

table {
    font-size: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border:0;
}

img {
    -ms-interpolation-mode: bicubic;
}

address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal;
}

ol,ul {
    list-style:none;
}

ol.numbered {
    list-style: decimal;
    margin-left: 20px;
}

caption,th {
    text-align:left;
}

h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}

q:before,q:after {
    content:'';
}

abbr,acronym {
    border:0;
}

strong, .strong, b, h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

.norm {
    font-weight: normal;
}

button {
    cursor: pointer;
    overflow: visible;
}

/* Remove inner padding and border in Firefox 4+. */
/* https://github.com/necolas/normalize.css/blob/master/normalize.css#L379 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input.submit {
    cursor: pointer;
}

/* Hide the non-javascript version for people with JS  */
.js .nonJs,
.js .non-js {
display: none;
}

/* Hide the javascript version for people without javascript */
.no-js .needsJs,
.no-js .needs-js {
display: none;
}

/* IE6 */

.ie6 {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

.ie6 .transparent_png {
    behavior: url('/pngbehavior2.htc');
}

/* Tools */

.clearit:after,
#content:after,
.clearitItems li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearit,
.clearitItems li,
#content,
#page {
    zoom: 1;
}

.ie6 .clearit {
    height: 1%;
}

.clear {
    clear: both;
}

.inline {
    display: inline;
}

.pushLeft {
    float: left;
    margin-right: 1em;
}

.pushRight {
    float: right;
    margin-left: 1em;
}

.unorphan {
    white-space: nowrap;
}

/* Hide visually, but keep available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  &  h5bp.com/v*/
.rm,
.visuallyHidden,
/* Hide JavaScript only content visually for users with JS disabled,
   but keep it available for screenreaders (see .no-js .needs-js) */
.no-js .rm-no-js,
/* Hide JavaScript fallbacks visually for users with JS enabled,
   but keep them available for screenreaders (see .js .non-js) */
.js .rm-js {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    z-index: -1;
}

/* Image replacement, hide text, show a background image, keep text for screen readers
   http://nicolasgallagher.com/another-css-image-replacement-technique/ */
.ir {
    font: 0/0 a;
    text-shadow: none;

    /* Forcefully hide text. !important is necessary for Opera which has a minimum font size setting */
    color: transparent !important;
}

/* Hide from everything and everyone, including screen readers
   Be sure this is what you mean. */
.hide {
    display: none;
}

/* Hide only in the case of javascript, overwrites the former */
.no-js .hide--js-only {
    display: block;
}

.styledText ul,
.bbcode ul,
#faqContent ul {
    list-style: disc;
}

.styledText ol,
.bbcode ol,
#faqContent ol {
    list-style: decimal;
}

.styledText li,
.bbcode li,
#faqContent li {
    margin-left: 2em;
}

/* Body styles */

body {
    color: #1b1b1b;
    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    font-size: 13px;
    background: #e3e3e3;

    /* defense against rogue clickable skins */
    cursor: default !important;
}

#page {
    font-size: 12px;
    line-height: 1.5;
    clear: both;
    position: relative;
}

/* Headers */
h1,
.h1 {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    line-height: 1.2em;
}

.l-970 h1,
.l-970 .h1 {
    font-size: 24px;
    margin-bottom: 15px;
}


h2,
.h2 {
    font-size: 14px;
    color: #D51007;
    font-weight: bold;
    line-height: 1.5em;
}

.l-970 h2,
.l-970 .h2 {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #1b1b1b;
    padding-top: 10px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
    border-style: dotted;
}

.lfmBlack h2,
.lfmBlack .h2 {
    color: #000;
}

h2 img {
    vertical-align: text-bottom;
}

.l-970 h3,
.l-970 .h3 {
    font-size: 18px;
    line-height: 1.333333;
    font-weight: bold;
    color: #D51007;
    padding-top: 12px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
    border-style: dotted;

    margin-bottom: 0;
}

.l-970 h3 a,
.l-970 .h3 a {
    color: #D51007;
}

.lfmBlack .l-970 .h3,
.lfmBlack .l-970 h3 a {
    color: #1b1b1b;
}

.h3-subtitle {
    font-size: 16px;
}


.l-970 h4,
.l-970 .h4 {
    font-size: 16px;
    line-height: 1.375;
}


h5,
.h5 {
    font-size: 11px;
    color: #000;
    font-weight: bold;
}


/* BASE CSS */

.lite,
a.lite,
a.light {
    color: #666;
}

.very-lite,
a.very-lite {
    color: #999;
}

/* links */

a {
    color: #0187c5;
    text-decoration: none;
}

a:active {
    outline: none;
}

a:hover {
    color: #0187c5;
    text-decoration: underline;
}

a.text {
    color: #000;
}

.inherit,
a.inherit,
a.inherit:hover,
a.inherit:focus {
    color: inherit !important;
}

a.underline,
.underline a {
    text-decoration: underline;
}

/* misc */

sub,
sup {
    font-size: 0.75em;
    line-height: 0.1;
}

.shoutCount {
    color: #666;
}

#page .hint {
    color: #999;
}

.nowrap {
    white-space: nowrap;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

small {
    font-size: 10px;
}

/* Notices  */
/* e.g. Friend finder pref, verify user  */

.notice,
.noticeBar {
    padding: 5px 8px;
    background: #fffcca;
    border: solid 1px #fff200;
}

.theme-whittle .noticeBar {
    margin-left: auto;
    margin-right: auto;
    max-width: 938px;
    padding-left: 20px;
    padding-right: 20px;
}

.notice {
    border-radius: 5px;
    margin-bottom: 1em;
}

.noticeBar {
    margin: 10px 0;
    font-size: 12px;
    line-height: 1.5em;
}

/* Extends .noticeBar  */
.dismissable {
    padding-right: 30px;
    position: relative;
}

.dismissable a.close {
    position: absolute;
    right: 5px;
    top: 5px;
    display: none;
}

.dismissable:hover a.close {
    display: block;
}

/* ==========================================================================
   Messaging
   ========================================================================== */

.fiflufi .rightCol .memo {
    font-size: 13px;
    line-height: 18px;
}

.memo {
    padding: 18px 20px;
    background: #eef5fc;
    border-radius: 3px;
}

.memo p:last-child {
    margin-bottom: 0;
}

.memo--small {
    padding: 6px 10px;
    font-size: 12px;
}

.memo--link {
    display: block;
}

.memo--link:hover,
.memo--link:focus {
    text-decoration: none;
    background-color: #deebf9;
}

.memo--link:active {
    background-color: #cfe2f6;
}

.memo--link p,
.memo--link:hover p,
.memo--link:focus p {
    color: #1b1b1b;
}

.memo--warn,
.memo-warn {
    background: #ffeacc;
}

.memo--grey,
.memo-grey {
    background-color: #eeeeee;
}

.memo--grey-with-spinner,
.memo-grey--with-spinner {
    position: relative;
    padding-left: 47px;
}

.memo--grey-with-spinner:before,
.memo-grey--with-spinner:before {
    content: "";

    position: absolute;
    top: 20px;
    left: 18px;
    width: 16px;
    height: 16px;

    background-repeat: no-repeat;
    background-image: url(https://cdn.last.fm/flatness/spinner_16x16_000000_on_eeeeee.gif);
}

/* New user CTAs
   ========================================================================== */

/* Setup scrobbling
   ========================================================================== */

.setup-scrobbling {
    background-image: url(https://cdn.last.fm/flatness/home/setup_scrobbling.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding-bottom: 80px;
}

.setup-scrobbling--wide {
    background-image: url(https://cdn.last.fm/flatness/home/setup_scrobbling_wide.png);
    padding-bottom: 36px;
}

/* Friend finder
   ========================================================================== */

.find-friends {
    background-image: url(https://cdn.last.fm/flatness/home/find_friends.png);
    background-repeat: no-repeat;
    background-position: 100% 25px;
    padding-right: 110px;
}

/* No content messaging
   ========================================================================== */

.no-content-message {
    color: #aaa;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}

.no-content-message h2 {
    font-size: 18px;
}

/* .content hack: overrides .content p margin set above */
.no-content-message--extra-spacing,
.content .no-content-message--extra-spacing {
    margin-top: 36px;
    margin-bottom: 36px;
}

.no-content-message--extra-spacing-with-padding,
.content .no-content-message--extra-spacing-with-padding {
    padding-top: 36px;
    padding-bottom: 36px;
}

.no-content-message--error {
    padding-left: 90px;
    padding-right: 90px;
}

.no-content-message--error:before {
    content: '';
    display: block;
    background: url('https://cdn.last.fm/flatness/responsive/warning_220_g3.png') no-repeat center;
    margin-bottom: 0;
    height: 180px;
    opacity: 0.7;
}

.backgroundsize .no-content-message--error:before {
    background-image: url(https://cdn.last.fm/flatness/responsive/warning_220_g3@2x.png);

    /* https://developer.mozilla.org/en-US/docs/CSS/background-size */
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
}

.no-content-message--error--full-width {
    padding-left: 0;
    padding-right: 0;
}

.no-content-message--small {
    font-size: 12px;
    line-height: 18px;
}

/* Beta badge
   ========================================================================== */

.beta-badge {
    color: #fff;
    background: #e31b23;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    font-style: normal;
    text-transform: uppercase;
}


/* ==========================================================================
   Common patterns
   ========================================================================== */

.full-width-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.align-right {
    text-align: right;
}

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

/* Vertically centred
   ========================================================================== */

/* Don't forget to set a height elsewhere */
.vertically-center-wrapper {
    display: table;
    width: 100%;
}

.vertically-center {
    display: table-cell;
    vertical-align: middle;
}

/* List patterns
   ========================================================================== */
/* .inline would be preferable here, but this is already overloaded */

.inline-items li {
    display: inline;
}

/* Dotted, as it's a middot, not a bullet */
.inline-items--dotted li:after {
    content: " · ";
    padding: 0 3px;
}

.inline-items--dotted li:last-child:after {
    content: "";
}

/* Common decorations
   ========================================================================== */

.rounded {
    border-radius: 3px;
}

.inset {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

/* Rounded background cover
   ========================================================================== */

/*
 * Example HTML
 *
 * <a href="#" class="rounded-cover" style="background-image: …">
 *     <img src="" />
 * </a>
 *
 * See also .text-over-image.
 */

.rounded-cover {
    background-size: cover;
    border-radius: 3px;
}

.rounded-cover img {
    display: none;
}

/* No image fallback
   ========================================================================== */

.no-image {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ccc;
}

.no-image--user-40 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_user_40.png); }
.no-image--user-g1 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_user_60_g1.png); }
.no-image--user-g2 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_user_140_g2.png); }
.no-image--user-g3 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_user_220_g3.png); }
.no-image--user-g4 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_user_300_g4.png); }

.no-image--artist-40 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_artist_40.png); }
.no-image--artist-g1 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_artist_60_g1.png); }
.no-image--artist-g2 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_artist_140_g2.png); }
.no-image--artist-g3 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_artist_220_g3.png); }
.no-image--artist-g4 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_artist_300_g4.png); }

.no-image--album-40 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_album_40.png); }
.no-image--album-g1 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_album_60_g1.png); }
.no-image--album-g2 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_album_140_g2.png); }
.no-image--album-g3 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_album_220_g3.png); }
.no-image--album-g4 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_album_300_g4.png); }

.no-image--track-40 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_track_40.png); }
.no-image--track-g1 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_track_60_g1.png); }
.no-image--track-g2 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_track_140_g2.png); }
.no-image--track-g3 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_track_220_g3.png); }
.no-image--track-g4 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_track_300_g4.png); }

.no-image--group-40 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_group_40.png); }
.no-image--group-g1 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_group_60_g1.png); }
.no-image--group-g2 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_group_140_g2.png); }
.no-image--group-g3 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_group_220_g3.png); }
.no-image--group-g4 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_group_300_g4.png); }

.no-image--label-40 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_label_40.png); }
.no-image--label-g1 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_label_60_g1.png); }
.no-image--label-g2 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_label_140_g2.png); }
.no-image--label-g3 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_label_220_g3.png); }
.no-image--label-g4 { background-image: url(https://cdn.last.fm/flatness/responsive/12/noimage/default_label_300_g4.png); }

/* Cover any sized block with an image
   ========================================================================== */

/*
 * Example HTML, link wrapping optional
 * Image provided either as background inline style or img tag
 * Container size must be defined elsewhere.
 *
 * <a href="#">
 *     <div class="cover-image" [style="background-image…"]>
 *         <img src="" class="cover-image-image" />
 *     </div>
 * </a>
 */

.cover-image {
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    position: relative;

    /* Always fills container */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cover-image--inset {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.cover-image-image {
    display: none;
}

/* IE8 doesn't support background-size: cover. Show and scale <img> instead.
   This is a slightly less good crop of the image.
   This check should really use feature detection */
.ie7 .cover-image-image,
.ie8 .cover-image-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    /* Cover element */
    min-width: 100%;
    min-height: 100%;
}

/* The square no content image shouldn't be distorted, fit into space and fill with grey
   Applied when image src matches "noimage" */
.cover-image--no-content {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ccc;
}

/* IE8 doesn't support background-size: contain. */
.ie7 .cover-image--no-content .cover-image-image,
.ie8 .cover-image--no-content .cover-image-image {
    position: static;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}

/* Text over cover image
   ========================================================================== */

/*
 * Example HTML, link wrapping optional, uses .cover-image
 * Container size must be defined elsewhere.
 *
 * <a href="#">
 *     <div class="cover-image" [style="background-image…"]>
 *         <img src="" class="cover-image-image" />
 *         <div class="text-over-image">
 *             <span class="text-over-image-text">Title</span> [<br />]
 *             [<span class="text-over-image-text text-over-image-text--secondary">Optional Additional Text</span>]
 *         </div>
 *     </div>
 * </a>
 */

.text-over-image {
    position: absolute;
    left: 0;

    /* Line breaks will fill element upwards */
    bottom: 0;
}

.text-over-image-text {
    background: #333;
    color: #fff;
    padding: 3px 6px;
    display: inline-block;
}

/* Should follow a line break */
.text-over-image-text--secondary {
    background-color: #71b7e6;
}

/* Text over image with block modifier spans the whole width of the container
   by default
   ========================================================================== */

.text-over-image--block {
    right: 0;
}

.text-over-image--block .text-over-image-text {
    display: block;
    padding: 12px 10px;
}

/* Avatar
   ========================================================================== */

.user-avatar {
    position: relative;
    width: 100%;
    height: 100%;
}

.user-avatar-badge {
    position: absolute;
    top: -3px;
    left: -3px;

    width: 6px;
    height: 6px;
    border: 1px solid #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.user-avatar-badge--subscriber {
    background-color: #000;  /* Black */
}

.user-avatar-badge--staff {
    background-color: #f21c06; /* Red */
}

.user-avatar-badge--alumni {
    background-color: #6633cc; /* Purple */
}

.user-avatar-badge--moderator {
    background-color: #ffa500;  /* Yellow */
}

/* Media object. See https://github.com/stubbornella/oocss/tree/master/core/media
   ========================================================================== */

/*
 * Example HTML:
 *
 * <div class="media [media--modifier]">
 *    <a href="#" class="media-pull-[left|right]">…</a>
 *    <div class="media-body"></div>
 * </div>
 */

.media {
    display: block;
    margin-bottom: 18px;

    /* Clear container */
    overflow: hidden;
}

.media--overflow-visible {
    overflow: visible;
}

.media--overflow-visible:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.media-pull-left {
    float: left;
    margin-right: 20px;
}

.media-pull-right {
    float: right;
    margin-left: 20px;
}

/* Clear body */
.media-body {
    overflow: hidden;
}

.media-body--overflow-visible {
    overflow: visible;
}


/* Link hook, and media link hook
   ========================================================================== */

/*
 * The pulled link references a link in the main body, but markup means they
 * cannot be part of the same link element. Apply a simple text-decoration to the
 * reference link. Will apply to all child reference links. Be careful with nesting.
 *
 * Reference is one directional.
 * Container must immediately follow link hook. (either .media-body as enforced by the
 * pattern or link-reference-container if generic)
 *
 * Example HTML:
 *
 * <div class="media [media--modifier]">
 *    <a href="#" class="media-pull-[left|right] media-link-hook">…</a>
 *    <div class="media-body">
 *        <a href="#" class="media-link-reference"></a>
 *    </div>
 * </div>
 *
 * <a href="#" class="link-hook">…</a>
 * <div class="link-reference-container">
 *     <a href="#" class="link-reference"></a>
 * </div>
 */

.media-link-hook:hover + .media-body .media-link-reference {
    text-decoration: underline;
}

.link-hook:hover + .link-reference-container .link-reference {
    text-decoration: underline;
}

/* Media used with an icon.
   ========================================================================== */

/* No bottom margin and smaller internal margins */
.media--icon {
    margin-bottom: 0;
}

.media--icon .media-pull-left {
    margin-right: 10px;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.textinput {
    display: inline-block;
    padding: 10px 15px;
    background-color: #fff;
    color: inherit;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    line-height: 18px;
    border: 1px solid #999;
    margin-bottom: 6px;
}

.textinput--small {
    padding: 5px 10px;
    font-size: 12px;
}

.textinput--full-width {
    width: 100%;
}

.radiolist .radiolist {
    margin-top: 6px;
    margin-bottom: 0;
    margin-left: 23px;
}

.radiolist li {
    margin-bottom: 6px;
}

.radiolist input {
    margin-right: 10px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * Example HTML
 *
 * <a href="#" class="btn [btn--modifier]">Some action</a>
 * <button class="btn [btn--modifier]">Some action</button>
 */

.btn {
    border-radius: 3px;
    display: inline-block;
    padding: 11px 15px;
    color: inherit;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    background-color: #dedede;
    background-image:      -o-linear-gradient(#e8e8e8, #d5d5d5); /* Light grey to grey */
    background-image:     -ms-linear-gradient(#e8e8e8, #d5d5d5);
    background-image:    -moz-linear-gradient(#e8e8e8, #d5d5d5);
    background-image: -webkit-linear-gradient(#e8e8e8, #d5d5d5);
    background-image:         linear-gradient(#e8e8e8, #d5d5d5);
    box-shadow: #b6b6b6 0 -1px 0 inset, rgba(0, 0, 0, 0.1) 0 1px 4px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

/* Reset input and button to match plain text btn styles */

input.btn {
    border-width: 0;
    cursor: pointer;
    font-size: 100%;
    white-space: normal;
}

input.btn,
button.btn {
    text-align: left;
    line-height: 18px;
}


/* Block button */
.btn--block {
    display: block;
    text-align: center;
}

.btn:hover {
    text-decoration: none;
    color: inherit;
}

.btn:hover,
.btn:focus,
.btn.is-focused {
    background: #d3d3d3;
    background-image:      -o-linear-gradient(#dddddd, #cacaca); /* Darker*/
    background-image:     -ms-linear-gradient(#dddddd, #cacaca);
    background-image:    -moz-linear-gradient(#dddddd, #cacaca);
    background-image: -webkit-linear-gradient(#dddddd, #cacaca);
    background-image:         linear-gradient(#dddddd, #cacaca);
    box-shadow: #b6b6b6 0 -1px 0 inset, rgba(0, 0, 0, 0.14) 0 1px 4px;
}

.btn:active,
.btn.is-pressed {
    background: #cacaca;
    background-image:      -o-linear-gradient(#cacaca, #dddddd); /* Darker again */
    background-image:     -ms-linear-gradient(#cacaca, #dddddd);
    background-image:    -moz-linear-gradient(#cacaca, #dddddd);
    background-image: -webkit-linear-gradient(#cacaca, #dddddd);
    background-image:         linear-gradient(#cacaca, #dddddd);
    box-shadow: #b6b6b6 0 -1px 0 inset, rgba(0, 0, 0, 0.1) 0 1px 4px;
}

.is-disabled {
    cursor: default;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    pointer-events: none;
}


/* Small button
   ========================================================================== */

.btn--small {
    padding: 6px 10px;
    font-size: 12px;
}

/* Rounded button
   ========================================================================== */

.btn--rounded {
    border-radius: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

.btn--rounded.btn--small {
    padding-left: 15px;
    padding-right: 15px;
}

/* Primary button
   ========================================================================== */

.btn--primary {
    color: #fff;
    background: #3f3f3f;
    background-image:         linear-gradient(#4b4b4b, #333333); /* Dark grey to almst black */
    background-image:      -o-linear-gradient(#4b4b4b, #333333);
    background-image:     -ms-linear-gradient(#4b4b4b, #333333);
    background-image:    -moz-linear-gradient(#4b4b4b, #333333);
    background-image: -webkit-linear-gradient(#4b4b4b, #333333);
    box-shadow: #212121 0 -1px 0 inset, rgba(0, 0, 0, 0.15) 0 1px 4px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary.is-focused {
    color: #fff;
    background: #2f2f2f;
    background-image:      -o-linear-gradient(#383838, #262626); /* Darker */
    background-image:     -ms-linear-gradient(#383838, #262626);
    background-image:    -moz-linear-gradient(#383838, #262626);
    background-image: -webkit-linear-gradient(#383838, #262626);
    background-image:         linear-gradient(#383838, #262626);
    box-shadow: #212121 0 -1px 0 inset, rgba(0, 0, 0, 0.2) 0 1px 4px;
}

.btn--primary:active,
.btn--primary.is-pressed {
    background: #262626;
    background-image:      -o-linear-gradient(#262626, #383838); /* Darker again */
    background-image:     -ms-linear-gradient(#262626, #383838);
    background-image:    -moz-linear-gradient(#262626, #383838);
    background-image: -webkit-linear-gradient(#262626, #383838);
    background-image:         linear-gradient(#262626, #383838);
    box-shadow: #212121 0 -1px 0 inset, rgba(0, 0, 0, 0.15) 0 1px 4px;
}


/* Branded button (using reds from the ticket logo)
   ========================================================================== */

.btn--brand {
    color: #fff;
    background-color: #cb1e24;
    background-image:         linear-gradient(#e31b23, #b32024); /* Light red to red */
    background-image:      -o-linear-gradient(#e31b23, #b32024);
    background-image:     -ms-linear-gradient(#e31b23, #b32024);
    background-image:    -moz-linear-gradient(#e31b23, #b32024);
    background-image: -webkit-linear-gradient(#e31b23, #b32024);
    box-shadow: #651214 0 -1px 0 inset, rgba(0, 0, 0, 0.15) 0 1px 4px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}

.btn--brand:hover,
.btn--brand:focus,
.btn--brand.is-focused {
    color: #fff;
    background: #ad191f;
    background-image:      -o-linear-gradient(#c1171e, #991b1f); /* Darker */
    background-image:     -ms-linear-gradient(#c1171e, #991b1f);
    background-image:    -moz-linear-gradient(#c1171e, #991b1f);
    background-image: -webkit-linear-gradient(#c1171e, #991b1f);
    background-image:         linear-gradient(#c1171e, #991b1f);
    box-shadow: #651214 0 -1px 0 inset, rgba(0, 0, 0, 0.2) 0 1px 4px;
}

.btn--brand:active,
.btn--brand.is-pressed {
    background: #991b1f;
    background-image:      -o-linear-gradient(#991b1f, #c1171e); /* Darker again */
    background-image:     -ms-linear-gradient(#991b1f, #c1171e);
    background-image:    -moz-linear-gradient(#991b1f, #c1171e);
    background-image: -webkit-linear-gradient(#991b1f, #c1171e);
    background-image:         linear-gradient(#991b1f, #c1171e);
    box-shadow: #651214 0 -1px 0 inset, rgba(0, 0, 0, 0.15) 0 1px 4px;
}

/* On button (using blue)
   ========================================================================== */

.btn--brand-blue {
    color: #fff;
    background-color: #0187c5;
    background-image:      -o-linear-gradient(#0193D6, #017BB4); /* Light blue to blue */
    background-image:     -ms-linear-gradient(#0193D6, #017BB4);
    background-image:    -moz-linear-gradient(#0193D6, #017BB4);
    background-image: -webkit-linear-gradient(#0193D6, #017BB4);
    background-image:         linear-gradient(#0193D6, #017BB4);
    box-shadow: #01608c 0 -1px 0 inset, rgba(0, 0, 0, 0.15) 0 1px 4px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
}

.btn--brand-blue:hover,
.btn--brand-blue:focus,
.btn--brand-blue.is-focused {
    color: #fff;
    background: #0179b1;
    background-image:      -o-linear-gradient(#0184c0, #016ea2); /* Darker */
    background-image:     -ms-linear-gradient(#0184c0, #016ea2);
    background-image:    -moz-linear-gradient(#0184c0, #016ea2);
    background-image: -webkit-linear-gradient(#0184c0, #016ea2);
    background-image:         linear-gradient(#0184c0, #016ea2);
    box-shadow: #01608c 0 -1px 0 inset, rgba(0, 0, 0, 0.2) 0 1px 4px;
}

.btn--brand-blue:active,
.btn--brand-blue.is-pressed {
    background: #016ea2;
    background-image:      -o-linear-gradient(#016ea2, #0184c0); /* Darker again */
    background-image:     -ms-linear-gradient(#016ea2, #0184c0);
    background-image:    -moz-linear-gradient(#016ea2, #0184c0);
    background-image: -webkit-linear-gradient(#016ea2, #0184c0);
    background-image:         linear-gradient(#016ea2, #0184c0);
    box-shadow: #01608c 0 -1px 0 inset, rgba(0, 0, 0, 0.15) 0 1px 4px;
}


/* White button
   ========================================================================== */

.btn--white {
    background: #f0f0f0;
    background-image:         linear-gradient(#ffffff, #f6f6f6); /* White to light grey */
    background-image:      -o-linear-gradient(#ffffff, #f6f6f6);
    background-image:     -ms-linear-gradient(#ffffff, #f6f6f6);
    background-image:    -moz-linear-gradient(#ffffff, #f6f6f6);
    background-image: -webkit-linear-gradient(#ffffff, #f6f6f6);
    box-shadow: #ebebeb 1px  0 0 inset,
                #ebebeb -1px 0 0 inset,
                #ebebeb 0 1px 0 inset,
                #cccccc 0 -1px 0 inset,
                rgba(0, 0, 0, 0.06) 0 1px 4px;
}

.btn--white:hover,
.btn--white:focus,
.btn--white.is-focused {
    background: #eaeaea;
    background-image:         linear-gradient(#ffffff, #eaeaea); /* Darker */
    background-image:      -o-linear-gradient(#ffffff, #eaeaea);
    background-image:     -ms-linear-gradient(#ffffff, #eaeaea);
    background-image:    -moz-linear-gradient(#ffffff, #eaeaea);
    background-image: -webkit-linear-gradient(#ffffff, #eaeaea);
    box-shadow: #ebebeb 1px  0 0 inset,
                #ebebeb -1px 0 0 inset,
                #ebebeb 0 1px 0 inset,
                #cccccc 0 -1px 0 inset,
                rgba(0, 0, 0, 0.08) 0 1px 4px;
}

.btn--white:active,
.btn--white.is-pressed {
    background: #e3e3e3;
    background-image:         linear-gradient(#f6f6f6, #ffffff); /* Darker again */
    background-image:      -o-linear-gradient(#f6f6f6, #ffffff);
    background-image:     -ms-linear-gradient(#f6f6f6, #ffffff);
    background-image:    -moz-linear-gradient(#f6f6f6, #ffffff);
    background-image: -webkit-linear-gradient(#f6f6f6, #ffffff);
    box-shadow: #ebebeb 1px  0 0 inset,
                #ebebeb -1px 0 0 inset,
                #ebebeb 0 1px 0 inset,
                #cccccc 0 -1px 0 inset,
                rgba(0, 0, 0, 0.06) 0 1px 4px;
}

/* Moderation button
   ========================================================================== */

.btn--moderation {
    background: #999;
    color: #fff;
    box-shadow: none;
    text-shadow: none;
}

.btn--moderation:hover,
.btn--moderation:focus {
    background: #777;
    color: #fff;
}

.btn--moderation:active {
    background: #666;
}

/* Buttons structure
   ========================================================================== */

.btn--full-width {
    width: 100%;
}

/* Use the button layout for some text, but don't give it any colours.
   Useful for lining up links with buttons */

.simulate-btn-spacing {
    display: inline-block;
    padding: 11px 0;
}

.simulate-btn-spacing--small {
    padding: 6px 0;
    font-size: 12px;
}

/* Stacked buttons
   ========================================================================== */

.btn--stacked {
    border-radius: 0;
    width: 100%;
}
.first .btn--stacked {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.last .btn--stacked {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}


/* Toggle
   ========================================================================== */

.js .toggle-container .toggle-target {
    display: none;
}

.js .toggle-container.active .toggle-target {
    display: block;
}

/* Handle nested toggles */

.js .toggle-container .toggle-container .toggle-target {
    display: none;
}

.js .toggle-container .toggle-container.active .toggle-target {
    display: block;
}

/* Toggle list
   ========================================================================== */

.toggle-list {
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
    border-radius: 3px;
}

ul.toggle-list {
    margin-bottom: 0;
}

.toggle-list li {
    display: inline;
}

/* Drop shadow is provided by the wrapping .toggle-list, so
 * just include the bottom inset shadow.
 *
 * box-shadow is also used for the separator highlight
 */

.toggle-list .btn--toggle-left,
.toggle-list .btn--toggle-middle,
.toggle-list .btn--toggle-right {
    box-shadow: #b6b6b6 0 -1px 0 inset,
                #efefef 1px 0 inset;
    border-right: 1px solid #c3c3c3;
}

.toggle-list .btn--brand-blue {
    box-shadow: #01608c 0 -1px 0 inset,
                #016391 -1px 0 inset,
                #016391 1px 0 inset;
}

/* Left toggle */

.toggle-list .btn--toggle-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #b6b6b6 0 -1px 0 inset;
}

.toggle-list .btn--toggle-left.btn--brand-blue {
    box-shadow: #01608c 0 -1px 0 inset,
                #016391 -1px 0 inset;
}

/* Middle toggle */

.toggle-list .btn--toggle-middle {
    border-radius: 0;
}

/* Right toggle */

.toggle-list .btn--toggle-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: #b6b6b6 0 -1px 0 inset,
                #efefef 1px 0 inset;
    border-right: none;
}

.toggle-list .btn--toggle-right.btn--brand-blue {
    box-shadow: #01608c 0 -1px 0 inset,
                #016391 1px 0 inset;
}

/* Remove the separator highlight when to the right of the blue button */

.toggle-list-current + li .btn {
    box-shadow: #b6b6b6 0 -1px 0 inset;
}

/* Dropdown button
   ========================================================================== */

.dropdown-btn-wrapper {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 4px;
    border-radius: 3px;
}

.dropdown-btn-wrapper:hover,
.dropdown-btn-wrapper:focus,
.dropdown-btn-wrapper.is-focused {
    box-shadow: rgba(0, 0, 0, 0.14) 0 1px 4px;
}

.dropdown-btn-wrapper--primary {
    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
}

.dropdown-btn-wrapper--primary:hover,
.dropdown-btn-wrapper--primary:focus,
.dropdown-btn-wrapper--primary.is-focused {
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px;
}

/* Drop shadow is provided by the wrapping .dropdown-btn-wrapper, so
   just include the bottom inset shadow */

.dropdown-btn-wrapper .btn {
    box-shadow: #b6b6b6 0 -1px 0 inset;
}

.dropdown-btn-wrapper .btn--white {
    box-shadow: #ebebeb 1px 0 0 inset,
                #ebebeb -1px 0 0 inset,
                #ebebeb 0 1px 0 inset,
                #cccccc 0 -1px 0 inset;
}

.dropdown-btn-wrapper .btn--primary {
    box-shadow: #212121 0 -1px 0 inset;
}

.dropdown-btn {
    display: block;
}

.active .dropdown-btn {
    border-radius: 3px 3px 0 0;
    z-index: 5000001; /* Keep the button above the menu when open */
}

.dropdown-btn-menu {
    display: none;
    position: absolute;
    z-index: 5000000;
    background-color: #f6f6f6;
    margin-left: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 6px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    box-shadow: rgba(0,0,0,0.1) 0 3px 5px;
    border: 1px solid #d9d9d9;
    /* Tuck the top border under the button so it only shows when the
       menu is wider than the button */
    margin-top: -1px;
}

.dropdown-btn-menu--dark {
    background: #333;
    border-color: #111;
    box-shadow: rgba(0,0,0,0.15) 0 3px 5px;
    color: #fff;
}

.dropdown-btn-menu--small {
    font-size: 12px;
}

.dropdown-btn-menu-item {
    line-height: 30px;
    color: #000;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.dropdown-btn-menu-item:hover {
    background-color: #d9e5f0;
    text-decoration: none;
    color: #000;
}

.dropdown-btn-menu--dark .dropdown-btn-menu-item {
    text-shadow: rgba(0,0,0,0.5) 0 -1px 0;
    color: #fff;
}

.dropdown-btn-menu--dark .dropdown-btn-menu-item:hover {
    background-color: #2e4f9c;
}

.dropdown-btn-section-title {
    color: #a1a1a1;
    font-size: 0.9em;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.dropdown-btn-menu-divider {
    border-bottom: 1px solid #d9d9d9;
    margin: 6px 0;
}

.dropdown-btn-menu--dark .dropdown-btn-menu-divider {
    border-bottom: 1px solid #242424;
    box-shadow: 0 1px 0 0 #3D3D3D;
}

.dropdown-btn-menu-item--selected,
.dropdown-btn-menu-item--selected:hover,
.dropdown-btn-menu-item--selected:focus {
    background: #333333;
    color: #fff;
}

/* Social dropdown items (share button) */
.dropdown-btn-menu-item.social-btn {
    padding-left: 39px;
    display: block;
}

/* User action buttons - handle stretching buttons
   ========================================================================== */

.user-actions {
    position: relative;
    display: table;
    width: 100%;
}

.user-actions-btn-wrap {
    display: table-cell;
}

.user-actions-btn-wrap--add {
    width: 100%;
}

.user-actions.with-station-button .user-actions-btn-wrap--add {
    width: auto;
}

.user-actions .btn {
    margin-right: 6px;
    margin-bottom: 6px;
}

.user-actions--play {
    width: 100%;
}

.user-actions .stationbutton {
    width: 100%;
    margin-right: 0;
}


/* Social buttons (Facebook, Twitter, Google)
   ========================================================================== */

.social-btn {
    position: relative;
    min-width: 21px; /* 16px + 5px spacing */
    display: inline-block;
}

.social-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 39px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url(https://cdn.last.fm/flatness/responsive/12/social_16_sprite.png);
    background-position: 10px 5px;
}

.social-btn--facebook:before {
    background-position: 10px -25px;
}

.social-btn--google:before {
    background-position: 10px -55px;
}

.social-btn--lastfm:before {
    background-position: 10px -85px;
}

.social-btn--email:before {
    background-position: 10px -115px;
}

/* Share button social icon positioning */
.social-icons-wrapper {
    position: absolute;
    right: 62px;
    top: -8px;
    display: none; /* CATA-537 Google content experiment */
}

/* CATA-537 Google content experiment */
.share-icons--enabled .social-icons-wrapper {
    display: block;
}

/* Button mimicking a link
   ========================================================================== */

.mimic-link {
	background: none;
    border: none;
	color: #0187c5;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    margin: 0;
}

.mimic-link:focus,
.mimic-link:hover {
    text-decoration: underline;
}



/* ==========================================================================
   Icons (and icons + buttons, icons + memo)
   ========================================================================== */

/* Icon positioning
   ========================================================================== */

.iconleft,
.iconright {
    position: relative;
}

.iconleft {
    padding-left: 30px;
}

.iconright {
    padding-right: 30px;
}

.iconleft--small {
    padding-left: 20px;
}

.iconright--small {
    padding-right: 20px;
}

.iconleft:before,
.iconright:after {
    content: "";

    position: absolute;
    top: 50%;

    width: 20px;
    height: 40px;

    margin-top: -20px;

    background-repeat: no-repeat;
    background-position: 0 0;
}

.iconleft:before {
    left: 0;
}

.iconright:after {
    right: 0;
}

.iconleft--small:before,
.iconright--small:after,
.btn--small.iconleft:before,
.btn--small.iconright:after,
.memo--small.iconleft:before,
.memo--small.iconright:after {
    width: 16px;
    height: 30px;
    margin-top: -15px;
}

.iconleft--tiny:before,
.iconright--tiny:after,
.btn--tiny.iconleft:before,
.btn--tiny.iconright:after {
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

/* Icon sprites
   ========================================================================== */

.iconleft:before,
.iconright:after {
    background-image: url(https://cdn.last.fm/flatness/responsive/12/icons_18_sparse_dark_sprite.png);
}

/* Small icons */
/* Also use small set for small buttons */

.iconleft--small:before,
.iconright--small:after,
.btn--small.iconleft:before,
.btn--small.iconright:after,
.btn--tiny.iconleft:before,
.memo--small.iconleft:before,
.memo--small.iconright:after {
    background-image: url(https://cdn.last.fm/flatness/responsive/12/icons_14_sparse_dark_sprite.png);
}

/* Light icons */
/* We always want light icons on dark elements, and vice versa */

.iconleft--light:before,
.iconright--light:after,
.btn--primary.iconleft:before,
.btn--primary.iconright:after,
.btn--brand.iconleft:before,
.btn--brand.iconright:after,
.btn--brand-blue.iconleft:before,
.btn--brand-blue.iconright:after,
.btn--moderation.iconleft:before,
.btn--moderation.iconright:after {
    background-image: url(https://cdn.last.fm/flatness/responsive/12/icons_18_sparse_light_sprite.png);
}

/* Small light icons */

.iconleft--small.iconleft--light:before,
.iconright--small.iconright--light:after,
.btn--small.btn--primary.iconleft:before,
.btn--small.btn--primary.iconright:after,
.btn--small.btn--brand.iconleft:before,
.btn--small.btn--brand.iconright:after,
.btn--small.btn--brand-blue.iconleft:before,
.btn--small.btn--brand-blue.iconright:after,
.btn--small.btn--moderation.iconleft:before,
.btn--small.btn--moderation.iconright:after,
.btn--small.btn--header.iconleft:before,
.btn--small.btn--header.iconright:after,
.btn--tiny.btn--primary.iconleft:before,
.btn--tiny.btn--brand.iconleft:before,
.btn--tiny.btn--brand-blue.iconleft:before,
.btn--tiny.btn--moderation.iconleft:before {
    background-image: url(https://cdn.last.fm/flatness/responsive/12/icons_14_sparse_light_sprite.png);
}

/* Small colour icons */

.iconleft--small.iconleft--colour:before,
.iconright--small.iconright--colour:after {
    background-image: url(https://cdn.last.fm/flatness/responsive/12/icons_12_colour_sprite.png);
}

/* Memo icons */

.iconleft--memo:before,
.iconright--memo:after {
    background-image: url('https://cdn.last.fm/flatness/responsive/sparse/1/feedback_icons.png');
}

.iconleft--small.iconleft--memo:before,
.iconright--small.iconright--memo:after,
.memo--small.iconleft--memo:before,
.memo--small.iconright--memo:after {
    background-image: url('https://cdn.last.fm/flatness/responsive/sparse/1/feedback_icons_12.png');
}

/* Icon name to sprite position mapping
   ========================================================================== */

/* Big sprite. top = -30 * i + 10 */

.iconleft--love:before          , .iconright--love:after          { background-position: 0  10px; }
.iconleft--broken-love:before   , .iconright--broken-love:after   { background-position: 0 -20px; }
.iconleft--add:before           , .iconright--add:after           { background-position: 0 -50px; }
.iconleft--play:before          , .iconright--play:after          { background-position: 0 -80px; }
.iconleft--tag:before           , .iconright--tag:after           { background-position: 0 -110px; }
.iconleft--artist:before        , .iconright--artist:after        { background-position: 0 -140px; }
.iconleft--right:before         , .iconright--right:after         { background-position: 0 -170px; }
.iconleft--left:before          , .iconright--left:after          { background-position: 0 -200px; }
.iconleft--up:before            , .iconright--up:after            { background-position: 0 -230px; }
.iconleft--down:before          , .iconright--down:after          { background-position: 0 -260px; }
.iconleft--ecommerce:before     , .iconright--ecommerce:after     { background-position: 0 -290px; }
.iconleft--user:before          , .iconright--user:after          { background-position: 0 -320px; }
.iconleft--download:before      , .iconright--download:after      { background-position: 0 -350px; }
.iconleft--share:before         , .iconright--share:after         { background-position: 0 -380px; }
.iconleft--question:before      , .iconright--question:after      { background-position: 0 -410px; }
.iconleft--labs:before          , .iconright--labs:after          { background-position: 0 -440px; }
.iconleft--delete:before        , .iconright--delete:after        { background-position: 0 -470px; }
.iconleft--thumbs-up:before     , .iconright--thumbs-up:after     { background-position: 0 -500px; }
.iconleft--thumbs-down:before   , .iconright--thumbs-down:after   { background-position: 0 -530px; }
.iconleft--search:before        , .iconright--search:after        { background-position: 0 -560px; }
.iconleft--calendar:before      , .iconright--calendar:after      { background-position: 0 -590px; }
.iconleft--globe:before         , .iconright--globe:after         { background-position: 0 -620px; }
.iconleft--refresh:before       , .iconright--refresh:after       { background-position: 0 -680px; }
.iconleft--external:before      , .iconright--external:after      { background-position: 0 -710px; } /* Missing form the sprite image for now */
.iconleft--delete-tiny:before   , .iconright--delete-tiny:after   { background-position: 0 -710px; } /* Missing form the sprite image for now */

/* Small sprite. Weiredly based around 25/26 - you might have to tweak manually */

.iconleft--small.iconleft--love:before         , .memo--small.iconleft--love:before          , .btn--small.iconleft--love:before           , .btn--tiny.iconleft--love:before           , .iconright--small.iconright--love:after         , .memo--small.iconright--love:after         , .btn--small.iconright--love:after        { background-position: 0 7px; }
.iconleft--small.iconleft--broken-love:before  , .memo--small.iconleft--broken-love:before   , .btn--small.iconleft--broken-love:before    , .btn--tiny.iconleft--broken-love:before    , .iconright--small.iconright--broken-love:after  , .memo--small.iconright--broken-love:after  , .btn--small.iconright--broken-love:after { background-position: 0 -19px; }
.iconleft--small.iconleft--add:before          , .memo--small.iconleft--add:before           , .btn--small.iconleft--add:before            , .btn--tiny.iconleft--add:before            , .iconright--small.iconright--add:after          , .memo--small.iconright--add:after          , .btn--small.iconright--add:after         { background-position: 0 -45px; }
.iconleft--small.iconleft--play:before         , .memo--small.iconleft--play:before          , .btn--small.iconleft--play:before           , .btn--tiny.iconleft--play:before           , .iconright--small.iconright--play:after         , .memo--small.iconright--play:after         , .btn--small.iconright--play:after        { background-position: 0 -71px; }
.iconleft--small.iconleft--tag:before          , .memo--small.iconleft--tag:before           , .btn--small.iconleft--tag:before            , .btn--tiny.iconleft--tag:before            , .iconright--small.iconright--tag:after          , .memo--small.iconright--tag:after          , .btn--small.iconright--tag:after         { background-position: 0 -96px; }
.iconleft--small.iconleft--artist:before       , .memo--small.iconleft--artist:before        , .btn--small.iconleft--artist:before         , .btn--tiny.iconleft--artist:before         , .iconright--small.iconright--artist:after       , .memo--small.iconright--artist:after       , .btn--small.iconright--artist:after      { background-position: 0 -123px; }
.iconleft--small.iconleft--right:before        , .memo--small.iconleft--right:before         , .btn--small.iconleft--right:before          , .btn--tiny.iconleft--right:before          , .iconright--small.iconright--right:after        , .memo--small.iconright--right:after        , .btn--small.iconright--right:after       { background-position: 0 -149px; }
.iconleft--small.iconleft--left:before         , .memo--small.iconleft--left:before          , .btn--small.iconleft--left:before           , .btn--tiny.iconleft--left:before           , .iconright--small.iconright--left:after         , .memo--small.iconright--left:after         , .btn--small.iconright--left:after        { background-position: 0 -175px; }
.iconleft--small.iconleft--up:before           , .memo--small.iconleft--up:before            , .btn--small.iconleft--up:before             , .btn--tiny.iconleft--up:before             , .iconright--small.iconright--up:after           , .memo--small.iconright--up:after           , .btn--small.iconright--up:after          { background-position: 0 -200px; }
.iconleft--small.iconleft--down:before         , .memo--small.iconleft--down:before          , .btn--small.iconleft--down:before           , .btn--tiny.iconleft--down:before           , .iconright--small.iconright--down:after         , .memo--small.iconright--down:after         , .btn--small.iconright--down:after        { background-position: 0 -227px; }
.iconleft--small.iconleft--ecommerce:before    , .memo--small.iconleft--ecommerce:before     , .btn--small.iconleft--ecommerce:before      , .btn--tiny.iconleft--ecommerce:before      , .iconright--small.iconright--ecommerce:after    , .memo--small.iconright--ecommerce:after    , .btn--small.iconright--ecommerce:after   { background-position: 0 -253px; }
.iconleft--small.iconleft--user:before         , .memo--small.iconleft--user:before          , .btn--small.iconleft--user:before           , .btn--tiny.iconleft--user:before           , .iconright--small.iconright--user:after         , .memo--small.iconright--user:after         , .btn--small.iconright--user:after        { background-position: 0 -279px; }
.iconleft--small.iconleft--download:before     , .memo--small.iconleft--download:before      , .btn--small.iconleft--download:before       , .btn--tiny.iconleft--download:before       , .iconright--small.iconright--download:after     , .memo--small.iconright--download:after     , .btn--small.iconright--download:after    { background-position: 0 -304px; }
.iconleft--small.iconleft--share:before        , .memo--small.iconleft--share:before         , .btn--small.iconleft--share:before          , .btn--tiny.iconleft--share:before          , .iconright--small.iconright--share:after        , .memo--small.iconright--share:after        , .btn--small.iconright--share:after       { background-position: 0 -331px; }
.iconleft--small.iconleft--question:before     , .memo--small.iconleft--question:before      , .btn--small.iconleft--question:before       , .btn--tiny.iconleft--question:before       , .iconright--small.iconright--question:after     , .memo--small.iconright--question:after     , .btn--small.iconright--question:after    { background-position: 0 -357px; }
.iconleft--small.iconleft--labs:before         , .memo--small.iconleft--labs:before          , .btn--small.iconleft--labs:before           , .btn--tiny.iconleft--labs:before           , .iconright--small.iconright--labs:after         , .memo--small.iconright--labs:after         , .btn--small.iconright--labs:after        { background-position: 0 -382px; }
.iconleft--small.iconleft--delete:before       , .memo--small.iconleft--delete:before        , .btn--small.iconleft--delete:before         , .btn--tiny.iconleft--delete:before         , .iconright--small.iconright--delete:after       , .memo--small.iconright--delete:after       , .btn--small.iconright--delete:after      { background-position: 0 -409px; }
.iconleft--small.iconleft--thumbs-up:before    , .memo--small.iconleft--thumbs-up:before     , .btn--small.iconleft--thumbs-up:before      , .btn--tiny.iconleft--thumbs-up:before      , .iconright--small.iconright--thumbs-up:after    , .memo--small.iconright--thumbs-up:after    , .btn--small.iconright--thumbs-up:after   { background-position: 0 -434px; }
.iconleft--small.iconleft--thumbs-down:before  , .memo--small.iconleft--thumbs-down:before   , .btn--small.iconleft--thumbs-down:before    , .btn--tiny.iconleft--thumbs-down:before    , .iconright--small.iconright--thumbs-down:after  , .memo--small.iconright--thumbs-down:after  , .btn--small.iconright--thumbs-down:after { background-position: 0 -460px; }
.iconleft--small.iconleft--search:before       , .memo--small.iconleft--search:before        , .btn--small.iconleft--search:before         , .btn--tiny.iconleft--search:before         , .iconright--small.iconright--search:after       , .memo--small.iconright--search:after       , .btn--small.iconright--search:after      { background-position: 0 -486px; }
.iconleft--small.iconleft--calendar:before     , .memo--small.iconleft--calendar:before      , .btn--small.iconleft--calendar:before       , .btn--tiny.iconleft--calendar:before       , .iconright--small.iconright--calendar:after     , .memo--small.iconright--calendar:after     , .btn--small.iconright--calendar:after    { background-position: 0 -512px; }
.iconleft--small.iconleft--globe:before        , .memo--small.iconleft--globe:before         , .btn--small.iconleft--globe:before          , .btn--tiny.iconleft--globe:before          , .iconright--small.iconright--globe:after        , .memo--small.iconright--globe:after        , .btn--small.iconright--globe:after       { background-position: 0 -538px; }
.iconleft--small.iconleft--refresh:before      , .memo--small.iconleft--refresh:before       , .btn--small.iconleft--refresh:before        , .btn--tiny.iconleft--refresh:before        , .iconright--small.iconright--refresh:after      , .memo--small.iconright--refresh:after      , .btn--small.iconright--refresh:after     { background-position: 0 -591px; }
.iconleft--small.iconleft--external:before     , .memo--small.iconleft--external:before      , .btn--small.iconleft--external:before       , .btn--tiny.iconleft--external:before       , .iconright--small.iconright--external:after     , .memo--small.iconright--external:after     , .btn--small.iconright--external:after    { background-position: 0 -617px; }
.iconleft--small.iconleft--delete-tiny:before  , .memo--small.iconleft--delete-tiny:before   , .btn--small.iconleft--delete-tiny:before    , .btn--tiny.iconleft--delete-tiny:before    , .iconright--small.iconright--delete-tiny:after  , .memo--small.iconright--delete-tiny:after  , .btn--small.iconright--delete-tiny:after { background-position: 0 -650px; }
.iconleft--small.iconleft--info:before         , .memo--small.iconleft--info:before          , .btn--small.iconleft--info:before           , .btn--tiny.iconleft--info:before           , .iconright--small.iconright--info:after         , .memo--small.iconright--info:after         , .btn--small.iconright--info:after        { background-position: 0 -695px; }

/* Love has an additional 'is-loved' state that applies the broken heart on hover */

.iconleft--love.is-loved:hover:before,
.iconleft--love.is-loved:focus:before,
.iconright--love.is-loved:hover:after,
.iconright--love.is-loved:focus:after {
    background-position: 0 -20px;
}

.iconleft--small.iconleft--love.is-loved:hover:before,
.iconleft--small.iconleft--love.is-loved:focus:before,
.iconright--small.iconright--love.is-loved:hover:after,
.iconright--small.iconright--love.is-loved:focus:after {
    background-position: 0 -19px;
}

/* The 'is-just-loved' state stops the broken heart hover state being applied after it has been loved */

.iconleft--love.is-just-loved:hover:before,
.iconleft--love.is-just-loved:focus:before,
.iconright--love.is-just-loved:hover:after,
.iconright--love.is-just-loved:focus:after {
    background-position: 0 10px;
}

.iconleft--small.iconleft--love.is-just-loved:hover:before,
.iconleft--small.iconleft--love.is-just-loved:focus:before,
.iconright--small.iconright--love.is-just-loved:hover:after,
.iconright--small.iconright--love.is-just-loved:focus:after {
    background-position: 0 7px;
}

/* 'dropdown' is used instead of 'down' as it has up and down states, @see DropDownMenu JS Module */

.iconright--dropdown:after {
    background-position: 0 -260px;
}

.iconright--small.iconright--dropdown:after,
.btn--small.iconright--dropdown:after {
    background-position: 0 -227px;
}

.active .iconright--dropdown:after {
    background-position: 0 -230px;
}

.active .iconright--small.iconright--dropdown:after,
.active .btn--small.iconright--dropdown:after {
    background-position: 0 -200px;
}

/* Memo icons */

.iconleft--warning:before,
.iconright--warning:after {
    background-position: 0 -50px;
}

.iconleft--error:before,
.iconright--error:after {
    background-position: 0 -20px;
}

.iconleft--success:before,
.iconright--success:after {
    background-position: 0 10px;
}

.iconleft--small.iconleft--warning:before,
.iconleft--small.iconright--warning:after,
.memo--small.iconleft--warning:before,
.memo--small.iconright--warning:after {
    background-position: 0 -45px;
}

.iconleft--small.iconleft--error:before,
.iconleft--small.iconright--error:after,
.memo--small.iconleft--error:before,
.memo--small.iconright--error:after {
    background-position: 0 -19px;
}

.iconleft--small.iconleft--success:before,
.iconleft--small.iconright--success:after,
.memo--small.iconleft--success:before,
.memo--small.iconright--success:after {
    background-position: 0 8px;
}

/* Icons on buttons
   ========================================================================== */

.btn.iconleft {
    padding-left: 40px;
}

.btn.iconright {
    padding-right: 40px;
}

.btn--small.iconleft {
    padding-left: 30px;
}

.btn--small.iconright {
    padding-right: 30px;
}

.btn--rounded.iconleft {
    padding-left: 45px;
}

.btn--rounded.btn--small.iconleft {
    padding-left: 35px;
}

.btn.iconleft:before {
    left: 10px;
}

.btn.iconright:after {
    right: 10px;
}

.btn--small.iconleft:before {
    left: 7px;
}

.btn--small.iconright:after {
    right: 7px;
}

.btn--rounded.iconleft:before {
    left: 15px;
}

.btn--rounded.btn--small.iconleft:before {
    left: 12px;
}

/* Icons on memos
   ========================================================================== */

.memo.iconleft {
    padding-left: 50px;
}

.memo.iconright {
    padding-right: 50px;
}

.memo.iconleft:before {
    left: 15px;
}

.memo.iconright:after {
    right: 15px;
}

.memo--small.iconleft {
    padding-left: 30px;
}

.memo--small.iconleft:before {
    left: 7px;
}

.memo--small.iconright {
    padding-right: 30px;
}

.memo--small.iconright:after {
    right: 7px;
}

/* Icons in dropdown menus
   ========================================================================== */

.dropdown-btn-menu-item.iconleft--small {
    padding-left: 33px;
}
.dropdown-btn-menu-item.iconleft--small:before {
    left: 10px;
}

/* Icon only buttons
   ========================================================================== */

/* basically hides the text by making zero width, zero line height and with a non
   existant font family, also removes text shadow if any has been supplied */
.btn--icon-only {
    font: 0/0 a;
    text-shadow: none;

    /* Forcefully hide text. !important is necessary for Opera which has a minimum font size setting */
    color: transparent !important;

    vertical-align: top;

    /* Warning IE8 doesn't combine border-box and min-width
       http://stackoverflow.com/questions/9508262/min-height-min-width-doesnt-respect-box-sizing-in-some-browsers */
    width: 40px;
    height: 40px;
    min-width: 0;
}

.btn--small.btn--icon-only {
    width: 30px;
    height: 30px;
}

.btn--tiny.btn--icon-only {
    width: 18px;
    height: 18px;
    padding: 0;
}

.btn--icon-only span {
    color: transparent !important;
}

.btn--rounded.btn--icon-only.iconleft:before {
    left: 10px;
}

.btn--rounded.btn--small.btn--icon-only.iconleft:before {
    left: 7px;
}

.btn--rounded.btn--tiny.btn--icon-only.iconleft:before {
    left: 1px;
}

.btn--icon-only.iconleft,
.btn--icon-only.iconright,
.btn--rounded.btn--icon-only.iconleft,
.btn--rounded.btn--icon-only.iconright {
    padding-left: 0;
}


/* Lazylazyloading
   ========================================================================== */

.needs-to-be-lazylazyloaded {
    display: none;
}

.lazylazyloading-container .needs-to-be-lazylazyloaded {
    display: inline;
}

/* ==========================================================================
 * Searchin'
 * ========================================================================== */

.search-autocomplete {
    position: relative;
    display: inline-block;
}

.search-submit {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: 0;
    height: 100%;
    background: none;
    opacity: 0.5;
    width: 35px;

    /* Legacy pages do not have a button reset,
       we need one here, for the header. */
    border: 0;
}

.search-submit:hover,
.search-submit:focus {
    opacity: 1;
}

.search-submit:before {
    left: 5px;
}

.search-progress {
    width: 16px;
    height: 16px;
    display: none;
    z-index: 1;
    position: absolute;
}


/* Main style */

.search-autocomplete--main .search-box {
    border-radius: 50px;
    padding: 6px 10px;
    border: 1px solid #2c2c2c;
    width: 119px;
    padding-right: 30px;
    background: #fff;
    color: #333;
    box-shadow: inset rgba(0,0,0,0.1) 0 -3px 6px,
                inset rgba(0,0,0,0.2) 0 1px 5px,
                #5e5e5e 0 1px 0;
}

.search-autocomplete--main .search-submit {
    width: 30px;
}

.search-autocomplete--main .search-submit:before {
    left: 3px;
}

.search-autocomplete--main .search-progress {
    top: 6px;
    right: 9px;
    background-image: url("https://cdn.last.fm/flatness/spinners/spinner_f2f2f2_000000.gif");
}


/* Structure */

html {
    width: 100%;
}

body {
    width: 100%;
}

/* ==========================================================================
   Responsive grid : 960 pixels fixed, 12 columns
   ========================================================================== */

/*
 * Example HTML:
 *
 * <div class="r [r--modifier]">
 *     <section class="g4 [g--modifier]"></section>
 *     <ul class="g8 g--padded"></ul>
 * </div>
 *
 * Apply cell styles without a defined width:
 * <div class="g"></div>
 */

/* Standard grid widths */
.g1 { width: 60px; }
.g2 { width: 140px; }
.g3 { width: 220px; }
.g4 { width: 300px; }
.g5 { width: 380px; }
.g6 { width: 460px; }
.g7 { width: 540px; }
.g8 { width: 620px; }
.g9 { width: 700px; }
.g10 { width: 780px; }
.g11 { width: 860px; }
.g12 { width: 940px; }

/* Grid elements
 * Use .g as an arbitrary width grid element */
.g, .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
    margin-left: 10px;
    margin-right: 10px;
    float: left;
    max-width: 100%;
}

/* Prevent double margin bug in IE6 - http://www.positioniseverything.net/explorer/doubled-margin.html */
.ie6 .g, .ie6 .g1, .ie6 .g2, .ie6 .g3, .ie6 .g4, .ie6 .g5, .ie6 .g6, .ie6 .g7, .ie6 .g8, .ie6 .g9, .ie6 .g10, .ie6 .g11, .ie6 .g12 {
    display: inline;
}

/* Row class clears floats and accounts for extra left and right margins. Rows are optional. */
.r {
    margin-left: -10px;
    margin-right: -10px;
}

/* Use the clearfix clearing method to clear.
   Overflow:hidden creates too many problems. We want overflow visible by default. */
.r:after,
.g:after,
.g1:after,
.g2:after,
.g3:after,
.g4:after,
.g5:after,
.g6:after,
.g7:after,
.g8:after,
.g9:after,
.g10:after,
.g11:after,
.g12:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Expand right to the edge of a .content container
 * This might not work if rows are nested */
.r--full-bleed {
    margin-left: -19px;
    margin-right: -19px;
    padding-left: 9px;
    padding-right: 9px;
}

/* Occasionally we wish to order from right to left, usually for a
 * better source order. Can apply to row or individual cell */
.r--reverse > .g,
.r--reverse > .g1,
.r--reverse > .g2,
.r--reverse > .g3,
.r--reverse > .g4,
.r--reverse > .g5,
.r--reverse > .g6,
.r--reverse > .g7,
.r--reverse > .g8,
.r--reverse > .g9,
.r--reverse > .g10,
.r--reverse > .g11,
.r--reverse > .g12,
.g--reverse {
    float: right;
}

/* Occasionally we wish to pad rather than set margins */
.g--padded {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
}

/* ==========================================================================
   Responsive grid collapses columns as page width decreases
   ========================================================================== */

/*@media only screen and (max-width: 1020px) {

    .content {
       max-width: 860px;
    }

    .g12 {
        width: 860px;
    }
}

@media only screen and (max-width: 940px) {

    .content {
       max-width: 780px;
    }

    .g11,
    .g12 {
        width: 780px;
    }
}

@media only screen and (max-width: 860px) {

    .content {
       max-width: 700px;
    }

    .g10,
    .g11,
    .g12 {
        width: 700px;
    }
}

@media only screen and (max-width: 780px) {

    .content {
       max-width: 620px;
    }

    .g9,
    .g10,
    .g11,
    .g12 {
        width: 620px;
    }

}

@media only screen and (max-width: 700px) {

    .content {
       max-width: 540px;
    }

    .g8,
    .g9,
    .g10,
    .g11,
    .g12 {
        width: 540px;
    }
}

@media only screen and (max-width: 620px) {

    .content {
       max-width: 460px;
    }

    .g7,
    .g8,
    .g9,
    .g10,
    .g11,
    .g12 {
        width: 460px;
    }
}

@media only screen and (max-width: 540px) {

    .content {
       max-width: 380px;
    }

    .g6,
    .g7,
    .g8,
    .g9,
    .g10,
    .g11,
    .g12 {
        width: 380px;
    }

    .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
        float: none;
        display: block;
        width: auto;
    }

}

@media only screen and (max-width: 460px) {

    .content {
        max-width: 300px;
    }

    .page-wrapper {
        padding-left: 5px;
        padding-right: 5px;
    }

    .g3 {
        margin: 0 10px;
        float: none;
        display: block;
        width: auto;
    }

    .r--reverse > .g,
    .r--reverse > .g1,
    .r--reverse > .g2,
    .r--reverse > .g3,
    .r--reverse > .g4,
    .r--reverse > .g5,
    .r--reverse > .g6,
    .r--reverse > .g7,
    .r--reverse > .g8,
    .r--reverse > .g9,
    .r--reverse > .g10,
    .r--reverse > .g11,
    .r--reverse > .g12,
    .g--reverse {
        float: none;
    }
}

@media only screen and (max-width: 380px) {

    .content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .r--full-bleed {
        margin-left: -10px;
        margin-right: -10px;
    }

}

*/


/* ==========================================================================
   Vertical layout
   ========================================================================== */

.add-vertical-margins,
.add-bottom-margin {
    margin-bottom: 18px !important;
}

.add-vertical-margins,
.add-top-margin {
    margin-top: 18px !important;
}

.add-right-margin {
    margin-right: 20px !important;
}

.add-left-margin {
    margin-left: 20px !important;
}

.remove-vertical-margins,
.remove-bottom-margin {
    margin-bottom: 0 !important;
}

.remove-vertical-margins,
.remove-top-margin {
    margin-top: 0 !important;
}

.remove-left-margin {
    margin-left: 0 !important;
}


/* ==========================================================================
   Legacy page layouts
   Below here be monsters.
   ========================================================================== */

body #page {
    margin: 0 auto;
    width: 980px;
    padding: 0 10px;
    position: relative;
}

#content {
    clear: both;
    margin-top: -1px;
    min-height: 500px;
    background: #fff;
    overflow: visible;
    border: 1px solid #ccc;

    /* defense against rogue clickable skins */
    cursor: default !important;
}

/* ==========================================================================
   Classic and fixed
   ========================================================================== */

div.sic #content {
    padding: 0 15px 15px 15px;
}

div.fixed div.fullWidth {
    clear: both;
    margin: 0 15px;
    padding: 15px 0;
}

div.fixed div.leftCol {
    float: left;
    display: inline;
    margin-right: -330px; /* -330px */
    width: 100%;
    overflow: hidden;
}

div.fixed div.leftColWrapper {
    margin-right: 330px; /* 330px */
    padding: 15px;
    padding-right: 0;
    overflow: hidden;
}

div.fixed.fiflufi div.leftColWrapper {
    padding-right: 15px;
}

div.fixed div.rightCol {
    float: right;
    display: inline;
    position: relative;
    padding: 15px;
    width: 300px; /* 300px */
}

/* ==========================================================================
   Legacy left navigation
   ========================================================================== */

.left-nav #content {
    margin-left: 110px;
}

.left-nav .rightCol {
    margin-top: 15px;
}

/* ==========================================================================
   Ads
   ========================================================================== */

.LastAd, .LastAd * {
    margin: auto;
}

#LastAd_leaderboard {
    margin: 10px auto 0;
    position: relative;
    zoom: 1;
    width: 970px;
}

#LastAd_leaderboard.active {
    margin-bottom: 10px;
}

.LastAd_Top {
    margin-bottom: 10px;
}

.theme-whittle #LastAd_leaderboard,
.theme-whittle #LastAd_lowerleaderboard.active {
    left: 0;
    width: 100%;
}

/* Commented out: Causes normal widthed ads to be misaligned (WEB-16450)
div.fixed #LastAd_leaderboard {
    left:-35px;
}
*/

/* Ads should be able to appear over page content, but not active UI popups */
.LastAd {
    position: relative;
    text-align: center;
}

.LastAd > span,
.LastAd .centerShim {
    display: block;
    width: inherit;

    /* Stop absolutely positioned elements within the ad causing
       horizontal scrolling in combination with the overflow rules
       on #LastAd_leaderboard (WEB-18919) */
    position: relative;
}

/* Hack: for ads that use a span to set height and width.
   They should override this with their own inline style, but if they forget… */
.LastAd > span > span[style] {
    display: inline-block;
}

.LastAd,
.LastAd * {
    line-height: 0;
    font-size: 0;
    vertical-align: baseline;
}

/* Disable .add-top-margin / .add-bottom-margin for blanks */
.LastAd.inactive {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.LastAd.ad-relatedcontent,
.LastAd.ad-relatedcontent * {
    line-height: 18px;
    font-size: 13px;
}

#LastAd_lowerleaderboard.active {
    padding: 15px;
    border-top: 1px solid #ebebeb;
    background: #fff;
}

.theme-whittle #LastAd_lowerleaderboard.inactive {
    margin-top: -24px;
}

/* Ad is separated from content differently */
.theme-whittle #LastAd_lowerleaderboard.active {
    background: none;
    padding: 0;
    border: 0;
    margin-bottom: 24px;
    margin-top: -14px;
}

#LastAd_lowerleaderboard {
    clear: both;
    zoom: 1;
}

#LastAd_leaderboard .wrapper,
#LastAd_lowerleaderboard .wrapper {
    width: 900px;
    margin: 0 auto;
    text-align: center;
}

#LastAd_skin a,
#LastAd_skin img {
    position: absolute;
}

#LastAd_lowermpu.active {
    clear: both;
    margin: 24px 0 0 0;
}

#LastAd_mpu {
    z-index: 0;
}

div.sic div#LastAd_sky.active {
    float: right;
    display: inline;
    width: 160px;
    height: 600px;
}

#LastAd_sky.active .wrapper {
    width: 160px;
    height: 600px;
    overflow: hidden;
}

div.skylineRight {
    margin-left: -15px;
    padding-right: 160px;
    overflow: hidden;
}
div.skylineRight div.skyWrap {
    overflow: hidden;
    padding: 0 15px;
    zoom: 1;
}

#page div.skylineRight div#LastAd_sky {
    float: right;
    display: inline;
    margin: 15px -160px 0 0;
}

/* Only .fixed layouts have margin on fullWidth */
#page.fixed .fullWidth div.skylineRight div#LastAd_sky {
    margin-top: 0;
}

div.mpu {
    margin: 15px 0;
}

div.mpu .wrapper {
    width: 300px;
    height: 250px;
    overflow: hidden;
}

/* Pull skin out of page flow */
#LastAd_Skin {
   float: left;
}

/* Add margin to dynamic leaderboard ads (active classes dont apply) */
.LastAd_Top.LastAd--dynamic {
    margin: 10px 0;
}

/* Subtle drop shadows on content when pages have skins
   ========================================================================== */

body[style*="background-image"] #content,
.skin-active #content {
    box-shadow: 0 2px 20px -5px rgba(0,0,0,0.4);
}

/* ==========================================================================
   Classic full width
   ========================================================================== */

div.sic #content .fullWidth {
    margin: 0 0 15px;
    clear: both;
}

/* ==========================================================================
   Two columns and classic columns
   ========================================================================== */

#page .twoCols h2 {
    margin-left: 0;
}

.twoCols {
    overflow: hidden;
}

div.sic #content .leftColumn,
.twoCols .leftColumn {
    float: left;
    display: inline;
    overflow: hidden;
    width: 50%;
}

div.sic #content .leftColumn .wrapper,
.twoCols .leftColumn .wrapper {
    margin: 0 7px 15px 0;
    zoom: 1;
}

div.sic #content .rightColumn,
.twoCols .rightColumn {
    float: right;
    display: inline;
    overflow: hidden;
    width: 49%;
}

div.sic #content .rightColumn .wrapper,
.twoCols .rightColumn .wrapper {
    margin: 0 0 15px 7px;
    zoom: 1;
}

/* ==========================================================================
   Fiflufi – Fixed-Fluid-Fixed
   As of WEB-16450 this is all fixed.
   ========================================================================== */

.fiflufi .leftCol {
    background: url(https://cdn.last.fm/flatness/grids/fiflufi_right.5.png) right top repeat-y #fff;
}

.fiflufi-clean #content {
    background: #fff;
}

.fiflufi #content .fullWidth {
    margin: 0;
    padding: 0 15px 15px;
    background: #fff;
    clear: both;
}

.fiflufi #LastAd_sky {
    float: right;
    display: inline;
    width: 160px;
    height: 600px;
}

.fiflufi .leftCol {
    float: left;
    display: inline;
    margin-right: -330px;
    width: 100%;
    overflow: hidden;
}

.fiflufi .leftColWrapper {
    margin-right: 330px;
    padding: 0 15px 15px;
    overflow: hidden;
}

.fiflufi .rightCol {
    float: right;
    display: inline;
    position: relative;
    padding: 0 15px 15px;
    width: 300px;
    font-size: 11px;
    line-height: 1.181818em;
}

.fiflufiSmall .leftCol {
    margin-right: -190px;
    background: none;
}

.fiflufiSmall .leftColWrapper {
    margin-right: 190px;
    background: none;
}

.fiflufiSmall .rightCol {
    width: 160px;
    background: none;
}

.fiflufiSmall #content {
    background: #fff;
}

/* ==========================================================================
   Grid overlay helpers
   ========================================================================== */

div.showgrid div.leftColumn {
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: left top;
}

div.showgrid div.rightColumn {
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: 7px top;
}

.showgrid #secondaryNavigation {
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: left top;
}

.showgrid #content .fullWidth {
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: left top;
}

.showgrid #content .leftColWrapper {
    padding-right: 0;
    border-right: solid 15px #fff386;
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: 15px top;
}

.showgrid .rightCol {
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: 15px top;
}

.showgrid .sic #content {
    background-image: url(https://cdn.last.fm/flatness/grids/grid_48.15.png);
    background-position: 15px top;
}

/* ==========================================================================
   Default styles, with many convoluted page type dependent selectors. Eww.
   ========================================================================== */

#page h2.heading {
    clear: both;
    margin: 10px -15px 2px;
    padding: 0;
    color: #D51007;
    font-size: 18px;
    line-height: 13px;
    border-top: 1px dotted #ccc;
}

.lfmBlack #page h2.heading {
    color: #1b1b1b;
}

.h2Wrapper {
    display: block;
    padding: 15px;
}

.h2Wrapper a {
    text-decoration: none;
    color: #D51007;
}

.lfmBlack #page .h2Wrapper a {
    color: #1b1b1b;
}

#page .h2Wrapper a:hover {
    text-decoration: underline;
}

.lfmBlack #page h3,
.lfmBlack #page h3 a {
    color: black !important;
}
.lfmBlack #page #radio h3,
.lfmBlack #page #radio h3 a {
    color: white !important;
}

#page .fiflufi .leftCol h2 small a,
#page .fixed .leftCol h2 small a {
    color: #0187c5;
}

.fiflufi .leftCol hr {
    clear: both;
    height: 2px;
    margin: 15px -15px 10px -15px;
    border: 0;
    border-top: 1px solid #ccc;
    background: #efefef;
    display: none;
}

#page .rightCol h2.heading {
    margin: 24px 0 12px;
    padding: 0;
    font-size: 14px;
    line-height: 18px;
    border-top: none;
}

#page .rightCol > h2.first,
#page .rightCol > h2.heading:first-child,
.mpuTop #LastAd_mpu.inactive + h2.heading {
    margin-top: 0;
}

.rightCol .h2Wrapper {
    padding: 0;
}

.fiflufi .leftCol a.seemore {
    margin: 5px 0 0 0;
    padding: 2px 0 2px 10px;
    background: url(https://cdn.last.fm/flatness/grey-more-btn.gif) no-repeat left top;
    float: right;
    text-decoration: none;
}

.fiflufi .leftCol a.seemore span {
    padding: 2px 30px 2px 0;
    background: url(https://cdn.last.fm/flatness/grey-more-btn.gif) no-repeat right top;
    font-size: 10px;
    color: #000;
}

.fiflufi .leftCol a.seemore:hover span {
    color: #666;
}

.fiflufi .rightCol a.seemore {
    float: right;
    margin: 5px 0 0 0;
    color: #0187c5;
    text-decoration: none;
}

.moduleOptions {
    clear: both;
    display: block;
    text-align: right;
    color: #0187c5;
}

.moduleOptionsLeft {
    text-align: left;
}

#page .moduleOptions {
    display: block;
    height: 15px;
    font-weight: bold;
    font-size: 11px;
    line-height: 14px;
}
#page .moduleOptions a,
#page a .moduleOptions {
    float: right;
    display: block;
    font-size: 11px;
    line-height: 14px;
    padding-right: 18px;
    margin-left: 9px;
    background-image: url('https://cdn.last.fm/flatness/icons/see_more_arrow_blue_13x13_2.png');
    background-repeat: no-repeat;
    background-position: right top;
}

.right {
    float: right;
}

.seemore {
    display: block;
    padding-right: 18px;
    background: url('https://cdn.last.fm/flatness/icons/see_more_arrow_blue_13x13_2.png') 100% 2px no-repeat;
}

/* ==========================================================================
   Recommended items
   ========================================================================== */

a.recommendedLink {
    color: #d51007;
    font-weight: bold;
    font-size: 12px;
}

a.recommendedLink .recommended_icon {
    margin: 0 4px -2px 0;
}

div.rightCol div.recommendedContent {
    margin: 0 0 15px 0;
}

#page div.rightCol div.recommendedContent h2.heading {
    border-top: 1px solid #f46862;
    margin: 0 0 12px 0;
    background: #ffefe7;
    color: #d51007;
}

#page div.rightCol div.recommendedContent h2.heading span.h2Wrapper {
    padding: 5px 10px;
}

/* Override */

.fiflufiSmall .rightCol h2 {
    background: none;
    font-size: 12px;
    font-weight: bold;
}

.fiflufiSmall .rightCol h2 a {
    color: #D51007;
}

/* Narrow page forms
   ========================================================================== */

.narrow-form {
    max-width: 540px;
    margin: 48px auto;
    position: relative;
}

.narrow-form h1 {
    margin: 0 0 24px;
}

.narrow-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.narrow-form .memo {
    margin-bottom: 24px;
    padding: 18px 20px;
}

.narrow-form fieldset.submit {
    text-align: right;
}

.narrow-form .action-button {
   float: right;
   margin: 0 0 0 1em;
}

.narrow-form .cancel {
   line-height: 27px;
}

.narrow-form .summary dd {
    margin-bottom: 18px;
}

.narrow-form .summary dt {
    font-weight: bold;
}

/* ==========================================================================
   970 grid layout. Used only on charts and now deprecated.
   ========================================================================== */

#content.l-970 {
    margin: -1px 0 0 0;
    padding: 18px 18px 0;
}

.l-row {
    overflow: hidden;
    margin-left: -8px;
    margin-right: -8px;
}

.ie6 .l-row {
    zoom: 1;
}

.l-g1,
.l-g2,
.l-g3,
.l-g4,
.l-g5,
.l-g6 {
    float: left;
    padding-left: 8px;
    padding-right: 8px;
}

.l-g1 {
    width: 142px;
}
.l-g2 {
    width: 300px;
}
.l-g3 {
    width: 458px;
}
.l-g4 {
    width: 616px;
}
.l-g5 {
    width: 774px;
}
.l-g6 {
    width: 932px;
}


.masthead-wrapper {
    position: relative;
    
    /* CBS requires that we have 10px spacing above and below leaderboards
       so we diverge from our baseline here, see WEB-19773 and WEB-19839 */
    margin: 10px auto 0;

    width: 980px;
    font-size: 13px;
    line-height: 18px;
}

/* ==========================================================================
   Site messaging
   ========================================================================== */

.site-message {
    background: #fffcca;
    border: 1px solid #ccc;
    border-bottom-width: 0;
    padding: 12px 20px 12px;
    position: relative;
}

.site-message.iconleft {
    padding-left: 46px;
}

.site-message.iconleft:before {
    left: 16px;
    top: 0;
    margin-top: 1px;
}

.site-message--dismissible {
    padding-right: 58px
}

.site-message a,
.site-message .mimic-link {
	color: inherit;
    text-decoration: underline;
}

.site-message--dismissible .btn {
    position: absolute;
    right: 20px;
    top: 12px;
}

.site-message--blue {
    background: #eef5fc;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
    background-color: #e31b23;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e31b23, endColorstr=#b32024);
    background-image: -webkit-linear-gradient(#e31b23, #b32024);
    background-image:    -moz-linear-gradient(#e31b23, #b32024);
    background-image:         linear-gradient(#e31b23, #b32024);
    border: 1px solid #a00;
    border-bottom: 1px solid #9f081e;
    box-shadow: rgba(0,0,0,0.3) 0 2px 5px;

    position: relative;
    height: 45px;
    padding: 10px 0 2px 34px;
}

.lfmBlack .masthead {
    background-color: #4b4b4b;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4b4b4b, endColorstr=#333333);
    background-image: -webkit-linear-gradient(#4b4b4b, #333);
    background-image:    -moz-linear-gradient(#4b4b4b, #333);
    background-image:         linear-gradient(#4b4b4b, #333);
    border: 1px solid #2c2c2c;
    border-bottom: 1px solid #111;
}

.lastfm-logo {
    position: absolute;
    left: 19px;
    top: 11px;
    width: 90px;
    height: 30px;
    background-image: url("https://cdn.last.fm/flatness/header/lastfm_logo_red.png");
}

.lfmBlack .lastfm-logo {
    background-image: url("https://cdn.last.fm/flatness/header/lastfm_logo_black.png");
}

.lastfm-logo:hover,
.lastfm-logo:focus {
    background-position: 0 -30px;
}

/* Style adjustments for high resolution devices */
/* See: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L227 */
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {

    .lastfm-logo {
        background-image: url("https://cdn.last.fm/flatness/header/lastfm_logo_red@2x.png");
        -webkit-background-size: 90px 60px;
        background-size: 90px 60px;
    }

    .lfmBlack .lastfm-logo {
        background-image: url("https://cdn.last.fm/flatness/header/lastfm_logo_black@2x.png");
    }
}

.masthead a,
.masthead a:hover,
.masthead a:focus {
    color: #fff;
    text-decoration: none;
}

/* Prevent too generic h1 selectors from affecting header */
.masthead h1 {
    margin-bottom: 0 !important;
}

/* Primary navigation
   ========================================================================== */

.primary-nav {
    display: inline-block;
    margin-left: 280px;
    margin-top: -10px;
    font-size: 14px;
}

.primary-nav-item {
    display: inline-block;
    height: 45px;
    line-height: 45px;
}

.primary-nav-link {
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.1) 0 1px 1px;
    display: inline-block;
    padding: 6px 10px;
}

.primary-nav-link:hover,
.primary-nav-link:focus {
    color: #fff;
    text-decoration: none;
    background: #92181c;
    background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
    background:    -moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
    background:         linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
}

.lfmBlack .primary-nav-link:hover,
.lfmBlack .primary-nav-link:focus {
    color: #fff;
    text-decoration: none;
    background: #252525;
    background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
    background:    -moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
    background:         linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
}

/* Site search
   ========================================================================== */

.site-search {
    position: absolute;
    left: 130px;
    top: 14px;
}

.lfmRed .site-search .search-box {
    background: #333333;
    border-color: #882629;
    color: #fff;
    box-shadow: inset #333333 0 -5px 5px,
                inset #131313 0 1px 5px,
                rgb(230, 45, 52) 0 1px 0;
}

.site-search .autocomplete-results {
    margin-top: 20px;
    right: 4px;
    left: auto;
}

/* Use a specificity hack instead of modifying the
   iconleft--light HTML based on a cookie value */
.lfmRed .site-search .search-submit:before {
    background-image: url(https://cdn.last.fm/flatness/responsive/12/icons_18_sparse_light_sprite.png) !important;
}

.lfmRed .site-search .search-progress {
    background-image: url("https://cdn.last.fm/flatness/spinners/spinner_333333_aaaaaa.gif");
}

.masthead-right {
    position: absolute;
    right: 20px;
    top: 13px;
}

/* Header buttons
   ========================================================================== */

.btn--header {
    background-color: #a61b1e;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#c61a21, endColorstr=#a61b1e);
    background-image: -webkit-linear-gradient(#c61a21, #a61b1e);
    background-image:    -moz-linear-gradient(#c61a21, #a61b1e);
    background-image:         linear-gradient(#c61a21, #a61b1e);
    text-shadow: #000 0 -1px;
    font-size: 13px;
}

/* In IE9 its filters OR border-radius, we want corners here. */
.ie9 .btn--header {
    filter: none !important;
}

.btn.btn--header {
    box-shadow: #e62d34 0 1px 1px,
                inset rgba(0,0,0,0.25) 0 1px 1px;
}

.notification-pill--badge:hover + .btn--header,
.notification-pill--badge:focus + .btn--header,
.btn--header:hover,
.btn--header:focus {
    background-color: #92181c;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2171d, endColorstr=#92181c);
    background-image: -webkit-linear-gradient(#b2171d, #92181c);
    background-image:    -moz-linear-gradient(#b2171d, #92181c);
    background-image:         linear-gradient(#b2171d, #92181c);
}

.btn--header:active {
    background-color: #811518;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#921317, endColorstr=#8a171a);
    background-image: -webkit-linear-gradient(#921317, #8a171a);
    background-image:    -moz-linear-gradient(#921317, #8a171a);
    background-image:         linear-gradient(#921317, #8a171a);
}

/* Black header buttons
   ========================================================================== */

.lfmBlack .btn--header {
    background-color: #3b3b3b;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b3b3b, endColorstr=#2b2b2b);
    background-image: -webkit-linear-gradient(#3b3b3b, #2b2b2b);
    background-image:    -moz-linear-gradient(#3b3b3b, #2b2b2b);
    background-image:         linear-gradient(#3b3b3b, #2b2b2b);
}

.lfmBlack .btn.btn--header {
    box-shadow: #565656 0 1px 1px,
                inset rgba(0,0,0,0.25) 0 1px 1px;
}

.lfmBlack .notification-pill--badge:hover + .btn--header,
.lfmBlack .notification-pill--badge:focus + .btn--header,
.lfmBlack .btn--header:hover,
.lfmBlack .btn--header:focus {
    background-color: #252525;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333, endColorstr=#252525);
    background-image: -webkit-linear-gradient(#333333, #252525);
    background-image:    -moz-linear-gradient(#333333, #252525);
    background-image:         linear-gradient(#333333, #252525);
}

.lfmBlack .btn--header:active {
    background-color: #202020;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#282828, endColorstr=#242424);
    background-image: -webkit-linear-gradient(#282828, #242424);
    background-image:    -moz-linear-gradient(#282828, #242424);
    background-image:         linear-gradient(#282828, #242424);
}

/* User navigation
   ========================================================================== */

.user-badge {
    position: relative;
    padding-left: 40px;
    border-radius: 3px 0 0 3px;
    border-right: 1px solid #821114;

    /* Fix spacing left by inline-block */
    margin-right: -4px;
}

/* Use a pseudo-element to apply another inset box shadow
   so that the shadow applies correctly over the avatar */
.user-badge:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px;
    border-radius: 3px 0 0 3px;
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px;
}

.user-badge-avatar {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px 0 0 3px;
}

.user-badge:hover:after {
    background: -webkit-linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.1));
    background:    -moz-linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.1));
    background:         linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.1));
}

.user-badge:active:after {
    background: -webkit-linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2));
    background:    -moz-linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2));
    background:         linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.2));
}

.btn.user-dropdown-toggle {
    border-radius: 0 3px 3px 0;
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px,       /* Top inset shadow */
                inset rgba(230, 45, 52, 0.6) 1px 0,     /* Left 1px red highlight */
                #e62d34 0 1px 1px;                      /* Bottom border simulation */
}

.notification-pill--badge:hover + .user-dropdown-toggle,
.notification-pill--badge:focus + .user-dropdown-toggle,    /* notification pill treated like part of the drop down */
.btn.user-dropdown-toggle:hover,
.btn.user-dropdown-toggle:focus {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px,
                inset rgba(230, 45, 52, 0.3) 1px 0,     /* Make red highlight less prominent */
                #e62d34 0 1px 1px;
}

.notification-pill--badge:active + .user-dropdown-toggle,
.btn.user-dropdown-toggle:active {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px,
                #e62d34 0 1px 1px;
}

.user-dropdown {
    background-color: #b32024;
    border-color: #a0071a;
    box-shadow: inset #e62d34 0 1px 1px,
                rgba(0,0,0,0.75) 0 3px 10px;
    margin-top: 10px;
    font-size: 12px;
    right: 0;
    width: auto;
}

.user-dropdown .dropdown-btn-menu-item:hover,
.user-dropdown .dropdown-btn-menu-item:focus {
    background-color: #a01c20;
}

.user-dropdown-divider-bottom {
    border-bottom: 1px solid #a11d20;
    padding-bottom: 6px;
}

.user-dropdown-divider-top {
    border-top: 1px solid #ca2a2f;
    padding-top: 6px;
}

/* Making a button look and behave like a link */
.logout-button {
    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    background: transparent;
    color: #fff;
    border: 0;
    width: 100%;
    font-size: 100%;
    cursor: pointer;
    height: 30px;
}

.logout-button:hover,
.logout-button:focus {
    color: #fff;
}

/* Black user navigation
   ========================================================================== */

.lfmBlack .user-badge {
    border-right-color: #1C1C1C;
}

.lfmBlack .user-badge:after {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px;
}

.lfmBlack .user-badge-avatar {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px;
}

.lfmBlack .btn.user-dropdown-toggle {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px,
                inset rgba(86, 86, 86, 0.6) 1px 0,
                #565656 0 1px 1px;
}

.lfmBlack .notification-pill--badge:hover + .user-dropdown-toggle,
.lfmBlack .notification-pill--badge:focus + .user-dropdown-toggle,  /* notification pill treated like part of the drop down */
.lfmBlack .btn.user-dropdown-toggle:hover,
.lfmBlack .btn.user-dropdown-toggle:focus {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px,
                inset rgba(86, 86, 86, 0.3) 1px 0,
                #565656 0 1px 1px;
}

.lfmBlack .notification-pill--badge:active + .user-dropdown-toggle,
.lfmBlack .btn.user-dropdown-toggle:active {
    box-shadow: inset rgba(0,0,0,0.25) 0 1px 1px,
                #565656 0 1px 1px;
}

.lfmBlack .user-dropdown {
    background-color: #333;
    border-color: #111;
    box-shadow: inset #565656 0 1px 1px,
                rgba(0,0,0,0.75) 0 3px 10px;
}

.lfmBlack .user-dropdown .dropdown-btn-menu-item:hover,
.lfmBlack .user-dropdown .dropdown-btn-menu-item:focus {
    background-color: #000
}

.lfmBlack .user-dropdown-divider-bottom {
    border-bottom-color: #292929;
}

.lfmBlack .user-dropdown-divider-top {
    border-top-color: #3d3d3d;
}

/* Notification pill
   ========================================================================== */

.notification-pill {
    background: #fff;
    border-radius: 100px;
    font-weight: bold;
    font-size: 12px;
    line-height: 15px;
    margin-top: 8px;
    padding: 0 6px;
}

.notification-pill,
a.notification-pill,
a.notification-pill:hover,
a.notification-pill:focus {
    color: #b32024;
}

.lfmBlack .notification-pill,
.lfmBlack a.notification-pill,
.lfmBlack a.notification-pill:hover,
.lfmBlack a.notification-pill:focus {
    color: #333;
}

/* In the user dropdown */
.notification-pill--dropdown {
    box-shadow: rgba(0,0,0,0.1) 0 1px;
    margin-left: 10px;
}

/* Top right of the user badge */
.notification-pill--badge {
    position: absolute;
    right: -9px;
    top: -15px;
    box-shadow: rgba(0,0,0,0.25) 0 1px;
    z-index: 2;
}

.dropdown-btn-menu-item--notification {
    white-space: nowrap;
    text-align: right;
}

.dropdown-btn-menu-item .notification-title {
    float: left;
}


/* User navigation without JS
   Make the navigation always show, as a horizontal bar
   ========================================================================== */

.no-js .masthead--logged-in {
    margin-bottom: 40px;
}

.no-js .user-dropdown {
    display: block;
    width: 980px;
    right: -21px;
    padding-right: 8px;
    text-align: right;
    box-shadow: rgba(0,0,0,0.3) 0 2px 5px;
    border-radius: 0;
}

.no-js .user-dropdown form,
.no-js .user-dropdown li {
    display: inline;
    border: none !important;
}

.no-js .user-dropdown .dropdown-btn-menu-item {
    display: inline-block;
}

.no-js .user-dropdown .notification-pill {
    display: none;
}

.no-js .logout-button {
    width: auto;
}

/* Remove the floats and clearing put in place for the notification pills */
.no-js .dropdown-btn-menu-item .notification-title  {
    float: none;
}

.no-js .user-dropdown .clearit:after  {
    display: none;
}

/* ==========================================================================
   Anonymous nav
   ========================================================================== */

.login {
    text-shadow: none;
}

.join {
    margin-right: 10px;
}

a.join:hover,
a.join:focus {
    text-decoration: underline;
}

/* ==========================================================================
   Staging overlay
   ========================================================================== */

.staging-overlay {
    background: #fff;
    background: rgba(255,255,255,0.7);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100000000;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
}


.heightShim {
    height: 0;
    width: 0;
    float: left;
}

.adWrapper {
    line-height: 0.5 !important;
}

.google-ad-skin {
    position: absolute;
}

#LastAd_TopRight {
    float: right;
}

.ad-customsearch.active {
    margin-bottom: 15px;
}

.LastAd_BottomRight {
    margin-top: 15px;
}

.LastAd_Top.LastAd--dynamic {
    min-height: 90px;
}

.ad-middleleaderboard.active,
.ad-narrowmiddleleaderboard.active {
    clear: both;
    padding-top: 18px;
    margin-bottom: 18px;
}

.ad-middleleaderboard .adsbygoogle {
    display: block;
    width: inherit;
    min-height: 90px;
}

/**
 * Double leaderboard sandwich (read: stacked) mode.
 */
#LastAd_middleleaderboard.active + #LastAd_lowerleaderboard.active {
    border-top: none;
    margin-top: -18px;
}

.theme-whittle .ad-middleleaderboard {
    margin-left: -19px;
    margin-right: -19px;
}

.theme-flatness .fullWidth .ad-middleleaderboard,
.theme-flatness .sic .ad-middleleaderboard {
    margin-left: -15px;
    margin-right: -15px;
}

.theme-flatness .ad-middleleaderboard {
    margin-left: 0;
    margin-right: 0;
}

.ad-relatedcontent,
.ad-widerelatedcontent {
    clear: both;
}

.r-artist.a-overview #LastAd_lowermpu.active {
    margin-top: 0;
    margin-bottom: 18px;
}


/* ==========================================================================
   Top albums
   ========================================================================== */

/* Use nth-child helper classes for legacy browser support */
.album-list--expanded .item-2n-plus-1,
.album-list--compact  .item-4n-plus-1 {
    clear: left;
}

.album-item h3 {
    margin-bottom: 0;
}

.album-item-detail-wrapper {
    margin-bottom: 18px;
}

.album-item-details {
    position: relative;
    font-size: 12px;
}

.album-item-cover {
    margin-bottom: 18px;
    height: 220px;

    /* Don't look like empty space when userserve is acting up */
    background-color: #eee;
}

/* We know these albums are square, so optimise for that scenario to
   make resized images look as best as possible. (Without this the
   images are cropped on IE8) */
.ie8 .album-item .text-over-image-image {
    max-width: 100%;
    max-height: 100%;
}

/* Expanded album list
   ========================================================================== */

/* Remove margin from cover, as it's now floated left */
.album-list--expanded .album-item-cover {
    margin-bottom: 0;
}


/* Compact album list
   ========================================================================== */

/* Position buy button directly below cover */
.album-list--compact .ecommerce-dropdown,
.album-list--compact .ecommerce-single-button {
    position: absolute;
    top: -8px;
    width: 100%;
}

/* Push details down to make space for buy button */
.album-list--compact .album-item-detail-wrapper {
    padding-top: 40px;
}

/* …but don't if there isn't a buy button! */
.album-list--compact .album-item-detail-wrapper:only-child {
    padding-top: 10px;
}

/* ==========================================================================
   Artist Grid
   ========================================================================== */

.artist-grid {
    margin: 0;
    position: relative;
}

.artist-grid-items {
    border-left: 1px solid #333;
    margin-bottom: 0;
}

.artist-grid-item {
    width: 312px;
    height: 300px;
}

.artist-grid--g8 .artist-grid-item {
    width: 205px;
    height: 205px;
}

.artist-grid-item {
    border-radius: 0;
    margin: 0;
    border: 1px solid #333;
    border-left: 0;
    background: #000;
}

.artist-grid-item.item-4,
.artist-grid-item.item-5,
.artist-grid-item.item-6 {
    border-top-width: 0;
}

.artist-grid-item a,
.artist-grid-item a:hover {
    color: #fff;
}

.artist-grid-item .cover-image {
    background-position: top center;
    border-radius: 0;
}

.artist-grid-item .text-over-image-text {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGA4AwAA0QDN0A/sMwAAAABJRU5ErkJggg==');
    border-top: 1px solid #333;
    box-shadow: rgba(0,0,0,0.8) 0 -1px 0;
}

/* Fix WEB-19487
 * IE8 makes the link clickable when you give it a background colour, so do that
 * but also set opacity to 0. Genuine browser bug.
 * http://stackoverflow.com/questions/3998917/ie8-div-hover-only-works-when-background-color-is-set-very-strange-why */
.ie8 .artist-grid-fill-link {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    background: #fff;
}

.artist-grid-fill-link:focus + .text-over-image .artist-grid-item-heading-link,
.artist-grid-fill-link:hover + .text-over-image .artist-grid-item-heading-link {
    text-decoration: underline;
}

/* ==========================================================================
   Artist Grid for logged in home
   artist-grid--logged-in-home
   ========================================================================== */

.artist-grid--logged-in-home .text-over-image-text {
    min-height: 66px;
}

.artist-similar-to,
.artist-similar-to a,
.artist-similar-to a:hover {
    font-size: 12px;
    color: #999;
}

.artist-similar-to a:hover {
    text-decoration: underline;
}

.artist-grid--logged-in-home h3 {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
}

/* ==========================================================================
   Artist Grid for the Anonymous Homepage
   artist-grid--anon-home
   ========================================================================== */

.artist-grid--anon-home h3 {
    margin-bottom: 0;
    font-size: 24px;
    line-height: 30px;
}

.artist-grid-item-listeners {
    color: #999;
    text-shadow: #000 0 -1px 0;
    margin-bottom: 3px;
    display: block;
}

.artist-grid-item-listeners-number {
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
}

/* Anon Home MPU in grid
   ========================================================================== */

.artist-grid--anon-home .grid-mpu {
    width: 312px;
    height: 300px;

    background: #000;
    text-align: center;
    padding-top: 25px; /* Vertically centre MPU of 250px */
    overflow: hidden;  /* No double MPUs here! */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 303px;
    right: 4px;
}

.artist-grid--anon-home.mpu-active .item-3 .cover-image {
    display: none;
}

.artist-grid--anon-home.mpu-inactive .grid-mpu {
    height: auto;
    width: auto;
}

/* ==========================================================================
   Search autocomplete
   ========================================================================== */

.autocomplete-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    z-index: 5000000;
    margin-top: 12px;
    font-size: 12px;
    min-width: 279px;
    text-align: left;
}

.autocomplete-results-container--open .autocomplete-results {
    display: block;
}

.dark-box {
    border-radius: 3px;
    background: #333;
    color: #fff;
    border: 1px solid #111;
    text-shadow: rgba(0,0,0,0.5) 0 -1px 0;
    box-shadow: rgba(0,0,0,0.75) 0 3px 10px;
}

.dark-box--columns {
    background: #333 url('https://cdn.last.fm/flatness/search/search_bg.png') repeat-y -80px;
}

.dark-box--single {
    padding: 6px 0;
}

.autocomplete-results .media {
    margin-bottom: 0;
}

.autocomplete-results .media-pull-left {
    margin-right: 10px;
}

.autocomplete-results a,
.autocomplete-results a:hover {
    color: #fff;
}

.autocomplete-results .lite {
    color: #999;
}

.autocomplete-results a:hover,
.autocomplete-results a:focus {
    text-decoration: none;
}

.autocomplete-results strong {
    font-weight: normal;
    border-bottom: 1px solid #646464;
}

/* Groups and headers
   ========================================================================== */

.autocomplete-group-heading {
    width: 60px;
    text-align: right;
    margin-top: 12px;
}

.autocomplete-group-heading h3 {
    font-weight: normal;
    margin-bottom: 0;
}

.lfmBlack #page .autocomplete-group-heading h3 {
    color: #fff !important;
}

.autocomplete-group {
    border-bottom: 1px solid #292929;
    border-top: 1px solid #3d3d3d;
    padding: 6px 0;
    margin-bottom: 0;
}

.theme-whittle .autocomplete-group {
    margin-bottom: 0;
}

.autocomplete-group--more {
    border-bottom: 0;
    margin-left: 70px;
}

/* Results
   ========================================================================== */

.autocomplete-results .media:first-child .autocomplete-group {
    border-top: 0;
}

.autocomplete-results .media:last-child .autocomplete-group {
    border-bottom: 0;
    margin-bottom: -6px;
}

.autocomplete-result--tag {
    text-transform: lowercase;
}

.autocomplete-result a {
    display: block;
    padding: 6px 10px 6px;
}

.autocomplete-result a:focus {
    outline: 0;
}

.autocomplete-result--selected a {
    background-color: #2e4f9c;
}

.autocomplete-result img {
    border-radius: 3px;
    display: block;
    margin-top: 3px;
    width: 30px;
    height: 30px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px, rgba(255, 255, 255, 0.1) 0 -1px 1px;
}

.autocomplete-result .calSheet {
    margin-top: 3px;
}

/* Icon tweaks
   ========================================================================== */

.autocomplete-result .iconleft--tag,
.autocomplete-result .iconleft--search {
    padding-left: 33px;
}

.autocomplete-result .iconleft--tag:before,
.autocomplete-result .iconleft--search:before {
    left: 10px;
}


/* ==========================================================================
   Old autocomplete
   ========================================================================== */

.autoCompleteResults  {
    background: #fff;
    border: 2px solid #C0C0C0;
    z-index: 5000000;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 350px !important;
}
.autoCompleteResults li {
    padding: 3px;
}
.autoCompleteResults li.selected {
    background: #C0C0C0;
    color: #fff;
}


.staff span.name {
    background: #D51007 !important;
}

.alumni span.name {
    background: #5336bd !important;
}

.subscriber span.name {
    background: #000 !important;
}

.moderator span.name {
    background: orange !important;
}

.userType {
    font-size: 9px;
    vertical-align: super;
    line-height: 0px;
    font-weight: normal;
}

.alumni .userType {
    color: #5336bd !important;
}

.staff .userType {
    color: #D51007 !important;
}

.moderator .userType {
    color: orange !important;
}

.subscriber .userType {
    color: #000 !important;
}

span.userImage {
    position: relative;
}

/* See CATA-486. Should have been part of base style 
   as a necessary requirement to position user badge. */
.theme-whittle .userImage {
    display: block;
}

img.groupImage,
span.groupImage img,
span.userImage img {
    padding: 1px;
    border: 1px solid #ccc;
}

a:hover img.groupImage,
a:hover span.userImage img {
    padding: 1px;
    border-color: #0187c5;
}

span.userImage img.staff_icon,
span.userImage img.subscriber_icon,
span.userImage img.moderator_icon,
span.userImage img.alumni_icon,
a:hover span.userImage img.staff_icon,
a:hover span.userImage img.subscriber_icon,
a:hover span.userImage img.moderator_icon,
a:hover span.userImage img.alumni_icon {
    position: absolute;
    top: -3px;
    left: -3px;
    margin: 0 0 6px 0;
    padding: 0;
    border: 1px solid #ccc;
}

span.staffWithIcon {
    padding-right: 7px;
    background: url(https://cdn.last.fm/flatness/global/user/icon_staff_m.png) no-repeat top right;
}

/* for 1-button forms inline with bigButton */
form.inline.lfmBigButton {
    position: relative;
}

form.inline.lfmBigButton input.button {
    position: relative;
    top: 2px;
    height: 18px;
}


/* margin to separate preview button from track name in bbcode blocks */
.bbcode .inline-play-button,
.wiki .inline-play-button,
blockquote .inline-play-button {
    margin-right: 3px;
}


.bestofbadge {
    position: relative;
    min-height: 49px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-style: dotted;
    border-width: 0 0 1px 0;
}

.bestofbadge img {
    position: absolute;
    top: 0;
    left: 0; 
}

.bestofbadge-position {
    font-size: 30px;
    letter-spacing: -3px; 

    position: absolute;
    top: 0;
    left: 90px; 
}

.bestofbadge-description {
    padding-left: 9.5em;
    margin-left: 90px;
    padding-top: 5px;
}

.bestofbadge-strlen-1 .bestofbadge-description {
    padding-left: 4em;
}
.bestofbadge-strlen-2 .bestofbadge-description {
    padding-left: 5.25em;
}
.bestofbadge-strlen-3 .bestofbadge-description {
    padding-left: 6.5em;
}


#content .bestofbadge-description .seemore {
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: url('https://cdn.last.fm/flatness/icons/see_more_arrow_blue_13x13_2.png') 100% 2px no-repeat;
    padding-right: 18px;
    white-space: nowrap;
}

#content .bestofbadge-description .seemore:hover {
    text-decoration: underline;
}

.ie7 #content .bestofbadge-description .seemore {
    zoom: 1;
}


.breadcrumb {
    color: #0187c5;
    margin: 1em 0 1em 15px;
    zoom: 1;
}

.fullWidth .breadcrumb  {
    margin-top: 0;
}

.leftCol .breadcrumb  {
    margin: 0;
}

.leftCol .album-breadcrumb,
.leftCol .track-breadcrumb {
    margin-bottom: 12px;
}

.breadcrumb span {
    color: #000;
}


div#browsablechart {
  margin-top: 7px;
}

div#browsablechart fieldset#typeSelector {
  margin-bottom: 1em;
}

div#browsablechart fieldset#typeSelector.withDateSelector {
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 13px;
  float: left;
  clear: both;
}

div#browsablechart div#dateSelector {
  padding-left: 190px;
  position: relative;
  margin-bottom: 1em;
  clear: both;
}

div#browsablechart div#calendar {
  width: 175px;
  float: left;
  display: inline;
  margin-left: -190px;
}

#LastWebsite div#browsablechart table.calendar {
  width: 100%;
}

#LastWebsite div#browsablechart table.calendar td {
  width: 14%;
}

div#browsablechart table#selectedWeekStats {
  margin-top: 0.7em;
  font-size: 11px;
}

div#browsablechart table#selectedWeekStats strong {
  margin-left: 0.5em;
}

#browsablechart #moreInfo {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 190px;
}

#browsablechart #moreInfo ul.calendarLegend {
  margin: 0;
  white-space: nowrap;
}

div#browsablechart div#dateSelector p.chartmore {
  margin: 0;
  font-size: 11px;
}

/* Buttons */
a.button,
input.button,
button.button,
a.confirmButton,
input.confirmButton,
button.confirmButton {
    padding: 0 4px;
    border: 1px solid #ccc;
    border-color: #999 #858585 #666 #858585;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    vertical-align: middle;
    vertical-align: baseline;
    text-decoration: none;
    border-radius: 2px;
    background: #9b9b9b url(https://cdn.last.fm/flatness/buttons/5/button.png) 0 0 repeat-x;
    font-weight: bold;
    line-height: 16px;
    text-shadow: #9b9b9b 0 -1px 1px;
}

a.confirmButton,
input.confirmButton,
button.confirmButton {
    border-color: #505050 #404040 #2d2d2d #404040;
    font-weight: bold;
    background: #515151 url(https://cdn.last.fm/flatness/buttons/5/confirm_button.png) 0 0 repeat-x;
    text-shadow: #515151 0 -1px 1px;
}

a.confirmButtonBlue,
input.confirmButtonBlue,
button.confirmButtonBlue {
    border-color: #00a4c3 #0094b6 #007599 #0094b6;
    font-weight: bold;
    background: #00b6d8 url(https://cdn.last.fm/flatness/buttons/5/confirm_button_blue.png) 0 0 repeat-x;
    text-shadow: #007599 0 -1px 1px;
}

a.button:hover,
input.button:hover,
button.button:hover,
a.confirmButton:hover,
input.confirmButton:hover,
button.confirmButton:hover {
    color: #fff;
    text-decoration: none;
}

input.confirmButton[disabled],
input.disabledConfirmButton {
    color: #bbb;
}

a.lfmBigButton,
a.lfmSmallButton,
.indicator,
.dismissbutton,
.mockAddButton {
    height: 18px;
    display: inline-block;
    padding: 0 3px 0 0;
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/grey_right.png) no-repeat right top;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: #163551 0 -1px 1px;
    overflow: hidden;
}

/* Force colour and font size in certain cases, needs higher specificity */
#venue a.lfmSmallBuyMoreButton,
.resContainer .affiliates .lfmSmallButton,
.resContainer .affiliates .lfmSmallButton:hover {
    color: #fff;
    font-size: 9px;
}

a.lfmBigButton strong,
a.lfmBigButton span,
a.lfmSmallButton strong,
a.lfmSmallButton span,
.indicator span,
.indicator strong,
.dismissbutton span,
.dismissbutton strong,
.mockAddButton span,
.mockAddButton strong {
    height: 14px;
    padding: 2px 5px 2px 25px;
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/add_left.png) no-repeat left top;
    display: inline-block;
    line-height: 14px;
    vertical-align: top;
}

a.lfmTagButton strong {
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/tag_left.png) no-repeat left top;
}

/* A button without all the backgroundyness */

a.lfmSimpleButton {
    height: auto;
    display: inline;
    padding: 0;
    background: none !important;
    color: #0187c5;
    text-align: left;
    vertical-align: baseline;
    text-shadow: none;
    overflow: visible;
}

a.lfmSimpleButton strong {
    height: auto;
    padding: 0;
    background: none !important;
    display: inline;
    line-height: auto;
    vertical-align: baseline;
}

.mockAddButton {
    cursor: auto;
}

a.lfmBigButton:hover,
a.lfmSmallButton:hover {
    background-position: right bottom;
    color: #fff;
}

a.lfmBigButton:hover span,
a.lfmBigButton:hover strong,
a.lfmSmallButton:hover span,
a.lfmSmallButton:hover strong {
    background-position: left bottom;
}

a.lfmSimpleButton:hover,
a.lfmSimpleButton:hover {
    background-position: 0;
    color: #0187c5;
    text-decoration: underline;
}

a.lfmSimpleButton:hover strong {
    background-position: 0;
}


a.lfmSmallButton {
    height: 15px;
    font-size: 9px;
}
a.lfmSmallButton strong,
a.lfmSmallButton span {
    height: 13px;
    padding: 2px 5px 0 20px;
    line-height: 11px;
}

/* Share */
a.lfmSendButton {
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/grey_right.png) no-repeat right top;
    text-shadow: #2a2a2a 0 -1px 1px
}
a.lfmSendButton strong {
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/share_left.png) no-repeat left top;
}
/* Join */
a.lfmJoinButton {
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/grey_right.png) no-repeat right top;
    text-shadow: #2a2a2a 0 -1px 1px
}
a.lfmJoinButton strong {
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/join_left.png) no-repeat left top;
}
/* Befriend */
a.lfmBefriendButton {
    background: #163551 url(https://cdn.last.fm/flatness/buttons/6/add_right.png) no-repeat right top;
    text-shadow: #163551 0 -1px 1px
}
a.lfmBefriendButton strong {
    background: #163551 url(https://cdn.last.fm/flatness/buttons/6/add_left.png) no-repeat left top;
}

a.lfmBigMultiButton {
    padding-right: 19px;
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/lightgrey_dropdown_right.png) no-repeat right top;
    text-shadow: #7f7f7f 0 -1px 1px
}

a.lfmBigMultiButton span {
    background: transparent url(https://cdn.last.fm/flatness/buttons/8/more_left.png) no-repeat left top;
}

a.lfmSmallMultiButton {
    width: 26px;
    padding: 0;
    background: transparent url(https://cdn.last.fm/flatness/buttons/6/small_multi.png) no-repeat right top;
}

a.lfmSmallMultiButton span {
    width: 26px;
    padding: 0;
    background: transparent;
}

a.lfmSmallModuleButton {
    width: 31px;
    padding: 0;
    background: transparent url(https://cdn.last.fm/flatness/buttons/4/small_multi_white.png) no-repeat right top;
}

a.lfmSmallActiveModuleButton {
    background-position: right -15px !important;
}

a.lfmSmallModuleButton span {
    width: 31px;
    padding: 0;
    background: transparent;
}

a.lfmBigActiveMultiButton {
    background-position: right -18px !important;
}

a.lfmBigActiveMultiButton span {
    background-position: left -18px !important;
}

a.lfmSmallActiveMultiButton {
    background-position: left bottom !important;
}

.indicator {
    background: #b7b7b7 url(https://cdn.last.fm/flatness/buttons/3/is_right.png) no-repeat right top;
    text-shadow: #999 0 -1px 1px
}
.indicator span,
.indicator strong {
    background: #b7b7b7 url(https://cdn.last.fm/flatness/buttons/4/is_left.png) no-repeat left top;
}
.lovedindicator span,
.lovedindicator strong {
    background: #b7b7b7 url(https://cdn.last.fm/flatness/buttons/4/is_left_loved.png) no-repeat left top;
}

/* Free Download and Full Track */
a.lfmFullTrackButton {
    text-decoration: none;
}

a.lfmFullTrackButton span {
    padding: 1px 2px;
    border: 1px solid #888;
    border-radius: 2px;
    color: #888;
    vertical-align: middle;
    letter-spacing: 0;
    line-height: normal;
    font-size: 8px
}

a.lfmFreeDownloadButton {
    height: 15px;
    padding-right: 2px;
    background: url(https://cdn.last.fm/flatness/buttons/7/freedownload_right.png) no-repeat right top;
    overflow: visible;
    text-shadow: none;
    font-size: 9px;
}

a.lfmFreeDownloadButton span,
a.lfmFreeDownloadButton strong {
    height: 11px;
    line-height: 11px;
    padding: 2px 3px 2px 17px;
    background: url(https://cdn.last.fm/flatness/buttons/7/freedownload_left.png) no-repeat left top;
    color: #fff;
    white-space: nowrap;
    font-weight: normal;
}

a.lfmFreeDownloadButtonLarge {
    width: 300px;
    height: auto;
    margin: 0 0 9px 0;
    padding: 0 0 3px 0;
    overflow: visible;
    text-shadow: #1586bb 0 -1px 1px;
    font-size: 11px;
    background: url(https://cdn.last.fm/flatness/buttons/7/freedownload_large_bottom.png) no-repeat left bottom;
}
a.lfmFreeDownloadButtonLarge:hover {
    background-position: right bottom;
}

a.lfmFreeDownloadButtonLarge span,
a.lfmFreeDownloadButtonLarge strong {
    width: 269px;
    height: auto;
    margin-top: 0;
    padding: 2px 5px 0 26px;
    color: #fff;
    white-space: nowrap;
    text-align: left;
    line-height: 18px;
    background: url(https://cdn.last.fm/flatness/buttons/7/freedownload_large_top.png) no-repeat left top;
}
a.lfmFreeDownloadButtonLarge:hover span,
a.lfmFreeDownloadButtonLarge:hover strong {
    background-position: right top;
}

/* Add */
a.lfmAddButtonLarge {
    height: 23px;
    padding-right: 2px;
    background: url(https://cdn.last.fm/flatness/buttons/8/add.png) no-repeat right top;
    overflow: visible;
    color: #333;
    text-shadow: rgba(255,255,255,0.5) 0 1px 0;
}

a.lfmAddButtonLarge span,
a.lfmAddButtonLarge strong {
    height: 19px;
    line-height: 19px;
    padding: 2px 6px 2px 22px;
    background: url(https://cdn.last.fm/flatness/buttons/8/add.png) no-repeat left top;
    color: #333;
    white-space: nowrap;
}

/* Big grey CSS buttons */

.lfmFlexButton,
.customSelect-dummy {
    display: inline-block;

    border: 1px solid;
    border-color: #d2d1d1 #b4b3b3 #959595 #b4b3b3;
    border-radius: 3px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#c3c3c3)); 
    background-image: -webkit-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:    -moz-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:     -ms-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:      -o-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:         linear-gradient(top, #f2f2f2, #c3c3c3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#c3c3c3');

    color: #101010;
    text-shadow: rgba(255,255,255,0.5) 0 1px 0;    
}

.lfmFlexButton:hover,
.lfmFlexButton:focus,
.customSelect-dummy.s-active {
    text-decoration: none;
    border-color: #d0d0d0 #a5a5a5 #797979 #a5a5a5;

    background: #d3d3d3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#b3b3b3)); 
    background-image: -webkit-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:    -moz-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:     -ms-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:      -o-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:         linear-gradient(top, #f1f1f1, #b3b3b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#b3b3b3');     

    color: #101010;
}

a.lfmFlexButton span,
a.lfmFlexButton strong,
input.lfmFlexButton,
.customSelect-text {
    display: block;
    padding: 2px 10px 1px 10px;
}

input.lfmFlexButton {
    padding-bottom: 2px;
    font-size: 12px;
    /* http://www.456bereastreet.com/archive/201108/line-height_in_input_fields/ */
    line-height: 1.45;
}

/* Custom select */

.customSelect-text {
    border-right: 1px solid #a5a5a5;
    background: #fff;
    border-radius: 2px 0 0 2px;
    color: #111;
}

.customSelect-dummy-wrap {
    background: url(https://cdn.last.fm/flatness/buttons/9/flex-arrows.png) 100% -200px;
}

.customSelect-wrap select {
    font-size: 12px;
    height: 2em;
}

/* States */

.lfmFlexButton.s-secondary,
.customSelect-dummy.s-secondary {
    border-color: #404040;

    background-color: #6b6b6b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#828282), to(#545454)); 
    background-image: -webkit-linear-gradient(top, #828282, #545454); 
    background-image:    -moz-linear-gradient(top, #828282, #545454); 
    background-image:     -ms-linear-gradient(top, #828282, #545454); 
    background-image:      -o-linear-gradient(top, #828282, #545454); 
    background-image:         linear-gradient(top, #828282, #545454);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#828282', EndColorStr='#545454');

    color: #fff;
    text-shadow: rgba(0,0,0,0.5) 0 -1px 0;    
}

.lfmFlexButton.s-secondary:hover,
.lfmFlexButton.s-secondary:focus,
.customSelect-dummy.s-secondary.s-active {
    border-color: #242424;

    background: #474747;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6c6c6a), to(#323232)); 
    background-image: -webkit-linear-gradient(top, #6c6c6a, #323232); 
    background-image:    -moz-linear-gradient(top, #6c6c6a, #323232); 
    background-image:     -ms-linear-gradient(top, #6c6c6a, #323232); 
    background-image:      -o-linear-gradient(top, #6c6c6a, #323232); 
    background-image:         linear-gradient(top, #6c6c6a, #323232);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6c6c6a', EndColorStr='#323232');     
}

a.lfmFlexButton.s-hidden,
.customSelect-dummy.s-hidden {
    display: none;
}

a.lfmFlexButton.s-disabled,
.customSelect-dummy.s-disabled {
    color: #999999;
}

.customSelect-dummy.s-disabled .customSelect-dummy-wrap {
    background: url(https://cdn.last.fm/flatness/buttons/9/flex-arrows.png) 100% -250px;
}

a.lfmFlexButton.s-previous span,
a.lfmFlexButton.s-previous strong {
    background: url(https://cdn.last.fm/flatness/buttons/9/flex-arrows.png) 0 -300px;
    padding-left: 22px;
}
a.lfmFlexButton.s-previous.s-disabled span,
a.lfmFlexButton.s-previous.s-disabled strong {
    background: url(https://cdn.last.fm/flatness/buttons/9/flex-arrows.png) 0 -350px;
    padding-left: 22px;
}

a.lfmFlexButton.s-next span,
a.lfmFlexButton.s-next strong {
    background: url(https://cdn.last.fm/flatness/buttons/9/flex-arrows.png) 100% -100px;
    padding-right: 22px;
}
a.lfmFlexButton.s-next.s-disabled span,
a.lfmFlexButton.s-next.s-disabled strong {
    background: url(https://cdn.last.fm/flatness/buttons/9/flex-arrows.png) 100% -150px;
    padding-right: 22px;
}

/* Multibutton menu */

#multiButtonMenu {
    position: absolute;
    margin: 0 0 0 7px;
    z-index: 5000000;
}

#multiButtonMenu li.mAddToLibrary,
#multiButtonMenu li.mRemoveFromLibrary,
#multiButtonMenu li.mAddToFriends {
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}
#multiButtonMenu li.mSend {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

#multiButtonMenu li {
    display: none;
}

#multiButtonMenu div.mAddToLibrary li.mAddToLibrary,
#multiButtonMenu div.mRemoveFromLibrary li.mRemoveFromLibrary,
#multiButtonMenu div.mAddToFriends li.mAddToFriends,
#multiButtonMenu div.mSend li.mSend,
#multiButtonMenu div.mObsess li.mObsess,
#multiButtonMenu div.mAddToPlaylist li.mAddToPlaylist,
#multiButtonMenu div.mAddTags li.mAddTags,
#multiButtonMenu div.mMessage li.mMessage,
#multiButtonMenu div.mLove li.mLove,
#multiButtonMenu div.mUnlove li.mUnlove,
#multiButtonMenu div.mBan li.mBan,
#multiButtonMenu div.mUnban li.mUnban,

#multiButtonMenu div.mMessageAll li.mMessageAll,
#multiButtonMenu div.mEditPermissions li.mEditPermissions,
#multiButtonMenu div.mAbdicate li.mAbdicate,
#multiButtonMenu div.mLeave li.mLeave,

#multiButtonMenu div.mEditDetails li.mEditDetails,

#multiButtonMenu div.mBuy li.mBuy, 

#multiButtonMenu div.mLoading li.mLoading {
    display: block;
}

/* Leave space for the price/loading spinner */
#multiButtonMenu div.mBuy li.mBuy a {
    padding-right: 45px;
}

#multiButtonMenu div.mBuy li.mBuy span.priceHint,
#multiButtonMenu div.mBuy li.mBuy img.loading {
    position: absolute;
    right: 5px;
}

#multiButtonMenu div.mBuy li.mBuy span.indicator_free,
#multiButtonMenu div.mBuy li.mBuy span.indicator_free {
    margin-top: 1px;
}

#multiButtonMenu div.mBuy li.mBuy img.loading {
    margin-top: 5px;
}

#multiButtonMenu div.mLoading li.mLoading a {
    height: 73px;
    width: 70px;
    background: url(https://cdn.last.fm/flatness/spinner_big_f2f2f2.gif) center no-repeat #f2f2f2 !important;
}


/* Multi Button in a list format */

.multiButtonIcons li {
    float: left;
    width: 30px;
    height: 30px;    
    overflow: hidden;
    padding: 0;
}

.multiButtonIcons-hidden {
    display: none;
}

.multiButtonIcons a {
    background: url(https://cdn.last.fm/flatness/buttons/9/multibuttonicons.png);
    display: block;
    padding-top: 10em;
}

.multiButtonIcons .multiButtonIcons-action-playlist { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-playlist a { background-position: -7px -5px; }
.multiButtonIcons .multiButtonIcons-action-playlist a:hover,
.multiButtonIcons .multiButtonIcons-action-playlist a:focus { background-position: -7px -45px; }
.multiButtonIcons .multiButtonIcons-action-playlist a:active { background-position: -7px -85px; }

.multiButtonIcons .multiButtonIcons-action-tag { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-tag a { background-position: -46px -5px; }
.multiButtonIcons .multiButtonIcons-action-tag a:hover,
.multiButtonIcons .multiButtonIcons-action-tag a:focus { background-position: -46px -45px; }
.multiButtonIcons .multiButtonIcons-action-tag a:active { background-position: -46px -85px; }

.multiButtonIcons .multiButtonIcons-action-share { width: 31px; }
.multiButtonIcons .multiButtonIcons-action-share a { background-position: -84px -5px; }
.multiButtonIcons .multiButtonIcons-action-share a:hover,
.multiButtonIcons .multiButtonIcons-action-share a:focus { background-position: -84px -45px; }
.multiButtonIcons .multiButtonIcons-action-share a:active { background-position: -84px -85px; }

.multiButtonIcons .multiButtonIcons-action-buy { width: 30px; }
.multiButtonIcons .multiButtonIcons-action-buy a { background-position: -125px -5px; }
.multiButtonIcons .multiButtonIcons-action-buy a:hover,
.multiButtonIcons .multiButtonIcons-action-buy a:focus { background-position: -125px -45px; }
.multiButtonIcons .multiButtonIcons-action-buy a:active { background-position: -125px -85px; }

.multiButtonIcons .multiButtonIcons-action-addLibrary { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-addLibrary a { background-position: -165px -5px; }
.multiButtonIcons .multiButtonIcons-action-addLibrary a:hover,
.multiButtonIcons .multiButtonIcons-action-addLibrary a:focus { background-position: -165px -45px; }
.multiButtonIcons .multiButtonIcons-action-addLibrary a:active { background-position: -165px -85px; }

.multiButtonIcons .multiButtonIcons-action-removeLibrary { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-removeLibrary a { background-position: -165px -125px; }
.multiButtonIcons .multiButtonIcons-action-removeLibrary a:hover,
.multiButtonIcons .multiButtonIcons-action-removeLibrary a:focus { background-position: -165px -165px; }
.multiButtonIcons .multiButtonIcons-action-removeLibrary a:active { background-position: -165px -205px; }

.multiButtonIcons .multiButtonIcons-action-love { width: 31px; }
.multiButtonIcons .multiButtonIcons-action-love a { background-position: -204px -5px; }
.multiButtonIcons .multiButtonIcons-action-love a:hover,
.multiButtonIcons .multiButtonIcons-action-love a:focus { background-position: -204px -45px; }
.multiButtonIcons .multiButtonIcons-action-love a:active { background-position: -204px -85px; }

.multiButtonIcons .multiButtonIcons-action-unlove { width: 31px; }
.multiButtonIcons .multiButtonIcons-action-unlove a { background-position: -204px -125px; }
.multiButtonIcons .multiButtonIcons-action-unlove a:hover,
.multiButtonIcons .multiButtonIcons-action-unlove a:focus { background-position: -204px -165px; }
.multiButtonIcons .multiButtonIcons-action-unlove a:active { background-position: -204px -205px; }


.multiButtonIcons li {
    overflow: visible;
    position: relative;
}

.multiButtonIcons a {
    position: absolute;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.multiButtonIcons a:hover {
    overflow: visible;
    text-decoration: none;
}

.multiButtonIcons .tooltip-wrap {
    position: absolute;
    width: 40em;
    margin-left: -20em;
    left: 50%;
    bottom: 90em;
}

.multiButtonIcons a:hover .tooltip-wrap {
    bottom: 100%;
}

.multiButtonIcons .tooltip-wrap2 {
    position: absolute;
    left: 50%;
    bottom: 0;
}

.multiButtonIcons .tooltip {
    position: relative;
    left: -50%;
    bottom: 4px;
}

.tooltip {
    display: block;
    border: 1px solid #aaa;
    background: #fff;
    color: #1b1b1b;
    border-radius: 5px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;      
}

.tooltip-text {
    display: block;
    padding: 7px 10px;    
    background: url(https://cdn.last.fm/flatness/tooltip/tooltip-arrow.png) 50% 100% no-repeat;
    margin-bottom: -13px;
    padding-bottom: 20px;
}


/* Buy / Download */

div.lfmDownloadButton,
div.buyButton {
    display: inline;
    margin-right: 4px;
}

div.lfmBuyButtonContainRight,
div.lfmBuyButtonContainRight div.lfmDropDown {
    float: right;
    text-align: right;
}
div.lfmBuyButtonContainRightDownloadsRingtones div.lfmDownloadButton {
    clear: right;
}
a.lfmBuyButton,
a.lfmDownloadButton {
    white-space: nowrap;
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/buy_dl_right.png) no-repeat right top;
    text-shadow: #777 0 -1px 1px;
    white-space: nowrap;
}
a.lfmRingtoneButton {
    font-size: 11px;
}
a.lfmRingtoneButton .mobile_icon {
    vertical-align: middle;
}
a.lfmBuyButton span,
a.lfmBuyButton strong {
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/buy_left.png) no-repeat left top;
}
a.lfmDownloadButton span,
a.lfmDownloadButton strong {
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/dl_left.png) no-repeat left top;
}

a.lfmRingtoneButtonDropDown,
a.lfmBuyButtonDropDown,
a.lfmDownloadButtonDropDown {
    padding: 0 14px 0 0;
    white-space: nowrap;
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/buy_dl_drp_right.png) no-repeat right top;
    text-shadow: #777 0 -1px 1px;
    white-space: nowrap;
}
a.lfmRingtoneButtonDropDown span,
a.lfmRingtoneButtonDropDown strong {
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/rt_drp_left.png) no-repeat left top;
}
a.lfmBuyButtonDropDown span,
a.lfmBuyButtonDropDown strong {
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/buy_drp_left.png) no-repeat left top;
}
a.lfmDownloadButtonDropDown span,
a.lfmDownloadButtonDropDown strong {
    background: #979797 url(https://cdn.last.fm/flatness/buttons/6/dl_drp_left.png) no-repeat left top;
}

a.lfmBigBuyMoreButton,
a.lfmMultiBuyDialogButton {
    padding: 0 3px 0 0;
    white-space: nowrap;
    background-image: url(https://cdn.last.fm/flatness/buttons/8/buy_right_nodropdown.png);
    text-shadow: #333 0 1px 1px;
}

.lfmDropDown a.lfmBigBuyMoreButton {
    padding: 0 19px 0 0;
    background-image: url(https://cdn.last.fm/flatness/buttons/8/buy_right.png);
}

a.lfmBigBuyMoreButton span,
a.lfmBigBuyMoreButton strong,
a.lfmMultiBuyDialogButton span,
a.lfmMultiBuyDialogButton strong {
    background-image: url(https://cdn.last.fm/flatness/buttons/8/buy_left.png);
}

a.lfmSmallBuyMoreButton {
    padding: 0 3px 0 0;
    white-space: nowrap;
    background-image: url(https://cdn.last.fm/flatness/buttons/8/buy_right_small_nodropdown.png);
    text-shadow: #333 0 1px 1px;
}

.lfmDropDown a.lfmSmallBuyMoreButton {
    padding: 0 17px 0 0;
    background-image: url(https://cdn.last.fm/flatness/buttons/8/buy_right_small.png);
}

a.lfmSmallBuyMoreButton span,
a.lfmSmallBuyMoreButton strong {
    background-image: url(https://cdn.last.fm/flatness/buttons/8/buy_left_small.png);
}

.expanded a.lfmRingtoneButtonDropDown,
.expanded a.lfmBuyButtonDropDown,
.expanded a.lfmDownloadButtonDropDown {
    background-position: right center;
}

.expanded a.lfmRingtoneButtonDropDown span,
.expanded a.lfmRingtoneButtonDropDown strong,
.expanded a.lfmBuyButtonDropDown span,
.expanded a.lfmBuyButtonDropDown strong,
.expanded a.lfmDownloadButtonDropDown span,
.expanded a.lfmDownloadButtonDropDown strong {
    background-position: left center;
}

.buyButtonSupplier {
    padding-right: 7px;
}

.buyButtonSupplier,
.buyButtonSupplier a {
    font-size: 10px;
    line-height: 2;
    color: #0187c5;
}

.buyButtonSupplier .textlink {
    font-weight: bold;
}

.buyButtonSupplier a:hover {
    text-decoration: none;
}

.buyButtonSupplier a:hover .textlink {
    text-decoration: underline;
}


.lfmDropDown {
    display: inline-block;
    z-index: 1;
    padding: 0;
}

ul.lfmDropDownBody {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 0;
    font-size: 10px;
}

.no-js ul.lfmDropDownBody {
    position: relative;
    display: inline;
    display: inline-block;
    margin: 0 1em;
}

ul.lfmDropDownBody li {
    width: auto;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}
ul.lfmDropDownBody li a {
    display: block;
    padding: 0 8px;
    background: #f2f2f2;
    color: #6f6f6f;
    font-weight: normal;
    text-decoration: none;
}
ul.lfmDropDownBody li a:hover {
    background: #6f6f6f;
    color: #f2f2f2;
}
ul.lfmDropDownBody li small {
    margin-left: 4px;
    font-size: 9px;
    font-weight: bold;
}

ul.lfmBuyDropDownBody {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 3px 3px 5px #ccc;
}

.js ul.lfmBuyDropDownBody {
    display: none;
}

.js ul.lfmDropDown-expanded {
    display: inline;
}

ul.lfmBuyDropDownBody li {
    border-bottom-color: #fff;
    font-size: 11px;
    border-top: 1px solid #fff;
}

ul.lfmSmallBuyDropDownBody li {
    font-size: 10px;
}

ul.lfmBuyDropDownBody li.buyType {
    padding: 2px 8px 0 8px;
    color: #999;
}

ul.lfmBuyDropDownBody li.last {
    padding-bottom: 5px;
    border-bottom-color: #ccc;
}

ul.lfmBuyDropDownBody li a {
    position: relative;
    background: #fff;
    color: #000;
    padding: 0 8px;
    padding-right: 60px;
}

ul.lfmBuyDropDownBody li a:hover {
    background: #5297FF;
    color: #fff;
}

ul.lfmBuyDropDownBody li small {
    position: absolute;
    display: block;
    top: 1px;
    right: 8px;
    font-weight: normal;
    display: block;
    width: 50px;
    text-align: right;
    font-size: 10px;
    overflow: visible;
    cursor: pointer;
}

ul.lfmBuyDropDownBody li small .indicator_free,
ul.lfmBuyDropDownBody li small .indicator_onsale {
    position: relative;
    right: -3px;
    font-size: 10px;
}

.a-charts .lfmMultiBuyDialogButton {
    margin: 0 0 1em 0;
}

.r-user.a-library .lfmMultiBuyDialogButton {
    margin: 6px 0 0 0;
} 

.r-user.a-library .lovedtracks.lfmMultiBuyDialogButton {
    margin: 0 0 -4.5em 0;
}

/* Toggles */

.action-button,
.toggleButton {
    display: inline-block;
    border: 1px solid #dad9d9;
    border-color: #dad9d9 #dad9d9 #b3b3b3;
    border-radius: 3px;
    font-size: 12px;
    padding: 5px 10px;
    color: #333;
    text-shadow: rgba(255,255,255,0.5) 0 1px 0;
    background: #ddd;
    background: -moz-linear-gradient(#f0f0f0, #c5c5c5);
    background: -webkit-linear-gradient(#f0f0f0, #c5c5c5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0f0f0, endColorstr=#c5c5c5);
    cursor: pointer;
}

.toggleButton {
    margin: 0 0.5em 0 0;
}

a.toggleButton {
    color: inherit;
}

.ie input.toggleButton {
    margin-right: 1em;
    overflow: visible;
}

.ie9 .action-button,
.ie9 .toggleButton {
    border-radius: 0; /* Filter and border-radius don't play nice  */
}

.action-button:hover,
.action-button:focus,
.toggleButton:hover,
.toggleButton:focus {
    background: #ccc;
    background: -moz-linear-gradient(#f0f0f0, #b3b3b3);
    background: -webkit-linear-gradient(#f0f0f0, #b3b3b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0f0f0, endColorstr=#b3b3b3);
    text-decoration: none;
}

.action-button:active {
    background: #bbb;
    color: #666;
    background: -moz-linear-gradient(#ccc, #f0f0f0);
    background: -webkit-linear-gradient(#ccc, #f0f0f0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#f0f0f0);
    border-color: #dad9d9;
}

.action-button[disabled] {
   opacity: 0.5;
   pointer-events: none;
}

/* extends .toggleButton  */
a.activeToggleButton,
.activeToggleButton {
    color: #fff;
    text-shadow: rgba(0,0,0,0.5) 0 1px 0;
    border-color: #3F6373;
    background: #00709C;
    background: -moz-linear-gradient(#00709C, #009CC9);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00709C), to(#009CC9));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00709C, endColorstr=#009CC9);
}

.activeToggleButton:hover,
.activeToggleButton:focus {
    background: #0085B7;
    background: -moz-linear-gradient(#0085B7, #01A9D8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0085B7), to(#01A9D8));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0085B7, endColorstr=#01A9D8);
}

/* calendar */

table.calendar {
  width: 158px;
  font-size: 11px;
  line-height: 1em;
  border-collapse: collapse;
  margin-bottom: 2em;
}

.sidebar table.calendar {
  margin-bottom: 1em;
}

table.chartSelectCalendar {
  margin-bottom: 0;
}

table.calendar caption {
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #A0A0A0;
  padding-bottom: 0.5em;
  line-height: 1em;
  margin: 0;
}

table.calendar caption a {
  color: #A0A0A0;
  text-decoration: none;
  background-color: transparent;
}

table.calendar thead tr th {
  color: #A0A0A0;
  background: #FFF;
  font-weight: normal;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

table.chartSelectCalendar thead tr th {
  border: 1px solid #ccc;
  padding-top: 0.3em;
  padding-bottom: 0.4em;
}

table.chartSelectCalendar thead tr th#tableMonthHeading {
  border-left: hidden;
  border-right: hidden;
}

table.calendar tbody tr td {
  color: #545454;
  text-align: right;
  border: 1px solid #ccc;
  line-height: 1em;
  vertical-align: bottom;
  padding: 0;
}

table.calendar tbody tr td.noday {
  border: none;
  background-color: transparent;
}

table.calendar tbody tr td span,
table.chartSelectCalendar tbody tr td a,
table.chartSelectCalendar tbody tr.nodata td {
  padding: 0.75em 0.25em 0.25em 0;
  display: block;
}

table.chartSelectCalendar tbody tr.nodata td {
  display: table-cell;
}

table.calendar tr td { 
    background-color: #eee;
}

table.calendar tr td a {
  padding: 0.75em 0 0 0;
  text-decoration: none;
  margin: 0;
  display: block;  
  font-weight: bold;
  background-color: #fff;
}

table.calendar tbody tr td.marker {
  border: none;
  border-left: 1px solid #ccc;
  background-color: transparent !important;
  padding: 0 0 0 0.3em !important;
  vertical-align: middle !important;
}

table.calendar tr td.marker img {
  visibility: hidden;
  position: relative;
  top: 0.2em;
}

table.calendar tr.selected td.marker img {
  visibility: visible;
}

table.calendar tr.invisibleMarker td.marker img,
table.calendar tr.nodata td.marker img {
  visibility: hidden;
}

table.calendar tr td a:hover,
table.calendar tr td.highlight a {
  text-decoration: none;
  background-color: #CCC !important;
}

table.chartSelectCalendar tr td a:hover,
table.calendar tr.selected td,
table.calendar tr.selected td a:hover {
  text-decoration: none;
  background: #E9EBEF !important;
}

table.calendar tbody tr td.past,
table.calendar tbody tr.nodata td,
table.calendar tbody tr td.trailing {
  color: #CCC;
}

table.calendar tbody tr.nodata td {
  background: #FFF !important;
}

table.calendar thead tr th.weekend {
  font-weight: bold;
}

ul.calendarLegend {
  list-style-type: none;
  margin: 0 0 1.4em 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.25em;
}

ul.calendarLegend li {
  margin: 0 0 0.42em 0;
  padding: 0 0 0 1.5em;
}

ul.calendarLegend li span {
  float: left;
  display: inline;
  width: 1em;
  height: 1em;
  border: 1px solid #ccc;
  margin-left: -1.5em;
}

ul.calendarLegend li span.selected {
  background-color: #E9EBEF;
}

/* calSheet */

span.calSheet {
    display: block;
    text-align: center;
}

a .calSheet {
    cursor: pointer;
}

span.calSheet span {
    display: block;
    float: left;
    width: 100%;
}

span.calSheet span.month {
    background: #D51007;
    background: -moz-linear-gradient(#E21403, #D20F02);
    background: -webkit-linear-gradient(#E21403, #D20F02);
    background: linear-gradient(#E21403, #D20F02);
    border: 1px solid #D51007;
    border-radius: 2px 2px 0 0;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1em;
    font-weight: bold;
    text-align: center;
}

span.calSheet span.day {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 2px 2px;
    border-top: none;
    color: #000;
    line-height: 1.4em;
    font-weight: bold;
    letter-spacing: -0.1em;
}

/* calSheetSmall */

span.calSheetSmall {
    width: 25px;
}

span.calSheetSmall span.month {
    height: 10px;
    font-size: 9px;
}

span.calSheetSmall span.day {
    font-size: 14px;
}

/* calSheetBig, used on artist pages */

span.calSheetBig {
    width: 58px;
    margin-right: 5px;
}

span.calSheetBig span.month {
    background-color: #be0d1d;
}

span.calSheetBig span.month {
    height: 22px;
    line-height: 22px;
    font-size: 13px;
}

span.calSheetBig span.day {
    font-size: 24px;
    height: 35px;
    line-height: 35px;
    letter-spacing: 0;
}


#captcha { 
    margin-top: 10px;
}

#trackMetaData #captcha {
    margin-left: -80px;
}

#captcha fieldset {
    min-height: 140px;
}

#recaptcha_image {
    margin-top: 10px;
    font-size: 11px;
    height: auto !important; /* override inline style */
}

#recaptcha_image img {
    opacity: 0.7;
    filter:alpha(opacity=70);
    border: 1px solid #ccc;
}

#recaptcha_disclaimer {
    padding-top: 0.5em;
    font-size: 10px;
    line-height: 13px;
    color: #999;
}

#composeform #recaptcha_disclaimer {
    padding-left: 0;
}

#recaptcha_disclaimer a {
    color: #999;
}

.recaptcha_options {
    margin-top: 1em;
}

.recaptcha_options li {
    line-height: 16px;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    zoom: 1;
}

.recaptcha_options a { 
    padding-left: 20px;
    display: block; 
}

.recaptcha_option_refresh {
    background: url(https://cdn.last.fm/flatness/join/captcha/refresh.png) no-repeat;
}

.recaptcha_option_audio {
    background: url(https://cdn.last.fm/flatness/join/captcha/audio.png) no-repeat;
}

.recaptcha_option_image {
    background: url(https://cdn.last.fm/flatness/join/captcha/text.png) no-repeat;
}

.recaptcha_option_help {
    background: url(https://cdn.last.fm/flatness/join/captcha/help.png) no-repeat;
}

.fieldstatus {
    position: relative;
    display: block;
    float: right;
    width: 280px;
    margin: 0 0 0 0;
    font-size: 11px;
    line-height: 14px;
}

/* Narror captcha info boxes for certain types of pages with thin
   column widths */
#shoutboxContainer .fieldstatus,
.shoutboxInput .fieldstatus {
    width: 180px;
    margin-bottom: 10px;
}

/* For areas where we simply can't fit the captcha instructions next
   to the captcha itself */
.journals .shoutboxInput #recaptcha_image {
    clear: both;
}

#trackMetaData #shoutboxContainer .fieldstatus {
    width: 220px;
}

.fieldstatus div {
    padding: 8px 10px;
    color: #666;
    background: #e9e9e9;
    border: 1px solid #dbdbdc;
}

/* creates the larger triangle */
.fieldstatus div:before {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    width:0;
    height:0;
    top:6px; /* controls vertical position */
    left:-21px; /* value = - border-left-width - border-right-width */
    border-width:10px 11px;
    border-style:solid;
    border-color:transparent #dbdbdc transparent transparent;
}

/* creates the smaller  triangle */
.fieldstatus div:after {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    width:0;
    height:0;
    top:7px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    left:-18px; /* value = - border-left-width - border-right-width */
    border-width:9px 10px;
    border-style:solid;
    border-color:transparent #e9e9e9 transparent transparent;
}

.fieldstatus div.error {
    padding-left: 30px;
    background: #fff9ad url(https://cdn.last.fm/flatness/components/message/error.png) no-repeat 7px 7px;
    color: #000;
    border-color: #dedcc8;
}

.fieldstatus div.error:before {
    border-color:transparent #dedcc8 transparent transparent;
}

.fieldstatus div.error:after {
    border-color:transparent #fff9ad transparent transparent;
}

.fieldstatus div.ok {
    padding-left: 30px;
    background: #d4e8c9 url(https://cdn.last.fm/flatness/components/message/ok.png) no-repeat 7px 7px;
    color: #000;
    border-color: #d1d7cf;
}

.fieldstatus div.ok:before {
    border-color:transparent #d1d7cf transparent transparent;
}

.fieldstatus div.ok:after {
    border-color:transparent #d4e8c9 transparent transparent;
}

#editor #captcha {
   position: relative;
}

#shoutboxContainer #captcha label,
#editor #captcha label {
    font-weight: bold;
    font-size: 12px;
}

#shoutboxContainer #captcha input.input,
#editor #captcha input.input {
    width: 148px;
    margin-left: 5px;
}

#editor #recaptcha_response_field_status {
    position: absolute;
    top: 0;
    margin-left: 330px;
}

.ie7 #editor #recaptcha_response_field_status {
    margin-left: 200px;
}


div.catalogueHead {
    position: relative;
}

/* 
    Define stacking order above lower panels for correct FB dialogue display.
    Required as absolutely positioned FB iframe is within this relative context and IE ignores stacking
*/
.ie7 .catalogueHead,
.ie6 .catalogueHead {
    z-index: 1;
}

div.catalogueHead h1 {
    display: inline;
    font-size: 18px;
}

/* image */

div.catalogueHead .catalogueImage {
    float: left;
    margin: 0 15px 10px 0;
}

div.catalogueHead .catalogueImage span.image {
    display: block;
    padding: 1px;
    background: #fff;
    border: 1px solid #ccc;
}

div.catalogueHead .catalogueImage span.image span {
    display: block;
    height: auto;
    overflow: hidden;
}

div.catalogueHead .catalogueImage img {
    display: block;
}

div.catalogueHead span.moduleOptions {
    padding: 1px 3px;
    background: #F7F7F7;
}

div.catalogueHead a.catalogueImage:hover {
    text-decoration: none;
}

div.catalogueHead a.catalogueImage:hover span {
    text-decoration: underline;
}

/* stats */

div.catalogueHead p.stats,
div.catalogueHead p.listeningNow {
    margin: 12px 0;
    color: #666;
    font-size: 11px;
    line-height: 1.363636em;
}

div.catalogueHead p.listeningNow {
    margin-bottom: 0;
}

/* buttons */

div.catalogueHead div.buttons {
    margin: 12px 0;
    font-size: 0;
}

.ie6 div.catalogueHead div.buttons .lfmButton,
.ie6 div.catalogueHead div.buttons .indicator {
    margin-bottom: 4px;
}

/* tags */

div.catalogueHead div.tags p {
    font-size: 11px;
    line-height: 1.363636em;
}
div.catalogueHead div.tags h3 {
    margin: 15px 0 0 0;
}

div.catalogueHead p.tags {
    margin: 0;
    padding-right: 20px;
    text-indent: -20px;
    font-size: 11px;
    line-height: 1.181818em;
}


div.catalogueHead p.tags span {
    position: relative;
    left: 20px;
    top: 0;
    color: #0187c5;
}

div.catalogueHead p.tags span img {
    margin-right: 5px;
    vertical-align: middle;
}

div.trackHead div.tags {
    margin-top: 15px;
}


/* comments */

div.catalogueHead p.comments {
    font-size: 11px;
    line-height: 1.181818em;    
}

div.catalogueHead .shoutcount {
    font-size: 11px;
}

div.catalogueHead p.comments {
/*    margin-bottom: 1em;*/
}

div.catalogueHead p.comments img {
    margin: 0 4px 0px 1px;
    vertical-align: bottom;
}


/* album specific */

.albumHead {}

.albumHead div.albumCover {
    float: right;
    margin: 0 0 10px 15px;
}

.albumHead div.albumCover p {
    margin: 5px 0 0 0;
}

.albumHead h1 {
    font-size: 14px;
    font-weight: bold;
}

.albumHead h1 span {
    display: block;
    font-size: 12px;
}

.albumHead h1 a {
    font-weight: bold;
    color: #000;
}

.albumHead h1 a:hover {
    color: #0187c5;
}

/* track specific */

div.trackHead a.featuredAlbum {
    display: inline;
    float: left;
    margin: 0 12px 0 0;
}

div.trackHead h1 {
    font-size: 16px;
    line-height: 1.1875;
    margin-bottom: 0;
}

div.trackHead h1 a {
    color: #000;
}

div.trackHead h1 a:hover {
    color: #0187c5;
    text-decoration: none;
}

div.trackHead h1 .icon {
    vertical-align: baseline;
    margin: 0 5px -3px 0;
}

div.trackHead div.buttons {
    margin: 0.75em 0 0 0;
}

div.trackHead p.featuredAlbums {
    margin: 0;
    font-size: 11px;
    line-height: 1.363636em;
}

div.trackHead span.shoutCount img.icon,
div.albumHead span.shoutCount img.icon,
div.artistHead span.shoutCount img.icon {
    display: none;
}

.catalogue-scrobble-graph {
    background: #eee;
    padding: 0 2px 2px;
    border-radius: 3px;
}

.catalogue-scrobble-graph-top-data {
    float: left;
    margin: 12px 10px;
    line-height: 20px;
}

.catalogue-scrobble-graph-top-data strong {
    display: block;
    font-size: 18px;
}

.catalogue-scrobble-graph-inner-wrapper {
    padding: 6px 10px;
    clear: both;
    border-radius: 3px;
    background: url('https://cdn.last.fm/flatness/spinner_big_ffffff.gif') center no-repeat #fff;
}

.catalogue-scrobble-graph-title {
    font-size: 12px;
    margin-bottom: 12px;
    color: #999;
}

.catalogue-scrobble-graph iframe {
    max-width: 100%;
}

.catalogue-scrobble-graph-container {
    height: 180px;
}

@media only screen and (max-width: 540px) {
    .catalogue-scrobble-graph-container {
        height: 144px;
    }
}

/* ==========================================================================
   Personal tag styling
   ========================================================================== */

.personal-tags--hidden-heading {
    margin-top: -12px;
}

.personal-tags--hidden-heading h3 {
    display: inline-block;    
}

.personal-tag-icon {
    display: inline-block;
    height: 30px;
    width: 30px;
}

table.barChart {
  font-family: Arial, Helvetica, Verdana, "Free Sans", "FreeSans", sans-serif;
}

table.barChart td.subject {
  width: 62%;
  background-image: url("https://cdn.last.fm/depth/charts/barchart_fakeborder.gif");
  background-position: right top;
  background-repeat: repeat-y;
}

table.tagChart td.subject {
  background-image: url("https://cdn.last.fm/depth/charts/tagchart_fakeborder.gif");
}

table.fullTrackChart td.subject,
table.trackChart td.subject {
  background-image: none;
}

table.barChart td.quantifier {
  width: 38%;
}

table.barChart a {
	background: none;
	padding: 0 0.15em;
}

table.barChart td {
	border-top: solid 1px #DADADA;
	padding: 2px 5px 4px 5px;
	font-size: 12px;
	line-height: 1.16667em;
	vertical-align: top;
}

table.tagChart td {
  border-top: 1px solid #C5D0DD;
}

table.barChart td.subject span {
  height: 1.16667em;
  overflow: hidden;
  display: block;
  padding-right: 8px;
}

table.fullTrackChart td.subject span,
table.trackChart td.subject span {
  padding-right: 0;
}

table.barChart td.position {
	text-align: right;
	color: #969696;
	border-right: solid 1px #B5B5B5;
}

table.barChart td.delta {
	color: #BDBDBD;
	padding-left: 0;
	padding-right: 0;
	font-size: 9px;
	white-space: nowrap;
}

table.barChart td.delta img {
	margin-right: 1px;
}

table.tagChart td.position {
	color: #98AABF;
	border-right: solid 1px #98AABF;
}

table.barChart td.playButtons {
  padding: 2px 0 0 6px;
}

table.barChart td.addToPlaylistButtons {
  padding: 2px 10px 0 4px;
  background-image: url("https://cdn.last.fm/depth/charts/barchart_fakeborder.gif");
  background-position: right top;
  background-repeat: repeat-y;
}

table.barChart tr:hover td,
table.barChart tr.hover td  {
  background-color: #EEE;
  border-top: solid 1px #B5B5B5;
}

table.tagChart tr:hover td,
table.tagChart tr.hover td  {
  background-color: #E2E8F1;
  border-top: solid 1px #A8B9CC;
}

table.barChart tr:hover td.addToPlaylistButtons,
table.barChart tr:hover td.addToPlaylistButtons {
  color: #FFF;
}

table.barChart tr:hover td.quantifier,
table.barChart tr.hover td.quantifier {
	background-color: #FFF;
	border-top: none;
}

table.barChart td.subject a:hover {
  background: none;
  color: #545454;
}

table.tagChart td.subject a,
table.tagChart td.subject a:hover {
  color: #4B72A9;
}

table.barChart td.quantifier {
	padding: 0;
	color: #FFF;
  border-top: none;
}

table.barChart td.quantifier div {
	background-color: #CCC;
	height: 18px;
	line-height: 18px;
}

table.tagChart td.quantifier div {
	background-color: #C5D0DD;
}

table.barChart td.quantifier div span {
	padding-left: 4px;
	padding-right: 9px;
	background: url("https://cdn.last.fm/depth/charts/barchart_end.gif") top right no-repeat;
	display: block;
	white-space: nowrap;
}

table.tagChart td.quantifier div span {
	background: url("https://cdn.last.fm/depth/charts/tagchart_end2.gif") top right no-repeat;
}


/* half-width stuff */

#content table.inlineChart td.subject {
  width: 90%;
  padding: 0;
  background-image: none;
}

#content table.inlineChart td.position {
  color: #969696;
}

#content table.inlineChart td.delta {
  color: #AAA;
}

#content table.inlineChart tr td.playButtons {
  border-bottom: 2px solid #FFF;
  background-image: url("https://cdn.last.fm/depth/charts/inlinechart_fixed_bg.gif");
  background-position: right top;
  background-repeat: repeat-x;
}

#content table.inlineChart div {
  position: relative;
  padding: 0 5px;
}

#content table.inlineChart span.text {
  position: relative;
  z-index: 5;
  padding: 2px 0;
}

#content table.inlineChart span.percentageBar {
  background-color: #E8E8E8;
  display: block;
  background-image: url("https://cdn.last.fm/depth/charts/half-width_bg.gif");
  background-position: right center;
  background-repeat: no-repeat;
  position: absolute;
  height: 18px;
  z-index: 0;
  top: 0;
  left: 0;
  min-width: 9px;
}

table.barChart td.counter {
  text-align: right;
  color: #969696;
  white-space: nowrap;
}

#content table.inlineChart tr:hover span.percentageBar,
#content table.inlineChart tr.hover span.percentageBar {
  background-color: #DFDFDF;
  background-image: url("https://cdn.last.fm/depth/charts/half-width_bg_hover.gif");
}

#content table.inlineChart tr:hover td.subject,
#content table.inlineChart tr.hover td.subject,
#content table.inlineChart tr:hover td.position,
#content table.inlineChart tr.hover td.position,
#content table.inlineChart tr:hover td.delta,
#content table.inlineChart tr.hover td.delta {
  background-image: none;
  background-color: #EEE;
}

#content table.inlineChart tr:hover td.playButtons,
#content table.inlineChart tr.hover td.playButtons {
  border-bottom-color: #EEE;
  background-image: url("https://cdn.last.fm/depth/charts/inlinechart_fixed_bg_hover.gif");
}

/* add to playlist buttons */
/* See the IE CSS file for some stuff! */

#content table a.addToPlaylist {
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  background-position: left top;
  float: right;
  display: inline;
  margin-top: -1px;
  margin-bottom: -1px;
}

#content table td > a.addToPlaylist {
 visibility: hidden;
 background-image: url("https://cdn.last.fm/depth/icons/addtoplaylist.gif");
}

#content table a.addToPlaylist span {
  width: 16px;
  height: 16px;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  text-indent: -9999px;
  display: block;
}

#content table tr:hover a.addToPlaylist {
  visibility: visible;
  background-image: url("https://cdn.last.fm/depth/icons/addtoplaylist.gif");
  background-repeat:no-repeat;
}

#content table tr.previewhover a.addToPlaylist,
#content table tr.flphover a.addToPlaylist,
#content table tr.hover a.addToPlaylist {
  background-image: url("https://cdn.last.fm/depth/icons/addtoplaylist.gif");
  background-repeat:no-repeat;
}

#content table td a.addToPlaylist:hover {
 background-image: url("https://cdn.last.fm/depth/icons/addtoplaylist.gif");
 cursor: pointer !important;
}

#content table tr td a.playlistAddProgress,
#content table tr td a.playlistAddProgress:hover {
  background-image: url("https://cdn.last.fm/depth/global/progress.gif");
  background-position: 0 -2px;
  background-repeat:no-repeat;
}

#content table tr td a.playlistAdded,
#content table tr td a.playlistAdded:hover {
  background-image: url("https://cdn.last.fm/depth/icons/track_added.gif") !important;
  background-repeat:no-repeat;
}

.cloud {
    font-family: "Helvetica Neue", Arial, Helvetica, Verdana, "Free Sans", "FreeSans", sans-serif;
    font-weight: bold;
    text-align: center;
}
.cloud .cloudItem {
    margin: 5px;
    vertical-align: middle;
    line-height: 1;
}

.collapsibleBox {
    margin-bottom: 36px;
    position: relative;
}

.ie .collapsibleBox {
    zoom: 1;
}

.collapsibleBox-heading h3,
.collapsibleBox-body-inner2,
.collapsibleBox-heading-openclose a {
    border: 1px solid #bbb;
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.collapsibleBox-heading h3 {
    position: relative;
    z-index: 2;

    font-weight: normal;
    background: #ccc;
    padding: 0.7em 1em 0.7em 1em;
    color: #1b1b1b;

    border-radius: 7px 7px 0px 0px; 

    background: #f9f9f9;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
    background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);     
}

.ie6 .collapsibleBox-heading h3,
.ie7 .collapsibleBox-heading h3,
.ie8 .collapsibleBox-heading h3 {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );    
}

.ie9 .collapsibleBox-heading h3 {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}

.js .collapsibleBox-heading,
.js .collapsibleBox.s-closed .collapsibleBox-body {
    cursor: pointer;
}

.js .collapsibleBox.s-closed .collapsibleBox-heading h3 {
    position: relative;
    border-bottom: 1px solid #bbb;
    border-radius: 7px;
}

.collapsibleBox-heading h3 {
    font-size: 18px;
    font-weight: normal;
}

.collapsibleBox-heading h3 strong {
    color: #0187c5;
}

/*.js .collapsibleBox.s-closed .collapsibleBox-heading:hover .collapsibleBox-heading-openclose {
    height: 15px;
    background-color: #eef5fc;
    border-top: none;
    margin-top: -10px;
    margin-bottom: -7px;

    border: 1px solid #bbb;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;    

    -webkit-border-radius: 0px 0px 7px 7px; 
       -moz-border-radius: 0px 0px 7px 7px; 
            border-radius: 0px 0px 7px 7px;     
}*/

.collapsibleBox-heading-openclose {
    position: absolute;
    top: 100%;    
    width: 100%;
    z-index: 1;
}

.collapsibleBox-heading-openclose a:before,
.collapsibleBox-heading-openclose a:after {
    content: "";
    position: absolute;
    left: -7px; 
    top: 0;   
    bottom: -1px;
    width: 17px;    
    background: url('https://cdn.last.fm/flatness/charts/collapsiblebox-tab.gif') -16px 100%;
}

.collapsibleBox-heading-openclose a:after {
    left: auto;
    right: -7px;    
    background-position: -33px 100%;
}


.collapsibleBox-heading-openclose a {
    position: absolute;
    display: block;
    top: -1px;
    left: 50%;
    width: 8em;
    margin-left: -4em;

    background-color: #eef5fc;

    border-top: none;
    border-radius: 0 0 7px 7px;     

    font-size: 11px;
    color: #1b1b1b;
    text-align: center;
    line-height: 22px;    
}


.collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose a,
.collapsibleBox-heading-openclose a:hover,
.collapsibleBox-heading-openclose a:focus,
.collapsibleBox-heading:hover a {
    text-decoration: none;
    color: #0187c5;
}

.collapsibleBox-heading-openclose a span {
    background: url('https://cdn.last.fm/flatness/charts/2/openclose.png') 100% -97px no-repeat;
    padding-right: 15px;
}

.collapsibleBox-heading-openclose a:hover span,
.collapsibleBox-heading-openclose a:focus span,
.collapsibleBox-heading:hover a span {
    background-position: 100% -147px;
}

.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a span {
    background-position: 100% 3px;
}

.js .collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose a span,
.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a:hover span,
.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a:focus span,
.js .collapsibleBox.s-closed .collapsibleBox-heading:hover a span {
     background-position: 100% -47px;
}


.collapsibleBox-heading-openclose {
    display: none;    
}

.js .collapsibleBox-heading-openclose {
    display: block;
}

.js .collapsibleBox.s-open .collapsibleBox-heading-openclose a.collapsibleBox-heading-open {
    display: none;
}

.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a.collapsibleBox-heading-close {
    display: none;
}



.collapsibleBox-body {
    position: relative;
    overflow: hidden;

    -webkit-transition-timing-function: ease-out;
       -moz-transition-timing-function: ease-out;  
        -ms-transition-timing-function: ease-out;  
         -o-transition-timing-function: ease-out;  
            transition-timing-function: ease-out;
}

.collapsibleBox-body.s-animated {
    -webkit-transition-property: height, margin-bottom;
       -moz-transition-property: height, margin-bottom;
        -ms-transition-property: height, margin-bottom;  
         -o-transition-property: height, margin-bottom;  
            transition-property: height, margin-bottom;

    -webkit-transition-duration: 0.15s;
       -moz-transition-duration: 0.15s;  
        -ms-transition-duration: 0.15s;  
         -o-transition-duration: 0.15s;  
            transition-duration: 0.15s;
}

.ie .collapsibleBox-body {
    zoom: 1;
}

.js .collapsibleBox.s-closed .collapsibleBox-body {
    height: 10px !important; /* Has to override an inline style set by javascript */
    margin-top: -10px;
}

.js .collapsibleBox.s-closed.s-hover .collapsibleBox-body {
    height: 20px !important; /* Has to override an inline style set by javascript */
    margin-bottom: -10px;
}

.ie6 .collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose,
.ie7 .collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose {
    margin-top: 10px;
}

.collapsibleBox-body-inner {
    position: relative;
}

.js .collapsibleBox-body-inner {
    bottom: 0;
    width: 100%;
}

.js .collapsibleBox.s-closed .collapsibleBox-body-inner {
    position: absolute;
}

.collapsibleBox-body-inner2 {
    overflow: hidden;
    padding: 15px 10px;    
    background: #eef5fc;
    border-top: none;    
    border: 1px solid #bbb;
    border-top: none;        
    border-radius: 0 0 7px 7px;              
}

/*
 * Custom styled select elements
 *
 * More detailed styles can be found in button.css
*/

/* Wrapper element to enable positioning */
.customSelect-wrap {
    position: relative;
}

/* Set the dimensions of the replaced select element and make it transparent. */
.customSelect-wrap select {
    position: relative;
    z-index: 10;
    opacity: 0;
    margin: 0;
}

.ie .customSelect-wrap select {
    filter: alpha(opacity=0);
}


.customSelect-dummy {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}

.customSelect-dummy-wrap {
    display: block;
    padding-right: 22px;
}

.customSelect-dummy.s-active .customSelect-dummy-wrap {
}

.customSelect-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ==========================================================================
   Les dismissibles
   ========================================================================== */

/*
 * Example HTML:
 *
 * <div class="dismissible">
 *     <p class="dismissible-body">
 *         This is a dismissible recommendation.
 *     </p>
 *     <p class="dismissible-undo-message">
 *         You’ve dismissed this recommendation.
 *         <a href="#" class="dismiss-undo js-dismiss-undo">Undo</a>
 *     </p>
 *     <div class="dismissible-overlay"></div>
 *     <a class="dismiss js-dismiss">Dismiss this recommendation</a>
 * </div>
 */

.dismissible {
    position: relative;
}

.dismissible .dismiss {
    position: absolute;
    right: 15px;
    top: 13px;
}

/*
 * A dismissible has three states: default, pending, and dismissed.
 *
 * When the user clicks the dismiss button the dismissible transitions from the
 * default state to the pending state, which typically allows the user to undo
 * the dismissal.
 *
 * If the user clicks the undo button then, the dismissible transitions from the
 * pending state to the default state.
 *
 * If the user doesn't click the undo button, then after a delay the dismissible
 * transitions from the pending state to the dismissed state and the undo
 * dismiss button disappears.
 */

.dismissible .dismiss,
.is-pending .dismiss,
.is-dismissed .dismiss {
    opacity: 0;
    filter: alpha(opacity=0);
}

.dismissible:hover .dismiss,
.dismiss:focus,
.touch .dismiss {
    opacity: 1;
    filter: alpha(opacity=100);
}

.is-pending .dismiss,
.is-dismissed .dismiss,
.is-pending:hover .dismiss,
.is-dismissed:hover .dismiss {
    display: none;
}

.is-pending .dismissible-body,
.is-dismissed .dismissible-body {
    display: none;
}

.dismissible-undo-message {
    display: none;
}

.is-pending .dismissible-undo-message,
.is-dismissed .dismissible-undo-message {
    display: block;
}

.is-dismissed .dismiss-undo {
    display: none;
}

.dismissible-overlay {
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    height: 0;
    -webkit-transition: opacity 100ms linear;
            transition: opacity 100ms linear;
}

.dismiss:hover ~ .dismissible-overlay,
.dismiss:focus ~ .dismissible-overlay,
.is-pending .dismissible-overlay,
.is-dismissed .dismissible-overlay {
    height: 100%;
}

.dismiss:hover ~ .dismissible-overlay,
.dismiss:focus ~ .dismissible-overlay {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.is-pending .dismissible-overlay,
.is-dismissed .dismissible-overlay {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.dismiss,
.dismissible-undo-message {
    z-index: 2;
}

.dismissible-undo-message-text {
    height: 100%;
}

/* ==========================================================================
   Dismissible artist grid
   ========================================================================== */

.artist-grid-item .dismiss-undo {
    text-decoration: underline;
}

.artist-grid-item .dismissible-undo-message {
    border-top-width: 0;
    text-align: center;
    color: #fff;
    padding: 10px;
}

.artist-grid-item .is-pending .dismissible-body,
.artist-grid-item .is-dismissed .dismissible-body {
    display: none;
}

.csstransitions .artist-grid-item .dismissible-body {
    -webkit-transition: bottom 100ms linear;
            transition: bottom 100ms linear;
}

.csstransitions .artist-grid-item .is-pending .dismissible-body,
.csstransitions .artist-grid-item .is-dismissed .dismissible-body {
    display: block;
    bottom: -220px;
}


.artist-grid-item .dismissible-overlay {
    background-color: #000;
}

.artist-grid-item .dismiss,
.album-item .dismiss {
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.75);
}

/* ==========================================================================
   Dismissible event recommendations
   ========================================================================== */

.recommended-event .dismiss {
    top: 0;
}

/* ==========================================================================
   Dismissible album list items
   ========================================================================== */

.album-item .dismiss {
    top: 10px;
    right: 20px;
}

.album-list--expanded .g4 .dismiss {
    right: 180px;
}

.album-list--expanded .g6 .dismiss {
    right: 260px;
}

.album-item .dismissible-undo-message {
    position: relative;
}

.dismissRec {
    border: 0;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
}

.dismissRec button {
    background: none;
    border: none;
    height: 20px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 16px;
}

.dismissRec button:active {
    left: 1px;
    position: relative;
    top: 1px;
}

.recommended .dismissRec button {
    visibility: hidden;
}

.recommended:hover .dismissRec button,
.recommended:active .dismissRec button,
.recommended:focus .dismissRec button {
    visibility: visible;
}

.undo {
    background: #eee;
    display: table;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
}

.undo .msg {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    color: #666;
    font-size: 11px;

}


/* ==========================================================================
   Ecommerce buttons
   ========================================================================== */

/*
 * See /style/ecommerce for example HTML.
 */

.ecommerce-actions {
    position: relative;
}

.content .ecommerce-actions {
    margin-bottom: 6px;
}

.ecommerce-actions {
    width: 100%;
}

.ecommerce-dropdown .ecommerce-btn-text {
    display: block;
    position: relative;
}

.ecommerce-single-button {
    width: 100%;
}

.ecommerce-btn-text .price-offer,
.ecommerce-btn-text .price-free {
    color: #cd1223;
}

/* Free download hack for wrapping buttons in varying languages (WEB-15912)
   ========================================================================== */

.is-free-download .ecommerce-btn-text {
    white-space: nowrap;
}

.lang-de .is-free-download .ecommerce-btn-text,
.lang-es .is-free-download .ecommerce-btn-text,
.lang-fr .is-free-download .ecommerce-btn-text,
.lang-pl .is-free-download .ecommerce-btn-text {
    font-size: 11px;
}


/* Disclosure - Split button
   ========================================================================== */

.ecommerce-dropdown.has-preferred-retailer .ecommerce-btn-text {
    border-right: 1px solid #c3c3c3;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ecommerce-dropdown.has-preferred-retailer .ecommerce-btn-text {
    margin-right: 40px;
}

.has-preferred-retailer .btn.iconright--dropdown,
.has-preferred-retailer .btn.btn--small.iconright--dropdown {
    height: 100%;
}

.has-preferred-retailer .iconright--dropdown {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: #b6b6b6 0 -1px 0 inset,
                #efefef 1px 0 inset;
}

.has-preferred-retailer.active .iconright--dropdown {
    background: #f6f6f6;
    border-right: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

/* Hidden menu
   ========================================================================== */

.ecommerce-dropdown .dropdown-btn-menu {
    min-width: 180px;
}

.ecommerce-dropdown .additional-info-offer,
.ecommerce-dropdown .additional-info-free {
    background-color: #CD1223;
    line-height: 15px;
    border-radius: 3px;
    padding: 2px;
    font-size: 0.9em;
    color: #fff;
}

.ecommerce-dropdown .additional-info-offer {
    margin-right: 3px;
}

/* Retailer icon
   ========================================================================== */

.ecommerce-icon {
    position: relative;
    top: 4px;
    margin-right: 2px;
}

.ecommerce-btn-text.has-retailer-icon {
    padding-right: 40px;
}

.ecommerce-btn-text .ecommerce-icon {
    position: absolute;
    top: 12px;
    right: 15px;
    margin-right: 0;
}

/* Secondary dropdown - smaller
   ========================================================================== */

.ecommerce-dropdown--secondary.has-preferred-retailer .ecommerce-btn-text {
    margin-right: 30px;
}

.ecommerce-dropdown--secondary.has-no-preferred-retailer .ecommerce-disclosure {
    margin-left: -30px;
}

.ecommerce-single-button--secondary.has-retailer-icon {
    padding-right: 35px;
}

.ecommerce-single-button--secondary .ecommerce-icon {
    top: 7px;
    right: 10px;
}


#editor {
	text-align: left;
	margin-top: 2px;
	padding: 2px 0;
	width: 465px;
}

#editor.journalMode {
	width: 685px;
}

#editor #editorTitle,
#editor #message,
#editor #toolbar,
#editorPanel,
#editorPreviewContainer {
 	width: 465px;
}

#editor #statusbar {
	border: 1px solid #F5F5F5;
	height: 1.2em;
	display: none;
	float: left;
}

#editor #bbbuttons {
	padding: 0;
	border: 0;
	margin: 3px 0 0 0;
	clear: both;
}
#editor #faqinserter { 
    clear: left;
}
#editor #faqinserter ul, #editor #faqinserter ul ul { 
    margin-left: 15px;
}


#editor #toolbar {
	margin-top: 4px;
}

#editor #editorPreviewPane {
	background: #FFF;
	margin: 5px 0 10px 0;
	padding: 15px;
	border: 1px solid #DFDFDF;
}

#editor #actionbuttons {
	padding: 3px;
}

#editor .bbbuttons {
  clear: both;
}

#editor .bbbuttons li {
	display: inline;
	float: left;
  margin: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	list-style: none;
	cursor: pointer;
	background: url('https://cdn.last.fm/depth/buttons/journal_button_01.gif') top left no-repeat;
	padding-left: 4px;
	line-height: 15px;
	font-size: 11px;
	white-space: nowrap;
}

#editor .bbbuttons li.lfm {
    color: #4A71A9;
}

#editor .bbbuttons li span {
    display: block;
    padding-right: 4px;
    background: url('https://cdn.last.fm/depth/buttons/journal_button_02.gif') top right no-repeat;
}

#journalgroups {
    clear: both;
    margin-top: 15px;
}

#editor #bbbuttons label { 
    display: block;
    margin-bottom: 0.5em;
}

.eventometer {
    font-size: 11px;
    font-weight: bold;
    line-height: 30px;
    background: url(https://cdn.last.fm/flatness/components/eventometer/bg.3.png) no-repeat 0 -30px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.eventometer-rec {
    background-position: 0 0;
}

.wikiFactBox h2 {
    margin-top: 1em;
}

.wikiFactBox p {
    margin: 0.5em 0;
}

dl.factbox {
    padding: 0 0 0 111px;
}

dl.factbox dt {
    clear: both;
    display: inline;
    float: left;
    margin: 0 0 0 -111px;
    padding: 7px 0 0 0;
    width: 100px;
}

dl.factbox dd {
    padding: 7px 0 0 0;
    display: block;
}



.festivalLineup li {
    width: 33%;
    float: left;
    display: inline;
}

.festivalLineup li .mini {
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 2px 0;
    margin-right: 10px;
}

.festivalLineup li .recommended_small_icon {
    height: 11px;
    width: 11px;
}

.festivalLineup li .full {
    position: relative;
    padding-left: 77px;
    padding-right: 10px;
    min-height: 69px;
}

.festivalLineup .pictureFrame {
    position: absolute;
    left: 0;
    top: 0;
}

#player {
    width: 300px;
    overflow: visible;
    margin-bottom: 30px;
}

#player.shortPlayer {
    height: 221px;
}

#player.lazy {
    position: relative;
    background: url(https://cdn.last.fm/prototyping/htmlplayer/player.png) 0 0 no-repeat;
    cursor: pointer;
    color: #6E6E6E;
    -moz-border-radius: 2px;
    height: 80px;
    margin-bottom: 20px;
    overflow: hidden;
}

#player .preview {
    display: none;
}

#player.lazy p.artist {
    position: absolute;
    display: block;
    top: 11px;
    left: 93px;
    font-size: 10px;
    color: #fff;
    width: 135px;
    overflow: hidden;
    height: 12px;
}

#player.lazy p.track {
    position: absolute;
    display: block;
    top: 28px;
    left: 93px;
    font-size: 10px;
    color: #fff;
    width: 135px;
    overflow: hidden;
    height: 15px;
}

#player.lazy p.type {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    padding-top: 2px;
    height: 13px;
    background: #FEFEFE;
}

#player.lazy p.type span {
    color: #555;
    font-size: 9px;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding: 18px 20px 6px;
    margin: 18px auto;
    min-width: 200px;
    max-width: 940px;
    text-shadow: #fff 0 1px 0;
    line-height: 18px;
    background: #e3e3e3;
    border-radius: 3px;

    /* http://stackoverflow.com/questions/2710764/ */
    -webkit-text-size-adjust: none;
}

/* Bump up the font size and line height for
   larger hit points at smaller page sizes */
@media only screen and (max-width: 860px) {

    .site-footer {
        font-size: 14px;
        line-height: 24px;
    }

    .site-footer h2 {
        line-height: 24px;
    }

}

.site-footer h2 {
    font-size: 14px;
    color: #333;
    margin: 0;
}

/* Footer call to actions
   ==========================================================================
   - Show two columns of 50% at g12
   - Switch to two stacked items at g8
   ==========================================================================
*/

.site-footer-nav a,
.site-footer-nav a:hover {
    color: #333;
}

.site-footer .call-to-action {
    position: relative;
    color: #333;
    width: 50%;
    padding-right: 10px;
    padding-left: 60px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Linearise call to actions */
@media only screen and (max-width: 700px) {

    .site-footer .call-to-action {
        width: 100%;
    }

    .site-footer .call-to-action--upload {
        margin-bottom: 18px;
    }

}

.site-footer .call-to-action:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 10px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url('https://cdn.last.fm/flatness/responsive/footer/footer_icons_light.png');
}

.site-footer .call-to-action--upload:before {
    background-position: 0 0;
}

.site-footer .call-to-action--download:before {
    background-position: 0 -43px;
}

.site-footer .call-to-action:hover,
.site-footer .call-to-action:focus {
    color: #333;
    text-decoration: none;
}

.site-footer .call-to-action:hover h2,
.site-footer .call-to-action:focus h2 {
    text-decoration: underline;
}

/* Footer nav groups
   ==========================================================================
   - Show four columns of 25% at g12
   - Switch to 2x2 columns of 50% at g8
   - Switch to lists hidden with toggles at g4
   -- Make list items 100% width
   ==========================================================================
*/

.site-footer .separator {
    margin: 0 0 18px;
    border-width: 1px 0;
    border-color: #c1c1c1 #f9f9f9 #f9f9f9;
    border-style: solid;
}

.site-footer-nav-group .separator {
    display: none;
}

.site-footer-nav-group {
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.conditional-footer-toggle {
    display: none;
}

/* Disable toggle hiding at full width */
.js .site-footer-nav-group .toggle-target {
    display: block;
}

/* Collapse groups from 4 to 2 columns */
@media only screen and (max-width: 700px) {

    .site-footer-nav-group {
        width: 50%;
    }

    .site-footer-nav-group:nth-child(2n+1) {
        clear: left;
    }

    .site-footer-nav-group:nth-child(n+3) {
        margin-top: 18px;
    }

}

/* And then to one linearised column */
@media only screen and (max-width: 380px) {

    .site-footer-nav-group {
        width: 100%;
    }

    .site-footer-nav-group:nth-child(n+2) {
        margin: 0;
    }

    .js .site-footer-nav-group:first-child {
        margin-top: -18px;
    }

    .js .site-footer-nav-group:last-child {
        margin-bottom: -18px;
    }

    /* Hide non-linked heading at thin widths */
    .js .site-footer-nav-group > h2 {
        display: none;
    }

    /* Enable toggles at thin widths */
    .js .site-footer-nav-group .toggle-target {
        display: none;
    }

    .js .site-footer-nav-group ul {
        margin-bottom: 6px;
    }

    .js .conditional-footer-toggle {
        display: block;
        padding: 6px 0;
    }

    .site-footer-nav-group .separator {
        display: block;
    }

    .js .site-footer-nav-group .separator {
        margin: 0;
    }

    .no-js .site-footer-nav-group .separator {
        margin: 18px 0;
    }

}

/* Language selector
   ==========================================================================
   - Show dotted, inline list at g12
   - Show hidden list with toggle at g11 downwards
   -- 4 columns then 2 column then 1 column
   - At g4, bring in to line with other footer nav toggles
   ==========================================================================
*/

.language-selector {
    margin-bottom: 18px;
    color: #333;
    position: relative;
}

.language-selector a,
.language-selector a:hover,
.language-selector a:focus {
    color: #333;
}

.language-selector:target {
    background: #fff;
    padding: 18px 20px;
    border-radius: 3px;
}

.language-selector .separator {
    display: none;
}

.current-language strong {
    color: #333;
    font-size: 14px;
}

.language-options-group {
    display: inline;
}

/* Hide the language toggle at full size, all languages
   are on show. */
.language-toggle {
    display: none;
}

/* Disable toggle hiding at full width and use an inline layout */
.js .language-selector .toggle-target,
.js .language-selector.active .toggle-target {
    display: inline;
}

/* At g11 break language list into four columns,
   Reveal with a toggle. */
@media only screen and (max-width: 940px) {

    .language-options {
        margin: 18px 0;
        -moz-column-count: 4;
        -moz-column-gap: 20px;
        -webkit-column-count: 4;
        -webkit-column-gap: 20px;
        column-count: 4;
        column-gap: 20px;
    }

    /* Enable toggle hiding */
    .js .language-selector .toggle-target {
        display: none;
    }

    /* … and use a block layout when it's visible */
    .js .language-selector.active .toggle-target {
        display: block;
    }

    /* Hide the text header */
    .js .current-language-text {
        display: none;
    }

    /* … and show the alternative header with a link toggle */
    .js .language-toggle {
        display: inline-block;
    }

    /* Reset the inline list styles, we need to be a
       little more specific than usual. */
    .language-selector .inline-items li {
        display: block;
    }

    /* Force open the toggle when the selector has been linked to */
    .js .language-selector:target .toggle-target {
        display: block;
    }
    
    /* … and hide the toggle button so doesn't appear to be closable */
    .js .language-selector:target .language-toggle:after {
        display: none;
    }    

    /* Reset the dotted list styles */
    .language-selector .inline-items li:after {
        content: '' !important;
        padding: 0;
    }

    /* Enable display of separators */
    .language-selector .separator {
        display: block;
        margin: 18px 0 0;
    }

    /* … unless we are highlighted */
    .language-selector:target .separator {
        display: none;
    }

}

/* At g8 breaking point make it two columns */
@media only screen and (max-width: 540px) {

    .language-options {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

}

@media only screen and (max-width: 380px) {

    .language-options {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

    .js .language-toggle {
        display: block;
    }

    .language-selector {
        margin-top: -18px;
    }

    .language-selector .separator {
        margin: 0;
    }

    .language-selector .current-language {
        padding: 6px 0;
    }

    .language-options {
        margin-top: 6px;
        margin-bottom: 6px;
    }

}

/* Legalese
   ==========================================================================
   - Show inline and left aligned at full width
   - At g5 centre text, mode background position to middle and vertically
     space some of the legal items.
   ==========================================================================
*/

.site-footer-legalese {
    font-size: 12px;
    color: #666;
    background: url('https://cdn.last.fm/flatness/responsive/footer/footer_as_light.png') no-repeat bottom right;
    padding-right: 70px;
    line-height: 18px;
}

.site-footer-strapline {
    font-style: italic;
    color: #333;
}

.site-footer-legalese a {
    color: inherit;
    text-decoration: underline;
}

.site-footer-legalese a:hover,
.site-footer-legalese a:focus {
    color: #333;
}

/* Centre and move the logo to the middle */
@media only screen and (max-width: 540px) {

    .site-footer-legalese {
        text-align: center;
        padding-bottom: 50px;
        padding-right: 0;
        background-position: bottom center;
    }

}

/* Break up the legal items a bit for clarity */
@media only screen and (max-width: 460px) {

    /* Inline item set to display block is a bit eugh. */
    .site-footer-legalese .inline-items li {
        display: block;
        margin-top: 12px;
    }

    .site-footer-legalese .inline-items li:after {
        content: '';
        padding: 0;
    }

}

.wiki-legalese {
    margin-top: 12px;
}

/* Comments List */

ul.forumComments {
    overflow: visible;
    width: 100%;
    margin-bottom: 2em;
}

ul.forumComments div.comment {
    margin: 0;
    padding: 10px 15px 10px 111px;
    position: relative;
    zoom: 1;
}

ul.forumComments li.odd {
    background: #f5f5f5;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}


/* User Details */

ul.forumComments ul.commentUserDetails {
    display: inline;
}

ul.forumComments ul.commentUserDetails li {
    display: inline;
}

ul.forumComments ul.commentUserDetails li.userName {
    float: left;
    margin-left: -96px;
}

ul.forumComments ul.commentUserDetails li.userName span,
ul.forumComments ul.commentUserDetails li.userName span a {
    color: #969696;
    text-decoration: none;
}

ul.forumComments ul.commentUserDetails li.userName span a:hover {
    text-decoration: underline;
}

ul.forumComments ul.commentUserDetails li.userThumb {
    clear: left;
    float: left;
    margin-top: 10px;
    margin-left: -96px;
}

ul.forumComments ul.commentUserDetails li.userThumb a span.userImage {
    display: block;
    float: left;
}


ul.forumComments ul.commentUserDetails li.userDetails {
    clear: left;
    float: left;
    margin-left: -96px;
}

ul.forumComments ul.commentUserDetails li.userDetails span.user span.userType {
    display: none;
}

ul.forumComments ul.commentUserDetails li.date {
    width: 440px;
    display: block;
    text-align: right;
    color: #969696;
    font-size: 11px;
}

/* Actual Content */

ul.forumComments div.comment .wrapper {
    display: block;
    width: 440px;
    position: relative;
    z-index: 20;
}

ul.forumComments div.comment h4 {
    padding-top: 7px;
    margin: 0;
    font-size: 12px;
    color: #252525;
}

ul.forumComments div.comment .messageContent {
    min-height: 6em;
    padding-top: 7px;
}

ul.forumComments div.comment .messageContent a:hover {
    background-color: transparent;
}

ul.forumComments div.comment .messageContent li {
    margin: 0.7em 0 0.7em 2em;
    list-style-position: outside !important;
}

ul.forumComments div.comment .messageContent ul br {
    display: none;
}


/* Signature */

ul.forumComments div.comment div.messageSig {
    margin: 24px -15px 0 -15px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 11px;
    max-height: 100px;
    overflow: hidden;
}

ul.forumComments div.comment div.messageSig a {
    border-bottom: none;
    text-decoration: underline;
}

ul.forumComments div.comment div.messageSig a:hover {
    background: none;
}

/* Quote, Reply Buttons */

ul.forumComments div.comment div.forumLine {
    text-align: right;
    margin-top: 15px;
}

ul.forumComments div.comment div.forumLine a {
    color: #969696;
    font-size: 11px;
}

ul.forumComments div.comment div.forumLine a:hover {
    color: #666;
    background: transparent;
}

/* Quotes */

span.quote {
    display: block;
    margin: 5px 0 1.5em 0;
    padding: 5px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    position: relative;
    zoom: 1;
}

span.quote span.quote {
    margin: 5px 0 0 0;
}

/* superscript in forum signatures */

.messageSig sub,
.messageSig sup {
	line-height: 1.3;
}

div.comment a.entry-title {
  display: none;
}

.forum textarea {
    height: 100px;
}



/* Forum Search Results */
.forumSearchResults .forumCrumb {
    display: block;
    margin: 10px 0 0 0;
    padding: 0 15px;
    font-size: 11px;
    font-weight: normal;
    color: #666;
}

.forumSearchResults .forumCrumb a {
    color: #666;
    border: none;
}

.forumSearchResults .forumCrumb a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.forumSearchResults ul.forumComments .messageSig,
.forumSearchResults ul.forumComments .forumStuff,
.forumSearchResults ul.forumComments .forumLine {
    display: none;
}


/* Recent Discussions (on group pages etc.) */
div.recentDiscussions table td.subject {
    padding: 0 0 10px 50px;
    font-size: 11px;
}

div.recentDiscussions table td.subject span.userImage {
    display: inline;
    float: left;
    margin-left: -50px;
}

div.recentDiscussions table td.subject strong {
    font-size: 12px;
}


div.forumview #topbarForum,
div.forumview #bottombarForum {
	margin-bottom: 15px;
	overflow: hidden;
	clear: both;
	line-height: 2.5;
}

div.forumview #topbarForum .pagination,
div.forumview #bottombarForum .pagination {
    margin: 0;
}

table.forumtable {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 20px;
	border-collapse: collapse;
}

table.forumtable th {
	background: transparent;
	text-align: left;
	font-size: 12px;
	padding: 0 8px 8px 9px;
	color: #666;
}

table.forumtable td {
	padding: 6px 10px 8px 10px;
	vertical-align: top;
	font-size: 12px;
	border-right: solid 1px #E1E1E1;
	border-bottom: solid 1px #E1E1E1;
	border-top: solid 1px #E1E1E1;
}

#LastWebsite table.forumtable td a:hover {
  background-color: transparent;
}

table.forumtable tr.alt td {
	padding-top: 5px;
  background-color: #F5F5F5;
	border-bottom: solid 1px #E1E1E1;
	border-top: solid 1px #E1E1E1;
}

table.forumtable .forumTitle,
table.forumtable .threadTitle {
	width: 50%;
}

table.forumtable .threadTitle strong.sticky {
	color: #4B72A9;
}

table.forumtable .threadTitle strong.hot {
	color: #F98086;
}

table.forumtable .threadTitle a:visited {
	color: #A0A0A0;
}

table.forumtable td.forumTitle small {
	line-height: 1.3;
	font-size: 11px;
}

table.forumtable td.threadTitle small.threadPagination {
	font-size: 12px;
	color: #A0A0A0;
}

table.forumtable td.threadTitle small.threadPagination a {
	color: #A0A0A0;
	padding: 0 0.3em;
	margin: 0 -0.2em;
	text-decoration: none;
}

table.forumtable td.threadTitle small.threadPagination a:hover {
	color: #A0A0A0;
}

table.forumtable td a.author {
    color: #000;
}

table.forumtable .numTopics,
table.forumtable .numPosts {
	width: 5em;
	text-align: center;
}

table.forumtable .numReplies,
table.forumtable .numViews {
	text-align: center;
}

table.forumtable .end,
table.forumtable .lastPost {
	border-right: none;
}

table.forumtable .lastPost small {
	vertical-align: baseline;
	font-size: 11px;
	white-space: nowrap;
}

table.forumtable .lastPost small a {
	text-decoration: none;
}

table.forumtable .lastPost small a:hover {
	color: #545454;
}

table.forumtable tr td.lastPost small a:visited {
	color: #A0A0A0;
}

table.forumtable tr td.lastPost small a:hover:visited {
	color: #A0A0A0;
}

/* reply tracker */

table#replyTrackerTable td {
  line-height: 1.16667;
}

#replyTrackerTable td.msgTitle a:visited {
	color: #A0A0A0;
}

table.forumtable tr td.location a {
  text-decoration: none;
}

table.forumtable tr td.location a {
  color: #545454;
}

/* grapevine */

#posthistorytable.forumtable td.lastPost {
	width: 10em;
}
/*
/* pm inbox */

table.forumtable tr.unreadMsg td {
	font-weight: bold;
}

table.forumtable tr td.msgIcon {
	border-right: none;
	padding-right: 0;
	width: 15px;
	padding-left: 5px;
}

table.forumtable tr td.msgIcon img {
	float: right;
}

.excerpts {
	clear: both;
}

/* Quick tweaks for rules */

#forumRules #content h1 {
    margin: 1em 0;
}

#forumRules ul.rules li {
    margin: 1em 0;
}

#forumRules dt {
    font-weight: bold;
    display: block;
    margin: .8em 0 0;
}

#forumRules dd {
    display: block;
    margin: .1em 0 .4em;
}

#forumRules dd input {
    margin-right: 3px;
}


/* Forum Search Box */
#forumsearch {
    margin: 0 0 20px 0;
    padding: 10px 15px;
    background: #f5f5f5;
}

#forumSearchInput {
    font-size: 12px;
    width: 160px;
    padding: 1px 3px;
    margin: 0;
    border: 1px solid #ccc;
}

a#advancedSearch {
    margin: 0 0 0 1em;
    font-size: 11px;
    cursor: pointer;
}

fieldset#advancedOptions {
    margin: 1em 0 0 0;
}

#resultsOrder {
    font-size: 11px;
    text-align: right;
    line-height: 3em;
}

#faqs {
    font-size: 12px;
    line-height: 1.5em;
}

.action--spam {
    float: right;
}

.action--spam,
.action--spam:hover {
    color: #D51007;
}

a.icon:hover {
    text-decoration: none !important;
}
a.icon:hover span,
a.icon:hover strong {
    text-decoration: underline !important;
}

img.comment_icon {
    margin: 0 3px -2px 0;
}
img.journal_icon {
    margin: 0 5px -5px 0;
}
img.new_journal_icon {
    margin: 0 4px -4px 0;
}
img.tag_icon {
    margin: 0 6px -1px 0;
}
img.mail_icon {
    margin: 0 4px 0 0;
}
img.playingnow_icon {
    margin: 0 0 -2px 2px;
}
img.play_icon {
    margin: 0 4px -4px 0;
}
img.dismiss_icon {
    margin: 0 4px -2px 0;
}
img.feed_small_icon {
    margin: 0 4px -1px 0;
}
img.cal_icon {
    margin: 0 4px 0 2px;
}
img.feed_icon,
img.ics_icon,
img.ical_icon,
img.google_cal_icon,
img.google_cal_small_icon,
img.outlook_cal_icon {
    margin: 0 4px 0 0;
}
img.ics_small_icon {
    margin: 0 4px -1px 0;
}
img.itunes_icon {
    margin: 0 4px -4px 0;
}
img.itunes_small_icon {
    margin: 0 4px -1px 0;
}
img.print_icon {
    margin: 0 4px -3px 0;
}
img.edit_icon {
    margin: 0 0 -5px 0;
}
img.loved_indicator_icon {
    margin: 0 4px 0 0;
}
img.playlist_icon {
    margin: 0 4px -1px 0;
}
img.radio_large_icon {
    margin: 0 5px 0 0;
}
img.recommended_icon {
    margin: 0 5px 0 0;
}
img.attending_icon {
    margin: -3px 0 -6px 0;
}
img.maybeattending_icon {
    margin: -3px 0 -6px 0;
}
img.eventclash_icon {
    margin: -3px 0 -6px 0;
}
img.flag_icon {
    margin: 0 0 -5px 0;
}
img.ticket_icon {
    margin: 0 4px 0 0;
}
img.settings_icon {
    margin: 0 3px -1px 0;
}
img.up_icon {
    margin: 0 3px 0 0;
}
img.ss-hypem_icon {
    margin: 0 3px -3px 0;
}

img.warning_icon {
    margin: 0 5px -2px 0;
}

img.staff_icon,
img.subscriber_icon,
img.moderator_icon,
img.alumni_icon {
    margin: 0 2px 6px 0;
}

/* Resource icons */
img.res_track_icon,
img.res_artist_icon,
img.res_album_icon {
    margin: 0 4px -4px 0;
}
img.scrobbling_icon {
    margin: 0 1px -5px 0;
}

/* IN THE LONG RUN, THIS SHOULD REPLACE ALL THE ABOVE */

img.icon {
    background-image: url('https://cdn.last.fm/flatness/sprites/21/icons.png');
}
.ie6 img.icon {
    background-image: url('https://cdn.last.fm/flatness/sprites/21/icons.IE6.png');
}


.flag_uk_icon       { background-position: 0 0; }
.flag_de_icon       { background-position: 0 -20px; }
.flag_es_icon       { background-position: 0 -40px; }
.flag_fr_icon       { background-position: 0 -60px; }
.flag_it_icon       { background-position: 0 -80px; }
.flag_jp_icon       { background-position: 0 -100px; }
.flag_pl_icon       { background-position: 0 -120px; }
.flag_pt_icon       { background-position: 0 -140px; }
.flag_ru_icon       { background-position: 0 -160px; }
.flag_se_icon       { background-position: 0 -180px; }
.flag_tr_icon       { background-position: 0 -200px; }
.flag_zh_icon       { background-position: 0 -220px; }
.globe_icon         { background-position: 0 -240px; }
.ss-amarok_icon     { background-position: 0 -260px; }
.ss-wmp_icon        { background-position: 0 -280px; }
.ss-itunes_icon     { background-position: 0 -300px; }
.ss-wa2_icon        { background-position: 0 -320px; }
.ss-iphone_icon     { background-position: 0 -340px; }
.ss-logitech_icon   { background-position: 0 -360px; }
.ss-playdar_icon    { background-position: 0 -380px; }
.ss-lfm_icon        { background-position: 0 -400px; }
.ss-spotify_icon    { background-position: 0 -420px; }
.ss-android_icon    { background-position: 0 -440px; }
.ss-generic_icon    { background-position: 0 -460px; }
.ss-denon_icon      { background-position: 0 -1880px; }
.settings_icon      { background-position: 0 -500px; }
.flag_icon          { background-position: 0 -520px; }
.eventclash_icon    { background-position: 0 -540px; }
.maybeattending_icon{ background-position: 0 -560px; }
.attending_icon     { background-position: 0 -580px; }
.recommended_icon   { background-position: 0 -600px; }
.ticket_icon        { background-position: 0 -640px; }
.moderator_icon     { background-position: 0 -660px; }
.subscriber_icon    { background-position: 0 -680px; }
.alumni_icon         { background-position: 0 -1900px; }
.staff_icon         { background-position: 0 -700px; }
.edit_icon          { background-position: 0 -720px; }
.tag_icon           { background-position: 0 -740px; }
.itunes_icon        { background-position: 0 -880px; }
.outlook_cal_icon   { background-position: 0 -900px; }
.google_cal_icon    { background-position: 0 -920px; }
.ical_icon          { background-position: 0 -940px; }
.ics_icon           { background-position: 0 -940px; }
.cal_icon           { background-position: 0 -960px; }
.feed_small_icon    { background-position: 0 -1000px; }
.loved_icon         { background-position: 0 -1020px; }
.unloved_icon       { background-position: 0 -1040px; }
.loved_indicator_icon { background-position: 0 -1060px; }
.loved_indicator_charts_icon { background-position: 0 -1940px; }
.play_icon          { background-position: 0 -1080px; }
.dismiss_icon       { background-position: 0 -1120px; }
.comment_icon       { background-position: 0 -1220px; }
.journal_icon       { background-position: 0 -1240px; }
.new_journal_icon   { background-position: 0 -1260px; }
.addtofriends_icon  { background-position: 0 -1280px; }
.isfriend_icon      { background-position: 0 -1300px; }
.mailuser_icon      { background-position: 0 -1320px; }
.up_icon            { background-position: 0 -1340px; }
.radio_play_icon    { background-position: 0 -1380px; }
.radio_tag_icon     { background-position: 0 -1400px; }
.radio_playlists_icon   { background-position: 0 -1420px; }
.act_created_icon   { background-position: 0 -1440px; }
.act_added_icon     { background-position: 0 -1460px; }
.act_connected_icon { background-position: 0 -1480px; }
.act_disconnected_icon  { background-position: 0 -1500px; }
.act_befriended_icon        { background-position: 0 -1520px; }
.act_updatedpermissions_icon    { background-position: 0 -1540px; }
.act_joined_icon    { background-position: 0 -1560px; }
.act_left_icon      { background-position: 0 -1580px; }
.act_attending_icon { background-position: 0 -1600px; }
.act_maybeattending_icon    { background-position: 0 -1620px; }
.act_notattending_icon  { background-position: 0 -1640px; }
.act_tagged_icon    { background-position: 0 -1680px; }
.act_loved_icon     { background-position: 0 -1700px; }
.act_recommended_icon   { background-position: 0 -1720px; }
.ss-xbox_icon       { background-position: 0 -1740px; }
.ss-grooveshark_icon   { background-position: 0 -1800px; }
.ss-scrobbling_icon { background-position: 0 -1820px; }
.mobile_icon        { background-position: 0 -1860px; }
.scrobbling_icon        { background-position: 0 -1820px; }
.radio_small_icon        { background-position: 0 -1840px; }
.dismiss_blue_icon  { background-position: 0 -1920px; }
.share_facebook_icon  { background-position: 0 -1960px; }
.share_twitter_icon  { background-position: 0 -1980px; }
.share_send_icon  { background-position: 0 -2000px; }

img.icon_32 {
    background-image: url('https://cdn.last.fm/flatness/sprites/21/icons_32.png');
}
.location_icon_32 { background-position: 0 0; }
.calendar_icon_32 { background-position: 0 -32px; }


/* preview_icon spriting should be moved in to it's own file  */

img.preview_icon {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url(https://cdn.last.fm/flatness/preview/1/sprite.png) !important;
    vertical-align: middle;
}

.ie6 img.preview_icon {
    background-image: url(https://cdn.last.fm/flatness/preview/1/sprite.IE6.png) !important;
}

a.previewbutton:hover img.preview_icon {
    background-position: 0 -16px;
}


.indicator_new {
    height: 24px;
    display: -moz-inline-box;
    display: inline-block;
    padding: 0 3px 0 0;
    background: url("https://cdn.last.fm/flatness/red_new_box.2.png") no-repeat right bottom;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    text-shadow: #163551 0 -1px 1px;
    overflow: hidden;
}

.indicator_new span {
    height: 21px;
    padding: 1px 5px 2px 9px;
    background: url("https://cdn.last.fm/flatness/red_new_box.2.png") no-repeat left top;
    display: -moz-inline-box;
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}

a.indicator_new:hover {
    color: #eee;
}

.indicator_onsale {
    padding: 0 3px;
    background: #ef0a00;
    color: #fff;
    font-size: 9px;
    border: 1px solid #b70800;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.indicator_free {
    padding: 0 3px;
    line-height: 11px;
    background: #fd9d36;
    color: #fff;
    font-size: 9px;
    border: 1px solid #ed821b;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

#page a:hover .indicator_free,
#page a:hover .indicator_onsale {
    text-decoration: none !important;
}

div#calendar table.interactive {
    display: none;
}
div#calendar table.first {
    display: table;
}
div#calendar table.controls {
    margin: -1px 0 0 0;
    width: 158px;
    position: absolute;
}
div#calendar table.controls td a {
    text-decoration: none;
}
div#calendar table.controls td a {
    display: block;
    width: 17px;
    line-height: 15px;
}
div#calendar table.controls td.next a {
    background:url(https://cdn.last.fm/depth/global/arrow_r.png) top left no-repeat;
}
div#calendar table.controls td.prev a {
    background:url(https://cdn.last.fm/depth/global/arrow_l.png) top right no-repeat;
}
div#calendar table.controls td.next a:hover {
    background-image:url(https://cdn.last.fm/depth/global/arrow_r_hover.png);
}
div#calendar table.controls td.prev a:hover {
    background-image:url(https://cdn.last.fm/depth/global/arrow_l_hover.png);
}
div#calendar table.controls td.next a.busy, div#calendar table.controls td.next a:hover.busy {
    background-image:url(https://cdn.last.fm/depth/global/arrow_r_anim.gif);
}
div#calendar table.controls td.prev a.busy, div#calendar table.controls td.prev a:hover.busy {
    background-image:url(https://cdn.last.fm/depth/global/arrow_l_anim.gif);
}
div.interactive caption {
    text-align: center !important;
    width: 158px;
    padding-top: 2px;
}
/*
div#eventsNav ul li.pickadate {
  padding-top: 5px;
}
*/


/* Album Cover
   =========== */

span.albumCover {
    position: relative;
    display: block;
}
a span.albumCover {
    cursor: pointer;
}
span.coverSmall {
    width: 37px;
    height: 36px;
}
span.coverMedium {
    width: 75px;
    height: 67px;
}
span.coverLarge {
    width: 138px;
    height: 131px;
}
span.coverMega {
    width: 194px;
    height: 184px;
}

span.albumCover img.art {
    display: block;
    position: absolute;
}

span.coverSmall img.art {
    clip: rect(0,34px,34px,0);
    left: 3px;
    top: 1px;
}
span.coverMedium img.art {
    clip: rect(0,64px,64px,0);
    left: 7px;
    top: 2px;
}
span.coverLarge img.art {
    clip: rect(0,126px,126px,0);
    left: 11px;
    top: 3px;
}
span.coverMega img.art {
    clip: rect(0,174px,174px,0);
    top: 5px;
    left: 15px;
}



span.albumCover img  { display: block; }

span.albumCover span.jewelcase {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: left top;
}

/* TODO: correct width and height */

span.coverSmall span.jewelcase {
    width: 37px;
    height: 36px;
    background-image: url(https://cdn.last.fm/flatness/catalogue/album/jewelcase_small.png);
}
.ie6 span.coverSmall span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.last.fm/flatness/catalogue/album/jewelcase_small.png', sizingMethod='crop');
}

span.coverMedium span.jewelcase {
    width: 73px;
    height: 68px;
    background-image: url(https://cdn.last.fm/flatness/catalogue/album/jewelcase_medium.png);
}
.ie6 span.coverMedium span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.last.fm/flatness/catalogue/album/jewelcase_medium.png', sizingMethod='crop');
}

span.coverLarge span.jewelcase {
    left: 0px;
    width: 141px;
    height: 134px;
    background-image: url(https://cdn.last.fm/flatness/catalogue/album/jewelcase_large.png);
}
.ie6 span.coverLarge span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.last.fm/flatness/catalogue/album/jewelcase_large.png', sizingMethod='crop');
}
span.coverMega span.jewelcase {
    left: 0px;
    width: 194px;
    height: 184px;
    background-image: url(https://cdn.last.fm/flatness/catalogue/album/jewelcase_mega.png);
}
.ie6 span.coverMega span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.last.fm/flatness/catalogue/album/jewelcase_mega.png', sizingMethod='crop');
}

span.albumCover span.tracks {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1px 3px;
    color: #fff;
    font-size: 10px;
    background: #333;
}

/* ==========================================================================
   Lab disclaimer
   ========================================================================== */

body .lab-disclaimer {
    position: relative;
    padding-left: 42px;
}

.lab-disclaimer-small {
    font-size: 12px;
    color: #666;
}

.lab-disclaimer-small a,
.lab-disclaimer-small a:hover,
.lab-disclaimer-small a:focus {
    color: #666;
}

.lab-disclaimer-about {
    background-image: url(https://cdn.last.fm/flatness/labs/labs_12.png);
    background-repeat: no-repeat;
    background-position: 0 -2px;    
    padding-left: 22px;
}

.lab-disclaimer-about:hover {
    background-position: 0 -20px;
}

#launcher input#userInput {
    display: inline;
    float: left;
    width: 238px;
    height: 16px;
    line-height: 16px;
    margin: -1px 7px 0 0;
    padding: 1px 5px;
    border: 1px solid #505050;
    outline: 0;
    font-size: 11px;
    font-weight: bold;
}

#launcher p {
    clear: left;
    margin: 5px 0 0 3px;
    font-size: 11px;
    color: #ccc;
}


#launcher #searchTypes {
    margin: 0 0 3px 0;
}

#launcher #searchTypes li {
    font-size: 11px;
    line-height:12px;
    float: left;
    font-weight: bold;
    margin: 0 5px 5px 0;
    padding: 0 5px 0 0;
    border-right: 1px solid #505050;
    text-shadow: #505050 0 -1px 1px;
}

#launcher #searchTypes li.last {
    border-right: 0;
}
#launcher #searchTypes li a {
    color: #ccc;
}
#launcher #searchTypes li a:hover {
    color: #fff;
    text-decoration: none;
}
#launcher #searchTypes li.selected a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

#launcher .smallPlayButton {
    width: 23px;
    height: 22px;
    margin-top: -1px;
    background: url(https://cdn.last.fm/flatness/listen_v2/play_ondark_23x22_rest.png) no-repeat;
    border: 0;
}

#launcher .smallPlayButton:hover {
    background: url(https://cdn.last.fm/flatness/listen_v2/play_ondark_23x22_onhover.png) no-repeat;
}

.lyrics-snippet-container {
    background-image: url(https://cdn.last.fm/flatness/responsive/2/quote_sprite.png);
    background-repeat: no-repeat;
    margin-top: 24px;
}

.lyrics-snippet-container .lyrics-snippet {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-style: italic;
    font-size: 15px;
    color: #666;
    background-image: url(https://cdn.last.fm/flatness/responsive/2/quote_sprite.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    padding-left: 46px;
    padding-right: 46px;
    margin-bottom: 12px;
    min-height: 24px;
    word-wrap: break-word;
}

.lyrics-source-icon {
    margin-right: 8px;
}


/** Player */

#player.maintenance {
    width: auto;
    padding: 10px;
    background: #d6efff;
    border: solid 1px #a5d7ef;
    font-size: 11px;
    line-height: 1.454545em;
    color: #333;
}

.media-links {
    border-top: 1px solid #dbdbdb;
    padding-top: 6px;
}

.media-link .media {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
    margin-bottom: 6px;
}

div.messageBox {
    margin: 15px 0;
}
.form div.messageBox {
    margin: 0;
}

div.messageBox span.messageWrapper {
    padding: 0.125em 0.5em 0.25em 25px;
    font-weight: normal;
    line-height: 1.3em;
}

div.successMessage span.messageWrapper {
    background: url(https://cdn.last.fm/flatness/messageboxes/success.png) 0.5em center no-repeat #d6ebcc;
}
div.errorMessage span.messageWrapper, div.dialogErrorMessage {
    background: url(https://cdn.last.fm/flatness/messageboxes/error.png) 0.5em center no-repeat #ffeacc;
}

div.inlineMessage {
    background: #ffeacc;
    display: inline-block;
    margin: 0 0 0 0.5em;
    padding: 0.125em 0.5em 0.25em;
}

div.dialogErrorMessage {
    margin: 0;
    padding: 2px 2px 2px 25px;
}

.ie7 div.successMessage span.messageWrapper {
    background-position: 0.5em top;
}

.ie7 div.errorMessage span.messageWrapper {
    background-position: 0.5em top;
}

div.infoMessage span.messageWrapper,
div.warnMessage span.messageWrapper,
div.artistMessage span.messageWrapper,
div.infoMessageBlock,
div.warnMessageBlock,
div.artistMessageBlock,
div.betaMessage span.messageWrapper {
    padding: 0.125em 0.5em 0.25em 0.5em;
}
div.infoMessage span.messageWrapper,
div.infoMessageBlock {
    background:  #e4f1ff;
}
div.warnMessage span.messageWrapper,
div.warnMessageBlock {
    background: #ffeacc;
}
div.artistMessage span.messageWrapper,
div.artistMessageBlock {
    background:  #f1e4ff;
}

div.betaMessage span.messageWrapper,
div.betaMessageBlock {
    background:  #e1f5ff;
}
div.betaMessageBlock {
    position: relative;
    padding: 5px 10px;
    border: 1px solid #bddcfe;
    font-size: 11px;
    color: #333;
}
div.betaMessageBlock h3 {
    margin-bottom: 2px;
}
div.betaMessageBlock h3 a {
    color: #000;
}

div.betaMessageBlock h3 a.feedback {
    float: left;
}

/* Beta-bar strip on beta features */
#content > div.betaMessageBlock {
    margin: -1px;
}

div.nodataMessageBlock,
div.nodataMessage span.messageWrapper {
    padding: 0.5em;
    background: #f2f2f2;
    border: 1px solid #ccc;
}

div.rightCol div.nodataMessageBlock,
div.rightCol div.nodataMessage span.messageWrapper {
    background: #e3e3e3;
}

.emptyMessage {
    color: #aaa;
    font-size: 14px;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

div.newbieMessage {
    padding: 1em;
    background: #eef5fc;
    border-radius: 5px;
}

div.dismissMessage {
    margin: 0 0 15px 0;
    padding: 5px 18px 5px 5px;
    border: 5px solid #fff;
    border-radius: 5px;
    background: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 1.272727;
}
div.dismissMessage img.delete_icon {
    float: right;
    position: relative;
    left: 13px;
}
div.dismissMessage h3 {
    margin-bottom: 10px;
}
div.dismissMessage p {
    color: #666;
}
div.dismissMessageGrey {
    background: #eee;
    border-color: #eee;
}
div.dismissMessageSmall {
    padding: 3px;
    font-size: 10px;
    line-height: 1.4;
}
div.dismissMessage p.icons {
    margin: 20px 0 0 0;
}
div.dismissMessage p.icons img {
    margin: 0 5px;
}
div.dismissMessageSmall p.icons img {
    margin: 0 3px;
}
div.dismissMessage p.icons a.multiline {
    float: left;
    text-decoration: none;
}
div.dismissMessage p.icons a.large:hover span {
    text-decoration: underline;
}


div#imageBlockingWarning {
    padding: 1em;
}

div#imageBlockingWarning h3 {
    margin: 0 0 1em;
}

.cta-sidebarMessage {
    position: relative;
    padding: 8px 10px;
    margin-left: 10px;
    background: #fef598 !important;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.333333;
}

/* creates triangle */
.cta-sidebarMessage:after {
    content:"\00a0";
    display:block;
    position:absolute;
    z-index:1;
    top: 10px;
    left: -20px;
    bottom: auto;
    width:0;
    height:0;
    border-width:10px 10px;
    border-style:solid;
    border-color: transparent #fef598 transparent transparent;
}


.metaBadge {
    padding-left: 35px;
    position: relative;
    margin: 1em 0;
}

.metaBadge strong {
    font-size: 14px;
}

.metaBadgeLocation strong a {
    color: inherit;
}

.metaBadge .badge {
    position: absolute;
    left: 0;
    top: 4px;
}

.metaBadgeLocation .badge {
    top: -3px;
    left: -3px;
}

.metaBadgeDate a:focus,
.metaBadgeDate a:hover {
    text-decoration: none;
}

.metaBadgeDate a:focus .linkTitle,
.metaBadgeDate a:hover .linkTitle {
    text-decoration: underline;
}

ul.minifeedSmall li {
    padding: 3px 0 3px 25px;
    border-bottom: 1px solid #ddd;
    font-size: 11px;
}

ul.minifeedSmall li img.icon {
    display: inline;
    float: left;
    margin: 0 0 0 -25px;
}

.ie6 ul.minifeedSmall li {
    zoom: 1;
}

ul.minifeedSmall li.last {
    border: none;
}

ul.minifeedSmall li a {
    color: #0187c5;
    text-decoration: none;
}

ul.minifeedSmall li a:hover {
    text-decoration: underline;
}

ul.minifeedSmall li span.date {
    color: #999;
}

ul.minifeedSmall a.removeActivity img.icon {
    float: none;
    margin: 0 4px;
    vertical-align: middle;
}

/* ==========================================================================
   Anonymous call to actions
   ========================================================================== */

.cta,
.anon-cta {
    background: #eee;
    padding: 18px 20px 24px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 18px;
}


.cta-button,
.anon-cta-button {
    background-color: #e31b23;
    background: -webkit-linear-gradient(#e31b23, #b32024);
    background: -moz-linear-gradient(#e31b23, #b32024);
    background: -ms-linear-gradient(#e31b23, #b32024);
    background: -o-linear-gradient(#e31b23, #b32024);
    background: linear-gradient(#e31b23, #b32024);
    border-radius: 50px;
    box-shadow: inset #f85560 0 1px 0,
                inset #480000 0 -1px 0,
                rgba(0,0,0,0.25) 0 1px 5px;
    text-shadow: #480000 0 -1px 0;
    color: #fff;
    padding: 13px 25px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    border: 0;
}

.cta-button--big,
.anon-cta-button--big {
    padding: 18px 26px;
    font-size: 18px;
}

.cta-button:focus,
.cta-button:hover,
.anon-cta-button:focus,
.anon-cta-button:hover {
    background: #e31b23;
    text-decoration: none;
    color: #fff;
}

.cta-button:active,
.anon-cta-button:active {
    background: #860000;
}

.cta--bold h1,
.cta--bold h2,
.anon-cta--bold h1,
.anon-cta--bold h2 {
    font-size: 36px;
    margin-top: 0;
    margin-bottom: 12px;
    color: #1b1b1b;
}

.cta--bold p,
.anon-cta--bold p {
    font-size: 16px;
    line-height: 20px;
    color: #666;
}

/* Legacy page necessities
   ========================================================================== */

.anon-cta .bulleted li,
.anon-cta .bullet {
    list-style: disc inside
}

.anon-cta .bulleted--outside li {
    list-style-position: outside;
    margin-left: 20px;
}


/* Profile cta
   ========================================================================== */

.anon-cta--profile {
    box-shadow: rgba(0,0,0,0.5) 0 10px 10px -10px;
}

.anon-cta--profile h2 {
    color: black;
    font-size: 18px;
}

.anon-cta--profile input.anon-cta-button {
    width: 262px;
}

.anon-cta-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 12px;
}

.anon-cta-form input.text {
    width: 233px;
    font-size: 16px;
    margin-bottom: 12px;
    border-radius: 3px;
    padding: 12px;
}

/* Similar cta
   ========================================================================== */

.anon-cta--similar {
    padding-top: 36px;
    padding-bottom: 36px;
    margin-top: 0;
    margin-bottom: 36px;
    box-shadow: rgba(0,0,0,0.2) 0 10px 10px -10px inset;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
}

/* Pushdown cta
   ========================================================================== */

.anon-cta--pushdown {
    padding: 30px 0 36px;
    border-color: #ccc;
    border-style: solid;
    border-width: 0 1px 1px;
    border-radius: 0;
    box-shadow: rgba(0,0,0,0.3) 0 7px 5px -5px inset;
    position: relative;
}

.anon-cta--pushdown .anon-cta-dismiss {
    position: absolute;
    top: 18px;
    right: 20px;
}

/* Popup cta
   ========================================================================== */

.sparse-modal-content.cta--popup,
.sparse-modal-content.anon-cta--popup {
    margin-top: 0;
    padding-top: 48px;
}

.cta--popup .cta-button,
.anon-cta--popup .anon-cta-button {
    margin-bottom: 30px;
}




.month-picker {
    position: relative;
    width: 100%;    
}

.content .month-picker--bottom {
    margin-bottom: 0;
}

.month-picker-next {
    position: absolute;
    right: 0;
}

.month-picker-previous {
    position: absolute;
    left: 0;
}

.month-picker-dropdowns {
    position: relative;
    left: 50%;
    width: 50%;
    margin-left: -130px;
}

.month-picker-dropdowns .dropdown-btn-wrapper {
    float: left;
    margin-right: 10px;
}

.month-picker-dropdown-year {
    width: 100px;
}

.month-picker-dropdown-month {
    width: 150px;    
}

/* ==========================================================================
   Noobstrap messaging on library loved, banned, playlists, tags
   ========================================================================== */

.noobstrap {
    padding: 10px;
    border: 5px solid #e4f1ff;
    border-radius: 5px;
    background: #e4f1ff;
}

.noobstrap h3 {
    color: #D51007;
    clear: both;
}

.noobstrap p.big {
    font-size: 14px;
}

.noobstrap .box {
    margin: 15px 0 0 0;
    padding: 5px 10px 5px 10px;
    border: 5px solid #fff;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}

.noobstrap .screenshots {
    padding: 15px 0 0 15px;
}

.ie6 .noobstrap .box,
.ie6 .noobstrap .screenshots {
    height: 1%;
    overflow: auto;
}

.noobstrap .screenshots p {
    max-width: 26em;
}

.noobstrap .screenshots .screenshot {
    float: right;
    display: inline;
    width: 132px;
    color: #666;
    font-size: 10px;
    margin: -15px 0 0 15px;
    text-align: center;
}

.noobstrap .screenshots .screenshot img {
    border: 1px solid #ccc;
    padding: 1px;
    background: #fff;
}

/* artist specific */

a.ontour {
    color: #fff;
    background: #D51007;
    font-size: 9px;
    line-height: 1em;
    font-weight: normal;
    white-space: nowrap;
    text-transform: uppercase;
    border: 3px solid #D51007;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 0.25em;
}

a.ontour:hover {
    text-decoration: none;
    background-color: #999;
    border-color: #999;
}

/* ==========================================================================
   Page head
   ========================================================================== */

/*
    .page-head has four states
    with-crumbtrail with-image       - Full state, with images and crumbtrail
    without-crumbtrail with-image    - No crumbtrail, but image
    with-crumbtrail without-image    - Header, crumbtrail and nav
    without-crumbtrail without-image - Simplest state, header and nav
*/

.page-head {
padding: 18px 0;
position: relative;
}

.fiflufi .page-head,
.fixed .page-head,
.sic .page-head.separated {
padding-left: 15px;
padding-right: 15px;
}

.l-970 .page-head {
margin-top: -18px;
}

.page-head.separated {
padding-bottom: 18px;
border-bottom: 1px dotted #ccc;
}

.fiflufi .page-head.separated ~ .leftCol,
.fiflufi .page-head.separated ~ .rightCol {
padding-top: 15px;
}

.sic .page-head.separated {
margin-left: -15px;
margin-right: -15px;
}

.page-head h1 {
font-size: 20px;
line-height: 30px;
}

.fullWidth > h1:first-child {
margin-top: 15px;
}

.page-head .crumb-wrapper {
line-height: 36px;
}

.page-head .crumb-image {
height: 60px;
width: 60px;
border-radius: 3px;
}

.page-head .top-crumb {
font-size: 13px;
line-height: 18px;
font-weight: normal;
width: 50%;
}

.page-head .crumb-wrapper h1 {
border-top: 1px solid #ccc;
padding-top: 6px;
margin-top: 5px;
}

.page-head .crumb-arrow {
text-indent: -99999px;
display: inline-block;
width: 10px;
height: 14px;
margin: 0 3px 0 5px;
background: url('https://cdn.last.fm/flatness/headingwithnav/1/crumb-arrow.png') 50% 50% no-repeat;
line-height: 0.65;
}

/* ==========================================================================
   Secondary nav
   ========================================================================== */

.secondary-nav {
text-align: right;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.secondary-nav.more-visible .visible-menu {
padding-right: 1em;
}

.secondary-nav .more {
display: none;
}

.secondary-nav.more-visible .more {
display: block;
}

.secondary-nav ul {
overflow: hidden;
height: 18px;
margin-bottom: 0;
}

.secondary-nav li {
display: inline;
margin-left: 1em;
}

.secondary-nav a {
white-space: nowrap;
}

.secondary-nav .drop-down-menu {
position: absolute;
top: 0;
right: 0;
}

.secondary-nav .hidden-menu {
overflow: visible;
background: #fff;
position: absolute;
text-align: left;
min-width: 150px;
height: auto;
border: 1px solid #ccc;
z-index: 5000000;
right: -10px;
box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
display: none;
margin-top: 5px;
}

.active .hidden-menu {
display: block;
}

.secondary-nav .hidden-menu li {
display: block;
margin: 0
}

.secondary-nav .hidden-menu li a {
display: block;
padding: 0 10px;
line-height: 30px;
}

.secondary-nav .hidden-menu li a:hover,
.secondary-nav .hidden-menu li a:focus {
background: #eeeeee;
text-decoration: none;
}

.secondary-nav .current a,
.secondary-nav .current a:hover {
color: #000;
font-weight: bold;
}

.secondary-nav .active .menu-toggle {
background: #fff;
border: 1px solid #ccc;
padding: 4px 9px 7px;
border-bottom: none;
z-index: 5000001;
position: relative;
left: 10px;
border-radius: 3px 3px 0 0;
}

/* ==========================================================================
   Page head states
   ========================================================================== */

/* Now for the complicated part: The state specific overrides */

/* Without crumbtrail, elements should be table-cells and vertically aligned
   to accommodate multi-line titles */

.page-head.without-crumbtrail {
display: table;
}

.page-head.without-crumbtrail h1 {
width: 50%;
}

.page-head.without-crumbtrail.with-image h1 {
padding-left: 20px;
}

.page-head.without-crumbtrail h1,
.page-head.without-crumbtrail.with-image .crumb-image,
.page-head.without-crumbtrail .secondary-nav {
display: table-cell;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.page-head.without-crumbtrail .secondary-nav {
left: 3px; /* line-up table-cell with abs positioned version */
}

.fiflufi .page-head.without-crumbtrail .drop-down-menu {
right: 15px;
}


.page-head.without-crumbtrail .drop-down-menu {
top: 50%;
margin-top: -9px;
}

/* with images and a crumbtrail, the image should be absolutely positioned and the nav alongside the crumb */

.page-head.with-crumbtrail.with-image {
margin-left: 80px;
min-height: 60px;
}

.page-head.with-crumbtrail.with-image .crumb-image {
position: absolute;
left: -80px;
}

.fiflufi .page-head.with-crumbtrail.with-image .crumb-image,
.fixed .page-head.with-crumbtrail.with-image .crumb-image,
.sic .page-head.with-crumbtrail.with-image.separated .crumb-image {
left: -65px;
}

.page-head.with-crumbtrail .secondary-nav {
width: 50%;
position: absolute;
right: 0;
top: 18px;
padding-left: 20px;
}

.fiflufi .page-head.with-crumbtrail .secondary-nav,
.fixed .page-head.with-crumbtrail .secondary-nav,
.sic .page-head.with-crumbtrail.separated .secondary-nav {
right: 15px;
}

.page-head.with-crumbtrail.without-image .secondary-nav {
top: 18px;
}


/* ==========================================================================
   Actions bar - can sit below .page-head
   ========================================================================== */

.actions-bar {
padding-bottom: 15px;
overflow: hidden;
background: #fff;
}

.fiflufi .actions-bar,
.fixed .actions-bar {
padding-left: 15px;
padding-right: 15px;
}


/* ==========================================================================
   Legacy
   ========================================================================== */

div.pagehead {
    position: relative;
    margin: 15px 0;
    padding: 0 0 0 48px;
    clear: both;
}

div.pagehead .secure {
    margin-left: -48px;
}

.l-970 div.pagehead {
    margin-top :0;
    margin-bottom: 0;
}

div.catalogue.pagehead {
    padding: 0;
}

div.altpagehead {
    padding: 0;
    margin: 15px 0 0 0;
}

/* Only .fixed layouts have margin on fullWidth */
.fixed .fullWidth div.pagehead,
.fixed .leftCol div.pagehead {
    margin-top: 0;
}

div.pagehead .noImage {
    margin-left: -48px;
}

div.pagehead p {
    color: #0187c5;
    font-size: 12px;
}

div.pagehead p span.userImage {
    float: left;
    margin-left: -48px;
}

div.pagehead p span.userImage img {
    float: none;
    margin-left: 0;
}

div.pagehead p img {
    float: left;
    margin-left: -48px;
    padding: 1px;
    border: 1px solid #ccc;
}

div.pagehead h1 {
    color: #000;
    font-size: 18px;
    margin-top: 0.15em;
}

.l-970 div.pagehead h1 {
    font-size: 24px;
    margin-top: 0;
}

div.pagehead h1.withAlbum {
    padding-right: 85px;
}
div.pagehead h1.withAlbum a.featuredAlbum {
    position: absolute;
    top: 0;
    right: 0;
}

div.pagehead h1 a.feed {
    margin-left: 0.25em;
}

div.pagehead h1 a.feed img {
    float: none;
    vertical-align: baseline;
    margin: 0;
}

div.pagehead div.pagination {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    margin-top: -4px;
}

body.r-tag div.pagehead p img {
    border: 0;
}

div.pagehead p.note {
    color: #666;
    font-size: 11px;
}

div.pagehead img {
    margin-bottom: 3px;
    vertical-align: middle;
}

div.pagehead div.brand {
    position: absolute;
    top: -10px;
    right: 200px;
    width: 70px;
}

div.pagehead div.brand a {
    display: block;
}

/* Countries have wider flag images */
div.pagehead.country {
    padding-left: 79px;
}

div.pagehead.country p img {
    margin-left: -79px;
}

div.pagehead .breadcrumb {
    margin-left: 0;
}

.pagehead .feeds {
    margin: 1em 0 0 0;
}

div.eventPagehead {
    padding-left: 35px;
    line-height: 1.3;
}

.eventPagehead .calSheet {
    position: absolute;
    left: 0;
    top: 2px;
}

.eventPagehead .calLink:hover {
    text-decoration: none;
}

.eventPagehead .calLink:hover .linkTitle {
    text-decoration: underline;
}


/* ==========================================================================
   Page head bar
   ========================================================================== */

.page-head-bar {
    font-weight: bold;
    margin: 0;
    overflow: hidden;
    background: #eef5fc;
    padding: 18px 20px;
    border-bottom: 1px solid #ddd;
}

.page-head-flag {
    float: right;
}

/* Page template variants
   ========================================================================== */

.theme-whittle .page-head-bar {
    margin-bottom: 0;
    margin-left: -19px;
    margin-right: -19px;
    margin-top: -1px;
}

.theme-whittle .page-head-bar p {
    margin-bottom: 0;
}

.fullWidth .page-head-bar,
.fiflufi .leftCol .page-head-bar {
    margin-top: -15px;
}

.sic .page-head-bar {
    margin-left: -15px;
    margin-right: -15px;
}

/* pagination styles */

.pages {
    display: none;
}

/* ==========================================================================
   Legacy default pagination
   ========================================================================== */

.pagination {
    float: right;
    margin: 0.5em 0;
    font-size: 11px;
    line-height: 2.5;
}

.pagination .selected,
.pagination a {
    text-decoration: none;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    margin: 0 0.2em;
}
.pagination a:hover {
    color: #000;
    border-color: #aaa;
    background: #efefef;
}

.pagination .selected {
    font-weight: bold;
    border: 0;
}
.pagination .ellipsis {
    margin: 0 0.5em;
}

.pagination a:hover span {
    text-decoration: underline;
}

.pagination a.prevlink,
.pagination a.prevlink:hover {
    padding-left: 15px;
    border: 0;
    background: url(https://cdn.last.fm/depth/global/page_previous.gif) no-repeat left center;
    color: #0187c5;
}

.pagination a.nextlink,
.pagination a.nextlink:hover {
    padding-right: 15px;
    border: 0;
    background: url(https://cdn.last.fm/depth/global/page_next.gif) no-repeat right center;
    color: #0187c5;
}


#profilerButton {
    display:inline;
    float:left;
    font-size:10px;
    font-weight:bold;
    height:22px;
    line-height:22px;
    margin:0 0 0 26px;
    overflow:hidden;
    color: #D20039;
}
#profilerButton:hover,
#profilerButton:hover div.messageBox strong {
    background-color: #BFDFF4;
}
#profilerButton div.messageBox {
    margin: 0;
}
#profilerButton.blink span {
    visibility: hidden;
}

.profilerSection {
    font-size: 10px;
}
.profilerSection .fixed {
    height: 300px;
    overflow: auto;
}
.profilerSection .code {
    padding: 5px;
    border: 1px solid #ddd;
    background: #eee;
    margin-bottom: 10px;
    overflow: auto;
}


.promo-unit,
a.promo-unit:hover,
a.promo-unit:focus {
    display: block;
    text-decoration: none;
    color: #000;
}

.promo-unit .media {
    margin-bottom: 0px;
}

.promo-unit img {
    border-radius: 3px;
}

.promo-unit-fake-link {
    text-decoration: none;
    color: #0187c5;
}

.promo-unit .media-pull-left:hover + .media-body .promo-unit-fake-link,
.promo-unit .promo-unit-fake-link:hover,
.promo-unit h2:hover {
    text-decoration: underline;
}

.promo-unit h2 {
    margin-top: 0;
    margin-bottom: 18px;
}

.promo-unit p {
    margin-bottom: 0;
}

/* Auto classes */

.promo-unit--add-vertical-margins,
.promo-unit--add-top-margin {
    margin-top: 18px;
}

.promo-unit--add-vertical-margins,
.promo-unit--add-bottom-margin {
    margin-bottom: 18px;
}

/* ==========================================================================
   Recently viewed module
   ========================================================================== */

.recently-viewed {
    position: relative;
    max-width: 942px;
    padding: 0 18px;
    background: white;
    border-radius: 0 0 3px 3px;
    border: 1px solid #ccc;

    /* Attaches to bottom of content area */
    margin: -25px auto 24px;
}

/* Legacy pages with 15px margins, etc. */
.theme-flatness .recently-viewed {
    margin-top: -1px;
    max-width: 100%;
    width: 948px;
    padding: 0 15px 15px;
}

.recently-viewed h2 {
    font-size: 13px;
    margin: 18px 0;
    color: #000;
}

.recently-viewed h2 a,
.recently-viewed h2 span {
    color: #999;
    font-weight: normal;
}

.recently-viewed-list {
    margin: 0 -5px;
}

.recently-viewed-item {
    display: block;
    float: left;
    width: 6.6667%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px;
}

.recently-viewed-item img {
    max-width: 100%;
    border-radius: 3px;
}

.recently-viewed .lab-disclaimer-small {
    position: absolute;
    top: 18px;
    right: 20px;
}

div.resource {
    position: relative;
    margin: 0 0 1.5em 0;
    padding: 0.5em;
    background: #f0f0f0;
}
.resource span.actions {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em 0.5em 0.5em 0.5em;
    background: #f6f6f6;
    font-size: 11px;
}
.resource:hover span.actions {
    visibility: visible;
}
.resource span.actions a {
    color: #000;
}
.resource span.actions a:hover {
    color: #0187c5;
}
.resource span.actions img {
    margin: 1px 4px 0 0;
    float: left;
}

body div.resource h1 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.428571;
    font-weight: normal;
    background: none;
}
body div.resourceSmall h1 {
    font-size: 12px;
    line-height: 1.5;
}

.resource h1 img.thumb,
.resource h1 a span.userImage,
.resource h1 a span.albumCover,
.resource h1 a .videoStill {
    float: left;
    margin-bottom: 0.5em;
}

.resource h1 a span.albumCover,
.resource h1 a .videoStill {
    padding: 2px;
}

.resource h1 a span.albumCover {
    background: #fff;
}

.user h1 a img.thumb {
    padding: 1px;
    border: 1px solid #999;
}

.resource h1 a span.albumCover {
    margin-bottom: 1em;
    padding: 0;
}
.resource h1 a span.poster {
    margin: 0 0 1em 0;
}
.resource h1 a span.userImage img.thumb,
.resource h1 a span.albumCover img.thumb,
.resource h1 a span.poster img.thumb,
.resource h1 a .videoStill img.thumb {
    float: none;
    margin: 0;
    padding: 0;
}

.resource h1 a .videoStill .play {
    display: none;
}

.resourceSmall h1 a img.thumb,
.resourceSmall h1 a span.calSheet {
    margin-left: -48px;
}
.resourceSmall h1 a span.albumCover {
    margin-left: -46px;
}
.resourceMedium h1 img.thumb,
.resourceMedium h1 a span.userImage,
.resourceMedium h1 a span.calSheet {
    margin-left: -83px;
}
.resourceVideoMedium h1 a .videoStill {
    margin-left: -138px;
}
.resourceMedium h1 a span.calSheet {
    width: 50px;
}
.resourceMedium h1 a span.calSheet span.month {
    font-size: 11px;
    height: 18px;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.resourceMedium h1 a span.calSheet span.day {
    font-size: 24px;
    line-height: 1.5;
}
.resourceMedium h1 a span.albumCover {
    margin-left: -88px;
}
.resourceLarge h1 a img.thumb {
    margin-left: -153px;
}
.resourceLarge h1 a span.albumCover,
.resourceLarge h1 a span.calSheet {
    margin-left: -149px;
}

.resource p,
.resource div {
    margin: 0.2em 0 0 0;
    color: #111;
}

body div.resourceSmall h1,
.resourceSmall p,
.resourceSmall div {
    padding-left: 50px;
}
body div.resourceMedium h1,
.resourceMedium p,
.resourceMedium div {
    padding-left: 85px;
}
body div.resourceVideoMedium h1,
.resourceVideoMedium p,
.resourceVideoMedium div {
    padding-left: 138px;
}
body div.resourceLarge h1,
.resourceLarge p,
.resourceLarge div {
    padding-left: 155px;
}


div.richtext div.full {
    display: none !important;
    visibility: hidden !important;
}


#page .scrobblesource {
    color: #666;
    font-size: 11px;
    line-height: 1.363636;
    padding: 0.5em 0;
}

#page .scrobblesource img.ss_icon {
    vertical-align: baseline;
    margin: 0 3px -3px 0;
}

#page ul.usersSmall .scrobblesource {
    padding: 0;
    line-height: 1;
}

#secondaryNavigation {
    width: 111px;
    font-size: 11px;
    line-height: 2em;
    font-weight: bold;
    float: left;
    margin-top: -1px;
    margin-left: -111px;
}

#secondaryNavigation ul {
    overflow: hidden;
    padding: 1px 0 0 0;
    border-top: 1px solid #ccc;
}

#secondaryNavigation li {
    display: block;
}

#secondaryNavigation li a {
    display: block;
    width: 94px;
    margin: -1px 0 0 0;
    padding: 5px 5px 5px 10px;
    text-decoration: none;
    
    /* Use css3 gradients with a fallback; http://css-tricks.com/css3-gradients/ */
    background-color: #ededed;
    background-repeat: repeat-x;
    background-image: url(https://cdn.last.fm/flatness/secondary_nav_bg.png);
    background-image: -moz-linear-gradient(top, #fff, #eee 70%);
    background-image: -webkit-linear-gradient(top, #fff, #eee 70%);
    
    border: 1px solid #ccc;
    color: #666;
}
#secondaryNavigation li.first a {
    border-top: 0;
}

/* Used on /findfriends */
#secondaryNavigation li a img {
    display: block;
}

#secondaryNavigation li.current + li a {
    box-shadow: inset rgba(0,0,0,0.1) 0 11px 10px -10px;
}

#secondaryNavigation li a:hover,
#secondaryNavigation li.current a {
    color: #D51007;
    background: #fff;
}
#secondaryNavigation li.current a {
    border-right-color: #fff;
}

#secondaryNavigation .multiLine {
   line-height: 1.3em;
   margin: 3px 0;
   display: block;
}

.selectachain {
    overflow: hidden;
}

.ie6 {
    height: 1%;
}

.selectachain li {
    float: left;
}

.selectachain li.selectachain-option {
    padding-right: 25px;
    background: url('https://cdn.last.fm/flatness/buttons/9/flex-arrows.png') 100% -100px no-repeat;
}

.selectachain li.selectachain-option:last-child,
.selectachain li.selectachain-last {
    background: none;
}

.selectachain li a,
.selectachain li strong {
    padding: 3px 0 2px 0;
    display: block;    
}

.selectachain li a:hover,
.selectachain li a:focus {
    outline: none;
    text-decoration: underline;
}

.selectachain li .selectachain-field {
    display: none;
}
.selectachain li.selectachain-option .selectachain-field {
    display: block;
}

.selectachain li.selectachain-option .selectachain-open-link {
    display: none;
}

.selectachain li.selectachain-option a,
.selectachain li.selectachain-option strong {
    padding: 2px 8px 1px 8px;
    border: 1px solid;

    -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
            border-radius: 3px;           
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;    

    font-weight: normal;
}

.selectachain li.selectachain-option a {
    border-color: #d1d0d0 #b5b5b5 #989898 #b5b5b5;

    background-color: #f8f8f8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#fefefe)); 
    background-image: -webkit-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:    -moz-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:     -ms-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:      -o-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:         linear-gradient(top, #f2f2f2, #fefefe);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#fefefe');    

    color: #111;
}

.selectachain li.selectachain-option strong {
    border-color: #00a8d1;

    background-color: #009cc7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#00a7d0), to(#008fbe)); 
    background-image: -webkit-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:    -moz-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:     -ms-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:      -o-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:         linear-gradient(top, #00a7d0, #008fbe);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00a7d0', EndColorStr='#008fbe');        

    color: #fff;
}

.selectachain-hidedropdown datalist {
    display: none;
}

.selectachain select,
.selectachain .customSelect-wrap {
    float: left;
}

.selectachain datalist {
    float: left;
}

.selectachain-or {
    float: left;
    padding: 2px 8px 1px 10px
}






/* The old share buttons have had a class of .s-resource added, and the new ones s-default */
/* When the old ones are scrapped, the s-resource styles should be removed, and s-default styles should be merged into the base styles */

#sharebar {
    margin: 1em 0;
    line-height: 1.6em;
}

#sharebar.s-default {
    line-height: 1.5;
}


#sharebuttons {
    font-size: 0;
}


#sharebuttons li {
    display: inline-block;
    height: 21px;
    margin: 0 12px 5px 0;
    position: relative;
}

#sharebar.s-default #sharebuttons li {
    margin: 0 8px 8px 0;
    height: auto;
    font-size: 12px;
    text-align: left;
}

#sharebar.s-default #sharebuttons {
    margin-right: -8px;
}

#sharebar.s-default .lfmFlexButton span,
#sharebar.s-default .lfmFlexButton strong {
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 2px;
}


.ie6 #sharebuttons li,
.ie7 #sharebuttons li {
    display: inline;
    /*
        Set correct stacking context for in IE.
        Display FB iframes above any other elements within catalogueHead, mainly playLinks
    */
    z-index: 5;
}

#sharebar.s-resource .twt-share {
    min-width: 55px;
    font-size: 10px;
    text-align: center;
}

#sharebar.s-resource .twt-share a {
    background: #E6F0F6;
    background-image: -webkit-linear-gradient(#FFF, #D5E6EF);
    background-image: -moz-linear-gradient(#FFF,#D5E6EF);
    color: #186467;
    text-shadow: #fff 0 -1px 0;
    border: 1px solid #9DB9CB;
    display: inline-block;
    min-width: 53px;
    height: 18px;
    border-radius: 3px;
}

#sharebar.s-resource .twt-share a:hover,
#sharebar.s-resource .twt-share a:focus {
    border-color: #68A0C4;
}

#sharebar.s-default .twt-share span {
    padding-left: 29px;
}
#sharebar.s-default .twt-share img {
    position: absolute;
    top: 6px;
    left: 6px;
}


#sharebuttons {
    margin-top: 5px;
}

#sharebar .fbk-share {
    /* As the Facebook like buttton is in an iFrame it's popup cannot be 
     * selectively stacked at the navigation z-index level, so the whole button
     * is placed at the upper-limit of the content level in an attempt to 
     * ensure it appears above any content-level ads.
     */
    z-index: 4999;
}

#sharebar.s-resource #sharebuttons .fbk-share {
    max-width: 190px;
}

#sharebar.s-default .fbk-share span {
    padding-left: 24px;
}
#sharebar.s-default .fbk-share img {
    position: absolute;
    top: 6px;
    left: 6px;
}

#sharebar.s-default .google-plus1 span {
    padding-left: 24px;
}
#sharebar.s-default .google-plus1 img {
    position: absolute;
    top: 6px;
    left: 6px;
}

#sharebar.s-default .lfm-share span {
    padding-left: 29px;
}
#sharebar.s-default .lfm-share img {
    position: absolute;
    top: 4px;
    left: 6px;
}

#sharebuttons iframe {
    border: none;
    overflow: hidden;
    height: 21px;
}

#sharebar #sharebuttons .lfmSendButton {
    height: 20px;
    background: url(https://cdn.last.fm/flatness/sharebar/send.png) no-repeat right top;
    color: #707070;
    text-shadow: #fff 0 1px 0;
    display: inline-block;
    padding-right: 3px;
}

#sharebar #sharebuttons .lfmSendButton strong {
    padding: 3px 5px 3px 25px;
    background: url(https://cdn.last.fm/flatness/sharebar/send.png) no-repeat left top;
    display: inline-block;
    line-height: 14px;
    height: 14px;
    font-size: 11px;
}

#sharebar #sharebuttons .lfmSendButton:hover {
    background-position: right -20px;
    color: #555;
}

#sharebar #sharebuttons .lfmSendButton:hover strong {
    background-position: left -20px;
}

/* shoutboxInput */
div#shoutbox {
    font-size: 11px;
    line-height: 1.181818;
}

div.shoutboxInput form {
    padding: 0 0 0 80px;
    clear: both;
    position: relative;
    min-height: 72px;
}

.ie6 div.shoutboxInput form {
    height: 72px;
}

div.shoutboxInput form span.avatar {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 68px;
    height: 68px;
}

/* otherwise the little subscriber dot is at the wrong position */
div.shoutboxInput form span.avatar span.userImage {
    display: block;
}

div.shoutboxInput form textarea {
    display: block;
    width: 99%;
    height: 60px;
}

.ie6 div.shoutboxInput form textarea,
.ie7 div.shoutboxInput form textarea {
    width: 98%;
}

div.shoutboxInput div.textareaActions {
    margin: 5px 0 0 0;
    padding-top: 4px;
}

div.shoutboxInput div.textareaActions input#sbPost {
    float: right;
}

.overCharLimit #sbCharCount,
#sbCharCount.overCharLimit  {
    color: red;
}

div.shoutboxInput div.overCharLimit #sbPost {
    color: #888;
}

/* shoutboxList */
.shouts {
    margin: 15px 0;
    width: 100%;
}

.ie6 .shouts {
    width: auto;
}

.shouts .message {
    clear: both;
    position: relative;
    margin: 0 0 12px 0;
    padding: 0 0 6px 80px;
}

.shouts h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 18px;
}

.shouts h3 a,
.shouts h3 a:hover {
    color: #0187c5;
}

.lfmBlack #page #shoutList h3 a {
    color: #0187c5 !important; /* Paint it black strikes again */
}

/* break long links */
.shouts .message a {
    word-wrap: break-word;
}

.shouts .message .author span.userImage {
    display: inline;
    float: left;
    position: relative;
    margin-left: -80px;
}

.shouts .message p {
    padding: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    word-wrap: break-word;
}

.shouts .can-delete p {
    padding-right: 20px;
}

.shouts .meta {
    margin: 6px 0 0;
    font-size: 11px;
    color: #999;
}

.shouts .meta a {
    color: #999;
}

.shoutbox-reply {
    display: none;
}

.user-shoutbox .shoutbox-reply {
    display: inline;
}

.shouts .date {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 16px;
}

.shouts .can-delete .date {
    right: 18px;
}

.shouts .meta form {
    display: none;
    position: absolute;
    top: 1px;
    right: 0;
    margin: 0;
    display: block;
    opacity: 0.5;
}

.shouts .meta form:hover {
    opacity: 1;
}

.deferred.loading-indicator {
    background: url('https://cdn.last.fm/flatness/spinner_big.gif') no-repeat center 50px;
    min-height: 100px;
}

.theme-whittle .deferred.loading-indicator {
    background: url('https://cdn.last.fm/flatness/spinner_big_000000_on_eeeeee.gif') no-repeat center 50px;
}

.widget-shoutbox {
    min-height: 175px; /* Add min height so nearby facebook send dialog is not clipped */
}




.js .sparse-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

    /* 1x1 black pixel with 30% opacity */
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgZGT0BQAAWwBRwVbkHgAAAABJRU5ErkJggg==');
    display: none;
    z-index: 5000000;
}

.no-js .sparse-modal {
    margin-bottom: 24px;
}

.js .sparse-modal--show {
    display: table;
}

.sparse-modal-cell {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.sparse-modal-box {
    position: relative;
    border-radius: 5px;
    background: #fff;
    max-width: 540px;
    margin: 0 auto;
    box-shadow: rgba(0,0,0,0.5) 0 0 10px;
    overflow: hidden;
}

.sparse-modal-box .align-right .btn {
    margin-left: 20px;
}

.sparse-modal-header {
    padding: 24px 60px 24px 30px;
    border-bottom: 1px solid #ccc;
}

.sparse-modal--error .sparse-modal-header {
    padding-bottom: 0;
    border-bottom: 0;
}

.sparse-modal-header h1 {
    margin: 0;
}

.sparse-modal-close {
    position: absolute;
    right: 15px;
    top: 16px;
}

.no-js .sparse-modal-close {
    display: none;
}

.sparse-modal-content {
    padding: 0 30px 30px;
    position: relative;
    margin-top: 24px;
}

.sparse-modal-scroll {
    overflow: auto;
}

@media only screen and (max-height: 900px) { .js .sparse-modal-scroll { max-height: 750px; } }
@media only screen and (max-height: 850px) { .js .sparse-modal-scroll { max-height: 700px; } }
@media only screen and (max-height: 800px) { .js .sparse-modal-scroll { max-height: 650px; } }
@media only screen and (max-height: 750px) { .js .sparse-modal-scroll { max-height: 600px; } }
@media only screen and (max-height: 700px) { .js .sparse-modal-scroll { max-height: 550px; } }
@media only screen and (max-height: 650px) { .js .sparse-modal-scroll { max-height: 500px; } }
@media only screen and (max-height: 600px) { .js .sparse-modal-scroll { max-height: 450px; } }
@media only screen and (max-height: 550px) { .js .sparse-modal-scroll { max-height: 400px; } }
@media only screen and (max-height: 500px) { .js .sparse-modal-scroll { max-height: 350px; } }
@media only screen and (max-height: 450px) { .js .sparse-modal-scroll { max-height: 300px; } }
@media only screen and (max-height: 400px) { .js .sparse-modal-scroll { max-height: 250px; } }
@media only screen and (max-height: 350px) { .js .sparse-modal-scroll { max-height: 200px; } }
@media only screen and (max-height: 300px) { .js .sparse-modal-scroll { max-height: 150px; } }
@media only screen and (max-height: 250px) { .js .sparse-modal-scroll { max-height: 100px; } }

/* ==========================================================================
   Spotify in-page playback (SPIPP)
   ========================================================================== */

/* Mediabar
   ========================================================================== */

.persistent-bar {
    position: fixed;
    bottom: -1px;
    z-index: 4999;
    width: 980px;
    /* 
       Force hardware acceleration when rendering, otherwise Safari 6 does not 
       render the element despite it being there (it can be interacted with).

       Seems to be caused by a combination of the fixed positioning, the layout
       of the feedback button, and the fact that the mediabar is hidden when 
       the page loads.

       See WEB-20328. This can be removed when there is no longer a 
       feedback button.
    */
    -webkit-transform: translate3d(0, 0, 0);
}

.modtoolbar-visible .persistent-bar {
    bottom: 22px;
}

.spotify-mediabar-wrapper {
    margin-right: 150px;
}

.spotify-mediabar-wrapper .spotify-stick, 
.spotify-mediabar-wrapper .spotify-stick-menu {
    position: relative !important;
}

body {
    padding-bottom: 40px;
}

/* Feedback button
   ========================================================================== */

.spotify-mediabar-feedback {
    overflow: hidden;
    height: 18px;
    width: 149px;
    padding: 10px 0;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
}

.spotify-mediabar-feedback .beta-badge {
    text-shadow: #900 0px -1px 1px;
}

/* The following styles crib from Spotify's mediabar css to match it's appearance */

.spotify-mediabar-feedback {
    background: #333332;
    background:-moz-linear-gradient(top,#333332 0,#272626 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#333332),color-stop(100%,#272626));
    background:-webkit-linear-gradient(top,#333332 0,#272626 100%);
    background:-o-linear-gradient(top,#333332 0,#272626 100%);
    background:-ms-linear-gradient(top,#333332 0,#272626 100%);
    background:linear-gradient(top,#333332 0,#272626 100%);
    border: 1px solid #000;
    border-width: 1px 1px 0 0;
    box-shadow: inset 0 1px 0 #666, inset 1px 0 0 #474747;

    font-size: 11px;
    text-shadow: #000 0px -1px 1px;
    color: #fff;  
}

.spotify-mediabar-feedback:focus,
.spotify-mediabar-feedback:hover {
    background: #4C4C4C;
    background:-moz-linear-gradient(top,#444 0,#272626 100%);
    background:-o-linear-gradient(top,#444 0,#272626 100%);
    background:-ms-linear-gradient(top,#444 0,#272626 100%);
    background:linear-gradient(top,#444 0,#272626 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#444),color-stop(100%,#272626));
    background:-webkit-linear-gradient(top,#444 0,#272626 100%);

    text-decoration: none;
    color: #fff;
}

.spotify-mediabar-feedback:active {
    background: #222;
    background:-moz-linear-gradient(top,#222 0,#272626 100%);
    background:-o-linear-gradient(top,#222 0,#272626 100%);
    background:-ms-linear-gradient(top,#222 0,#272626 100%);
    background:linear-gradient(top,#222 0,#272626 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#222),color-stop(100%,#272626));
    background:-webkit-linear-gradient(top,#222 0,#272626 100%);
}

/* Inline buttons
   ========================================================================== */

.spotify-inline-play-button {
    display: inline-block;
}

{* Spotify play icons come with a preset margin which we want to reset. *}
html .spotify-play-icon {
    margin: 0;
}


/* responsive */

.stationbutton.iconright--question:after {
    opacity: 1;
}

.stationbutton--unavailable,
.stationbutton--unavailable:hover,
.stationbutton--unavailable:focus,
.stationbutton--unavailable:active {
    background: #343434;
    box-shadow: none;
    color: #999999;
}

/* inline */

#page .stationbuttonInline {
    color: #1b1b1b;
    line-height: 1.181818;
    white-space: nowrap;
}
#page .stationbuttonImage {
    white-space: normal;
}

#page .stationbuttonInline:hover {
    color: #1b1b1b;
}

#page .stationbuttonInline span {
    vertical-align: middle;
}

#page .stationbuttonInline img.radio_play_icon {
    margin-right: 5px;
    vertical-align: middle;
}

.stationbuttonInline img.radio_small_icon {
    margin: 0 4px 0 0;
    position: relative;
    top: 2px;
}

/* medium */

.stationbuttonMedium {
    clear: both;
    display: block;
    position: relative;
    height: 25px;
    background: url(https://cdn.last.fm/flatness/buttons/stationbutton/8/stationbutton-medium.png) left top no-repeat;
    margin: 0 10px 10px 0;
    padding-left: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    line-height: 25px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

#page .stationbuttonMedium:hover,
#page .stationbuttonMedium:hover span.stationButtonWrapper {
    color: #fff;
    text-decoration: underline;
}

.stationbuttonMedium span.stationButtonWrapper {
    position: relative;
    display: block;
    padding: 0 10px 0 2px;
    background: url(https://cdn.last.fm/flatness/buttons/stationbutton/8/stationbutton-medium.png) right top no-repeat;
    height: 25px;
}

#page .stationbuttonMedium:hover {
    background-position: left -25px;
}

#page .stationbuttonMedium:hover span.stationButtonWrapper {
    background-position: right -25px;
}

.stationbuttonMediumRight {
    clear: none;	
    float: right;
    margin: 0 0 10px 10px;
    max-width: auto;
}
.ie6 #page .stationbuttonMediumRight {
    width: auto;
}
.ie6 #page .stationbuttonMedium span.stationButtonWrapper {
    width: 0;
}

.ie7 #page .stationbuttonMediumRight {
    overflow: visible;
}

/* Large */

.stationbuttonLarge {
    clear: both;
    display: block;
    position: relative;
    height: 50px;
    line-height: 1.181818em;
    font-size: 11px;
    padding-left: 37px;
    cursor: pointer;
    overflow: hidden;
    background: url(https://cdn.last.fm/flatness/buttons/stationbutton/7/stationbutton-large.png) left top no-repeat;
    color: #fff;
}

.stationbuttonLarge:hover {
    background-position: left -50px;
}

.stationbuttonLarge:hover span.stationButtonWrapper {
    background-position: right -50px;
}

.stationbuttonLarge span.stationButtonWrapper {
    position: relative;
    display: block;
    padding: 8px 0 8px 2px;
    margin: 0 0 3px 0;
    background: url(https://cdn.last.fm/flatness/buttons/stationbutton/8/stationbutton-large.png) right top no-repeat;
    height: 52px;
    color: #ccc;
}

.stationbuttonLarge span.stationButtonWrapper strong {
    color: #fff;
    font-size: 12px;
    line-height: 1.166667em;
}

.stationbuttonLarge span.stationButtonWrapper p {
    margin: 4px 0 0 0;
    white-space: nowrap;
}


.stationbuttonLarge:hover {
    text-decoration: none;
}

.stationbuttonLarge:hover span.stationButtonWrapper strong {
    color: #fff;
    text-decoration: underline;
}

/* Custom icons (station starter) */
.stationbuttonCustomicons {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.stationbuttonCustomicons li {
    margin-bottom: 3px;
}

.stationbuttonCustomicons p {
    margin-bottom: 0px !important;
    color: #999;
}

.stationbuttonCustomicons:hover .enabled {
    cursor: pointer;
}

.stationbuttonCustomicons strong {
    padding: 0 2px;
}
.stationbuttonCustomicons:hover .enabled strong {
    text-decoration: underline !important;
}

.stationbuttonCustomicons .stationButtonWrapper * {
    opacity: 0.4;
	filter: alpha(opacity=40);
    zoom: 1;
}

.stationbuttonCustomicons .enabled * {
    opacity: 1;
	filter: alpha(opacity=100);
}

.station-starter-icon {
    margin: 4px auto 5px auto;
    background: url('https://cdn.last.fm/flatness/listen_v2/userstationicons4.png') no-repeat;
    width: 60px;
    height: 50px;
}

.stationbuttonCustomicons .station-starter-icon.personal { background-position: 0 0; }
.stationbuttonCustomicons:focus .enabled .station-starter-icon.personal,
.stationbuttonCustomicons.is-focused .enabled .station-starter-icon.personal,
.stationbuttonCustomicons:hover .enabled .station-starter-icon.personal {
    background-position: 0 -50px;
}

.stationbuttonCustomicons .station-starter-icon.mix { background-position: -60px 0; }
.stationbuttonCustomicons:focus .enabled .station-starter-icon.mix,
.stationbuttonCustomicons.is-focused .enabled .station-starter-icon.mix,
.stationbuttonCustomicons:hover .enabled .station-starter-icon.mix {
    background-position: -60px -50px;
}

.stationbuttonCustomicons .station-starter-icon.recommended { background-position: -120px 0; }
.stationbuttonCustomicons:focus .enabled .station-starter-icon.recommended,
.stationbuttonCustomicons.is-focused .enabled .station-starter-icon.recommended,
.stationbuttonCustomicons:hover .enabled .station-starter-icon.recommended {
    background-position: -120px -50px;
}

#page .stationbuttonRight .stationbutton,
#page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: right;
}

html:not([lang*=""]) #page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: none;
}

.ie6 #page .stationbuttonRight {
    text-align: right;
}

.ie6 #page .stationbuttonRight .stationbutton,
.ie6 #page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: none;
    display: inline-block;
}

.ie7 #page .stationbuttonRight {
    text-align: right;
}

.ie7 #page .stationbuttonRight .stationbutton,
.ie7 #page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: none;
    display: inline-block;
}

/* More stations toggle */

p.toggleStations {
    margin: 10px 0 5px 5px;
    font-size: 10px;
}
#toggleStations,
#toggleStations:hover {
    color: #666;
    text-decoration: none;
}
#toggleStations:hover span {
    text-decoration: underline;
}

.stationbuttonExtended { 
    background-color: #eef5fc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%
    min-width: 200px;
    max-width: 320px;
    padding-right: 10px;
}

.stationbuttonExtended .action {
    background: url(https://cdn.last.fm/flatness/buttons/stationbutton/2/stationbutton-extended.png) left top no-repeat;
    color: #eee;
    display: block;
    font-size: 14px;
    height: 50px;
    text-align: right;
    padding-left: 40px;
}

.stationbuttonExtended a .layout {
    background: url(https://cdn.last.fm/flatness/buttons/stationbutton/2/stationbutton-extended.png) right top no-repeat;
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: left;
    position: relative;
    right: -10px;
}

.ie6 .stationbuttonExtended a .layout {
    height: 33px;
    padding-top: 17px;
}

.stationbuttonExtended > a:hover, 
.stationbuttonExtended > a:active {
    background-position: left -50px;
    color: white;
    text-decoration: none;
}

.stationbuttonExtended > a:hover .layout, 
.stationbuttonExtended > a:active .layout {
    background-position: right -50px;
}

.stationbuttonExtended .stationButtonMetadata {
    margin-right: -10px;
    padding: 10px;
}

.stationButtonMetadata a {
    background: none;
}

.stationbutton a.subscription {
    background-position: left -100px;
}

.stationbuttonExtended a.subscription .layout {
    background-position: right -100px;
}

.stationbuttonExtended .label {
    display: table-cell;
    height: 50px;
    font-size: 12px;
    line-height: 1.2;
    padding-right: 10px;
    vertical-align: middle;
}

.stationbutton a.subscription:hover, 
.stationbutton a.subscription:active {
    background-position: left -150px;
}

.stationbuttonExtended a.subscription:hover .layout, 
.stationbuttonExtended a.subscription:active .layout {
    background-position: right -150px;
}

.ie7 .stationbutton .label {
    line-height: 34px;
}

.ie7 .stationbutton .subscription .label {
    line-height: 1.2;
}

.ie7 .stationbutton a.subscription {
    padding-left: 0;
}

.ie7 .stationbutton .layout {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 34px;
    font-size: 14px;
}


a.tag {
    display: block;
    float: left;
    height: 19px;
    padding: 0 2px 0 0;
    background: url(https://cdn.last.fm/flatness/icons/tag/1/globaltag_right.png) no-repeat right top;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

a.tag:hover {
    text-decoration: none;
    background-position: right bottom;
    color: #fff;
}

a.tag span {
    display: block;
    float: left;
    height: 15px;
    padding: 1px 7px 3px 19px;
    background: url(https://cdn.last.fm/flatness/icons/tag/1/globaltag_left.png) no-repeat left top;
    line-height: 15px;
    vertical-align: top;
    white-space: nowrap;
}

a.tag:hover span {
    background-position: left bottom;
}

/* Tag browser for /music landing pages */

div.tagBrowser {
    display: block;
    overflow: auto;
    position: relative;
}

ul.tagList {
    width: 111px;
    float: left;
    display: inline;
    overflow: hidden;
}

ul.tagList li {
    display: block;
    float: left;
    clear: left;
    width: 76px;
    margin: 0 15px 0 0;
    padding: 3px 10px;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    font-weight: bold;
}

ul.tagList li a {
    display: block;
    font-weight: normal;
}


div.tagBrowser div.wrapper {
    width: 522px;
    float: left;
    display: inline;
    overflow: hidden;
    position: relative;
    zoom: 1;
}

.tagHead {
    display: block;
    overflow: auto;
    background: #cdcccc url(https://cdn.last.fm/flatness/shaders/60-vert-f2f2f2-cdcccc.gif) repeat-x;
    color: #000;
    padding: 7px 13px;
    border-bottom: 1px solid #b3b3b3;
}

.tagHead .tagpage {
    font-size: 11px;
    float: right;
    font-weight: bold;
}

.tagHead .tagpage .tag_icon {
    margin: 0 4px -2px 0;
}

.tagHead h2 {
    color: #000;
    font-size: 16px;
    line-height: 1.25em;
}

.tagHead h2 .tag_icon {
    margin: 0 5px 3px 0;
}

.tagHead .similarTags {
    margin: 2px 0 0 0;
    font-size: 11px;
    line-height: 1.181818em;
    color: #999;
}

.tagHead .similarTags strong {
    font-weight: normal;
    color: #000;
}

.tasteometer {
    font-size: 11px;
    line-height: 1.181818em;
}

/* extends .tasteometer  */
.festivalTasteometer {
    font-size: 12px;
    margin: 0 0 1.5em;
}

/* extends .tasteometer  */
.friendRequestsTasteometer {
    width: 400px;
    margin-left: 43px;
}

.eventListTasteometer {
    margin-top: 5px;
}

.tasteometer .bar {
    display: block;
    position: relative;
    margin: 5px 0;
    height: 8px;
    overflow: hidden;
    border-radius: 3px;
    background: #ccc;
}

/* extends .tasteometer  */
.festivalTasteometer .bar {
    width: 426px;   
}

.tasteometer .reading {
    text-transform: uppercase;
}

.tasteometer .bar span {
    display: block;
    height: 8px;
    border-radius: 3px;
}

.tasteometer .verylow span {
    background: #9a9a9a;
}

.tasteometer .low span {
    background: #453e45;
}

.tasteometer .medium span {
    background: #5336bd;
}

.tasteometer .high span {
    background: #05bd4c;
}

.tasteometer .veryhigh span {
    background: #e9c102;
}

.tasteometer .super span {
    background: #ff0101;
}

.festivalTasteometer .memo div {
    display: inline;
    float: left;
    width: 50%;
}

.festivalTasteometer .memo {
    margin: 1em 0;
}

.festivalTasteometer .memo h3,
.festivalTasteometer .memo p {
    padding-right: 1em;
}

/* User tasteometer  */
/* extends .tasteometers  */

.userTasteometer .moduleOptions {
    background: transparent;
}

.userTasteometer form {
    margin: 9px 0 0 0;
}

.userTasteometer textarea {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    width: 100%;
}

.userTasteometer p.textarea {
    margin: 0 8px 0 0;
}

.userTasteometer p.input {
    margin: 10px 0 0 0;
    text-align: right;
}

/* .horizontalOptions - used in charts/search/... toggle */

.horizontalOptions {
    display: block;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #ccc;
    font-size: 10px;
    line-height: normal;
}

.horizontalOptions ul {
    overflow: hidden;
    margin-bottom: -1px;
}

.loading .horizontalOptions ul {
    background: url(https://cdn.last.fm/flatness/spinner_small.gif) 99% top no-repeat;
}

/* Stop spinner appearing over feeds link on chart pages */
.a-charts .loading .horizontalOptions ul {
	background-position: 93.6% top;
}

.horizontalOptions ul li {
    float: left;
    margin: 0 5px 0 0;
    list-style: none;
}

.horizontalOptions ul li a,
.horizontalOptions ul li span,
.horizontalOptions ul li strong {
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 0 3px 0 0;
    padding: 0 2px 0 5px;
}
.horizontalOptions ul li a {
    color: #0187c5;
    text-decoration: none;
}
.horizontalOptions ul li a span,
.horizontalOptions ul li a strong {
    float: none;
    margin: 0;
    padding: 0;
}

.horizontalOptions ul li.current {
    border: 1px solid #ccc;
    border-bottom-color: #fff;
    
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

.horizontalOptions ul li.current a {
    color: #666;
    text-decoration: none;
}

.ie6 .horizontalOptions ul li.current,
.ie7 .horizontalOptions ul li.current {
    background: url(https://cdn.last.fm/flatness/navigation/1/tab_mini_right.png) no-repeat right top;
    border: none;
}

.ie6 .horizontalOptions ul li.current a,
.ie7 .horizontalOptions ul li.current a {
    background: url(https://cdn.last.fm/flatness/navigation/1/tab_mini_left.png) no-repeat left top;
}

.horizontalOptions ul li a:hover {
    text-decoration: underline;
}

.horizontalOptions ul li.current a:hover {
    text-decoration: none;
}

/* tertiary nav based on library tabs - lets call it medium */

.horizontalOptions ul.medium {
    font-size: 12px;
    display: block;
    text-align: center;
    line-height: 26px;
    overflow: hidden;
    zoom: 1;
}

.horizontalOptions ul.medium li {
    height: 26px;
    float: left;
    background: url(https://cdn.last.fm/flatness/components/tertiaryNavigation/medium_tab_right_inactive.png) no-repeat right top;
    border: none;
}

.horizontalOptions ul.medium a {
    float: left;
    padding: 5px 10px 5px 10px;
    height: 26px;
    background: url(https://cdn.last.fm/flatness/components/tertiaryNavigation/medium_tab_left_inactive.png) no-repeat left top;
}

.horizontalOptions ul.medium li.current {
    background: url(https://cdn.last.fm/flatness/components/tertiaryNavigation/medium_tab_right.png) no-repeat right top;
    height: 27px;
    margin-bottom: -1px;
}

.horizontalOptions ul.medium .current a {
    background: url(https://cdn.last.fm/flatness/components/tertiaryNavigation/medium_tab_left.png) no-repeat left top;
    height: 27px;
    color: #0187c5;
}

.horizontalOptions ul.medium img {
    vertical-align: middle;
    margin-left: -3px;
    margin-top: -3px;
}

.ie7 .horizontalOptions ul.medium img {
    vertical-align: middle;
}

/* new tertiary nav */

div.tertiaryNavigation {
    display: block;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #666;
    font-size: 11px;
    line-height: normal;
}

div.tertiaryNavigation ul li {
    float: left;
    position: relative;
    margin: 0 6px -1px 0;
}

div.tertiaryNavigation ul li.last {
    margin-right: 0px;
}

div.tertiaryNavigation ul li a,
div.tertiaryNavigation ul li span,
div.tertiaryNavigation ul li strong {
    float: left;
    height: 23px;
    line-height: 23px;
}
div.tertiaryNavigation ul li a {
    margin: 0 3px 0 0;
    padding: 0 4px 0 7px;
    color: #0187c5;
    text-decoration: none;
}
div.tertiaryNavigation ul li a span,
div.tertiaryNavigation ul li a strong {
    float: none;
}

div.tertiaryNavigation ul li {
    background: url(https://cdn.last.fm/flatness/navigation/tab_right.png) no-repeat right top;
}

div.tertiaryNavigation ul li a {
    background: url(https://cdn.last.fm/flatness/navigation/tab_left.png) no-repeat left top;
}

div.tertiaryNavigation ul li.current {
    background: url(https://cdn.last.fm/flatness/navigation/tab_active_right.png) no-repeat right top;
}

div.tertiaryNavigation ul li.current a {
    background: url(https://cdn.last.fm/flatness/navigation/tab_active_left.png) no-repeat left top;
    color: #000;
    text-decoration: none;
}
div.tertiaryNavigation ul li.plain {
    background: none;
}

div.tertiaryNavigation ul li a:hover {
    text-decoration: underline;
}

div.tertiaryNavigation ul li.current a:hover {
    text-decoration: none;
}

div.tertiaryNavigation ul li.last,
div.tertiaryNavigation ul li:last-child {
    border: 0;
}

/* old tertiary nav */
ul.tertiaryNavigation {
    clear: both;
    margin: 1em 0;
    padding: 0;
    background: #eee;
    overflow: hidden;
}

ul.tertiaryNavigation li {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.tertiaryNavigation a {
    display: block;
    padding: 0.25em 1em;
}

ul.tertiaryNavigation a:hover {
    background: #ddd;
}

ul.tertiaryNavigation li.current a {
    background: #999;
    font-weight: bold;
    color: #fff;
}


.trackscrobblegraph {}

.trackscrobblegraph h4 {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.125em;
    margin: 0;
    color: #9a9a9a;
}                  

.trackscrobblegraph p {
    font-size: 11px;
    line-height: 1.181818em;
    margin: 0 0 1em 0;
    color: #9a9a9a;
}


.stations + .trial-message {
    margin-top: -3px; /* Tucking the trial message under the rounded corners of the station buttons */
    padding-top: 21px;
}

.trial-message {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 3px 3px;
}

.js .trial-message--expired {
    padding-right: 40px;
}

.trial-message .dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
}

.trial-message span {
    float: left;
    line-height: 12px;
}
.trial-message .zero {
    width: 18px;
}
.trial-message .max {
    width: 26px;
    text-align: right;
}
.trial-countdown {
    float: left;
    width: 216px;
    height: 12px;
    border-radius: 6px;
    background: #d6dce2;
    box-shadow: inset 0px 3px 2px -2px #aaa, inset 0 0 0 1px #cbd0d6, 0 1px 0 0 #ffffff;
}
.trial-countdown-bar {
    height: 10px;
    min-width: 10px;
    border-radius: 6px;
    background: #1964a3;
    background: -webkit-linear-gradient(#1964a3, #014b8a);
    background:         linear-gradient(#1964a3, #014b8a);
    border: 1px solid #005399;
    box-shadow: inset 0px 1px 0px 0px #4682b5, 0 1px 0 0 rgba(0,0,0,0.2);
}
.trial-countdown-bar.low {
    background: #e31b23;
    background: -webkit-linear-gradient(#e31b23, #b32024);
    background:         linear-gradient(#e31b23, #b32024);
    border: 1px solid #b32024;
    box-shadow: inset 0px 1px 0px 0px #e7494f, 0 1px 0 0 rgba(0,0,0,0.2);
}

div.twidget {
    
}

div.twidget ul {
    margin: 0 0 .5em;
}

div.twidget li {
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #FFFFFF;
    padding: 6px 0;
}

div.twidget li a {
    color: #666;
}

div.twidget li span a {
    color: #0187c5;
}

/* Input element */

.typeahead {
    overflow: auto;
    max-height: 9.8em;
    margin: 0.5em 0 0 0;
    border: 1px solid #bbb;
    padding: 0;
    line-height: 1.4em;
    background: #fff;
    color: #000;
    cursor: text;
}
.typeaheadFocus {
    outline: 5px auto -webkit-focus-ring-color;
    -moz-outline: 2px solid #7eadd9;
    -moz-outline-radius: 3px;
    outline-offset: -2px;
}

#page .typeahead input.typeaheadCaret {
    display: block;
    float: left;
    border: 0;
    outline: 0;
    margin: 2px 0 1px 3px;
    padding: 3px 0 4px 0;
    line-height: normal;
}
#page .typeahead input.typeaheadHidden {
    width: 0 !important;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    border-width: 5px 0;
    color: #fff;
    background: #fff;
}

.typeahead a.typeaheadSelected {
    display: block;
    float: left;
    position: relative;
    margin: 3px 0 1px 3px;
    padding: 2px 19px 2px 3px;
    background: #ddd;
    color: #333;
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
    line-height: normal;
}
.typeahead a:hover {
    background: #ccc;
}
.typeahead a.typeaheadActive {
    background: #0060e9;
    color: #fff;
}
.typeahead span.typeaheadRemove {
    position: absolute;
    right: 3px;
    top: 3px;
    display: block;
    width: 13px;
    height: 13px;
    background: url(https://cdn.last.fm/flatness/buttons/delete.2.png) no-repeat left top;
    cursor: pointer;
    font-size: 0;
    text-indent: -1000em;
}
.typeahead span.typeaheadRemove:hover {
    cursor: pointer;
}

/* Results */

#page ul.typeaheadResults {
    position: absolute;
    margin: 0;
    padding: 0;
    border-top: 0;
    list-style: none;
}
#page ul.fixedTypeahead {
    position: fixed;
}
#page ul.typeaheadResults ul,
#page ul.typeaheadResults li {
    display: block;
    margin: 0;
    padding: 0;
}
#page ul.typeaheadResults ul {
    overflow: auto;
    max-height: 300px;
    padding: 4px 0 0 0;
    border: 1px solid #ddd;
    border-top: 0;
    background: #fff;
    color: #000;
}
ul.typeaheadResults li.paginatedResults p {
    font-size: 20px;
    text-align: right;
}
ul.typeaheadResults li.paginatedResults p span {
    margin-left: 0.5em;
}
#page ul.typeaheadResults li.paginatedResults li {
    margin: 0 4px 4px 4px;
}
ul.typeaheadResults li.paginatedResults ul a {
    display: block;
    padding: 3px;
    text-decoration: none;
    color: #000;
}
ul.typeaheadResults li.paginatedResults ul a:hover {
    background: #5297FF;
    color: #fff;
}
ul.typeaheadResults ul li.highlight a {
    background: #0060e9;
    color: #fff;
}

ul.typeaheadResults li.paginatedResults span {
    text-decoration: underline;
    font-weight: bold;
}

p.typeaheadSuggestions {
    margin: 13px 0 0 0;
    color: #666;
    font-size: 11px;
}
p.typeaheadSuggestions span {
    color: #1b1b1b;
}
p.typeaheadSuggestions a {
    margin: 0 3px;
}

div.typeaheadHint {
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-top: 0;
    background: #f5f5f5;
    color: #999;
    list-style-type: none;
    font-size: 11px;
}

.user-listen-counts li {
    margin: 0 0 24px 70px;
    position: relative;
    min-height: 60px;
}

.user-listen-counts .userImage {
    position: absolute;
    left: -70px;
    top: 0;
}

/* Ideally would add a class to the user image to differentiate from icon */
.user-listen-counts .userImage img:first-child {
    width: 60px;
    height: 60px;
}

.user-listen-counts li .chartbar {
    margin-left: -10px;
    margin-top: 6px;
}

.user-listen-counts li .chartbar span {
    padding-left: 20px;
}

.user-listen-count-name {
    padding-left: 10px;
}

.userListenCounts {
margin-top: 1em;
}

.userListenCounts li {
position: relative;
min-height: 38px;
padding: 0.5em 0 0.5em 43px;
}

.userListenCountsAjax li {
font-size: 12px;
line-height: 1.5em;
}

.userListenCounts li .chartbar {
margin-left: -5px;
line-height: 16px;
}

.userListenCounts li.you .chartbar span {
background: #48779a;
}

.userListenCounts span.userImage {
position: absolute;
left: 0;
top: 8px;
}



.videos-on-dark .video-list-link,
.videos-on-dark .video-list-link:hover,
.videos-on-dark .video-list-link:focus {
    color: #fff;
}

.video-list-link img,
.video-list-link .play-video {
    width: 140px;
    height: 79px;
    max-width: 100%;
}

.video-list-link .play-video {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(https://cdn.last.fm/flatness/responsive/play_32.png);
}

.video-list-link:focus .play-video,
.video-list-link:hover .play-video {
    background-color: rgba(0,0,0,0.4);
}

/* WeekPicker */

.weekpicker {
}

.weekpicker-dateSelect {
}

.weekpicker label,
.weekpicker select,
.weekpicker .customSelect-wrap,
.weekpicker .submit {
    float: left;
}

.weekpicker label {
    margin-right: 0.6em;
    margin-top: 3px;
}

.weekpicker select,
.weekpicker .customSelect-wrap {
    font-weight: bold;
}

.weekpicker .customSelect-wrap {
    margin-right: 0.8em;
}

.weekpicker .submit {
    margin-left: 0.3em;
}

.ie #weekpicker-years {
    width: 7em;
}

/* previous/next buttons */

.weekpicker-prevnext {
    float: right;
    margin-top: 3px;
}

.weekpicker-prev, .weekpicker-next {
    display: inline;
    color: #999;
}

.weekpicker-next {
    border-left: 1px solid #999;
    padding-left: 0.85em;
    margin-left: 0.5em;
}

div.wiki {
    margin: 1em 0;
}

.wikiParagraphs p {
    margin-bottom: 1em;
}

#wikiAbstract {
    margin: 10px 0;
    line-height: 1.5em;
}

.wiki-options {
    margin-top: 12px;
}

.wiki-options a {
    margin-right: 1em;
}


/* chart base */

table.chart {
    width: 100%;
    font-size: 11px;
    margin-bottom: 10px;
}

table.chart td {
    vertical-align: top;
    line-height: 16px;
    padding: 3px 5px;
}

table.chart thead td {
    color: #666;
    white-space: nowrap;
}

table.chart thead td.positionCell,
table.chart thead td.playbuttonCell {
    width: 1px;
}

table.chart tr.odd td {
    background-color: #ebebeb;
}

table.chart td.positionCell {
    width: 20px;
    color: #666;
    text-align: right;
}

table.chart td.playbuttonCell {
    width: 17px;
    padding-bottom: 0;
    padding-top: 1px;
}

.ie7 table.chart td.playbuttonCell {
    padding-top: 3px;
}

table.chart td.playbuttonCell a.playbutton {
	display: block;
	padding-top: 3px;
}

.ie7 table.chart td.playbuttonCell a.playbutton  {
	padding-top: 1px;
}

table.chart td.playbuttonCell img {
    margin: 0;
}

table.chart td.subjectCell div {
    width: 100%;
    height: 16px;
    overflow: hidden;
}

table.chart td.subjectCell a {
    color: #1b1b1b;
}

table.chart td.subjectCell a:hover {
    color: #0187c5;
}

table.chart td.durationCell,
table.chart td.reachCell {
    width: 20px;
    color: #666;
    text-align: left;
}

table.chart td.downloadbuttonCell {
    width: 31px;
}

table.chart td.lovedCell {
    padding: 3px 5px 0 0;
    width: 11px;
}

table.chart td.multibuttonCell {
    width: 26px;
    padding: 3px 5px 0 3px;
    line-height: 0;
}

table.chart td.chartbarCell {
    width: 33%;
    padding: 0;
}

.ie6 table.chart td.chartbarCell {
    padding: 0 0 2px 0;
}

table.chart tr.odd td.chartbarCell,
table.chart tr.open td.chartbarCell,
table.chart tr:hover td.chartbarCell {
    background-color: transparent;
}

table.chart a.lfmButton {
    position: relative;
    left: -9999px;
}

table.chart tbody tr:hover td,
table.chart tbody tr.open td {
    background: #d0e4f0;
}

table.chart a.lfmFreeDownloadButton,
table.chart tr:hover a.lfmButton,
table.chart tr.open a.lfmButton {
    left: 0;
}

/* the chartbars */

div.chartbar {
    overflow: hidden;
}

div.chartbar span {
    display: block;
    height: 17px;
    padding: 3px 0.5em 0 0.5em;
    background: #71b7e6;
    color: #fff;
    overflow: hidden;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

div.chartbar a span:hover { 
    background: #48779a;
}

div.chartbar a { 
    padding: 0; 
    margin: 0;
    color: #fff;
}

div.chartbar a:hover { 
    text-decoration:none;
    cursor: pointer;
}


/* flp-fdl indicators */

td.subjectCell small {
    font-size: 9px;
    white-space: nowrap;
}

tr.flp small,
tr.fdl small {
    color: #999 !important;
}

tr.fdl small a {
    color: #0187c5 !important;
}

table.chart td .mp3 {
    display: block;
    width: 3em;

    padding: 0px 4px 0px 4px;
    
    color: #fff;    
    background: #0187c5;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

	text-align: center;
    font-size: 9px;
    font-weight: bold;
}

table.chart td .mp3:hover {
    text-decoration: none;
}


/* small */

table.eventsSmall {
    border-bottom: 1px solid #fff;
}

table.eventsSmall .calSheet {
    float: left;
    display: inline;
    margin-left: -37px;
}

table.eventsSmall td {
    padding: 5px 5px 5px 42px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

table.eventsSmall td.first {
    border-top: none;
}

table.eventsSmall td strong.summary {
    display: block;
    color: #0187c5;
    font-size: 11px;
    line-height: 1.25em;
}

table.eventsSmall td a:hover strong.summary {
    text-decoration: underline;
}

table.eventsSmall td small.location {
    display: block;
    color: #000;
    font-size: 11px;
    margin: 1px 0 4px 0;
}

table.eventsSmall td span.info {
    display: block;
    font-size: 10px;
}

table.eventsSmall td span.info {
    color: #666;
}

table.eventsSmall a span.addComment {
    color: #0187c5;
}

/* Events Map */

#eventsMap p.date {
    padding: 0 0 5px 33px;
    border-bottom: 1px solid #ccc;
}
#eventsMap p.date .calSheet {
    float: left;
    margin: -8px 0 0 -33px;
}
#eventsMap p.summary a {
    display: block;
    min-height: 45px;
    padding: 5px 0 10px 45px;
    color: #1b1b1b;
    text-decoration: none;
}
#eventsMap p.summary a strong {
    color: #0187c5;
}
#eventsMap p.summary a:hover strong {
    text-decoration: underline;
}
#eventsMap p.summary a strong img {
    display: inline;
    float: left;
    margin: 0 0 5px -45px;
}

/* Medium */

table.eventsMedium {
    width: 100%;
    margin: 0 0 30px 0;
    font-size: 11px;
    line-height: 1.5em;
}

table.eventsMedium .month th {
    padding: 3em 0 0 0;
    color: #1b1b1b;
    font-size: 18px;
    font-weight: bold;
}

table.eventsMedium .month th.first {
    padding-top: 1em;
}

table.eventsMedium .day th {
    padding: 15px 0 5px 0;
    font-size: 12px;
    font-weight: bold;
}
table.eventsMediumRecent .day th {
    color: #666;
}

table.eventsMedium span.cancelled {
    background: #f21c06;
    color: #fff;
    font-weight: normal;
    margin-right: 5px;
    padding: 2px;
    border-radius: 2px;
    display: inline-block;
    font-size: 11px;
}

.ie7 table.eventsMedium span.cancelled {
    padding: 0 3px;
}

table.eventsMedium tr td {
    padding: 0.6em 1em 1em 0;
    border-top: 1px solid #ccc;
}

table.eventsMedium tr .detail {
    width: 45%;
}
table.eventsMedium tr .detail a {
    display: block;
    min-height: 65px;
    padding-left: 75px;
    padding-right: 10px;
    text-decoration: none;
    color: #666;
}

/* extends eventsMedium  */
table.eventsHome tr .detail {
    width: 50%;
}

table.eventsHome tr .detail a {
    padding-left: 38px;
}

table.eventsMedium .detail a strong {
    color: #0187c5;
    font-size: 12px;
}
table.eventsMedium .detail a:hover strong {
    text-decoration: underline;
}
table.eventsMedium .detail a strong img {
    display: inline;
    float: left;
    margin: 3px 0 5px -75px;
}
table.eventsMedium .detail a .calSheet {
    display: inline;
    float: left;
    margin: 0 0 5px -38px;
}

table.eventsMedium tr.attending td,
table.eventsMedium tr.maybeattending td {
    background: #e8f1f8;
}
table.ownEventsMedium tr.attending td,
table.ownEventsMedium tr.maybeattending td {
    background: transparent;
}
table.eventsMedium tr.recommended td {
    background: #f2f2f2;
}
table.eventsMedium tr.highlight td {
    background: #f8ece9;
}

table.eventsMedium tr td.location {
    width: 160px;
    color: #666;
}

table.eventsMedium tr td.location .country-name {
    display: block;
}

table.eventsMedium tr td.location a {
    color: #666;
    font-size: 12px;
}

table.eventsMedium tr td.info {
    width: 110px;
}

table.eventsMedium tr td.users {
    width: 100px;
}

table.eventsMedium td.icon {
    width: 15px;
    padding-right: 0;
}

table.eventsMedium tr td.info img {
    display: none;
}

table.eventsMedium div.geo {
    display: none;
}

table.eventsMedium tr.sponsored td.detail div {
    position: absolute;
    left: 15px;
    height: 1.5em;
    margin-top: -2.3em;
}

table.eventsMedium p.sponsored {
    background-color: #C7E5FD;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 5px;
}

table.eventsMedium tr.sponsored td {
    padding-top: 2.9em; /* normal 0.6em padding + height of sponsored div */
}

table.eventsMedium tr.sponsored td.icon {
    padding-top: 3.1em;
}

/* overrides */

table.eventsNoBorder,
table.eventsNoBorder td {
    border: 0;
}

table.tracklist {
    clear: both;
    width: 100%;
    color: #666;
    font-size: 11px;
    line-height: 1.5em;
}

table.tracklist .play_icon {
    margin: 0;
}

table.tracklist tbody tr:hover,
table.tracklist tbody tr.open {
    background: #bfdff4;
}

table.tracklist th,
table.tracklist td {
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    color: #000;
}

table.tracklist th {
    white-space: nowrap;
    padding-top: 15px;
}

table.tracklist th.title {
    padding: 10px 0 8px;
    color: #1b1b1b;
    font-size: 12px;
    font-weight: bold;
}

table.tracklist tr.last td {
    border-bottom: none;
}

table.tracklist tr.odd {
    background-color: #ebebeb;
}

table.tracklist td.imageSmall {
    width: 34px;
    padding: 5px;
}

table.tracklist td.imageMedium {
    width: 64px;
    padding: 5px;
}

.js table.tracklist td.album .hiddenAlbum {
    display: none;
}
.no-js table.tracklist td.album .showFurtherAlbums {
    display: none;
}

table.tracklist td.playbutton,
table.tracklist td.playbuttonCell {
    width: 17px;
    padding: 3px 0 0 3px;
}

table.tracklist td.lovedCell {
    padding: 5px 5px 0 0;
    width: 11px;
}

table.tracklist .loved_indicator_icon {
    margin-top: 2px;
}

table.tracklist td.tagged,
table.tracklist td.taggedCell {
    padding-top: 9px;
    padding-bottom: 0;
    width: 15px;
}

table.tracklist td.deleteCell {
    width: 14px;
    padding-bottom: 0;
}

table.tracklist td.subjectCell {
    color: #000;
    width: 100%;
}

table.tracklist .position {
    padding-right: 0;
}

table.tracklist .position,
table.tracklist .length,
table.tracklist .playcount {
    text-align: right;
}

table.tracklist .smallmultibuttonCell {
    padding: 3px 5px 0 0;
    width: 26px;
}

table.tracklist td.downloadbuttonCell {
    padding-top: 3px;
    padding-bottom: 0;
    width: 15px;
}

table.tracklist a.lfmButton,
table.tracklist a.delete,
table.tracklist .dismiss {
    position: relative;
    left: -9999px;
}

table.tracklist a.lfmFreeDownloadButton,
table.tracklist tr:hover a.lfmButton,
table.tracklist tr.open a.lfmButton,
table.tracklist tr:hover a.delete,
table.tracklist tr:hover .dismiss {
    left: 0;
}

table.tracklist td.border {
    border-left: 1px solid #ccc;
}

table.tracklist a {
    color: #000;
}

table.tracklist a:hover {
    color: #0187c5;
}

table.tracklist a.mp3 {
    display: block;
    width: 3em;
    margin-top: 2px;
    padding: 2px 4px 1px 4px;
    border-radius: 4px;
    background: #0187c5;
    color: #fff;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

table.tracklist a.mp3:hover {
    text-decoration: none;
}

table.tracklist td.imageCell {
    padding: 0;
}

table.tracklist td.imageCell img {
    display: block;
    float: left;
}

table.tracklist td.dateCell {
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    color: #999;
    white-space: nowrap;
    font-size: 10px;
}

table.tracklist td.highlight {
    border-top: 1px solid #ccc;
    background: #fffcca;
}

.unknownTimestamp,
.unknownAlbum,
#timestampExplanation {
    color:#666;
}
#timestampExplanation {
    margin-top:0.5em;
    margin-left: 2.7em;
    font-size: 11px;
}

table.tracklist .showFurtherAlbums a, 
table.tracklist .showFewerAlbums a {
    color:#666;
}
table.tracklist .showFewerAlbums {
    display: none;
}






#page span.lineupPoster {
    display: block;
    position: relative;
    background: #1b1b1b;
    color: #fff;
}
#page span.lineupPoster span {
    clear: both;
    display: block;
    padding: 5px;
    font-size: 9px;
    line-height: 1.333333;
    background: #1b1b1b;
}
#page span.lineupPostermega span {
    font-size: 11px;
    line-height: 1.181818;
}
#page span.lineupPoster img {
    float: left;
    margin: 0
}
#page span.lineupPoster span.foot {
    text-align: right;
}

.promoInfoBox {
    margin: 0 0 10px 0;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #fff;
    text-align: center;
    line-height: 1.3;
}

.promoInfoBox h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
}

.promoInfoBox p {
    color: #666;
}

.promoInfoBox a.promoButton {
    display: -moz-inline-box;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0;
    line-height: 0;
    background: #1b1b1b;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    height: 20px;
    text-decoration: none;
    color: #fff;
    font-size:11px;
    font-weight:bold;
    padding: 0;
    margin: 10px 0 10px 0;
    vertical-align: middle;
}

.promoInfoBox a.promoButton:hover {
    background: #0187c5;
}


.promoInfoBox a.promoButton span {
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    display: -moz-inline-box;
    display: inline-block;
    letter-spacing: 0;
    line-height: 11px;
    height: 20px;
    padding: 4px 0 0 8px;
    margin: 0 8px 0 0;
    border: none;
    vertical-align: text-top;
    zoom: 1;
}

#page .vodafoneInfoBox2008_11 a img {
    margin: 3px auto;
    display: block;
}

#page .barbicanInfoBox2008_10 {
    padding-top: 25px;
    background: #e6e6e6 url(https://cdn.last.fm/flatness/promo/barbican/barbicanInfoBox2008_10-bg.png) 20px 0 no-repeat;
}

.motoInfoBox {
    margin: 15px 0 10px 0;
    padding: 5px;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #e6e6e6 url(https://cdn.last.fm/flatness/promo/motorokr/motorola_infobox-logo.gif) right bottom no-repeat;
    border-color: #e6e6e6;
    text-align: center;
    line-height: 1.3;
}
.motoInfoBox h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
}
.motoInfoBox p {
    color: #666;
}
.motoInfoBox a.motoButton {
    display: -moz-inline-box;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0;
    line-height: 0;
    background-position: right top;
    background-repeat: no-repeat;
    height: 25px;
    text-decoration: none;
    color: #fff;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    padding: 0;
    margin: 10px 0 10px 0;
    vertical-align: middle;
    padding-top: -2px;
    background-image: url(https://cdn.last.fm/flatness/promo/motorokr/motorola_infobox-btn.gif);
}
.motoInfoBox a.motoButton span {
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    display: -moz-inline-box;
    display: inline-block;
    line-height: 1;
    letter-spacing: 0;
    background-image: url(https://cdn.last.fm/flatness/promo/motorokr/motorola_infobox-btn.gif);
    background-position: left top;
    background-repeat: no-repeat;
    height: 25px;
    padding: 6px 0 0 8px;
    margin: 0 8px 0 0;
    border: none;
    vertical-align: text-top;
    zoom: 1;
}

ul.albums .lfmDropDown {
    margin: 3px 3px 3px 0;
}

/* albumsLarge */

.albumsLarge {
    line-height: 1.25;
    clear: both;
    position: relative;
}

ul.albumsLarge li {
    display: inline;
    float: left;
    width: 49.5%;
    margin-bottom: 30px;
    position: relative;
}

ul.albumsLarge li.odd {
    clear: both;
}

.resContainer {
    padding: 0 15px 0 155px;
}

.resContainer span.albumCover {
    display: inline;
    float: left;
    margin: 0 0 0 -155px;
}

.resContainer {
    min-height: 135px;
}

.albumsMedium .resContainer,
.albumsSmall .resContainer {
    min-height: 70px;
}

.ie7 .resContainer span.albumCover {
    margin: 0;
    float: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.albumsLarge .resContainer a.artist {
    font-size: 11px;
}

.albumsLarge .resContainer a {
    color: #1b1b1b;
    text-decoration: none;
}

.albumsLarge .resContainer a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.albumsLarge .resContainer .lfmSmallButton,
.albumsLarge .resContainer .lfmSmallButton:hover {
    color: #fff;
}

.albums .resContainer .buyButtonSupplier a {
    color: #0187c5;
}

.albumsLarge .resContainer p.stats {
    margin: 3px 0 0 0;
    color: #666;
    font-size: 10px;
}

.albumsLarge .resContainer div.buttons {
    margin: 1.5em 0 0 0;
}

.albumsLarge .resContainer p.label {
    margin: 5px 0 0 0;
    font-size: 10px;
    color: #666;
}

.albumsLarge .resContainer p.label a {
    color: #666;
}

.albumsLarge .resContainer p.label a:hover {
    color: #0187c5;
}

.albumsLarge a.playbutton {
    position: absolute;
    left: 115px;
    top: 105px;
}


/* albumsMedium */

.albumsMedium {
    position: relative;
    line-height: 1.25em;
}

ul.albumsMedium li {
    display: inline;
    float: left;
    position: relative;
    width: 49.5%;
    margin-bottom: 15px;
}

ul.albumsMedium li.odd {
    clear: both;
}

.albumsMedium .resContainer {
    padding: 0 15px 0 85px;
}

.albumsMedium .resContainer span.albumCover {
    float: left;
    display: inline;
    margin: 0 0 0 -85px;
}

.ie7 .albumsMedium .resContainer span.albumCover {
    margin: 0;
}

.albumsMedium .resContainer a {
    color: #000;
    text-decoration: none;
    font-size: 12px;
}

.albumsMedium .resContainer a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.albumsMedium .resContainer a.artist {
    font-size: 11px;
}

.albumsMedium a.playbutton {
    position: absolute;
    left: 54px;
    top: 47px;
}

/* albumsSmall */

.albumsSmall {
    position: relative;
    line-height: 1.25em;
}

ul.albumsSmall li {
    display: inline;
    float: left;
    position: relative;
    width: 24.5%;
    margin-bottom: 15px;
}

ul.albumsSmall li.odd {
    clear: both;
}

.albumsSmall .resContainer {
    padding: 0 15px 0 85px;
}

.albumsSmall .resContainer span.albumCover {
    float: left;
    display: inline;
    margin: 0 0 0 -85px;
}

.ie7 .albumsSmall .resContainer span.albumCover {
    margin: 0;
}

.albumsSmall .resContainer a {
    color: #000;
    text-decoration: none;
    font-size: 12px;
}

.albumsSmall .resContainer a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.albumsSmall .resContainer a.artist {
    font-size: 11px;
}

.albumsSmall a.playbutton {
    position: absolute;
    left: 54px;
    top: 47px;
}

p.newRelease {
    position: absolute;
    top: 137px;
    left: 0px;
    text-align: right;
    width: 140px;
    display: inline;
}

.albumsMedium p.newRelease {
    top: 70px;
    width: 72px;
}


p.newRelease span {
    padding: 0 2px;
    line-height: 1.3;
    font-weight: bold;
    font-size: 90%;
    border-top:1px solid #FFF2A6;
    background: #FEF081; 
    color: #1b1b1b;
}

/* Large */

ul.artistsLarge {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.181818em;
    margin-right: -15px;
}

ul.artistsLarge li {
    position: relative;
    float: left;
    display: inline;
    width: 132px;
    height: 155px;
    margin: 0 9px 0 0;
    overflow: hidden;
}

.pictureFrame {
    position: relative;
    display: block;
    width: 132px;
    height: 109px;
    overflow: hidden;
}

.pictureFrame .image {
    position: absolute;
    top: 2px;
    left: 3px;
    display: block;
    width: 126px;
    height: 100px;
    overflow: hidden;
}

.pictureFrame .image img.defaultImage {
    margin: -12px 0 0 0;
}

.pictureFrame .overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 132px;
    height: 109px;
    background: url(https://cdn.last.fm/flatness/picture_frame.png) left top transparent;
}


.ie6 .pictureFrame .overlay {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.last.fm/flatness/picture_frame.png', sizingMethod='crop');
}

ul.artistsLarge span.track a {
    color: #666;
}

ul.artistsLarge a {
    color: #000;
}

ul.artistsLarge a.plays {
    color: #0187c5;
    font-size: 10px;
    white-space: nowrap;
}

ul.artistsLarge a:hover {
    color: #0187c5;
}

ul.artistsLarge li a strong.withAdd {
    display: block;
    margin: 1px 0 0 3px;
    text-indent: 20px;
    line-height: 1.454545;
}
ul.artistsLarge a.playbutton {
    position: absolute;
    left: 105px;
    top: 81px;
}
ul.artistsLarge a.addbutton {
    position: absolute;
    left: 3px;
    top: 111px;
    width: 15px;
    height: 15px;
    background: url('https://cdn.last.fm/flatness/global/icon_add_hover.gif') no-repeat 0 0;
}
ul.artistsLarge a:hover img.add_icon {
    display: none;
}

.visible ul.artistsLarge .loading span.image {
    background: url(https://cdn.last.fm/flatness/spinner_big.gif) center no-repeat #fff;
}

ul.artistsLarge form {
    display: none;
}

ul.artistsLarge li p.info {
    color: #666;
}

/* square */

ul.artistsSquare {
    margin: 0 0 7px 0;
}
ul.artistsSquare li {
    float: left;
    display: inline;
    width: 188px;
    margin: 6px 0 0 0;
    font-size: 11px;
    line-height: 1.181818;
}

ul.artistsSquare a {
    display: block;
    padding: 1px 0 0 45px;
    color: #0187c5;
}

ul.artistsSquare a img {
    padding: 1px;
    background: #fff;
    border: 1px solid #ccc;
}

ul.artistsSquare a.highlight img {
    border-color: #0187c5;
}

ul.artistsSquare strong {
    color: #000;
}
ul.artistsSquare a:hover strong {
    color: #0187c5;
}
ul.artistsSquare img {
    display: inline;
    float: left;
    margin: -1px 0 0 -45px;
}

/* medium */

ul.artistsMedium {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.181818em;
    margin-right: -15px;
}

ul.artistsMedium li {
    position: relative;
    float: left;
    display: inline;
    width: 72px;
    height: 86px;
    margin: 0 9px 5px 0;
    overflow: hidden;
}

ul.artistsMedium a li {
    clear: both;
    display: block;
}

/* IE6/7 only - need to adjust the link placement to avoid text cropping */
.ie6 ul.artistsMedium a,
.ie7 ul.artistsMedium a { 
    position: relative;
    top: -3px;
}

/* medium, but then vertical (we should get rid of the default medium style alltogether...) */

ul.artistsMediumVertical li {
    clear: both;
    padding: 0 0 13px 78px;
}

ul.artistsMediumVertical li a.artist {
    color: #1b1b1b;
}

ul.artistsMediumVertical li a strong {
    display: block;
}

ul.artistsMediumVertical li a img {
    display: inline;
    float: left;
    margin: 0 0 0 -77px;
    padding: 1px;
    background: #fff;
    outline: 1px solid #ccc;
}

/* small */

ul.artistsSmall {
    margin: 1em 0;
}

ul.artistsSmall li {
    margin: 0 0 1em 0;
    padding: 0 0 0 79px;
    overflow: hidden;
}

ul.artistsSmall a {
    text-decoration: none;
}

ul.artistsSmall h4 {
    margin-left: -15px;
    border-top: solid 1px #ddd;
    padding-left: 15px;
    background: #eee;
}

ul.artistsSmall img {
    float: left;
    display: inline;
    margin: -1px 0 0 -79px;
}

ul.artistsSmall li strong {
    display: block;
    font-weight: bold;
}

ul.artistsSmall li div a {
    margin-right: 5px;
    padding-left: 14px;
    text-decoration: none;
}

ul.artistsSmall li div.media {
    margin-top: 5px;
}

ul.artistsSmall li div.media a.videos {
    background: url(https://cdn.last.fm/flatness/video_small.gif) 0 2px no-repeat;
}

ul.artistsSmall li div.media a.tracks {
    background: url(https://cdn.last.fm/flatness/track_small.gif) 0 2px no-repeat;
}

ul.artistsSmall li div.media a strong {
    display: none;
}

ul.artistsSmall li div.media a span {
    padding: 0 5px;
    background: #ddd;
    color: #333;
    font-size: 10px;
}

/* not really a list, but hey... */

p.artists {
    padding: 1em 0 0 0;
    clear: both;
    font-size: 11px;
    line-height: 1.181818;
}

p.artists a {
    color: #0187c5;
    text-decoration: none;
}

p.artists a.highlight {
    background: #0187c5;
    color: #fff;
}

/* artistsWithInfo */
ul.artistsWithInfo {
    clear: both;
}

ul.artistsWithInfo li {
    clear: both;
    display: block;
    position: relative;
    margin: 15px 0 0 0;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #ccc;
    zoom: 1;
}

ul.artistsWithInfo li.last {
    border-bottom: none;
}

ul.artistsWithInfo li .pictureFrame {
    float: left;
    display: inline;
}

ul.artistsWithInfo li .playbutton {
    position: absolute;
}

ul.artistsWithInfo li a.artist,
ul.artistsWithInfo li a.track {
    color: #1b1b1b;
}

ul.artistsWithInfo li p.stats {
    color: #666;
}

ul.artistsWithInfo li p.bio {
    margin: 1em 0;
}

/* artistsWithInfo large specific */

ul.artistsWithInfo li.large {
    padding-left: 145px;
}

ul.artistsWithInfo li.large .pictureFrame {
    margin-left: -145px;
}

ul.artistsWithInfo li.large .playbutton {
    left: 105px;
    top: 80px;
}

.ie6 #page .artistsWithInfo li.large .playbutton {
    margin-left: -145px;
}

ul.artistsWithInfo li.large a.artist strong {
    font-size: 16px;
    line-height: 1.181818em; 
}

ul.artistsWithInfo li.large p.stats {
    font-size: 11px;
}

/* artistsWithInfo medium specific */

ul.artistsWithInfo li.medium {
    padding-left: 80px;
}

ul.artistsWithInfo li.medium .pictureFrame {
    margin-left: -80px;
}

ul.artistsWithInfo li.medium .playbutton {
    position: static;
}

ul.artistsWithInfo li.medium p.stats {
    font-size: 11px;
}

/* Similarity match */

ul.artistsWithInfo div.matchmeter {
    float: right;
    display: block;
    right: 0px;
    top: 0px;
    width: 180px;
    background: #efefef;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.artistsWithInfo div.matchmeter strong {
    text-transform: uppercase;
}

ul.artistsWithInfo div.matchmeter span.bar {
    clear: both;
    display: block;
    width: 100%;
    height: 5px;
    margin: 3px 0 0 0;
    background: #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
ul.artistsWithInfo div.matchmeter span.bar span {
    display: block;
    height: 5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

ul.artistsWithInfo div.matchmeter span.pc90 span {
    background: #ff0101;
}

ul.artistsWithInfo div.matchmeter span.pc70 span {
    background: #e9c102;
}

ul.artistsWithInfo div.matchmeter span.pc50 span {
    background: #05bd4c;
}

ul.artistsWithInfo div.matchmeter span.pc30 span {
    background: #453e45;
}

ul.artistsWithInfo div.matchmeter span.pc10 span {
    background: #9a9a9a;
}

/* Medium with featured */

ul.artistsMediumWithFeatured {
    padding-left: 267px;
}

ul.artistsMediumWithFeatured li {
    border-top: 1px solid #ccc;
}

ul.artistsMediumWithFeatured li .container {
    display: block;
    padding: 5px;
    padding-right: 73px;
    border-top: 1px solid #fff;
    font-size: 11px;
    line-height: 1.181818em;
    min-height: 64px;
}

ul.artistsMediumWithFeatured li img.artistImage {
    display: inline;
    float: right;
    margin-right: -73px;
}

ul.artistsMediumWithFeatured li strong.artist {
    display: block;
    font-size: 12px;
    line-height: 1.166667em;
    color: #1b1b1b;
}

ul.artistsMediumWithFeatured li a:hover {
    text-decoration: none;
}

ul.artistsMediumWithFeatured li a:hover strong.artist {
    color: #0187c5;
}

ul.artistsMediumWithFeatured li p.info {
    font-size: 11px;
    line-height: 1.181818em;
    color: #1b1b1b;
}
    

ul.artistsMediumWithFeatured li span.info {
    display: block;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.artistsMediumWithFeatured li p.info {
    margin-top: 5px;
}

ul.artistsMediumWithFeatured li.first {
    display: inline;
    float: left;
    margin-left: -267px;
    border: 1px solid #ccc;
    padding: 1px;
    background: #fff;
}

ul.artistsMediumWithFeatured li.first a {
    display: block;
    position: relative;
    width: 252px;
    height: 189px;
    background-color: #000; /* CSS Defensiveness */
    background-repeat: no-repeat;
    background-position: center top;
}

ul.artistsMediumWithFeatured li.first p.info {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 252px;
    color: #fff;
    font-size: 11px;
    line-height: 1.272727em;
}

ul.artistsMediumWithFeatured li.first p.info * {
    padding: 3px 9px;
    display: inline;
    float: left;
    background: #000;
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter:alpha(opacity=90);
}
        

ul.artistsMediumWithFeatured li.first p.info strong {
    font-size: 14px;
    line-height: 1.142857em;
    font-weight: bold;
    padding: 3px 9px;
}

ul.artistsMediumWithFeatured li.first p.info .extra {
    clear: left;
    padding-bottom: 5px;
}


ul.artistsMediumWithFeatured li.first a:hover p.info strong {
    color: #0187c5;
}


/* Mega with featured */

ul.artistsMegaWithFeatured {
    clear: both;
    display: block;
    border: 1px solid #ccc;
}

ul.artistsMegaWithFeatured li {
    display: block;
    float: left;
}

ul.artistsMegaWithFeatured li a {
    position: relative;
    display: block;
    width: 195px;
    height: 134px;
    border: 1px solid #fff;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: center center;
}

ul.artistsMegaWithFeatured li.first a {
    width: 352px;
    height: 270px;
}

ul.artistsMegaWithFeatured li a:hover {
    text-decoration: none;
}

ul.artistsMegaWithFeatured li p.info {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    color: #fff;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.artistsMegaWithFeatured li p.info * {
    padding: 3px 9px;
    display: inline;
    clear: left;
    float: left;
    background: #000;
    /* white-space: nowrap; */
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter:alpha(opacity=90);
}

ul.artistsMegaWithFeatured li p.info strong {
    font-size: 14px;
    line-height: 1.142857em;
    font-weight: bold;
    padding: 3px 9px;
}

ul.artistsMegaWithFeatured li a:hover p.info strong {
    color: #0187c5;
}

/* Pictureframe */

.pictureFrameMediumsquare {
    position: relative;
    display: block;
    width: 72px;
    height: 59px;
    overflow: hidden;
}

.pictureFrameMediumsquare .image {
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 64px;
    height: 52px;
    overflow: hidden;
}

.pictureFrameMediumsquare img.defaultImage {
    margin: -8px 0 0 0;
}

.pictureFrameMediumsquare .overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 72px;
    height: 59px;
    background: transparent url(https://cdn.last.fm/flatness/picture_frame_medium.2.png) left top no-repeat;
}


.ie6 .pictureFrameMediumsquare .overlay {
    background: transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.last.fm/flatness/picture_frame_medium.2.png', sizingMethod='crop');
}

/* */
.pictureFrameSmallsquare {
    position: relative;
    display: block;
    width: 36px;
    height: 28px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.pictureFrameSmallsquare .image {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 34px;
    height: 26px;
    overflow: hidden;
    border: 1px solid #fff;
}

.pictureFrameSmallsquare .image img.defaultImage {
    margin: -4px 0 0 0;
}

.pictureFrameSmallsquare .overlay {
    display: none;
}
/* Wrappers */

#page div.artistsLargeOneRowWrapper {
    position: relative;
    clear: both;
    height: 155px;
    overflow: hidden;
}

#page div.artistsLargeTwoRowsWrapper {
    position: relative;
    clear: both;
    height: 310px;
    overflow: hidden;
}

/* Artist Recs */

ul.artistRecs {
    padding-bottom: 10px;
}

ul.artistRecs li {
    display: block;
    float: left;
    width: 265px;
    padding-bottom: 10px;
    font-size: 11px;
    line-height: 1.272727em;
    color: #666;
}

ul.artistRecs li.odd {
    clear: both;
}

ul.artistRecs li div.container {
    padding-left: 78px;
    padding-right: 9px;
    position: relative;
}

ul.artistRecs li .pictureFrame {
    display: inline;
    float: left;
    margin-left: -78px;
}

ul.artistRecs li a.artist {
    color: #1b1b1b;
}

ul.artistRecs li a.artist:hover {
    color: #0187c5;
    text-decoration: underline;
}

ul.artistRecs li a strong.name {
    font-size: 12px;
}

ul.artistRecs li a.playbutton {
    position: absolute;
    left: 45px;
    top: 34px;
}

.ie6 ul.artistRecs li a.playbutton {
    display: inline;
    float: left;
    margin-left: -81px;
}

ul.artistRecs li p.info {
    margin-top: 0.363636em;
}


/* small-vertical */

.list-artist-small-vertical li {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    width: 100%;
    padding: 5px 0;
}

.list-artist-small-vertical li.first {
    border-top: 0;
}

.list-artist-small-vertical li.last {
    border-bottom: 0;
}

.list-artist-small-vertical .list-content {
    padding: 0 0 0 48px;
}

.list-artist-small-vertical .pictureFrame {
    float: left;
    display: inline;
    margin-left: -48px;
}

.list-artist-small-vertical .summary {
    font-size: 11px;
    line-height: 1.181818em;
    font-weight: bold;
}


.mediumChartWithImages li {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    height: 84px;
}

.mediumChartWithImages li a {
    display: block;
    height: 64px;
    padding-left: 66px;
}

.mediumChartWithImages li a:hover {
    text-decoration: none;
}

.mediumChartWithImages li a small {
    display: block;
    line-height: 1.181818em;
    color: #666;
    font-size: 11px;
}

.mediumChartWithImages li img.chartImage {
    float: left;
    margin: 0 0 0 -66px;
    border: 1px solid #0187c5;
}

.mediumChartWithImages li a:hover img.chartImage {
    border-color: #0187c5;
}

.mediumChartWithImages li p {
    padding: 3px 5px;
}

.mediumChartWithImages li a:hover p strong {
    text-decoration: underline;
}

.mediumChartWithImages li span.position {
    position: absolute;
    display: block;
    left: 59px;
    top: 0px;
    width: 20px;
    text-align: center;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    background: #73b7e5;
    color: #fff;
    display: none;
}

#page .chartbar2 {
    position: relative;
    display: block;
    width: auto;
    height: 22px;
    line-height: 22px;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

#page .chartbar2 span.bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    min-width: 60px;
    height: 22px;
    line-height: 22px;
    background: url(https://cdn.last.fm/flatness/charts/chartbar.png) no-repeat right top;
}

#page .chartbar2 span.value {
    display: block;
    position: relative;
    padding: 0 5px;
    z-index: 1;
    font-size: 11px;
    line-height: 22px;
}

.ie6 .chartbar2 span.value {
    margin: 3px 0;
}

#page a .chartbar2 span.value,
#page a:hover .chartbar2 span.value {
    color: #fff;
    text-decoration: none;
}

/* small */

ul.journalsSmall {
    border-bottom: 1px solid #fff;
    font-size: 11px;
}

ul.journalsSmall li {
    padding: 5px 5px 5px 25px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

ul.journalsSmall li.last {
    border-bottom: none;
}

ul.journalsSmall li img.journal_icon {
    float: left;
    display: inline;
    margin: 0 0 0 -25px;
}

ul.journalsSmall li.first {
    border-top: none;
}

ul.journalsSmall a strong {
    color: #1b1b1b;
}

ul.journalsSmall a:hover strong {
    color: #0187c5;
}

ul.journalsSmall li span.info {
    display: block;
    margin: 3px 0 0 0;
    font-size: 10px;
}

ul.journalsSmall li span.info {
    color: #666;
}

/* with excerpt */

ul.journalsExcerpt li {
    padding: 10px 10px 10px 75px;
}

ul.journalsExcerpt li a.excerptImage {
    float: left;
    margin-left: -76px;
    margin-top: 3px;
}

ul.journalsExcerpt li a.title img {
    display: none;
}

/* featured */

ul.journalsFeatured li {
    font-size: 12px;
    border-bottom: none;
}

ul.journalsFeatured li.last {
    border-bottom: none;
}

ul.journalsFeatured li span.info {
    margin-top: 0;
}

ul.journalsFeatured li p.excerpt {
    margin-top: 5px;
}

/* small */


ul.eventsSmall span.calSheet {
    float: left;
    display: inline;
    margin-left: -37px;
}

ul.eventsSmall li {
    zoom: 1;
    padding: 5px 5px 5px 42px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.eventsSmall li.first {
    border-top: 0;
}
ul.eventsSmall li.last {
    border-bottom: 0;
}

ul.eventsSmall a {
    text-decoration: none;
}

ul.eventsSmall li strong.summary {
    display: block;
    font-size: 11px;
    line-height: 1.181818em;
    color: #000;
}
ul.eventsSmall a:hover strong.summary,
ul.eventsSmall a:hover span.summary {
    color: #0187c5;
    text-decoration: underline;
}

ul.eventsSmall li small.location {
    display: block;
    color: #000;
    font-size: 11px;
    margin: 1px 0 4px 0;
}

ul.eventsSmall li p.info {
    font-size: 10px;
    color: #666;
}

ul.eventsSmall a.comments:hover {
    text-decoration: underline;
}

ul.eventsSmall li.past span.calSheet {
	filter: alpha(opacity=60);
 	-moz-opacity: 0.6;
    opacity: 0.6;
}

/* Medium */

ul.eventsMedium {
    font-size: 11px;
    line-height: 1.5em;
}

ul.eventsMedium li {
    margin-bottom: 10px;
}

ul.eventsMedium li div.event {
    padding: 4px;
    border-top: 1px solid #9cf;
    font-size: 11px;
    background: #f2f2f2;
}

ul.eventsMedium li.hasposter div.event {
    padding-left: 79px;
}

ul.eventsMedium li h3 a {
    color: #0187c5;
}

ul.eventsMedium li a {
    text-decoration: none;
}

ul.eventsMedium li a:hover {
    text-decoration: underline;
}

ul.eventsMedium li h3 img {
    display: none;
}

ul.eventsMedium li.hasposter div.event h3 img {
    display: block;
    float: left;
    margin: 0 0 0 -75px;
}

ul.eventsMedium li span.artists a {
    color: #000;
}

ul.eventsMedium li address a {
    color: #666;
}

ul.eventsMedium li div.eventInfo {
    margin: 5px 0 0 0;
    font-size: 10px;
}

ul.eventsMedium li div.eventInfo a.tickets {
    padding: 0 0 0 20px;
    background: url(https://cdn.last.fm/flatness/ticket.png) no-repeat left 2px;
}


/* Medium with featured */

ul.eventsMediumWithFeatured {
    clear: both;
    padding-left: 267px;
}

ul.eventsMediumWithFeatured li {
    border-top: 1px solid #ccc;
}

ul.eventsMediumWithFeatured li .container {
    padding: 5px;
    padding-right: 34px;
    border-top: 1px solid #fff;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.eventsMediumWithFeatured li .calSheet {
    display: inline;
    float: right;
    margin-right: -32px;
}

ul.eventsMediumWithFeatured li a.summary {
    display: block;
    font-size: 12px;
    line-height: 1.166667em;
    color: #1b1b1b;
    text-decoration: none;
}

ul.eventsMediumWithFeatured li a.summary:hover {
    color: #0187c5;
    text-decoration: none;
}

ul.eventsMediumWithFeatured li .location {
    display: block;
}

ul.eventsMediumWithFeatured li p.info {
    margin-top: 5px;
    color: #666;
}

ul.eventsMediumWithFeatured li.first {
    display: inline;
    float: left;
    margin-left: -267px;
    border: 1px solid #ccc;
    padding: 1px;
    background: #fff;
}

ul.eventsMediumWithFeatured li.first a {
    display: block;
    position: relative;
    width: 252px;
    height: 189px;
    background-color: #000; /* CSS Defensiveness */
    background-repeat: no-repeat;
    background-position: center top;
    text-decoration: none;
}

ul.eventsMediumWithFeatured li.first a:hover {
    text-decoration: none;
}

ul.eventsMediumWithFeatured li.first p.info {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 200px;
    padding: 9px 9px 9px 9px;
    padding-left: 43px;
    background: #000;
    color: #fff;
    font-size: 11px;
    line-height: 1.272727em;
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter:alpha(opacity=90);
}

ul.eventsMediumWithFeatured li.first p.info span.calSheet {
    display: inline;
    float: left;
    margin-left: -34px;
    line-height: 1.214286em;
}

ul.eventsMediumWithFeatured li.first p.info strong {
    display: block;
    font-size: 14px;
    line-height: 1.142857em;
    font-weight: bold;
}

ul.eventsMediumWithFeatured li.first a:hover p.info strong {
    color: #0187c5;
}

/* overrides */

ul.eventsNoBorder,
ul.eventsNoBorder li {
    border: 0;
}

dl.factboxMedium {
    border: 1px solid #ddd;
    font-size: 11px;
    padding: 0 10px 0 120px;
}

dl.factboxMedium dt{
    position: relative;
    float: left;
    margin: 0 0 0 -110px;
    font-weight: bold;
}

dl.factboxMedium dd {
    width: 100%;
}

dl.factboxMedium dd ul li {
    position: relative;
    padding: 0 0 0 5px;
    margin: 0 0 0 -5px;
}

dl.factboxMedium dd a {
    color: #D51007;
}

dl.factboxMedium dd ul li small {
    position: absolute;
    top: 0;
    right: 5px;
}

dl.factboxMedium dd ul li.odd {
    background: #efefef;
}

ul#eventPhotos li {
    display: inline;
    float: left;
    margin: 0 10px 10px 0;
    width: 59px;
    height: 59px;
    border: 1px solid #ccc;
    padding: 2px;
    background: #fff;
}

ul#eventPhotos li a {
    display: block;
    overflow: hidden;
    width: 59px;
    height: 59px;
}

ul#eventPhotos li.highlight {
    border: 1px solid #0187c5;
    background: #0187c5;
}

p#eventHeadliners {
    clear: both;
}

p#eventHeadliners a.highlight {
    text-decoration: underline;
}

/* just square images */

ul.floatingSquares {
    overflow: hidden;
    margin: 1em -15px 1em 0;
    padding: 0;
}

ul.floatingSquares li {
    float: left;
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 11px;
}

ul.floatingSquares a {
    display: block;
}

ul.floatingSquares li {
    width: 75px;
    height: 75px;
}

/* inline, comma-separated */

ul.inline {
    margin: 0;
    padding: 0;
}

ul.inline li {
    margin: 0;
    padding: 0;
    display: inline;
}

ul.inline li:after {
    content: ", ";
}

ul.inline li.last:after {
    content: "";
}

/* small */

ul.groupsSmall li.last {
    border-bottom: 0;
}

ul.groupsSmall a,
ul.groupsSmall a:hover {
    text-decoration: none;
    display: block;
}

ul.groupsSmall li strong {
    display: block;
    font-size: 11px;
}

ul.groupsSmall li a strong img.groupImage {
    float: left;
    margin-left: -49px;
}

ul.groupsSmall li.first {
    border-top: none;
}

ul.groupsSmall li {
    display: block;
    padding: 5px 5px 5px 49px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
}

ul.groupsSmall li span.info {
    display: block;
    margin: 2px 0 0 0;
    font-size: 10px;
    color: #666;
}

ul.groupsSmall a strong {
    color: #000;
}

ul.groupsSmall a:hover strong {
    color: #0187c5;
}

/* medium */

ul.groupsMedium {
    margin: 1em 0;
}

ul.groupsMedium li {
    display: block;
    float: left;
    width: 49%;
    margin: 0 0 30px 0;
    font-size: 11px;
}

ul.groupsMedium li div.groupContainer {
    padding: 0 0 0 79px;
}

ul.groupsMedium li.odd {
    clear: both;
}

ul.groupsMedium li.odd div.groupContainer {
    padding-right: 30px;
}

ul.groupsMedium strong {
    display: block;
    border-bottom: 1px solid #ccc;
}

ul.groupsMedium strong a {
    color: #1b1b1b;
}

ul.groupsMedium strong a:hover {
    color: #0187c5;
    text-decoration: none;
}

ul.groupsMedium strong img.groupImage {
    float: left;
    margin: 0 0 0 -79px;
}

p.members {
    color: #666;
    font-size: 10px;
    line-height: 17px;
}

p.latestActivity {
    line-height: 14px;
}


ul.groupsMedium h4 {
    margin: 0 -189px 0.25em -15px;
    border-top: solid 1px #ddd;
    padding-left: 15px;
    background: #eee;
    font-size: 16px;
    line-height: 1.25em;
}

ul.groupsMedium h4 img {
    float: left;
    display: inline;
    margin: -1px 0 0 -126px;
}

/* groups medium wide - 1 per row */

ul.groupsMediumWide li {
    padding: 10px 5px;
    margin: 0  0 0-5px;
    width: auto;
    float: none;
    clear: both;
}

ul.groupsMediumWide li.odd div.groupContainer {
    padding-right: 0;
}

.newsEntriesSmall {
    color: #666;
}

.newsEntriesSmall li {
    padding: 6px 0;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.newsEntriesSmall li.last {
    border-bottom: none;
}

.newsEntriesSmall li strong {
    display: block;
    margin-bottom: 3px;
}

.newsEntriesSmall .sub {
    font-size: 10px;
}

.newsEntriesSmall .comment_icon {
    margin-bottom: -3px;
}

.newsEntriesSmall .sub a,
.latestNewsEntry .sub a {
    color: #666;
}

.latestNewsEntry {
    overflow: hidden;
    padding: 0 0 5px 0;
    border-bottom: 1px solid #ccc;
}

.latestNewsEntry .entryImage,
.latestNewsEntry .favIcon {
    border: 1px solid #ccc;
    padding: 1px;
    float: left;
    display: inline;
}

.latestNewsEntry .entryImage {
    margin: 0 10px 0 0;
}

.latestNewsEntry .sub {
    color: #666;
    margin-bottom: 0.7em;
    font-size: 10px;
}

.latestNewsEntry h3 {
    margin-bottom: 3px;
}

.latestNewsEntry h3 img {
    margin: 0 0 0 -25px;
}

.latestNewsEntryWithFavIcon h3 {
    padding: 0 0 0 25px;
}

.latestNewsEntryWithFavIcon .sub {
    padding-left: 25px;
}

.latestNewsEntry .entry-content {
    line-height: 1.363636;
}

.latestNewsEntry .rightshouts,
.newsEntriesSmall .rightshouts {
    text-align: right;
    margin: 4px 0 0 0;
    font-size: 10px;
}

.newsEntriesSmall .rightshouts {
    margin-right: 0;
}

ul.notices li {
    overflow: hidden;
    margin: 0 0 15px 0;
    position: relative;
    background: #f5f5f5;
    border-bottom: solid 1px #ddd;
}

ul.notices div.from {
    overflow: hidden;
    padding: 8px 0 5px 0;
    font-size: 11px;
    background: #eee;
    border-bottom: solid 1px #ddd;
    line-height: 1.363636em;
    color: #666;
}

ul.notices li.new {
    border-bottom: solid 1px #c6d7ea;
}

ul.notices li.new div.from {
    background: #e3eef9;
    border-bottom: 1px solid #c6d7ea;
}

ul.notices li.new div.item {
    background: #f1f6fa;
}

ul.notices div.from span.userImage {
    float: left;
    display: inline;
    margin: -3px 10px 0 5px;
}

ul.notices div.from strong {
    color: #000;
}

ul.notices li div.item {
    padding: 5px;
}

ul.notices p.message {
    margin: 5px 0 10px 0;
}

ul.notices p.outcome {
    margin-top: 10px;
    text-align: right;
    color: #666;
    font-size: 11px;
}

ul.notices p.outcome a {
    text-decoration: none;
}

ul.notices p.outcome a:hover {
    text-decoration: underline;
}

ul.notices div.resource {
    margin: 0;
    padding: 0;
    background: transparent;
}

ul.notices div.resource h1,
ul.notices div.resource p {
    padding-left: 83px;
}

ul.notices div.resource h1 * {
    margin-bottom: 0;
}

ul.notices div.resource p.message {
    font-size: 11px;
}

ul.notices form {
    text-align: right;
}

/* misc */

ul.notices a.close {
    position: absolute;
    top: 5px;
    right: 5px;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    color: #ccc;
    line-height: 1em;
    padding: 0 0.25em 0.25em 0.25em;
    -webkit-border-radius: 0.6em;
    -moz-border-radius: 0.6em;
}

ul.notices a.close:hover {
    background: #ccc;
    color: #f5f5f5;
}

ul.notices li.new a.close {
    color: #98c1dd;
}

ul.notices li.new a.close:hover {
    background: #98c1dd;
    color: #fff;
}

/* ==========================================================================
   Pictures on image slider and in galleries
   ========================================================================== */

.pictures {
    padding: 6px 0;
    margin-right: -15px;
    overflow: hidden;
}

.pictures li {
    position: relative;
    float: left;
    display: inline;
    padding: 0 20px 18px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    width: 16.6667%;
}

.pictures .pic {
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 140px;
}

.pictures .pic img {
    min-height: 100%;
    min-width: 100%;
}

/* Image Slide overrides
   ========================================================================== */

.image-slide .pictures {
    padding: 12px 0 12px 15px;
    margin: 0;
    background: #222;
    background: -webkit-linear-gradient(#222,#000);
    background: -moz-linear-gradient(#222,#000);
    background: -o-linear-gradient(#222,#000);
    background: linear-gradient(#222,#000);
    border-bottom: 1px solid #444;
}

.image-slide .pictures li {
    width: 9.09%;
    padding-bottom: 0;
}

.ie7 .image-slide .pictures {
    padding: 6px 0;
    border-top: 1px solid #444;
}

.ie7 .image-slide .pictures li {
    width: 9%;
    padding-right: 0;
}

.image-slide .pictures a {
    height: 50px;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    -ms-transition: opacity 100ms;
    transition: opacity 100ms;
}

.image-slide .pictures li.selected a,
.image-slide .pictures li a:focus,
.image-slide .pictures li a:hover {
    opacity: 1;
}

.ie7 .image-slide .pictures li.selected a,
.ie8 .image-slide .pictures li.selected a,
.ie7 .image-slide .pictures li a:focus,
.ie7 .image-slide .pictures li a:hover,
.ie8 .image-slide .pictures li a:focus,
.ie8 .image-slide .pictures li a:hover {
    filter: alpha(opacity = 100);
}

.image-slide .pic img {
    max-width: 50px;
}

/* Fix ie8 max-width scaling */
.ie8 .image-slide .pic img {
    width: auto;
}

/* Dismiss icon
   ========================================================================== */

.pictures .dismiss_icon:hover + .pic {
    opacity: 0.5;
    box-shadow: rgba(0,0,0,0.3) 0 3px 3px;
}

.pictures .dismiss_icon {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 5px;
    opacity: 0.5;
    z-index: 2;
}

.pictures .dismiss_icon:hover {
    opacity: 1;
}


.inlineTagList li {
    display: inline;
    padding: 0 7px 5px 0;
}

.freeTracks, .topTracks {
    margin: 0 0 5px 0;
}

.freeTracks li, .topTracks li {
    padding: 7px 7px 7px 30px;
    font-size: 11px;
    line-height: 1.181818em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

.withHead .topTracks li { 
    border-top: 1px solid #333;
    color: #fff;
}

.freeTracks li.first, .topTracks li.first {
    border-top: 0;
}

.freeTracks li.last, .topTracks li.last {
    border-bottom: 0;
}

.freeTracks li.odd, .topTracks li.odd {
    background: #f7f7f7;
}

.withHead .topTracks li.odd { 
    background: #070707;
}

.freeTracks li a.playbutton, .topTracks li a.playbutton {
    float: left;
    display: inline;
    margin: 0 0 0 -22px;
}

.freeTracks li a, .topTracks li a {
    color: #000;
}

.withHead .topTracks li a { 
    color: #fff;
}

.freeTracks li .trackDuration, .topTracks li .trackDuration {
    font-size: 10px;
}

.freeTracks .lfmFreeDownloadButton {
    float: right;
    margin: 0 0 0 5px;
}


/* intro */

div.userIntro {
    margin-bottom: 2em;
}

/* square */

ul.usersSquare {
    display: block;
    width: 304px; /* explicitly set width, so it likes the margins below */
}

ul.usersSquare li {
    display: block;
    float: left;
    width: 70px;
    height: 70px;
    margin: 0 6px 6px 0;
}

ul.smallSquare li a,
ul.usersSquare li a {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    text-decoration: none;
    position: relative;
}

ul.smallSquare li a:hover,
ul.usersSquare li a:hover {
    z-index: 2;
}

ul.usersSquare li a span.userImage {
    display: block;
    width: 64px;
    height: 64px;
    background: #fff;
}

ul.smallSquare li a span.name,
ul.usersSquare li a span.name {
    display: block;
    visibility: hidden;
    position: absolute;
    padding: 2px 4px;
    line-height: 1.272727;
    background: #0187c5;
    color: #fff;
    font-size: 10px;
    font-weight: normal;
    white-space: nowrap;
}

ul.smallSquare {
    margin: 1em -4px 1em 0;
}

ul.smallSquare li {
    float: left;
    display: inline;
    width: 38px;
    height: 38px;
    margin: 0 4px 4px 0;
}
ul.smallSquare li.last {
    margin-right: 0;
}

ul.smallSquare li a img {
    display: block;
    width: 34px;
    height: 34px;
    background: #fff;
}

/* small */

ul.usersSmall li {
    float: left;
    display: inline;
    width: 49%;
    margin: 0 0 7px 0;
}

ul.usersSmall li div {
    padding: 0 0 0 48px;
    font-size: 11px;
    line-height: 1.181818em;
    color: #666;
}

ul.usersSmall li.odd {
    clear: both;
}

ul.usersSmall li.odd div {
    margin-right: 10px;
}

ul.usersSmall li strong a {
    color: #1b1b1b;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer; /* explicit for IE */
}

ul.usersSmall li strong a:hover {
    color: #0187c5;
}

ul.usersSmall span.userImage {
    float: left;
    display: inline;
    margin: 0 0 0 -48px;
}

ul.usersSmall .nowlistening,
ul.usersSmall .justlistened {
    color: #390;
}

ul.usersSmall .nowlistening {
    font-weight: bold;
}

ul.usersSmall a .name {
    background: transparent !important;
}

.ie6 .module ul.usersSmall {
    position: relative;
}

.ie6 .module ul.usersSmall li,
.ie6 .module ul.usersSmall div {
    position: relative;
    height: 38px;
}

.ie7 ul.usersSmall div {
    position: relative;
    min-height: 38px;
}

.ie6 .module ul.usersSmall span.userImage {
    float: none;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.ie7 ul.usersSmall span.userImage {
    float: none;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* user img styles */

span.imgMedium {
    border: 1px solid #999;
}

span.imgMedium img {
    border: 2px solid #fff;
}

a.user span.imgMedium {
    border: 1px solid #999;
}

a.subscriber span.imgMedium {
    border: 1px solid #8ab3e7;
}

a.staff span.imgMedium {
    border: 1px solid #ef647a;
}

a.alumni span.imgMedium {
    border: 1px solid #5336bd;
}

a.user:hover span.imgMedium {
    border: 1px solid #666;
}

a.user:hover span.imgMedium,
a.user:hover span.imgMedium img {
    border-color: #666;
}

a.subscriber:hover span.imgMedium,
a.subscriber:hover span.imgMedium img {
    border-color: #4971a9;
}

a.alumni:hover span.imgMedium,
a.alumni:hover span.imgMedium img {
    border-color: #271057;
}

a.staff:hover span.imgMedium,
a.staff:hover span.imgMedium img {
    border-color: #D51007;
}

/* medium */

ul.usersMedium {
    margin: 1em 0;
    font-size: 11px;
    line-height: 1.181818;
}

ul.usersMedium li {
    position: relative;
    display: block;
    float: left;
    width: 49%;
    margin: 0 0 30px 0;
    left: 15px;
}

ul.usersMedium li div.userContainer {
    padding: 0 0 0 79px;
    zoom: 1;
}

ul.usersMedium div.userContainer .listeningNow {
    background: url(https://cdn.last.fm/flatness/global/icon_eq.gif) top right no-repeat;
}

ul.usersMedium li.odd {
    clear: both;
    left: 0;
}

ul.usersMedium li.odd div.userContainer,
ul.usersMedium li.odd a.delete {
    margin-right: 15px;
}

ul.usersMedium div.userContainer strong {
    display: block;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

ul.usersMedium strong a {
    color: #1b1b1b;
    font-size: 12px;
}

ul.usersMedium strong a:hover {
    color: #0187c5;
    text-decoration: none;
}

ul.usersMedium strong span.userImage {
    float: left;
    margin: 0 0 0 -79px;
    cursor: pointer;
}

ul.usersMedium div.userContainer p strong {
    display: inline;
    border: 0;
}

ul.usersMedium p.info {
    padding: 3px 0;
    color: #666;
    font-size: 10px;
}

ul.usersMedium li a.delete {
    position: absolute;
    top: 0px;
    right: 0;
    display: none;
}
ul.usersMedium li a.delete img.icon {
    display: block;
    margin: 0;
}

ul.usersMedium li:hover a.delete {
    display: block;
}

ul.usersMedium li.findfriends div {
    background: #eef5fc;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.5em;
}

ul.usersMedium li.findfriends a.icon {
    background: #fff;
    display: block;
    border: 1px solid #ccc;
    padding: 7px 8px 7px 8px;
    margin-right: 10px;
    float: left;
}

ul.usersMedium li.findfriends a.icon:hover {
    border-color: #0187C5;
}

ul.usersMedium li.findfriends a.icon img {
    float: left;
}

ul.usersMedium li.findfriends div h2 {
    color: #1b1b1b;
    font-size: 12px;
}

/* Users medium wide - 1 per row */

ul.usersMediumWide li {
    padding: 10px 5px;
    margin: 0  0 0-5px;
    width: auto;
    float: none;
    clear: both;
}

ul.usersMediumWide li.odd div.userContainer {
    margin-right: 0;
}

/* mini (for eventz n shit) */

ul.usersMini li {
    display: block;
    float: left;
    clear: both;
    margin: 0 0 3px 0;
    padding: 0 0 0 25px;
}

ul.usersMini li strong span.userImage {
    display: inline;
    float: left;
    margin: 0 0 0 -25px;
}

/* Highlighting, extends user lists  */
.highlightFriends li.friend a,
.highlightUser li.you a {
    background-color: #fff59b;
}


/* small */

ul.venuesSmall {
    margin: 1em 0;
}

ul.venuesSmall li {
    overflow: hidden;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

ul.venuesSmall li.first {
    border-top: none;
}

ul.venuesSmall a {
    display: block;
    padding: 5px 5px 5px 79px;
    text-decoration: none;
}

ul.venuesSmall a strong {
    font-weight: bold;
}

ul.venuesSmall a:hover strong {
    text-decoration: underline;
}

ul.venuesSmall a img {
    float: left;
    display: inline;
    margin: 0 0 0 -74px;
    padding: 1px;
    border: 1px solid #ccc;
}

ul.venuesSmall p {
    margin: 5px 0;
    color: #666;
}

/* ==========================================================================
   Video thumbnail list
   ========================================================================== */

.video-list {
    margin: 0 -20px 0 0;
    clear: both;
    overflow: hidden;
    font-size: 11px;
    line-height: 16px;
}

.video-list li {
    display: inline-block;
    margin: 0 20px 18px 0;
    position: relative;
    width: 140px;
}


fieldset.addDialogPlaylist {
    padding: 10px;
}
fieldset.addDialogPlaylist label {
    display: block;
    margin: 5px 0;
}

.buyDialog a.button {
    display: inline;
    float: right;
    width: 50px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}
.buyDialog a.button:hover {
    border-color: #505050 #404040 #2d2d2d #404040;
    font-weight: bold;
    background: #515151 url(https://cdn.last.fm/flatness/buttons/5/confirm_button.png) 0 0 repeat-x;
    text-shadow: #515151 0 -1px 1px;
}
.buyDialog small.price {
    display: inline;
    float: right;
    margin: 2px 5px;
}
.buyDialog ul.buyChoices li {
    clear: right;
    margin-bottom: 8px;
}
.buyDialog ul.buyChoices a.icon img {
    display: inline;
    float: left;
    margin-right: 5px;
}       

.multiBuyDialog .dialogContent {
    overflow: auto;
}

.multiBuyDialog table td {
   padding: 1px 5px;
}

.multiBuyDialog table .odd td {
    background: #eee;
}

.multiBuyDialog table .price {
    text-align: right;
}

.multiBuyDialog table .found.track {
    font-weight: bold;
}

.multiBuyDialog table .notFound {
    color: #999;
}

.multiBuyDialog .dialogButtons {
    position: relative;
    color: #999;
    zoom: 1;
}

.multiBuyDialog .dialogButtons span {
    float: left;
}


.deprecationDialog {
    padding: 0 0 0 50px;
    background: url(https://cdn.last.fm/flatness/listen_v2/error_big.png) left top no-repeat;
    font-size: 12px;
    line-height: 1.333333em;
}

.deprecationDialog ul {
    padding: 0 0 1em 15px;
    list-style: disc outside;
}

.dialogBox {
    border: 5px solid #333;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0 0 10px #333;
}

.dialogBox.add {
    border-color: #1c6ca4;
}
.dialogBox a.dialogStatus {
    display: block;
    float: right;
    width: 16px;
    height: 16px;
    margin: 5px;
    text-decoration: none;
    background: url('https://cdn.last.fm/flatness/buttons/delete.2.png') no-repeat 50% 50%;
}
.dialogBox a.dialogBusy {
    background-image: url('https://cdn.last.fm/flatness/spinner_small.gif');
}
.dialogBox a.dialogFailure {
    background-image: url('https://cdn.last.fm/depth/forms/incorrect_new.gif');
}
.dialogBox a.dialogStatus:hover {
    background-image: url('https://cdn.last.fm/flatness/buttons/delete.2.png');
}

.dialogBox h3 {
    margin: 0;
    padding: 5px 15px;
    background: transparent;
    border-bottom: 1px solid #aaa;
    font-size: 15px;
}
.dialogBox h3:hover {
    cursor: move;
}
.dialogBox .dialogContent {
    padding: 15px;
}
.dialogBox .dialogContent p {
    margin:0.5em 0 6px 0;
}
.dialogBox h5 {
    margin: 0.5em 0 0.3em 0;
    font-size: 11px;
}

.dialogBox textarea {
    width: 100%;
    height: 150%;
}

.dialogBox .dialogExtra {
    padding: 0 0.5em 0.5em 0.5em;
}
.dialogBox .dialogExtra h5 {
    text-transform: uppercase;
}

.dialogBox .dialogForm {
    clear:both;
}
.dialogBox .dialogButtons {
    clear: both;
    border-top: solid 1px #aaa;
    padding: 10px 15px;
    background: #eee;
    overflow: hidden;
    text-align: right;
}

.noDialogButtons .dialogButtons {
    display: none;
}

.dialogBox .dialogButtons input.dialogConfirm {
    margin-left: 8px;
}

/* FOD */

.fodDialog {
    background: #faf8df;
    border: 3px solid #ccc;
}
.fodDialog form {
    padding: 0.5em 1em;
    text-align: left;
    font-size: 11px;
}
.fodDialog span.track {
    color: #000;
}
.fodDialog h4 {
    margin: 1.5em 0 0 0;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.fodDialog input.dialogButton {
    border: 1px solid #8b8b83;
    background: #f2f2f2 url(https://cdn.last.fm/depth/homepage_960/signupbutton.gif) repeat-x 0 50%;
    color: #545454

}
.fodDialog input.dialogButton:hover {
    color: #222;
}
.fodDialog input.dialogConfirm {
    width: 224px;
    height: 31px;
    margin: 15px 0 15px 57px;
    padding: 2px 0;
    font-size: 16px;
    text-align:center;
}
.fodDialog input.dialogCancel {
    padding: 2px 10px;
    float:right;
}

/* Resource rep */

.dialogBox fieldset.resource,
.dialog-attachment {
    margin: -15px 0 15px 0;
    padding: 15px;
    border: 1px solid #e7e7e7;
    border-top: 0;
    background: #f2f2f2;
}
.dialogBox fieldset.resource .resource,
.dialog-attachment .resource {
    padding: 0;
    margin-bottom: 0;
}

.dialog-attachment h4 a {
    font-weight: normal;
}

.dialog-attachment .h2 {
    color: #1b1b1b;
}

/* Success */

.dialogBox div.successScreen {
    padding: 150px 0 60px;
    background-image: url("https://cdn.last.fm/flatness/giant_success_tick.png");
    background-position: center 50px;
    background-repeat: no-repeat;
    text-align: center;
}

.ie6 .dialogBox div.successScreen {
    background-image: url("https://cdn.last.fm/flatness/giant_success_tick.gif");
}

.dialogBox div.successScreen h4 {
    font-size: 15px;
    margin: 1em 0 0 0;
    font-weight: bold;
}

.dialogBox div.successScreen a {
    color: #4185ce;
}

/* upload image dialog */


.upload .uploading {
    margin: 9px 0 0 0;
}


.dialogBox div.upsell {
    margin: 1em 0 0em;
    font-size: 11px; 
    color: #666
} 

.dialogBox .reveal {
    padding-bottom: 1em;
    text-align: right;
}

.interstitial {
    background: #000;
    color: #fff;
}

.interstitial a {
    color: #fff;
    text-decoration: underline;
}

.interstitial h3 {
    border: none;
    font-size: 24px;
}

.lfmBlack #page .interstitial h3,
.lfmBlack #page .interstitial h3 a {
    color: #fff !important;
}

.interstitial h4 {
    font-size: 18px;
    margin: 2em 0 1em;
}

.interstitial .dialogButtons {
    background: none;
    border: none;
}

.interstitial .mp3com ol {
    list-style: decimal inside;
}

.dialogBox .dialogContent .memo--dialog-top {
    margin: -15px -15px 15px -15px;
    padding-left: 36px;
    padding-right: 17px;
    border-radius: 0;
    border-bottom: 1px solid #E2C8A5;
}

.memo--dialog-top.iconleft:before {
    left: 13px;
}

.dialogBox div.successScreen .btn {
    color: #1b1b1b;
}


#flagging-actions label {
    display: block;
    margin: 10px 0 0 0;
    color: #666;
    font-size: 11px;
}

#flagging-actions textarea,
#flagging-actions input {
    width: 98%;
}


.dialogBox.flagvideo .intro {
    margin-bottom: 12px;
    font-weight: bold;
}

.dialogBox.flagvideo .flagvideo-tooltip {
    margin: 6px 0 12px 23px;
}

.dialogBox.flagvideo .flagvideo-other {
    margin: 6px 0 0 23px;
    width: 339px;
    max-width: 339px;
}

.dialogBox.flagvideo .info-toggle:after {
    opacity: 0.3;
}

.flagvideo-bad-quality-reasons .toggle-container.active .info-toggle:after,
.flagvideo-bad-quality-reasons .info-toggle:hover:after {
    opacity: 1;
}


.dialogBox.labsfeedback label {
    display: block;
    margin-bottom: 5px;
}

.dialogBox.labsfeedback label input {
    margin-right: 5px;
}

.dialogBox.labsfeedback textarea {
    width: 362px;
}

.moderationvote .options li {
    margin: 0 0 7px 0;
    padding-left: 20px;
}

.moderationvote .options input.radio {
    margin-left: -20px;
    float: left;
    display: inline;
}

.moderationvote .options ul li {
    margin: 7px 0 0 0;
    padding: 0;
}

.moderationvote .messageBox {
    margin-top: 0;
}

/* lots and lots of fiddly stuff for IE here */

.module {
    position: relative;
}

.fiflufi .leftCol .module {
    margin-top: 30px;
}

.ie6 .module {
    zoom: 1;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.ie7 .module {
    margin: 30px 0;
}

#page div.fiflufi div.leftCol div.module h2.heading {
    margin-top: 0;
}

.module .moduleDropDown {
    position: absolute;
    top: -2px;
    right: 0;
}
.module .moduleButtons {
    position: absolute;
    top: -2px;
    right: 0;
    font-size: 11px;
}

.no-js .moduleButtons {
    display: none;
}

#page .module .moduleButtons {
    top: 15px;
}

.a-charts #page .module .moduleButtons {
    top: -2px;
}

.ie6 .module .moduleDropDown,
.ie6 .module .moduleButtons {
    right: 15px;
}

.module .moduleButtons a {
    color: #666;
}

.ie6 .module .moduleButtons img {
    vertical-align: middle;
}

.ie7 .module .moduleButtons img {
    vertical-align: middle;
}

.feedDialog h3 small,
.embedDialog h3 small,
.modulePreferences h3 small {
    font-size: 15px;
    color: #999;
}

.modulePreferences fieldset {
    margin-bottom: 10px;
}

.embedDialog .infoMessage,
.modulePreferences .infoMessage {
    background: #fdf7c1;
    padding: 5px 7px 7px 7px;
    font-size: 11px;
    line-height: 1.181818em;
    margin-bottom: 0;
}

.embedDialog .infoMessage {
    margin-top: 0;
    margin-bottom: 15px;
}

.embedDialog .infoMessage .messageWrapper,
.modulePreferences .infoMessage .messageWrapper {
    background: transparent;
    padding: 0;
}

.modulePreferences ul.formOptions {
    display: block;
}

.modulePreferences ul.formOptions li {
    display: block;
    padding-left: 185px;
    overflow: hidden;
    margin: 0 0 7px 0;
}

.modulePreferences ul.formOptions li label {
    float: left;
    display: inline;
    margin-left: -185px;
    width: 170px;
    text-align: right;
}

.feedDialog select,
.modulePreferences select {
    margin-left: 12px;
}

.modulePreferences ul.formOptions li select {
    margin-left: 0;
}

.embedDialog ul {
    float: left;
    width: 185px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.181818em;
}

.embedDialog li {
    margin: 0 0 0.636364em 0;
}

.embedDialog li img {
    vertical-align: text-bottom;
    position: relative;
    margin-right: 4px;
}


#page .notificationDialog {
    border: 0;
    background: #050505;
    color: #fff;
    opacity: 0.9;
    -moz-border-radius: 0;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
}
#page .notificationDialog .dialogContent {
    padding: 5px;
}
#page .notificationDialog .dialogButtons {
    display: none;
}
#page .notificationDialog ul.minifeedSmall {
    padding: 10px;
}
#page .notificationDialog ul.minifeedSmall li {
    border-bottom: 0;
}
#page .notificationDialog .brand {
    float: right;
    width: 88px;
    margin: 10px 0 10px 5px;
    padding: 0 0 0 5px;
    border-left: 1px solid #838383;
}
#page .notificationDialog .brand img {
    display: block;
}
#page .notificationDialog .brand img.sponsored {
    margin-bottom: 2px;
}
#page .notificationDialog a {
    color: #4BA3D2;
}

#page .notificationDialog a.dialogStatus {
    background-image: url('https://cdn.last.fm/promotions/close.png');
}

.radioProblemDialog {
    padding: 0 0 0 50px;
    background: url(https://cdn.last.fm/flatness/listen_v2/error_big.png) left top no-repeat;
    font-size: 12px;
    line-height: 1.333333em;
}

.radioProblemDialog ul {
    padding: 0 0 1em 15px;
    list-style: disc outside;
}

#respickerTabs {
    float:left;
    width: 360px;
    padding: 0 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #363636;
    line-height: 1;
}

#respickerTabs li {
    float: left;
    margin-left: -1px;
    padding: 4px;
    width: 58px;
    border: 1px solid #d0d0d0;
    border-bottom: 0;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

#respickerTabs li.selected {
    position: relative;
    border-color: #363636;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.typePanel {
    clear: left;
    padding: 10px;
    line-height: 2;
}
.typePanel ul {
    margin: 0;
    padding: 0;
}
.typePanel label {
    padding: 5px 0;
}
.typePanel input[type='text'] {
    vertical-align: middle;
    border: 1px solid #999;
    padding: 4px;
    font-size: 11px;
}
.typePanel input[type='submit'] {
    vertical-align: middle;
    padding: 2px;
    border: 1px solid #ddd;
    outline: 1px solid #555;
    border-color: #eee #aaa #aaa #eee;
    outline-color: #999 #eee #eee #999;
    color: #333;
    background: #f0f0f0;
    font-size: 11px;
    cursor: pointer;
}
.typePanel input[type='submit']:hover {
    border-color: #ccc #999 #999 #ccc;
    outline-color: #666 #ccc #ccc #666;
}
.typePanel input[type='submit']:active {
    background: #ddd;
}

.typePanel span.statusHolder img {
    vertical-align: middle;
    margin-left: 5px;
}

#respickerTypes .results ul {
    float:left;
    margin: 10px 0 20px 0;
    padding: 2px 0;
    border: 1px solid #c0c0c0;
    background: #fff;
}
#respickerTypes .results li {
    float: left;
    width: 340px;
    margin: 0 2px;
    padding: 2px;
    border: 0;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
#respickerTypes .results li.last {
    border-bottom: 0;
}

#respickerTypes .results li img {
    float: left;
    border: 1px solid #C0C0C0;
    margin: 0 5px 0 0;
}
#respickerTypes .results li.selected {
    -webkit-border-radius: 0;
    -moz-border-radius: 0px;
    background: #ccc;
    border-color: #ddd;
}
#respickerTypes .results li.selected img {
    border: 1px solid white;
}
#respickerTypes .active li.selected {
    color: #fff;
    border-color: #0060e9;
    background: #0060e9;
}

ul#otherTypes li.radioOption {
    width: 340px;
    float: left;
    border: 5px solid #fff;
    cursor: pointer;
}
ul#otherTypes li.selected {
    border-color: #d2d2d2;
    background: #d2d2d2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
ul#otherTypes li.radioOption input,
ul#otherTypes li.radioOption label {
    vertical-align: middle;
    margin-right: 0.3em;
}
ul#otherTypes .results li {
    width: 332px;
}

.dialogBox ul.saveElsewhere {
    display: inline;
    float: left;
    margin: 5px 0 0 -5px;
}
.dialogBox ul.saveElsewhere li {
    display: inline;
    margin: 0 0.3em;
    list-style: none;
}

table.emailshare {
    width: 100%;
}
table.emailshare th {
    padding: 5px 5px 5px 0;
}
table.emailshare td {
    padding: 5px 0 5px 5px;
}
table.emailshare th {
    width: 100px;
    text-align: right;
}
table.emailshare td p {
    font-size: 10px;
    color: #666;
}
table.emailshare td span.recipcount {
    float: right;
}
table.emailshare input,
table.emailshare textarea {
    display: block;
    width: 252px;
    font-size: 11px;
    color: #333;
}

table.emailshare textarea {
    height: auto;
}

.dialogBox fieldset.sendMessage {
    margin: 1em 0 0 0;
}
.dialogBox fieldset.sendMessage textarea {
    height: 5em;
    margin: 0.5em 0 0 0;
    font-size: 12px;
    width: 362px;
}

.dialogBox ul.saveElsewhere {
    display: inline;
    float: left;
    margin: 2px 0 0 0;
}
.dialogBox ul.saveElsewhere li {
    display: inline;
    margin: 0 10px 0 0;
    list-style: none;
}
.dialogBox ul.saveElsewhere li img {
    margin: 0 0 -2px 0;
}

.publicShare {
    clear: both;
    margin: 20px 0 -5px 0;
    font-size: 11px;
    color: #666;
    text-align: left;
}

p.publicShareCheckbox input,
p.publicShareCheckbox label,
p.publicShareCheckbox a {
    vertical-align: middle;
}
div.publicShareHelp {
    margin: 5px 0;
    background: #ffd;
}

div.progressBar {
    width: 300px;
    height: 10px;
    margin: 10px 0 0 0;
    border: 1px solid #1b1b1b;
    padding: 2px;
}

div.progressBar div {
    width: 0;
    height: 10px;
    background-color: #666;
}