.data {display: none}

#wrapper {
    position: relative;
}

a.flag-icon {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 15px;
    border: 1px solid transparent;
    text-decoration: none;
}

a.flag-icon.current {
    border-color: #fff;
}

a.flag-icon-fr {
    right: 45px;
}

a.flag-icon-gb {
    right: 15px;
}


#offerBy {
    position: absolute;
    top: 38px;
    right: 0;
    width: 234px;

    font-size: 1.3em;
    font-style: italic;
    color: #fff;
    text-decoration: none;
    text-align: right;
}

#offerBy span {
    display: block;
    padding: 0 16px 2px 0;
}

#offerBy strong {
    float:right;
    display:block;
    background-color:#124740;
    padding:2px 16px 2px 20px;
    font-weight:normal;
    text-decoration:underline;

    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div#scoresOffer {
    background-color:#ccc;
    color:#fff;
    font-size:1em;
    font-weight:normal;
    border:10px solid #ccc;
    text-align:center;
    margin:0 9px 5px 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

div#scoresOffer div {
    background-color:#f3f3f3;
    padding:5px;
    font-size:1em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

div#scoresOffer div, div#scoresOffer div a {
    color:#5e5e5e;
}

div#scoresOffer span {
    display:block;
    padding-top:5px;
    color:#000;
}

span.first-time-only {
    display:block;
    text-align:center;
    font-size:1em;
    font-weight:normal;
    margin:0 9px 0 0;
    color:#888;
}

#spotify {
    padding-top:25px;
}

#spotify iframe {
    background-color:transparent;
}

#banner {}

.banner.fr_FR {
    background:url(../images/banner-fr.jpg);
}
.banner.en_US {
    background:url(../images/banner-en.jpg);
}

#banner h1 {
    display: block;
    width: 480px;
    letter-spacing: .1em;
    font-size: 1.6em;
    font-weight: normal;
    text-align: center;
}

.banner.en_US h1 {

}

header .blog-button {
    display:none;
}

/* Basket */

#basket {
    position: absolute;
    top: 96px;
    right: 12px;
    width: 220px;
    height: 100px;
    background-color: #fff;


    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;

}

#basket .column {
    padding:14px 0 8px 0;
}

#basket .column strong {
    display:block;
    font-weight:normal;
    color:#0e362f;
    text-align:center;
}

#basket .items-number {
    position:absolute;
    left:0;
    right:50%;
    top:0;
    height:100%;
}

#basket .items-number a {
    display:block;
    width:45px;
    height:31px;	/* 52 - (21) */
    padding:21px 6px 0 0;

    background:transparent url(../images/scores_basket_icon.png) no-repeat center center;

    position:absolute;
    left:50%;
    margin-left:-23px;
    top:40px;

    font-size:1.2em;
    font-weight:bold;
    color:#fff;
    text-align:center;
    text-decoration:none;
}

#basket .total {
    position:absolute;
    left:50%;
    right:0;
    top:0;
    height:100%;
}

#basket .total div {
    display:block;
    text-align:center;
    font-size:1.4em;
    font-weight:bold;
    color:#124740;
    padding-top:10px;

}

#basket .total a,
#basket .total a span,
a.scores-button,
a.scores-button span {
    -moz-box-shadow: 0px 0px 3px 0px #ccc;
    -webkit-box-shadow: 0px 0px 3px 0px #ccc;
    -o-box-shadow: 0px 0px 3px 0px #ccc;
    box-shadow: 0px 0px 3px 0px #ccc;

    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;

}

#basket .total a,
a.scores-button {
    display:block;
    width:82px;	/* 84 - (1+1) */
    padding:1px;
    background:#fff;
    margin:6px auto 0 auto;
    cursor:pointer;
}

#basket .total a span,
a.scores-button span {
    display:block;
    height:17px;	/* 20 - (3) */
    padding:3px 0 0 0;

    text-align:center;
    text-transform:uppercase;
    font-size:1em;
    font-weight:bold;
    color:#fff;

    background: #d5af00; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q1YWYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhZDhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #d5af00 0%, #ad8c00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5af00), color-stop(100%,#ad8c00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d5af00 0%,#ad8c00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d5af00 0%,#ad8c00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d5af00 0%,#ad8c00 100%); /* IE10+ */
    background: linear-gradient(top, #d5af00 0%,#ad8c00 100%); /* W3C */
    filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5af00', endColorstr='#ad8c00',GradientType=0 )"; /* IE6-8 */
}

#main .introduction {
    padding-bottom:20px;
    font-weight: normal;
}

#main .introduction a {
    font-weight:bold;
    text-decoration:none;
}

#main div.topScoresHeading {
    font-size:1.8em;
    font-weight: bold;
    padding-left:5px;
}

#legend-button {
    float:right;
    display:block;

    font-size:1.4em;
    color:#333;
    line-height:1em;
    text-decoration:none;
    padding:8px 4px 4px 22px;
    background:transparent url(../images/legend-icon.png) no-repeat left 10px;
    background-size:15px 17px;
    cursor:pointer;

}

#legend-button span {
    display:block;
    font-size:.5em;
}

.difficulty-level {
    width:70px;
}

.difficulty-level span {
    display:block;
    width:53px;
    height:15px;
    background: transparent url(../images/scores_difficulty_level.png) no-repeat;
    margin:0 auto 0 auto;
}

.difficulty-level span.l1 {
    background-position:0 0;
}
.difficulty-level span.l2 {
    background-position:0 -15px;
}
.difficulty-level span.l3 {
    background-position:0 -30px;
}



/* heading-scores-or-score-packs */

ul#heading-scores-or-score-packs {
    padding-bottom:15px;
}

ul#heading-scores-or-score-packs li {
    position:relative;
    display:block;
    float:left;
    width:149px;	/* 298 - (2+2 + 110+35) */
    padding:10px 110px 5px 35px;
    min-height:85px;	/* 94 - (2+2 + 5) */
    margin-right:18px;
    margin-bottom:14px;
    border:2px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

ul#heading-scores-or-score-packs li.right {
    margin-right:0;
}

ul#heading-scores-or-score-packs li input[type=checkbox] {
    position: absolute;
    top: 15px;
    left: 8px;
    -webkit-appearance: checkbox;
}

ul#heading-scores-or-score-packs li a.selectItem {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:30px;
    background-color:transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter:alpha(opacity=20);
    -moz-opacity:0.2;
    -khtml-opacity:0.2;
    opacity:0.2;
    cursor: pointer;
}

ul#heading-scores-or-score-packs li a.showScoreGlimpse,
ul#heading-scores-or-score-packs li a.showScoresList{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:30px;
    background-color:transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter:alpha(opacity=20);
    -moz-opacity:0.2;
    -khtml-opacity:0.2;
    opacity:0.2;
}

ul#heading-scores-or-score-packs li a.selectItem.checked {
    background-color:#aaa;
}

ul#heading-scores-or-score-packs li h2 {
    font-size:1.8em;
    color:#666;
    line-height:1.0em;
    margin-bottom:4px;
}
ul#heading-scores-or-score-packs li h3 {
    font-size:1.2em;
    color:#595959;
    line-height:1.4em;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

ul#heading-scores-or-score-packs li.scorePackEndDisplayItem h3 {
    padding-left: 26px;
    background: transparent url(../images/magnifier.png) no-repeat 0 3px;
    background-size: 21px 13px;
    cursor: pointer;

    -ms-behavior: url(/resources/backgroundsize/backgroundsize.min.htc);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)"; /* IE8 */
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)";   /* IE6 & 7 */
    zoom: 1;
}

ul#heading-scores-or-score-packs li h4 {
    font-size:1.2em;
    color:#ccc;
    line-height:1.2em;
}

ul#heading-scores-or-score-packs li .difficulty-level {
    position:absolute;
    right:0;
    top:12px;
}

ul#heading-scores-or-score-packs li div.prices {
    position:absolute;
    right:8px;
    bottom:8px;
    font-size:2.2em;
    color:#cf9819;
}

ul#heading-scores-or-score-packs li div.prices span {
    display:block;
    text-align:right;
    line-height:1em;
}
ul#heading-scores-or-score-packs li div.prices span.price {
    font-weight:bold;
    background-color:#ff9900;
    background-color:transparent;
}
ul#heading-scores-or-score-packs li div.prices span.pre-discount-price {
    font-size:.6em;
    color:#666666;
    text-decoration:line-through;
    background-color:#ffcc00;
    background-color:transparent;
}













/* Scores searching and list */

#scores-searching {
    min-height:70px;	/* 84 - (14) */
    padding:14px 0 0 0;
    background-color:#cf9819;
    border-bottom:1px solid #fff;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}

#scores-searching .filters, #scores-searching .search-by-title {
    padding-bottom:10px;
}

#scores-searching label,
#scores-searching select,
#scores-searching input,
#scores-searching a.ok {
    float:left;
}

#scores-searching label {
    float:left;
    width:80px;	/* 90 - (10) */
    padding-right:10px;
    background-color:transparent;
    color:#fff;
    text-align:right;
}

#scores-searching select {
    margin-right:10px;
    width:128px;
    border:1px solid #000;
    height:20px;
}

#scores-searching input[type=text] {
    margin-right:10px;
    width:256px;	/* 264 - (4+4) */
    height:18px;
    padding:0 4px 0 4px;
    border:1px solid #000;
}

#scores-searching input[type=button] {
    width:21px;
    height:21px;
    background:transparent url(../images/reset-form.png) no-repeat 0 0;
    background-size:21px 21px;
    cursor:pointer;

}

#artist {
    width:145px;
}

#style {
    width:115px;
}

#difficulty-level {
    width:90px;
}

#scores-searching .search-by-title {
    position:relative;
}

#scores-searching .search-by-title ul {
    position:absolute;
    top:19px;	/* 20 - (1) */
    left:115px;
    right:230px;
    background-color:#000;
    font-size:1em;
    padding:5px 0;
}

#scores-searching .search-by-title ul a {
    display:block;
    padding:2px 6px;
    color:#fff;
    cursor:pointer;
    font-size:.9em;
}















#scores {
    border:0;
    width:100%;
    border-spacing:0px;
    border-collapse:collapse;
}

#scores td {
    height:32px;	/* 40 - (4+4) */
    padding:4px 6px 4px 6px;

    vertical-align:middle;
    font-size:.9em;
    text-align:center;
    color:#3b3b3b
}

#scores tr.alternate {
    background-color:#f8f8f8;
}

#scores thead {
    background-color:#cf9819;
}

#scores thead th {
    color:#fff;
    font-size:1em;
    vertical-align:middle;
    font-weight:normal;
    padding:5px 0;
}

#scores tr {
    border-bottom:1px solid #efefef;
}

#scores .add-to-basket {
    width:22px;
}

#scores td.add-to-basket input[type=checkbox] {
    -webkit-appearance:checkbox;
}

#scores th.title, #scores td.title {
    text-align:left;
}

#scores td.title a {
    text-decoration:none;
    color:#3b3b3b;
}

#scores td.title a:hover {
    border-bottom:1px solid #3b3b3b;
}

#scores .author {
    width:150px;
}

#scores .style {
    width:52px;
}

#scores .prices {
    width:34px;
    font-size:1em;
}

#scores td.prices div.pre-discount-price {
    display:block;
    font-size:.8em;
    color:#888;
    text-decoration:line-through;
}

#scores tbody td.author,
#scores tbody td.price {
    font-weight:bold;
}

#scores tfoot td {
    vertical-align:top;
    text-align:right;
    height:55px;
    padding-top:15px;
}

#scores tfoot td ul {
    padding:0 5px 0 0;
    text-align: center;
}

#scores tfoot td li {
    display: inline;
    font-size:1.2em;
}

#scores tfoot td li a {
    color:#133d37;
    text-decoration:none;
    cursor:pointer;
    padding:0 1px 0 1px;
    margin:0 1px 0 1px;
}

#scores tfoot td li a.arrow {
    font-size:1.0em;
}

#scores tfoot td li span {
    padding:0 1px 0 1px;
}

#scores tfoot td li a:hover,
#scores tfoot td li a.current {
    color:#cf9819;
    border-bottom:1px solid #cf9819;
}

#scores tfoot td li a.current {

}


/* Right column, spotify player, packs */

#right {
    width:310px;
    padding-top:15px;
    background-color:#fff;
}

#right span.heading1,
#right span.heading2 {
    text-align:center;
}

#right span.heading1 {
    display: block;
    color: #cf9819;
    font-size: 1.5em;
    font-weight: bold;
}

#right span.heading2 {
    display:block;
    color:#84651b;
    font-size:1em;
    font-weight: bold;
    padding-bottom:15px;
}

#right iframe {
    width:302px;
    height:380px;
    margin-left:0;
}

#packs {
    width:300px;
    min-height:1015px;
    border:1px solid #e3e3e3;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    -moz-box-shadow: 0px 0px 5px 0px #cccccc;
    -webkit-box-shadow: 0px 0px 5px 0px #cccccc;
    -o-box-shadow: 0px 0px 5px 0px #cccccc;
    box-shadow: 0px 0px 5px 0px #cccccc;

    margin:12px 0 0 0;

}

#packs div.heading {
    height:86px;	/* 108 - (22) */
    padding:22px 28px 0 112px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 22px 15px;

}

#packs div.heading.fr_FR {
    background-image: url(../images/scores_pack_icon_fr.png)
}
#packs div.heading.en_US {
    background-image: url(../images/scores_pack_icon_en.png)
}

#packs div.heading span.heading1,
#packs div.heading span.heading2 {
    text-align:left;
}

#packs div.heading span.heading2 {
    font-size:1.2em;
    margin-top:8px;
    line-height:1.1em;
}

#packs li {
    position:relative;
    background-color:#c2c0c0;
    min-height:20px;
    padding:4px 90px 4px 5px;
    margin-bottom:20px;
}

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

#packs li {display:inline-block;}
/* clearfix in Opera \*/
* html #packs li {height:1%; }
#packs li {display:block;}
/* end clearfix */

#packs li .data {
    display:none;

}

#packs li input[type=checkbox] {
    float:left;
    width:13px;
    height:13px;
    -webkit-appearance:checkbox;
    margin:3px 6px 0 0;
}

#packs li div.name {
    overflow:hidden;
    color:#fff;
    font-size:1.1em;
    font-weight:bold;
    padding-top:1px;
}

#packs li div.name span.artist {
    color:#000;
    text-transform:uppercase;
}

#packs li div.name span.nb {
    display: block;
    padding-left:24px;
    font-weight:normal;
    font-size:.9em;
    color:#595959;
    white-space:nowrap;
    background: transparent url(../images/magnifier.png) no-repeat 0 2px;
    background-size: 18px 11px;

    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    /* IE 5-7 */
    filter: alpha(opacity=60);
    /* Netscape */
    -moz-opacity: 0.6;
    /* Safari 1.x */
    -khtml-opacity: 0.6;
    /* Good browsers */
    opacity: 0.6;

    cursor: pointer;

    -ms-behavior: url(/resources/backgroundsize/backgroundsize.min.htc);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)"; /* IE8 */
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)";   /* IE6 & 7 */
    zoom: 1;
}

#packs li a.view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 20px;
}

#packs li a.prices {
    position:absolute;
    right:4px;
    top:4px;
    padding:2px 10px 0 12px;
    background-color:#fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(/resources/PIE-1.0.0/PIE.php);

    text-align:center;
    font-size:1.3em;
    font-weight:bold;
    color:#000;
    line-height:1.2em;
    cursor:pointer;
}

#packs li a.prices span {
    display:block;
}

#packs li a.prices span.pre-discount-price {
    font-size:.8em;
    color:#888;
    text-decoration:line-through;
    margin-bottom:-2px;
}