/* HTML5 ✰ Boilerplate
* ==|== normalize ==========================================================
TWEAKED FOR MID EAST TUNES DO NOT USE IN ANOTHER PROJECT
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
a { color: #00e; text-decoration: none; border: none}
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
a img, img {boder: none}
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.hidden {display:none}
/* ==|== media queries ====================================================== */
@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
}
/* ==|== print styles ======================================================= */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter:none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
*
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
/*background: red;*/
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
/*background: red;*/
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #dde;
position: relative;
}
.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
/*html[lang=ar] {
}
html[lang=ar] .jspHorizontalBar,
html[lang=ar] .jspDrag
{
left: auto;
right: 0;
}
html[lang=ar] .jspHorizontalBar .jspCap,
html[lang=ar] .jspHorizontalBar .jspDrag,
html[lang=ar] .jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspArrow,
html[lang=ar] .jspCorner
{
float: right;
}*/
/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }
.jcrop-vline, .jcrop-hline
{
font-size: 0px;
position: absolute;
background: white url('/css/libs/Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-vline.right { right: 0px; }
.jcrop-hline.bottom { bottom: 0px; }
.jcrop-handle {
font-size: 1px;
width: 7px !important;
height: 7px !important;
border: 1px #eee solid;
background-color: #333;
}
.jcrop-tracker { width: 100%; height: 100%; }
.custom .jcrop-vline,
.custom .jcrop-hline
{
background: yellow;
}
.custom .jcrop-handle
{
border-color: black;
background-color: #C7BB00;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
@font-face {
font-family: "Icons";
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot);
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot?#iefix) format("eot"), url(/assets/Icons-ed68885b06a155555b7c6296d862ccfd.woff) format("woff"), url(/assets/Icons-81e1ed4c78f4a206c9a369afc3468a8a.ttf) format("truetype"), url(/assets/Icons-1e81fbe7f9dea2acc4d8c46d6cac8cfe.svg#Icons) format("svg"); }
@font-face {
font-family: 'ArialRoundedMT';
src: url(/assets/arialroundedmt-004505963b12637b638fe22807096796.eot);
src: url(/assets/arialroundedmt-004505963b12637b638fe22807096796.eot?#iefix) format("embedded-opentype"), url(/assets/arialroundedmt-c646799925548d7310eb61e4438abb07.woff) format("woff"), url(/assets/arialroundedmt-aae4fd5539c41f9dc00098ed97da5ea2.ttf) format("truetype");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_novathin';
src: url(/assets/proximanova-thin-webfont-c5bc532fd54e5dd5360a7f7f622a6d1f.eot);
src: url(/assets/proximanova-thin-webfont-c5bc532fd54e5dd5360a7f7f622a6d1f.eot?#iefix) format("embedded-opentype"), url(/assets/proximanova-thin-webfont-88b53cea6bd5242b2f570c9af4622b70.woff) format("woff"), url(/assets/proximanova-thin-webfont-0cd1b161734813c47afb7d24d7e6de8b.ttf) format("truetype"), url(/assets/proximanova-thin-webfont-7f1d0ce408fc7a7d6d05896c0b7a4d6e.svg#proxima_novathin) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_nova_semibold';
src: url(/assets/proximanova-sbold-webfont-9ca2587ade9da56983aeefe460f5d789.eot);
src: url(/assets/proximanova-sbold-webfont-9ca2587ade9da56983aeefe460f5d789.eot?#iefix) format("embedded-opentype"), url(/assets/proximanova-sbold-webfont-5d8145686302fb40b682ede95cef1975.woff) format("woff"), url(/assets/proximanova-sbold-webfont-7acf9a9d29072c06a82f1bd35b19be11.ttf) format("truetype"), url(/assets/proximanova-sbold-webfont-4b634205b08d80031794ee0f2efd66d4.svg#proxima_nova_ltsemibold) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_nova_rgregular';
src: url(/assets/proxima_nova_regular-webfont-f5e76da283423aacb2b9eb9b740215dc.eot);
src: url(/assets/proxima_nova_regular-webfont-f5e76da283423aacb2b9eb9b740215dc.eot?#iefix) format("embedded-opentype"), url(/assets/proxima_nova_regular-webfont-7388e16ddb814472d54642fd6c64d943.woff) format("woff"), url(/assets/proxima_nova_regular-webfont-4796c911d60d7d35ee086f5e0133639b.ttf) format("truetype"), url(/assets/proxima_nova_regular-webfont-f4e564eb383e62628a7cf305a433ef19.svg#proxima_nova_rgregular) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'proxima_nova_ltlight';
src: url(/assets/proxima_nova_light-webfont-be1a057c506d02d9c4b8c653d4105a05.eot);
src: url(/assets/proxima_nova_light-webfont-be1a057c506d02d9c4b8c653d4105a05.eot?#iefix) format("embedded-opentype"), url(/assets/proxima_nova_light-webfont-4cd71bc9101612112a8a03355251ff5d.woff) format("woff"), url(/assets/proxima_nova_light-webfont-48c2345f48a83294a5e3699b3e1b12e4.ttf) format("truetype"), url(/assets/proxima_nova_light-webfont-bbf5ed7504150e68b3de23ddee0c5cf4.svg#proxima_nova_ltlight) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'gothambook';
src: url(/assets/gotham-book-webfont-582c14a18d0d32155f89f6af4bb92279.eot);
src: url(/assets/gotham-book-webfont-582c14a18d0d32155f89f6af4bb92279.eot?#iefix) format("embedded-opentype"), url(/assets/gotham-book-webfont-ab2899a5a4ecaa5eb7bf10f18593bd46.woff) format("woff"), url(/assets/gotham-book-webfont-9ecd87ff82ca88b920c73ea149f03fe0.ttf) format("truetype"), url(/assets/gotham-book-webfont-408e8fde6a80aed6da492f45ce4de3ef.svg#gothambook) format("svg");
font-weight: normal;
font-style: normal; }
body {
font-family: Helvetica, Arial; }
/* BUTTONS */
.button.sign-up span,
.listening-room__chat-button {
font-family: 'proxima_nova_semibold'; }
.feat-band-name,
.cell-name,
.mosaic-selected-header .artist-name {
font-family: 'ArialRoundedMT', Helvetica, Arial; }
.now-playing--duration,
.playlist .duration {
font-family: 'proxima_nova_rgregular'; }
.dj-container h2 {
font-family: 'proxima_novathin'; }
.dj-container h1 {
color: rgba(255, 255, 255, 0.5);
font-family: 'gothambook'; }
.playlist .title,
.now-playing--song-name {
font-family: 'proxima_nova_ltlight'; }
.playlist,
.playlist .artist-name {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
/* HEADER */
header {height: 44px; position: relative; z-index: 3; border-bottom-width: 1px}
#main {position: relative; z-index: 0}
.logo-mideast-tunes,
.header-top-nav,
.social-change-link,
.nav-container,
.number-band-track-info {float: left}
.header-user-info {float: right; position: relative;}
.header-user-info img {width: 22px; height: 22px}
/*
.iphone-app-btn {
margin: 8px 10px 0 0;
padding: 7px 10px 8px!important;
height: auto;
display: block;
float: right !important;
}
.button.iphone-app-btn {
border-radius: 2px;
border: 0;
border-top: 1px solid #79adef;
border-bottom: 1px solid #14346e;
font-size: 13px;
line-height: 1.231;
background-clip: padding-box;
background: #447dd2;
background: -moz-linear-gradient(top, #447dd2 0%, #2a5eaa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#447dd2), color-stop(100%,#2a5eaa));
background: -webkit-linear-gradient(top, #447dd2 0%,#2a5eaa 100%);
background: -o-linear-gradient(top, #447dd2 0%,#2a5eaa 100%);
background: -ms-linear-gradient(top, #447dd2 0%,#2a5eaa 100%);
background: linear-gradient(to bottom, #447dd2 0%,#2a5eaa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#447dd2', endColorstr='#2a5eaa',GradientType=0 );
}
*/
.iphone-app-button:hover .tooltip-container-btn {display: block}
.tooltip-container-btn:hover {display:block}
.logo-mideast-tunes {width: 160px; margin: 5px 14px auto 8px}
/* Rich Band Info */
.band-rich-info {visibility: hidden; position: absolute; left:9000px}
/* HEADER: nav */
.nav-container {height: 34px; position: absolute; top: 5px}
.nav-mask {float:left; overflow: hidden}
.nav-twitter .icon {width: 21px; height:16px}
.nav-facebook .icon {width: 11px; height: 17px}
.header-top-nav a {font-size: 12px; margin: 10px 0px 0 15px; float: left; font-weight: bold}
.header-top-nav a:last-child {margin-right: 14px}
.nav-separator {width:2px; height: 34px; float:left}
.nav-latch {width: 20px; height: 34px; float: right}
.nav-latch span {width: 4px; height: 7px; margin: 13px 0 0 7px; float: left}
.social-change-link {margin: 15px 0 0 218px}
/* HEADER: bands-tracks-info */
.number-band-track-info {padding: 7px 22px 0 22px; font-size: 12px; position: absolute; top: 9px; left: 600px}
.number-band-track-info span {margin-bottom: -5px}
.number-band-track-info .number-of-tracks-icon {margin-left: 5px}
.number-band-track-info .icon {display: inline-block}
.number-of-bands-icon {width: 14px; height: 16px}
.number-of-tracks-icon {width: 14px; height: 16px}
/* HEADER user info */
.header-user-info {padding: 8px 11px 0 0}
/* BUTTONS */
.button.lang-change { float: left; margin-top: 7px; margin-left: 10px;}
.button.sign-up {padding: 5px 10px 4px; margin-right: 10px}
.button.sign-up:active {padding: 5px 10px 4px}
.button.sign-up span {font-size: 14px}
.button.user {
padding: 1px 10px 1px 2px;
margin-top: 0 !important;
border: 0;
border-top: 1px solid #58687c !important;
border-bottom: 1px solid #17191d;
border-radius: 3px 0 0 3px !important;
box-shadow: none !important;
}
.button.user:active {padding: 2px 10px 2px 2px}
.button.user img {
border-width: 1px
}
.button.user img {
border: 0;
}
.button.user span {
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #fff;
line-height: 1em;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
letter-spacing: -0.5px;
}
.iphone-app-button .tooltip-container-btn {background: transparent; position: absolute; left: -115px; top: 28px; padding-top: 5px; display:none;}
.mobile-app-tooltip {overflow: hidden; margin: 0; list-style: none; padding: 0px; width: 339px;}
.mobile-app-tooltip li a {width: 169px; height: 64px; display:block; float: left}
.mobile-app-tooltip li .iphone span {width: 123px; height: 38px; display:block; margin: 12px auto 0;}
.mobile-app-tooltip li .android span {width: 133px; height: 36px; display:block; margin: 12px auto 0;}
.white-mic-icon {width: 10px; height: 13px; float:left; margin-right: 5px}
.button.user.have-a-band {border-right: none; min-height: 24px}
.logout {
position: relative;
}
.button.logout,
.button.logout:active {
padding: 7px 8px 8px;
border: 0;
}
.button.user + .logout {margin-right: 5px;}
.logout span {width: 10px; height: 12px}
.logout-tooltip {width: 50px; height: 20px; position: absolute; bottom: -22px; right: 0; display: none}
.logout-container {float: left; position: relative}
.logout-tooltip span {float: left}
.logout-tooltip .icon {width: 100%; height: 100%; padding-top: 4px}
/* Switch */
.lang-switch {
float: right;
margin: 6px 10px 0 0;
padding: 2px;
}
.locale {
display: inline-block;
padding: 3px 7px;
border-width: 1px
}
.locale.active {
border-width: 0
}
.button.my-band {
padding: 8px 10px 6px 10px;
margin-top: -1px;
border-left: 1px solid #17191d;
border-radius: 0px !important;
}
.button.my-band span {
font-size: 11px;
}
header {
background: rgba(52, 59, 69, 0.95);
border-bottom-style: solid;
border-bottom-color: #000;
box-shadow: 0 1px 16px rgba(0, 0, 0, 0.4); }
.social-change-link {
color: #98a1b2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
font-size: 13px;
font-family: proxima_nova_semibold; }
.nav-container {
border-radius: 0 3px 3px 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.5);
background: url(/assets/bg/logo-noise-a9a21e0b89279ed0b2c9f02e94c76236.png) repeat, -webkit-linear-gradient(top, #34373e, #22242b);
background: url(/assets/bg/logo-noise-a9a21e0b89279ed0b2c9f02e94c76236.png) repeat, linear-gradient(to bottom, #34373e, #22242b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#34373e', EndColorStr='#22242b');
/* ie */ }
.mobile-splash-screen {
display: none;
position: absolute;
height: 100%;
width: 100%;
color: #fff;
background: rgba(52, 59, 69, 0.99);
z-index: 10000;
padding-top: 10px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.75); }
.mobile-splash-screen .splash-header {
display: block;
padding-left: 11px;
padding-right: 11px;
text-align: center;
font-size: 17px; }
.mobile-splash-screen .splash-app-icon,
.mobile-splash-screen .js-app-link,
.mobile-splash-screen .js-close-splash,
.mobile-splash-screen .splash-full-app {
display: block;
margin: 0 auto;
text-align: center; }
.mobile-splash-screen .splash-app-icon {
width: 70%;
height: 10%; }
.mobile-splash-screen .js-app-link {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
float: initial;
width: 50%;
margin-top: 10px;
background: #386991;
color: #d6d8da;
padding: 6px 0;
font-size: 1.7em; }
.mobile-splash-screen .js-app-link:hover,
.mobile-splash-screen .js-app-link:active {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; }
.mobile-splash-screen .js-app-link:visited {
color: #3597eb; }
.mobile-splash-screen .js-close-splash {
margin-top: 10px;
margin-bottom: 10px; }
.mobile-splash-screen .splash-full-app {
height: 70%; }
.iphone-add,
.android-add {
position: fixed;
padding: 0;
height: 40px;
width: 100%;
border-top: 1px solid #9794bd;
background: #477ecb;
background: -webkit-linear-gradient(top, #477ecb 0%, #2d5da5 100%);
background: linear-gradient(to bottom, #477ecb 0%, #2d5da5 100%);
font-size: 12px;
z-index: 11;
bottom: 60px;
display: none; }
.mobile-add-container {
position: relative;
width: 100%;
height: 40px; }
.mobile-add-container .message-container {
float: left;
width: calc(100% - 40px);
height: 40px; }
.mobile-add-container .message-container .mobile-app-icon {
position: absolute;
bottom: 0;
left: 5px;
width: 55px;
height: 45px; }
.mobile-add-container .message-container .message {
float: right;
width: calc(100% - 55px - 5px - 40px);
height: 37px;
padding: 8px 15px 0;
line-height: 13px; }
.mobile-add-container .message-container .message span {
color: #fff;
text-shadow: 0px -1px 0px #14346e;
font-weight: bold;
font-size: 12px; }
.mobile-add-container .close-add-button {
float: right;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
text-align: center;
color: #eff9ff;
background: #3f6eb3;
background: -webkit-linear-gradient(top, #3f6eb3 0%, #274d8b 100%);
background: linear-gradient(to bottom, #3f6eb3 0%, #274d8b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f6eb3', endColorstr='#274d8b', GradientType=0 ); }
.header-top-nav a,
.header-top-nav a:hover,
.header-top-nav a:active,
.header-top-nav a:visited {
color: #acb6bf;
text-shadow: 0 1px 3px #000000; }
.iphone-app-btn {
cursor: pointer;
position: relative; }
.iphone-app-btn .text {
margin: 0 0 0 15px;
font-size: 11px;
font-weight: bold;
color: #fff;
line-height: 1em;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
letter-spacing: -0.5px;
float: left; }
.iphone-app-btn .phone-icon {
margin: 0;
height: 100%;
width: 24px;
position: absolute;
left: 0;
top: 0;
display: block;
float: left;
background-color: transparent;
background: url(/assets/iphone-ico-7cda4428c915a704749278cefe0c2c7d.png) no-repeat;
background-position: 50% 50%;
border-radius: 0;
border-style: solid;
border-color: #3b414a;
border: 0; }
.button.iphone-app-btn {
border-radius: 2px;
border: 0;
border-top: 1px solid #79adef;
border-bottom: 1px solid #14346e;
font-size: 13px;
line-height: 1.231;
background-clip: padding-box;
background: #447dd2;
background: -webkit-linear-gradient(top, #447dd2 0%, #2a5eaa 100%);
background: linear-gradient(to bottom, #447dd2 0%, #2a5eaa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#447dd2', endColorstr='#2a5eaa',GradientType=0 ); }
.button.iphone-app-btn:hover,
.button.iphone-app-btn:active {
border-color: #79adef #387cd9 #22262B;
border-style: solid;
background: #447dd2;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#22FFFFFF', EndColorStr='#33000000'); }
/* Show hide function */
.nav-container,
.nav-mask {
-webkit-transition: width 0.25s cubic-bezier(0, 0, 0.01, 1.41);
transition: width 0.25s cubic-bezier(0, 0, 0.01, 1.41); }
.nav-twitter .icon {
background-position: -160px -340px; }
.nav-facebook .icon {
background-position: -160px -360px; }
/* HEADER: number-band-track-info */
.number-band-track-info {
font-weight: bold;
color: #737780;
text-shadow: 0 1px 3px #000000;
border-radius: 12px;
box-shadow: inset 0 3px 1px rgba(0, 0, 0, 0.2); }
.number-band-track-info span {
color: #a1a7b2; }
/* BUTTONS */
.mobile-app-tooltip li .iphone {
border-radius: 3px 0 0 3px;
background-color: #ebf0f7;
background-image: -webkit-linear-gradient(top, #eef2f8, #e6ecf5);
background-image: linear-gradient(to bottom, #eef2f8, #e6ecf5);
box-shadow: inset 0 1px 0 #ffffff; }
.mobile-app-tooltip li .iphone:hover {
background-color: #dce5ef;
background-image: -webkit-linear-gradient(top, #dce5ef, #dce5ef);
background-image: linear-gradient(to bottom, #dce5ef, #dce5ef); }
.mobile-app-tooltip li .android {
border-radius: 0 3px 3px 0;
background-color: #535967;
background-image: -webkit-linear-gradient(top, #656a78, #414754);
background-image: linear-gradient(to bottom, #656a78, #414754);
box-shadow: inset 0 1px 0 #848993; }
.mobile-app-tooltip li .android:hover {
background-color: #535967;
background-image: -webkit-linear-gradient(top, #656a78, #656a78);
background-image: linear-gradient(to bottom, #656a78, #656a78); }
.button.lang-change {
text-transform: uppercase;
color: #B8BECC;
border-color: #717782 #4E5661 #22262B;
border-style: solid;
background-clip: padding-box;
box-shadow: none;
background-image: -webkit-linear-gradient(top, #525a66, #444c57);
background-image: linear-gradient(to bottom, #525a66, #444c57);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#525a66', EndColorStr='#444c57');
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.button.lang-change:hover {
color: #DFE3EB;
border-color: #717782 #4E5661 #22262B;
border-style: solid;
background-clip: padding-box;
box-shadow: none;
background-image: -webkit-linear-gradient(top, #78808f, #586270);
background-image: linear-gradient(to bottom, #78808f, #586270);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#78808f', EndColorStr='#586270'); }
.button.lang-change:active {
color: #fff;
border-color: #4E5661 #22262B #717782;
border-style: solid;
background-clip: padding-box;
box-shadow: none;
background-image: -webkit-linear-gradient(top, #444c57, #626975);
background-image: linear-gradient(to bottom, #444c57, #626975);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444C57', EndColorStr='#626975'); }
.mobile-app-tooltip li .iphone span {
background: url(/assets/iphone-app-4c31d7bcd57112bdc9dddca7686b92d3.png) no-repeat; }
.mobile-app-tooltip li .android span {
background: url(/assets/android-app-4ca11a818718ea5a804d70bb0d28170a.png) no-repeat; }
.button.login {
padding: 4px 10px 6px;
border: 0;
border-top: 1px solid #93a5b3;
border-bottom: 1px solid #17191d;
background-color: #525a66; }
.button.login:hover {
background-color: #3d444c;
border-color: #717782 #4e5661 #22262b; }
.button.login span {
color: #b8c0cc; }
.button.user.prev-logout {
border-right: none;
border-radius: 0; }
.button.logout {
-webkit-border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.logout span {
background-position: -60px -380px; }
.logout-tooltip .icon {
text-align: center;
color: #333;
font-size: 10px;
background-color: #d3d7dd !important;
background-image: none !important;
height: 15px !important;
border: 1px solid #d3d7de;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; }
/* Switch */
.button.locale,
.button.locale:visited {
background-color: #525A66;
padding: 5px 10px 4px;
border-color: #717782 #4E5661 #22262B; }
.button.locale:hover {
background-color: #3d444c;
border-color: #717782 #4e5661 #22262b; }
.button.locale span {
color: #b8c0cc; }
.locale.ar {
font-family: Tahoma, Verdana, Segoe, sans-serif; }
.button.login span,
.button.sign-up span,
.button.iphone-app-btn .text,
.button.user span,
.button.my-band span {
font-size: 11px;
font-weight: bold;
color: #fff;
line-height: 1em;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
letter-spacing: -0.5px; }
.button.login,
.button.sign-up,
.button.iphone-app-btn,
.button.user {
border-radius: 3px; }
.mob-header-user-details {
float: left;
margin-left: 5px; }
/* nev-navbar */
.nav-admin-wrapper {
padding: 9px 10px 5px;
float: right;
display: inline-block;
zoom: 1; }
.nav-admin-wrapper:before,
.nav-admin-wrapper:after,
.lang-switch:before,
.lang-switch:after,
.header-user-info:before,
.header-user-info:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.nav-admin-wrapper:after,
.lang-switch:after,
.header-user-info:after {
clear: both; }
.lang-switch,
.header-user-info {
margin: 0 !important;
padding: 0 !important; }
.lang-switch,
.header-user-info {
float: left; }
.nav-admin-wrapper a {
text-decoration: none;
display: inline-block; }
.butn {
font-size: 11px;
padding: 7px 12px;
float: left;
border-width: 1px;
border-style: solid;
background-clip: padding-box;
border-radius: 3px;
color: #fff;
margin-left: 8px;
position: relative;
line-height: 1; }
.ar .header-user-info .butn.sign-up {
float: right; }
.butn span {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.butn.locale.ar {
padding: 5px 12px 8px;
font-size: 12px; }
a.butn-grey {
color: #dee4ec;
border: 0;
border-top: 1px solid #acacac;
border-bottom: 1px solid #17191d;
background: #616c7b;
/* Old browsers */
background: -webkit-linear-gradient(top, #6c7989 0%, #616c7b 100%);
background: linear-gradient(to bottom, #6c7989 0%, #616c7b 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7989', endColorstr='#616c7b',GradientType=0 );
/* IE6-9 */ }
a.butn-grey:hover {
color: #dee4ec;
background: #5b626c;
border-color: #717782 #4e5661 #22262b; }
a.butn-grey:visited {
color: #dee4ec !important; }
a.butn-grey:active {
color: #dee4ec !important;
background: #6c7989;
/* Old browsers */
background: -webkit-linear-gradient(top, #616c7b 0%, #6c7989 100%);
background: linear-gradient(to bottom, #616c7b 0%, #6c7989 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#616c7b', endColorstr='#6c7989',GradientType=0 );
/* IE6-9 */ }
a.butn-blue,
.iphone-app-button {
color: #fff;
border: 0;
border-top: 1px solid #79adef;
border-bottom: 1px solid #14346e;
background: #295da9;
/* Old browsers */
background: -webkit-linear-gradient(top, #447dd2 0%, #295da9 100%);
background: linear-gradient(to bottom, #447dd2 0%, #295da9 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#447dd2', endColorstr='#295da9',GradientType=0 );
/* IE6-9 */ }
a.butn-blue:hover,
a.butn-blue:visited,
.iphone-app-button:hover,
.iphone-app-button:visited {
color: #fff !important;
background: #447dd2;
border-color: #79adef #387cd9 #2C60AD; }
a.butn-blue:active,
.iphone-app-button:active {
color: #fff;
background: #447dd2;
/* Old browsers */
background: -webkit-linear-gradient(top, #295da9 0%, #447dd2 100%);
background: linear-gradient(to bottom, #295da9 0%, #447dd2 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#447dd2', endColorstr='#447dd2',GradientType=0 );
/* IE6-9 */ }
.iphone-app-button {
cursor: pointer;
padding-left: 30px; }
.iphone-app-button .phone-icon {
margin: 0;
height: 100%;
width: 24px;
position: absolute;
left: 3px;
top: -1px;
display: block;
background-color: transparent;
background: url(/assets/iphone-ico-7cda4428c915a704749278cefe0c2c7d.png) no-repeat center;
background-position: 50% 50%;
background-size: 9px 16px; }
a.butn-radio {
padding-left: 30px; }
a.butn-radio .radio-icon {
margin: 0;
height: 100%;
width: 20px;
height: 20px;
position: absolute;
left: 4px;
top: 2px;
display: block;
background-color: transparent;
background: url(/assets/met-radio-ico-67f5b221f034258893dbccf58dbd7981.png) no-repeat center; }
.have-a-band {
margin-left: 8px; }
.ar .nav-admin-wrapper {
float: left; }
.ar .lang-switch,
.ar .header-user-info {
float: right !important; }
.ar .iphone-app-button {
margin-right: 0;
float: right; }
.ar .have-a-band {
margin-left: 0; }
.ar .butn-radio {
float: right; }
/* FEATURE: Container */
.feat-container {
width: 100%;
height: 400px;
position: relative;
overflow: hidden; }
/* New Slider Styles */
.feat-sliders-container {
margin: 0;
padding: 0;
list-style: none;
height: 100%;
width: 100%; }
.feat-slide-container {
height: 100%;
display: block;
float: left;
width: 100%; }
.feat-col {
min-width: 245px;
height: 100%;
float: left; }
.feat-primary-col {
width: 50%; }
.feat-secondary-col {
width: 25%; }
.feat-item {
width: 100%;
height: 100%;
position: relative; }
.feat-item .noise {
width: 100%;
height: 100%; }
.feat-item:before {
position: absolute;
height: 75%;
width: 100%;
left: 0;
bottom: 0; }
.feat-item-session-live:after {
position: absolute;
height: 11px;
width: 100%;
bottom: 0;
left: 0; }
.feat-item-session-live:only-child .feat-item-details,
.feat-item-session-live + .feat-item-session-live .feat-item-details {
bottom: 30px; }
.feat-item-session-live:only-child:after,
.feat-item-session-live + .feat-item-session-live:after {
bottom: 15px; }
.feat-col-two-items .feat-item {
height: 50%; }
.feat-item-details {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 0 5%; }
.feat-item-artist .feat-item-details {
padding-bottom: 25px;
bottom: 0; }
.feat-item-artist + .feat-item-artist .feat-item-details {
padding-bottom: 40px; }
/*.feat-item:only-child .feat-item-details,
.feat-item + .feat-item .feat-item-details {bottom: 15px}*/
.feat-item-type {
font-size: 11px;
margin: 0 0 10px;
line-height: 12px;
position: relative; }
.feat-item-type a {
color: #b8c0cc; }
.feat-item-type a:hover, .feat-item-type a:visited, .feat-item-type a:focus {
color: #b8c0cc; }
.feat-item-session .feat-item-type {
padding: 0 0 0 19px; }
.feat-item-session .feat-item-type:before {
width: 10px;
height: 12px;
display: block;
position: absolute;
top: -2px;
left: 0; }
.feat-item-label {
font-size: 30px;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 0 6px;
line-height: 1;
overflow: hidden; }
.feat-item-label a {
color: #e3e3e3; }
.feat-item-label a:hover, .feat-item-label a:visited, .feat-item-label a:focus {
color: #e3e3e3; }
.feat-item-artist .feat-item-label {
cursor: pointer; }
.feat-col-two-items .feat-item-label {
font-size: 24px; }
.feat-item-detail-list,
.feat-item-buttons {
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
list-style: none;
overflow: hidden;
white-space: nowrap; }
.feat-item-detail-list li {
display: inline-block;
padding: 0 10px 0 0;
position: relative;
margin-bottom: 3px;
top: -5px; }
.feat-item-detail-list li:first-child {
padding: 0 10px 0 0;
margin-bottom: 0;
top: 0; }
.feat-item-detail-list li,
.feat-item-detail-list li.listeners {
padding-left: 0;
top: -3px; }
.feat-item-detail-list li:not(:first-child):before {
width: 1px;
height: 18px;
display: block;
position: absolute;
top: 0;
left: 0; }
.feat-item-detail-list p {
margin: 0;
line-height: 18px;
display: inline-block; }
.feat-item-detail-list .feat-play-all {
display: inline-block;
vertical-align: -2px; }
.feat-item-detail-list .feat-play-all .play-icon {
margin: 6px 0 0 8px;
width: 6px;
height: 8px; }
.feat-item-buttons li {
float: left;
display: block;
cursor: pointer;
margin-right: 3px; }
.feat-item-buttons li:first-child {
margin-right: 11px; }
.feat-item-buttons .button {
padding: 0 7px;
line-height: 20px;
cursor: pointer;
margin-bottom: 2px; }
.feat-item-buttons .social-button {
display: block;
width: 21px;
height: 21px; }
.feat-item-buttons .social-button .icon {
display: block; }
.icon-twitter {
width: 13px;
height: 9px;
margin: 6px 0 0 4px; }
.icon-facebook {
width: 5px;
height: 11px;
margin: 5px 0 0 8px; }
/* End Slider Styles */
.feat-band {
position: relative; }
.feat-pic {
width: 100%;
height: 400px;
position: absolute;
display: none; }
.feat-data {
width: 500px;
position: absolute;
top: 225px;
display: none; }
.event-slide {
top: 146px; }
.feat-controls {
margin: 0 15px 20px 0; }
.feat-play-all,
.feat-tracklist {
width: 20px;
height: 20px;
display: block; }
.feat-band-meta {
margin-top: 6px; }
.feat-band-meta span {
vertical-align: middle; }
.feat-band-name {
font-size: 28px;
line-height: 25px; }
.play-icon {
width: 11px;
height: 15px;
margin: 4px 0 0 6px; }
.tracklist-icon {
width: 17px;
height: 12px;
margin: 6px 0 0 3px; }
.solid-music-icon,
.location-icon {
width: 14px;
height: 18px;
display: inline-block;
margin-right: -2px; }
.location-icon {
margin-left: 10px; }
.event-calendar,
.event-clock {
width: 16px;
height: 18px;
display: inline-block;
margin-right: -2px; }
.event-clock {
margin-left: 10px; }
.headphone-item {
width: 18px;
height: 18px;
display: inline-block;
margin: 6px 6px 0 0; }
/* FEATURE: Prev Next Btns */
.feat-prev-band,
.feat-next-band {
z-index: 9999;
width: 26px;
height: 55px;
display: block;
position: absolute;
top: 172px; }
.feature-next-icon {
width: 10px;
height: 16px;
margin: 19px 0 0 9px; }
.feature-prev-icon {
width: 10px;
height: 16px;
margin: 19px 0 0 7px; }
.feat-prev-band {
left: 0; }
.feat-next-band {
right: 0; }
.feat-collapse {
width: 100%;
height: 15px;
position: absolute;
z-index: 9999;
bottom: 0;
display: block;
text-align: center; }
.feat-collapse-content {
width: 130px;
margin: -2px auto 0; }
.feat-latch-expanded {
width: 9px;
height: 6px;
display: inline-block;
margin: 6px auto;
float: none !important; }
.feat-latch-expanded.collapsed {
width: 9px;
height: 6px;
display: inline-block;
margin: 6px auto;
float: left !important; }
.feat-collapse-notice {
display: none;
margin-top: 4px;
font-size: 11px;
float: left;
margin-left: 5px; }
.feat-artist-tracks {
width: 330px;
position: absolute;
top: 325px;
left: 9.3%;
z-index: 2;
display: none; }
.feat-artist-tracks .track-list-scroll-container {
max-height: 230px;
border-width: 1px; }
/* max-height is needed by the scroll bar script*/
.feat-artist-tracks:before {
width: 12px;
height: 7px;
top: -6px;
left: 16px;
content: ".";
display: block;
position: absolute; }
/* EVENT SLIDE */
.playlist-session {
font-size: 14px; }
.featured-event-btn {
display: block;
height: 32px;
padding: 0 11px;
line-height: 32px;
font-size: 15px;
float: left;
border-width: 1px;
margin-top: 10px; }
.feat-item-artist .feat-item-detail-list li:nth-child(3):before {
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -21px -570px;
width: 10px;
height: 12px;
content: "";
top: 2px;
margin-right: 3px;
display: inline-block;
position: relative; }
.feat-item-artist .feat-item-detail-list li:nth-child(2):before {
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -1px -570px;
width: 10px;
height: 12px;
content: "";
top: 2px;
margin-right: 3px;
display: inline-block;
position: relative; }
.feat-item-detail-list p {
font-weight: bold; }
.feat-secondary-col .metradio-logo,
.feat-secondary-col .metradio-logo-anim {
top: 25px; }
.metradio-feat-item:before {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: 100;
opacity: 0.6;
content: '';
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(82, 8, 106, 0)), color-stop(100%, rgba(90, 154, 232, 0.5)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(82, 8, 106, 0) 0, rgba(90, 154, 232, 0.5) 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: linear-gradient(to bottom, rgba(82, 8, 106, 0) 0, rgba(90, 154, 232, 0.5) 100%);
/* W3C */
height: 70%; }
.metradio-feat-item:after {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
position: absolute;
width: 100%;
height: 100%;
background: rgba(82, 8, 106, 0.45);
top: 0;
left: 0;
content: '';
display: block; }
.feat-item-details {
z-index: 300; }
.overlay {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
top: 0;
left: 0;
content: '';
display: block; }
.metradio-logo,
.metradio-logo-anim {
position: absolute;
z-index: 300;
bottom: 25px;
right: 50px;
width: 71px;
height: 71px; }
.metradio-logo .metradio-svg,
.metradio-logo-anim .metradio-svg {
display: none; }
.metradio-logo-anim {
width: 70px;
height: 70px; }
.m-wrapper {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 27px;
height: 24px; }
.ring {
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-animation: pulse 8s ease-out infinite;
animation: pulse 8s ease-out infinite; }
.ring.ring-2 {
-webkit-animation-delay: 2000ms;
animation-delay: 2000ms; }
.ring.ring-3 {
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms; }
.ring.ring-4 {
-webkit-animation-delay: 6000ms;
animation-delay: 6000ms; }
.metradio-listen-now {
margin: 0; }
.metradio-listen-now:visited, .metradio-listen-now:hover, .metradio-listen-now:focus {
color: #fff; }
feat-item:hover .overlay {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
top: 0;
left: 0;
content: '';
display: block; }
@media screen and (min-width: 768px) and (max-width: 960px) {
.metradio-logo,
.metradio-logo-anim {
bottom: auto;
top: 20px;
left: 5%; } }
@media screen and (max-width: 500px) {
.metradio-logo,
.metradio-logo-anim {
bottom: auto;
top: 20px;
left: 5%; } }
.ie9 .metradio-feat-item .metradio-logo .metradio-svg {
display: block; }
.ie9 .metradio-feat-item .metradio-logo-anim {
display: none; }
@-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 4px #5eb9e6;
-webkit-transform: scale(0.58);
transform: scale(0.58);
opacity: 0; }
25% {
box-shadow: 0 0 0 3px rgba(94, 185, 230, 0.66);
opacity: 1; }
50% {
box-shadow: 0 0 0 2px rgba(94, 185, 230, 0.33); }
100% {
box-shadow: 0 0 0 1px rgba(94, 185, 230, 0);
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes pulse {
0% {
box-shadow: 0 0 0 4px #5eb9e6;
-webkit-transform: scale(0.58);
transform: scale(0.58);
opacity: 0; }
25% {
box-shadow: 0 0 0 3px rgba(94, 185, 230, 0.66);
opacity: 1; }
50% {
box-shadow: 0 0 0 2px rgba(94, 185, 230, 0.33); }
100% {
box-shadow: 0 0 0 1px rgba(94, 185, 230, 0);
-webkit-transform: scale(1);
transform: scale(1); } }
/* FEATURED Container*/
.feat-pic {
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat; }
.feat-data {
color: #b8c0cc; }
.feat-band-name {
color: #ffffff;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 -2px 2px rgba(0, 0, 0, 0.7), 2px 0 2px rgba(0, 0, 0, 0.7), -2px 0 2px rgba(0, 0, 0, 0.7); }
.feat-bio,
.feat-band-meta {
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.7), 0 -1px 1px rgba(0, 0, 0, 0.7), 1px 0 1px rgba(0, 0, 0, 0.7), -1px 0 1px rgba(0, 0, 0, 0.7); }
.feat-band-meta {
text-transform: capitalize; }
/* New Slider Styles */
.feat-item {
background-size: cover;
background-position: 50% 0; }
.feat-item .noise {
background: url(/assets/bg/featured-noise-0af48e3ac364d3491b0b711dc5f23d62.png); }
.feat-item:before {
content: "";
background-image: -webkit-linear-gradient(top, transparent, black);
background-image: linear-gradient(to bottom, transparent, black); }
.feat-item-session-live:after {
content: "";
background: url(/assets/bg/equalizer-00400323ff2560edbdbd68a6b5be2f28.png) repeat-x 50% 0; }
.feat-item-type {
color: #b8c0cc;
font-weight: bold;
text-transform: uppercase; }
.feat-item-session .feat-item-type:before {
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -320px -360px;
content: ""; }
.feat-item-label {
color: #e3e3e3;
font-family: proxima_nova_semibold; }
.feat-item-detail-list {
color: #b8becc; }
.feat-item-detail-list li:not(:first-child):before {
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -300px -360px;
content: ""; }
.feat-item-detail-list .feat-play-all {
border-radius: 2px; }
.feat-item-detail-list .feat-play-all .play-icon {
background-position: -400px -360px; }
.feat-item-buttons .button {
color: #e6eaf2; }
.feat-item-buttons .social-button {
border-radius: 11px; }
.feat-item-buttons .social-button:hover {
background-color: #1f1f1f; }
.feat-item-buttons .social-button:active {
background-color: #fff; }
.icon-twitter {
background-position: -320px -380px; }
.icon-facebook {
background-position: -360px -380px; }
.feat-item-buttons .social-button:hover .icon-twitter {
background-position: -340px -380px; }
.feat-item-buttons .social-button:hover .icon-facebook {
background-position: -380px -380px; }
/* End Slider Styles */
.feat-play-all,
.feat-tracklist,
.feat-play-all:hover,
.feat-tracklist:hover {
background-color: #3373d2;
border-color: #79adef #387cd9 #2C60AD;
border-style: solid;
border-width: 1px;
background-clip: padding-box;
border-radius: 3px;
box-shadow: none;
background: #447dd2;
background: -webkit-linear-gradient(top, #447dd2 0%, #2a5eaa 100%);
background: linear-gradient(to bottom, #447dd2 0%, #2a5eaa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#447dd2', endColorstr='#2a5eaa',GradientType=0 ); }
.feat-tracklist:hover .tracklist-icon {
background-position: -40px -360px; }
.feat-play-all:active,
.feat-tracklist:active {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), transparent);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dde2e8', EndColorStr='#d4dae2');
/* ie */ }
.feat-play-all:active .play-icon {
background-position: -20px -360px; }
.feat-tracklist:active .tracklist-icon {
background-position: -60px -360px; }
.feat-play-all {
border-radius: 2px 2px 0 0; }
.feat-tracklist {
border-radius: 0 0 2px 2px; }
.feat-prev-band,
.feat-next-band {
background-image: -webkit-linear-gradient(top, rgba(68, 73, 84, 0.9), rgba(38, 42, 51, 0.9));
background-image: linear-gradient(to bottom, rgba(68, 73, 84, 0.9), rgba(38, 42, 51, 0.9));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EE909090', EndColorStr='#EE505050'); }
.feat-next-band {
box-shadow: inset 0 1px 0 #626d7a, inset 0 -1px 0 #050507, inset 1px 0 0 #2a363f; }
.feat-prev-band {
box-shadow: inset 0 1px 0 #626d7a, inset 0 -1px 0 #050507, inset -1px 0 0 #2a363f; }
.feat-prev-band:hover,
.feat-next-band:hover {
background-image: -webkit-linear-gradient(top, #565f6c, #353c48);
background-image: linear-gradient(to bottom, #565f6c, #353c48);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#565f6c', EndColorStr='#353c48'); }
.feat-prev-band:hover .feature-prev-icon {
background-position: -220px -360px; }
.feat-next-band:hover .feature-next-icon {
background-position: -220px -380px; }
.feat-prev-band:active,
.feat-next-band:active {
background-image: -webkit-linear-gradient(top, #697484, #455060);
background-image: linear-gradient(to bottom, #697484, #455060);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#697484', EndColorStr='#455060'); }
.feat-prev-band {
border-radius: 0 2px 2px 0; }
.feat-next-band {
border-radius: 2px 0 0 2px; }
.feat-collapse {
background-image: -webkit-linear-gradient(top, rgba(45, 48, 50, 0.9), rgba(29, 30, 32, 0.9));
background-image: linear-gradient(to bottom, rgba(45, 48, 50, 0.9), rgba(29, 30, 32, 0.9));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EE2d3032', EndColorStr='#EE1d1e20');
box-shadow: inset 0 1px 0 #494c4e, inset 0 -1px 0 #232426; }
.feat-collapse:hover {
background-image: -webkit-linear-gradient(top, #2d3032, #1d1e20);
background-image: linear-gradient(to bottom, #2d3032, #1d1e20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF2d3032', EndColorStr='#FF1d1e20'); }
.feat-collapse:active {
background-image: -webkit-linear-gradient(top, rgba(45, 48, 50, 0.9), rgba(29, 30, 32, 0.9));
background-image: linear-gradient(to bottom, rgba(45, 48, 50, 0.9), rgba(29, 30, 32, 0.9));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EE2d3032', EndColorStr='#EE1d1e20'); }
.feat-collapse-notice {
color: #a1a8b2; }
.feat-artist-tracks {
box-shadow: 0 0 5px 1px #000000; }
.feat-artist-tracks .track-list-scroll-container {
background-color: #e6ebf2;
border-style: solid;
border-color: #ffffff;
border-radius: 3px; }
.feat-artist-tracks:before {
color: transparent;
background: transparent url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) -80px -60px; }
.feat-artist-tracks .track-list li:first-child {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
.feat-artist-tracks .track-list li:last-child {
box-shadow: inset 0 1px 0 white; }
.feat-artist-tracks .track-list li:hover {
background-color: #eef1f6; }
.feat-artist-tracks .track-list li:active {
background-color: #e4e9f1; }
/* EVENT SLIDE */
.playlist-session {
color: #e3e3e3; }
.featured-event-btn {
color: #FFF;
text-shadow: 0 -1px 0 #000;
border-style: solid;
border-color: rgba(0, 0, 0, 0.39);
background-color: #3373cc;
background-image: -webkit-linear-gradient(top, #4c89d5, #255cbd);
background-image: linear-gradient(to bottom, #4c89d5, #255cbd);
border-radius: 3px;
box-shadow: inset 1px 0 0 0 #4881d1, inset -1px 0 0 0 #4881d1, inset 0 1px 0 0 #9ebfe9, inset 0 -1px 0 0 #396cc3; }
.featured-event-btn:visited {
color: #FFF; }
.featured-event-btn:hover {
color: #FFF;
background-image: -webkit-linear-gradient(top, #4c89d5, #4780c7);
background-image: linear-gradient(to bottom, #4c89d5, #4780c7); }
/* Misc */
.fleft {float:left}
.fright {float: right}
.center {text-align: center}
/* LAYOUT */
body {
margin-bottom: -13px;
}
#container {min-width: 735px; position: relative}
/* ICONS & sprite reference */
a span.icon {float:left}
/* BUTTONS */
.button {padding: 6px 10px; float:left; border-width: 1px}
.button span {font-size: 13px}
/* Tracklist used in featured and mosaic */
.track-list {margin: 0; padding: 0}
.track-list li {list-style: none; cursor: pointer; cursor: hand}
.feat-artist-tracks .track-name {width: 237px}
.track-name {
min-height: 15px;
padding: 11px 15px 8px 5px;
float:left;
width: 258px
}
.track-heart {
width: 22px;
height: 22px;
margin: 5px 5px 5px 7px;
text-align: center;
float:right;
border-width: 1px;
position: relative;
}
.track-heart > span {display: block}
.heart-icon-0_50 {margin: 9px 0 0 9px; width: 10px; height: 10px}
.heart-icon-50_500 {margin: 5px 0 0 7px; width: 12px; height: 16px}
.heart-icon-500 {margin: 4px 0 0 7px; width: 14px; height: 17px}
/* lightbox overlay */
.lightbox-overlay {width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 3}
/* static pages */
.static-iframe-container {
position: absolute;
width: 100%;
bottom: -2000px;
z-index: 2;
overflow-y: scroll;
overflow-x: hidden;
}
.static-iframe-container > iframe {
width: 100%;
height: 100%;
}
/* modal */
.modal {position: absolute; top: 0; left: 0; z-index: 2}
.modal p {margin: 0; z-index: 2}
.modal .response-message {display: none; font-size: 12px; margin-top: 10px}
.modal.error .response-message.error,
.modal.success .response-message.success {display: block}
.modal-header {height: 40px; position: relative; border-width: 1px; font-size: 15px}
.modal-header p {margin: 12px}
.modal-close-button {width: 20px; height: 20px; position:absolute; top: -8px; right: -8px}
.modal-content {border-bottom-width: 1px}
.modal-content input[type='text'] {color: #52555a; font-size: 14px; border-width: 1px; padding: 7px 10px}
.modal-footer {height: 40px; border-top-width: 1px}
.notify-me-when-live {width: 350px; top: 150px; left: 35%}
.notify-me-when-live .event-subscription {margin: 20px 15px 10px}
.notify-me-when-live input[type='text'] {float: left; margin-right: 10px; padding: 7px 10px; width: 237px}
.notify-me-when-live .button {margin: 0; padding: 6px 12px 7px; text-align: center}
.notify-me-when-live .share-links-container {margin: 10px 15px}
.notify-me-when-live .share-links-container {font-weight: bold; font-size: 12px}
.notify-me-when-live .share-links-container > * {float: left}
.notify-me-when-live .share-links-container span {margin-top: 3px; margin-right: 20px}
.notify-me-when-live .event-selected-share-facebook {width: 52px; height: 20px; margin-right: 4px}
.notify-me-when-live .event-selected-share-twitter {width: 56px; height: 20px; margin-right: 4px}
.notify-me-when-live .event-selected-share-google-plus {width: 32px; height: 20px}
.notify-enable-flash {width: 350px; top: 150px; left: 38%; z-index: 5}
.notify-enable-flash .modal-content {margin: 15px; border-width: 0}
.notify-enable-flash .modal-close-button {width: 25px; height: 25px;}
/* SKIN */
body {
/*background: #000000 image-url('bg/artist-bg.png') repeat;*/
background: #22252b url(/assets/bg/page-bg-ad2042e7e03614da9b964a62909d6281.png) 0 0 repeat;
min-width: 977px; }
body * {
outline: none; }
/* BUTTONS */
.button {
font-family: proxima_nova_semibold;
border-radius: 3px; }
.button,
.button:hover {
border-color: transparent;
border-style: solid;
background-clip: padding-box;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#22FFFFFF', EndColorStr='#33000000'); }
.button:active {
background-image: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.1), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(to bottom, rgba(30, 30, 30, 0.1), rgba(255, 255, 255, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startallStr='#221E1E1E', EndallStr='#33FFFFFF'); }
.button span {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); }
.mosaic-selected-header .button span {
color: #525a66 !important;
text-shadow: none; }
.button.blue {
background-color: #3373d2;
border-color: #79adef #387cd9 #2C60AD; }
.button.blue:hover {
background-color: #3981e5; }
.button.blue span {
color: #e6eaf2; }
.button.gray {
box-shadow: inset 0 1px 0 #526073;
border-bottom: 1px solid #17191d;
background: #3d4654;
background: -webkit-linear-gradient(top, #3d4654 0%, #2f3742 100%);
background: linear-gradient(to bottom, #3d4654 0%, #2f3742 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d4654', endColorstr='#2f3742',GradientType=0 ); }
.button.gray:hover {
background-color: #656c79;
background-image: -webkit-linear-gradient(top, #656c79, #484f5c);
background-image: linear-gradient(to bottom, #656c79, #484f5c);
/* Safari */
-webkit-filter: none;
filter: none; }
.button.gray.active {
background-color: #3c424d;
background-image: -webkit-linear-gradient(top, #3c424d, #474d58);
background-image: linear-gradient(to bottom, #3c424d, #474d58);
/* Safari */
-webkit-filter: none;
filter: none; }
.button.gray > span {
color: #b8becc; }
.button.gray img {
border-color: rgba(0, 0, 0, 0.6);
border-style: solid; }
.button.gray.activeHover {
background-color: #838c99; }
/* Tracklist used in featured and mosaic */
.track-list {
font-weight: bold;
color: #545864;
font-size: 12px; }
.track-list li {
box-shadow: none;
border-bottom: 1px solid #e3e5e8;
border-top: 1px solid #fff; }
.track-list li:first-child {
border-top: 0; }
.track-heart {
border-style: solid;
border-color: transparent #dcdfe4 #9c9ea2 #dcdfe4;
background-image: -webkit-linear-gradient(bottom, #e0e4e8, #f0f2f4);
background-image: linear-gradient(to top, #e0e4e8, #f0f2f4);
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e0e4e8', EndColorStr='#f0f2f4');
background-clip: padding-box;
border-radius: 4px; }
.track-heart:hover {
background-image: -webkit-linear-gradient(bottom, #e3e7ec, #f7f8fa);
background-image: linear-gradient(to top, #e3e7ec, #f7f8fa);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e3e7ec', EndColorStr='#f7f8fa'); }
.track-heart:active {
/*border-color: #4489ea;*/
background-image: -webkit-linear-gradient(top, #e3e7ec, #f7f8fa);
background-image: linear-gradient(to bottom, #e3e7ec, #f7f8fa);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e3e7ec', EndColorStr='#f7f8fa'); }
.track-heart.spinner,
.player-info-heart.spinner {
cursor: wait; }
.player-info-element-heart.active .track-heart.spinner > span,
.player-info-element-heart.active .player-info-heart.spinner > span {
background-image: url(/assets/bg/heart-spinner-6df70202af5da522dde183ae553c3cf8.gif);
background-repeat: no-repeat;
background-position: 0 0 !important; }
.player-info-element-heart.clean .track-heart.spinner > span,
.player-info-element-heart.clean .player-info-heart.spinner > span {
background-image: url(/assets/bg/heart-all-spinner-e30cac6d4ad83611e67080bbe9808b0c.gif);
background-repeat: no-repeat;
background-position: 0 0 !important; }
/* Tracklist: Scrollbars */
.jspVerticalBar {
width: 15px;
border-left: 1px solid #d2d7dd; }
.jspTrack {
background-color: #dbe0e7; }
.jspDrag {
border: 3px solid #dbe0e7;
background-image: -webkit-linear-gradient(left, #fbfcfd, #f1f6fa);
background-image: linear-gradient(to right, #fbfcfd, #f1f6fa);
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fbfcfd', EndColorStr='#f1f6fa');
box-shadow: inset 0 0 0 1px #babfc5;
border-radius: 7px; }
/* lightbox overlay */
.lightbox-overlay {
background-color: rgba(0, 0, 0, 0.7); }
/* static pages */
.static-iframe-container {
background-color: #ffffff; }
/* ICONS & sprite reference */
.icon {
background-color: transparent;
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png); }
.nav-separator {
background-position: 0 0; }
.nav-container .nav-latch span {
background-position: -20px 0; }
/* nav latch */
.nav-container:hover .nav-latch span {
background-position: -40px 0; }
/* nav latch */
.number-of-bands-icon {
background-position: -60px 0; }
.number-of-tracks-icon {
background-position: -80px 0; }
.white-mic-icon {
background-position: -100px 0; }
.play-icon {
background-position: -20px -20px; }
.tracklist-icon {
background-position: -40px -20px; }
.solid-music-icon {
background-position: -100px -20px; }
.location-icon {
background-position: -120px -20px; }
.feat-latch {
background-position: -20px -40px; }
.feat-latch-expanded {
background-position: -20px -40px; }
.feat-latch-expanded.collapsed {
background-position: -40px -40px; }
.grid-display-icon {
background-position: -20px -61px; }
.list-display-icon {
background-position: -60px -61px; }
.active .grid-display-icon {
background-position: 0 -61px; }
.active .list-display-icon {
background-position: -40px -60px; }
.heart-icon-0_50 {
background-position: -140px -60px; }
.heart-icon-50_500 {
background-position: -120px -60px; }
.volume-icon {
background-position: -140px -240px; }
.heart-icon-0 {
background-position: -179px -20px; }
.heart-icon-500 {
background-position: -100px -60px; }
.heart-collection-icon {
background-position: -100px -40px; }
.mosaic-selected-play-icon {
background-position: -140px -160px; }
.player-info-heart .icon {
background-position: -180px -20px; }
.player-info-embed .icon {
background-position: -160px -180px; }
.mosaic-selected-heart-icon {
background-position: -160px -160px; }
.mosaic-selected-info-icon {
background-position: -180px -160px; }
.small-top-arrow-icon {
background-position: -200px -240px; }
.chat-button-icon {
background-position: -220px -160px; }
.chat-button:hover .chat-button-icon {
background-position: -220px -180px; }
.has-messages > .chat-button-icon {
background-position: -220px -200px !important; }
.open .chat-button-icon {
background-position: -220px -220px; }
.open .chat-button:hover .chat-button-icon {
background-position: -220px -240px; }
.mosaic-selected-subscribe-icon {
background-position: -220px -320px; }
.active .mosaic-selected-subscribe-icon {
background-position: -220px -340px; }
.cross-close-icon {
background-position: -478px -181px; }
.mosaic-web-icon {
background-position: -40px -220px; }
.mosaic-twitter-icon {
background-position: -20px -220px; }
.mosaic-facebook-icon {
background-position: 0 -220px; }
.mosaic-selected-share-google-plus {
background-position: -200px -180px; }
.shadowless-music-icon {
background-position: -80px -220px; }
.shadowless-location-icon {
background-position: -100px -220px; }
.photo-icon {
background-position: -40px -240px; }
.blue-mic-icon {
background-position: 0 -40px; }
.clear-pencil {
background-position: -60px -220px; }
.search-icon-gray {
background-position: -200px 0; }
.feature-prev-icon {
background-position: -200px -360px; }
.feature-next-icon {
background-position: -200px -380px; }
.search-icon-focus {
background-position: -220px 0; }
.cancel-search-icon {
background-position: -80px -240px; }
.black-note-icon {
background-position: -20px -380px; }
.event-calendar {
background-position: -200px -319px; }
.event-clock {
background-position: -200px -339px; }
.headphone-item {
background-position: -238px -319px; }
.gear-icon {
background-position: -240px -360px; }
.radio-icon {
background-position: -240px -380px; }
.chat-onboarding-underline {
background-position: -380px -60px; }
.chat-onboarding-arrow {
background-position: -520px -60px; }
/* flags */
.flag {
background-color: transparent;
background-image: url(/assets/bg/sprites/flag_sprite-4c34e1320c5db1967115464c59f7ce6c.png);
background-repeat: no-repeat;
display: inline-block;
position: relative; }
.flag.afghanistan {
background-position: 0 0; }
.flag.algeria {
background-position: 0 -11px; }
.flag.bahrain {
background-position: 0 -22px; }
.flag.egypt {
background-position: 0 -33px; }
.flag.iran {
background-position: 0 -44px; }
.flag.iraq {
background-position: 0 -55px; }
.flag.jordan {
background-position: 0 -66px; }
.flag.kurdistan {
background-position: 0 -77px; }
.flag.kuwait {
background-position: 0 -88px; }
.flag.lebanon {
background-position: 0 -99px; }
.flag.lybia {
background-position: 0 -110px; }
.flag.libya {
background-position: 0 -110px; }
.flag.mauritania {
background-position: 0 -121px; }
.flag.morocco {
background-position: 0 -132px; }
.flag.oman {
background-position: 0 -143px; }
.flag.pakistan {
background-position: 0 -154px; }
.flag.palestine {
background-position: 0 -165px; }
.flag.qatar {
background-position: 0 -176px; }
.flag.saudi_arabia {
background-position: 0 -187px; }
.flag.somalia {
background-position: 0 -198px; }
.flag.sudan {
background-position: 0 -209px; }
.flag.syria {
background-position: 0 -220px; }
.flag.tunisia {
background-position: 0 -231px; }
.flag.turkey {
background-position: 0 -242px; }
.flag.unaffiliated {
background-position: 0 -253px; }
.flag.united_arab_emirates {
background-position: 0 -264px; }
.flag.united_states {
background-position: 0 -275px; }
.flag.yemen {
background-position: 0 -286px; }
.modal {
background-color: #edf1f5;
border-radius: 3px; }
.modal.error input[type="text"] {
border-color: #eb6967; }
.modal.error .response-message {
color: #ea0b00; }
.modal.success input[type="text"] {
border-color: #86d083; }
.modal.success .response-message {
color: #158000; }
.modal-header {
background-color: #292d33;
color: #e3e3e3;
font-family: 'proxima_nova_rgregular';
border-style: solid;
border-top-color: #52555a;
border-left-color: #25282d;
border-right-color: #23262b;
border-bottom-color: #050506;
border-radius: 3px 3px 0 0; }
.modal-header .event-name {
color: #b8d3fa; }
.modal-close-button {
border-radius: 10px;
background-image: -webkit-linear-gradient(top, #4f565f, #30363e);
background-image: linear-gradient(to bottom, #4f565f, #30363e);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 2px 0 rgba(0, 0, 0, 0.5); }
.modal-content {
border-bottom-color: #ced2d9;
border-bottom-style: solid; }
.modal-content input[type='text'] {
border-style: solid;
border-color: rgba(38, 42, 48, 0.3);
border-radius: 3px;
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); }
.modal-footer {
border-top-color: #fafbfc;
border-top-style: solid; }
.notify-me-when-live .share-links-container > a {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png); }
.notify-me-when-live .event-selected-share-facebook {
background-position: -320px -280px; }
.notify-me-when-live .event-selected-share-twitter {
background-position: -380px -280px; }
.notify-me-when-live .event-selected-share-google-plus {
background-position: -320px -320px; }
.notify-me-when-live .share-links-container {
color: #525a66;
font-family: Helvetica; }
.icn {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-repeat: no-repeat;
display: inline-block;
position: relative; }
.icn span {
display: none; }
.icn-facebook-btn {
background-position: 0 -552px;
width: 12px;
height: 13px;
top: 3px;
margin-right: 3px; }
.icn-twitter-btn {
background-position: -19px -552px;
width: 14px;
height: 12px;
top: 3px;
margin-right: 3px; }
.icn-follow-facebook {
background-position: -45px -552px;
width: 11px;
height: 11px;
top: 1px; }
.icn-follow-twitter {
background-position: -72px -553px;
width: 13px;
height: 11px;
top: 1px; }
.icn-follow-soundcloud {
background-position: -95px -552px;
width: 23px;
height: 11px;
top: 1px; }
.icn-follow-youtube {
background-position: -130px -551px;
width: 11px;
height: 12px;
top: 1px; }
.icn-follow-reverb {
background-position: -154px -551px;
width: 12px;
height: 12px;
top: 1px; }
.icn-follow-bandcamp {
background-position: -176px -552px;
width: 13px;
height: 11px;
top: 1px; }
.icn-play-sm {
background-position: -343px -553px;
width: 6px;
height: 8px;
top: 1px;
margin-right: 3px; }
.icn-add-track {
background-position: -282px -584px;
width: 10px;
height: 10px;
top: 5px;
pointer-events: none; }
.track-heart:hover .icn-add-track,
.track-heart.hearted .icn-add-track {
background-position: -304px -584px; }
.icn-genre {
background-position: -324px -551px;
width: 10px;
height: 13px;
margin-right: 8px;
top: 3px; }
.icn-play-time {
background-position: -303px -551px;
width: 11px;
height: 12px;
margin-right: 8px;
top: 3px; }
.icn-flag {
width: 16px;
height: 11px;
margin-right: 8px;
top: 1px; }
.flag-jordan {
background-position: -356px -552px; }
.icn-heart-favorite {
background-position: -282px -552px;
width: 11px;
height: 10px;
margin-right: 8px;
top: 1px; }
.icn-genre-sm {
background-position: -200px -552px;
width: 9px;
height: 10px; }
.icn-genre-sm-grey {
background-position: -513px -552px;
width: 9px;
height: 10px;
top: 2px;
margin-right: 5px; }
.icn-playtime-sm {
background-position: -221px -552px;
width: 10px;
height: 10px; }
.icn-support-subscribe {
background-position: -384px -553px;
width: 14px;
height: 10px;
margin-right: 13px; }
.active .icn-support-subscribe {
background-position: -410px -580px;
width: 12px;
height: 10px;
margin-right: 15px; }
.icn-support-itunes {
background-position: -409px -552px;
width: 12px;
height: 12px;
margin-right: 12px; }
.icn-support-website {
background-position: -384px -579px;
width: 14px;
height: 12px;
margin-right: 13px; }
.icn-slider-left {
background-position: -474px -554px;
width: 5px;
height: 7px;
top: 14px;
left: 5px; }
.icn-slider-right {
background-position: -462px -554px;
width: 6px;
height: 7px;
top: 14px;
left: 5px; }
.icn-playlist {
background-position: -489px -551px;
width: 16px;
height: 13px;
margin-left: 6px; }
.icn-reorder {
background-position: -535px -552px;
width: 7px;
height: 43px; }
.icn-remove {
background-position: -551px -552px;
width: 15px;
height: 15px;
margin-left: 5px;
position: absolute; }
.icn-remove:hover {
background-position: -551px -572px; }
.icn-hide {
background-position: -577px -552px;
width: 9px;
height: 9px; }
.icn-hide:hover {
background-position: -577px -566px; }
.icn-suggestion-left {
background-position: -606px -552px;
width: 30px;
height: 31px; }
a:hover .icn-suggestion-left {
background-position: -677px -552px; }
.icn-suggestion-right {
background-position: -642px -552px;
width: 30px;
height: 31px; }
a:hover .icn-suggestion-right {
background-position: -713px -552px; }
.icn-play-sm-lt {
background-position: -244px -584px;
width: 6px;
height: 7px; }
/* MOSAIC: Layout */
.mosaic-top-bar {height: 45px; border-bottom-width: 1px; position: relative}
.mosaic-top-bar-shadow {width: 100%; height: 5px; margin-bottom: -5px;top: 0; left: 0; position: relative; z-index: 1}
.mosaic-menu {margin: 0; padding:0}
.mosaic-menu > li {float:left; list-style: none; font-size: 17px; position: relative}
.mosaic-menu > li > a {
display:block; padding: 0 17px; line-height: 45px
}
.mosaic-menu > li:not('show-artists') > a:after {content: ""; border-width: 4px; display: inline-block; margin-left: 4px; vertical-align: -1px}
/* Collections menu */
.mosaic-collections-menu-scroll-container {
width: 250px;
max-height: 200px;
right: 0;
position: absolute;
z-index: 11;
margin: 0 0 0 1px;
display: none;
} /* max-height is needed by the scroll bar script*/
.mosaic-collections-menu {padding: 0; margin: 0}
.mosaic-collections-menu li {height: 34px; cursor: pointer; cursor: hand; padding: 0 13px 0 17px; display: block}
.mosaic-collection-name {font-size: 14px; float: left; line-height: 34px; width: 155px; white-space: nowrap; overflow: hidden; display: block}
.mosaic-collection-name-mob {font-size: 14px; float: left; line-height: 34px; width: 155px; white-space: nowrap; overflow: hidden; display: none}
.mosaic-collection-artist-count {font-size: 11px; float: right; line-height: 34px; display: block}
.mosaic-collection-artist-count-mob {font-size: 11px; float: right; line-height: 34px; display: none}
.mosaic-search-tools > div {float:left}
.mosaic-search-tools {padding-top: 10px}
.mosaic-search-tools .jspDrag {margin: 0 auto; width: 4px; right: 0}
.mosaic-search-tools .jspVerticalBar {width: 12px}
.mosaic-search-tools .jspPane {margin-top: -4px}
.mosaic-artist-search {
position: relative;
display: inline-block;
width: 313px;
margin-top: -1px;
padding: 0 6px;
line-height: 26px;
border: none;
}
.ar .mosaic-artist-search {
width: 259px;
}
.search-icon-gray {
left: auto;
right: 10px;
}
.search-icon-gray,
.search-icon-focus,
.cancel-search-icon,
.search-spinner {display: inline-block; position: absolute}
.search-icon-gray,
.search-icon-focus {width: 13px; height: 13px; margin: 7px 0 0 2px}
.cancel-search-icon {width: 14px; height: 14px; vertical-align: -2px; right: 10px; margin-top: 6px}
.search-spinner {width: 16px; height: 16px; right: 10px; top: 5px}
.mosaic-artist-search-input{width: 295px; border: none; margin-left: 20px; font-size: 12px}
/* Search Results */
.mosaic-search-results-scroll-container {width: 320px; max-height: 100px; position:absolute; padding: 0; margin: 15px 0 0 0; z-index: 2; display: none} /* max-height is needed by the scroll bar script*/
.reduce.mosaic-search-results-scroll-container {width: 210px}
.mosaic-search-results {margin:0; padding: 0;}
.mosaic-search-results li {width: 100%; cursor: pointer; cursor: hand}
.mosaic-search-name {font-size: 13px; margin: 8px 0 0 12px; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.mosaic-search-meta {font-size: 11px; margin: 5px 0 0 12px}
.shadowless-music-icon {width: 10px; height: 12px; display: inline-block}
.shadowless-location-icon {width: 9px; height: 12px; display: inline-block}
.mosaic-filter-view-container {margin-left: 15px; position:relative;}
.mosaic-search-tools.blocked {display: none}
.mosaic-filter-view {min-width: 180px}
.mosaic-filter-view > div {float:left}
.mosaic-meta-filter {width: auto; margin-right: 20px}
.mosaic-meta-filter > p {margin: 0; line-height: 27px; font-size: 11px; padding: 0 6px 0 15px}
.mosaic-meta-filter > .tools-label {font-size: 17px; padding-right: 20px}
.mosaic-meta-filter a,
.mosaic-meta-filter a:active {padding: 0 7px; line-height: 25px}
.mosaic-meta-filter a span {font-size: 11px; line-height: 1}
@-moz-document url-prefix() {
.mosaic-meta-filter a span {vertical-align: 1px}
}
.mosaic-filter-country-count { float: none; }
.mosaic-meta-filter a span:after {content: ""; border-width: 3px; display: inline-block; margin-left: 4px; vertical-align: -1px}
.mosaic-meta-filter .active span:after {vertical-align: 2px}
.mosaic-filter-genere {margin-right: 5px}
.mosaic-filter-popular-container,
.mosaic-filter-genere-container,
.mosaic-filter-country-container {float:left; position: relative; margin-top: -1px}
.mosaic-filter-popular-options,
.mosaic-filter-genere-options,
.mosaic-filter-country-options {top:0; left: 1px; position: absolute; margin: 30px 0 0 0; z-index: 3; display:none; z-index:9999}
.mosaic-filter-popular-menu {margin: 0; padding: 0; width: 100px}
.mosaic-filter-popular-menu li {list-style: none;}
.mosaic-filter-popular-menu a,
.mosaic-filter-popular-menu a:active {font-size: 12px; display: block; line-height: 26px; padding: 0 6px}
.mosaic-filter-genere-options {padding: 4px 0}
.genre-scroll-container {width: 450px; height: 104px}
.mosaic-filter-country-options {padding: 4px 0}
.country-scroll-container {width: 550px; height: 104px}
.mosaic-filter-genere-options label {font-size: 12px; margin: 10px 0 0 10px; width: 97px; float: left}
.mosaic-filter-genere-options label input[type="checkbox"]{margin-right: 4px}
.mosaic-filter-country-options label {margin: 10px 0 0 10px; float: left; width: 164px}
.mosaic-filter-country-options label input[type="checkbox"]{margin-right: 3px}
.mosaic-filter-country-options .flag {width: 16px; height: 11px; display: inline-block; margin-bottom: -1px}
.united_states {display: none}
.mosaic-filter-country-options > .unaffiliated {display: none}
.button.switch-grid-display,
.button.switch-list-display,
.button.switch-grid-display:active,
.button.switch-list-display:active,
.button.switch-grid-display.active,
.button.switch-list-display.active {padding: 8px 6px 6px; border-width: 0}
/* ARTIST POOL */
.mosaic-loading-spinner {display: block; margin: 20px auto; padding: 60px}
.cell-big-label {font-size: 17px; white-space: nowrap; text-overflow: ellipsis; margin: 12px 0 4px; line-height: 1; width: 100%; overflow: hidden}
.mosaic-pool-cell,
.mosaic-pool-cell-big {position: relative}
.cell-thumb,
.cell-name,
.cell-genere,
.cell-text-bg {position: absolute}
.genre-limit {
text-overflow: ellipsis;
white-space: nowrap;
width: 88px;
overflow: hidden;
}
.cell-name {
text-overflow: ellipsis;
white-space: nowrap;
width: 88px;
overflow: hidden;
}
.band-limit {
text-overflow: ellipsis;
white-space: nowrap;
width: 88px;
overflow: hidden;
}
.cell-genere .band-limit {
color: #b2b9c5;
padding-left: 20px;
}
.mosaic-artist-pool {width: 100%}
.cell-thumb {top: 0; left: 0}
.cell-name {font-size: 14px}
.cell-location-icon {width: 15px; height: 10px; display: inline-block}
.mosaic-pool-container .jspVerticalBar {width: 13px; border-left: none}
.mosaic-pool-container .jspDrag {margin: 3px; border: none}
/* ARTIST POOL: GRID-VIEW */
.grid .mosaic-pool-cell:hover {z-index: 1}
.grid .mosaic-pool-cell .cell-thumb,
.grid .cell-text-bg {width: 100%; height: 100%}
.grid .cell-name {width: 110px; left: 10px; bottom: 25px}
.grid .cell-genere {bottom: 5px; left: 10px}
.grid .cell-genere span {vertical-align: middle; margin-right: 3px; float: left}
.grid .mosaic-pool-cell {
border-radius: 2px;
margin: 0 0 10px 10px;
box-shadow: 0 1px 8px #000;
min-width: 180px;
min-height: 180px;
padding-bottom: 50px;
background-color: #1b1d22;
-webkit-transition: box-shadow .3s ease-in-out;
}
@media screen and (max-width: 600px) {
.grid .mosaic-pool-cell {
min-width: 140px;
min-height: 140px;
}
}
.grid .cell-thumb {
background-size: 100% auto!important;
background-position: top center!important;
}
.mosaic-pool-cell .cell-thumb.color,
.grid .mosaic-pool-cell .cell-name, .grid .mosaic-pool-cell .cell-genere {
opacity: 1 !important;
}
.grid .mosaic-pool-cell .cell-name {
font-size: 12px;
font-weight: bold;
color: #97a5ca;
}
.grid .cell-genere span {
font-size: 10px;
font-weight: bold;
color: #757581;
}
.grid .mosaic-pool-cell .cell-text-bg {
background-color: transparent;
}
.grid .mosaic-pool-cell:hover .cell-text-bg,
.grid .cell-thumb.black {
display: none;
}
.grid .mosaic-pool-cell .cell-thumb, .grid .cell-text-bg {
position: static;
}
.grid .mosaic-pool-cell:hover {
position: relative;
z-index: 10;
box-shadow: 0 0px 15px #000;
}
.list .mosaic-pool-cell .hover {
display: none;
}
.grid .mosaic-pool-cell .hover {
opacity: 0;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(27,29,34, 0.9);
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
position: absolute;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.grid .mosaic-pool-cell:hover .hover {
opacity: 1;
}
.grid .mosaic-pool-cell:hover .hover a{
display: inline-block;
width: 100%;
height: 100%;
}
.grid .mosaic-pool-cell .hover p {
color: #fff;
font-size: 14px;
padding-top: 80px;
text-align: center;
}
.grid .mosaic-pool-cell .hover span {
font-size: 10px;
color: #9fa6bd;
position: absolute;
bottom: 65px;
left: 10px;
}
.no-favorites {
text-align: center;
padding: 20px 0;
max-width: 100%;
}
.no-favorites p {
display: block;
margin: 0 auto;
color: #b6bfcd;
font-size: 13px;
}
.no-favorites p.lg {
font-family: 'ArialRoundedMT', 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
font-size: 19px;
color: #677383;
text-shadow: 0 -1px 0 #000;
margin-bottom: 6px;
}
/* ARTIST POOL: LIST-VIEW */
.list .mosaic-pool-cell {width: 260px; height: 60px; margin: 10px}
.list .mosaic-pool-cell .cell-thumb,
.list .cell-text-bg {width: 60px; height: 60px}
.list .cell-name {width: 180px; left: 68px; bottom: 30px; float: left}
.list .cell-genere {font-size: 11px; left: 68px; bottom: 14px}
.list .cell-genere > .genre-limit {width: 180px; float: left}
.list .cell-genere > .band-limit {width: 180px; float: left}
.list .cell-genere {
height: 15px;
bottom: 10px;
}
.list .cell-genere .icon {
float: left;
}
.list .cell-genere .genre-limit {
width: 175px;
}
/* ARTIST POOL: LIST-VIEW */
.list .mosaic-pool-cell-big {width: 212px; height: 88px; margin: 10px; padding-left: 98px}
.list .mosaic-pool-cell-big:after {position: absolute; height: 11px; width: 100%; bottom: 0; left: 0}
.list .mosaic-pool-cell-big .cell-thumb,
.list .mosaic-pool-cell-big .cell-text-bg {width: 88px; height: 88px; left: 0}
.list .mosaic-pool-cell-big .cell-detail-list,
.list .mosaic-pool-cell-big .cell-buttons {padding: 0; margin: 0; overflow: hidden; font-size: 11px; list-style: none; position: relative; z-index: 1}
.list .mosaic-pool-cell-big .cell-detail-list li {float: left; display: block; padding: 0 10px 0 11px; height: 15px; position: relative; margin-bottom: 8px}
.list .mosaic-pool-cell-big .cell-detail-list li:first-child {padding: 0 10px 0 0}
.list .mosaic-pool-cell-big .cell-detail-list li:not(:first-child):before {width: 1px; height: 18px; display: block; position: absolute; top: 0; left: 0}
.list .mosaic-pool-cell-big .cell-detail-list p {margin: 0; line-height: 18px}
.list .mosaic-pool-cell-big .cell-detail-list .feat-play-all {margin-top: 2px}
.list .mosaic-pool-cell-big .cell-detail-list .feat-play-all .play-icon {width: 5px; height: 8px; margin: 3px 0 0 6px}
.list .mosaic-pool-cell-big .cell-buttons li {float: left; display: block; cursor: pointer; margin-right: 3px}
.list .mosaic-pool-cell-big .cell-buttons li:first-child {margin-right: 11px}
.list .mosaic-pool-cell-big .cell-buttons .button {padding: 0 7px; line-height: 20px; cursor: pointer; margin-bottom: 2px}
.list .mosaic-pool-cell-big .cell-buttons .social-button {display: block; width: 21px; height: 21px}
.list .mosaic-pool-cell-big .cell-buttons .social-button .icon {display: block}
.list .mosaic-pool-cell-big .icon-twitter {width: 13px; height: 9px; margin: 6px 0 0 4px}
.list .mosaic-pool-cell-big .icon-facebook {width: 5px; height: 11px; margin: 5px 0 0 8px}
/* ARTIST POOL WHEN SONGS ARE DISPLAYED*/
.black-note-icon {width: 10px; height: 13px; vertical-align: middle; display: inline-block}
/* SELECTED ARTIST DETAILS OVERLAY */
.mosaic-selected-artist-container {
width: 700px;
height: auto;
left: 50%;
top: 50%;
display: block;
margin-left: -350px;
margin-top: -269px;
position: absolute;
z-index: 4;
}
.mosaic-selected-artist {
width: 290px;
height: 368px;
box-shadow: none;
border-radius: 3px 0 0 3px;
background-color: transparent !important;
position: relative;
margin-bottom: 20px;
}
.mosaic-selected-slideshow {overflow: hidden}
.mosaic-selected-slideshow,
.slideshow-controls {
width: 290px;
height: 260px;
}
.slideshow-controls {position: absolute}
.slideshow-controls .switch-left,
.slideshow-controls .switch-right {
width: 145px;
height: 260px;
float:left
}
.details-left-icon,
.details-right-icon {width: 15px; height:22px}
.details-left-icon {margin: 130px 0 0 10px}
.details-right-icon {margin: 130px 0 0 120px}
.mosaic-selected-slides-container {position:relative; left:0}
.mosaic-selected-slides-container img {width: 350px; height: 230px}
.mazik-button-element {
font-size: 11px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding: 0px 8px;
margin-top: 7px
}
.artist-modal__genres {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.artist-modal__favourite {
float: right;
margin-right: 0 !important;
}
.mosaic-selected-header {
background: none;
padding: 0px;
width: 100%;
height: 48px;
}
.mosaic-selected-header .artist-name {
font-size: 18px;
max-width: 600px;
float: none;
overflow: hidden;
}
.mosaic-selected-header .artist-actions {
display: block;
padding-top: 5px;
clear: both;
}
.mosaic-selected-header .artist-actions span {
max-width: 250px;
margin-right: 20px;
color: rgba(255,255,255,0.8);
font-size: 11px;
height: 16px;
line-height: 16px;
display: inline-block;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.mosaic-selected-header .artist-actions span a {
color: rgba(255,255,255,0.8);
-webkit-transition: color .1s ease-in-out;
transition: color .1s ease-in-out;
}
.mosaic-selected-header .artist-actions span a:hover {
color: rgba(255,255,255,1);
}
.mosaic-selected-close, .mosaic-selected-close:hover {
border: 0px;
background: transparent;
box-shadow: none;
width: auto;
height: auto;
right: 0px;
top: 0px;
position:absolute;
border-radius: 10px;
}
.cross-close-icon {
width: 25px;
height: 25px;
margin: 0px;
}
.mosaic-selected-slides-container .artist-image {
width: 290px;
height: 260px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mosaic-selected-close:hover .cross-close-icon {
background-position: -478px -207px;
}
.mosaic-selected-header .button .icon {display: block}
.mosaic-selected-tracklist .track-list-scroll-container { height: 240px; width: 358px }
.artist-info-scroll-container { width: 358px; height: 270px; max-height: 270px; }
.mosaic-selected-content .jspVerticalBar {
border-left: 0;
width: 5px;
}
.mosaic-selected-content .jspVerticalBar .jspTrack {
background-color: transparent;
}
.mosaic-selected-content .jspVerticalBar .jspTrack .jspDrag {
border: 0;
box-shadow: none;
background-color: #dce2e9;
background-image: none;
}
.mosaic-selected-content .jspPane {
width: 346px !important;
margin-top: 5px;
position: relative;
}
.mosaic-select-artist-details .artist-info {
position: relative;
margin-top: 10px;
}
.mosaic-select-artist-details .artist-panel {
padding: 17px 26px;
display: none;
}
.mosaic-selected-play {margin-left: 10px}
.mosaic-selected-heart {margin-left: 10px; margin-right: 5px}
.mosaic-selected-heart,
.mosaic-selected-heart:hover,
.mosaic-selected-heart:active,
.mosaic-selected-info,
.mosaic-selected-subscribe-mail,
.mosaic-selected-info:active,
.mosaic-selected-info:hover {padding: 0}
.mosaic-selected-play-icon {width: 9px; height: 11px; margin: 6px 5px 0px 0px}
.mosaic-selected-heart-icon {width: 10px; height: 10px; margin: 5px 10px 4px 10px}
.mosaic-selected-info-icon {width: 5px; height: 12px; margin: 4px 7px 3px 7px}
.mosaic-selected-subscribe-icon {width: 12px; height: 12px; margin: 4px 7px 3px 7px}
.mosaic-selected-subscribe-mail {margin-right: 5px; position: relative;}
.mosaic-selected-additional-links-title{margin: 10px 0 0 0}
.mosaic-selected-additional-links-list{margin: 0; list-style: none; padding: 0 0 0 10px}
/* SELECTED ARTIST: NO-3D Rotation Fallback*/
.csstransforms3d .mosaic-selected-content,
.no-csstransforms3d .mosaic-selected-content {overflow: hidden}
.csstransforms3d .flip-back,
.no-csstransforms3d .flip-back {top: 460px; position: relative; z-index: 1;}
.csstransforms3d .flip-rotated .flip-back,
.no-csstransforms3d .flip-rotated .flip-back {top: 0px}
/* SELECTED ARTIST: DETAILS */
.mosaic-selected-details {width: 350px; height: 414px}
.mosaic-selected-details-content {height: 381px}
.mosaic-selected-share {height: 36px}
.mosaic-selected-social {font-size: 12px; margin: 0 20px ;padding-top: 10px}
.mosaic-selected-social > * {}
.mosaic-selected-social > ul li > span {margin: 0px 8px 3px 0; display: block}
.mosaic-selected-body {font-size: 13px; line-height: 23px; margin: 5px 20px 0 20px}
.mosaic-selected-social ul {overflow: hidden; list-style: none; padding: 0; margin: 0}
.mosaic-selected-social ul li:first-child {min-width:90px; margin-right: 10px}
.mosaic-selected-social ul li {float: left}
.mosaic-selected-social ul li a {float: left; height:20px}
.mosaic-selected-social ul li p {margin-top: 8px; padding: 0}
.mosaic-selected-social ul li p .flag {width: 16px; height: 11px; display: inline-block; margin-right: 5px}
.mosaic-web-icon {width: 11px; height: 12px; margin: 4px 0 0 6px}
.mosaic-twitter-icon {width: 7px; height: 11px; margin: 5px 0 0 8px}
.mosaic-facebook-icon {width: 6px; height: 11px; margin: 5px 0 0 9px}
.mosaic-web-text {font-size: 11px; margin: 3px 5px 0; float: left}
.mosaic-selected-share > * {float:left}
.mosaic-selected-share > span {margin: 10px 10px 0 20px}
.disable-social {
filter: alpha(opacity=25);
-moz-opacity: 0.25;
opacity: 0.25;
cursor: default;
}
.disable-social:hover .mosaic-facebook-icon {background-position: 0 -220px !important}
.disable-social:hover .mosaic-twitter-icon {background-position: -20px -220px !important}
.mosaic-selected-share-google-plus {margin: 8px 0 0 1px}
/* overlay */
.selected-artist-lightbox-overlay {width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 2}
/* collection tittle */
.collection-title-box {height: 30px; width: 100%; overflow: hidden; position: relative; margin-top: -24px; z-index: 1; display: none}
.collection-title-box.show-title {margin-top: 0}
.collection-title-box .center {width: auto; margin-top: 3px}
.collection-title-box.show-title .center {margin-top: 7px}
.collection-title-box .button-black {font-size: 10px; font-weight: bold}
.collection-title-box .center > h3 {font-size: 10px; width: auto; padding: 2px 5px 0; margin: 0; display: inline}
.collection-title-box .center > span {font-size: 12px; padding-top: 3px; margin: 0}
.empty-event-list-label {display: block; text-align: center; font-size: 16px; margin-top: 45px}
.similar-artists {
display: block;
margin-top: 20px;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
clear: both;
}
.similar-artists > p {
color: #dcdcdc;
text-transform: uppercase;
font-size: 11px;
margin-top: 0;
}
.similar-artists .artist {
width: 33.3%;
float: left;
}
.similar-artists .artist img {
float: left;
box-shadow: 0 2px 6px 1px #000000;
margin-right: 14px;
border-radius: 2px;
}
.similar-artists .artist .content {
padding-right: 20px;
}
.similar-artists .artist .content p {
color: #97a5ca;
font-size: 12px;
-webkit-transition: color .1s ease-in-out;
transition: color .1s ease-in-out;
}
.similar-artists .artist .content span {
font-size: 10px;
color: rgba(255,255,255,0.6);
display: block;
margin-bottom: 3px;
-webkit-transition: color .1s ease-in-out;
transition: color .1s ease-in-out;
}
.similar-artists .artist:hover p,
.similar-artists .artist:hover span {
color: #fff;
}
.mosaic-selected-artist .support-social {
border-top: 1px solid rgba(215,218,247,0.29);
padding: 6px;
background-color: #3b3c46;
position: absolute;
bottom: 31px;
width: 278px;
}
.support-social .share-btn {
display: inline-block;
box-shadow: 0px 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
border-radius: 2px;
text-align: center;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
color: #fff;
width: 137px;
font-size: 11px;
padding: 0;
line-height: 25px;
}
.support-social .support-btn {
display: block;
width: 100%;
margin: 0 0 6px;
color: #d5dae9;
font-size: 13px;
padding: 5px 0;
display: block;
background: #565a67; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565a67), color-stop(100%,#3f424d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #565a67 0%,#3f424d 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #565a67 0%,#3f424d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565a67', endColorstr='#3f424d',GradientType=0 ); /* IE6-9 */
}
.support-social .support-btn:hover {
background: none;
background-color: #565a67;
}
.support-social .support-btn.active {
background: none;
background-color: #32333b;
box-shadow: 0px 1px 1px 0 #4a4b58, inset 0 1px 0 0 #2c2d34;
color: #737481;
}
.support-social .facebook-btn {
background: #3b63a7; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b63a7), color-stop(100%,#335795)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3b63a7 0%,#335795 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #3b63a7 0%,#335795 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b63a7', endColorstr='#335795',GradientType=0 ); /* IE6-9 */
color: #e0e4ef;
}
.support-social .facebook-btn:hover {
background: none;
background-color: #3b63a7;
}
.support-social .twitter-btn {
background: #72c2ff; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72c2ff), color-stop(100%,#56adee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #72c2ff 0%,#56adee 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #72c2ff 0%,#56adee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72c2ff', endColorstr='#56adee',GradientType=0 ); /* IE6-9 */
color: #fff;
}
.support-social .twitter-btn:hover {
background: none;
background-color: #72c2ff;
}
.support-options {
background-color: #3b3c46;
margin-left: -6px;
width: 290px;
border-top: 1px solid #34353f;
margin-bottom: 6px;
display: none;
}
.support-options ul {
list-style: none;
padding: 0;
margin: 0;
}
.support-options li {
display: block;
border-bottom: 1px solid #34353f;
border-top: 1px solid #40414d;
}
.support-options li:first-child {
border-top: 0;
}
.support-options li a {
color: #a6a8b8;
padding: 11px 0 11px 17px;
display: block;
font-size: 12px;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.support-options li a:hover {
background-color: #41424f;
}
.mosaic-selected-artist .follow {
background-color: #2d2e3a;
padding: 7px 12px;
border-top: 1px solid #414356;
border-radius: 0 0 0 3px;
position: absolute;
bottom: 0;
width: 266px;
}
.follow p {
font-size: 11px;
color: #cfd6e6;
margin: 2px 5px 0 0;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
.follow a {
margin: 0 5px;
}
.mosaic-select-artist-details {
width: 410px;
height: 368px;
background-color: #f4f6fa;
border-radius: 0 3px 3px 0;
}
.mosaic-select-artist-details .nav {
padding: 0;
margin: 0;
list-style: none;
}
.mosaic-select-artist-details .nav li {
padding: 0;
border-bottom: 1px solid #e1e6ec;
margin: 0;
width: 24.8%;
text-align: center;
float: left;
border-left: 1px solid #e1e6ec;
background: #fafafa; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e9ecf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fafafa 0%,#e9ecf1 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #fafafa 0%,#e9ecf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e9ecf1',GradientType=0 ); /* IE6-9 */
}
.mosaic-select-artist-details .nav li:first-child {
border-left: 0;
}
.mosaic-select-artist-details .nav li:last-child {
border-radius: 0 3px 0 0;
}
.mosaic-select-artist-details .nav li.active,
.mosaic-select-artist-details .nav li:hover {
border-bottom: 1px solid #f4f6fa;
}
.mosaic-select-artist-details .nav li.active a,
.mosaic-select-artist-details .nav li:hover a {
background-color: #f4f6fa;
color: #415db5;
}
.mosaic-select-artist-details .nav li a {
text-transform: uppercase;
color: #464955;
font-size: 12px;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
padding: 20px 0;
display: block;
}
.mosaic-select-artist-details .artist-panel {
padding: 17px 26px;
display: none;
}
.mosaic-select-artist-details .artist-panel.active {
display: block;
}
.mosaic-select-artist-details .artist-gallery {
position: relative;
}
.mosaic-select-artist-details .artist-gallery .thumbnails a {
background-repeat: no-repeat;
background-size: cover !important;
background-position: 0 0;
}
.mosaic-select-artist-details .artist-gallery .main-image {
border-bottom: 1px solid #fff;
margin-bottom: 7px;
}
.mosaic-select-artist-details .artist-gallery .main-image img {
margin-left: 17px;
width: 320px;
}
.mosaic-select-artist-details .artist-gallery .main-image iframe {
width: 350px;
height: 210px;
}
.mosaic-select-artist-details .artist-gallery .main-image p.empty {
padding: 8px;
}
.mosaic-select-artist-details .artist-gallery .main-image p {
border-bottom: 1px solid #e1e6ec;
margin-bottom: 0;
margin-top: 2px;
padding-bottom: 5px;
font-size: 9px;
}
.mosaic-select-artist-details .artist-gallery .pager {
display: block;
padding: 0 16px;
position: relative;
}
.mosaic-select-artist-details .artist-gallery .pager a {
float: left;
margin: 0 1px;
width: 63px;
height: 45px;
display: block;
}
.mosaic-select-artist-details .artist-picture-gallery .pager a {
background-size: 65px auto !important;
}
.mosaic-select-artist-details .artist-video-gallery .pager a {
background-size: auto 48px !important;
}
.mosaic-select-artist-details .artist-gallery .pager a.active,
.mosaic-select-artist-details .artist-gallery .pager a:hover {
box-shadow:inset 0 0 0 2px #4a4e5a;
}
.mosaic-select-artist-details .artist-gallery a.pager-arrow {
box-shadow: 0px 1px 0 0 rgba(0,0,0,0.2), inset 0 1px 0 0 rgba(255,255,255,0.2);
width: 16px;
height: 45px;
display: block;
position: absolute;
top: 0;
background: #565a67; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565a67), color-stop(100%,#3f424d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #565a67 0%,#3f424d 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #565a67 0%,#3f424d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565a67', endColorstr='#3f424d',GradientType=0 ); /* IE6-9 */
}
.mosaic-select-artist-details .artist-gallery a.left-arrow {
border-radius: 2px 0 0 2px;
left: 0;
}
.mosaic-select-artist-details .artist-gallery a.right-arrow {
border-radius: 0 2px 2px 0;
right: 0;
}
.mosaic-select-artist-details .artist-gallery .artist-galley-slider .thumbnails-container {
position: relative;
width: 100%;
margin: 0;
padding: 0;
height: 45px;
}
.mosaic-select-artist-details .artist-gallery .artist-galley-slider .thumbnails-container .list {
list-style: none;
position: absolute;
overflow: hidden;
height: 45px;
margin: -5px 0 0 0;
padding: 0;
}
.mosaic-select-artist-details .artist-gallery .artist-galley-slider .thumbnails-container .list li {
display: inline;
float: left;
}
.mosaic-select-artist-details .artist-gallery .thumbnails-container .jspHorizontalBar {
height: 0;
}
/* artist info */
.mosaic-select-artist-details .artist-info {
position: relative;
margin-top: 10px;
}
.mosaic-select-artist-details .artist-info .fade {
height: 70px;
width: 100%;
display: block;
position: absolute;
bottom: 1px;
left: 0; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,246,250,0)), color-stop(100%,rgba(244,246,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(244,246,250,0) 0%,rgba(244,246,250,1) 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, rgba(244,246,250,0) 0%,rgba(244,246,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f6fa', endColorstr='#f4f6fa',GradientType=0 ); /* IE6-9 */
}
.mosaic-select-artist-details .artist-info .info-content {
overflow-y: scroll;
height: 270px;
padding-right: 20px;
}
.mosaic-select-artist-details .artist-info p {
color: #545864;
font-size: 12px;
line-height: 19px;
margin-top: 0px;
}
.mosaic-selected-additional-links-list {
padding-bottom: 60px;
}
.mosaic-select-artist-details .mosaic-selected-play {
margin-left: 0;
margin-top: 0;
margin-bottom: 7px;
text-transform: uppercase;
color: #545864;
text-transform: uppercase;
font-size: 10px;
text-shadow: 0 1px 0 #fff;
border: 0;
border-bottom: 1px solid #c2c4ca;
box-shadow:inset 0 1px 0 0 #eaecf1;
line-height: 27px;
background-image: none;
letter-spacing: -0.5px;
background: #f4f5f6; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f5f6), color-stop(100%,#e8eaee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f5f6 0%,#e8eaee 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #f4f5f6 0%,#e8eaee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f5f6', endColorstr='#e8eaee',GradientType=0 ); /* IE6-9 */
}
.mosaic-select-artist-details .mosaic-selected-play:hover {
box-shadow:inset 0 1px 0 0 #f4f5f7;
background: #ededed; /* Old browsers */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e5e6ea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#e5e6ea 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, #ededed 0%,#e5e6ea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e5e6ea',GradientType=0 ); /* IE6-9 */
}
.jspPane {
margin-top: 5px;
}
.icn-scroll-down-arrow {
background-position: -329px -584px;
width: 11px;
height: 7px;
margin-left: 6px;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-3px);}
60% {-webkit-transform: translateY(0px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
40% {-webkit-transform: translateY(-3px);transform: translateY(-3px);}
60% {-webkit-transform: translateY(0px);transform: translateY(0px);}
}
.mosaic-fade {
height: 100px;
width: 100%;
display: block;
position: fixed;
bottom: 40px;
z-index: 9999;
text-align: center;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(38%,rgba(0,0,0,0)), color-stop(97%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,1) 97%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}
.mosaic-fade.hidey {
bottom: -100px;
display: block;
}
.mosaic-fade span {
display: inline-block;
color: #75abff;
font-weight: bold;
font-size: 15px;
text-align: center !important;
position: relative;
top: 70px;
}
/* MOSAIC: Skin */
.mosaic-top-bar {
border-bottom-style: solid;
border-bottom-color: #000;
box-shadow: inset 0 1px 0 #3b434e;
background: #2c323a;
background: -webkit-linear-gradient(top, #2c323a 0%, #22272d 100%);
background: linear-gradient(to bottom, #2c323a 0%, #22272d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c323a', endColorstr='#22272d',GradientType=0 ); }
.mosaic-top-bar-shadow {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); }
.mosaic-menu > li > a {
color: #b8c0cd;
font-size: 14px;
text-shadow: 0 -1px 0 #06090d;
box-shadow: inset 0 1px 0 #566b8a, inset 1px 0 0 #1d2229;
background: #3f4f66;
background: -webkit-linear-gradient(top, #3f4f66 0%, #313d4f 100%);
background: linear-gradient(to bottom, #3f4f66 0%, #313d4f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4f66', endColorstr='#313d4f',GradientType=0 );
font-family: proxima_nova_semibold; }
.mosaic-menu > li > a:hover {
color: #cfd8e5;
background: #4f6380;
background: -webkit-linear-gradient(top, #4f6380 0%, #3d4c63 100%);
background: linear-gradient(to bottom, #4f6380 0%, #3d4c63 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f6380', endColorstr='#3d4c63',GradientType=0 ); }
.mosaic-menu.fleft {
position: relative; }
.mosaic-menu.fleft > li > a {
text-shadow: 0 -1px 0 #000000;
box-shadow: inset 0 1px 0 #2a2e33;
background: #1f2126;
background: -webkit-linear-gradient(top, #1f2126 0%, #181a1d 100%);
background: linear-gradient(to bottom, #1f2126 0%, #181a1d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f2126', endColorstr='#181a1d',GradientType=0 ); }
.mosaic-menu.fleft:after {
display: block;
position: absolute;
width: 11px;
height: 100%;
content: "";
right: -11px;
top: 0;
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -510px -280px; }
.mosaic-menu > li > a:after {
border-style: solid;
border-color: #8b96a6 transparent transparent; }
.mosaic-menu li.selected > a {
color: #434c59;
background-color: #ebf0f7;
background-image: none;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2); }
/* COLLECTION MENU */
.mosaic-collections-menu-scroll-container {
background-color: #ebf0f7;
border-radius: 3px 0 3px 3px;
left: -120px; }
.mosaic-collection-name {
color: #245FB3;
font-weight: normal;
font-family: proxima_nova_semibold;
text-overflow: ellipsis; }
.mosaic-collection-name:link,
.mosaic-collection-name:visited,
.mosaic-collection-name:hover,
.mosaic-collection-name:active {
color: #245FB3; }
.mosaic-collection-artist-count {
color: #737d8c;
font-weight: bold; }
.mosaic-collection-artist-count-mob {
color: #737d8c;
font-weight: bold; }
.mosaic-collections-menu li:hover {
background-color: #fff; }
.mosaic-collections-menu li:active {
background-color: #fff; }
.mosaic-search-tools .jspVerticalBar {
background-color: transparent;
border: none; }
.mosaic-search-tools .jspTrack {
background-color: transparent; }
.mosaic-search-tools .jspDrag {
border: none;
background-image: none;
box-shadow: none;
background-color: #757981; }
/* SEARCH INPUT */
.mosaic-artist-search {
background-repeat: no-repeat;
background: #1d1f22;
border-radius: 2px;
box-shadow: inset 0 1px 3px #000;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out; }
.mosaic-artist-search.focus {
box-shadow: inset 0 1px 0 #4992f2, inset 0 -1px 0 #4992f2, 0 0 0 2px #4992f2, 0 0 10px #4992f2; }
.search-spinner {
background-image: url(/assets/bg/search-loading-79445b37e398c72b0b7276d85db9ec8b.gif); }
.mosaic-artist-search-input {
margin-left: 0px;
color: #b1b8c5;
font-size: 10px;
background-color: transparent; }
.mosaic-artist-search-input:focus {
outline: none; }
/* IE 10 fix
This is here because IE10 no longer supports conditional comments!
*/
.mosaic-artist-search-input::-ms-clear {
display: none;
width: 0;
height: 0; }
.mosaic-artist-search-input::-webkit-input-placeholder {
font-size: 10px;
color: #b8c0cd; }
.mosaic-artist-search-input:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #b8c0cd; }
.mosaic-artist-search-input::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #b8c0cd; }
.mosaic-artist-search-input:-ms-input-placeholder {
font-size: 10px;
color: #b8c0cd; }
/* Search results*/
.mosaic-search-results-scroll-container {
background-color: #ebf0f7;
border-radius: 3px;
box-shadow: 0 1px 3px #000000, inset 0 0 0 1px #ffffff;
z-index: 9999; }
.mosaic-search-name {
color: #245fb3;
font-weight: bold; }
.mosaic-search-meta {
color: #737d8c;
text-shadow: 0 1px 0 #ffffff;
text-transform: capitalize;
margin: 0 4px 4px; }
.mosaic-search-results li {
list-style: none;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.mosaic-search-results li:first-child {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); }
.mosaic-search-results li:last-child {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.mosaic-search-results li:first-child:last-child {
box-shadow: none; }
.mosaic-search-results li:hover {
background-color: #f4f7fb; }
.mosaic-search-results li:active {
background-color: #e4e9f1; }
.mosaic-filter-view-container {
-webkit-transition: width 0.25s ease-out;
transition: width 0.25s ease-out; }
.mosaic-meta-filter > p {
color: #b8c0cc;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.mosaic-meta-filter > .tools-label {
font-family: proxima_nova_semibold; }
.mosaic-meta-filter a span:after {
border-style: solid;
border-color: white transparent transparent; }
.mosaic-meta-filter .active span:after {
border-color: transparent transparent white; }
.mosaic-filter-country-count {
font-style: normal; }
/* filter options */
.mosaic-filter-popular-menu {
background-color: #ebf0f7;
border-radius: 3px 0 3px 3px; }
.mosaic-filter-popular-menu li:first-child a,
.mosaic-filter-sessions-menu li:first-child a {
border-radius: 3px 3px 0 0; }
.mosaic-filter-popular-menu li:first-child + li a,
.mosaic-filter-sessions-menu li:first-child + li a {
border-radius: 0 0 3px 3px; }
.mosaic-filter-popular-menu a,
.mosaic-filter-sessions-menu a {
color: #245fb3;
font-weight: bold; }
.mosaic-filter-popular-menu a:hover,
.mosaic-filter-sessions-menu a:hover,
.mosaic-filter-popular-menu .active,
.mosaic-filter-sessions-menu .active {
background-color: #fff; }
.mosaic-filter-sessions-menu a strong {
font-family: proxima_nova_semibold;
font-weight: normal; }
.mosaic-filter-sessions-menu a span {
color: #737d8c; }
.mosaic-filter-genere-options,
.mosaic-filter-country-options {
background-color: #ebf0f7;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); }
.mosaic-filter-genere-options label,
.mosaic-filter-country-options label {
color: #5c6066;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
font-family: proxima_nova_semibold; }
.mosaic-view-type {
float: left;
border-radius: 0px;
border: 0px;
box-shadow: none; }
.list-display-icon {
width: 13px;
height: 14px; }
.active .grid-display-icon {
width: 15px;
height: 13px; }
.active .list-display-icon {
width: 13px;
height: 13px; }
.grid-display-icon {
width: 15px;
height: 14px; }
.mosaic-view-type a span:after, .mosaic-view-type .active span:after {
border: 0px; }
.button.switch-list-display, .button.switch-grid-display {
border-radius: 2px;
border: 0px;
margin-right: 3px; }
.button.switch-grid-display {
border-bottom: 1px solid #434e5b !important; }
.button.switch-grid-display:active,
.button.switch-list-display:active,
.button.switch-grid-display.active,
.button.switch-list-display.active {
background-image: -webkit-linear-gradient(top, #23262f, #2c3039);
background-image: linear-gradient(to bottom, #23262f, #2c3039);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#23262f', EndColorStr='#2c3039');
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); }
/* ARTIST POOL*/
.mosaic-loading-spinner {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px; }
.cell-big-label {
color: #363f4c;
font-family: proxima_nova_semibold; }
.mosaic-pool-cell,
.mosaic-pool-cell-big {
cursor: pointer;
cursor: hand; }
.mosaic-pool-cell .cell-thumb.color,
.mosaic-pool-cell-big .cell-thumb.color {
opacity: 0; }
.mosaic-pool-cell:hover .cell-thumb.color,
.cell-thumb.color :hover .cell-thumb.color {
opacity: 1; }
.cell-location-icon {
background-color: red; }
.mosaic-pool-container .jspTrack {
background-color: rgba(0, 0, 0, 0.4);
box-shadow: inset 1px 0 1px 1px #000000; }
.mosaic-pool-container .jspDrag {
background-image: -webkit-linear-gradient(left, #6b7079, #50565e);
background-image: linear-gradient(to right, #6b7079, #50565e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6b7079', EndColorStr='#50565e');
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
border-radius: 10px; }
.cell-genere,
.cell-name {
text-transform: capitalize; }
/* ARTIST POOL: GRID-VIEW */
.grid .mosaic-pool-cell {
background-color: #1b1d22; }
.grid .mosaic-pool-cell {
opacity: 1;
color: #e3e3e3;
box-shadow: 0 1px 8px #000;
border-radius: 2px;
-webkit-transition: box-shadow .3s ease-in-out; }
.grid .mosaic-pool-cell {
border-radius: 0px; }
.grid .mosaic-pool-cell .cell-name,
.grid .mosaic-pool-cell .cell-genere {
opacity: 0; }
.grid .cell-text-bg {
background-color: rgba(0, 0, 0, 0.6); }
.grid .mosaic-pool-cell:hover .cell-text-bg {
background-color: transparent;
background-position: -620px -40px, 0 0;
background-repeat: no-repeat;
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 50%);
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png), linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00FFFFFF', EndColorStr='#7F000000'); }
.grid .mosaic-pool-cell:hover .cell-name,
.grid .mosaic-pool-cell:hover .cell-genere {
opacity: 1; }
/* modified by /components/mosaic-resize.js */
/*.grid .cell-thumb.black {background-position: 0 -130px}
.grid .cell-thumb {background-size: 130px auto}*/
.grid .cell-location {
opacity: 0; }
/* ARTIST POOL: LIST-VIEW */
.list .mosaic-pool-cell, .list .mosaic-pool-cell-big {
background-color: #373a42;
box-shadow: 0 1px 5px #000;
background-color: #1b1d22;
-webkit-transition: box-shadow .3s ease-in-out; }
.list .mosaic-pool-cell:hover, .list .mosaic-pool-cell-big:hover {
box-shadow: 0 1px 8px #000;
background-color: #212227; }
.list .cell-name {
color: #b2b9c5;
text-shadow: none;
padding-left: 5px; }
.list .cell-text-bg {
background-image: none;
background-color: transparent; }
.list .cell-thumb {
box-shadow: none; }
.list .mosaic-pool-cell:hover .cell-thumb, .list .mosaic-pool-cell-big:hover .cell-thumb {
box-shadow: none; }
.list .cell-genere > .genre-limit {
text-shadow: none;
color: #757581;
padding-left: 5px; }
.cell-detail-list {
color: #596980; }
.cell-detail-list li:not(:first-child):before {
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -340px -360px;
content: ""; }
.cell-detail-list .feat-play-all {
border-radius: 2px; }
.cell-detail-list .feat-play-all .play-icon {
background-position: -300px -380px; }
.cell-buttons .button {
color: #e6eaf2; }
.cell-buttons .social-button {
border-radius: 11px; }
.cell-buttons .social-button:hover {
background-color: #1f1f1f; }
.cell-buttons .social-button:active {
background-color: #fff; }
.icon-twitter {
background-position: -320px -380px; }
.icon-facebook {
background-position: -360px -380px; }
.cell-buttons .social-button:hover .icon-twitter {
background-position: -340px -380px; }
.cell-buttons .social-button:hover .icon-facebook {
background-position: -380px -380px; }
.list .cell-thumb.black {
background-position: 0 -60px; }
.list .cell-thumb {
background-size: 60px auto; }
.list .mosaic-pool-cell-big .cell-thumb {
background-size: cover;
background-position: center center; }
.list .cell-location {
opacity: 1; }
.list .cell-name {
font-weight: bold; }
/* SELECTED ARTIST DETAILS OVERLAY */
.mosaic-selected-artist {
background: #edf1f5 url(/assets/bg/details-slideshow-spinner-5b89c96d2db21baa268ce71a458eff0e.gif) 130px 105px no-repeat; }
.flip-rotated .mosaic-selected-artist {
background-image: none; }
.mazik-button-element {
color: #FFF;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }
a.mazik-button-element {
color: #FFF;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }
.mosaic-selected-header {
border-radius: 3px 3px 0 0; }
.details-left-icon,
.details-right-icon {
opacity: 0; }
.slideshow-controls .switch-left:hover {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7) 0, transparent 30%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, transparent 30%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1B000000, endColorstr=#00FFFFFF, GradientType=1); }
.slideshow-controls .switch-left:hover .details-left-icon {
background-position: -140px -120px;
opacity: 1; }
.slideshow-controls .switch-right:hover {
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.7) 2%, transparent 30%);
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.7) 2%, transparent 30%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#1B000000, GradientType=1); }
.slideshow-controls .switch-right:hover .details-right-icon {
background-position: -140px -80px;
opacity: 1; }
.mosaic-selected-header .artist-name,
.mosaic-selected-header .bottom {
text-shadow: 0 0 3px #000000; }
.mosaic-selected-header .artist-name {
color: #e3e3e3;
font-weight: bold; }
.mosaic-selected-header .bottom {
color: #b8c0cc; }
.mosaic-selected-play {
border-radius: 3px; }
.mosaic-selected-header .mosaic-selected-play,
.mosaic-selected-header .mosaic-selected-subscribe-mail,
.mosaic-selected-header .mosaic-selected-info {
background-color: #454d57; }
.mosaic-selected-header .mosaic-selected-play {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 0 rgba(255, 255, 255, 0.2); }
.mosaic-selected-header .mosaic-selected-info {
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4); }
.active.mosaic-selected-subscribe-mail {
background-color: #454650; }
.mosaic-selected-subscribe-mail.active:hover .tooltip {
display: none !important; }
.player-info-element-heart .player-info-heart:hover + .tooltip {
display: block; }
.player-info-element-heart .tooltip {
display: none; }
.mosaic-selected-info.info-active {
background-color: #ffffff;
border-color: #3d79cc;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
box-shadow: 0 0 2px 1px #3d79cc; }
.mosaic-selected-info.info-active .mosaic-selected-info-icon {
background-position: 0 -380px; }
.mosaic-selected-header .mosaic-selected-play:active,
.mosaic-selected-header .mosaic-selected-play.active {
background-image: -webkit-linear-gradient(top, #3b424b, #565e68);
background-image: linear-gradient(to bottom, #3b424b, #565e68);
filter: alpha(opacity=25);
-moz-opacity: 0.25;
opacity: 0.25;
cursor: default; }
.mosaic-selected-heart {
cursor: pointer;
cursor: hand;
border-radius: 3px; }
.mosaic-selected-header .mosaic-selected-heart.spinner {
cursor: wait; }
.mosaic-selected-header .mosaic-selected-heart.spinner > span {
background-image: url(/assets/bg/heart-all-spinner-e30cac6d4ad83611e67080bbe9808b0c.gif); }
.mosaic-selected-close {
border-radius: 10px; }
.mosaic-selected-slideshow {
opacity: 0;
background: #343b45; }
.mosaic-selected-artist-container .track-list li:hover {
background-color: #fcfdfe; }
.mosaic-selected-artist-container .track-list li:active {
background-color: #e4e9f1; }
.mosaic-selected-additional-links-title {
font-weight: bold; }
/* SELECTED ARTIST: 3D Rotation */
/*.csstransforms3d .flip-block {-webkit-perspective: 800; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-y: 40%}
.csstransforms3d .flip-side {-webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform .5s}
.csstransforms3d .flip-back {-webkit-transform: rotateY(-180deg)}
.csstransforms3d .flip-front {-webkit-transform: rotateY(0deg)}
.csstransforms3d .flip-rotated .flip-back {-webkit-transform: rotateY(0deg)}
.csstransforms3d .flip-rotated .flip-front{-webkit-transform: rotateY(180deg)}*/
/* SELECTED ARTIST: NO-3D Rotation Fallback*/
.csstransforms3d .flip-side,
.no-csstransforms3d .flip-side {
-webkit-transition: top 0.25s ease-out;
transition: top 0.25s ease-out; }
/* SELECTED ARTIST: DETAILS */
.mosaic-selected-share {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 white; }
.mosaic-selected-social {
color: #919599; }
.mosaic-selected-body {
color: #45484c; }
.mosaic-selected-social ul li a {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1)); }
a.mosaic-selected-web-link {
border-radius: 0 3px 3px 0;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 1px 0 0 rgba(0, 0, 0, 0.1); }
a.mosaic-selected-web-link .mosaic-web-text {
color: #494a4c; }
a.mosaic-selected-web-link:hover .mosaic-web-text {
color: #3d79cc; }
.mosaic-selected-social a:hover {
background-color: #ffffff; }
a.mosaic-selected-facebook-link:hover span {
background-position: 0 -240px; }
a.mosaic-selected-twitter-link:hover span {
background-position: -20px -240px; }
.mosaic-selected-share > span {
color: #919599; }
/*.mosaic-selected-share-google-plus */
/* overlay */
.selected-artist-lightbox-overlay {
background-color: rgba(18, 19, 27, 0.9);
display: none; }
/* collection tittle */
.collection-title-box {
background-image: -webkit-linear-gradient(top, #1c2228, #222930);
background-image: linear-gradient(to bottom, #1c2228, #222930);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.75);
-webkit-transition: margin-top 0.25s ease-out;
transition: margin-top 0.25s ease-out; }
.collection-title-box .center {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.collection-title-box .button-black {
text-transform: uppercase; }
.collection-title-box .center > h3 {
color: #7a8799;
text-transform: uppercase; }
.collection-title-box .center > span {
color: #626467; }
.empty-event-list-label {
color: #b8c0cc;
text-shadow: 1px 2px 1px black; }
/* ARTIST POOL: LIST-VIEW */
.music-sessions.list .mosaic-pool-cell {
background-color: #a1a5ab; }
.music-sessions.list .mosaic-pool-cell-big {
background-image: -webkit-linear-gradient(left, #d6dfe8, #ced8e3);
background-image: linear-gradient(to right, #d6dfe8, #ced8e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d6dfe8', EndColorStr='#ced8e3'); }
.music-sessions.list .mosaic-pool-cell,
.music-sessions.list .mosaic-pool-cell-big {
color: #45484c;
box-shadow: inset 0 0 1px white; }
.music-sessions.list .mosaic-pool-cell,
.music-sessions.list .mosaic-pool-cell-big {
border-radius: 3px; }
.music-sessions.list .mosaic-pool-cell:hover,
.music-sessions.list .mosaic-pool-cell-big:hover {
background-color: #ecf5ff;
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0), 0 0 0 2px #296dcc, 0 0 5px 2px #3a7fde; }
.music-sessions.list .mosaic-pool-cell-big:hover {
background-image: -webkit-linear-gradient(left, #f9fcff, #f3f9ff);
background-image: linear-gradient(to right, #f9fcff, #f3f9ff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9fcff', EndColorStr='#f3f9ff'); }
.music-sessions.list .cell-thumb {
box-shadow: inset 0 0 0 1px #a1a5ab;
border-radius: 3px 0 0 3px; }
.music-sessions.list .mosaic-pool-cell:hover .cell-thumb,
.music-sessions.list .mosaic-pool-cell-big:hover .cell-thumb {
box-shadow: inset 0 0 0 1px #ffffff; }
.music-sessions.list .mosaic-pool-cell-big:after {
content: "";
background: url(/assets/bg/equalizer_light-990ed665aa0765e7c88b9749a2a9f3c3.png) no-repeat 89px 0; }
footer {
width: 100%;
position: relative;
bottom: 0;
z-index: 5;
min-width: 777px; }
.button-black {
padding: 3px 8px;
float: left; }
.tooltip {
padding: 10px 12px;
position: absolute;
top: 17px; }
.tooltip .shadow {
position: absolute;
top: 100%;
left: 40%; }
.tooltip .arrow {
float: left;
height: 1px;
position: relative;
width: 1px; }
.tooltip .arrow:after {
content: '';
height: 8px;
left: -6px;
position: absolute;
top: -6px;
width: 14px; }
.tooltip .arrow:before {
content: '';
width: 14px;
height: 8px;
position: absolute;
top: -6px;
left: -6px; }
.tooltip .shadow.shadow-top {
top: -13px !important; }
.tooltip .arrow.arrow-top {
border-color: transparent transparent #dadfe5 !important; }
.tooltip .arrow.arrow-top:before,
.tooltip .arrow.arrow-top:after {
background-image: none; }
.tooltip.tooltip--left .shadow {
top: 14%;
right: -13px;
left: auto; }
.tooltip.tooltip--left .arrow:before,
.tooltip.tooltip--left .arrow:after {
display: none; }
.signup-login-tooltip.modal-tooltip {
position: absolute;
z-index: 4;
display: none; }
.mail-sunscribe.modal-tooltip {
position: absolute;
z-index: 3;
display: none;
top: -41px;
left: -56px;
width: 120px;
display: none;
text-align: center; }
.mail-sunscribe.modal-tooltip .shadow {
left: 45%; }
.mail-sunscribe.modal-tooltip.not-logged {
position: absolute;
z-index: 3;
display: none;
top: -52px;
left: -120px;
width: 264px;
display: none;
cursor: normal;
text-align: center; }
.mail-sunscribe p {
margin: 0;
paddin: 0; }
.mosaic-selected-subscribe-mail:hover .mail-sunscribe.modal-tooltip {
display: block; }
.signup-login-tooltip.play-all-songs {
position: absolute;
z-index: 3;
display: none; }
.signup-login-tooltip .signup-link {
display: inline-block;
padding: 5px; }
.tooltip-heart.tooltip.black {
width: 130px;
margin-left: -50px;
white-space: nowrap;
left: 0;
z-index: 999; }
.tooltip-shuffled.tooltip {
width: 130px;
margin-left: -49px;
white-space: nowrap;
left: 0;
z-index: 1000;
top: -27px; }
.ar .tooltip-shuffled.tooltip {
width: 180px;
left: -20px; }
.modal-tooltip.heart-song,
.modal-tooltip.heart-collection-tooltip {
z-index: 999; }
.signup-login-tooltip.add-songs {
width: 281px !important; }
.signup-login-tooltip.tooltip-suggestions {
left: -89px !important; }
.player-menu-suggestions .signup-login-tooltip {
left: -110px !important; }
.player-menu-suggestions .signup-login-tooltip .shadow {
left: 160px !important; }
.mail-sunscribe .signup-link-subscribe {
display: inline-block;
padding: 5px; }
.player-controls {
height: 43px; }
.player-controls-container {
height: 32px;
margin: 0 255px 0 0; }
html[lang="ar"] .player-controls-container {
margin: 0 225px 0 0; }
.playback-controls {
height: 100%; }
.playback-controls-buttons,
.player-menu,
.player-info {
margin: 0;
padding: 0; }
.playback-controls-buttons {
height: 40px;
position: absolute;
left: 0;
top: 1px; }
.playback-control-item {
float: left; }
.playback-control-item:not(.random) {
margin-top: 5px; }
.playback-control-item-prev,
.playback-control-item-play {
position: relative; }
.playback-control-item-play:after,
.playback-control-item-play:before {
display: block;
position: absolute;
content: "";
height: 100%;
width: 1px;
z-index: 1;
top: 0; }
.playback-control-item-play:before {
left: 0; }
.playback-control-item-play:after {
right: 0; }
.playback-control-item-next {
position: relative; }
.playback-control-item-prev.disabled:after,
.playback-control-item-next.disabled:after {
width: 27px;
height: 31px;
position: absolute;
top: 0;
left: 0;
z-index: 2; }
.playback-control-item-next.disabled:after {
left: -1px; }
.playback-control-item a {
display: block;
overflow: hidden; }
.player-info-random {
height: 15px; }
.playback-prev {
padding: 11px 7px 11px 6px; }
.playback-next {
padding: 11px 6px 11px 7px; }
.playback-random {
padding: 7px 0; }
.playback-play {
padding: 9px 10px; }
/*.playback-play.paused {padding: 9px 10px}*/
.radio-icon {
width: 16px;
height: 15px; }
.playback-prev-icon {
width: 13px;
height: 9px; }
.playback-play-icon {
width: 11px;
height: 13px; }
.playback-next-icon {
width: 13px;
height: 9px; }
.player-info {
height: 100%;
margin-left: 112px; }
.player-info-element {
text-align: center; }
.player-info-element-heart {
text-align: center;
padding-top: 6px; }
.player-info-element-heart .tooltip {
left: -18px;
padding: 5px;
top: -27px;
width: 52px;
display: none; }
.player-info-element-heart .tooltip.yellow {
padding: 10px 12px !important;
left: -102px;
padding: 5px;
top: -54px;
width: 280px;
display: none;
font-size: 12px; }
.player-info-heart {
display: inline-block;
float: none;
padding: 4px 6px 6px;
border-radius: 3px 0 0 3px;
border-width: 0;
margin-right: 1px; }
.player-info-heart .icon {
width: 10px;
height: 11px;
display: block; }
.player-info-element-embed {
padding-top: 6px;
position: relative; }
.player-info-element-embed .tooltip {
display: none; }
.player-info-embed {
display: inline-block;
float: none;
padding: 4px 5px 6px 6px;
position: relative;
border-radius: 0 3px 3px 0;
border-width: 0; }
.player-info-embed .icon {
width: 13px;
height: 11px; }
.embed-player-container {
top: -221px !important;
width: 234px !important;
height: auto;
text-align: left;
left: -110px;
padding: 12px 13px 9px !important; }
.embed-player-container > span {
color: #525a66 !important;
display: block;
margin: 0 auto 5px;
font-size: 12px;
text-shadow: none; }
.embed-player-container label:first-child {
margin-right: 5px; }
.embed-player-container label:last-child {
margin-left: 5px; }
.embed-player-container label {
margin-bottom: 5px;
display: inline-block; }
.embed-player-container label input[type="radio"] {
margin-left: 4px; }
.embed-player-container textarea {
width: 227px;
margin: 0 auto;
height: 100px;
font-size: 11px; }
.embed-player-container .shadow {
left: 44%; }
.embed-player-container .share-row {
padding-top: 9px;
border-top: 1px solid #bfc4cc;
margin: 7px 0 0; }
.embed-player-container .share-row > span {
margin-right: 18px; }
.embed-player-container .share-row .facebook .icon {
background-position: -320px -280px;
width: 52px;
height: 20px; }
.embed-player-container .share-row .twitter .icon {
background-position: -380px -280px;
width: 56px;
height: 20px; }
#player-google-plus {
margin-top: -1px !important;
position: absolute; }
.player-info-random:hover .random-player-container {
display: block; }
.player-info-random:active .radio-icon {
background-position: -480px -280px; }
.random-player-container {
top: -55px;
display: none;
left: -1px; }
.random-player-container .message {
line-height: 1.5;
width: 140px;
display: block;
text-shadow: none;
text-align: center;
font-size: 13px; }
.random-player-container .shadow {
left: 13px; }
.player-info-element-title {
width: 190px;
line-height: 3.5;
display: inline-block;
height: 100%;
position: relative; }
.player-info-element-title:after {
content: '';
background: url(/assets/bg/song-title-overlay-2523a10813ad6d44035c60d271b686ba.png) no-repeat top left transparent;
position: absolute;
width: 32px;
height: 40px;
top: 1px;
right: -8px;
z-index: 1; }
.player-info-element-title:before {
content: '';
background: url(/assets/bg/song-title-overlay-left-f10a88b34010699685e74405ae44e652.png) no-repeat top right transparent;
position: absolute;
width: 32px;
height: 40px;
top: 1px;
left: -8px;
z-index: 1; }
.player-info-song-title {
font-size: 10px;
margin: 0;
position: relative;
overflow: hidden;
line-height: 17px;
padding-left: 1px;
width: 55%;
text-align: left; }
.player-info-song-title-text {
overflow: hidden;
margin: 0;
white-space: nowrap;
cursor: pointer;
text-overflow: ellipsis; }
.player-info-song-title-text:hover {
text-decoration: underline; }
.player-info-element-progress {
margin-right: 110px;
padding: 0 17px 0 7px; }
.player-info-progress-container {
position: relative;
min-width: 150px; }
.player-info-progress-bar {
height: 0;
width: 100%;
border-width: 1px 0;
margin-top: 22px; }
.player-info-loaded-bar {
position: absolute;
height: 2px;
width: 0;
top: 0;
left: 0;
border-width: 1px 0; }
.player-info-play-bar {
position: absolute;
height: 5px;
width: 0;
top: 0;
left: 0; }
.player-info-scroll-button {
position: relative;
top: -6px;
z-index: 1;
/*left: -5px*/ }
.player-info-scroll-button .tooltip {
width: 75px;
padding: 5px;
position: absolute;
top: -35px;
left: -33px;
display: none;
white-space: nowrap; }
.player-info-scroll-icon {
width: 13px;
height: 13px; }
.player-info-element-share {
width: 76px;
padding-top: 8px;
position: relative; }
.player-info-share {
display: inline-block;
float: none; }
.embed-user-collection-player {
cursor: pointer; }
.embed-user-collection-player .tooltip.embed-and-shared-tooltip {
display: none;
position: absolute;
width: 105px;
padding: 4px 0;
margin: 0;
line-height: 1;
text-align: center;
top: -19px;
left: 95px; }
.embed-user-collection-player:hover .tooltip.embed-and-shared-tooltip {
display: block; }
.share-user-collection-player {
position: absolute;
right: 12px;
top: 8px;
padding: 3px 8px 3px 6px;
font-size: 11px;
border-radius: 0 3px 3px 0 !important;
margin-top: 2px;
cursor: pointer; }
.player-info-element-share .tooltip {
width: 67px;
height: 15px;
position: absolute;
top: -46px;
left: -5%;
display: none; }
.player-info-share-link {
float: left;
margin-right: 5px; }
.tooltip .facebook {
margin-top: -2px; }
.tooltip .twitter,
.tooltip .google-plus {
margin-top: -1px; }
.tooltip .google-plus {
margin-right: 0; }
.tooltip .facebook .icon {
width: 17px;
height: 20px; }
.tooltip .twitter .icon {
width: 16px;
height: 16px; }
.tooltip .google-plus .icon {
width: 16px;
height: 16px; }
.player-info-element-volume {
padding-top: 8px;
position: relative;
width: 47px;
margin-right: 14px; }
.player-info-volume {
height: 16px;
display: inline-block;
position: relative;
top: 3px; }
.player-info-volume .icon {
width: 13px;
height: 13px; }
.volume-container {
width: 26px;
height: 10px;
display: inline-block;
vertical-align: 3px;
margin-left: 3px; }
.playlist .volume-container {
position: absolute;
top: -17px;
left: -3px;
width: 41px;
height: 21px;
display: none; }
.small-player-info-progress-container > .small-counter {
font-size: 10px;
display: inline-block;
line-height: 20px;
position: relative;
top: -4px; }
.small-player-info-progress-container > .small-progress-tooltip {
display: none;
position: relative;
top: -56px;
left: -61px;
z-index: 1; }
.small-player-info-progress-container > .small-progress-tooltip > .progress-container {
border-width: 1px;
width: 190px;
height: 26px;
display: block;
position: relative; }
.small-progress-tooltip > .progress-container > .progress-positioner {
width: 172px;
display: block;
margin: 3px 0 0 9px;
position: absolute; }
.small-player-info-progress-container > .small-progress-tooltip > .arrow {
width: 14px;
height: 9px;
display: block;
margin-top: -1px;
left: 89px;
position: relative;
z-index: 2; }
.inner-container {
width: 26px;
height: 10px;
position: relative; }
.volume-progress-container {
width: 26px;
height: 10px;
position: absolute;
top: 0;
left: 0; }
.volume-progress-bar {
width: 0;
height: 10px;
position: absolute;
top: 0;
left: 0; }
.mask-overlay {
width: 26px;
height: 10px;
position: absolute; }
#volume-slider,
.volume-slider {
top: 0; }
#volume-slider .ui-slider-handle,
.volume-slider .ui-slider-handle {
margin-left: -0.2em;
top: 0;
height: 10px;
width: 2px; }
/* This still is the same as mosaic-menu */
.show-favorites .tooltip {
display: none;
font-size: 12px;
position: absolute;
left: -100px;
width: 344px; }
.show-favorites .signup-login-tooltip {
top: -60px;
z-index: 9999; }
.show-favorites.mosaic-extended .signup-login-tooltip {
top: 40px;
z-index: 100; }
.show-favorites.mosaic-extended .shadow {
top: -13px; }
.show-favorites.mosaic-extended .signup-login-tooltip .arrow {
-webkit-transform: scaleY(-1);
transform: scaleY(-1); }
.player-menu {
height: 100%;
float: right;
width: 276px; }
.player-menu-item {
float: left;
height: 100%;
text-align: center; }
.player-menu-my-collections {
position: relative;
width: 174px; }
.player-menu-my-collections .signup-login-tooltip,
.player-menu-my-collections .user-collection-info-share-container,
.player-menu-my-collections .embed-player-container {
position: absolute;
top: -211px !important;
left: 4px;
width: 280px;
display: none;
z-index: 1; }
.player-menu-my-collections .embed-player-container .shadow {
left: 51%; }
.player-menu-my-collections .signup-login-tooltip {
top: -60px !important;
left: -175px !important;
width: 281px; }
.player-menu-my-collections .add-songs-to-collection {
position: absolute;
top: -75px;
left: 24px;
width: 250px;
display: none; }
.player-menu-my-collections .add-songs-to-collection .shadow {
left: 49%; }
.player-menu-my-collections .user-collection-info-share-container {
width: 67px;
left: 160px;
top: -48px; }
.user-collection-info-share-container .facebook {
margin-top: -2px; }
.user-collection-info-share-container .twitter,
.user-collection-info-share-container .google-plus {
margin-top: -1px; }
.user-collection-info-share-container .google-plus {
margin-right: 0; }
.user-collection-info-share-container .facebook .icon {
width: 17px;
height: 20px; }
.user-collection-info-share-container .twitter .icon {
width: 16px;
height: 16px; }
.user-collection-info-share-container .google-plus .icon {
width: 16px;
height: 16px; }
.player-info-share-link {
float: left;
margin-right: 5px; }
.player-menu-suggestions .tooltip {
font-size: 12px;
position: absolute;
top: -60px;
left: -252px;
width: 324px;
display: none; }
.mosaic-selected-heart .tooltip {
font-size: 12px;
position: absolute;
top: -51px;
left: -112px;
width: 278px;
display: none;
color: #525A66; }
.player-menu-suggestions .tooltip a {
width: 55px; }
.player-menu-suggestions .tooltip .shadow {
position: absolute;
top: 100%;
left: 287px; }
.player-menu-suggestions {
position: relative; }
.player-menu-suggestions .player-menu-item-button {
width: 81px; }
.player-menu-suggestions .player-menu-item-button .text {
vertical-align: -3px; }
.player-menu-suggestions .player-menu-item-button:before {
display: block;
position: absolute;
width: 11px;
height: 100%;
content: "";
left: -11px;
top: 0; }
.player-menu-suggestions .notification-badge {
position: absolute;
margin: 0;
padding: 3px 0 0;
width: 23px;
height: 22px;
top: -6px;
right: 5px;
line-height: 13px;
display: none; }
.player-menu-item-button {
display: inline-block;
padding: 0 10px;
cursor: pointer;
width: 143px;
text-align: left;
line-height: 40px; }
.player-menu-my-collections .player-menu-item-button:after {
display: block;
position: absolute;
width: 11px;
height: 100%;
content: "";
right: 0;
top: 0; }
.player-menu-my-collections .player-menu-item-button {
float: left; }
.player-menu-my-collections .player-menu-item-button .text {
vertical-align: -3px; }
.player-menu-my-collections .player-menu-item-button .icon {
float: none;
display: inline-block; }
.player-menu-my-collections .player-menu-item-button .heart-collection-icon {
width: 24px;
height: 17px;
margin: 0 8px 0 0;
vertical-align: -8px; }
.player-menu-my-collections .player-menu-item-button .gear-icon {
width: 10px;
height: 11px;
margin: 17px 3px 0 12px;
float: right; }
.player-menu-my-collections .player-menu-item-button .gear-icon:after {
content: "";
border-width: 3px;
display: inline-block;
margin: 1px -10px 0 0;
float: right; }
.player-menu-my-collections .player-menu-item-button .open.gear-icon:after {
content: "";
border-width: 3px;
display: inline-block;
margin: 5px -10px 0 0;
float: right; }
/* Playlist */
.player-list {
width: 100%;
background-color: #202226;
overflow: hidden; }
.player-suggestions {
overflow: hidden;
overflow-x: visible;
float: left;
width: 100%;
background-color: #202226; }
.player-suggestions {
height: 116px; }
.player-suggestions-container {
height: 0; }
.player-suggestions .empty-content {
display: none; }
.player-suggestions.empty .empty-content {
margin: 45px auto 0;
width: 746px;
height: 29px;
display: block; }
.player-suggestions.empty .player-suggestions-list {
display: none; }
.player-suggestions-list li {
background-color: #1d1f22;
display: block;
float: left;
padding: 14px 16px;
position: relative;
width: 261px;
margin-right: 15px; }
.player-list-item {
width: 163px;
height: 38px;
padding: 1px;
display: inline-block;
margin-left: 8px;
position: relative;
float: left; }
.player-list-item:first-child {
margin-left: 0; }
.player-list-item-cover {
float: left;
margin-right: 7px;
width: 38px;
height: 38px;
position: relative;
overflow: hidden; }
.player-list-item-cover:after,
.player-list-item-cover:before {
content: '';
width: 38px;
height: 38px;
position: absolute;
top: 0;
left: 0; }
.player-list-item-cover-img {
width: 38px;
height: 76px;
position: absolute;
top: 0;
left: 0; }
.player-list-item-title {
padding: 3px 0; }
.draggable .player-list-item-title {
margin-right: 4px; }
.player-list-item-name {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
width: 104px;
overflow: hidden; }
.player-list-item-name:first-child {
margin-bottom: 5px; }
/* player-list-item hover states */
.player-list-item-overlay {
position: absolute;
width: 150px;
height: 38px;
top: 1px;
left: 1px;
display: none; }
.player-list-item.hover .player-list-item-overlay,
.player-list-item:hover .player-list-item-overlay {
display: block; }
.player-list-item-overlay .close-icon {
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px; }
.player-list-item-overlay .close-icon .icon {
width: 20px;
height: 20px; }
.play-pause-icon-container {
margin: 5px auto;
width: 32px;
height: 23px;
padding: 3px 3px 3px 4px; }
.player-list-item-overlay .play-pause-icon {
display: inline-block;
padding: 4px 10px; }
/* Player Suggestions */
.band .player-list-item-overlay {
width: 99%; }
.band .player-list-item-name:last-child .icon {
width: 10px;
height: 10px;
margin: 0 2px;
display: inline-block;
vertical-align: text-top; }
.band .play-pause-icon-container {
width: 65px;
height: 25px; }
.band .close-icon {
display: none; }
.band .play-pause-icon-container .play-pause-icon {
margin: 0 6px 0 3px; }
/* jsScroll Bar */
#player .jspDrag {
height: 7px;
margin-top: 5px; }
.player-disabled-mask {
position: absolute;
height: 42px;
left: 35px;
right: 276px;
top: 1px;
z-index: 2; }
.ui-state-highlight {
width: 348px;
height: 55px;
padding: 16px 0 !important;
margin-left: 0;
display: inline-block;
border: solid 1px #2e7db2 !important;
background: #32363C !important; }
.player-list-item + .ui-state-hightlight {
margin-right: 8px; }
.embed-collection-player {
padding: 2px 6px; }
#embed-collection-player {
top: 320px !important;
margin: 0 auto;
display: none; }
#embed-collection-player.collapsed {
top: 138px !important; }
#embed-collection-player.collapsed .shadow {
top: -13px;
left: 47%;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Safari and Chrome */ }
/* Suggestions */
.player-suggestions-container {
background-color: #202226;
width: 100%;
overflow: hidden;
bottom: 44px;
position: absolute; }
.player-list header,
.player-suggestions-container header {
box-shadow: none;
padding: 20px;
height: auto;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
background: #2b2f38;
/* Old browsers */
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2f38), color-stop(100%, #242730));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b2f38 0%, #242730 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: linear-gradient(to bottom, #2b2f38 0%, #242730 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2f38', endColorstr='#242730',GradientType=0 );
/* IE6-9 */ }
.player-list header p,
.player-suggestions-container header p {
margin: 0;
color: #747a89;
font-size: 16px;
text-shadow: 0 -1px 0 #000;
float: left; }
.player-list header span,
.player-suggestions-container header span {
color: #b6b6b8;
font-size: 10px;
float: right;
margin-top: 4px; }
.player-list header span .icn-play-time,
.player-suggestions-container header span .icn-play-time {
margin-right: 3px; }
.player-suggestions-list {
padding: 15px 25px 0;
height: 85px;
margin: 0;
list-style: none;
width: 999999px; }
.player-suggestions-list li {
background-color: #1d1f22;
display: block;
float: left;
padding: 14px 16px;
position: relative;
width: 261px;
margin-right: 15px; }
.player-suggestions-list li:hover {
background-color: #272930; }
.player-suggestions-list li .number {
color: #858c99;
font-size: 12px;
margin-right: 15px;
float: left;
line-height: 55px; }
.player-suggestions-list li .player-sugesstion-img img {
width: 100%; }
.player-suggestions-list li .player-sugesstion-img {
float: left;
overflow: hidden;
height: 55px;
width: 55px;
display: block; }
.player-suggestions-list li .content {
margin-left: 93px;
display: block; }
.player-suggestions-list li .content p {
color: #fff;
margin-top: 0;
margin-bottom: 9px;
color: #b2b9c5; }
.player-suggestions-list li .content .title {
color: #97a5ca;
font-size: 11px;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
display: block;
margin-bottom: 1px; }
.player-suggestions-list li .content .genre {
color: #757581;
font-size: 10px; }
.player-suggestions-list li .reorder {
position: absolute;
right: 16px;
top: 23px; }
.player-suggestions-list li .reorder:hover {
cursor: move; }
.player-suggestions-list li .remove {
display: none; }
.player-suggestions-list li:hover .remove {
display: inline-block; }
.player-suggestions-container a.suggestion-arrow {
position: absolute;
right: 0;
z-index: 2;
opacity: 0;
display: block;
-webkit-transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1); }
.player-suggestions-container:hover a.suggestion-arrow {
display: block;
opacity: 1; }
.player-suggestions-container a.suggestion-arrow.slide-left {
top: 86px; }
.player-suggestions-container a.suggestion-arrow.slide-right {
top: 119px; }
.player-suggestions-container .jspHorizontalBar {
height: 0; }
.player-suggestions-list li .hover-state {
opacity: 0;
-webkit-transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
height: 100%;
width: 40px;
display: block;
position: absolute;
top: 0;
left: 0; }
.player-suggestions-list li:hover .hover-state {
opacity: 1; }
.player-suggestions-list li .hover-state .btn-wrap {
border-radius: 0 2px 2px 0;
position: absolute;
top: 8px;
left: 0;
background-color: #272930;
padding: 3px; }
.player-suggestions-list li .hover-state .btn-wrap a {
display: block; }
.player-suggestions-list li .hover-state .btn-wrap a.icn-play-suggestion {
margin-bottom: 3px; }
/* Playlist */
.playlist {
width: 0;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
z-index: 4;
background-color: #202226;
border-left: 1px solid #000;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; }
.playlist.events {
z-index: -1; }
.playlist header {
background-color: #242830;
box-shadow: none;
padding: 26px 20px;
height: auto;
width: 100%;
display: table;
width: 309px; }
.playlist header span.playlist-header-left p {
margin: 0;
color: #747a89;
float: left;
font-size: 16px;
text-shadow: 0 -1px 0 #000;
display: inline-table; }
.playlist header span.playlist-header-left .embed-user-collection-player {
margin-top: 2px;
float: none;
display: inline-table; }
.playlist header span.playlist-header-left .embed-user-collection-player .embed-and-shared-tooltip {
top: 0;
left: 74px; }
.playlist header span.playlist-header-left {
float: left; }
.playlist header span.playlist-header-right,
.playlist header span.playlist-header-left {
color: #b6b6b8;
font-size: 10px;
display: table-cell; }
.playlist header span.playlist-header-right {
float: right; }
.playlist header span .icn-play-time {
margin-right: 3px; }
.playlist ul {
padding: 0;
margin: 0;
list-style: none; }
.playlist li {
border-top: 1px solid #26292e;
border-bottom: 1px solid #1a1c20;
background-color: #1d1f22;
display: block;
padding: 16px;
position: relative; }
.playlist li.playlist-empty {
border: 0;
background-color: transparent; }
.playlist li.playlist-empty:hover {
border: 0;
background-color: transparent; }
.playlist .playlist-empty {
text-align: center;
padding: 0 !important;
position: absolute !important;
top: 45%;
width: 100%; }
.playlist .playlist-empty p {
color: #60656f;
font-size: 15px;
line-height: 20px; }
.playlist .playlist-empty strong {
color: #60656f;
font-weight: bold; }
.playlist li:hover {
background-color: #272930; }
.playlist.events li:hover {
background-color: #1D2126; }
.playlist li .number {
color: #858c99;
font-size: 12px;
margin-right: 10px;
float: left;
line-height: 55px;
min-width: 14px; }
.playlist li img {
float: left; }
.playlist li .content {
margin-left: 93px;
display: block; }
.playlist li .content p {
color: #fff;
margin-top: 0;
margin-bottom: 9px;
color: #b2b9c5; }
.playlist li .content .title {
color: #97a5ca;
font-size: 11px;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
display: block;
margin-bottom: 1px;
cursor: pointer; }
.playlist li .content .genre {
color: #757581;
font-size: 10px; }
.playlist li .reorder {
position: absolute;
right: 16px;
top: 23px; }
.playlist li .reorder:hover {
cursor: move; }
.playlist li .remove {
display: none; }
.playlist li:hover a.close-icon {
width: 15px;
height: 15px;
display: inline-block; }
.playlist li:hover .remove {
display: inline-block; }
.playlist .fade {
width: 100%;
height: 230px;
position: absolute;
z-index: 100;
display: block;
bottom: 0;
left: 0;
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(31, 33, 37, 0)), color-stop(34%, rgba(31, 33, 37, 0.58)), color-stop(41%, rgba(31, 33, 37, 0.58)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(31, 33, 37, 0) 0%, rgba(31, 33, 37, 0.58) 34%, rgba(31, 33, 37, 0.58) 41%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: linear-gradient(to bottom, rgba(31, 33, 37, 0) 0%, rgba(31, 33, 37, 0.58) 34%, rgba(31, 33, 37, 0.58) 41%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#001f2125', endColorstr='#941f2125',GradientType=0 );
/* IE6-9 */ }
.playlist-wrap .jspPane {
margin-top: 0; }
/* scrollbar */
.playlist-wrap .jspVerticalBar {
border-left: 0;
width: 5px; }
.playlist-wrap .jspTrack {
background-color: transparent;
background: #dde;
position: relative;
height: 534px;
background-color: rgba(0, 0, 0, 0.4); }
.playlist-wrap .jspDrag {
border: 0;
box-shadow: none;
background-color: #dce2e9;
background-image: none;
height: 46px;
top: 0;
background-image: -webkit-gradient(linear, left top, right top, from(#6b7079), to(#50565e)); }
.playlist-note {
background-color: #09080b;
border: 1px solid #1a1d24;
position: absolute;
top: 30px;
right: 390px;
z-index: 10;
width: 149px;
height: 114px;
padding: 18px; }
.playlist-note:after,
.playlist-note:before {
left: 100%;
top: 24px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none; }
.playlist-note:after {
border-color: rgba(9, 8, 11, 0);
border-left-color: #09080b;
border-width: 13px;
margin-top: -13px; }
.playlist-note:before {
border-color: rgba(26, 29, 36, 0);
border-left-color: #1a1d24;
border-width: 14px;
margin-top: -14px; }
.playlist-note p.title {
margin-bottom: 15px;
color: #00adee;
font-size: 12px; }
.playlist-note p {
margin-bottom: 0;
color: #797f92;
font-size: 11px;
line-height: 14px;
margin-top: 0;
font-family: 'ArialRoundedMT', "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; }
.playlist-note .hide {
position: absolute;
right: 18px;
top: 18px; }
.icn-play-suggestion {
background-position: -667px -298px;
width: 31px;
height: 30px; }
.icn-play-suggestion:hover {
background-position: -699px -298px; }
.icn-info-suggestion {
background-position: -667px -329px;
width: 31px;
height: 30px; }
.icn-info-suggestion:hover {
background-position: -699px -329px; }
.player-menu-my-collections.selected .player-menu-item-button,
.player-menu-suggestions.selected .player-menu-item-button {
text-shadow: 0 -1px 0 #06425a; }
.playlist li .hover-state {
opacity: 0;
-webkit-transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
transition: opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
background-color: rgba(39, 41, 48, 0.8);
height: 55px;
width: 55px;
display: block;
position: absolute;
top: 0;
left: 0; }
.playlist li:hover .hover-state {
opacity: 1; }
.playlist li .hover-state .btn-wrap {
border-radius: 2px;
position: absolute;
top: 16px;
left: 38px;
width: 58px;
height: 58px;
background-color: #272930; }
.playlist li .hover-state .btn-wrap a {
float: left; }
.playlist li .hover-state .btn-wrap a.icn-play-suggestion {
margin-right: 1px; }
.playlist-note {
background-color: #09080b;
border: 1px solid #1a1d24;
position: absolute;
top: 30px;
right: 390px;
z-index: 10;
width: 149px;
height: 114px;
padding: 18px;
display: none; }
.icn-play-playlist {
background-position: -667px -260px;
width: 37px;
height: 37px;
top: 9px;
left: 9px; }
.player-playlist {
height: auto !important;
width: 350px;
overflow-y: scroll;
overflow-x: hidden; }
.mosaic-pool-container .jspHorizontalBar {
display: none; }
.mosaic-pool-container .jspVerticalBar .jspTrack {
height: 100% !important;
margin-top: -3px;
z-index: 10; }
.player-playlist li .player-sugesstion-img {
float: left;
overflow: hidden;
height: 55px;
width: 55px;
display: block; }
.player-playlist li .player-sugesstion-img img {
width: 100%; }
footer {
box-shadow: inset 0 1px 0 #3b434e;
background: #2c323a;
background: -webkit-linear-gradient(top, #2c323a 0%, #22272d 100%);
background: linear-gradient(to bottom, #2c323a 0%, #22272d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c323a', endColorstr='#22272d',GradientType=0 );
border-radius: 2px;
z-index: 500; }
.button-black {
background-color: #484d54;
border-color: rgba(0, 0, 0, 0.4);
border-style: solid;
border-width: 1px;
background-clip: padding-box;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
border-radius: 3px; }
.button-black:hover {
background-color: #575d66; }
.button-black:active {
background-color: #4c5159;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000', EndColorStr='#33FFFFFF'); }
.button-black span {
color: #b8c0cc; }
.tooltip {
font-size: 11px;
font-weight: bold;
color: #525a66;
font-family: Helvetica;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
/* Safari */
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.3); }
.tooltip.embed-and-shared-tooltip {
display: none;
width: 130px;
top: -27px;
left: -49px; }
.tooltip.embed-and-shared-tooltip .hidden {
display: none; }
.tooltip.random-tooltip {
display: none;
width: 110px;
top: -33px;
left: -46px; }
.tooltip.random-tooltip .hidden {
display: none; }
.tooltip.black {
background: #000;
color: #b8c0cc;
padding: 4px; }
.tooltip.black .arrow {
border-color: #000000 transparent transparent; }
.tooltip.black.tooltip--left .arrow {
border-color: transparent transparent transparent #000000; }
.tooltip .arrow {
border-style: solid;
border-width: 6px; }
.tooltip.yellow {
background-color: #FFFBCC; }
.tooltip.gray {
background-color: #dadfe5; }
.tooltip.yellow .arrow {
border-color: #FFFBCC transparent transparent; }
.tooltip.gray .arrow {
border-color: #dadfe5 transparent transparent; }
.tooltip .arrow:after {
background-color: transparent;
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -180px 0;
background-repeat: no-repeat;
opacity: 0.2; }
.tooltip .arrow:before {
background-color: transparent;
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -160px 0;
background-repeat: no-repeat; }
.signup-login-tooltip,
.add-songs-to-collection {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
.mail-sunscribe a {
color: #255dbd; }
.mail-sunscribe .signup-link-subscribe,
.signup-login-tooltip .signup-link {
background-color: #3373cc;
border: 1px solid #325692;
font: 12px Arial;
font-weight: bold;
color: #e6eaf2;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
border-radius: 2px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
/* ie */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 1px rgba(255, 255, 255, 0.4); }
.signup-login-tooltip .login-link {
color: #255dbd; }
.draggable {
cursor: move;
cursor: -webkit-grab; }
.draggable:active {
cursor: move;
cursor: -webkit-grabbing; }
.player-controls {
background: rgba(52, 57, 69, 0.95);
border-top: 1px solid #000000;
box-shadow: inset 0 1px 0 rgba(226, 235, 255, 0.2); }
.player-controls-container {
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #23272f, #2c3039);
background-image: linear-gradient(to bottom, #23272f, #2c3039);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#23272f', EndColorStr='#2c3039');
box-shadow: inset 0 -1px 0 rgba(105, 111, 124, 0.6), inset 0 1px 1px rgba(0, 0, 0, 0.3); }
.playback-controls-buttons,
.player-menu,
.player-info {
list-style: none; }
.playback-control-item-play:after,
.playback-control-item-play:before {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-repeat: no-repeat;
background-position: -260px -360px; }
.playback-control-item-prev.disabled:after {
content: ''; }
.playback-control-item-next.disabled:after {
content: '';
border-radius: 0 3px 3px 0; }
.playback-control-item a {
background-color: #5b6573;
background-image: -webkit-linear-gradient(top, rgba(103, 112, 126, 0.95), rgba(80, 89, 103, 0.95));
background-image: linear-gradient(to bottom, rgba(103, 112, 126, 0.95), rgba(80, 89, 103, 0.95));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FE67707e', EndColorStr='#FE505967');
box-shadow: inset 0 1px 0 rgba(226, 235, 255, 0.2); }
.playback-control-item a:hover {
border: none;
background-color: #606a78;
background-image: -webkit-linear-gradient(top, rgba(108, 118, 131, 0.95), rgba(84, 94, 108, 0.95));
background-image: linear-gradient(to bottom, rgba(108, 118, 131, 0.95), rgba(84, 94, 108, 0.95));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FE67707e', EndColorStr='#FE505967');
/* ie */ }
.playback-control-item a:active {
background-color: #4b5366;
background-image: -webkit-linear-gradient(top, rgba(70, 77, 88, 0.95), rgba(81, 89, 100, 0.95));
background-image: linear-gradient(to bottom, rgba(70, 77, 88, 0.95), rgba(81, 89, 100, 0.95));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FE67707e', EndColorStr='#FE505967');
/* ie */ }
.playback-control-item-play.random {
color: #bec3d2;
text-shadow: 0 -1px 0 #232b37;
box-shadow: inset 0 1px 0 #4e6480;
background: #3a4a5f;
background: -webkit-linear-gradient(top, #3a4a5f 0%, #2d394a 100%);
background: linear-gradient(to bottom, #3a4a5f 0%, #2d394a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a4a5f', endColorstr='#2d394a',GradientType=0 );
height: 100%;
margin-right: 10px; }
.player-info-random {
border-radius: 3px 0 0 3px; }
.playback-play.paused .playback-play-icon,
.player-list-item.playing .playback-play-icon {
background-position: -140px -40px; }
.playback-next {
border-radius: 0 3px 3px 0; }
.playback-random {
border-radius: 3px 0 0 3px; }
.playback-prev-icon {
background-position: -160px -40px; }
.playback-play-icon {
background-position: -140px -20px; }
.playback-next-icon {
background-position: -160px -20px; }
.player-info-element-heart {
position: relative; }
.player-info-element-heart.active .button {
background: #e9ecef;
border: 1px solid #4489ea;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF');
/* ie */
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.75), 0 0 4px 1px rgba(61, 121, 204, 0.7); }
.player-info .player-info-element-heart.active .button {
background: #e9ecef;
box-shadow: none;
height: 8px; }
.player-info-element-heart.active .icon {
background-position: -439px -583px; }
.player-info-element-random a {
box-shadow: none; }
.player-info-song-title {
color: #b8becc; }
.player-info-progress-bar {
background-color: #1d1f24;
border-style: solid;
border-color: #070708 transparent #1b1c21;
border-radius: 3px;
box-shadow: inset 0 1px 0 #141619, inset 0 -1px 0 #202227; }
.player-info-loaded-bar {
cursor: pointer;
background-color: #747a8b;
border-color: #747a8b transparent #373b42;
border-style: solid;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #454a54; }
.player-info-play-bar {
cursor: pointer;
background: #c3ccd9;
background-image: -webkit-linear-gradient(top, #dfe4eb, #a3b0c3);
background-image: linear-gradient(to bottom, #dfe4eb, #a3b0c3);
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dfe4eb', EndColorStr='#a3b0c3');
/* ie */
border-radius: 3px;
box-shadow: inset 0 1px 0 white, 0 1px 0 #0e0f12; }
.player-info-scroll-button .tooltip {
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.player-info-scroll-button:hover .player-info-scroll-icon {
background-position: -280px -380px; }
.player-info-scroll-icon {
background-position: -280px -360px;
cursor: move; }
.tooltip .facebook .icon {
background-position: -140px -180px; }
.tooltip .twitter .icon {
background-position: -200px -160px; }
.tooltip .google-plus .icon {
background-position: -200px -180px; }
.user-collection-info-share-container .facebook .icon {
background-position: -140px -180px; }
.user-collection-info-share-container .twitter .icon {
background-position: -200px -160px; }
.user-collection-info-share-container .google-plus .icon {
background-position: -200px -180px; }
.player-info-volume .icon {
background-position: -140px -240px; }
.small-player-info-progress-container .small-counter {
color: #b8becc; }
.small-player-info-progress-container > .small-progress-tooltip > .progress-container {
border-style: solid;
border-color: #71767c #52585f #494f55;
background-color: #40474f;
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 1px 0 #0f1012;
background-image: -webkit-linear-gradient(top, #4e555c, #32383f);
background-image: linear-gradient(to bottom, #4e555c, #32383f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e555c', EndColorStr='#32383f'); }
.small-player-info-progress-container > .small-progress-tooltip > .arrow {
background: url(/assets/bg/small-progress-arrow-f4bd1d78f00f3a054171e65e443072ed.png) no-repeat; }
.volume-progress-container {
background-color: #1d1f24;
background-image: -webkit-linear-gradient(top, #060607, #16191b);
background-image: linear-gradient(to bottom, #060607, #16191b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#060607', EndColorStr='#16191b'); }
.volume-progress-bar {
background: #80b5ff; }
.mask-overlay {
background: url(/assets/bg/volume-mask-716c9dfb29964592780d7add46ac682c.png) repeat-x top left transparent; }
#volume-slider,
.volume-slider {
background: none;
border: none;
cursor: pointer; }
#volume-slider .ui-slider-handle,
.volume-slider .ui-slider-handle {
background: none;
border: none;
outline: none; }
/* This still is the same as mosaic-menu */
.player-menu-item {
list-style: none; }
.player-menu-my-collections .tooltip {
font-size: 12px; }
.player-menu-suggestions .notification-badge {
background-position: -142px -202px;
color: #296dcc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
font-size: 11px;
font-weight: bold; }
.player-menu-item.selected .player-menu-item-button {
color: #cfd8e5;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.player-menu-item-button,
.player-menu-item-button:hover,
.player-menu-item-button:focus,
.player-menu-item-button:visited {
color: #b8c0cc;
font-family: proxima_nova_semibold; }
.player-menu-item-button:hover {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAYAAACkJ9JhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NzYwNTgyYi1mODA2LTQwYzItYWQzMC03M2M4MTg3Mjk5ZGUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUVCRjk0QzQxRDQ1MTFFM0IxNzJBOUU0MDIwQTE3M0YiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUE3OTc2RDIxRDNGMTFFM0IxNzJBOUU0MDIwQTE3M0YiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVGOTRBQjdCREUyMDY4MTE4MDgzQjExOTEwRDY5NjlFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc3NjA1ODJiLWY4MDYtNDBjMi1hZDMwLTczYzgxODcyOTlkZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjDt9LEAAABcSURBVHjaZI7LDcAwCEMt9p+h14zQYzeolM7QOUzDp6SfA+gZYwSWtm7Sj/0UqEJGWWMSbQaTdINMl7Rl6E1huGS2h4zLfzditcLPea1sSSfiPbPX5pNOA3AJMAAcM3bDwL8ttAAAAABJRU5ErkJggg==); }
.player-menu-item.selected.player-menu-my-collections .player-menu-item-button,
.player-menu-my-collections .player-menu-item-button:hover {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.45), inset 2px 0 0 rgba(103, 108, 119, 0.2); }
.player-menu-my-collections .player-menu-item-button:after {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -260px -279px; }
.player-menu-my-collections .player-menu-item-button:hover:after {
background-position: -280px -279px; }
.player-menu-my-collections.selected .player-menu-item-button:after,
.player-menu-my-collections.selected .player-menu-item-button:hover:after {
background-position: -300px -279px; }
.player-menu-my-collections .player-menu-item-button .gear-icon:after {
border-style: solid;
border-color: transparent transparent #ccc; }
.player-menu-my-collections .player-menu-item-button .open.gear-icon:after {
border-style: solid;
border-color: #ccc transparent transparent transparent; }
.player-menu-suggestions .player-menu-item-button:hover:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAsCAYAAACzBUKoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NzYwNTgyYi1mODA2LTQwYzItYWQzMC03M2M4MTg3Mjk5ZGUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUVCRjk0QzgxRDQ1MTFFM0IxNzJBOUU0MDIwQTE3M0YiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUVCRjk0QzcxRDQ1MTFFM0IxNzJBOUU0MDIwQTE3M0YiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVGOTRBQjdCREUyMDY4MTE4MDgzQjExOTEwRDY5NjlFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc3NjA1ODJiLWY4MDYtNDBjMi1hZDMwLTczYzgxODcyOTlkZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjGK6B4AAALVSURBVHjajJVNTBNBFMd3Z2dbLP2Qbr8ojTaKwUQTPSiJB4OJxpsn48kLNw/cNOFgQjx58OTJGI1GDmq8eeXqyQQFhABKpRRUUKzQ0hZ2d3ZnxrcbCkvZbTvN66bpf3/73v/NvBU558Krd2OPBEHoF1os0RJne8/MDly9vhpLJIuUMu4lRtaXaZqPZ6enkhhJSICbvQLt3vS2+Hc9Qwzig4d56m3xr+UFFdJ5Mz35OSFJIuKcCW5RJ8MP/qyQXzyOJYyaknfp86ZprCwtLYZFJIoM/m0M5KwW6E/mZqaiMrYKZUJjoAZ33lcrlUytWvNxKNQy0RkHxJAKAfrr6clPwEaIMyjMEcjF++drqz/PISRInm446AXG2Fzu67yOoFIGz68H8ujs09y3uSyWJcSF/Y+XeEzX9XSpVKpAR8WmZEiFwmV0ZmI8gB2FoiY78uXm5saAKApb1s7k3DsNi/4HLh+hSVVkdbQF2S50uZC/hDHWW4qB/gFE8fJGMSfCakW26ZMT4yclCbF2xKOaqt6QMf5in8FWK5PtexGLJxbbIduplEubt9sVSx0dRyJtiWVZvnfiVN86aiPfFLh2LarECi3FWJaHMseyvw1imqgF1Qc7804y1ZNXdZ02FcPjbymxeBXM3aaUNm+33++/n0ilC4QQ5nqsHCn0Y9mnBDpDRWKY3Nr82EscCHSOJLt7fhBDt6l7U9TNLpisl4+CXZpOWH0iuZKDwdBwpCu6Rk1KuWNcIze74LAORpX4gqZp1Dk3DpGDofCg399RQxJWGdEONqhRzCgdjkSVBd0g1pk+/Jqor76zF66ICEWCocg/aC+38nXGATIczAedwVCekH27XMm9p8+n1Z2di9FYakXXDeY2+ffIoXD4ISS5TMEvwYW6R7bs2iqXbiqJ1HdN02njEK+HTe5OZ+5ub9dKMHlUxqjQ9KVZ2SoPRbqUHDEMu19e8V+AAQBk1/7zxKDBhQAAAABJRU5ErkJggg==); }
.player-menu-suggestions.selected .player-menu-item-button:before,
.player-menu-suggestions.selected .player-menu-item-button:hover:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAsCAYAAACzBUKoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NzYwNTgyYi1mODA2LTQwYzItYWQzMC03M2M4MTg3Mjk5ZGUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTEzOTNFNkUxRDUzMTFFM0IxNzJBOUU0MDIwQTE3M0YiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTEzOTNFNkQxRDUzMTFFM0IxNzJBOUU0MDIwQTE3M0YiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVGOTRBQjdCREUyMDY4MTE4MDgzQjExOTEwRDY5NjlFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc3NjA1ODJiLWY4MDYtNDBjMi1hZDMwLTczYzgxODcyOTlkZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq+66pQAAAJgSURBVHjaYvz//z8DCKRNuTcNSGUy4AGMIMUyCupnVO3Tprznd5qPTzETlJ5+78hcOyYmxjPEKF729+9fTyH2HyuAljHgwmDFTx7c/A6kVj7ZVcEOpD8SMhkEZn15/zyai51pNUHFQNOvAanXLE+3XmQE2ooNM6Fpnv7gxCJbXB5FV7z+379/FvxM79cSVAx0yi9QyDzdW8cF9PwX9ABhwmLArK8fXkZysjGtxBp0aKbfB1I3/99bfQM9pJlwhNL0J2dXOzIxMZwn5AwQ2AFMM2o8/1+uxxcaMKf8BVILnu5tFADSX/AqhoK53z+9CeFgY1wFixWcioGmvwBSx//eXPqAkAfhHn12caMLEyPQo4QUA00/CPSoONefp5vwhQaK6U/3NkmAPMpChOIFP768uyHOwrCOEZZh8QFgHp0joeP1ihhngJ3y8/2jQBYiFTNL6XkJEWUyGydvAbOkJT8TEe6VkNR0dH/39R87MSaniegG/fj7j0A4A01lE5TWzPz0T0CKkYhICZE3Dfvy9edfgqmOgZWdO59BxEiSYBIFOsFMVt9D7N3Xv9y4yg1kkCOqF/T/7z9EDLPgCi4BSXXX97+4gQnoLwMhZ6Sp2iU9/Qb0GHLuZsEWXMys7Cl/BDQFGD7+ZiCUYUNULcOev/v8h5dQWQf2mJCWP9+/fyCrUSETmhMshWW1ed59Z9UgphTN1HDKfPP111+sNQULcnABPebwnUOen+HXb4LVRJq2Q+Kl91/+8OGqgphgwQWkkvnVvWSQYwyXySFiigbX3nz5r09MPZij7V74C5fHYBggwAC/ONRWegzSxgAAAABJRU5ErkJggg==); }
/* Playlist */
.player-my-collection .empty-content {
display: none; }
/*.player-my-collection.empty .empty-content.no-suggestions {
background: image-url('bg/sprites/sprites.png')
no-repeat 0 -440px transparent;
margin: 25px auto 0;
width: 746px;
height: 29px;
display: block
}*/
.player-my-collection.empty .player-playlist {
display: none; }
.player-playlist {
list-style: none; }
.player-list-item {
background: #fafcff;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 11px;
color: #737880;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 2px 2px rgba(0, 0, 0, 0.25); }
/* current playing track */
.player-list-item.playing {
background: #dae4f2;
border: 2px solid #296dcc;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 2px 2px rgba(0, 0, 0, 0.25), 0 0 8px rgba(48, 129, 242, 0.85); }
.player-list-item-cover:after {
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -160px -60px transparent; }
.player-list-item-cover:before {
background: rgba(0, 13, 31, 0.1); }
.draggable .player-list-item-title {
background: url(/assets/bg/drag-markers-42a0dd1728d351f7000b4df11cfc0e2a.png) no-repeat right 3px transparent; }
.player-list-item-name:first-child {
font-weight: bold; }
/* player-list-item hover states */
.player-list-item-overlay {
background: rgba(240, 244, 250, 0.85);
text-align: center; }
.player-list-item-overlay .close-icon .icon {
background-position: -120px 0; }
.play-pause-icon-container {
background: rgba(207, 216, 229, 0.5);
box-shadow: 0 2px 2px 3px rgba(0, 0, 0, 0.1) inset;
border-radius: 5px; }
.player-list-item-overlay .play-pause-icon {
background: url(/assets/bg/playback-controls-noise-b7de2d47d7be7f63546216107e7d76ea.png) repeat top left #4d5159;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)), url(/assets/bg/playback-controls-noise-b7de2d47d7be7f63546216107e7d76ea.png) repeat top left #4d5159;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)), url(/assets/bg/playback-controls-noise-b7de2d47d7be7f63546216107e7d76ea.png) repeat top left #4d5159;
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4CFFFFFF', EndColorStr='#4C000000');
/* ie */
border-radius: 5px; }
/* Player Suggestions */
.player-suggestions.empty .empty-content.no-suggestions {
/*background: image-url('bg/sprites/sprites.png') no-repeat 0px -400px transparent*/
font-size: 15px;
text-align: center; }
.player-suggestions.empty .empty-content.no-suggestions p {
color: #60656f;
font-size: 15px;
line-height: 20px;
text-align: center; }
/*.player-suggestions.empty .empty-content.creating-suggestions {
background: image-url('bg/sprites/sprites.png') no-repeat 0px -480px transparent
}*/
.band {
cursor: pointer; }
.band .player-list-item-name:last-child .icon {
background-position: -140px 0; }
.band .play-pause-icon-container .button {
background: #707c8c;
border: 1px solid rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3FFFFFFF', EndColorStr='#3F000000');
/* ie */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5); }
.band .play-pause-icon-container .button:hover {
background: #7e8998; }
.band .play-pause-icon-container .button:active {
background: #474f59; }
.band .play-pause-icon-container .info-icon {
padding: 3px 7px 2px;
font-size: 13px;
font-family: Georgia, serif;
font-style: italic;
color: #c5c9d1;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
/* jsScroll Bar */
#player .jspTrack {
background: rgba(194, 198, 204, 0.3);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15); }
#player .jspDrag {
background: #edf3fa;
border: none;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3FFFFFFF', EndColorStr='#3F000000');
/* ie */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
.player-disabled-mask,
.playback-control-item.disabled:after {
opacity: 0.7;
background: rgba(61, 68, 76, 0.94);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#26FFFFFF', EndColorStr='#26000000');
/* ie */ }
.playback-control-item-play:after,
.playback-control-item-play:before,
.playback-control-item li,
.playback-control-item a,
.player-controls-container,
.player-disabled-mask,
.playback-control-item.disabled:after {
background: none;
box-shadow: none;
border: 0; }
.player-menu {
width: auto; }
.player-menu-suggestions .player-menu-item-button,
.player-menu-my-collections {
width: auto; }
.player-menu-suggestions .player-menu-item-button:before,
.player-menu-my-collections .player-menu-item-button:after {
display: none; }
.player-info {
margin-left: 230px;
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 7px 3px 2px; }
html[lang="ar"] .player-info {
margin-left: 245px; }
.player-info-random {
height: 12px;
margin-top: 1px;
text-transform: uppercase;
font-size: 12px; }
.player-info-random .mob-hide {
font-size: 12px; }
.playback-random {
border-radius: 2px;
margin-left: 10px;
margin-right: 10px; }
.player-info-element-progress {
position: relative; }
.player-info-progress-container {
display: block;
bottom: 8px;
clear: both;
position: absolute;
width: 97.5%;
height: 10px; }
.player-info-progress-bar {
margin-top: 0; }
.player-disabled-mask {
background-color: rgba(0, 0, 0, 0.85);
width: 100%;
left: 0;
top: auto;
bottom: 0; }
.player-info-element-embed,
.player-info-element-heart {
padding-top: 3px; }
.player-info-element-volume {
padding-top: 5px; }
#player {
position: relative;
z-index: 100; }
.player-info-song-title {
top: -2px; }
.player-menu {
position: relative;
z-index: 100; }
.player-menu-my-collections .player-menu-item-button {
width: 100px; }
.player-menu-my-collections .player-menu-item-button.active,
.player-menu-suggestions .player-menu-item-button.active {
background: #0c90c7;
background: -webkit-linear-gradient(top, #0c90c7 0%, #0a709a 100%);
background: linear-gradient(to bottom, #0c90c7 0%, #0a709a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c90c7', endColorstr='#0a709a',GradientType=0 );
box-shadow: inset 0 1px 0 0 #10b7db;
text-shadow: 0 -1px 0 #06425a; }
.player-menu-my-collections .signup-login-tooltip {
left: -165px; }
.player-menu-my-collections .signup-login-tooltip .shadow {
left: 230px; }
.player-menu-suggestions .tooltip {
font-size: 12px;
position: absolute;
top: -60px;
left: -80px;
width: 324px;
display: none; }
.player-menu-suggestions .tooltip .shadow {
left: 130px; }
.player-menu-my-collections .player-menu-item-button .gear-icon {
background: none;
margin-left: 0; }
.player-info-heart .icon {
width: 12px;
height: 12px;
background-position: -179px -20px; }
.player-info-embed .icon {
height: 13px; }
.player-info-play-bar {
height: 2px;
background: #3e7ee5;
box-shadow: none; }
.player-info-progress-bar {
border-color: #3d424b; }
.small-player-info-progress-container .small-counter {
color: #bec3d2;
font-weight: bold; }
.player-menu-item-button {
width: auto;
padding: 0 20px;
color: #b8c0cd;
font-size: 12px;
font-weight: bold;
text-shadow: 0 -1px 0 #06090d;
box-shadow: inset 0 1px 0 #566b8a, inset 1px 0 0 #1d2229;
background: #3f4f66;
/* Old browsers */
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f4f66), color-stop(100%, #313d4f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f4f66 0%, #313d4f 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: linear-gradient(to bottom, #3f4f66 0%, #313d4f 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4f66', endColorstr='#313d4f',GradientType=0 );
/* IE6-9 */ }
.embed-player-container-playlist {
top: 40px !important;
left: 0; }
.embed-player-container-song {
top: -225px !important; }
.player-menu-item-button:hover {
background: #4f6380;
background: -webkit-linear-gradient(top, #4f6380 0%, #3d4c63 100%);
background: linear-gradient(to bottom, #4f6380 0%, #3d4c63 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f6380', endColorstr='#3d4c63',GradientType=0 ); }
.button.gray {
box-shadow: inset 0 1px 0 #526073;
border-bottom: 1px solid #17191d;
background: #3d4654;
background: -webkit-linear-gradient(top, #3d4654 0%, #2f3742 100%);
background: linear-gradient(to bottom, #3d4654 0%, #2f3742 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d4654', endColorstr='#2f3742',GradientType=0 ); }
footer .button.gray {
color: #bec3d2;
text-shadow: 0 -1px 0 #232b37;
box-shadow: inset 0 1px 0 #4e6480;
border-bottom: 1px solid #17191d;
background: #3a4a5f;
background: -webkit-linear-gradient(top, #3a4a5f 0%, #2d394a 100%);
background: linear-gradient(to bottom, #3a4a5f 0%, #2d394a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a4a5f', endColorstr='#2d394a',GradientType=0 ); }
footer .button.ghost {
color: #bec3d2;
text-shadow: 0 -1px 0 #232b37;
text-transform: none;
padding: 14px 52px 15px 20px;
margin: 0; }
footer .button.ghost:hover {
background: -webkit-linear-gradient(top, #4f6380 0%, #3d4c63 100%);
background: linear-gradient(to bottom, #4f6380 0%, #3d4c63 100%); }
.aside-bar {width: 350px; height: 100%; position: absolute; top: 0; right: 0; z-index: 4; overflow-y: scroll}
.aside-bar .form-errors {clear: left}
.btn {float: right; margin-right: 25px; padding: 0 7px; display: inline-block; height: 20px; line-height: 2}
.normal .btn {display: none;
}
/* SIGN UP & LOGIN */
.aside-bar header {height: auto; position: auto; padding: 13px 0 10px 20px; overflow: hidden}
.aside-bar h2 {margin: 0; float: left}
.aside-bar .close-icon {float: right; margin-right: 8px}
.aside-bar .close-icon .icon {width: 20px; height: 20px}
#signup-form,
#login-form {padding: 20px}
#login-form {overflow: hidden}
.band-admin input[type="email"],
.band-admin input[type="password"],
.login input[type="text"],
.login input[type="password"],
.signup-login input[type="text"],
.signup-login input[type="password"],
.band-signup input[type="text"] {width: 300px; height: 35px; margin-bottom: 12px; float: left}
.band-admin input[type="password"] {margin: 0px}
.aside-bar .login-link {float: right; padding: 6px 10px}
.aside-bar .login-link.signup-link{float: left; padding: 6px 10px}
.signup-login .signup-info {width: auto; float: left; margin: 0}
.login .signup-info {width: 210px; float: left; margin: 0}
#login-form .keep-me-logged {margin-top: 8px; margin-right: 3px}
.login .forgotten-password {display: block; margin: 10px 0}
.login-window {height: 270px; overflow: hidden; position: relative; width: 100%}
.login-input {margin-bottom: 50px; overflow: hidden}
/* FORGOTTEN PASSWORD */
.login-forgot {padding: 20px}
.login-forgot p {margin-top: 0}
.login-forgot .back-to-login span {padding: 5px}
.login-forgot-message {clear: right}
.login-forgot-message.success span {position: relative; display: block; height: 100%; padding-left: 20px}
.login-forgot-message.success span:before {position: absolute; top: 2px; left: 0; height: 14px; width: 14px}
/* BAND ADMIN */
.band-admin p {margin: 0}
.band-admin ul {margin: 0; padding: 0; list-style: none}
.band-admin .editable {position: relative; clear: left}
.band-admin .edit {position: absolute; top: 0; left: 0; display: none; z-index: 1}
.band-admin-section .band-section-container {display: none}
.band-section-content .error-close-icon {float: right}
.band-admin .band-admin-input {width: 200px; padding: 6px 8px; margin-top: 0px;}
.band-admin-section.normal .input-container {display: none}
.band-admin-section.expanded .input-container {display: block}
/* DELETE OVERLAYS */
.confirm-delete {
display: none;
width: 132px;
height: 28px;
position: absolute;
top: -27px;
left: 137px;
padding: 5px 10px 1px;
z-index: 1
}
.band-music-photo-list .confirm-delete {
top: -1px;
}
.confirm-delete:after {
width: 11px;
height: 7px;
bottom: -7px;
right: 1px;
position: absolute
}
.confirm-delete.left:after {left: 20px}
.confirm-delete.right:after {left: 130px}
.confirm-delete .text {float: left; display: block; padding: 5px 0}
.confirm-delete-button { color:#4A4B4E ;display: block; padding: 5px 9px; float: left; margin-left: 10px }
.band-profile {padding: 14px}
.band-profile .editable .content {padding: 5px; position: relative; float: left}
.band-profile .editable .content:hover:after {position: absolute; top: 20%; right: -20px; width: 14px; height: 14px}
.band-name-label {font-style: normal; font-weight: normal; font-size: 10px; color: #FFFFFF; margin-left: 5px; display: block}
.band-name-label.arabic {margin-top: 8px; padding-top: 5px;}
.band-profile-gender-content:before {position: absolute; width: 14px; height: 16px; top: 20%; left: 2px}
.band-profile-name-input {padding: 6px}
.band-profile .band-profile-gender .band-profile-gender-content {padding-left: 20px}
.band-profile-gender .band-profile-gender-edit,
.band-profile-country .band-profile-country-edit {left: 20px}
.band-profile .band-profile-gender-list {margin: 2px 0 0;padding: 5px;float: left;width: 205px}
.band-profile-gender-item {float: left; width: 85px; margin: 0 20px 10px 0}
.ie9 .band-profile-gender-item {width: 90px}
.band-profile-gender-item:nth-child(2n) {margin-right: 0}
.band-profile-gender-checkbox {margin-right: 2px}
.band-profile .band-profile-country .band-profile-country-content {padding-left: 20px}
.band-profile-country-content:before {position: absolute; width: 14px; height: 16px; top: 20%; left: 2px}
.band-profile .band-profile-country-list {margin: 2px 0 0; padding: 10px; width: 290px; float: left}
.band-profile-country-item {float: left; width: 140px; margin-right: 10px; margin-bottom: 10px}
.band-profile-country-item:nth-child(2n) {margin-right: 0}
.band-profile-country-item:last-child {margin-bottom: 0}
.band-profile-country-radio {margin-right: 3px}
.band-profile-country-flag {vertical-align: baseline}
.band-profile-country-item label {vertical-align: top}
/* ACCORDION */
.band-section-header {padding: 14px 13px; position: relative}
.band-section-header:after {width: 11px; height: 7px; position: absolute; top: 40%; right: 13px}
.band-section-container .error {display: none}
.band-section-container .error .icon {width: 14px; height: 14px; margin-right: 5px}
.band-music .btn.blue {position: relative; padding-left: 20px}
.band-music .btn.blue:before {width: 11px; height: 13px; position: absolute; top: 3px; left: 5px}
.band-music .btn {margin-top: -4px}
.band-music .band-section-content {height: 250px;}
.band-section-content p {color: #686767; text-align: left; margin-bottom: 4px;}
.band-section-header h2 {margin: 0; display: inline-block}
.band-section-header .extra-info {display: inline-block}
/* .band-music-song-list {width: 350px}
*/
/* VIDEOS LINKS */
.videos-links .band-section-content {height: 250px;}
#songUpload {margin-left: -130px}
@-moz-document url-prefix() {
#songUpload {position: fixed; margin-left: 0px; width: 95px}
}
.ie9 #songUpload {margin-left: -240px}
.song-upload-container {width: 95px; height: 22px; position: absolute; bottom: 11px; right: 38px; overflow: hidden}
@-moz-document url-prefix() {
.song-upload-container {bottom: 12px;height: 22px;font-size: 22px}
}
.ie9 .song-upload-container {bottom: 15px}
.band-music-song-item {padding: 12px 12px 15px; position: relative;}
.band-music-song-item .content {width: 280px; overflow: hidden; display: inline-block; white-space: nowrap}
.band-music-song-item.uploading .content {width: 240px}
.band-music-song-item.editable .band-song-delete {display: none; width: 11px; height: 12px; position: absolute; top: 42px; right: 20px; margin-top: -10px}
.band-music-song-item.editable:not(.editing):hover .band-song-delete {display: block}
.band-music-song-item.editable:hover:after {width: 12px; height: 12px; position: absolute; top: 13px; right: 40px}
.band-music-song-list .band-music-song-edit {top: 0px; width: 85%; height: 100%;}
.band-admin .band-music-song-edit .band-admin-input {position: relative; height: 13px; left: 0; width: 270px}
.band-song-delete {float: right; margin-right: 12px; margin-top: 1px; display: none}
.band-song-delete .icon,
.band-video-link-delete .icon,
.band-additional-link-delete .icon {width: 11px; height: 12px}
.band-music-video-link.editable .band-video-link-delete,
.band-music-additional-link.editable .band-additional-link-delete {display: none; width: 11px; height: 12px; position: absolute; top: 50%; right: 20px; margin-top: -10px}
.band-music-video-link.editable:not(.editing):hover .band-video-link-delete,
.band-music-additional-link.editable:not(.editing):hover .band-additional-link-delete {display: block}
.band-music-song-content {height: 16px; display: block; margin-bottom: 4px;}
.band-music-song-arabic-content {height: 16px; display: block;}
.band-section-content .song-name-label {font-weight: normal; font-size: 10px}
.band-admin .band-music-song-item .band-music-song-edit {position: relative !important;}
/* GALLERY */
.band-gallery {position: relative}
.band-gallery .btn.blue {position: relative; padding-left: 20px}
.band-gallery .btn.blue:before {width: 11px; height: 13px; position: absolute; top: 3px; left: 5px}
.band-gallery .band-section-content {max-height: 250px}
#imageUpload {margin-left: -100px}
@-moz-document url-prefix() {
#imageUpload {position: fixed; margin-left: 0px; width: 95px}
}
.ie9 #imageUpload {margin-left: -240px}
.photo-upload-container {width: 95px; height: 22px; position: absolute; bottom: 9px; right: 40px; overflow: hidden}
.band-gallery .band-section-container.empty .band-section-content {width: 320px; height: 60px; margin: 10px 15px}
@-moz-document url-prefix() {
.photo-upload-container {bottom: 8px; height: 24px; right: 39px; width: 98px}
}
.ie9 .photo-upload-container {bottom: 15px; width: 100px; right: 39px}
/*
* .band-admin .band-music-photo-list {padding: 10px 8px}
*/
.band-music-photo-item {width: 64px; height: 64px; position: relative; display: inline; float: left; margin-right: 13px; margin-bottom: 10px}
.band-music-photo-item:nth-child(4n) {margin-right: 0}
.band-music-photo-item .upload {padding-top: 45px;text-align: center;display: none}
.band-music-photo-item.uploading .upload {display: block; height: 20px; width: 65px; position: absolute; top: 0; left: 0; z-index: 1}
.band-music-photo-item .photo-container {position: relative; width: 64px; height: 64px; display: block}
.band-music-photo-item .photo {position: absolute; top: 0; left: 0}
.band-music-photo-item .overlay {height: 100%; position: absolute; width: 100%; display: none; top: 1px; left: 0; z-index: 1}
.band-music-photo-item:not(.uploading):hover .overlay {display: block}
.band-music-photo-item .overlay-content {height: 23px; margin: 16px auto; width: 54px; margin-top: 20px}
.band-music-photo-item .overlay-content li {display: inline; float: left; height: 23px; width: 26px}
.band-music-photo-item .overlay-content a {display: inline-block}
.band-music-photo-crop-icon {width: 12px; height: 12px; display: block; margin: 6px}
.band-music-photo-trash-icon {width: 12px; height: 12px; display: block; margin: 6px}
.band-music-photo-delete {left: -50px}
/* SOCIAL */
.band-social {}
.band-music-social-item,
.band-music-video-link,
.band-music-additional-link {padding: 12px 12px 15px}
.band-music-social-content,
.band-music-video-link-description,
.band-music-additional-link-description,
.band-music-additional-link-url {position: relative; padding-left: 15px}
.facebook .band-music-social-content:before {width: 6px; height: 11px; position: absolute; top: 0; left: 0}
.twitter .band-music-social-content:before {width: 7px; height: 11px; position: absolute; top: 0; left: 0}
.website .band-music-social-content:before,
.band-music-video-link-description:before,
.band-music-additional-link-description:before {width: 11px; height: 12px; position: absolute; top: 0; left: 0}
.band-social .band-music-social-edit {top: 10px; left: 160px}
.band-social .band-music-social-input {width: 165px; padding: 2px 5px}
.band-admin .band-admin-done {margin-left: 15px}
/* EXTRA LINKS */
.band-music-video-link span {
width: 280px;
display: block;
margin: 0;
padding: 3px 0;
}
.band-links {margin-bottom: 15px}
.band-links .band-section-content {max-height: 250px}
.band-music-video-link-description,
.band-music-additional-link-description {margin-right: 15px}
.band-music-video-link-url,
.band-music-additional-link-url {padding: 0}
.band-music-additional-link {}
.band-admin .band-music-video-link-edit,
.band-admin .band-music-additional-link-edit {top: 10px; left: 10px}
.band-admin .band-music-video-link-description-input {width: 280px; padding: 4px 5px}
.band-admin .band-music-additional-link-description-input,
.band-admin .band-music-video-link-url-input {width: 280px; padding: 4px 5px}
.band-admin .band-music-additional-link-url-input {width: 155px; padding: 2px 5px}
.band-admin .band-music-video-link-description-input {width: 280px}
.band-admin .band-music-additional-link-description-input {width: 110px}
.band-admin .band-music-additional-link-url-input {}
/* DJ SETTING SECTION */
.dj-settings {width: 230px; clear:both;}
.dj-button {display: block; height: 25px; padding: 0 11px; line-height: 25px; font-size: 12px; float: left; border-width: 1px; margin-top: 0px}
/* CUSTOME FACEBOOK SWITCHER */
.facebook-custom-switcher {overflow: hidden; margin: 0; padding: 0; position: relative; background:black; float: left; margin-bottom: 15px;
border-radius: 3px;
}
.facebook-custom-switcher li {float: left; display: block; width: 40px; height: 30px; list-style: none; text-align: center; color: #FFF; cursor:pointer; line-height: 30px;}
.facebook-custom-switcher li.tab {position: absolute; cursor: auto; background: #4b4c4f; border: 1px solid #000; height: 28px;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.2));
background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(0,0,0,.2));
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.2), 0 0 3px rgba(0,0,0,.8);
border-radius: 3px;
}
.facebook-custom-switcher li.on {background: #5e9ff2;
border-radius: 3px 0 0 3px;
box-shadow: inset 0px 4px 8px rgba(0,0,0,.3);
}
.facebook-custom-switcher li.off {background: #e4e5e4; color: #8b8b8b;
border-radius: 0 3px 3px 0;
box-shadow: inset 0px 4px 8px rgba(0,0,0,.3);
}
.facebook-custom-switcher.on li.tab {left: 38px;}
.facebook-custom-switcher.off li.tab {left: 0;}
/* ACTIVATE BAND */
.band-signup {text-align: center}
.band-signup h2 {margin: 0; padding-top: 15px; text-align: center}
.band-signup .band-signup-form {padding: 0 20px}
.band-signup .band-name {margin-top: 25px; margin-bottom: 20px}
.band-signup .create-link {float: left}
.band-signup .cancel {display: block; float: left; margin-left: 12px; padding-top: 8px}
.band-signup .error {width: 290px;padding: 10px;overflow: hidden;display: none;margin-top: 10px; float: left}
.band-signup .error .text {float: left; width: 270px}
.band-signup .error .close {float: right}
.band-signup .error .close span {width: 16px; height: 17px}
/* jScrollPane */
.band-admin .jspVerticalBar {width: 8px; margin-right: 1px}
/* IE 9 fixes */
.ie9label {display: none}
.ie9 .email,
.ie9 .password {float: left; z-index: 0}
.ie9 .ie9label {float: left; margin-top: -37px; z-index: 1; margin-left: 10px; cursor: text; display: block}
.aside-bar {
background: url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png) repeat top left #4d4e52;
box-shadow: -1px 0 5px black, inset 1px 0 0 rgba(255, 255, 255, 0.1); }
.aside-bar .divider {
border-bottom: 1px solid #36373b;
margin: 0 12px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }
.aside-bar .form-errors {
color: #f16f6f;
font-size: 13px;
list-style: none;
padding: 0; }
.btn {
background: #3373cc;
color: #e6eaf2;
font-size: 10px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
/* ie */
border-radius: 3px;
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none; }
.btn:hover,
.btn:link,
.btn:visited {
color: #e6eaf2; }
.btn:active,
.btn.activated {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000', EndColorStr='#33FFFFFF');
/* ie */ }
.blue:hover,
.blue.hovered {
background-color: #3D88F2; }
/* SIGN UP */
.aside-bar header {
background-color: #3d444c;
border-top: none;
border-right: none;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 0 1px rgba(255, 255, 255, 0.2); }
.aside-bar h2 {
color: #d9dbe0;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
font-size: 1.5em; }
.aside-bar .close-icon .icon {
background-position: -120px 0; }
.band-admin input[type="email"],
.band-admin input[type="password"],
.login input[type="text"],
.login input[type="password"],
.signup-login input[type="text"],
.signup-login input[type="password"],
.band-signup input[type="text"] {
border: 1px solid rgba(0, 0, 0, 0.25);
color: #676b72;
padding-left: 10px;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
width: 100%; }
.aside-bar .login-link {
background-color: #4078d4;
border: 1px solid rgba(0, 0, 0, 0.6);
background-clip: padding-box;
color: #e6eaf2;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
font-size: 16px;
font-weight: bold;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2)));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
/* ie */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.1);
border-radius: 3px; }
.aside-bar .login-link:hover {
background-color: #3D88F2; }
#login-form input[type="submit"] {
font-size: 14px; }
.aside-bar .login-link:active {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000', EndColorStr='#33FFFFFF');
/* ie */ }
.aside-bar input.error,
.aside-bar textarea.error {
background-color: #ffefef;
border: 1px solid #ca0000;
box-shadow: 0 0 5px #ff3535; }
.signup-login .signup-info,
.login .signup-info {
color: #8f919a;
font-size: 11px;
line-height: 1.5; }
.signup-login .signup-info a,
.login .signup-info a {
color: #c5c8d8; }
#login-form label {
color: #8f919a;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
font-size: 12px; }
.login .forgotten-password {
color: #7da8ec;
text-align: center;
font-size: 12px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
/* FORGOTTEN PASSWORD */
.login-forgot p {
color: #8f919a;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.login-forgot .back-to-login span {
color: #7DA8EC;
background: rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
border-radius: 3px; }
.login-forgot-message {
display: none; }
.login-forgot-message.success span {
color: #d2e3fd;
font-size: 13px;
font-weight: bold; }
.login-forgot-message.success span:before {
content: '';
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -220px -20px transparent; }
/* BAND ADMIN */
.band-bio .progress-controls-wrap {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex; }
.band-admin .editable .content {
cursor: pointer; }
.band-admin .band-admin-input {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.25);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
/* ie */
border-radius: 2px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px rgba(255, 255, 255, 0.2); }
/* DELETE OVERLAYS */
.confirm-delete {
background-image: -webkit-linear-gradient(top, #e3e4e8, #c0c4cd);
background-image: linear-gradient(to bottom, #e3e4e8, #c0c4cd);
/* Safari */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-bottom: 1px solid #000;
-webkit-box-shadow: 0 0 2px #000;
-moz-box-shadow: 0 0 2px #000;
border-radius: 2px;
box-shadow: 0 0 2px #000; }
.confirm-delete:after {
content: '';
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -440px -40px transparent; }
.confirm-delete .text {
color: #464B4F;
font-size: 11px;
text-shadow: 0 1px 0 white; }
.confirm-delete-button {
background-color: #DEDEDE;
font-size: 11px;
text-shadow: 0 1px 0 white;
background-clip: padding-box;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.27);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */ }
.confirm-delete-button:hover,
.confirm-delete-button:link,
.confirm-delete-button:visited {
color: #7E7E7E; }
.confirm-delete-button:active {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */ }
.band-profile {
background-color: #292d33;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
background-image: url(/assets/bg/profile-pattern-97dadc0ae4d5680d15d5fe0cc3603d40.png);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url(/assets/bg/profile-pattern-97dadc0ae4d5680d15d5fe0cc3603d40.png);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url(/assets/bg/profile-pattern-97dadc0ae4d5680d15d5fe0cc3603d40.png);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */ }
.band-profile .editable .content {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.band-profile .editable .content.arabic-placehoder,
.band-profile .editable .content:hover {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2px; }
.arabic-placehoder {
font-weight: normal !important; }
.band-profile .editable .content.arabic-placehoder:after,
.band-profile .editable .content:hover:after {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -60px -220px; }
.band-profile-name-content {
color: #e3e3e3;
font-size: 16px;
font-weight: bold; }
.band-profile-name-input {
color: #474747;
font-weight: bold;
font-size: 13px; }
.band-profile-gender-content {
color: #b8c0cc;
font-size: 12px; }
.band-profile-gender-content.empty {
color: #6b7078; }
.band-profile-gender-content:before {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -180px -200px; }
.band-profile-gender-input,
.band-profile-country-input {
color: #a2a2a2;
font-size: 11px;
font-family: Arial;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.band-profile-gender-list {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid rgba(0, 0, 0, 0.33);
color: #88898C;
font-family: Arial;
font-size: 11px;
list-style: none outside none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
border-radius: 3px;
box-shadow: 0 1px 0 white inset, 0 1px 5px rgba(0, 0, 0, 0.4); }
.band-profile-country-content {
font-size: 12px;
color: #b8c0cc; }
.band-profile-country-content:before {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -200px -200px; }
.band-profile-country-list {
background: #EBF0F7;
color: #5C6066;
font-family: Arial;
font-size: 11px;
list-style: none outside none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-radius: 3px;
box-shadow: inset 0 0 1px 1px white, 0 0 10px 1px rgba(0, 0, 0, 0.75); }
/* ACCORDION */
.band-section-header {
cursor: pointer;
background-color: #3d414b;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 -1px 0 black; }
.band-admin-section.normal .band-section-header {
background-image: url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#33000000');
/* ie */ }
.band-admin-section.normal .band-section-header:after {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -180px -220px; }
.band-admin-section.expanded .band-section-header {
background-image: url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)), url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)), url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000', EndColorStr='#33FFFFFF');
/* ie */ }
.band-admin-section.expanded .band-section-header:after {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -200px -220px; }
.band-section-container .error {
background-color: #f3cccc;
font-size: 11px;
font-weight: bold;
color: #c52828;
text-shadow: 0 1px 0 rgba(255, 247, 247, 0.5);
padding: 10px 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */ }
.band-section-container .error .icon {
background-position: -80px -240px; }
.band-music .btn.blue:before {
content: '';
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -160px -240px transparent; }
.band-section-header h2 {
color: #afb2bb;
font-size: 12px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
font-weight: bold; }
.band-section-header .extra-info {
color: #7b7d85;
font-size: 12px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
#songUpload {
cursor: pointer;
cursor: hand;
-moz-opacity: 0;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
.song-upload-container {
font-size: 20px; }
@-moz-document url-prefix() {
.song-upload-container {
font-size: 100px; } }
.band-section-container {
background: #e8e8e8;
border-top: 2px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.band-music .band-section-container.empty .band-section-content {
margin: 10px auto;
width: 190px !important;
height: 60px;
background-position: 0 -260px; }
html[lang="en"] .band-music .band-section-container.empty .band-section-content {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png); }
html[lang="ar"] .band-music .band-section-container.empty .band-section-content {
background-image: url(/assets/bg/sprites/sprites_ar-839d151397f254811b36a01d0d56ca65.png); }
.band-music-song-item {
color: #676b72;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
font-weight: bold;
border-bottom: 1px solid #c9cacc;
background-color: #e8e8e8;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
.band-music-song-item:hover {
background-color: #f6f6f6; }
.band-music-song-item.uploading {
background-color: #d9e6f8; }
.band-music-song-uploading {
float: right;
background: url(/assets/bg/loader-5af23bacb7941e4477ebd53fc38ebff1.gif) no-repeat 100% 0 transparent;
padding-right: 23px;
font-size: 10px;
color: rgba(0, 0, 0, 0.4);
line-height: 1.7; }
.band-music-song-item.editing {
background: #ffffff; }
.band-music-song-item .content {
padding: 3px;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.15);
background-color: rgba(0, 0, 0, 0.04);
font-size: 13px;
border-radius: 3px; }
.band-admin .band-music-song-edit .band-admin-input {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.25);
color: #4c4c4c;
font-size: 11px;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.75);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99FFFFFF', EndColorStr='#99000000');
/* ie */ }
.band-music-song-delete {
font-weight: normal; }
.band-song-delete .icon,
.band-video-link-delete .icon,
.band-additional-link-delete .icon {
background-position: -60px -240px; }
/* GALLERY */
.band-gallery .btn.blue:before {
content: '';
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -180px -240px transparent; }
#imageUpload {
cursor: pointer;
cursor: hand;
-moz-opacity: 0;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
.photo-upload-container {
font-size: 20px;
cursor: pointer;
cursor: hand; }
@-moz-document url-prefix() {
.photo-upload-container {
font-size: 100px; } }
.band-gallery .band-section-container.empty .band-section-content {
background-position: -220px -100px; }
html[lang="en"] .band-gallery .band-section-container.empty .band-section-content {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png); }
html[lang="ar"] .band-gallery .band-section-container.empty .band-section-content {
background-image: url(/assets/bg/sprites/sprites_ar-839d151397f254811b36a01d0d56ca65.png); }
.band-music-photo-item {
border: 3px solid #FFFFFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); }
.band-music-photo-item .upload {
color: rgba(0, 0, 0, 0.4);
font-size: 10px;
background: url(/assets/bg/gray-loader-9dbfdb1dbdb72aa5a7bc41ab095c2e2d.gif) no-repeat center 10px transparent; }
.band-music-photo-item.uploading .upload {
background-color: #E8E8E8; }
.band-music-photo-item .overlay {
background-color: rgba(0, 0, 0, 0.6); }
.band-music-photo-item .overlay-content {
background-color: rgba(0, 0, 0, 0.6);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
border-radius: 3px; }
.band-music-photo-item .overlay-content li {
text-align: center; }
.band-music-photo-item .overlay-content li:first-child {
border-right: 1px solid #000000; }
.band-music-photo-item .overlay-content a {
height: 100%;
text-align: center;
width: 100%; }
.band-music-photo-crop-icon {
background-position: -100px -240px; }
.band-music-photo-trash-icon {
background-position: -120px -240px; }
/* BIO */
.band-bio .bio-saved-info {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin: 8px;
color: #d5d5d5; }
.band-bio .band-section-content {
text-align: center;
padding: 15px; }
.band-section-bio-content,
.band-section-arabic-bio-content {
width: 304px;
height: 138px;
font-size: 12px;
margin-bottom: 4px;
color: #686767;
padding: 10px 8px;
border: 1px solid rgba(0, 0, 0, 0.24);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0.1)));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF');
/* ie */
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(0, 0, 0, 0.64), 0 1px 0 rgba(255, 255, 255, 0.75); }
/* SOCIAL */
.band-music-social-item,
.band-music-video-link,
.band-music-additional-link {
color: #676b72;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
border-bottom: 1px solid #c9cacc;
background-color: #e8e8e8;
box-shadow: 0 0 1px white; }
.band-music-social-item:last-child,
.band-music-video-link:last-child,
.band-music-additional-link:last-child {
border-bottom: none; }
.band-music-social-item:hover,
.band-music-video-link:hover,
.band-music-additional-link:hover {
background-color: #f6f6f6; }
.band-music-social-content,
.band-music-video-link-description,
.band-music-additional-link-description,
.band-music-video-link-url,
.band-music-additional-link-url {
color: #b2b2b2;
font-size: 11px;
text-shadow: 0 1px 0 white; }
.band-music-video-link-description,
.band-music-additional-link-description,
.band-music-video-link-url,
.band-music-additional-link-url {
color: #676b72; }
.band-music-additional-link-description:before {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: -40px -240px; }
.facebook .band-music-social-content:before {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-repeat: no-repeat;
background-color: transparent; }
.facebook .content,
.facebook:hover {
color: #676b72; }
.facebook.empty .band-music-social-content:before {
background-position: 0 -220px; }
.facebook:hover .band-music-social-content:before,
.facebook .band-music-social-content:before {
background-position: 0 -240px; }
.twitter .content,
.twitter:hover {
color: #676b72; }
.twitter .band-music-social-content:before {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-repeat: no-repeat;
background-color: transparent; }
.twitter.empty .band-music-social-content:before {
background-position: -20px -220px; }
.twitter:hover .band-music-social-content:before,
.twitter .band-music-social-content:before {
background-position: -20px -240px; }
.website .content,
.website:hover {
color: #676b72; }
.website .band-music-social-content:before {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-repeat: no-repeat;
background-color: transparent; }
.website.empty .band-music-social-content:before {
background-position: -40px -220px; }
.website .band-music-social-content:before,
.website:hover .band-music-social-content:before {
background-position: -40px -240px; }
.band-music-social-input {
color: rgba(51, 51, 51, 0.6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
font-size: 11px; }
/* ADDITIONAL LINKS */
.band_admin .band-music-video-link-description-input,
.band-admin .band-music-additional-link-description-input,
.band-admin .band-music-video-link-url-input,
.band-admin .band-music-additional-link-url-input {
font-size: 11px; }
.band-admin .band-music-video-link.editing span,
.band-admin .band-music-additional-link.editing span {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0; }
/* DJ SETTING SECTION */
.dj-button {
color: #FFF;
text-shadow: 0 -1px 0 #000;
border-style: solid;
border-color: rgba(0, 0, 0, 0.39);
background-color: #3373cc;
background-image: -webkit-linear-gradient(top, #4c89d5, #255cbd);
background-image: linear-gradient(to bottom, #4c89d5, #255cbd);
border-radius: 3px;
box-shadow: inset 1px 0 0 0 #4881d1, inset -1px 0 0 0 #4881d1, inset 0 1px 0 0 #9ebfe9, inset 0 -1px 0 0 #396cc3; }
.dj-button:visited {
color: #FFF; }
.dj-button:hover {
color: #FFF;
background-image: -webkit-linear-gradient(top, #4c89d5, #4780c7);
background-image: linear-gradient(to bottom, #4c89d5, #4780c7); }
/* ACTIVATE BAND */
.band-signup h2 {
color: #d4d6de;
font-size: 15px;
font-weight: bold;
text-shadow: 0 1px 3px rga(0, 0, 0, 0.7); }
.band-signup .cancel {
color: #8f919a;
font-size: 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75); }
.band-signup .error {
text-align: left;
background-color: #E6C4C4;
background-image: url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
border-radius: 5px;
font-family: Arial;
color: #815050;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
border: 1px solid rgba(134, 73, 73, 0.8);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)), url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */ }
.band-signup .error .close span {
background-position: -160px -320px; }
/* IE9 FIX */
.ie9label {
color: #676B72; }
/* jScrollPane */
.band-admin .jspTrack {
background-color: transparent; }
.band-admin .jspVerticalBar {
border: none; }
.band-admin .jspDrag {
border: none;
background-image: none;
background-color: #d2d2d2;
background-color: rgba(210, 210, 210, 0.6);
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none; }
/* USER BAR LAYOUT */
/*
.user-bar { width: 350px; height: 100%; position: absolute; top: 0; right: 0; z-index: 3}
*/
.user-bar-activate-band { width: 255px; height: 25px; margin: 0 15px; padding: 10px 0 0 65px; font-size: 10px; display: block}
.blue-mic-icon.icon {width: 11px; height: 13px; margin-bottom: -2px; display: inline-block; float: none}
.user-bar-meta-container {float: left; margin: 10px 0 0 15px}
.user-bar-avatar-container {float: right; margin: 10px 15px 0 0; position: relative;}
.user-bar-meta-container > div {margin-top: 1px; position: relative}
.user-bar-meta-container > div span {padding: 4px 4px 1px 4px; display: inline-block}
.user-input {font-size: 12px; display: none; position: absolute; top: 3px; left: 2px; padding: 6px; border: none}
.user-nick {font-size: 16px}
.user-nick-input {font-size: 13px}
.user-bar-email {
word-wrap: break-word;
max-width: 200px;
}
.clear-pencil {width: 14px; height: 14px; margin-bottom: -3px; display: none}
.edited-content:hover .clear-pencil {display: inline-block}
.user-bar-meta-container .user-password {margin: 10px 0 0 0}
.user-password-input {top: -4px; left: -2px}
.user-bar-password {font-size: 10px; padding: 3px 12px 2px}
.bar-button.user-bar-password {}
.bar-button {display:inline-block; margin: 0; padding: 0}
.small-button {font-size: 10px; padding: 4px 14px}
.medium-button {font-size: 12px; padding: 5px 10px 4px}
.user-bar-avatar-container .bar-button {font-size: 10px; padding: 3px 12px 2px}
.user-bar-avatar {width: 65px; height: 65px; margin: 10px 0 5px 0; position: relative}
.user-bar-avatar:after {width: 65px; height: 65px; position: absolute; top: 0; left: 0}
.user-bar-avatar-img {width: 65px; height: 65px}
.user-bar-divider {width: 320px; height: 1px; margin: 15px 15px}
.user-bar-done {margin-left: 15px}
.user-bar-logout {float: right; margin-right: 15px}
.profile-pic-container {width: 68px; height: 22px; position: absolute; bottom: 0; right: 0; overflow: hidden; text-align: left}
#profilePicUpload {margin-left: -100px; display: block}
.ie9 #profilePicUpload {margin-left: -280px}
@-moz-document url-prefix() {
#profilePicUpload {margin-left: -1400px}
}
.user-bar .error {width: 207px; margin: 10px 0 0 9px; display: none; height: 15px}
.user-bar .error .icon {width: 14px; height: 14px; float: right; display: none}
.user-bar .success {position: relative; padding-left: 20px; display: none}
.user-bar .success:before {position: absolute; top: 2px; left: 0; height: 14px; width: 14px}
/* USER BAR SKIN */
/*
.user-bar { background: image-url('bg/aside-noise.png') repeat top left #4d4e52; -webkit-box-shadow: -1px 0 5px #000000, inset 1px 0 0 rgba(255,255,255,.1); -moz-box-shadow: -1px 0 5px #000000, inset 1px 0 0 rgba(255,255,255,.1); box-shadow: -1px 0 5px #000000, inset 1px 0 0 rgba(255,255,255,.1)}
*/
.user-bar-activate-band,
.user-bar-activate-band:link,
.user-bar-activate-band:visited,
.user-bar-activate-band:hover {
color: #82848b;
font-weight: bold;
background: url(/assets/bg/artist-detail-bg-02e9cb37760d62852e614a2a4032d13d.png) repeat scroll 0 0 #25292e;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 0.3);
border-radius: 0 0 5px 5px; }
.blue-text {
color: #7da8ec; }
.user-bar-meta-container {
font-size: 12px;
font-weight: normal; }
.user-bar-meta-container > div {
color: #b8c0cc; }
.inline-edit {
cursor: pointer;
cursor: hand; }
.var-content:hover {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 2px; }
.user-nick {
color: #e3e3e3;
font-weight: bold; }
.user-input {
background-color: #ffffff;
color: #4c4c4c;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 3px 3px -2px black; }
.user-nick-input {
font-weight: bold; }
.edited-content {
text-shadow: 0 0 3px #000000; }
.bar-button {
font-weight: bold;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 3px rgba(0, 0, 0, 0.8);
border-radius: 2px; }
.bar-button:active,
.bar-button.activated {
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); }
.bar-button:hover,
.bar-button.hovered {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 3px rgba(0, 0, 0, 0.8); }
.facebook-connect-button {
border: 1px solid rgba(0, 0, 0, 0.3);
margin-bottom: 17px;
float: right;
color: #FFFFFF;
height: 31px;
padding: 0 16px 0 13px;
display: block;
line-height: 31px;
float: right;
text-shadow: 0px -1px 0px black;
background-color: #303d63;
background-image: -webkit-linear-gradient(top, #5b6a8f, #303d63);
background-image: linear-gradient(to bottom, #5b6a8f, #303d63);
border-radius: 4px;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.75), inset 0px 1px 0 0 rgba(255, 255, 255, 0.4), inset 1px 0 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 0 rgba(255, 255, 255, 0.1); }
.login-input .facebook-connect-button {
margin: 25px 0 0; }
.facebook-password-message {
color: #c5c8d8;
display: none; }
.facebook-connect-button.disable {
opacity: .6; }
body.body_fb_connect {
padding: 10px;
min-width: 0px; }
p.p_fb_connect {
color: white;
font-size: 16px; }
#facebook_connect_mobile_container {
text-align: center; }
.facebook-connect {
float: none;
width: 220px;
line-height: 1.5;
margin: auto; }
.fb-return-to-app {
float: none;
margin: auto;
line-height: 1.5; }
.fb-return-to-app > a {
font-size: 15px;
height: 30px;
margin: 0px;
float: none !important; }
.facebook-mobile-float-none {
float: none; }
.facebook-f {
background: url(/assets/facebook-f-db885539da18a152d414ded7614dd94b.png) center left no-repeat;
height: 31px;
width: 17px;
float: left;
padding: 0 !important; }
.facebook-connect-button:hover {
color: #FFF; }
a#disconnect-facebook {
color: #B8C0CC;
text-decoration: normal; }
a:hover#disconnect-facebook {
color: #B8C0CC;
text-decoration: underline; }
.facebook-connect-button.left {
float: left; }
.dark-blue-button {
color: #ffffff;
background: #35619f url(/assets/facebook-f-db885539da18a152d414ded7614dd94b.png) 8px center no-repeat;
text-shadow: 0 0 3px #000000;
padding-left: 24px; }
.dark-blue-button:hover {
color: #FFFFFF;
background-color: #3e72ba; }
.dark-blue-button:visited {
color: white; }
.dark-gray-button {
color: #898e97;
background-color: #4b4c4f;
text-shadow: 0 0 3px #000000; }
.dark-gray-button:hover,
.dark-gray-button.hovered {
background-color: #5e5f62;
color: #898e97; }
.med-gray-button:visited,
.med-gray-button:link {
color: #c5c9d1;
background-color: #4b4c4f;
text-shadow: 0 0 3px #000000; }
.med-gray-button:hover {
background-color: #616871;
color: #c5c9d1; }
.user-bar-divider {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
.user-bar-avatar {
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -80px -320px;
background-repeat: no-repeat;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.5); }
.user-bar-avatar:after {
content: '';
background-image: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png);
background-position: -80px -320px;
background-repeat: no-repeat; }
.user-password .dark-gray-button,
.user-bar-avatar-container .dark-gray-button {
color: #898E97; }
#profilePicUpload {
font-size: 20px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
cursor: hand; }
@-moz-document url-prefix() {
#profilePicUpload {
font-size: 100px; } }
.user-bar .error {
background-color: #f3cccc;
font-size: 11px;
font-weight: bold;
color: #c52828;
text-shadow: 0 1px 0 rgba(255, 247, 247, 0.5);
padding: 10px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 3px; }
.user-bar .error .icon {
background-position: -80px -240px; }
.user-bar .success {
color: #D2E3FD;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.user-bar .success:before {
content: '';
background: url(/assets/bg/sprites/sprites-52353313cbde913138bcf6c4602d2ffc.png) no-repeat -220px -20px transparent; }
/* CROPPER LAYOUT */
.image-cropper-container {position: absolute; top: 100px; left: 100px; z-index: 4}
.image-cropper-canvas {/*min-width: 400px; min-height: 400px;*/ padding: 15px}
.image-cropper-footer {width: 100%; height: 40px}
.image-details {font-size: 11px; margin: 14px 0 0 11px}
.image-cropper-save {float: right; margin: 5px 5px 0 0}
.photo-icon {width: 11px; height: 13px; margin-right: 5px}
.image-cropper-close {position: absolute; top: -5px; right: -5px;}
.image-cropper-close span {width: 20px; height: 20px;}
/* CROPPER SKIN */
.image-cropper-canvas {
background-color: #999999;
background-image: url(/assets/bg/cropper-bg-ede810fd948831d06373a7524267b9b1.png);
border-radius: 5px 5px 0 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
#cropping-image {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }
.image-cropper-footer {
background-color: #ffffff;
background-image: -webkit-linear-gradient(top, rgba(77, 83, 95, 0.9), rgba(46, 52, 63, 0.9));
background-image: linear-gradient(to bottom, rgba(77, 83, 95, 0.9), rgba(46, 52, 63, 0.9));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E54D535F', EndColorStr='#E52E343F');
border-radius: 0 0 5px 5px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 0 rgba(255, 255, 255, 0.3), 0 0 3px rgba(0, 0, 0, 0.6); }
.image-cropper-save span {
background-position: -180px -240px; }
.image-details {
color: #a6a6a6;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); }
.image-cropper-close span {
background-position: -120px 0; }
@media screen and (max-width: 1050px) {
.number-band-track-info {
top: 44px;
z-index: 1;
border: 1px solid #000000;
padding: 6px 10px;
left: 0 !important;
width: 100%;
text-align: center;
height: 39px;
padding: 0 !important;
line-height: 39px;
border-bottom: 1px solid #000;
border-radius: 0 0 5px 5px;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.25);
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000', EndColorStr='#00000000'); }
.button.iphone-app-btn {
position: absolute;
z-index: 1;
right: 6px;
top: 42px; } }
@media (max-width: 1040px) {
html[lang="en"] .social-change-link {
display: block; } }
@media screen and (max-width: 979px) {
.feat-primary-col {
width: calc(100% - 490px); } }
@media screen and (max-width: 749px) {
.player-disabled-mask {
position: absolute;
width: 494px;
height: 40px;
right: 0;
left: 0;
z-index: 2; } }
/* RESPONSIVE LAYOUT */
.mob-only {
display: none; }
.mosaic-view-type.mobile {
display: none; }
@media only screen and (max-width: 1110px) {
.mosaic-artist-search {
width: 120px; }
.mosaic-artist-search-input {
width: 95px; } }
@media only screen and (max-width: 1050px) {
.fright > li > a {
padding: 0 6px !important; }
.mosaic-meta-filter p {
padding: 0px !important; } }
@media only screen and (max-width: 959px) {
.hide-tab,
.butn.butn-radio {
display: none; }
body,
#container {
min-width: 0; }
/* FILTER PANEL */
.mosaic-top-bar {
height: auto; }
.mosaic-search-tools.fleft {
float: none;
clear: both;
display: none;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #17191d;
padding: 15px;
background: #2c323a;
/* Old browsers */
background: -webkit-linear-gradient(top, #2c323a 0%, #22272d 100%);
background: linear-gradient(to bottom, #2c323a 0%, #22272d 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c323a', endColorstr='#22272d',GradientType=0 );
/* IE6-9 */ }
.mosaic-search-tools.fleft .mosaic-view-type {
display: none; }
html[lang="ar"] .mosaic-search-tools > div {
float: none; }
.mosaic-menu.fright {
display: none; }
.mosaic-view-type {
position: absolute;
top: 8px;
right: 10px; }
html[lang="ar"] .mosaic-view-type {
right: auto;
left: 10px; }
.mosaic-view-type.mobile {
display: block; }
.mosaic-search-tools {
padding: 10px; }
.mosaic-search-tools > div {
float: none; }
.mosaic-filter-view-container {
margin-left: 0; }
.mosaic-meta-filter,
html[lang="ar"] .mosaic-meta-filter {
margin-top: 17px;
margin-bottom: 10px; }
html[lang="ar"] .mosaic-meta-filter {
float: right;
margin-right: -14px; }
.mosaic-meta-filter > p {
padding-left: 0;
position: relative;
top: -25px; }
html[lang="ar"] .mosaic-meta-filter > p {
padding-right: 0;
padding-left: 6px; }
.mosaic-meta-filter a, .mosaic-meta-filter a:active {
padding: 4px 7px; }
.mosaic-meta-filter > p.break {
padding-left: 16px; }
html[lang="ar"] .mosaic-meta-filter > p.break {
padding-left: 0;
padding-right: 16px; }
.mosaic-filter-popular {
margin-left: -26px; }
html[lang="ar"] .mosaic-filter-popular {
margin-left: 0;
margin-right: -84px; }
.mosaic-filter-genere-container {
margin-left: -31px; }
html[lang="ar"] .mosaic-filter-genere-container {
margin-left: 0;
margin-right: -80px; }
.mosaic-meta-filter a span:after {
margin-left: 20px; }
html[lang="ar"] .mosaic-meta-filter a span:after {
margin-left: 0;
margin-right: 20px; }
.mosaic-meta-filter a.mosaic-filter-country span:after,
.mosaic-meta-filter a.mosaic-filter-genere span:after {
margin-left: 20px; }
html[lang="ar"] .mosaic-meta-filter a.mosaic-filter-country span:after, html[lang="ar"]
.mosaic-meta-filter a.mosaic-filter-genere span:after {
margin-left: 0;
margin-right: 20px; }
.mosaic-text-filter {
clear: both; }
.mosaic-artist-search {
width: 96%;
padding: 5px 2%; }
.mosaic-artist-search-input {
width: 90%; }
/* TOGGLE SEARCH PANEL */
.toggle-mosaic-search-tools {
font-size: 11px;
color: #fff;
line-height: 1em;
font-family: 'proxima_nova_semibold';
color: #b8c0cd;
margin: 10px 0 0 20px; }
.toggle-mosaic-search-tools:hover {
color: #fff; }
.toggle-mosaic-search-tools:hover.active {
background-image: -webkit-linear-gradient(top, #23262f, #2c3039);
background-image: linear-gradient(to bottom, #23262f, #2c3039);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#23262f', EndColorStr='#2c3039');
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); }
html[lang="ar"] .toggle-mosaic-search-tools {
float: right;
margin: 10px 20px 0 0; } }
@media only screen and (max-width: 767px) {
.hide-mob {
display: none; }
.mob-only {
display: block; }
html {
overflow: visible; }
html[lang="en"] .social-change-link,
html[lang="ar"] .social-change-link {
display: none; }
.butn.iphone-app-button,
.header-user-info .butn,
.header-user-info .button {
display: none; }
#container {
padding-bottom: 61px;
height: 100%;
width: 100%;
overflow: hidden; }
/* MOBILE NAVIGATION */
.menu-icon {
background-position: 0 -650px;
width: 25px;
height: 19px;
position: absolute;
right: 10px;
top: 12px;
text-indent: -9999px; }
.menu-icon .u-hide {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
html[lang="ar"] .menu-icon {
right: auto;
left: 10px; }
.mob-nav {
position: absolute;
width: 235px;
z-index: 1;
top: 0;
right: 0;
height: 100%;
background-color: #1b1d22;
display: none; }
html[lang="ar"] .mob-nav {
right: auto;
left: 0; }
.mob-panel.is-active {
display: block; }
.mob-nav .header-user-info-mob {
width: 100%;
padding: 0;
float: none; }
.mob-nav .header-user-info-mob .prev-logout {
text-align: left;
padding: 9px 0 9px 7px;
width: 85% !important; }
.mob-nav .header-user-info-mob .butn,
.mob-nav .header-user-info-mob .button {
width: 50%;
box-sizing: border-box;
margin: 0;
text-align: center;
padding: 12px 0;
border: 0;
border-radius: 0; }
.mob-nav .header-user-info-mob .my-band {
width: 42.5% !important;
padding: 17px 10px 14px 10px; }
.mob-nav .header-user-info-mob .have-a-band {
width: 42.5%; }
.mob-nav .header-user-info-mob .butn span {
font-family: 'proxima_nova_rgregular';
font-size: 14px; }
.mob-nav .header-user-info-mob img {
width: 22px;
height: 22px;
margin-right: 3px;
margin-left: 3px; }
.mob-nav .header-user-info-mob .logout {
width: 15%;
padding: 18px 10px 17px 10px;
text-align: center; }
.mob-nav .header-user-info-mob .logout .icon {
margin: 0 auto;
float: none;
display: block; }
.mob-nav ul {
clear: both;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
border-top: 1px solid #2c3645; }
.mob-nav li {
padding: 0;
margin: 0;
border-bottom: 1px solid #2c3645; }
.mob-nav li a {
color: #fff;
font-size: 14px;
display: block;
padding: 13px 20px;
font-family: 'proxima_nova_rgregular';
background: #404f66;
background: -webkit-linear-gradient(top, #404f66 0%, #313d4f 100%);
background: linear-gradient(to bottom, #404f66 0%, #313d4f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404f66', endColorstr='#313d4f',GradientType=0 ); }
.mob-nav li .tooltip a {
color: initial;
font-size: initial;
display: initial;
padding: initial;
background: initial;
-webkit-filter: initial;
filter: initial;
border: none; }
.player-menu-my-collections .player-menu-item-button {
width: initial;
float: none; }
.player-menu-suggestions .signup-login-tooltip,
.player-menu-my-collections .signup-login-tooltip {
left: -80px; }
.lang-switch a.button span {
font-size: 14px;
font-family: 'proxima_nova_rgregular'; }
.lang-switch {
float: right;
margin: 6px 10px 0 0 !important;
padding: 2px !important; }
.player-suggestions .jspVerticalBar,
.mosaic-collections-menu-scroll-container .jspVerticalBar {
width: 13px;
border-left: none; }
.player-suggestions .jspTrack {
background-color: rgba(0, 0, 0, 0.4); }
.mosaic-collections-menu-scroll-container .jspTrack {
background-color: rgba(0, 0, 0, 0.4);
margin-top: 10px; }
.player-suggestions .jspDrag,
.mosaic-collections-menu-scroll-container .jspDrag {
border: none;
margin: 3px;
background-image: -webkit-gradient(linear, left top, right top, from(#6b7079), to(#50565e));
background-color: #d2d2d2;
background-color: rgba(210, 210, 210, 0.6);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
-webkit-box-shadow: none;
-moz-box-shadow: none; }
/* FEATURE: Container */
.feat-container {
height: 252px; }
.feat-col {
min-width: 0; }
.feat-primary-col {
width: 100%;
height: 100%; }
.feat-secondary-col {
display: none; }
/* FEATURE: Prev Next Btns */
.feat-prev-band,
.feat-next-band {
top: 80px; }
/* ARTIST TILES */
.jspPane {
margin-top: 10px; }
.mosaic-fade span {
display: none; }
.grid .mosaic-pool-cell {
margin: 0 0 5px 7px; }
html[lang="ar"] .grid .mosaic-pool-cell {
margin: 0 7px 5px 0; }
/* LIST */
.list .mosaic-pool-cell, .list .mosaic-pool-cell-big {
box-shadow: none;
margin: 5px 10px 0; }
/* PLAYER */
footer {
min-width: 0;
position: fixed; }
.player-disabled-mask {
width: 100%; }
.player-menu,
.player-info-element-volume {
display: none; }
.player-controls-container {
height: 52px;
margin-right: 0; }
html[lang="ar"] .player-controls-container {
margin: 0; }
.player-controls {
height: 60px; }
.player-info-random {
margin-top: 4px; }
.player-info-random .mob-hide {
display: none; }
.playback-random {
margin-left: 0;
margin-right: 0;
padding: 8px 6px 5px 7px; }
.playback-controls-buttons, .player-menu, .player-info {
padding: 10px 0 0; }
.player-info {
margin-left: 220px; }
.player-info-progress-container {
bottom: 17px;
min-width: 120px; }
.player-info-element {
text-align: left; }
.small-player-info-progress-container {
float: none;
position: absolute;
bottom: 3px; }
.small-player-info-progress-container > .small-counter {
top: 1px; }
.player-info-element-progress {
margin-right: 60px; }
.player-info-song-title {
top: -8px;
max-width: 170px; }
.player-info-progress-bar {
width: 95%; }
.modal-tooltip.subscribe-to-band,
.modal-tooltip.track-tooltip,
.modal-tooltip.heart-song,
.modal-tooltip.heart-collection-tooltip,
.modal-tooltip.suggestions,
.modal-tooltip.my-collections-tooltip {
width: 100%;
left: 0 !important;
border-radius: 0;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 60px; }
.modal-tooltip.subscribe-to-band .shadow,
.modal-tooltip.track-tooltip .shadow,
.modal-tooltip.heart-song .shadow,
.modal-tooltip.heart-collection-tooltip .shadow,
.modal-tooltip.suggestions .shadow,
.modal-tooltip.my-collections-tooltip .shadow {
left: 0; }
.modal-tooltip.subscribe-to-band .arrow,
.modal-tooltip.track-tooltip .arrow,
.modal-tooltip.heart-song .arrow,
.modal-tooltip.heart-collection-tooltip .arrow,
.modal-tooltip.suggestions .arrow,
.modal-tooltip.my-collections-tooltip .arrow {
display: none; }
.modal-tooltip.subscribe-to-band .close-tooltip,
.modal-tooltip.track-tooltip .close-tooltip,
.modal-tooltip.heart-song .close-tooltip,
.modal-tooltip.heart-collection-tooltip .close-tooltip,
.modal-tooltip.suggestions .close-tooltip,
.modal-tooltip.my-collections-tooltip .close-tooltip {
position: absolute;
right: 0;
top: 0;
height: 100%;
background-color: #B6BABF; }
.modal-tooltip.subscribe-to-band .icon,
.modal-tooltip.track-tooltip .icon,
.modal-tooltip.heart-song .icon,
.modal-tooltip.heart-collection-tooltip .icon,
.modal-tooltip.suggestions .icon,
.modal-tooltip.my-collections-tooltip .icon {
background-position: -74px -652px;
width: 50px;
height: 46px; }
.modal-tooltip.track-tooltip,
.modal-tooltip.suggestions,
.modal-tooltip.my-collections-tooltip {
z-index: 5; }
.modal-tooltip.subscribe-to-band,
.modal-tooltip.heart-song,
.modal-tooltip.heart-collection-tooltip {
position: fixed;
bottom: 60px;
top: initial; }
.embed-player-container .share-row {
padding-top: 0px;
border-top: none;
margin: 0; }
.embed-player-container.embed-player-container-song {
position: fixed;
bottom: 50px;
top: initial !important;
width: 100% !important;
left: 0 !important;
border-radius: 0;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 60px;
height: 46px; }
.embed-player-container.embed-player-container-song .embed-instructions-title,
.embed-player-container.embed-player-container-song .code-generator-form,
.embed-player-container.embed-player-container-song .embed-player-container-song-textarea,
.embed-player-container.embed-player-container-song .shadow .arrow {
display: none; }
.embed-player-container.embed-player-container-song .close-tooltip .icon {
position: absolute;
top: 0px;
right: 0px;
background-position: -74px -652px;
width: 50px;
height: 46px; }
/* UPDATED FOOTER CONTROLS */
.playback-control-item-play.random {
background: none;
box-shadow: none;
margin-left: 10px;
margin-right: 20px;
padding-top: 4px; }
footer .button.ghost {
padding: 10px;
height: auto;
display: inline-block;
float: left;
color: #bec3d2;
text-shadow: 0 -1px 0 #232b37;
box-shadow: inset 0 1px 0 #4e6480;
border-bottom: 1px solid #17191d;
background: #3a4a5f;
background: -webkit-linear-gradient(top, #3a4a5f 0%, #2d394a 100%);
background: linear-gradient(to bottom, #3a4a5f 0%, #2d394a 100%);
border-radius: 2px 0 0 2px; }
.toggle-random-settings.toggle-random-settings {
display: inline-block !important;
float: left;
position: relative !important;
right: auto;
top: auto;
padding: 10px;
box-shadow: inset 0 1px 0 #4e6480;
border-bottom: 1px solid #17191d;
border-left: 1px solid #3d4e64;
background: #3a4a5f;
background: -webkit-linear-gradient(top, #3a4a5f 0%, #2d394a 100%);
background: linear-gradient(to bottom, #3a4a5f 0%, #2d394a 100%);
border-radius: 0 2px 2px 0; }
.toggle-random-settings.toggle-random-settings:hover {
background: -webkit-linear-gradient(top, #4f6380 0%, #3d4c63 100%) !important;
background: linear-gradient(to bottom, #4f6380 0%, #3d4c63 100%) !important;
border-left: 1px solid #3d4e64; }
/* DOWNLOAD APP BANNER */
.download-app-banner {
display: none;
position: absolute;
z-index: 999;
bottom: 57px;
left: 0;
width: 100%;
height: 50px;
box-shadow: inset 0 1px 0 0 #79adef;
padding: 4px 10px;
box-sizing: border-box;
color: #fff;
background: #447dd2;
background: -webkit-linear-gradient(top, #447dd2 0%, #295da9 100%);
background: linear-gradient(to bottom, #447dd2 0%, #295da9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#447dd2', endColorstr='#295da9',GradientType=0 ); }
.download-app-banner p {
position: relative;
margin: 5px auto 0;
text-align: center;
font-size: 12px;
text-shadow: 0 -1px 0 #14346e;
font-family: 'proxima_nova_semibold';
max-width: 160px; }
.download-app-banner .app-img {
display: inline-block;
z-index: 1000;
position: absolute;
left: 10px;
top: -7px; }
.download-app-banner .app-img .icon {
background-position: -144px -650px;
width: 67px;
height: 57px; }
.download-app-banner .close-banner {
position: absolute;
right: 0;
top: 0; }
.download-app-banner .close-banner .icon {
background-position: -243px -651px;
width: 50px;
height: 51px; }
/* SELECTED ARTIST MODALS */
.lightbox-overlay {
top: 45px; }
.band-rich-info {
display: none; }
.mosaic-selected-content {
padding-bottom: 150px; }
.mosaic-selected-artist-container {
width: 96%;
height: auto;
left: 2%;
top: 45px;
display: none;
margin-left: 0;
margin-top: 0;
padding-bottom: 31px; }
.mosaic-selected-header {
box-sizing: border-box;
padding: 30px 15px 15px;
height: auto; }
.mosaic-selected-close, .mosaic-selected-close:hover {
top: 15px;
right: 10px; }
.mosaic-selected-artist {
width: 100%;
height: auto;
float: none;
margin: 0; }
.mosaic-selected-slideshow-container {
position: relative;
z-index: 1; }
.mosaic-selected-header .artist-name {
margin: 0 0 5px; }
.mosaic-selected-header .artist-actions span {
margin: 0 5px 5px 0;
max-width: 700px; }
.mosaic-selected-header .artist-actions span:nth-last-child(2) {
clear: both; }
.icn-genre,
.icn-play-time,
.icn-heart-favorite {
margin-right: 3px; }
.mosaic-selected-slideshow {
width: 290px;
margin: 0 auto 20px; }
.slideshow-controls {
width: 100%;
left: 0;
z-index: 999999; }
.slideshow-controls .switch-left, .slideshow-controls .switch-right {
width: 50%; }
.slideshow-controls .switch-right .details-right-icon {
opacity: 1;
background-position: -140px -80px;
margin: 0;
position: absolute;
right: 5px;
top: 45%; }
.slideshow-controls .switch-left .details-left-icon {
background-position: -140px -120px;
opacity: 1;
margin: 0;
position: absolute;
left: 5px;
top: 45%; }
.mosaic-select-artist-details {
width: 100%;
position: relative;
top: 0;
float: none; }
.mosaic-select-artist-details .nav li {
width: 24.7%; }
.mosaic-select-artist-details .nav li:last-child {
border-radius: 0; }
.mosaic-selected-artist .support-social,
.mosaic-selected-artist .follow {
width: 100%;
box-sizing: border-box; }
.mosaic-selected-artist .support-social {
top: 647px;
bottom: auto; }
.mosaic-selected-artist .follow {
top: 726px;
bottom: auto;
border-radius: 0 0 3px 3px; }
.support-social .share {
text-align: center; }
.support-social .facebook-btn,
.support-social .twitter-btn {
float: none;
display: inline-block;
margin: 1px 5px; }
.similar-artists {
display: none; }
.mosaic-select-artist-details .artist-panel {
padding: 20px 10px; }
.mosaic-selected-content .jspPane {
width: 100% !important; }
.track-name {
width: 80%; }
.mosaic-select-artist-details .artist-info p {
padding: 0 20px 0 0; }
.mosaic-select-artist-details .artist-gallery .main-image {
text-align: center; }
.mosaic-select-artist-details .artist-gallery .main-image img {
margin-left: 0;
width: auto;
max-height: 193px; }
.mosaic-selected-tracklist .track-list-scroll-container,
.artist-info-scroll-container {
width: 100% !important; }
.mosaic-select-artist-details .artist-gallery .main-image iframe {
width: 100%; }
/* SUGGESTIONS */
.player-suggestions-container {
position: fixed;
bottom: auto;
top: 0;
right: 0;
width: 0px;
height: 100% !important; }
.player-suggestions.empty .empty-content {
width: 75%; }
.player-suggestions-list {
padding: 15px 10px 10px 10px;
width: 205px !important;
height: 100%; }
.player-suggestions-list li {
width: 200px;
float: none;
margin-right: 0;
margin-bottom: 10px; }
.player-suggestions {
height: 100% !important; }
.player-suggestions-container a.suggestion-arrow {
display: none !important; }
.playlist header {
width: 220px; }
.playlist li {
width: 230px; }
.playlist-header-right {
margin: 10px 0 -10px 0; }
.playlist-note {
top: 60px;
right: 50px; }
.playlist-note:after, .playlist-note:before {
top: -14px;
left: 30px;
border-bottom-color: #09080b;
border-left-color: transparent; }
.country-scroll-container {
width: 200px; }
.mosaic-filter-country-options {
left: -78px; }
.genre-scroll-container {
width: 200px; }
.mosaic-collections-menu-scroll-container {
width: 200px;
right: -4px;
background-color: initial; }
.mosaic-collection-name {
color: white !important; }
.mosaic-collection-artist-count {
display: none; }
.mosaic-collection-artist-count-mob {
display: block; }
.mosaic-collection-name {
display: none !important; }
.mosaic-collection-name-mob {
display: block;
line-height: 11px; }
.mosaic-collection-name-mob div {
max-width: 95px;
display: inline-block; }
.mosaic-collection-name-mob p {
text-overflow: ellipsis;
overflow: hidden; } }
.track-tooltip {
display: none;
margin-bottom: -46px;
position: absolute;
width: 290px; }
@media screen and (min-width: 600px) and (max-width: 767px) {
html[lang="ar"] body {
overflow: hidden; } }
@media screen and (max-width: 600px) {
#main {
margin-top: 40px; }
#container {
padding-bottom: 0; }
.feat-container {
display: none !important; }
.playback-control-item-play.random,
footer .button.ghost,
.toggle-random-settings.toggle-random-settings {
display: none; }
.player-info {
margin-left: 100px; }
html[lang="ar"] .player-info {
margin-left: 110px; }
.playback-controls-buttons {
padding-left: 10px; } }
@media only screen and (max-width: 1280px) {
.fright > li > a {
font-size: 9px;
padding: 0 8px; } }
/*! Humaan CSS v4.0 */
@font-face {
font-family: "Icons";
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot);
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot?#iefix) format("eot"); }
.icon:before {
font-family: "Icons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
text-decoration: none;
text-transform: none; }
.icon-icn_01_cans:before {
content: "\E001"; }
.icon-icn_02_mic:before {
content: "\E002"; }
.icon-icn_03_darrow:before {
content: "\E003"; }
.icon-icn_04_play:before {
content: "\E004"; }
.icon-icn_05_bin:before {
content: "\E005"; }
.icon-icn_06_add:before {
content: "\E006"; }
.icon-icn_07_tick:before {
content: "\E007"; }
.icon-icn_08_edit:before {
content: "\E008"; }
.icon-icn_09_fb:before {
content: "\E009"; }
.icon-icn_10_twitter:before {
content: "\E00A"; }
.icon-icn_11_insta:before {
content: "\E00B"; }
.icon-icn_12_globe:before {
content: "\E00C"; }
.icon-icn_13_music:before {
content: "\E00D"; }
.icon-icn_14_image:before {
content: "\E00E"; }
.icon-icn_15_camera:before {
content: "\E00F"; }
.icon-icn_16_user:before {
content: "\E010"; }
.icon-icn_17_speech:before {
content: "\E011"; }
.icon-icn_18_cog:before {
content: "\E012"; }
.icon-icn_19_links:before {
content: "\E013"; }
.icon-icn_20_crop:before {
content: "\E014"; }
.styled {
overflow: hidden;
/* this hides the select's drop button */
padding: 0;
margin: 0;
margin-bottom: 15px;
border: 1px solid #ebebeb;
padding: 9px 10px 10px;
width: 100%;
position: relative;
box-sizing: border-box; }
.styled select {
width: 115%;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
border: none;
box-shadow: none;
outline: none;
padding: 0.3em 0.5em;
/* padding should be added to the select, not the div */
box-sizing: border-box; }
.styled select:focus {
outline: none; }
.onboarding input[type="text"],
.onboarding textarea {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin-bottom: 12px;
border-radius: 3px;
border: 1px solid;
border: 1px solid rgba(0, 0, 0, 0.25);
color: #676b72;
padding-left: 10px;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05); }
.onboarding input[type="text"] {
height: 40px; }
.onboarding textarea {
height: 130px;
resize: none; }
.onboarding .confirmation-message {
zoom: 1;
float: left;
display: none;
margin-top: 20px;
padding: 12px 20px;
font-size: 13px;
border-radius: 3px;
color: #d5d5d5;
background: #525356; }
.onboarding .confirmation-message .title {
font-weight: bold;
margin-bottom: 5px; }
.onboarding .confirmation-message .subtitle {
font-size: 11px; }
.onboarding input.rtl {
direction: rtl; }
.onboarding.band-step .progress-controls-wrap,
.onboarding .band-profile-edit-globals .progress-controls-wrap {
display: inline-block;
width: 100%;
margin-top: 25px; }
.onboarding .band-step .btn-next,
.onboarding .band-profile-edit-globals .btn-next {
float: left; }
.onboarding.band-step .skip-step,
.onboarding .band-profile-edit-globals .skip-step {
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 11px;
color: #8f919a;
display: inline-block;
float: left;
margin: 10px 0 0 15px; }
.onboarding.band-step .skip-step:hover,
.onboarding .band-profile-edit-globals .skip-step:hover {
color: #fff; }
.onboarding .button {
color: #fff;
padding: 8px 30px;
box-sizing: border-box; }
.onboarding fieldset {
border: none;
padding: 0;
margin: 0 0 10px 0; }
.signup-login input[type="radio"] {
position: absolute;
top: 13px;
left: 12px;
z-index: 100; }
.signup-login .radiogroup .input-wrap {
width: 48%;
position: relative;
display: inline-block;
height: 40px; }
.signup-login .radiogroup .input-wrap span:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 20px;
position: absolute;
color: #fff; }
.onboarding .radiogroup .input-wrap:nth-child(1) {
float: left; }
.onboarding .radiogroup .input-wrap:nth-child(1) span:before {
content: "\E001";
left: -35px;
top: -4px; }
.onboarding .radiogroup .input-wrap:nth-child(2) {
float: right; }
.onboarding .radiogroup .input-wrap:nth-child(2) span {
left: 62px; }
.onboarding .radiogroup .input-wrap:nth-child(2) span:before {
content: "\E002";
left: -25px;
top: -2px; }
.signup-login input[type="radio"] + label {
-webkit-transition: background 200ms ease, border 200ms;
transition: background 200ms ease, border 200ms;
position: relative;
cursor: pointer;
display: block;
height: 40px;
width: 100%;
border: 1px solid transparent;
background: rgba(23, 23, 23, 0.2);
display: inline-block;
border-radius: 2px; }
.signup-login input[type="radio"] + label:hover {
background: #fff;
color: #595959; }
.signup-login input[type="radio"] + label:hover span:before {
color: #315e9d; }
.signup-login input[type="radio"]:hover + label {
background: #fff;
color: #595959; }
.signup-login input[type="radio"]:hover + label span {
color: #595959; }
.signup-login input[type="radio"]:hover + label span:before {
color: #315e9d; }
.signup-login input[type="radio"] + label span {
position: absolute;
top: 12px;
left: 70px;
color: #a9a9a9; }
.signup-login input[type="radio"]:checked + label {
background: #fff;
color: #595959; }
.signup-login input[type="radio"]:checked + label span {
color: #595959; }
.signup-login input[type="radio"]:checked + label span:before {
color: #315e9d; }
.onboarding .select-menu {
color: #b8c0cd;
font-weight: bold;
font-size: 13px;
padding: 12px 10px;
height: 40px;
width: 100%;
margin-bottom: 10px;
position: relative;
cursor: pointer; }
.onboarding .select-menu:after {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 15px;
top: 16px;
color: #b1b9c6;
font-size: 6px;
content: "\E003"; }
.form-progress {
position: relative;
width: 100%;
height: 4px;
background: #505154;
z-index: 100; }
.form-progress:after {
position: absolute;
z-index: 100;
height: 4px;
top: 0;
background: #0c87ba;
content: ''; }
.form-progress span {
width: 1px;
position: absolute;
top: 0;
z-index: 200; }
.form-progress span:after {
height: 100%;
width: 1px;
height: 4px;
content: '';
background: #adadad;
display: block; }
.form-progress span:nth-child(1) {
left: 20%; }
.form-progress span:nth-child(2) {
left: 40%; }
.form-progress span:nth-child(3) {
left: 60%; }
.form-progress span:nth-child(4) {
left: 80%; }
.drag-drop-wrap {
padding-bottom: 25px;
font-size: 11px;
color: #fff;
border-bottom: 1px solid #595959; }
.drag-drop-wrap p {
margin-bottom: 0; }
.drag-drop-wrap .drag-drop {
zoom: 1;
background: #525356;
border: 1px dashed #5c5c5f;
padding: 12px 20px;
margin-bottom: 15px;
font-size: 13px;
color: #d5d5d5;
border-radius: 3px;
position: relative; }
.drag-drop-wrap .drag-drop:before,
.drag-drop-wrap .drag-drop:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.drag-drop-wrap .drag-drop:after {
clear: both; }
.drag-drop-wrap .drag-drop .dropzone {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.drag-drop-wrap .drag-drop-errors {
display: none;
color: red;
margin-bottom: 8px; }
.drag-drop-wrap .drag-drop span {
float: left;
margin-top: 10px; }
.drag-drop-wrap .drag-drop .upload-wrap {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
float: right;
border: 1px solid #666;
background: #5c5d60;
color: #fff;
font-size: 11px;
height: 35px;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
position: relative;
box-sizing: border-box; }
.drag-drop-wrap .drag-drop .upload-wrap:hover {
background: #434446; }
.drag-drop-wrap .drag-drop .file-input {
position: absolute;
background: 0 0;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer; }
.drag-drop-wrap .meta span {
color: #8f919a; }
.bidi-embed {
unicode-bidi: embed; }
.drag-drop-wrap .dz-preview {
zoom: 1;
margin-top: 20px;
position: relative; }
.drag-drop-wrap .dz-preview:before,
.drag-drop-wrap .dz-preview:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.drag-drop-wrap .dz-preview:after {
clear: both; }
.drag-drop-wrap .dz-image {
width: 57px;
float: left;
padding-right: 20px;
display: none; }
.drag-drop-wrap .dz-image img {
max-width: 100%;
height: auto;
border: 4px solid #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); }
.drag-drop-wrap .dz-filename {
padding-right: 80px; }
.drag-drop-wrap .dz-remove {
position: absolute;
right: 0;
top: 50%;
width: 15px;
height: 15px;
font-size: 0; }
.drag-drop-wrap .dz-remove:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 13px;
color: #939393;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
content: "\E005"; }
.drag-drop-wrap .dz-remove:hover:before {
color: #b9b9b9; }
.drag-drop-wrap .dz-error-message,
.drag-drop-wrap .dz-success-mark,
.drag-drop-wrap .dz-error-mark {
display: none; }
#band-gallery .dz-image {
display: block; }
#band-gallery .dz-details {
padding-left: 80px;
position: relative; }
.artist-item-wrap {
padding: 15px 0;
color: #fff;
font-size: 13px;
border-bottom: 1px solid #595959;
display: inline-block;
width: 100%;
min-height: 50px;
box-sizing: border-box;
position: relative; }
.artist-item-wrap.active .edit-control.edit-title {
display: none; }
.artist-item-wrap.featured .item-img img {
border: 4px solid #0c8ec4; }
.artist-item-wrap.disabled .item-img img {
border: 4px solid #939393; }
.artist-item-wrap.featured .item-img-featured:before {
border: 1px solid #fff !important;
background: #0b86b8; }
.artist-item-wrap.disabled .item-img-featured:before {
border: 1px solid #fff !important;
cursor: wait;
background: #939393; }
.artist-item-wrap.can-drag {
padding-right: 20px; }
.artist-item-wrap.song .item-edit-wrap .reorder,
.artist-item-wrap.video .item-edit-wrap .reorder {
position: absolute;
right: -5px;
top: 10px;
cursor: move; }
.artist-item-wrap.song .item-edit-wrap .reorder .icn-reorder,
.artist-item-wrap.video .item-edit-wrap .reorder .icn-reorder {
height: 30px; }
.artist-item-wrap.song textarea,
.artist-item-wrap.video textarea {
height: 75px; }
.artist-item-wrap.video .link-wrap,
.artist-item-wrap.video .video-wrap,
.artist-item-wrap.link .link-wrap,
.artist-item-wrap.link .video-wrap {
float: left; }
.artist-item-wrap.video .link-wrap a,
.artist-item-wrap.video .video-wrap a,
.artist-item-wrap.link .link-wrap a,
.artist-item-wrap.link .video-wrap a {
text-decoration: none;
color: inherit; }
.artist-item-wrap.video .link-wrap .item-title,
.artist-item-wrap.video .link-wrap .item-description,
.artist-item-wrap.video .video-wrap .item-title,
.artist-item-wrap.video .video-wrap .item-description,
.artist-item-wrap.link .link-wrap .item-title,
.artist-item-wrap.link .link-wrap .item-description,
.artist-item-wrap.link .video-wrap .item-title,
.artist-item-wrap.link .video-wrap .item-description {
display: block;
float: none; }
.artist-item-wrap.video .link-wrap .item-description,
.artist-item-wrap.video .video-wrap .item-description,
.artist-item-wrap.link .link-wrap .item-description,
.artist-item-wrap.link .video-wrap .item-description {
color: #939393; }
.artist-item-wrap.image {
min-height: 90px; }
.artist-item-wrap.image .artist-image-loading {
background-color: #fff;
width: 100%;
height: 100%; }
.artist-item-wrap.image .item-img-featured {
display: inline-block;
float: left;
padding-left: 17px;
position: relative;
font-size: 11px;
color: #8f919a;
margin-top: 25px;
cursor: pointer; }
.artist-item-wrap.image .item-img-featured:before {
border: 1px solid #939393;
width: 10px;
height: 10px;
position: absolute;
left: 0;
content: ''; }
.artist-item-wrap.image .item-edit-wrap {
margin-top: 25px; }
.artist-item-wrap.image .item-edit-wrap .reorder {
position: absolute;
right: -5px;
top: 10px;
cursor: move; }
.artist-item-wrap.image .item-edit-wrap .reorder .icn-reorder {
height: 75px;
background: url(/assets/move-long-1a917ca21b9ceb2efa662e5af9a6859c.png) no-repeat center top;
background-position: 0; }
.artist-item-wrap.image textarea {
height: 75px; }
.artist-item-wrap .upper {
zoom: 1; }
.artist-item-wrap .upper:before,
.artist-item-wrap .upper:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.artist-item-wrap .upper:after {
clear: both; }
.artist-item-wrap .song-load-spinner {
width: 16px;
float: left;
margin-right: 18px;
margin-left: -3px; }
.artist-item-wrap .item-play {
width: 16px;
height: 16px;
position: relative;
cursor: pointer;
margin-right: 15px;
float: left;
-webkit-transform: translateY(-1px);
transform: translateY(-1px); }
.artist-item-wrap .item-play:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 16px;
color: #0b86b8;
content: "\E004"; }
.artist-item-wrap .item-play:hover:before {
color: #1eb4f2; }
.artist-item-wrap .item-img {
width: 65px;
height: 65px;
box-sizing: border-box;
float: left;
margin-right: 10px; }
.artist-item-wrap .item-img img {
border: 4px solid #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
max-width: 100%;
height: auto;
box-sizing: border-box; }
.artist-item-wrap .item-title {
height: 16px;
width: 190px;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.artist-item-wrap .item-edit-wrap {
float: right; }
.artist-item-wrap .item-edit-wrap .edit-control {
width: 13px;
height: 15px;
display: inline-block;
margin-left: 5px;
cursor: pointer; }
.artist-item-wrap .item-edit-wrap .edit-control:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 13px;
color: #939393;
-webkit-transform: translateY(-1px);
transform: translateY(-1px); }
.artist-item-wrap .item-edit-wrap .edit-control:hover:before {
color: #b9b9b9; }
.artist-item-wrap .item-edit-wrap .edit-control.edit-crop:before {
content: "\E014"; }
.artist-item-wrap .item-edit-wrap .edit-control.edit-title:before {
content: "\E008"; }
.artist-item-wrap .item-edit-wrap .edit-control.edit-delete:before {
content: "\E005"; }
.artist-item-wrap .item-edit-wrap span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.artist-item-wrap .editing-item {
margin-top: 15px;
display: none; }
.confirm-action {
width: 22px;
height: 22px;
display: inline-block;
float: right;
position: relative;
cursor: pointer; }
.confirm-action:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #9b9b9b;
content: "\E007"; }
.confirm-action:hover:before {
color: #c1c1c1; }
.ar .social-item-wrap .item-title {
direction: ltr; }
.ar .social-item-wrap.active .editing-item {
text-align: left; }
.ar .social-item-wrap.active .prefill-label {
direction: ltr; }
.social-item-wrap {
padding: 5px 0 0 5px;
margin-bottom: 5px;
color: #fff;
font-size: 13px;
display: inline-block;
width: 100%;
position: relative; }
.social-item-wrap.active .item-icon.facebook:before {
color: #3b5998; }
.social-item-wrap.active .item-icon.twitter:before {
color: #4099ff; }
.social-item-wrap.active .item-icon.instagram:before {
color: #3f729b; }
.social-item-wrap.active .item-icon.web:before {
color: #86b817; }
.social-item-wrap .item-icon {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
margin-right: 10px;
float: left;
z-index: 100; }
.social-item-wrap .item-icon:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #fff; }
.social-item-wrap .item-icon.facebook:before {
content: "\E009"; }
.social-item-wrap .item-icon.twitter:before {
content: "\E00A"; }
.social-item-wrap .item-icon.instagram:before {
content: "\E00B"; }
.social-item-wrap .item-icon.web:before {
content: "\E00C"; }
.social-item-wrap .item-title {
float: left;
margin-top: 3px; }
.social-item-wrap .prefill-label {
color: #a9a9a9;
display: inline-block;
padding: 7px 0 0 30px; }
.social-item-wrap .add-action {
width: 22px;
height: 22px;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
cursor: pointer; }
.social-item-wrap .add-action:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #9b9b9b;
content: "\E006"; }
.social-item-wrap .add-action:hover:before {
color: #c1c1c1; }
.social-item-wrap .editing-item {
display: none;
position: absolute;
width: 100%;
height: 30px;
z-index: 0;
background: #fff;
border: 1px solid;
border-radius: 3px;
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
margin-left: -5px; }
.social-item-wrap .editing-item input {
border: none;
background: none;
padding: 5px 5px 5px 160px;
position: absolute;
top: 0;
left: 0;
height: 28px; }
.social-item-wrap .editing-item input.twitter-name {
padding-left: 140px; }
.social-item-wrap .editing-item input.url-name {
padding-left: 40px; }
.video-item-wrap,
.link-item-wrap {
padding: 0;
margin-bottom: 10px;
color: #fff;
font-size: 13px;
display: inline-block;
width: 100%;
position: relative; }
.video-item-wrap.active .item-icon.facebook:before,
.link-item-wrap.active .item-icon.facebook:before {
color: #3b5998; }
.video-item-wrap .item-icon,
.link-item-wrap .item-icon {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
margin-right: 10px;
float: left;
z-index: 100; }
.video-item-wrap .item-icon:before,
.link-item-wrap .item-icon:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #fff;
content: "\E00F"; }
.video-item-wrap .item-title,
.link-item-wrap .item-title {
float: left;
margin-top: 3px; }
.video-item-wrap .prefill-label,
.link-item-wrap .prefill-label {
color: #a9a9a9;
display: inline-block;
padding: 7px 0 0 30px; }
.video-item-wrap .add-action,
.link-item-wrap .add-action {
height: 22px;
width: 100%;
display: inline-block;
margin: 0 10px 5px 0;
padding: 0 0 10px 30px;
position: relative;
cursor: pointer;
box-sizing: border-box; }
.video-item-wrap .add-action:before,
.link-item-wrap .add-action:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #9b9b9b;
content: "\E006";
position: absolute;
left: 0; }
.video-item-wrap .add-action:hover:before,
.link-item-wrap .add-action:hover:before {
color: #c1c1c1; }
.video-item-wrap .add-action .meta,
.link-item-wrap .add-action .meta {
color: #939393;
font-size: 11px; }
.video-item-wrap .editing-item,
.link-item-wrap .editing-item {
display: none;
width: 100%;
height: 165px;
position: relative; }
.video-item-wrap .editing-item input,
.link-item-wrap .editing-item input {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin-bottom: 12px;
border-radius: 3px;
border: 1px solid;
position: relative; }
.video-item-wrap .editing-item textarea,
.link-item-wrap .editing-item textarea {
height: 75px; }
.band-admin-tabs ul {
zoom: 1;
margin: 0; }
.band-admin-tabs ul:before,
.band-admin-tabs ul:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.band-admin-tabs ul:after {
clear: both; }
.band-admin-tabs li {
display: inline-block;
float: left;
width: 16.6667%; }
.band-admin-tabs a {
width: 100%;
height: 50px;
display: block;
padding: 0;
color: #b8c0cd;
font-size: 12px;
font-weight: bold;
text-shadow: 0 -1px 0 #06090d;
box-shadow: inset 0 1px 0 #566b8a, inset 1px 0 0 #1d2229;
cursor: pointer;
position: relative;
background: #3f4f66;
/* Old browsers */
/* FF3.6+ */
background: -webkit-linear-gradient(top, #3f4f66 0%, #313d4f 100%);
background: linear-gradient(to bottom, #3f4f66 0%, #313d4f 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4f66', endColorstr='#313d4f',GradientType=0 );
/* IE6-9 */ }
.band-admin-tabs a:hover {
background: #475a74;
/* Old browsers */
/* FF3.6+ */
background: -webkit-linear-gradient(top, #475a74 0%, #313d4f 100%);
background: linear-gradient(to bottom, #475a74 0%, #313d4f 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#475a74', endColorstr='#313d4f',GradientType=0 );
/* IE6-9 */ }
.band-admin-tabs a.active {
background: #0c90c7;
background: -webkit-linear-gradient(top, #0c90c7 0%, #0a709a 100%);
background: linear-gradient(to bottom, #0c90c7 0%, #0a709a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c90c7', endColorstr='#0a709a',GradientType=0 );
box-shadow: inset 0 1px 0 0 #10b7db;
text-shadow: 0 -1px 0 #06425a; }
.band-admin-tabs a.active:before {
color: #fff; }
.band-admin-tabs a:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 15px;
color: #bdc2d3;
position: absolute;
top: 17px; }
.band-admin-tabs a.band-music:before {
content: "\E00D"; }
.band-admin-tabs a.band-gallery:before {
content: "\E00E"; }
.band-admin-tabs a.band-video:before {
content: "\E00F"; }
.band-admin-tabs a.band-bio:before {
content: "\E010"; }
.band-admin-tabs a.band-social:before {
content: "\E011"; }
.band-admin-tabs a.band-links {
margin-bottom: 0; }
.band-admin-tabs a.band-links:before {
content: "\E013"; }
.band-admin-tabs a span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.band-admin-section-wrap {
zoom: 1;
padding: 40px 20px 20px;
display: block;
width: 100%;
height: calc(100vh - 200px);
box-sizing: border-box;
overflow-y: auto; }
.band-admin-section-wrap:before,
.band-admin-section-wrap:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.band-admin-section-wrap:after {
clear: both; }
.band-admin-section.normal {
display: none;
color: #fff;
width: 100%;
box-sizing: border-box; }
.band-admin-section.normal.default {
display: block; }
/* Custom styles for the user on boarding process */
hr {
width: 100%;
border: 0;
height: 0;
border-bottom: 1px solid #595959; }
.onboarding #signup-form {
padding-top: 40px; }
.aside-bar #signup-form {
padding-top: 40px; }
.aside-bar .form-container,
.onboarding #signup-band-form {
padding: 40px 20px 20px; }
.aside-bar .form-errors {
display: none; }
.band-step-1 .form-progress:after {
width: 20%; }
.band-step-2 .form-progress:after {
width: 40%; }
.band-step-3 .form-progress:after {
width: 60%; }
.band-step-4 .form-progress:after {
width: 80%; }
.band-step-5 .form-progress:after {
width: 100%; }
.onboarding .band-profile {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 100%;
width: 100%;
height: 150px;
position: relative;
box-sizing: border-box; }
.onboarding .band-profile:before {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
content: '';
z-index: 0; }
.onboarding .band-profile .content {
padding: 5px 5px 5px 20px;
display: inline-block;
position: relative; }
.onboarding .band-profile-name .content,
.onboarding .band-profile-arabic-name .content {
padding-left: 5px; }
.onboarding .band-profile-arabic-name {
margin-bottom: 20px; }
.onboarding .band-profile-gender,
.onboarding .band-profile-gender-list,
.onboarding .band-profile-country {
position: relative; }
.onboarding .band-profile-edit-details {
position: absolute;
top: 15px;
width: 15px;
height: 15px;
cursor: pointer; }
.onboarding .band-profile-edit-details-right {
right: 10px; }
.onboarding .band-profile-edit-details-left {
left: 10px; }
.onboarding .band-profile-gender .band-profile-gender-content {
height: 100%; }
.onboarding .band-profile-edit-details:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
position: absolute;
color: #6e6e6f;
font-size: 15px;
content: "\E012";
z-index: 100; }
.onboarding .band-profile-edit-details:hover:before {
color: #fff; }
.onboarding .band-profile-edit-globals {
background: url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png) repeat top left #4d4e52;
box-shadow: -1px 0 5px black, inset 1px 0 0 rgba(255, 255, 255, 0.1);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 200;
display: none; }
.onboarding .band-profile-edit-globals label {
display: block;
color: #fff;
margin-bottom: 3px; }
.onboarding #band-social .progress-controls-wrap {
margin-top: 10px; }
.onboarding .band-profile-country-list,
.onboarding .band-profile-gender-list {
margin: 0;
padding: 10px;
width: 290px;
float: left; }
.onboarding .band-profile-country-list label,
.onboarding .band-profile-gender-list label {
display: inline !important;
color: inherit !important; }
.onboarding .select-menu.content:before {
content: '';
background: none; }
.band-profile-country .band-profile-country-edit,
.band-profile-gender .band-profile-gender-edit {
left: 0; }
.band-profile-country .band-admin-input,
.band-profile-gender .band-admin-input {
margin-bottom: 0 !important; }
/*! Humaan CSS v4.0 */
@font-face {
font-family: "Icons";
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot);
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot?#iefix) format("eot"), url(/assets/Icons-ed68885b06a155555b7c6296d862ccfd.woff) format("woff"), url(/assets/Icons-81e1ed4c78f4a206c9a369afc3468a8a.ttf) format("truetype"), url(/assets/Icons-1e81fbe7f9dea2acc4d8c46d6cac8cfe.svg#Icons) format("svg"); }
.icon:before {
font-family: "Icons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
text-decoration: none;
text-transform: none; }
.icon-icn_01_cans:before {
content: "\E001"; }
.icon-icn_02_mic:before {
content: "\E002"; }
.icon-icn_03_darrow:before {
content: "\E003"; }
.icon-icn_04_play:before {
content: "\E004"; }
.icon-icn_05_bin:before {
content: "\E005"; }
.icon-icn_06_add:before {
content: "\E006"; }
.icon-icn_07_tick:before {
content: "\E007"; }
.icon-icn_08_edit:before {
content: "\E008"; }
.icon-icn_09_fb:before {
content: "\E009"; }
.icon-icn_10_twitter:before {
content: "\E00A"; }
.icon-icn_11_insta:before {
content: "\E00B"; }
.icon-icn_12_globe:before {
content: "\E00C"; }
.icon-icn_13_music:before {
content: "\E00D"; }
.icon-icn_14_image:before {
content: "\E00E"; }
.icon-icn_15_camera:before {
content: "\E00F"; }
.icon-icn_16_user:before {
content: "\E010"; }
.icon-icn_17_speech:before {
content: "\E011"; }
.icon-icn_18_cog:before {
content: "\E012"; }
.icon-icn_19_links:before {
content: "\E013"; }
.icon-icn_20_crop:before {
content: "\E014"; }
.icon-icn_21_heart:before {
content: "\E015"; }
.icon-icn_22_play:before {
content: "\E016"; }
.icon-icn_23_share:before {
content: "\E017"; }
.icon-icn_24_fbalt:before {
content: "\E018"; }
.icon-icn_25_twitteralt:before {
content: "\E019"; }
.icon-icn_26_google:before {
content: "\E01A"; }
.icon-icn_27_tumblr:before {
content: "\E01B"; }
.icon-icn_28_mail:before {
content: "\E01C"; }
.icon-icn_29_tickalt:before {
content: "\E01D"; }
.icon-icn_30-back:before {
content: "\E01E"; }
.icon-icn_31-reorder:before {
content: "\E01F"; }
.icon-icn_32-reorderalt:before {
content: "\E020"; }
.styled {
overflow: hidden;
/* this hides the select's drop button */
padding: 0;
margin: 0;
margin-bottom: 15px;
border: 1px solid #ebebeb;
padding: 9px 10px 10px;
width: 100%;
position: relative;
box-sizing: border-box; }
.styled select {
width: 115%;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
border: none;
box-shadow: none;
outline: none;
padding: 0.3em 0.5em;
/* padding should be added to the select, not the div */
box-sizing: border-box; }
.styled select:focus {
outline: none; }
.onboarding input[type="text"],
.onboarding textarea {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin-bottom: 12px;
border-radius: 3px;
border: 1px solid;
border: 1px solid rgba(0, 0, 0, 0.25);
color: #676b72;
padding-left: 10px;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0.1)));
/* Safari */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* ie */
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05); }
.onboarding input[type="text"] {
height: 40px; }
.onboarding textarea {
height: 130px;
resize: none; }
.onboarding input.rtl {
direction: rtl; }
.onboarding .band-step .progress-controls-wrap,
.onboarding .band-profile-edit-globals .progress-controls-wrap {
display: inline-block;
width: 100%;
margin-top: 25px; }
.onboarding .band-step .btn-next,
.onboarding .band-profile-edit-globals .btn-next {
float: left; }
.onboarding .band-step .skip-step,
.onboarding .band-profile-edit-globals .skip-step {
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 11px;
color: #8f919a;
display: inline-block;
float: left;
margin: 10px 0 0 15px; }
.onboarding .band-step .skip-step:hover,
.onboarding .band-profile-edit-globals .skip-step:hover {
color: #fff; }
.onboarding .button {
color: #fff;
padding: 8px 30px;
box-sizing: border-box; }
.onboarding fieldset {
border: none;
padding: 0;
margin: 0 0 10px 0; }
.onboarding .radiogroup .input-wrap {
position: relative;
display: inline-block;
height: 40px; }
.onboarding .radiogroup .input-wrap span:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 20px;
position: absolute;
color: #fff; }
.onboarding .radiogroup .input-wrap:nth-child(1) {
float: left; }
.onboarding .radiogroup .input-wrap:nth-child(1) span:before {
content: "\E001";
left: -35px;
top: -4px; }
.onboarding .radiogroup .input-wrap:nth-child(2) {
float: right; }
.onboarding .radiogroup .input-wrap:nth-child(2) span {
left: 62px; }
.onboarding .radiogroup .input-wrap:nth-child(2) span:before {
content: "\E002";
left: -25px;
top: -2px; }
.onboarding input[type="radio"] + label {
-webkit-transition: background 200ms ease, border 200ms;
transition: background 200ms ease, border 200ms;
position: relative;
cursor: pointer;
display: block;
height: 40px;
width: 100%;
border: 1px solid transparent;
background: rgba(23, 23, 23, 0.2);
display: inline-block;
border-radius: 2px; }
.onboarding input[type="radio"] + label:hover {
background: #fff;
color: #595959; }
.onboarding input[type="radio"] + label:hover span:before {
color: #315e9d; }
.onboarding input[type="radio"]:hover + label {
background: #fff;
color: #595959; }
.onboarding input[type="radio"]:hover + label span {
color: #595959; }
.onboarding input[type="radio"]:hover + label span:before {
color: #315e9d; }
.onboarding input[type="radio"] + label span {
position: absolute;
top: 12px;
left: 70px;
color: #a9a9a9; }
.onboarding input[type="radio"]:checked + label {
background: #fff;
color: #595959; }
.onboarding input[type="radio"]:checked + label span {
color: #595959; }
.onboarding input[type="radio"]:checked + label span:before {
color: #315e9d; }
.onboarding .select-menu {
color: #b8c0cd;
font-weight: bold;
padding: 12px 10px;
height: 40px;
width: 100%;
margin-bottom: 10px;
position: relative;
cursor: pointer; }
.onboarding .select-menu:after {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 15px;
top: 16px;
color: #b1b9c6;
font-size: 6px;
content: "\E003"; }
.form-progress {
position: relative;
width: 100%;
height: 4px;
background: #505154;
z-index: 100; }
.form-progress:after {
position: absolute;
z-index: 100;
height: 4px;
top: 0;
background: #0c87ba;
content: ''; }
.form-progress span {
width: 1px;
position: absolute;
top: 0;
z-index: 200; }
.form-progress span:after {
height: 100%;
width: 1px;
height: 4px;
content: '';
background: #adadad;
display: block; }
.form-progress span:nth-child(1) {
left: 20%; }
.form-progress span:nth-child(2) {
left: 40%; }
.form-progress span:nth-child(3) {
left: 60%; }
.form-progress span:nth-child(4) {
left: 80%; }
.drag-drop-wrap {
padding-bottom: 25px;
font-size: 11px;
color: #fff;
border-bottom: 1px solid #595959; }
.drag-drop-wrap p {
margin-bottom: 0; }
.drag-drop-wrap .drag-drop {
zoom: 1;
background: #525356;
border: 1px dashed #5c5c5f;
padding: 12px 20px;
margin-bottom: 15px;
font-size: 13px;
color: #d5d5d5;
border-radius: 3px;
position: relative; }
.drag-drop-wrap .drag-drop:before, .drag-drop-wrap .drag-drop:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.drag-drop-wrap .drag-drop:after {
clear: both; }
.drag-drop-wrap .drag-drop .dropzone {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.drag-drop-wrap .drag-drop span {
float: left;
margin-top: 10px; }
.drag-drop-wrap .drag-drop .upload-wrap {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
float: right;
border: 1px solid #666;
background: #5c5d60;
color: #fff;
font-size: 11px;
height: 35px;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
position: relative;
box-sizing: border-box; }
.drag-drop-wrap .drag-drop .upload-wrap:hover {
background: #434446; }
.drag-drop-wrap .drag-drop .file-input {
position: absolute;
background: 0 0;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer; }
.drag-drop-wrap .meta span {
color: #8f919a; }
.drag-drop-wrap .dz-preview {
zoom: 1;
margin-top: 20px;
position: relative; }
.drag-drop-wrap .dz-preview:before, .drag-drop-wrap .dz-preview:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.drag-drop-wrap .dz-preview:after {
clear: both; }
.drag-drop-wrap .dz-image {
width: 57px;
float: left;
padding-right: 20px;
display: none; }
.drag-drop-wrap .dz-image img {
max-width: 100%;
height: auto;
border: 4px solid #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); }
.drag-drop-wrap .dz-upload {
width: 100%; }
.drag-drop-wrap .dz-filename {
padding-right: 80px; }
.drag-drop-wrap .dz-remove {
position: absolute;
right: 0;
top: 50%;
width: 15px;
height: 15px;
font-size: 0; }
.drag-drop-wrap .dz-remove:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 13px;
color: #939393;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
content: "\E005"; }
.drag-drop-wrap .dz-remove:hover:before {
color: #b9b9b9; }
.drag-drop-wrap .dz-error-message,
.drag-drop-wrap .dz-success-mark,
.drag-drop-wrap .dz-error-mark {
display: none; }
#band-gallery .dz-image {
display: block; }
#band-gallery .dz-details {
padding-left: 80px;
position: relative; }
.artist-item-wrap {
padding: 15px 0;
color: #fff;
font-size: 13px;
border-bottom: 1px solid #595959;
display: inline-block;
width: 100%;
min-height: 50px;
box-sizing: border-box;
position: relative; }
.artist-item-wrap.active .edit-control.edit-title {
display: none; }
.artist-item-wrap.featured .item-img img {
border: 4px solid #0c8ec4; }
.artist-item-wrap.featured .item-img-featured:before {
border: 1px solid #fff !important;
background: #0b86b8; }
.artist-item-wrap.can-drag {
padding-right: 20px; }
.artist-item-wrap.song .item-edit-wrap .reorder, .artist-item-wrap.video .item-edit-wrap .reorder {
position: absolute;
right: -5px;
top: 10px;
cursor: move; }
.artist-item-wrap.song .item-edit-wrap .reorder .icn-reorder, .artist-item-wrap.video .item-edit-wrap .reorder .icn-reorder {
height: 30px; }
.artist-item-wrap.song textarea, .artist-item-wrap.video textarea {
height: 75px; }
.artist-item-wrap.video .link-wrap,
.artist-item-wrap.video .video-wrap, .artist-item-wrap.link .link-wrap,
.artist-item-wrap.link .video-wrap {
float: left; }
.artist-item-wrap.video .link-wrap a,
.artist-item-wrap.video .video-wrap a, .artist-item-wrap.link .link-wrap a,
.artist-item-wrap.link .video-wrap a {
text-decoration: none;
color: inherit; }
.artist-item-wrap.video .link-wrap .item-title,
.artist-item-wrap.video .link-wrap .item-description,
.artist-item-wrap.video .video-wrap .item-title,
.artist-item-wrap.video .video-wrap .item-description, .artist-item-wrap.link .link-wrap .item-title,
.artist-item-wrap.link .link-wrap .item-description,
.artist-item-wrap.link .video-wrap .item-title,
.artist-item-wrap.link .video-wrap .item-description {
display: block;
float: none; }
.artist-item-wrap.video .link-wrap .item-description,
.artist-item-wrap.video .video-wrap .item-description, .artist-item-wrap.link .link-wrap .item-description,
.artist-item-wrap.link .video-wrap .item-description {
color: #939393; }
.artist-item-wrap.image {
min-height: 90px; }
.artist-item-wrap.image .item-img-featured {
display: inline-block;
float: left;
padding-left: 17px;
position: relative;
font-size: 11px;
color: #8f919a;
margin-top: 25px;
cursor: pointer; }
.artist-item-wrap.image .item-img-featured:before {
border: 1px solid #939393;
width: 10px;
height: 10px;
position: absolute;
left: 0;
content: ''; }
.artist-item-wrap.image .item-edit-wrap {
margin-top: 25px; }
.artist-item-wrap.image .item-edit-wrap .reorder {
position: absolute;
right: -5px;
top: 10px;
cursor: move; }
.artist-item-wrap.image .item-edit-wrap .reorder .icn-reorder {
height: 75px;
background: url(/assets/move-long-1a917ca21b9ceb2efa662e5af9a6859c.png) no-repeat center top;
background-position: 0; }
.artist-item-wrap.image textarea {
height: 75px; }
.artist-item-wrap .upper {
zoom: 1; }
.artist-item-wrap .upper:before, .artist-item-wrap .upper:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.artist-item-wrap .upper:after {
clear: both; }
.artist-item-wrap .item-play {
width: 16px;
height: 16px;
position: relative;
cursor: pointer;
margin-right: 15px;
float: left;
-webkit-transform: translateY(-1px);
transform: translateY(-1px); }
.artist-item-wrap .item-play:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 16px;
color: #0b86b8;
content: "\E004"; }
.artist-item-wrap .item-play:hover:before {
color: #1eb4f2; }
.artist-item-wrap .item-img {
width: 65px;
height: 65px;
box-sizing: border-box;
float: left;
margin-right: 10px; }
.artist-item-wrap .item-img img {
border: 4px solid #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
max-width: 100%;
height: auto;
box-sizing: border-box; }
.artist-item-wrap .item-title {
float: left; }
.artist-item-wrap .item-edit-wrap {
float: right; }
.artist-item-wrap .item-edit-wrap .edit-control {
width: 13px;
height: 15px;
display: inline-block;
margin-left: 5px;
cursor: pointer; }
.artist-item-wrap .item-edit-wrap .edit-control:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 13px;
color: #939393;
-webkit-transform: translateY(-1px);
transform: translateY(-1px); }
.artist-item-wrap .item-edit-wrap .edit-control:hover:before {
color: #b9b9b9; }
.artist-item-wrap .item-edit-wrap .edit-control.edit-crop:before {
content: "\E014"; }
.artist-item-wrap .item-edit-wrap .edit-control.edit-title:before {
content: "\E008"; }
.artist-item-wrap .item-edit-wrap .edit-control.edit-delete:before {
content: "\E005"; }
.artist-item-wrap .item-edit-wrap span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.artist-item-wrap .editing-item {
margin-top: 15px;
display: none; }
.confirm-action {
width: 22px;
height: 22px;
display: inline-block;
float: right;
position: relative;
cursor: pointer; }
.confirm-action:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #9b9b9b;
content: "\E007"; }
.confirm-action:hover:before {
color: #c1c1c1; }
.social-item-wrap {
padding: 5px 0 0 5px;
margin-bottom: 5px;
color: #fff;
font-size: 13px;
display: inline-block;
width: 100%;
position: relative; }
.social-item-wrap.active .item-icon.facebook:before {
color: #3b5998; }
.social-item-wrap.active .item-icon.twitter:before {
color: #4099ff; }
.social-item-wrap.active .item-icon.instagram:before {
color: #3f729b; }
.social-item-wrap.active .item-icon.web:before {
color: #86b817; }
.social-item-wrap .item-icon {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
margin-right: 10px;
float: left;
z-index: 100; }
.social-item-wrap .item-icon:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #fff; }
.social-item-wrap .item-icon.facebook:before {
content: "\E009"; }
.social-item-wrap .item-icon.twitter:before {
content: "\E00A"; }
.social-item-wrap .item-icon.instagram:before {
content: "\E00B"; }
.social-item-wrap .item-icon.web:before {
content: "\E00C"; }
.social-item-wrap .item-title {
float: left;
margin-top: 3px; }
.social-item-wrap .prefill-label {
color: #a9a9a9;
display: inline-block;
padding: 7px 0 0 30px; }
.social-item-wrap .add-action {
width: 22px;
height: 22px;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
cursor: pointer; }
.social-item-wrap .add-action:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #9b9b9b;
content: "\E006"; }
.social-item-wrap .add-action:hover:before {
color: #c1c1c1; }
.social-item-wrap .editing-item {
display: none;
position: absolute;
width: 100%;
height: 30px;
z-index: 0;
background: #fff;
border: 1px solid;
border-radius: 3px;
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
margin-left: -5px; }
.social-item-wrap .editing-item input {
border: none;
background: none;
padding: 5px 5px 5px 160px;
position: absolute;
top: 0;
left: 0;
height: 28px; }
.social-item-wrap .editing-item input.twitter-name {
padding-left: 140px; }
.social-item-wrap .editing-item input.url-name {
padding-left: 40px; }
.video-item-wrap,
.link-item-wrap {
padding: 0;
margin-bottom: 10px;
color: #fff;
font-size: 13px;
display: inline-block;
width: 100%;
position: relative; }
.video-item-wrap.active .item-icon.facebook:before,
.link-item-wrap.active .item-icon.facebook:before {
color: #3b5998; }
.video-item-wrap .item-icon,
.link-item-wrap .item-icon {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
margin-right: 10px;
float: left;
z-index: 100; }
.video-item-wrap .item-icon:before,
.link-item-wrap .item-icon:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #fff;
content: "\E00F"; }
.video-item-wrap .item-title,
.link-item-wrap .item-title {
float: left;
margin-top: 3px; }
.video-item-wrap .prefill-label,
.link-item-wrap .prefill-label {
color: #a9a9a9;
display: inline-block;
padding: 7px 0 0 30px; }
.video-item-wrap .add-action,
.link-item-wrap .add-action {
height: 22px;
width: 100%;
display: inline-block;
margin: 0 10px 5px 0;
padding: 0 0 10px 30px;
position: relative;
cursor: pointer;
box-sizing: border-box; }
.video-item-wrap .add-action:before,
.link-item-wrap .add-action:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-size: 20px;
color: #9b9b9b;
content: "\E006";
position: absolute;
left: 0; }
.video-item-wrap .add-action:hover:before,
.link-item-wrap .add-action:hover:before {
color: #c1c1c1; }
.video-item-wrap .add-action .meta,
.link-item-wrap .add-action .meta {
color: #939393;
font-size: 11px; }
.video-item-wrap .editing-item,
.link-item-wrap .editing-item {
display: none;
width: 100%;
height: 165px;
position: relative; }
.video-item-wrap .editing-item input,
.link-item-wrap .editing-item input {
box-sizing: border-box;
width: 100%;
padding: 10px;
margin-bottom: 12px;
border-radius: 3px;
border: 1px solid;
position: relative; }
.video-item-wrap .editing-item textarea,
.link-item-wrap .editing-item textarea {
height: 75px; }
.band-admin-tabs ul {
zoom: 1;
margin: 0; }
.band-admin-tabs ul:before, .band-admin-tabs ul:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.band-admin-tabs ul:after {
clear: both; }
.band-admin-tabs li {
display: inline-block;
float: left;
width: 16.6667%; }
.band-admin-tabs a {
width: 100%;
height: 50px;
display: block;
padding: 0;
color: #b8c0cd;
font-size: 12px;
font-weight: bold;
text-shadow: 0 -1px 0 #06090d;
box-shadow: inset 0 1px 0 #566b8a, inset 1px 0 0 #1d2229;
cursor: pointer;
position: relative;
background: #3f4f66;
/* Old browsers */
background: -webkit-linear-gradient(top, #3f4f66 0%, #313d4f 100%);
background: linear-gradient(to bottom, #3f4f66 0%, #313d4f 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4f66', endColorstr='#313d4f',GradientType=0 );
/* IE6-9 */ }
.band-admin-tabs a:hover {
background: #475a74;
/* Old browsers */
background: -webkit-linear-gradient(top, #475a74 0%, #313d4f 100%);
background: linear-gradient(to bottom, #475a74 0%, #313d4f 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#475a74', endColorstr='#313d4f',GradientType=0 );
/* IE6-9 */ }
.band-admin-tabs a.active {
background: #0c90c7;
background: -webkit-linear-gradient(top, #0c90c7 0%, #0a709a 100%);
background: linear-gradient(to bottom, #0c90c7 0%, #0a709a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c90c7', endColorstr='#0a709a',GradientType=0 );
box-shadow: inset 0 1px 0 0 #10b7db;
text-shadow: 0 -1px 0 #06425a; }
.band-admin-tabs a.active:before {
color: #fff; }
.band-admin-tabs a:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 15px;
color: #bdc2d3;
position: absolute;
top: 17px; }
.band-admin-tabs a.band-music:before {
content: "\E00D"; }
.band-admin-tabs a.band-gallery:before {
content: "\E00E"; }
.band-admin-tabs a.band-video:before {
content: "\E00F"; }
.band-admin-tabs a.band-bio:before {
content: "\E010"; }
.band-admin-tabs a.band-social:before {
content: "\E011"; }
.band-admin-tabs a.band-links {
margin-bottom: 0; }
.band-admin-tabs a.band-links:before {
content: "\E013"; }
.band-admin-tabs a span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.band-admin-section-wrap {
zoom: 1;
padding: 40px 20px 20px;
display: block;
width: 100%;
height: calc(100vh - 200px);
box-sizing: border-box;
overflow-y: auto; }
.band-admin-section-wrap:before, .band-admin-section-wrap:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.band-admin-section-wrap:after {
clear: both; }
.band-admin-section.normal {
display: none;
color: #fff;
width: 100%;
box-sizing: border-box; }
.band-admin-section.normal.default {
display: block; }
/* Custom styles for the user on boarding process */
hr {
width: 100%;
border: 0;
height: 0;
border-bottom: 1px solid #595959; }
.aside-bar.onboarding #signup-form {
padding-top: 40px; }
.aside-bar.onboarding #signup-band-form {
padding: 40px 20px 20px; }
.aside-bar.onboarding .form-errors {
display: none; }
.aside-bar.onboarding #signup-form {
padding-top: 40px; }
.aside-bar.onboarding #signup-band-form {
padding: 40px 20px 20px; }
.aside-bar.onboarding .form-errors {
display: none; }
.band-step-1 .form-progress:after {
width: 20%; }
.band-step-2 .form-progress:after {
width: 40%; }
.band-step-3 .form-progress:after {
width: 60%; }
.band-step-4 .form-progress:after {
width: 80%; }
.band-step-5 .form-progress:after {
width: 100%; }
.onboarding .band-profile {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 100%;
width: 100%;
height: 150px;
position: relative;
box-sizing: border-box; }
.onboarding .band-profile:before {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
content: '';
z-index: 0; }
.onboarding .band-profile .content {
padding: 5px 5px 5px 20px;
display: inline-block;
position: relative; }
.onboarding .band-profile-name .content,
.onboarding .band-profile-arabic-name .content {
padding-left: 5px; }
.onboarding .band-profile-arabic-name {
margin-bottom: 20px; }
.onboarding .band-profile-gender,
.onboarding .band-profile-gender-list,
.onboarding .band-profile-country {
position: relative; }
.onboarding .band-profile-edit-details {
position: absolute;
top: 15px;
width: 15px;
height: 15px;
cursor: pointer; }
.onboarding .band-profile-edit-details:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
position: absolute;
color: #6e6e6f;
font-size: 15px;
content: "\E012";
z-index: 100; }
.onboarding .band-profile-edit-details:hover:before {
color: #fff; }
.onboarding .band-profile-edit-globals {
background: url(/assets/bg/aside-noise-9503d2209b90a293f68f2695d926f63c.png) repeat top left #4d4e52;
box-shadow: -1px 0 5px black, inset 1px 0 0 rgba(255, 255, 255, 0.1);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 200;
display: none; }
.onboarding .band-profile-edit-globals label {
display: block;
color: #fff;
margin-bottom: 3px; }
.onboarding #band-social .progress-controls-wrap {
margin-top: 10px; }
/*! Humaan CSS v4.0 */
/* normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none; }
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold; }
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden; }
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0; }
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto; }
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em; }
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */ }
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal; }
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto; }
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold; }
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
td,
th {
padding: 0; }
.container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
/* Default Margin */
html {
font-size: 6.25%; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
line-height: normal;
margin: 0; }
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
font-weight: inherit; }
h1 {
font-size: 30px;
font-size: 30rem;
line-height: 1.6; }
h2 {
font-size: 24px;
font-size: 24rem;
line-height: 1.5; }
h3 {
font-size: 22px;
font-size: 22rem;
line-height: 1.5; }
h4 {
font-size: 18px;
font-size: 18rem;
line-height: 1.4; }
h5 {
font-size: 16px;
font-size: 16rem;
line-height: 1.4; }
h6 {
font-size: 12px;
font-size: 12rem;
line-height: 1.3; }
main p {
font-size: 14px;
font-size: 14rem;
line-height: 1.5;
margin: 0 0 20px; }
small {
font-size: 10px;
font-size: 10rem;
line-height: 1.3; }
main p {
margin: 0 0 20px; }
small {
font-size: 80%; }
a {
outline: 0;
-webkit-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
color: #3597eb; }
a:hover,
a:focus {
color: #2c6596; }
blockquote,
blockquote p {
font-style: italic; }
blockquote {
margin: 0 0 20px;
padding: 20px;
padding-left: 40px;
border-left: 2px solid #3597eb; }
blockquote cite {
display: block; }
blockquote cite:before {
content: "\2014 \0020"; }
figure {
margin: 0; }
/*
Theme Name:
Theme URI:
Description:
Author: Humaan
Author URI:
Version: 1.0
Tags:
*/
/* =WordPress Core - Do not remove these classes
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto; }
.alignright {
float: right;
margin: 5px 0 20px 20px; }
.alignleft {
float: left;
margin: 5px 20px 20px 0; }
.aligncenter {
display: block;
margin: 5px auto 5px auto; }
a img.alignright {
float: right;
margin: 5px 0 20px 20px; }
a img.alignnone {
margin: 5px 20px 20px 0; }
a img.alignleft {
float: left;
margin: 5px 20px 20px 0; }
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto; }
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block; }
.slick-track:before,
.slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none; }
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-dots {
list-style: none;
padding: 0px;
box-sizing: border-box;
text-align: center;
width: 100%;
display: block;
margin: 0;
padding: 30px 40px;
line-height: 1; }
.slick-dots li {
margin: 0px;
padding: 0px; }
ul.slick-dots li {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
margin: 0;
display: inline-block;
margin: 0 5px;
border: 1px solid #c7c7c7;
border-radius: 50%;
width: 8px;
height: 8px;
line-height: 1;
cursor: pointer; }
ul.slick-dots li:hover,
ul.slick-dots li:active {
border-color: #aeaeae; }
ul.slick-dots li.slick-active {
background-color: #c7c7c7; }
ul.slick-dots li.slick-active:hover,
ul.slick-dots li.slick-active:active {
background-color: #aeaeae; }
.slick-prev,
.slick-next {
position: absolute;
padding-top: 26px;
cursor: pointer; }
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
cursor: default;
color: #bfbfbf; }
.slick-prev:before,
.slick-next:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-prev {
left: 20px; }
.slick-prev:before {
content: '\E007'; }
.slick-next {
right: 20px; }
.slick-next:before {
content: '\E008'; }
ul.slick-dots li span {
display: block;
width: 8px;
height: 8px; }
input {
font-size: 14px;
font-size: 14rem;
line-height: 1.5;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-transition: border-color .2s ease-out,-webkit-box-shadow .2s ease-out;
-webkit-transition: border-color .2s ease-out;
transition: border-color .2s ease-out;
background: #fff;
border: 1px solid #ddd;
color: #666; }
input[type="checkbox"] {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-ms-appearance: checkbox !important;
-o-appearance: checkbox !important;
appearance: checkbox !important; }
input:focus {
outline: none;
box-shadow: 0 0 6px 0 #4b9de3;
border: 1px solid #4b9de3 !important; }
button {
border: none;
outline: none; }
.abtn {
display: block;
padding: 10px 15px;
text-align: center;
background-color: #333;
color: #fff;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out; }
.abtn:hover {
color: #fff;
background-color: #2c6596; }
footer .copyright p,
footer .credits p {
margin: 20px 0; }
footer .copyright {
float: left; }
footer .credits {
float: right; }
main *:before,
main *,
main *:after {
box-sizing: border-box; }
main {
background: #fff; }
main.en .ar,
main.ar .en {
display: none; }
.u-hidden {
display: none; }
.container {
max-width: 1180px;
margin: 0 auto;
position: relative; }
.parallax {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 750px; }
.contact-page .parallax {
height: 550px; }
*.rtl {
text-align: right; }
.about-page {
max-width: 2000px;
margin: 0 auto;
position: relative;
background-color: #fff; }
.contact-page {
min-height: 100%;
background: #fbfbfb; }
.about-header {
font-size: 36px;
font-size: 36rem;
color: #ffffff;
text-align: center;
padding-top: 100px;
background-repeat: no-repeat;
background-position: center top;
position: relative; }
.contact-header {
height: 550px;
padding-top: 160px; }
.about-header .content {
position: relative;
z-index: 2; }
.about-header h1 {
display: block;
margin: 0 auto;
margin-bottom: 70px; }
.about-header h1 img {
max-width: 425px;
margin: 0 auto; }
.about-header h2,
.contact-header h1 {
font-size: 36px;
font-size: 36rem;
line-height: 1.2;
max-width: 700px;
margin: 0 auto;
margin-bottom: 120px;
font-weight: 100; }
.contact-header h1 {
margin-bottom: 40px; }
.contact-header .abtn {
font-size: 16px;
font-size: 16rem;
display: inline-block;
width: 100%;
display: block;
padding: 18px 15px;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.03);
margin: 0 auto;
background: -webkit-linear-gradient(top, #588ce7 0%, #4c79c5 100%);
background: linear-gradient(to bottom, #588ce7 0%, #4c79c5 100%);
text-shadow: -1px 0 1px #3b5f9d; }
.contact-header .abtn:hover,
.contact-header .abtn:active {
background: -webkit-linear-gradient(top, #649cff 0%, #588be1 100%);
background: linear-gradient(to bottom, #649cff 0%, #588be1 100%);
/* W3C */ }
.rtl .about-header h2,
.rtl .contact-header h1 {
text-align: center; }
.contact-header p {
font-size: 18px;
font-size: 18rem;
margin: 0 auto 35px;
font-weight: 300;
max-width: 300px; }
.about-header img {
width: 100%;
height: auto;
display: block;
max-width: 983px;
margin: auto; }
.about-intro {
font-size: 18px;
font-size: 18rem;
padding: 115px 0;
color: #5d5d5d; }
.about-intro h2 {
float: left;
width: 45%;
font-size: 40px;
font-size: 40rem;
line-height: 1.2;
color: #305089;
background: -webkit-linear-gradient(#1076b0, #1e3646);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 300; }
.rtl .about-intro h2 {
float: right; }
.about-intro .content {
float: right;
width: 45%;
padding-top: 10px; }
.about-intro .content p {
font-size: 18px;
font-size: 18rem;
margin-bottom: 0;
font-weight: 300; }
.about-intro .content p:not(:last-child) {
margin-bottom: 15px; }
.rtl .about-intro .content {
float: left; }
.about-features {
font-size: 16px;
font-size: 16rem;
color: #ffffff;
text-align: center;
padding: 95px 0 85px;
text-align: center;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
max-width: none;
margin: 0 auto; }
.about-features h2 {
font-size: 40px;
font-size: 40rem;
margin-bottom: 50px;
font-weight: 100; }
.about-features ul {
list-style: none;
padding: 0px;
zoom: 1;
margin: 0;
margin-left: -60px;
display: none;
min-height: 280px; }
.about-features ul li {
margin: 0px;
padding: 0px; }
.about-features ul:before,
.about-features ul:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.about-features ul:after {
clear: both; }
.about-features ul.active {
display: block; }
.about-features ul li {
margin: 0;
width: 25%;
float: left;
text-align: left;
padding-left: 60px; }
.rtl .about-features ul li {
float: right;
text-align: right; }
.about-features h3 {
color: #588de9;
font-size: 20px;
font-size: 20rem;
line-height: 1.2;
margin-bottom: 20px;
font-weight: 300; }
.about-features p {
font-size: 16px;
font-size: 16rem;
font-weight: 300; }
.switcher {
zoom: 1;
margin: 0 auto;
display: block;
margin-bottom: 90px;
position: relative;
left: 50%;
margin-left: -120px;
width: 240px; }
.switcher:before,
.switcher:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.switcher:after {
clear: both; }
.switcher a {
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
font-size: 14px;
font-size: 14rem;
display: block;
float: left;
border: 1px solid #1f3154;
width: 120px;
background-color: #141d2f;
border-radius: 2px;
color: white;
text-decoration: none;
padding: 10px; }
.rtl .switcher a {
float: right; }
.switcher a:hover,
.switcher a:active {
background-color: #0c121d; }
.switcher a.active {
background-color: #588de9; }
.switcher a.active:hover,
.switcher a.active:active {
background-color: #6f9cec; }
.about-deatures .desktop {
display: none; }
.about-deatures .desktop.active {
display: block; }
.about-press {
background-repeat: no-repeat;
background-position: top center;
background-color: white;
padding-top: 510px;
padding-bottom: 100px; }
.about-press h2 {
font-size: 40px;
font-size: 40rem;
background: -webkit-linear-gradient(#1076b0, #1e3646);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 80px;
font-weight: 300; }
.about-press p {
font-size: 16px;
font-size: 16rem; }
.press-list {
list-style: none;
padding: 0px;
margin-left: -100px; }
.press-list li {
margin: 0px;
padding: 0px; }
.press-list li {
padding-left: 100px;
float: left;
width: 33.33333%;
margin-bottom: 50px; }
.press-list li:nth-child(3n+1) {
clear: left; }
.press-list img {
margin-bottom: 40px;
width: 100%;
height: auto;
display: block;
max-width: 238px; }
.social-follow {
list-style: none;
padding: 0px;
font-size: 12px;
font-size: 12rem;
margin: 0;
position: fixed;
z-index: 99;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
text-align: center;
background-color: #fafafa;
display: none; }
.social-follow li {
margin: 0px;
padding: 0px; }
.rtl .social-follow {
left: auto;
right: 0; }
.social-follow li {
margin: 0; }
.social-follow li.title {
color: #353535;
padding: 5px;
display: block;
height: auto; }
.social-follow a {
width: 60px;
height: 60px;
display: block;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out; }
.social-follow li.twitter a {
background: url(/assets/about/icn-twitter-7802f086cd9672ffae8cd02d3ea6beeb.png) center center no-repeat;
background-color: #09cbf1; }
.social-follow li.twitter a:hover,
.social-follow li.twitter a:active {
background-color: #36d8f7; }
.social-follow li.facebook a {
background: url(/assets/about/icn-facebook-d2e046321dcaaa102abba3589c942003.png) center center no-repeat;
background-color: #245e99; }
.social-follow li.facebook a:hover,
.social-follow li.facebook a:active {
background-color: #2e77c2; }
.about-footer {
padding-top: 90px;
background-repeat: no-repeat;
background-position: top center; }
.contact-footer {
padding-top: 0; }
.contact-footer .about-network {
padding: 100px 20px; }
.tweet-wall {
text-align: center;
position: relative;
padding-bottom: 90px;
padding-left: 70px;
padding-right: 70px; }
.tweet-wall .title {
font-size: 40px;
font-size: 40rem;
color: white;
margin-bottom: 40px;
font-weight: 100; }
.tweet-wall .slide {
padding: 0 15px; }
ul.slick-dots li.slick-active {
border-color: #588de9;
background-color: #588de9; }
.slick-dots {
padding: 0; }
.controls .slick-prev,
.controls .slick-next {
background-color: transparent;
text-indent: -9999em;
width: 40px;
height: 40px;
background-repeat: no-repeat;
padding: 0;
cursor: pointer;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.controls .slick-prev.slick-disabled,
.controls .slick-next.slick-disabled {
opacity: 0.4;
cursor: default; }
.controls .slick-prev {
background: url(/assets/about/icn-arrleft-b5b86665d0c977e244dc7d268a346050.png) center left no-repeat; }
.controls .slick-next {
background: url(/assets/about/icn-arrright-4abd37a1f52b9a22375dd45c87f3d172.png) center right no-repeat; }
.about-getapp {
color: white;
padding-bottom: 80px;
border-bottom: 2px solid #f1f2f2; }
.about-getapp a {
min-height: 540px; }
.about-getapp h2 {
font-size: 40px;
font-size: 40rem;
color: #588de9;
margin-bottom: 20px;
font-weight: 100; }
.about-getapp p {
font-size: 16px;
font-size: 16rem;
max-width: 350px; }
.rtl .about-getapp p {
float: right; }
.about-getapp .col3 {
zoom: 1;
margin-left: -30px;
position: relative; }
.about-getapp .col3:before,
.about-getapp .col3:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.about-getapp .col3:after {
clear: both; }
.about-getapp .col3 > .col {
float: left; }
.rtl .about-getapp .col3 > .col {
float: right; }
.about-getapp .col3 .col {
padding-left: 30px; }
.about-getapp .col3 .item {
margin-bottom: 30px; }
.about-getapp .question {
color: #353535;
position: absolute;
bottom: 0;
left: 30px; }
.rtl .about-getapp .question {
left: auto;
right: 30px; }
.about-getapp .question h3 {
font-size: 30px;
font-size: 30rem;
color: #353535;
font-weight: 300; }
.about-getapp .question .abtn {
-webkit-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
background: -webkit-linear-gradient(top, #588ce7 0%, #4c79c5 100%);
background: linear-gradient(to bottom, #588ce7 0%, #4c79c5 100%);
/* W3C */
min-height: 0; }
.rtl .about-getapp .question .abtn {
clear: both;
float: right; }
.about-getapp .question .abtn:hover,
.about-getapp .question .abtn:active {
background: -webkit-linear-gradient(top, #649cff 0%, #588be1 100%);
background: linear-gradient(to bottom, #649cff 0%, #588be1 100%);
/* W3C */ }
.about-getapp .question .abtn strong {
font-weight: 700; }
.about-getapp a {
display: block; }
.about-getapp img {
width: 100%;
display: block;
height: auto;
max-width: 270px;
margin: 0 auto; }
.col2 {
zoom: 1;
margin-left: -120px; }
.col2:before,
.col2:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.col2:after {
clear: both; }
.col2 > .col {
float: left; }
.rtl .col2 > .col {
float: right; }
.col2 .col {
padding-left: 120px; }
.col2 .item {
margin-bottom: 120px; }
.about-network {
zoom: 1;
font-size: 16px;
font-size: 16rem;
padding: 80px 0;
line-height: 1.2; }
.about-network:before,
.about-network:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.about-network:after {
clear: both; }
.about-network h3 {
font-size: 30px;
font-size: 30rem;
margin-bottom: 5px;
font-weight: 300; }
.about-network p {
font-size: 16px;
font-size: 16rem;
margin-bottom: 30px; }
.about-network p.max-width {
max-width: 350px; }
.rtl .about-network p.max-width {
float: right; }
.about-network a.twitter {
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
display: inline-block;
width: 35px;
height: 35px;
background: url(/assets/about/icn-twitter-blue-5b8f3145ec603894e44ebac48e409bd1.png) center center no-repeat;
opacity: 1;
float: left; }
.rtl .about-network a.twitter {
float: right; }
.about-network a.twitter:hover,
.about-network a.twitter:active {
opacity: 0.6; }
.about-network a.facebook {
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
display: inline-block;
width: 35px;
height: 35px;
background: url(/assets/about/icn-facebook-blue-5c93268258848a2f9821a904f93f09ca.png) center center no-repeat;
opacity: 1;
float: left; }
.rtl .about-network a.facebook {
float: right; }
.about-network a.facebook:hover,
.about-network a.facebook:active {
opacity: 0.6; }
.about-network .fb-like,
.about-network .twitter-follow-button {
padding: 0;
float: left;
margin-bottom: 10px; }
.rtl .about-network .fb-like,
.rtl
.about-network .twitter-follow-button {
float: right; }
.about-network .twitter-follow-button {
margin-right: 10px; }
.rtl .about-network .twitter-follow-button {
margin-right: 0;
margin-left: 10px; }
.about-network form.about-newsletter {
position: relative; }
.about-network form.about-newsletter input {
font-size: 16px;
font-size: 16rem;
display: block;
width: 100%;
display: block;
padding: 15px;
padding-right: 150px;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.03); }
.about-network form.about-newsletter input::-webkit-input-placeholder {
font-size: 16px;
font-size: 16rem; }
.rtl .about-network form.about-newsletter input {
text-align: right;
padding-left: 150px;
padding-right: 15px; }
.about-network form.about-newsletter label.error {
font-size: 14px;
font-size: 14rem;
position: absolute;
left: 0;
top: 100%;
padding: 10px 0;
color: red; }
.about-network form.about-newsletter .abtn {
font-size: 16px;
font-size: 16rem;
position: absolute;
right: 0;
top: 0;
display: block;
color: white;
border-radius: 0 2px 2px 0;
text-align: center;
width: 135px;
height: 100%;
padding: 0;
-webkit-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
background: -webkit-linear-gradient(top, #588ce7 0%, #4c79c5 100%);
background: linear-gradient(to bottom, #588ce7 0%, #4c79c5 100%);
/* W3C */ }
.rtl .about-network form.about-newsletter .abtn {
right: auto;
left: 0; }
.about-network form.about-newsletter .abtn strong {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-shadow: -1px 0 1px #3b5f9d;
width: 100%;
text-align: center;
display: block; }
.about-network form.about-newsletter .abtn:hover,
.about-network form.about-newsletter .abtn:active {
background: -webkit-linear-gradient(top, #649cff 0%, #588be1 100%);
background: linear-gradient(to bottom, #649cff 0%, #588be1 100%);
/* W3C */ }
.ie9 .contact-page .about-network form.about-newsletter .abtn strong {
top: 15px; }
.about-network p.success {
font-size: 14px;
font-size: 14rem;
padding: 15px 20px;
margin-bottom: 15px;
border-radius: 3px;
background-color: #dff0d8; }
.about-network p.error {
font-size: 14px;
font-size: 14rem;
padding: 15px 20px;
margin-bottom: 15px;
border-radius: 3px;
background-color: #f2dede; }
.abtn {
background-color: #5689e2;
color: white;
text-decoration: none;
max-width: 130px;
padding: 15px;
border-radius: 2px; }
.contact-page .abtn {
max-width: 450px; }
.about-credits {
zoom: 1;
font-size: 20px;
font-size: 20rem;
padding: 65px 0;
border-top: 1px solid #e5e4e2;
background-color: #fbfbfb;
text-align: center;
/*
p {
@include font-size(20);
width: 100%;
text-align: center;
margin: 0;
padding: 20px 0;
font-weight: 300;
}
*/ }
.about-credits:before,
.about-credits:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.about-credits:after {
clear: both; }
.rtl .about-credits {
text-align: right; }
.about-credits .col3 {
zoom: 1;
margin-left: -70px; }
.about-credits .col3:before,
.about-credits .col3:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.about-credits .col3:after {
clear: both; }
.about-credits .col3 > .col {
float: left; }
.rtl .about-credits .col3 > .col {
float: right; }
.about-credits .col3 .col {
padding-left: 70px; }
.about-credits .col3 .item {
margin-bottom: 70px; }
.about-credits .col4 {
zoom: 1;
margin-left: -60px; }
.about-credits .col4:before,
.about-credits .col4:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.about-credits .col4:after {
clear: both; }
.about-credits .col4 > .col {
float: left; }
.rtl .about-credits .col4 > .col {
float: right; }
.about-credits .col4 .col {
padding-left: 60px; }
.about-credits .col4 .item {
margin-bottom: 60px; }
.about-credits p {
font-size: 20px;
font-size: 20rem;
margin: 0;
margin-right: 5%;
padding: 20px 0;
font-weight: 300;
display: inline-block;
float: left; }
.rtl .about-credits p {
float: right;
margin-right: 0;
margin-left: 5%; }
.about-credits a {
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
display: inline-block; }
.about-credits a:not(:last-child) {
margin-right: 5%; }
.rtl .about-credits a:not(:last-child) {
margin-right: 0;
margin-left: 5%;
float: right; }
.about-credits a:hover,
.about-credits a:active {
opacity: .8; }
@media only screen and (min-width: 481px) and (max-width: 768px) {
.about-getapp .col3 > .col {
width: 50%; }
.about-getapp .col3 > .col:nth-child(2n+1) {
clear: left; }
.col2 > .col {
width: 50%; }
.col2 > .col:nth-child(2n+1) {
clear: left; }
.about-credits .col3 > .col {
width: 50%; }
.about-credits .col3 > .col:nth-child(2n+1) {
clear: left; }
.about-credits .col4 > .col {
width: 50%; }
.about-credits .col4 > .col:nth-child(2n+1) {
clear: left; } }
@media only screen and (min-width: 769px) {
.about-getapp .col3 > .col {
width: 33.33333%; }
.about-getapp .col3 > .col:nth-child(3n+1) {
clear: left; }
.about-getapp .col3 > .col {
width: 29%; }
.about-getapp .col3 > .col:first-child {
width: 42%;
padding-top: 60px; }
.col2 > .col {
width: 50%; }
.col2 > .col:nth-child(2n+1) {
clear: left; }
.about-credits .col3 > .col {
width: 33.33333%; }
.about-credits .col3 > .col:nth-child(3n+1) {
clear: left; }
.about-credits .col4 > .col {
width: 25%; }
.about-credits .col4 > .col:nth-child(4n+1) {
clear: left; } }
@media only screen and (max-width: 1200px) {
.about-header {
font-size: 3vw; }
.about-header h2,
.contact-header h1 {
font-size: 3vw; }
.about-intro h2 {
font-size: 3.33333vw; }
.about-features h2 {
font-size: 3.33333vw; }
.about-press h2 {
font-size: 3.33333vw; }
.tweet-wall .title {
font-size: 3.33333vw; } }
@media only screen and (max-width: 960px) {
.parallax {
height: 75vw; }
.press-list {
margin-left: -50px; }
.press-list li {
padding-left: 50px; }
.about-header {
background-size: 150%; } }
@media only screen and (max-width: 768px) {
.mob-vis-md {
display: block; }
.mob-hid-md {
display: none; }
.container {
max-width: 1060px;
padding: 0 30px; }
.about-header {
font-size: 3.6vw; }
.about-header h2 {
font-size: 3.6vw; }
.contact-header h1 {
font-size: 28px;
font-size: 28rem; }
.contact-header,
.contact-page .parallax {
height: 400px; }
.contact-footer .about-network {
padding: 0; }
.about-intro h2 {
font-size: 4vw; }
.about-features h2 {
font-size: 4vw; }
.about-press h2 {
font-size: 4vw; }
.press-list li {
width: 50%; }
.press-list li:nth-child(3n+1) {
clear: none; }
.press-list li:nth-child(2n+1) {
clear: left; }
.social-follow {
display: none !important; }
.tweet-wall .title {
font-size: 4vw; }
.about-credits p {
float: none;
display: block; }
.about-intro,
.about-features,
.about-footer {
padding: 50px 0; }
.about-header {
padding-top: 50px; }
.contact-header {
padding-top: 70px; }
.about-header h1,
.about-header h2 {
margin-bottom: 50px; }
.about-intro h2 {
margin-bottom: 20px; }
.about-intro h2,
.about-intro .content {
float: none;
width: 100%; }
.about-press {
background-position: top right;
background-size: 150% auto;
padding-top: 60%; }
.about-press h2 {
margin-bottom: 40px; }
.about-features ul {
margin: 0;
min-height: 0; }
.about-features ul li {
padding: 0 20px; }
.about-features ul .slick-dots li {
width: 8px;
margin: 0 5px;
padding: 0;
float: none; }
.switcher {
margin-bottom: 50px; }
.about-press {
padding-bottom: 50px; }
.tweet-wall {
padding: 0;
padding-bottom: 70px; }
.tweet-wall .slide {
padding: 0; }
.tweet-wall iframe {
margin: 0 auto !important;
margin-bottom: 20px !important; }
.tweet-wall .slick-dots {
padding-top: 10px; }
.about-getapp .col3 > .col {
width: 50%;
clear: none; }
.about-getapp .col3 > .col:first-child {
width: 100%;
margin-bottom: 20px; }
.about-getapp .col3 > .col:nth-child(2n+1) {
clear: none; }
.about-getapp {
border-bottom: 0;
padding-bottom: 0; }
.about-getapp .col3 {
margin-left: 0; }
.about-getapp .col3 .col {
padding-left: 0;
width: 50%;
float: left;
display: block;
padding-bottom: 50px; }
.about-getapp .col3 .col a {
min-height: 0; }
.about-getapp .col3 .question {
clear: left;
padding-top: 50px;
padding-bottom: 30px;
border-top: 2px solid #f1f2f2;
position: static;
float: none;
display: block;
width: 100%;
/*
.abtn {
display: block;
max-width: none;
}
*/ }
.about-getapp .col3 .question h3 {
font-size: 30px;
font-size: 30rem; }
.about-network {
padding: 0; }
.about-network .col2 {
margin: 0; }
.about-network .col {
float: none;
width: 100%;
padding: 20px 0; }
.about-credits {
padding: 50px 0; }
.rtl .about-credits {
text-align: center; }
.rtl .about-credits p {
float: none;
display: block;
text-align: center; }
.rtl .about-credits a:not(:last-child) {
float: none;
display: inline-block; } }
@media only screen and (max-width: 481px) {
.about-getapp .col3 > .col {
float: none; }
.col2 > .col {
float: none; }
.about-credits .col3 > .col {
float: none; }
.about-credits .col4 > .col {
float: none; } }
@media only screen and (max-width: 480px) {
.mob-vis-sm {
display: block; }
.mob-hid-sm {
display: none; }
.is-mobOpen .outer-container {
left: -250px; }
.about-header {
font-size: 17.14286px;
font-size: 17.14286rem; }
.about-header h2 {
font-size: 17.14286px;
font-size: 17.14286rem; }
.about-intro h2 {
font-size: 19.04762px;
font-size: 19.04762rem; }
.about-features h2 {
font-size: 19.04762px;
font-size: 19.04762rem; }
.about-press h2 {
font-size: 19.04762px;
font-size: 19.04762rem; }
.press-list {
margin-left: 0; }
.press-list li {
padding-left: 0;
width: 100%; }
.press-list li:nth-child(2n+1) {
clear: none; }
.press-list .slick-dots {
clear: left;
display: block;
width: 100%; }
.press-list .slick-dots li {
padding-left: 0;
float: none; }
.tweet-wall .title {
font-size: 19.04762px;
font-size: 19.04762rem; }
.about-header {
background-size: 210%; }
.about-features ul li {
text-align: center; }
.about-features ul li img {
margin: 0 auto;
-webkit-transform: translateX(20px);
transform: translateX(20px); }
.about-getapp .col3 .col {
padding-bottom: 0;
float: left;
padding-bottom: 50px; }
.about-getapp .col3 > .col:first-child {
margin-bottom: 30px;
padding-bottom: 0; }
.about-getapp .question .abtn {
display: block;
max-width: none; }
.about-network form.about-newsletter input {
padding: 15px;
margin-bottom: 5px; }
.about-network form.about-newsletter .abtn,
.about-network form.about-newsletter .abtn strong {
position: static;
-webkit-transform: none;
transform: none; }
.about-network form.about-newsletter .abtn {
display: block;
width: 100%;
max-width: none;
padding: 15px; }
.about-credits {
padding: 40px 0; } }
.tweet-wall iframe {
height: 250px !important; }
.shuffle-icon {
background: url("../images/bg/sprites/sprites.png") no-repeat -42px -648px;
width: 16px;
height: 13px; }
.player-info-element-progress {
margin-right: 150px;
padding: 0 17 0 7px; }
.player-info-shuffle .icon {
background-position: -42px -648px; }
.player-info-shuffle.active .icon {
background-position: -42px -670px; }
.player-info-shuffle {
display: inline-block;
float: none;
padding: 4px 5px 6px 6px;
position: relative;
border-radius: 0 3px 3px 0;
border-width: 0; }
.player-info-shuffle .icon {
width: 17px;
height: 12px; }
.player-info-element-shuffle {
padding-top: 3px; }
.player-info-element-shuffle {
position: relative; }
.player-info-element-shuffle .player-info-shuffle:hover + .tooltip {
display: block; }
.player-info-embed {
display: inline-block;
float: none;
padding: 4px 5px 6px 6px;
position: relative;
border-radius: 0 3px 3px 0;
border-width: 0; }
.player-info-embed .icon {
width: 13px;
height: 11px; }
.player-info-element-embed {
padding-top: 3px;
position: relative; }
.player-info-element-embed .tooltip {
display: none; }
#embed-collection-player {
top: 255px !important; }
#embed-user-collection-player {
top: 72px !important;
left: 15px !important; }
#embed-user-collection-player.embed-player-container .shadow {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
left: 35%;
top: -12px; }
.embed-player-container {
top: -247px !important;
width: 306px !important;
height: 235px;
text-align: left;
left: -142px;
padding: 2px !important;
z-index: 500; }
.embed-player-container * {
box-sizing: border-box; }
.embed-player-container .inner {
background: #fff;
height: 100%; }
.embed-player-container .panel-label {
display: block;
width: 100%;
padding: 10px;
color: #a9b7ca;
font-size: 12px;
text-shadow: 0 -1px 0 #06090d;
box-shadow: inset 0 1px 0 #566b8a;
background: -webkit-linear-gradient(top, #3f4f66 0%, #313d4f 100%);
background: linear-gradient(to bottom, #3f4f66 0%, #313d4f 100%);
font-family: proxima_nova_semibold;
cursor: pointer;
position: relative;
height: 35px; }
.embed-player-container .panel-label:hover {
color: #cfd8e5;
background: -webkit-linear-gradient(top, #4f6380 0%, #3d4c63 100%);
background: linear-gradient(to bottom, #4f6380 0%, #3d4c63 100%); }
.embed-player-container .panel-label .icon {
-webkit-transition: -webkit-transform 200ms ease;
transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
transition: transform 200ms ease, -webkit-transform 200ms ease;
position: absolute;
right: 10px;
top: 13px;
background-position: -329px -584px;
width: 11px;
height: 7px;
-webkit-transform-origin: center;
transform-origin: center; }
.embed-player-container .panel-label.active .icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.embed-player-container .panel {
display: none; }
.embed-player-container .panel.open {
display: block; }
.embed-player-container .content {
padding: 20px 10px;
background: #fff;
display: block; }
.embed-player-container .content.share {
height: 165px; }
.embed-player-container .content.embed-options {
padding-bottom: 0; }
.embed-player-container .content input,
.embed-player-container .content textarea {
line-height: 1;
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
width: 100%;
border-radius: 2px;
border: 1px solid transparent;
background: #efefef;
color: #5a5a5a;
font-size: 12px;
font-weight: normal; }
.embed-player-container .content input:focus,
.embed-player-container .content textarea:focus {
background: #fcfcfc;
border: 1px solid #efefef !important;
background: #fff;
box-shadow: none; }
.embed-player-container .content input {
padding: 8px 60px 8px 30px; }
.embed-player-container .content textarea {
height: 70px;
padding: 10px;
resize: none;
overflow-y: auto; }
.embed-player-container .input-wrapper {
margin-bottom: 15px;
position: relative; }
.embed-player-container .input-wrapper.share:after {
font-family: "Icons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
position: relative;
content: "\E013";
font-size: 11px;
color: inherit;
position: absolute;
left: 10px;
top: 10px; }
.embed-player-container .input-wrapper.share .copy-btn {
position: absolute;
top: 6px;
right: 8px;
z-index: 100; }
.embed-player-container .copy-btn {
-webkit-transition: border 200ms ease, color 200ms ease;
transition: border 200ms ease, color 200ms ease;
text-transform: uppercase;
font-size: 8px;
color: #ababab;
border-radius: 3px;
border: 1px solid #ababab;
padding: 5px 8px 4px;
cursor: pointer;
background: #efefef; }
.embed-player-container .copy-btn:hover {
border: 1px solid #858585;
color: #858585; }
.embed-player-container .share-list {
list-style: none;
width: 100%;
margin: 0 0 15px 0;
padding: 0; }
.embed-player-container .share-list:before, .embed-player-container .share-list:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.embed-player-container .share-list:after {
clear: both; }
.embed-player-container .share-list li {
display: inline-block;
float: left;
padding: 0;
border: 0;
background: none;
width: auto; }
.embed-player-container .share-list a {
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
width: 29px;
height: 29px;
position: relative;
margin-right: 4px;
display: inline-block; }
.embed-player-container .share-list a:hover {
opacity: 0.8; }
.embed-player-container fieldset.embed-type {
border: 0;
padding: 0;
margin: 0;
width: 100%;
border-bottom: 1px solid #c4c9d0; }
.embed-player-container fieldset.embed-type:before, .embed-player-container fieldset.embed-type:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.embed-player-container fieldset.embed-type:after {
clear: both; }
.embed-player-container fieldset.embed-type .input-wrapper {
display: inline-block;
float: left;
width: 22%;
text-align: center;
text-transform: uppercase;
font-size: 9px;
color: #5e5e5e;
margin-bottom: 0; }
.embed-player-container fieldset.embed-type .input-wrapper:nth-child(3) {
width: 34%; }
.embed-player-container fieldset.embed-type input[type=radio] {
display: none; }
.embed-player-container fieldset.embed-type input[type=radio]:checked + label {
background: #778191;
color: #fff; }
.embed-player-container fieldset.embed-type label {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
margin: 0;
display: block;
padding: 13px 10px 11px;
border-right: 1px solid #c4c9d0; }
.embed-player-container fieldset.embed-type label:last-child {
margin: 0; }
.embed-player-container fieldset.embed-type label:hover {
background: #a1a8b3;
color: #fff; }
.embed-player-container .textarea-wrapper:before, .embed-player-container .textarea-wrapper:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.embed-player-container .textarea-wrapper:after {
clear: both; }
.embed-player-container .textarea-wrapper .copy-btn {
float: right;
margin-top: 8px; }
.embed-player-container .textarea-wrapper {
display: none; }
.embed-player-container .textarea-wrapper.active {
display: block; }
.embed-player-container .shadow {
width: 12px;
left: 50%;
margin-left: -6px; }
@media only screen and (max-width: 767px) {
.embed-player-container .embed-panel {
display: none; }
.embed-player-container .content.share {
height: auto !important;
padding-bottom: 10px; }
.embed-player-container.embed-player-container-song {
position: fixed;
bottom: 60px;
top: initial !important;
width: 100% !important;
left: 0 !important;
border-radius: 0;
height: 165px !important; }
.embed-player-container.embed-player-container-song .close-tooltip .icon {
height: 37px;
background-position: -74px -655px; }
.embed-player-container.embed-player-container-playlist {
height: 165px !important;
width: 215px !important; }
.embed-player-container.embed-player-container-playlist.embed-player-container .shadow {
left: 50% !important; } }
@media only screen and (max-width: 767px) {
.player-info-element-progress {
margin-right: 80px; } }
@media only screen and (max-width: 500px) {
.player-info-progress-container {
min-width: 60px !important;
width: 90%; } }
.donate-page.rtl {
direction: rtl; }
.donate-page .donate-header {
padding: 90px 0 40px; }
.donate-page h1 {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-size: 400px;
font-size: 40rem;
line-height: 1.2;
color: #305089;
background: -webkit-linear-gradient(-45deg, #1176b0 0%, #08547f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 300;
text-align: center;
max-width: 750px;
width: 100%; }
@media only screen and (max-width: 650px) {
.donate-page h1 {
font-size: 8vw; } }
.donate-form-wrapper h2 {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-size: 180px;
font-size: 18rem;
line-height: 1.2;
font-weight: 300;
text-align: center;
width: 100%;
margin-bottom: 30px; }
.donate-form {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-size: 140px;
font-size: 14rem;
max-width: 520px;
width: 100%;
background: #20272c;
color: #fff;
border-radius: 4px;
box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.25);
direction: ltr !important; }
.donate-form fieldset {
zoom: 1;
border: 0;
padding: 0; }
.donate-form fieldset:before, .donate-form fieldset:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.donate-form fieldset:after {
clear: both; }
.donate-form legend {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.donate-form .row-wrapper.has-selection input[type="radio"] + label {
opacity: 0.5; }
.donate-form .donate-type {
background: #2f3942;
border-radius: 4px 4px 0 0;
position: relative; }
.donate-form .donate-type:after {
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 1px;
background: #3e474f;
content: ''; }
.donate-form .donate-type .field {
width: 50%;
display: inline-block;
float: left;
padding: 25px;
text-align: center; }
.donate-form .donate-amount {
padding: 35px 35px 0; }
.donate-form .donate-amount fieldset {
zoom: 1; }
.donate-form .donate-amount fieldset:before, .donate-form .donate-amount fieldset:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.donate-form .donate-amount fieldset:after {
clear: both; }
.donate-form .donate-amount .col {
text-align: center;
width: 50%;
display: inline-block;
float: left;
margin-bottom: 15px; }
.donate-form .donate-amount .field {
margin-bottom: 20px; }
.donate-form .donate-amount .field.custom {
margin-left: 25px; }
.donate-form .donate-amount .field.custom label {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.donate-form .donate-amount .field.custom input {
font-size: 140px;
font-size: 14rem;
-webkit-transition: background 200ms ease, border 200ms;
transition: background 200ms ease, border 200ms;
background: none;
line-height: 1;
border: 1px solid #5e5e5e;
border-radius: 2px;
width: 90px;
height: 35px;
color: #fff;
padding: 5px;
text-align: center; }
.donate-form .donate-amount .field.custom input:focus {
box-shadow: none;
border: 1px solid #fff !important; }
.donate-form .donate-amount .field.custom input.error {
border: 1px solid #da1f2c !important; }
.donate-form .donate-amount .donate-last {
zoom: 1;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
max-width: 260px;
clear: both;
display: block;
margin: 20px auto 10px; }
.donate-form .donate-amount .donate-last:before, .donate-form .donate-amount .donate-last:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.donate-form .donate-amount .donate-last:after {
clear: both; }
.donate-form .donate-amount .donate-last .field {
display: inline-block;
float: left; }
.donate-form .donate-amount .donate-last .field:nth-child(1) {
margin-top: 8px; }
.donate-form .field {
position: relative; }
.donate-form input[type="radio"] {
display: none; }
.donate-form input[type="radio"] + label {
-webkit-transition: background 200ms ease, border 200ms, opacity 200ms ease;
transition: background 200ms ease, border 200ms, opacity 200ms ease;
position: relative;
cursor: pointer;
display: block;
display: inline-block;
padding-left: 35px;
color: #d8d8d8; }
.donate-form input[type="radio"] + label:before, .donate-form input[type="radio"] + label:after {
border-radius: 50%;
position: absolute; }
.donate-form input[type="radio"] + label:before {
width: 11px;
height: 11px;
background: #92baff;
z-index: 100;
top: 3px;
left: 5px;
content: none; }
.donate-form input[type="radio"] + label:after {
-webkit-transition: border 200ms ease;
transition: border 200ms ease;
width: 21px;
height: 21px;
border: 1px solid #7c7d7e;
top: -2px;
left: 0;
content: ''; }
.donate-form input[type="radio"]:not([disabled]) + label:hover:after {
border: 1px solid #fff; }
.donate-form input[type="radio"]:disabled + label {
opacity: 0.5; }
.donate-form input[type="radio"]:checked + label {
opacity: 1 !important; }
.donate-form input[type="radio"]:checked + label:before {
content: ''; }
.donate-form input[type="radio"]:checked + label:after {
border: 1px solid #e5e4e2; }
.donate-form .submit-btn {
font-size: 160px;
font-size: 16rem;
-webkit-transition: background 200ms ease, opacity 200ms ease;
transition: background 200ms ease, opacity 200ms ease;
width: 100%;
display: block;
padding: 18px;
text-align: center;
font-weight: bold;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.03);
background: #4c79c5;
background: -webkit-linear-gradient(top, #588ce7 0%, #4c79c5 100%);
background: linear-gradient(to bottom, #588ce7 0%, #4c79c5 100%);
text-shadow: -1px 0 1px #3b5f9d;
border-radius: 0 0 4px 4px; }
.donate-form .submit-btn:disabled {
opacity: 0.85; }
.donate-form .submit-btn:not([disabled]):hover, .donate-form .submit-btn:not([disabled]):active {
background: #588ce7;
background: -webkit-linear-gradient(top, #649cff 0%, #588be1 100%);
background: linear-gradient(to bottom, #649cff 0%, #588be1 100%); }
@media only screen and (max-width: 650px) {
.donate-form .donate-amount {
padding: 35px 0 0; } }
@media only screen and (max-width: 350px) {
.donate-form .donate-type {
padding: 10px 0; }
.donate-form .donate-type .field {
width: 100%;
float: none;
padding: 15px 25px;
text-align: left; }
.donate-form .donate-type:after {
content: none; }
.donate-form .donate-amount {
padding: 10px 0; }
.donate-form .donate-amount .col {
float: none;
width: 100%;
margin: 0;
text-align: left; }
.donate-form .donate-amount .field {
padding: 15px 25px;
margin: 0; }
.donate-form .donate-amount .field.custom {
width: 100%;
margin: 0; }
.donate-form .donate-amount .field.custom input {
width: 100%; }
.donate-form .donate-amount .donate-last {
margin: 0; }
.donate-form .donate-amount .donate-last .field:nth-child(1) {
margin: 0; } }
.donations-used {
padding: 80px 0 100px; }
.donations-used h2,
.donations-used h3 {
line-height: 1.2;
font-weight: 300; }
.donations-used h2 {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-size: 240px;
font-size: 24rem;
text-align: center;
width: 100%;
margin-bottom: 50px;
color: #353535; }
.donations-used h3 {
font-size: 220px;
font-size: 22rem;
margin-bottom: 15px; }
.donations-used p {
font-size: 180px;
font-size: 18rem;
font-weight: 300; }
.donations-used ul {
width: 100%;
max-width: 900px;
padding: 130px 0 30px;
margin: 0 auto;
display: block;
color: #5d5d5d;
position: relative;
list-style: none; }
.donations-used ul:before {
height: 100%;
width: 1px;
background: #e5e4e2;
left: 50%;
content: '';
position: absolute;
top: 0; }
.donations-used li:not(.end-point) {
display: block;
margin: -85px 0 50px;
position: relative;
padding-top: 75px; }
.donations-used li:not(.end-point):nth-child(odd) {
text-align: right;
padding-right: calc(50% + 50px); }
.donations-used li:not(.end-point):nth-child(odd) .icon-gear {
left: calc(50% - 112px);
top: -5px; }
.donations-used li:not(.end-point):nth-child(odd) .icon-group {
left: calc(50% - 118px);
top: 15px; }
.donations-used li:not(.end-point):nth-child(even) {
padding-left: calc(50% + 50px); }
.donations-used li:not(.end-point):nth-child(even) span {
left: calc(50% + 50px); }
.donations-used li:not(.end-point):nth-child(even) .icon-cloud {
top: 10px; }
.rtl .donations-used li:not(.end-point):nth-child(even) {
text-align: right; }
.rtl .donations-used li:not(.end-point):nth-child(even) h3 {
text-align: right; }
.rtl .donations-used li:not(.end-point):nth-child(even) span {
left: auto;
right: 0; }
.donations-used li:not(.end-point):nth-child(6) h3 {
max-width: 265px; }
.rtl .donations-used li:not(.end-point):nth-child(6) h3 {
max-width: 100%; }
.donations-used li:not(.end-point):after {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #e5e4e2;
background: #fff;
position: absolute;
left: calc(50% - 5px);
top: calc(50% - 5px);
content: ''; }
.donations-used li:not(.end-point) span {
position: absolute;
top: 0; }
.donations-used .cloud-icon {
width: 65px;
height: 46px;
background: url("../images/donate/icon-cloud.png") center center no-repeat; }
@media (min--moz-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.donations-used .cloud-icon {
/* on retina, use image that's scaled by 2 */
background-image: url("donate/icon-cloud@2x.png");
background-size: 65px 46px; } }
.donations-used .end-point {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #e5e4e2;
background: #fff;
position: absolute;
left: calc(50% - 5px);
bottom: -5px; }
.donations-used .end-point.top {
top: -5px;
bottom: auto; }
.donations-used .donate-btn {
font-size: 160px;
font-size: 16rem;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
max-width: 220px;
display: block;
padding: 18px 45px;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.03);
margin: 0 auto;
background: #4c79c5;
background: -webkit-linear-gradient(top, #588ce7 0%, #4c79c5 100%);
background: linear-gradient(to bottom, #588ce7 0%, #4c79c5 100%);
text-shadow: -1px 0 1px #3b5f9d;
color: #fff;
text-align: center;
margin-top: 50px;
border-radius: 2px; }
.donations-used .donate-btn:hover,
.donations-used .donate-btn:active {
background: #588be1;
background: -webkit-linear-gradient(top, #649cff 0%, #588be1 100%);
background: linear-gradient(to bottom, #649cff 0%, #588be1 100%); }
@media only screen and (max-width: 650px) {
.donations-used ul {
padding-top: 0; }
.donations-used ul:before {
content: none; }
.donations-used li:not(.end-point) {
margin: 0 0 50px; }
.donations-used li:not(.end-point):nth-child(odd), .donations-used li:not(.end-point):nth-child(even) {
text-align: center;
padding: 75px 0 0 0; }
.donations-used li:not(.end-point):nth-child(odd) span, .donations-used li:not(.end-point):nth-child(even) span {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto; }
.donations-used li:not(.end-point):nth-child(odd) .icon-gear,
.donations-used li:not(.end-point):nth-child(odd) .icon-group, .donations-used li:not(.end-point):nth-child(even) .icon-gear,
.donations-used li:not(.end-point):nth-child(even) .icon-group {
left: 0; }
.donations-used li:not(.end-point):nth-child(6) h3 {
max-width: 100%; }
.donations-used li:not(.end-point):after {
content: none; }
.donations-used .end-point {
display: none; }
.donations-used .donate-btn {
margin-top: 0; } }
/*
* jQuery UI CSS Framework 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none; }
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px); }
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none; }
.ui-helper-clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.ui-helper-clearfix {
display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
height: 1%; }
.ui-helper-clearfix {
display: block; }
/* end clearfix */
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter: Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/*
* jQuery UI CSS Framework 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Segoe%20UI,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=333333&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=25&borderColorHeader=333333&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=000000&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=25&borderColorContent=666666&fcContent=ffffff&iconColorContent=cccccc&bgColorDefault=555555&bgTextureDefault=02_glass.png&bgImgOpacityDefault=20&borderColorDefault=666666&fcDefault=eeeeee&iconColorDefault=cccccc&bgColorHover=0078a3&bgTextureHover=02_glass.png&bgImgOpacityHover=40&borderColorHover=59b4d4&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=f58400&bgTextureActive=05_inset_soft.png&bgImgOpacityActive=30&borderColorActive=ffaf0f&fcActive=ffffff&iconColorActive=222222&bgColorHighlight=eeeeee&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=80&borderColorHighlight=cccccc&fcHighlight=2e7db2&iconColorHighlight=4b8e0b&bgColorError=ffc73d&bgTextureError=02_glass.png&bgImgOpacityError=40&borderColorError=ffb73d&fcError=111111&iconColorError=a83300&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px
*/
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Segoe UI, Arial, sans-serif;
font-size: 1.1em; }
.ui-widget .ui-widget {
font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Segoe UI, Arial, sans-serif;
font-size: 1em; }
.ui-widget-content {
border: 1px solid #666666;
background: black url(/assets/ui-bg_inset-soft_25_000000_1x100-d42629042f0eada2ad97457a6b3f1a34.png) 50% bottom repeat-x;
color: #ffffff; }
.ui-widget-content a {
color: #ffffff; }
.ui-widget-header {
border: 1px solid #333333;
background: #333333 url(/assets/ui-bg_gloss-wave_25_333333_500x100-00b3d13da14c67fe6e600c0457364568.png) 50% 50% repeat-x;
color: #ffffff;
font-weight: bold; }
.ui-widget-header a {
color: #ffffff; }
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #666666;
background: #555555 url(/assets/ui-bg_glass_20_555555_1x400-d56501460f22526e54b20dd955dd903d.png) 50% 50% repeat-x;
font-weight: bold;
color: #eeeeee; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #eeeeee;
text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: 1px solid #59b4d4;
background: #0078a3 url(/assets/ui-bg_glass_40_0078a3_1x400-22cd021e435c9eb8a92bb41a84a64540.png) 50% 50% repeat-x;
font-weight: bold;
color: #ffffff; }
.ui-state-hover a, .ui-state-hover a:hover {
color: #ffffff;
text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 1px solid #ffaf0f;
background: #f58400 url(/assets/ui-bg_inset-soft_30_f58400_1x100-2053589479accec224ef1db748f0f4ea.png) 50% 50% repeat-x;
font-weight: bold;
color: #ffffff; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #ffffff;
text-decoration: none; }
.ui-widget :active {
outline: none; }
/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #cccccc;
background: #eeeeee url(/assets/ui-bg_highlight-soft_80_eeeeee_1x100-cfaa0d9fd7613146529b17247990c5f1.png) 50% top repeat-x;
color: #2e7db2; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
color: #2e7db2; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
border: 1px solid #ffb73d;
background: #ffc73d url(/assets/ui-bg_glass_40_ffc73d_1x400-2b9505ddb7a0ac821815901a91dcba1f.png) 50% 50% repeat-x;
color: #111111; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
color: #111111; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
color: #111111; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
opacity: .7;
filter: Alpha(Opacity=70);
font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
opacity: .35;
filter: Alpha(Opacity=35);
background-image: none; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
background-image: url(/assets/ui-icons_cccccc_256x240-087ce6e3b75ffaf456965e7260dfc3bb.png); }
.ui-widget-content .ui-icon {
background-image: url(/assets/ui-icons_cccccc_256x240-087ce6e3b75ffaf456965e7260dfc3bb.png); }
.ui-widget-header .ui-icon {
background-image: url(/assets/ui-icons_ffffff_256x240-5a06ad18cea272d1bdb88363f0965181.png); }
.ui-state-default .ui-icon {
background-image: url(/assets/ui-icons_cccccc_256x240-087ce6e3b75ffaf456965e7260dfc3bb.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(/assets/ui-icons_ffffff_256x240-5a06ad18cea272d1bdb88363f0965181.png); }
.ui-state-active .ui-icon {
background-image: url(/assets/ui-icons_222222_256x240-45468be172493e6d73b7d2ac4d8fafb3.png); }
.ui-state-highlight .ui-icon {
background-image: url(/assets/ui-icons_4b8e0b_256x240-b047c78c1e99a7779546cee61a144b06.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
background-image: url(/assets/ui-icons_a83300_256x240-f2a0dd2cd42e61a039952f148a37f10b.png); }
/* positioning */
.ui-icon-carat-1-n {
background-position: 0 0; }
.ui-icon-carat-1-ne {
background-position: -16px 0; }
.ui-icon-carat-1-e {
background-position: -32px 0; }
.ui-icon-carat-1-se {
background-position: -48px 0; }
.ui-icon-carat-1-s {
background-position: -64px 0; }
.ui-icon-carat-1-sw {
background-position: -80px 0; }
.ui-icon-carat-1-w {
background-position: -96px 0; }
.ui-icon-carat-1-nw {
background-position: -112px 0; }
.ui-icon-carat-2-n-s {
background-position: -128px 0; }
.ui-icon-carat-2-e-w {
background-position: -144px 0; }
.ui-icon-triangle-1-n {
background-position: 0 -16px; }
.ui-icon-triangle-1-ne {
background-position: -16px -16px; }
.ui-icon-triangle-1-e {
background-position: -32px -16px; }
.ui-icon-triangle-1-se {
background-position: -48px -16px; }
.ui-icon-triangle-1-s {
background-position: -64px -16px; }
.ui-icon-triangle-1-sw {
background-position: -80px -16px; }
.ui-icon-triangle-1-w {
background-position: -96px -16px; }
.ui-icon-triangle-1-nw {
background-position: -112px -16px; }
.ui-icon-triangle-2-n-s {
background-position: -128px -16px; }
.ui-icon-triangle-2-e-w {
background-position: -144px -16px; }
.ui-icon-arrow-1-n {
background-position: 0 -32px; }
.ui-icon-arrow-1-ne {
background-position: -16px -32px; }
.ui-icon-arrow-1-e {
background-position: -32px -32px; }
.ui-icon-arrow-1-se {
background-position: -48px -32px; }
.ui-icon-arrow-1-s {
background-position: -64px -32px; }
.ui-icon-arrow-1-sw {
background-position: -80px -32px; }
.ui-icon-arrow-1-w {
background-position: -96px -32px; }
.ui-icon-arrow-1-nw {
background-position: -112px -32px; }
.ui-icon-arrow-2-n-s {
background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw {
background-position: -144px -32px; }
.ui-icon-arrow-2-e-w {
background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw {
background-position: -176px -32px; }
.ui-icon-arrowstop-1-n {
background-position: -192px -32px; }
.ui-icon-arrowstop-1-e {
background-position: -208px -32px; }
.ui-icon-arrowstop-1-s {
background-position: -224px -32px; }
.ui-icon-arrowstop-1-w {
background-position: -240px -32px; }
.ui-icon-arrowthick-1-n {
background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne {
background-position: -16px -48px; }
.ui-icon-arrowthick-1-e {
background-position: -32px -48px; }
.ui-icon-arrowthick-1-se {
background-position: -48px -48px; }
.ui-icon-arrowthick-1-s {
background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw {
background-position: -80px -48px; }
.ui-icon-arrowthick-1-w {
background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw {
background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s {
background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw {
background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w {
background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw {
background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n {
background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e {
background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s {
background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w {
background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w {
background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n {
background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e {
background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s {
background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w {
background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n {
background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e {
background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s {
background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w {
background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n {
background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e {
background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s {
background-position: -176px -64px; }
.ui-icon-arrow-4 {
background-position: 0 -80px; }
.ui-icon-arrow-4-diag {
background-position: -16px -80px; }
.ui-icon-extlink {
background-position: -32px -80px; }
.ui-icon-newwin {
background-position: -48px -80px; }
.ui-icon-refresh {
background-position: -64px -80px; }
.ui-icon-shuffle {
background-position: -80px -80px; }
.ui-icon-transfer-e-w {
background-position: -96px -80px; }
.ui-icon-transferthick-e-w {
background-position: -112px -80px; }
.ui-icon-folder-collapsed {
background-position: 0 -96px; }
.ui-icon-folder-open {
background-position: -16px -96px; }
.ui-icon-document {
background-position: -32px -96px; }
.ui-icon-document-b {
background-position: -48px -96px; }
.ui-icon-note {
background-position: -64px -96px; }
.ui-icon-mail-closed {
background-position: -80px -96px; }
.ui-icon-mail-open {
background-position: -96px -96px; }
.ui-icon-suitcase {
background-position: -112px -96px; }
.ui-icon-comment {
background-position: -128px -96px; }
.ui-icon-person {
background-position: -144px -96px; }
.ui-icon-print {
background-position: -160px -96px; }
.ui-icon-trash {
background-position: -176px -96px; }
.ui-icon-locked {
background-position: -192px -96px; }
.ui-icon-unlocked {
background-position: -208px -96px; }
.ui-icon-bookmark {
background-position: -224px -96px; }
.ui-icon-tag {
background-position: -240px -96px; }
.ui-icon-home {
background-position: 0 -112px; }
.ui-icon-flag {
background-position: -16px -112px; }
.ui-icon-calendar {
background-position: -32px -112px; }
.ui-icon-cart {
background-position: -48px -112px; }
.ui-icon-pencil {
background-position: -64px -112px; }
.ui-icon-clock {
background-position: -80px -112px; }
.ui-icon-disk {
background-position: -96px -112px; }
.ui-icon-calculator {
background-position: -112px -112px; }
.ui-icon-zoomin {
background-position: -128px -112px; }
.ui-icon-zoomout {
background-position: -144px -112px; }
.ui-icon-search {
background-position: -160px -112px; }
.ui-icon-wrench {
background-position: -176px -112px; }
.ui-icon-gear {
background-position: -192px -112px; }
.ui-icon-heart {
background-position: -208px -112px; }
.ui-icon-star {
background-position: -224px -112px; }
.ui-icon-link {
background-position: -240px -112px; }
.ui-icon-cancel {
background-position: 0 -128px; }
.ui-icon-plus {
background-position: -16px -128px; }
.ui-icon-plusthick {
background-position: -32px -128px; }
.ui-icon-minus {
background-position: -48px -128px; }
.ui-icon-minusthick {
background-position: -64px -128px; }
.ui-icon-close {
background-position: -80px -128px; }
.ui-icon-closethick {
background-position: -96px -128px; }
.ui-icon-key {
background-position: -112px -128px; }
.ui-icon-lightbulb {
background-position: -128px -128px; }
.ui-icon-scissors {
background-position: -144px -128px; }
.ui-icon-clipboard {
background-position: -160px -128px; }
.ui-icon-copy {
background-position: -176px -128px; }
.ui-icon-contact {
background-position: -192px -128px; }
.ui-icon-image {
background-position: -208px -128px; }
.ui-icon-video {
background-position: -224px -128px; }
.ui-icon-script {
background-position: -240px -128px; }
.ui-icon-alert {
background-position: 0 -144px; }
.ui-icon-info {
background-position: -16px -144px; }
.ui-icon-notice {
background-position: -32px -144px; }
.ui-icon-help {
background-position: -48px -144px; }
.ui-icon-check {
background-position: -64px -144px; }
.ui-icon-bullet {
background-position: -80px -144px; }
.ui-icon-radio-off {
background-position: -96px -144px; }
.ui-icon-radio-on {
background-position: -112px -144px; }
.ui-icon-pin-w {
background-position: -128px -144px; }
.ui-icon-pin-s {
background-position: -144px -144px; }
.ui-icon-play {
background-position: 0 -160px; }
.ui-icon-pause {
background-position: -16px -160px; }
.ui-icon-seek-next {
background-position: -32px -160px; }
.ui-icon-seek-prev {
background-position: -48px -160px; }
.ui-icon-seek-end {
background-position: -64px -160px; }
.ui-icon-seek-start {
background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
background-position: -80px -160px; }
.ui-icon-stop {
background-position: -96px -160px; }
.ui-icon-eject {
background-position: -112px -160px; }
.ui-icon-volume-off {
background-position: -128px -160px; }
.ui-icon-volume-on {
background-position: -144px -160px; }
.ui-icon-power {
background-position: 0 -176px; }
.ui-icon-signal-diag {
background-position: -16px -176px; }
.ui-icon-signal {
background-position: -32px -176px; }
.ui-icon-battery-0 {
background-position: -48px -176px; }
.ui-icon-battery-1 {
background-position: -64px -176px; }
.ui-icon-battery-2 {
background-position: -80px -176px; }
.ui-icon-battery-3 {
background-position: -96px -176px; }
.ui-icon-circle-plus {
background-position: 0 -192px; }
.ui-icon-circle-minus {
background-position: -16px -192px; }
.ui-icon-circle-close {
background-position: -32px -192px; }
.ui-icon-circle-triangle-e {
background-position: -48px -192px; }
.ui-icon-circle-triangle-s {
background-position: -64px -192px; }
.ui-icon-circle-triangle-w {
background-position: -80px -192px; }
.ui-icon-circle-triangle-n {
background-position: -96px -192px; }
.ui-icon-circle-arrow-e {
background-position: -112px -192px; }
.ui-icon-circle-arrow-s {
background-position: -128px -192px; }
.ui-icon-circle-arrow-w {
background-position: -144px -192px; }
.ui-icon-circle-arrow-n {
background-position: -160px -192px; }
.ui-icon-circle-zoomin {
background-position: -176px -192px; }
.ui-icon-circle-zoomout {
background-position: -192px -192px; }
.ui-icon-circle-check {
background-position: -208px -192px; }
.ui-icon-circlesmall-plus {
background-position: 0 -208px; }
.ui-icon-circlesmall-minus {
background-position: -16px -208px; }
.ui-icon-circlesmall-close {
background-position: -32px -208px; }
.ui-icon-squaresmall-plus {
background-position: -48px -208px; }
.ui-icon-squaresmall-minus {
background-position: -64px -208px; }
.ui-icon-squaresmall-close {
background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical {
background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal {
background-position: -16px -224px; }
.ui-icon-grip-solid-vertical {
background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal {
background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se {
background-position: -64px -224px; }
.ui-icon-grip-diagonal-se {
background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 6px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 6px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 6px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 6px; }
/* Overlays */
.ui-widget-overlay {
background: #5c5c5c url(/images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); }
.ui-widget-shadow {
margin: -7px 0 0 -7px;
padding: 7px;
background: #cccccc url(/images/ui-bg_flat_30_cccccc_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60);
border-radius: 8px; }
/*
* jQuery UI Resizable 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Resizable#theming
*/
.ui-resizable {
position: relative; }
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none; }
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0; }
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0; }
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%; }
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%; }
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px; }
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px; }
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px; }
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px; }
/*
* jQuery UI Selectable 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Selectable#theming
*/
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black; }
/*
* jQuery UI Accordion 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Accordion#theming
*/
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion {
width: 100%; }
.ui-accordion .ui-accordion-header {
cursor: pointer;
position: relative;
margin-top: 1px;
zoom: 1; }
.ui-accordion .ui-accordion-li-fix {
display: inline; }
.ui-accordion .ui-accordion-header-active {
border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a {
display: block;
font-size: 1em;
padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a {
padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px; }
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
margin-top: -2px;
position: relative;
top: 1px;
margin-bottom: 2px;
overflow: auto;
display: none;
zoom: 1; }
.ui-accordion .ui-accordion-content-active {
display: block; }
/*
* jQuery UI Autocomplete 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Autocomplete#theming
*/
.ui-autocomplete {
position: absolute;
cursor: default; }
/* workarounds */
* html .ui-autocomplete {
width: 1px; }
/* without this, the menu expands to 100% in IE6 */
/*
* jQuery UI Menu 1.8.16
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Menu#theming
*/
.ui-menu {
list-style: none;
padding: 2px;
margin: 0;
display: block;
float: left; }
.ui-menu .ui-menu {
margin-top: -3px; }
.ui-menu .ui-menu-item {
margin: 0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%; }
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: .2em .4em;
line-height: 1.5;
zoom: 1; }
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px; }
/*
* jQuery UI Button 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Button#theming
*/
.ui-button {
display: inline-block;
position: relative;
padding: 0;
margin-right: .1em;
text-decoration: none !important;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible; }
/* the overflow property removes extra width in IE */
.ui-button-icon-only {
width: 2.2em; }
/* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only {
width: 2.4em; }
/* button elements seem to need a little more width */
.ui-button-icons-only {
width: 3.4em; }
button.ui-button-icons-only {
width: 3.7em; }
/*button text element */
.ui-button .ui-button-text {
display: block;
line-height: 1.4; }
.ui-button-text-only .ui-button-text {
padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
padding: .4em;
text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text {
padding-left: 2.1em;
padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button {
padding: .4em 1em; }
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px; }
.ui-button-icon-only .ui-icon {
left: 50%;
margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
right: .5em; }
/*button sets*/
.ui-buttonset {
margin-right: 7px; }
.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -.3em; }
/* workarounds */
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0; }
/* reset extra padding in Firefox */
/*
* jQuery UI Dialog 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Dialog#theming
*/
.ui-dialog {
position: absolute;
padding: .2em;
width: 300px;
overflow: hidden; }
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative; }
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 19px;
margin: -10px 0 0 0;
padding: 1px;
height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span {
display: block;
margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
padding: 0; }
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
zoom: 1; }
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin: .5em 0 0 0;
padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right; }
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer; }
.ui-dialog .ui-resizable-se {
width: 14px;
height: 14px;
right: 3px;
bottom: 3px; }
.ui-draggable .ui-dialog-titlebar {
cursor: move; }
/*
* jQuery UI Slider 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Slider#theming
*/
.ui-slider {
position: relative;
text-align: left; }
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default; }
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0; }
.ui-slider-horizontal {
height: .8em; }
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%; }
.ui-slider-horizontal .ui-slider-range-min {
left: 0; }
.ui-slider-horizontal .ui-slider-range-max {
right: 0; }
.ui-slider-vertical {
width: .8em;
height: 100px; }
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%; }
.ui-slider-vertical .ui-slider-range-min {
bottom: 0; }
.ui-slider-vertical .ui-slider-range-max {
top: 0; }
/*
* jQuery UI Tabs 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Tabs#theming
*/
.ui-tabs {
position: relative;
padding: .2em;
zoom: 1; }
/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 1px;
margin: 0 .2em 1px 0;
border-bottom: 0 !important;
padding: 0;
white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a {
float: left;
padding: .5em 1em;
text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
margin-bottom: 0;
padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer; }
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none; }
.ui-tabs .ui-tabs-hide {
display: none !important; }
/*
* jQuery UI Datepicker 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Datepicker#theming
*/
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none; }
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
top: 1px; }
.ui-datepicker .ui-datepicker-prev {
left: 2px; }
.ui-datepicker .ui-datepicker-next {
right: 2px; }
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px; }
.ui-datepicker .ui-datepicker-next-hover {
right: 1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px; }
.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center; }
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0; }
.ui-datepicker select.ui-datepicker-month-year {
width: 100%; }
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: 49%; }
.ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em; }
.ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0; }
.ui-datepicker td {
border: 0;
padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding: 0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
float: left; }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
width: auto; }
.ui-datepicker-multi .ui-datepicker-group {
float: left; }
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%; }
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
border-left-width: 0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
border-left-width: 0; }
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left; }
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0em; }
/* RTL support */
.ui-datepicker-rtl {
direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto; }
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover {
right: 1px;
left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover {
left: 1px;
right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
float: right; }
.ui-datepicker-rtl .ui-datepicker-group {
float: right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
border-right-width: 0;
border-left-width: 1px; }
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
display: none;
/*sorry for IE5*/
display/**/: block;
/*sorry for IE5*/
position: absolute;
/*must have*/
z-index: -1;
/*must have*/
-webkit-filter: mask();
filter: mask();
/*must have*/
top: -4px;
/*must have*/
left: -4px;
/*must have*/
width: 200px;
/*must have*/
height: 200px;
/*must have*/ }
/*
* jQuery UI Progressbar 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Progressbar#theming
*/
.ui-progressbar {
height: 2em;
text-align: left; }
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%; }
.body-content {
-webkit-transition: -webkit-transform 200ms ease-in-out;
transition: -webkit-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }
@media (min-width: 600px) {
.openRandom .body-content {
-webkit-transform: translateX(550px);
transform: translateX(550px); }
.openRandom html[lang="ar"] .body-content {
-webkit-transform: translateX(-550px);
transform: translateX(-550px); } }
@media (min-width: 600px) {
.openRandom .ie9 .body-content {
position: relative;
margin-left: 550px; }
.openRandom html[lang="ar"] .ie9 .body-content {
margin-left: -550px; } }
.random-play-wrapper {
position: absolute;
width: 550px;
height: calc(100vh - 85px);
top: 44px;
left: 0;
-webkit-transform: translateX(-550px);
transform: translateX(-550px);
background: #202227;
z-index: 100;
-webkit-transition: box-shadow 200ms ease, -webkit-transform 200ms ease-in-out;
transition: box-shadow 200ms ease, -webkit-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, box-shadow 200ms ease;
transition: transform 200ms ease-in-out, box-shadow 200ms ease, -webkit-transform 200ms ease-in-out;
color: #b5bdc9; }
.ie9 .random-play-wrapper {
margin-left: -550px; }
.random-play-wrapper:before {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(32, 34, 39, 0)), color-stop(70%, rgba(32, 34, 39, 0.9)));
background: -webkit-linear-gradient(top, rgba(32, 34, 39, 0) 0, rgba(32, 34, 39, 0.9) 70%);
background: linear-gradient(to bottom, rgba(32, 34, 39, 0) 0, rgba(32, 34, 39, 0.9) 70%);
height: 90px;
width: 100%;
position: absolute;
bottom: 120px;
left: 0;
z-index: 100;
pointer-events: none;
content: ''; }
.random-play-wrapper * {
box-sizing: border-box; }
.openRandom .random-play-wrapper {
-webkit-transform: translateX(0);
transform: translateX(0);
box-shadow: 27px 0px 27px -17px rgba(0, 0, 0, 0.8); }
.random-play-wrapper .header {
font-size: 14;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
background: #282c35;
display: block;
padding: 25px 40px 25px 60px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
position: relative; }
.random-play-wrapper .header:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\E012";
color: #616670;
position: absolute;
font-size: 14px;
top: 21px;
left: 39px; }
.random-play-wrapper .filter-label {
font-size: 12px;
margin: 0 0 20px 0; }
.random-play-wrapper .filter-wrapper {
padding: 25px 40px;
height: calc(100% - 190px); }
.random-play-wrapper .filter-wrapper .filter-inner {
zoom: 1;
margin-left: -50px;
height: 100%; }
.random-play-wrapper .filter-wrapper .filter-inner:before, .random-play-wrapper .filter-wrapper .filter-inner:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.random-play-wrapper .filter-wrapper .filter-inner:after {
clear: both; }
.random-play-wrapper .filter-wrapper .filter-col {
display: inline-block;
float: left;
padding: 0 0 30px 50px;
width: 50%;
height: 100%; }
.random-play-wrapper .filter-wrapper .filter-list {
padding: 0 0 50px 0;
height: 100%; }
.random-play-wrapper .filter-wrapper .btn {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-size: 13px;
width: calc(100% - 80px);
position: absolute;
bottom: 30px;
z-index: 200;
padding: 11px 20px;
height: 50px;
text-align: center; }
.random-play-wrapper input[type="checkbox"] {
display: none; }
.random-play-wrapper input[type="checkbox"] + label {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
position: relative;
cursor: pointer;
display: block;
height: 40px;
width: 100%;
border: 1px solid transparent;
background: #1d1f22;
display: inline-block;
border-radius: 2px; }
.random-play-wrapper input[type="checkbox"] + label span {
position: absolute;
top: 12px;
left: 20px;
color: #b5bdc9;
width: calc(100% - 20px); }
.random-play-wrapper input[type="checkbox"] + label:hover {
background: #15161a; }
.random-play-wrapper input[type="checkbox"]:hover + label {
background: #15161a; }
.random-play-wrapper input[type="checkbox"]:checked + label {
background: #15161a; }
.random-play-wrapper input[type="checkbox"]:checked + label span:after {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\E01D";
font-size: 7px;
position: absolute;
right: 15px;
top: 4px;
color: #3d63a3; }
.random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span {
left: 40px;
width: calc(100% - 40px); }
.random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span:before {
background-image: url(/assets/bg/sprites/flag_sprite-4c34e1320c5db1967115464c59f7ce6c.png);
background-repeat: no-repeat;
position: absolute;
left: -26px;
top: 2px;
width: 20px;
height: 11px;
content: ''; }
.random-play-wrapper .filter-list.by-country #afghanistan + label span:before {
background-position: 0 0; }
.random-play-wrapper .filter-list.by-country #algeria + label span:before {
background-position: 0 -11px; }
.random-play-wrapper .filter-list.by-country #bahrain + label span:before {
background-position: 0 -22px; }
.random-play-wrapper .filter-list.by-country #egypt + label span:before {
background-position: 0 -33px; }
.random-play-wrapper .filter-list.by-country #iran + label span:before {
background-position: 0 -44px; }
.random-play-wrapper .filter-list.by-country #iraq + label span:before {
background-position: 0 -55px; }
.random-play-wrapper .filter-list.by-country #jordan + label span:before {
background-position: 0 -66px; }
.random-play-wrapper .filter-list.by-country #kurdistan + label span:before {
background-position: 0 -77px; }
.random-play-wrapper .filter-list.by-country #kuwait + label span:before {
background-position: 0 -88px; }
.random-play-wrapper .filter-list.by-country #lebanon + label span:before {
background-position: 0 -99px; }
.random-play-wrapper .filter-list.by-country #lybia + label span:before {
background-position: 0 -110px; }
.random-play-wrapper .filter-list.by-country #libya + label span:before {
background-position: 0 -110px; }
.random-play-wrapper .filter-list.by-country #mauritania + label span:before {
background-position: 0 -121px; }
.random-play-wrapper .filter-list.by-country #morocco + label span:before {
background-position: 0 -132px; }
.random-play-wrapper .filter-list.by-country #oman + label span:before {
background-position: 0 -143px; }
.random-play-wrapper .filter-list.by-country #pakistan + label span:before {
background-position: 0 -154px; }
.random-play-wrapper .filter-list.by-country #palestine + label span:before {
background-position: 0 -165px; }
.random-play-wrapper .filter-list.by-country #qatar + label span:before {
background-position: 0 -176px; }
.random-play-wrapper .filter-list.by-country #saudi_arabia + label span:before {
background-position: 0 -187px; }
.random-play-wrapper .filter-list.by-country #somalia + label span:before {
background-position: 0 -198px; }
.random-play-wrapper .filter-list.by-country #sudan + label span:before {
background-position: 0 -209px; }
.random-play-wrapper .filter-list.by-country #syria + label span:before {
background-position: 0 -220px; }
.random-play-wrapper .filter-list.by-country #tunisia + label span:before {
background-position: 0 -231px; }
.random-play-wrapper .filter-list.by-country #turkey + label span:before {
background-position: 0 -242px; }
.random-play-wrapper .filter-list.by-country #unaffiliated + label span:before {
background-position: 0 -253px; }
.random-play-wrapper .filter-list.by-country #united-arab-emirates + label {
font-size: 12px; }
.random-play-wrapper .filter-list.by-country #united-arab-emirates + label span:before {
background-position: 0 -264px; }
.random-play-wrapper .filter-list.by-country #united_states + label span:before {
background-position: 0 -275px; }
.random-play-wrapper .filter-list.by-country #yemen + label span:before {
background-position: 0 -286px; }
.random-play-wrapper .jspTrack {
background: none; }
.random-play-wrapper .jspVerticalBar {
border: none;
right: -10px;
top: 5px; }
.random-play-wrapper .jspDrag {
border: none;
background: #2b2e33;
border-radius: 10px;
width: 5px;
box-shadow: none; }
@media (max-width: 767px) {
.random-play-wrapper .filter-wrapper .btn {
bottom: 50px; } }
@media (max-width: 600px) {
.random-play-wrapper {
display: none; } }
html[lang="ar"].openRandom .random-play-wrapper {
-webkit-transform: translateX(0);
transform: translateX(0); }
html[lang="ar"] .random-play-wrapper {
-webkit-transform: translateX(-550px);
transform: translateX(-550px); }
html[lang="ar"] .random-play-wrapper .header {
padding: 25px 60px 25px 40px; }
html[lang="ar"] .random-play-wrapper .header:before {
left: auto;
right: 39px; }
html[lang="ar"] .random-play-wrapper .filter-label {
padding: 0 10px 0 0; }
html[lang="ar"] .random-play-wrapper input[type="checkbox"] + label span {
right: 20px;
left: auto; }
html[lang="ar"] .random-play-wrapper input[type="checkbox"]:checked + label {
background: #15161a; }
html[lang="ar"] .random-play-wrapper input[type="checkbox"]:checked + label span:after {
left: 15px;
right: auto; }
html[lang="ar"] .random-play-wrapper .filter-wrapper .filter-list {
padding-left: 10px !important; }
html[lang="ar"] .random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span {
right: 40px;
left: auto;
padding-right: 20px; }
html[lang="ar"] .random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span:before {
right: -26px;
left: auto; }
html[lang="ar"] .jspPane {
padding: 0 0 50px 0 !important; }
html[lang="ar"] .jspVerticalBar {
right: auto; }
.random-trigger {
position: absolute;
left: 0;
width: 10px;
height: 10px;
background: #fff;
z-index: 100;
cursor: pointer; }
.toggle-random-settings {
position: absolute;
right: 15px;
top: 13px;
width: 12px;
height: 12px;
padding: 2px;
overflow: visible !important;
text-align: center; }
.toggle-random-settings:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
content: "\E012";
color: #b5bdc9;
text-shadow: 0 -1px 0 #232b37;
position: absolute;
font-size: 10px; }
.toggle-random-settings:after {
-webkit-transition: top 200ms ease, opacity 200ms ease;
transition: top 200ms ease, opacity 200ms ease;
position: absolute;
top: -23px;
right: 4px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 4.5px 0 4.5px;
border-color: #202227 transparent transparent transparent;
opacity: 0;
content: ''; }
.openRandom .toggle-random-settings:after {
-webkit-transition: top 200ms 200ms ease, opacity 200ms 200ms ease;
transition: top 200ms 200ms ease, opacity 200ms 200ms ease;
opacity: 1;
top: -13px; }
.toggle-random-settings:hover {
background: none !important; }
.toggle-random-settings:hover:before {
color: #d2d7df; }
.toggle-random-settings:hover .tooltip {
display: block; }
@media (max-width: 767px) {
.toggle-random-settings:before {
top: 11px; }
.toggle-random-settings:after {
right: 10px; }
.openRandom .toggle-random-settings:after {
top: -14px; } }
.alert-wrapper {
display: none;
padding: 20px; }
@media (min-width: 601px) {
.alert-wrapper {
position: absolute;
width: 100%;
height: calc(100vh - 400px);
top: 0;
left: 0;
display: none;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; } }
@media (max-width: 600px) {
.alert-wrapper {
padding: 0; } }
.alert-placeholder {
width: 100%;
max-width: 600px;
padding: 40px 30px 30px;
border-radius: 3px;
background: #ebeef4;
border: 1px solid #e4e7ed;
text-align: center; }
.alert-placeholder .alert-title {
font-size: 220px;
font-size: 22rem;
color: #545864;
margin: 0 0 25px 0; }
.alert-placeholder p {
font-size: 160px;
font-size: 16rem;
color: #545864;
margin: 0 0 30px 0; }
.alert-placeholder .home-btn {
font-size: 140px;
font-size: 14rem;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
max-width: 250px;
display: block;
padding: 18px 45px;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.03);
margin: 0 auto;
background: #4c79c5;
background: -webkit-linear-gradient(top, #588ce7 0%, #4c79c5 100%);
background: linear-gradient(to bottom, #588ce7 0%, #4c79c5 100%);
text-shadow: -1px 0 1px #3b5f9d;
color: #fff;
text-align: center;
border-radius: 2px; }
.alert-placeholder .home-btn:hover,
.alert-placeholder .home-btn:active {
background: #588be1;
background: -webkit-linear-gradient(top, #649cff 0%, #588be1 100%);
background: linear-gradient(to bottom, #649cff 0%, #588be1 100%); }
@media (max-width: 600px) {
.alert-placeholder {
padding: 20px; }
.alert-placeholder .alert-title {
font-size: 150px;
font-size: 15rem;
margin: 0 0 20px 0; }
.alert-placeholder p {
font-size: 130px;
font-size: 13rem;
margin: 0 0 20px 0; }
.alert-placeholder .home-btn {
padding: 18px 20px; } }
.playlist-author {
display: block;
font-size: 18px;
font-weight: 300; }
.playlist-tooltip {
display: none;
position: absolute;
right: 0;
width: 175px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
padding: 20px;
background: #dadfe5;
border: 1px solid #1a1d24;
text-align: left;
color: #525a66; }
.ar .playlist-tooltip {
text-align: right; }
.playlist-tooltip:after {
content: '';
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #dadfe5;
position: absolute;
bottom: -10px;
right: 30px; }
.playlist-tooltip .playlist-tooltip__title {
margin-top: 0;
color: #00adee; }
.playlist-tooltip .playlist-tooltip__text {
font-size: 11px; }
.playlist-tooltip .icn {
float: right;
margin-top: 3px; }
.ar .playlist-tooltip .icn {
float: left; }
.like-icon {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.like-icon:before {
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
content: "\E015"; }
.like-icon:hover:before, .like-icon.active:before {
color: #ce205d !important; }
.delete-song {
cursor: pointer;
opacity: 1;
width: 10px;
height: 10px;
-webkit-transition: color 200ms ease;
transition: color 200ms ease; }
.delete-song:before, .delete-song:after {
display: block;
content: '';
position: absolute;
top: 4px;
left: 0;
width: 10px;
height: 1px;
background: #a9a9a9;
-webkit-transition: background 200ms ease;
transition: background 200ms ease; }
.delete-song:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.delete-song:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.delete-song:hover:before, .delete-song:hover:after {
background: #5c5c5c; }
.share-widget {
zoom: 1;
padding: 20px 0;
position: relative; }
.share-widget:before, .share-widget:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.share-widget:after {
clear: both; }
.share-widget .title {
font-size: 140px;
font-size: 14rem;
color: #545864;
display: inline-block;
width: 100%;
padding: 0 0 0 25px;
position: relative;
font-weight: bold; }
.share-widget .title:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\E017";
font-size: 14px;
color: #b4bbc6;
position: absolute;
left: 0; }
.share-widget ul {
zoom: 1;
list-style: none;
padding: 0px;
margin-top: 0;
margin-bottom: 0;
margin: 15px 0 0 0;
padding: 0 0 0 2px; }
.share-widget ul:before, .share-widget ul:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.share-widget ul:after {
clear: both; }
.share-widget ul li {
display: inline-block;
float: left; }
.share-widget ul li:last-child {
float: right; }
.share-widget a,
.share-widget .trigger {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
border-radius: 2px;
padding: 11px;
color: #fff;
text-align: center;
margin-right: 3px;
font-size: 110px;
font-size: 11rem;
font-weight: bold;
position: relative;
display: inline-block;
-webkit-font-smoothing: antialiased; }
.share-widget a span,
.share-widget .trigger span {
position: relative; }
.share-widget a span:before, .share-widget a:before,
.share-widget .trigger span:before,
.share-widget .trigger:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute; }
.share-widget a span:before,
.share-widget .trigger span:before {
left: 0;
top: 1px; }
.share-widget .btn-small {
width: 40px;
height: 39px; }
.share-widget .btn-small span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.share-widget .fb-share,
.share-widget .twitter-share,
.share-widget .embed-trigger {
font-size: 110px;
font-size: 11rem;
padding: 12px 18px; }
.share-widget .fb-share span,
.share-widget .twitter-share span,
.share-widget .embed-trigger span {
padding: 0 0 0 25px; }
.share-widget .fb-share {
background: #3a61a5;
border-top: 1px solid #5b81c1;
border-bottom: 1px solid #2d4b80; }
.share-widget .fb-share span {
text-shadow: 0 1px 0 #2d4b80; }
.share-widget .fb-share span:before {
content: "\E018";
font-size: 14px;
top: -1px; }
.share-widget .fb-share:hover {
background: #4974bf; }
.share-widget .twitter-share {
background: #5db2f2;
border-top: 1px solid #a5d9ff;
border-bottom: 1px solid #4e9dd9; }
.share-widget .twitter-share span {
text-shadow: 0 1px 0 #4e9dd9; }
.share-widget .twitter-share span:before {
content: "\E019";
font-size: 12px; }
.share-widget .twitter-share:hover {
background: #37a0ef; }
.share-widget .google-share {
background: #e13b2d;
border-top: 1px solid #ea877f;
border-bottom: 1px solid #a3291f; }
.share-widget .google-share:before {
content: "\E01A";
font-size: 14px;
left: 11px; }
.share-widget .google-share:hover {
background: #e65c51; }
.share-widget .tumblr-share {
background: #394b64;
border-top: 1px solid #8391a1;
border-bottom: 1px solid #121820; }
.share-widget .tumblr-share:before {
content: "\E01B";
font-size: 14px;
left: 15px; }
.share-widget .tumblr-share:hover {
background: #485e7e; }
.share-widget .email-share {
background: #6c6fb9;
border-top: 1px solid #a1a6d5;
border-bottom: 1px solid #414374; }
.share-widget .email-share:before {
content: "\E01C";
font-size: 11px;
left: 11px;
top: 13px; }
.share-widget .email-share:hover {
background: #888ac6; }
.share-widget .embed-trigger {
background: #393e4b;
border-top: 1px solid #858b95;
border-bottom: 1px solid #0a0b0d;
text-shadow: 0 1px 0 #0b0c0e;
position: absolute;
right: 0;
width: calc(100% - 460px); }
.share-widget .embed-trigger:hover {
background: #4b5162; }
.share-widget .embed-trigger:before {
height: 100%;
width: 1px;
background: #e4e7ed;
left: -7px;
top: 0;
position: absolute;
content: ''; }
.share-widget .embed-panel-wrapper {
position: absolute;
bottom: 67px;
padding: 20px;
background: #ebeef4;
border-radius: 3px;
border: 1px solid #e4e7ed;
color: #636771;
font-size: 110px;
font-size: 11rem;
width: 100%;
height: 145px;
z-index: 200;
display: none; }
.share-widget .embed-panel-wrapper .panel-wordpress, .share-widget .embed-panel-wrapper .panel-iframe {
display: none; }
.share-widget .embed-panel-wrapper .embed-panel {
height: 69px; }
.share-widget .embed-panel-wrapper .copy-btn {
-webkit-transition: border 200ms ease, color 200ms ease, background 200ms ease;
transition: border 200ms ease, color 200ms ease, background 200ms ease;
text-transform: uppercase;
font-size: 8px;
color: #ababab;
border-radius: 3px;
border: 1px solid #e4e7ed;
padding: 8px 18px 7px;
cursor: pointer;
background: #f4f6fa;
position: absolute;
right: 13px;
top: 13px;
color: #636771; }
.share-widget .embed-panel-wrapper .copy-btn.zeroclipboard-is-hover, .share-widget .embed-panel-wrapper .copy-btn.zeroclipboard-is-active {
border: 1px solid #c5ccd9; }
.share-widget .embed-toggle {
margin: 0 0 20px 0; }
.ar .share-widget .embed-toggle {
margin: 0 35px 20px 0; }
.share-widget .embed-toggle span {
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
margin-right: 20px;
cursor: pointer; }
.share-widget .embed-toggle span:hover {
color: #4179ce; }
.share-widget .embed-toggle span.active {
font-weight: bold;
color: #4179ce; }
.share-widget textarea {
background: none;
border: none;
width: 100%;
resize: none; }
.share-widget textarea:focus {
background: none;
border: none;
outline: none; }
.rtl .share-widget .title {
padding: 0 25px 0 0; }
.rtl .share-widget .title:before {
left: auto;
right: 0; }
.rtl .share-widget ul li {
float: right !important; }
.rtl .share-widget .embed-trigger {
right: auto;
left: 0; }
.rtl .share-widget .embed-trigger:before {
right: -7px;
left: 0; }
@media (max-width: 600px) {
.rtl .share-widget .twitter-share span:before, .rtl .share-widget .fb-share span:before {
position: relative; } }
.cell-meta .play-count,
.cell-meta .like-count,
.playlist-meta .play-count,
.playlist-meta .like-count {
padding: 0 0 0 20px;
position: relative;
display: inline-block; }
.cell-meta .play-count:before,
.cell-meta .like-count:before,
.playlist-meta .play-count:before,
.playlist-meta .like-count:before {
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
color: #b2b9c4;
left: 0; }
.cell-meta .play-count:before,
.playlist-meta .play-count:before {
top: 1px;
font-size: 14px;
content: "\E00D"; }
.cell-meta .like-count,
.playlist-meta .like-count {
margin-left: 10px;
padding: 0 0 0 18px;
color: inherit;
text-decoration: none; }
.cell-meta .like-count:before,
.playlist-meta .like-count:before {
content: "\E015";
font-size: 11px;
top: 2px; }
.cell-meta .like-count:hover:before, .cell-meta .like-count.active:before,
.playlist-meta .like-count:hover:before,
.playlist-meta .like-count.active:before {
color: #ce205d; }
.page-full-light {
zoom: 1;
width: 100%;
min-height: 100%;
margin: 0 auto;
position: relative;
background: #f5f6f8;
color: #676d78; }
.page-full-light:before, .page-full-light:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.page-full-light:after {
clear: both; }
.page-full-light .container {
max-width: 1540px;
padding: 0 20px; }
.page-full-light .header.main {
padding: 50px 0 20px;
border-bottom: 1px solid #e4e7ed;
margin: 0 0 45px 0;
position: relative; }
.page-full-light .header.main h1, .page-full-light .header.main .back-to {
font-size: 220px;
font-size: 22rem;
color: #545864;
font-weight: bold;
-webkit-font-smoothing: antialiased; }
.page-full-light .header.main .back-to {
cursor: pointer;
padding: 0 0 0 25px;
position: relative; }
.page-full-light .header.main .back-to:before {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
content: "\E01E";
font-size: 15px;
color: #b0b2b9;
position: absolute;
left: 0; }
.page-full-light .header.main .back-to:hover:before {
color: #545864; }
.page-full-light .header.main .playlist-meta {
position: absolute;
right: 20px;
top: 15px; }
.page-full-light .header.main .playlist-meta .like-count {
margin-left: 25px; }
.page-full-light .item {
margin: 0 0 46px 0;
position: relative;
display: inline-block; }
.page-full-light .item .cell {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
display: inline-block;
color: inherit; }
.page-full-light .item .cell:after {
padding-top: 100%;
width: 100%;
display: block;
content: ''; }
.page-full-light .item .cell:hover .cell-thumb {
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
opacity: 0.9; }
.page-full-light .item .cell:hover .cell-footer h2 {
color: #8e939e; }
.page-full-light .item .cell-thumb {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 200ms ease, opacity 200ms ease;
transition: box-shadow 200ms ease, opacity 200ms ease;
opacity: 1; }
.page-full-light .item .cell-thumb:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: ''; }
.page-full-light .item .cell-footer {
zoom: 1;
background: none;
box-shadow: none;
border-radius: 0;
min-width: inherit;
width: calc(100% - 70px);
bottom: -30px;
display: inline-block;
padding: 20px 0 0 0;
position: absolute; }
.page-full-light .item .cell-footer:before, .page-full-light .item .cell-footer:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.page-full-light .item .cell-footer:after {
clear: both; }
.page-full-light .item .cell-footer .cell-title {
font-size: 140px;
font-size: 14rem;
font-weight: bold;
color: #676d78;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.page-full-light .item .cell-meta {
position: absolute;
bottom: -25px;
right: 0;
z-index: 100; }
.rtl .page-full-light .item .cell-meta {
right: auto;
left: 0; }
.page-full-light .item.is-featured .cell-thumb {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.page-full-light .item.is-featured .cell-title {
display: inline-block;
overflow: visible;
max-width: 100%; }
.page-full-light .item.is-featured .cell-footer {
bottom: -35px; }
.page-full-light .item.is-featured .is-grid div {
position: absolute;
width: 50%;
height: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center; }
.page-full-light .item.is-featured .is-grid div:nth-child(1) {
top: 0;
left: 0; }
.page-full-light .item.is-featured .is-grid div:nth-child(2) {
top: 0;
right: 0; }
.page-full-light .item.is-featured .is-grid div:nth-child(3) {
bottom: 0;
left: 0; }
.page-full-light .item.is-featured .is-grid div:nth-child(4) {
bottom: 0;
right: 0; }
.page-full-light .item.is-featured .label {
font-size: 100px;
font-size: 10rem;
color: #fff;
text-transform: uppercase;
background: #427acf;
margin-right: 10px;
border-radius: 2px;
padding: 6px 10px;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
letter-spacing: 0.01em;
display: inline-block; }
@media (min-width: 768px) and (max-width: 1050px) {
.page-full-light .header.main {
padding: 80px 0 20px; } }
.page-full-light.rtl {
direction: rtl; }
.page-full-light.rtl .header.main .playlist-meta {
right: auto;
left: 20px; }
.page-full-light.rtl .header.main .playlist-meta .like-count {
margin: 0; }
.page-full-light.rtl .header.main .playlist-meta .play-count {
margin: 0 0 0 25px; }
.page-full-light.rtl .item .cell-meta {
right: auto;
left: 0; }
.page-full-light.rtl .item .cell-meta .like-count {
margin: 0; }
.page-full-light.rtl .item .cell-meta .play-count {
margin: 0 0 0 10px; }
.page-full-light.rtl .item.is-featured .label {
margin: 0 0 0 10px; }
@media (max-width: 850px) {
.page-full-light.rtl .item.is-featured .label {
margin: 0; } }
.collection-page .cell-grid.standard {
position: relative;
zoom: 1;
margin-left: -50px;
margin-bottom: 50px; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 50px;
width: 20%; }
.collection-page .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
.collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page .cell-grid.standard .col.is-featured {
width: 40% !important; }
@media (min-width: 1301px) {
.collection-page .cell-grid.standard .col:nth-child(8) {
clear: left; } }
@media (max-width: 1300px) {
.collection-page .item .cell-footer .cell-title {
font-size: 120px;
font-size: 12rem; } }
@media (min-width: 1151px) and (max-width: 1300px) {
.collection-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 20%; }
.collection-page .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
.collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (min-width: 851px) and (max-width: 1150px) {
.collection-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 25%; }
.collection-page .cell-grid.standard .col:nth-child(4n+1) {
clear: left; }
.collection-page .cell-grid.standard .col:nth-child(4n + 1), .collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page .cell-grid.standard .col.is-featured {
width: 50% !important; } }
@media (max-width: 850px) {
.collection-page .cell-meta .play-count {
display: none; } }
@media (min-width: 601px) and (max-width: 850px) {
.collection-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 33.33333%; }
.collection-page .cell-grid.standard .col:nth-child(3n+1) {
clear: left; }
.collection-page .cell-grid.standard .col:nth-child(3n + 1), .collection-page .cell-grid.standard .col:nth-child(4n + 1), .collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page .cell-grid.standard .col.is-featured {
width: 66.6666% !important; } }
@media (min-width: 481px) and (max-width: 600px) {
.collection-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 50%; }
.collection-page .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-page .cell-grid.standard .col:nth-child(2n + 1), .collection-page .cell-grid.standard .col:nth-child(3n + 1), .collection-page .cell-grid.standard .col:nth-child(4n + 1), .collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page .cell-grid.standard .col.is-featured {
width: 100% !important; } }
@media (max-width: 480px) {
.collection-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 50%; }
.collection-page .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-page .cell-grid.standard .col:nth-child(2n + 1), .collection-page .cell-grid.standard .col:nth-child(3n + 1), .collection-page .cell-grid.standard .col:nth-child(4n + 1), .collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page .cell-grid.standard .col.is-featured {
width: 50% !important; }
.collection-page .cell-grid.standard .col.is-featured .label {
position: absolute;
-webkit-transform: translateY(-48px) translateX(7px);
transform: translateY(-48px) translateX(7px); } }
@media (max-width: 400px) {
.collection-page .cell-grid.standard {
zoom: 1;
margin-left: 0;
margin-left: 0; }
.collection-page .cell-grid.standard:before, .collection-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page .cell-grid.standard:after {
clear: both; }
.collection-page .cell-grid.standard .col {
float: left;
padding-left: 0;
width: 100%; }
.collection-page .cell-grid.standard .col:nth-child(1n+1) {
clear: left; }
.collection-page .cell-grid.standard .col {
padding-left: 0; }
.collection-page .cell-grid.standard .col:nth-child(2n + 1), .collection-page .cell-grid.standard .col:nth-child(3n + 1), .collection-page .cell-grid.standard .col:nth-child(4n + 1), .collection-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page .cell-grid.standard .col.is-featured {
width: 100% !important; } }
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -50px;
margin-left: 0 !important; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 50px;
padding-left: 0 !important;
width: 20%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
@media (min-width: 1301px) {
.collection-page.rtl .cell-grid.standard .col:nth-child(8) {
clear: right; } }
@media (max-width: 1300px) {
.collection-page.rtl .item .cell-footer .cell-title {
font-size: 120px;
font-size: 12rem; } }
@media (min-width: 1151px) and (max-width: 1300px) {
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 20%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
.collection-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (min-width: 851px) and (max-width: 1150px) {
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 25%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(4n+1) {
clear: left; }
.collection-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page.rtl .cell-grid.standard .col.is-featured {
width: 50% !important; } }
@media (max-width: 850px) {
.collection-page.rtl .cell-meta .play-count {
display: none; } }
@media (min-width: 601px) and (max-width: 850px) {
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 33.33333%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(3n+1) {
clear: left; }
.collection-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page.rtl .cell-grid.standard .col.is-featured {
width: 66.6666% !important; } }
@media (min-width: 481px) and (max-width: 600px) {
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 50%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-page.rtl .cell-grid.standard .col:nth-child(2n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page.rtl .cell-grid.standard .col.is-featured {
width: 100% !important; } }
@media (max-width: 480px) {
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 50%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-page.rtl .cell-grid.standard .col:nth-child(2n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page.rtl .cell-grid.standard .col.is-featured {
width: 50% !important; }
.collection-page.rtl .cell-grid.standard .col.is-featured .label {
position: absolute;
-webkit-transform: translateY(-48px) translateX(-7px);
transform: translateY(-48px) translateX(-7px); } }
@media (max-width: 400px) {
.collection-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: 0;
margin-left: 0 !important;
margin-right: 0; }
.collection-page.rtl .cell-grid.standard:before, .collection-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 0;
padding-left: 0 !important;
width: 100%; }
.collection-page.rtl .cell-grid.standard .col:nth-child(1n+1) {
clear: left; }
.collection-page.rtl .cell-grid.standard .col {
padding-right: 0; }
.collection-page.rtl .cell-grid.standard .col:nth-child(2n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-page.rtl .cell-grid.standard .col.is-featured {
width: 100% !important; } }
.collection-detail-page .has-featured,
.playlist-detail-page .has-featured {
zoom: 1;
min-height: 625px;
width: 100%;
padding: 0;
position: relative;
margin: 0 0 20px 0; }
.collection-detail-page .has-featured:before, .collection-detail-page .has-featured:after,
.playlist-detail-page .has-featured:before,
.playlist-detail-page .has-featured:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .has-featured:after,
.playlist-detail-page .has-featured:after {
clear: both; }
.collection-detail-page .has-featured .cell,
.playlist-detail-page .has-featured .cell {
margin: 0 0 25px 0; }
.collection-detail-page .has-featured .label,
.playlist-detail-page .has-featured .label {
margin: 0 0 20px 0;
display: inline-block;
letter-spacing: 0.01em; }
.collection-detail-page .has-featured h1,
.playlist-detail-page .has-featured h1 {
font-size: 300px;
font-size: 30rem;
margin: 0 0 20px 0;
color: #545864;
font-weight: bold;
line-height: 1.3; }
.collection-detail-page .has-featured .cell-content,
.playlist-detail-page .has-featured .cell-content {
position: relative;
border-bottom: 1px solid #e4e7ed; }
.collection-detail-page .has-featured .cell-meta,
.playlist-detail-page .has-featured .cell-meta {
font-size: 140px;
font-size: 14rem;
position: absolute;
top: 14px;
right: 0;
color: #b2b9c4; }
.collection-detail-page .has-featured .cell-desc,
.playlist-detail-page .has-featured .cell-desc {
font-size: 140px;
font-size: 14rem;
margin: 0 0 30px 0; }
.collection-detail-page .item.is-featured,
.playlist-detail-page .item.is-featured {
max-width: 575px;
width: 100%;
position: relative;
display: inline-block;
float: left; }
.collection-detail-page .playlist-wrapper,
.playlist-detail-page .playlist-wrapper {
font-size: 140px;
font-size: 14rem;
width: calc(100% - 575px);
padding: 0 0 0 50px;
display: inline-block;
float: left;
position: relative; }
.collection-detail-page .playlist-wrapper:after,
.playlist-detail-page .playlist-wrapper:after {
width: calc(100% - 50px);
height: 1px;
background: #fff;
position: absolute;
bottom: -1px;
left: 50px;
content: ''; }
.collection-detail-page .playlist-wrapper header,
.playlist-detail-page .playlist-wrapper header {
box-shadow: none;
background: none;
border: 0;
padding: 0 0 15px 0;
height: auto; }
.collection-detail-page .playlist-wrapper .row,
.playlist-detail-page .playlist-wrapper .row {
zoom: 1;
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
width: 100%;
border-bottom: 1px solid #e4e7ed;
position: relative; }
.collection-detail-page .playlist-wrapper .row:before, .collection-detail-page .playlist-wrapper .row:after,
.playlist-detail-page .playlist-wrapper .row:before,
.playlist-detail-page .playlist-wrapper .row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .playlist-wrapper .row:after,
.playlist-detail-page .playlist-wrapper .row:after {
clear: both; }
.collection-detail-page .playlist-wrapper .row .play-collection-song,
.playlist-detail-page .playlist-wrapper .row .play-collection-song {
zoom: 1;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
color: inherit;
padding: 16px 0;
display: block; }
.collection-detail-page .playlist-wrapper .row .play-collection-song:before, .collection-detail-page .playlist-wrapper .row .play-collection-song:after,
.playlist-detail-page .playlist-wrapper .row .play-collection-song:before,
.playlist-detail-page .playlist-wrapper .row .play-collection-song:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .playlist-wrapper .row .play-collection-song:after,
.playlist-detail-page .playlist-wrapper .row .play-collection-song:after {
clear: both; }
.collection-detail-page .playlist-wrapper .row .play-collection-song.active,
.playlist-detail-page .playlist-wrapper .row .play-collection-song.active {
font-weight: bold;
background: #fafcff;
color: #4179ce; }
.collection-detail-page .playlist-wrapper .row .play-collection-song.active .col:nth-child(1):before,
.playlist-detail-page .playlist-wrapper .row .play-collection-song.active .col:nth-child(1):before {
opacity: 1; }
.collection-detail-page .playlist-wrapper .row .col,
.playlist-detail-page .playlist-wrapper .row .col {
display: inline-block;
float: left; }
.collection-detail-page .playlist-wrapper .row .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .row .col:nth-child(1) {
width: 40%; }
.collection-detail-page .playlist-wrapper .row .col:nth-child(2),
.playlist-detail-page .playlist-wrapper .row .col:nth-child(2) {
width: 45%; }
.collection-detail-page .playlist-wrapper .row .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .row .col:nth-child(3) {
width: 15%;
text-align: right; }
.collection-detail-page .playlist-wrapper .row:not(.header-row),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) {
border-top: 1px solid #fff; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 5px 0 80px; }
.playlist-detail-page .collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1), .playlist-detail-page
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 5px 0 55px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before,
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
content: "\E016";
font-size: 16px;
opacity: 0;
color: #4179ce;
position: absolute;
left: 20px;
top: 16px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2) {
padding: 0 5px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3) {
text-align: right;
padding-right: 28px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row):hover,
.playlist-detail-page .playlist-wrapper .row:not(.header-row):hover {
background: #fafcff;
color: #4179ce; }
.collection-detail-page .playlist-wrapper .row:not(.header-row):hover a .col:nth-child(1):before,
.playlist-detail-page .playlist-wrapper .row:not(.header-row):hover a .col:nth-child(1):before {
opacity: 1; }
.collection-detail-page .playlist-wrapper .row:not(.header-row):hover .delete-song,
.playlist-detail-page .playlist-wrapper .row:not(.header-row):hover .delete-song {
opacity: 1;
visibility: visible; }
.collection-detail-page .playlist-wrapper .row .like-icon,
.playlist-detail-page .playlist-wrapper .row .like-icon {
position: absolute;
z-index: 100;
display: inline-block;
top: 17px;
left: 50px;
text-decoration: none; }
.collection-detail-page .playlist-wrapper .row .like-icon:before,
.playlist-detail-page .playlist-wrapper .row .like-icon:before {
color: #e4e7ed;
font-size: 11px; }
.collection-detail-page .playlist-wrapper .row .like-icon:hover::before, .collection-detail-page .playlist-wrapper .row .like-icon.active::before,
.playlist-detail-page .playlist-wrapper .row .like-icon:hover::before,
.playlist-detail-page .playlist-wrapper .row .like-icon.active::before {
color: #ce205d; }
.collection-detail-page .playlist-wrapper .row .reorder,
.playlist-detail-page .playlist-wrapper .row .reorder {
cursor: move;
position: absolute;
right: 10px;
top: 6px;
z-index: 300; }
.collection-detail-page .playlist-wrapper .row .reorder:before,
.playlist-detail-page .playlist-wrapper .row .reorder:before {
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 35px;
content: "\E020";
color: #c2c7d3; }
.collection-detail-page .playlist-wrapper .row .reorder:hover:before,
.playlist-detail-page .playlist-wrapper .row .reorder:hover:before {
color: #8791a8; }
.collection-detail-page .playlist-wrapper .row .delete-song,
.playlist-detail-page .playlist-wrapper .row .delete-song {
position: absolute;
right: 6%;
top: 20px;
z-index: 300;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease; }
.collection-detail-page .playlist-wrapper .header-row,
.playlist-detail-page .playlist-wrapper .header-row {
font-weight: bold;
padding: 20px 0; }
.collection-detail-page .playlist-wrapper .header-row .col,
.playlist-detail-page .playlist-wrapper .header-row .col {
display: inline-block;
float: left; }
.collection-detail-page .playlist-wrapper .header-row .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .header-row .col:nth-child(1) {
padding: 0 0 0 22px; }
.collection-detail-page .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .header-row .col:nth-child(3) {
padding: 0 28px 0 0; }
@media (max-width: 1300px) {
.collection-detail-page .item.is-featured,
.playlist-detail-page .item.is-featured {
max-width: 400px;
width: 100%; }
.collection-detail-page .playlist-wrapper,
.playlist-detail-page .playlist-wrapper {
width: calc(100% - 400px);
margin: 0 0 80px 0; }
.collection-detail-page .playlist-wrapper .row .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .row .col:nth-child(1) {
width: 50%; }
.collection-detail-page .playlist-wrapper .row .col:nth-child(2),
.playlist-detail-page .playlist-wrapper .row .col:nth-child(2) {
width: 35%; }
.collection-detail-page .share-widget ul li:nth-child(1), .collection-detail-page .share-widget ul li:nth-child(2),
.playlist-detail-page .share-widget ul li:nth-child(1),
.playlist-detail-page .share-widget ul li:nth-child(2) {
width: 50%; }
.collection-detail-page .share-widget ul li:nth-child(3),
.playlist-detail-page .share-widget ul li:nth-child(3) {
clear: left; }
.collection-detail-page .share-widget ul li:last-child,
.playlist-detail-page .share-widget ul li:last-child {
float: left; }
.collection-detail-page .share-widget ul li:last-child a,
.playlist-detail-page .share-widget ul li:last-child a {
position: relative;
width: auto; }
.collection-detail-page .share-widget ul li:last-child a:before,
.playlist-detail-page .share-widget ul li:last-child a:before {
content: none; }
.collection-detail-page .share-widget .fb-share, .collection-detail-page .share-widget .twitter-share,
.playlist-detail-page .share-widget .fb-share,
.playlist-detail-page .share-widget .twitter-share {
margin-bottom: 4px;
display: block; } }
@media (max-width: 1050px) {
.collection-detail-page .item.is-featured,
.playlist-detail-page .item.is-featured {
max-width: 300px;
width: 100%; }
.collection-detail-page .playlist-wrapper,
.playlist-detail-page .playlist-wrapper {
width: calc(100% - 300px); }
.collection-detail-page .has-featured h1,
.playlist-detail-page .has-featured h1 {
font-size: 220px;
font-size: 22rem; }
.collection-detail-page .has-featured .cell-meta,
.playlist-detail-page .has-featured .cell-meta {
top: -38px; } }
@media (min-width: 851px) and (max-width: 1050px) {
.collection-detail-page .share-widget .fb-share,
.collection-detail-page .share-widget .twitter-share,
.playlist-detail-page .share-widget .fb-share,
.playlist-detail-page .share-widget .twitter-share {
padding: 12px 2px; } }
@media (max-width: 850px) {
.collection-detail-page .item.is-featured,
.playlist-detail-page .item.is-featured {
max-width: 100%;
width: 100%; }
.collection-detail-page .item.is-featured .label,
.playlist-detail-page .item.is-featured .label {
position: absolute;
left: 10px;
top: 10px; }
.collection-detail-page .item.is-featured .cell,
.playlist-detail-page .item.is-featured .cell {
width: 300px;
display: inline-block;
float: left; }
.collection-detail-page .item.is-featured .cell-content-outer,
.playlist-detail-page .item.is-featured .cell-content-outer {
zoom: 1;
float: left;
display: inline-block;
position: relative;
width: calc(100% - 300px);
padding: 0 0 0 25px; }
.collection-detail-page .item.is-featured .cell-content-outer:before, .collection-detail-page .item.is-featured .cell-content-outer:after,
.playlist-detail-page .item.is-featured .cell-content-outer:before,
.playlist-detail-page .item.is-featured .cell-content-outer:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .item.is-featured .cell-content-outer:after,
.playlist-detail-page .item.is-featured .cell-content-outer:after {
clear: both; }
.collection-detail-page .item.is-featured .cell-meta,
.playlist-detail-page .item.is-featured .cell-meta {
position: relative;
top: auto;
bottom: auto;
margin-bottom: 10px; }
.collection-detail-page .item.is-featured .cell-desc,
.playlist-detail-page .item.is-featured .cell-desc {
margin: 0 0 15px 0; }
.collection-detail-page .item.is-featured .cell-desc p:last-child,
.playlist-detail-page .item.is-featured .cell-desc p:last-child {
margin: 0; }
.collection-detail-page .playlist-wrapper,
.playlist-detail-page .playlist-wrapper {
width: 100%;
padding: 0; }
.collection-detail-page .playlist-wrapper .row,
.playlist-detail-page .playlist-wrapper .row {
font-size: 120px;
font-size: 12rem; }
.collection-detail-page .delete-song,
.playlist-detail-page .delete-song {
top: 19px; }
.collection-detail-page .share-widget .fb-share,
.collection-detail-page .share-widget .twitter-share,
.playlist-detail-page .share-widget .fb-share,
.playlist-detail-page .share-widget .twitter-share {
padding: 12px 10px; } }
@media (max-width: 700px) {
.collection-detail-page .item.is-featured .cell,
.playlist-detail-page .item.is-featured .cell {
width: 200px !important; }
.collection-detail-page .item.is-featured .cell-content-outer,
.playlist-detail-page .item.is-featured .cell-content-outer {
width: calc(100% - 200px) !important; } }
@media (min-width: 601px) {
.collection-detail-page .share-widget ul,
.playlist-detail-page .share-widget ul {
display: block !important; } }
@media (max-width: 600px) {
.collection-detail-page .playlist-wrapper .header-row .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .header-row .col:nth-child(1) {
width: 45% !important; }
.collection-detail-page .playlist-wrapper .header-row .col:nth-child(2),
.playlist-detail-page .playlist-wrapper .header-row .col:nth-child(2) {
padding: 0 5px;
width: 40%; }
.collection-detail-page .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .header-row .col:nth-child(3) {
padding: 0;
width: 15%; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 5px 0 40px !important;
width: 45%; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before,
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before {
left: 10px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2) {
width: 40%; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3) {
width: 15%;
padding: 0 40px 0 0 !important; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .like-icon,
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .like-icon {
left: 38px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .reorder,
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .reorder {
right: 0; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .delete-song,
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .delete-song {
display: none; }
.collection-detail-page .share-widget .mob-hide,
.playlist-detail-page .share-widget .mob-hide {
display: none; }
.collection-detail-page .share-widget .embed-trigger,
.playlist-detail-page .share-widget .embed-trigger {
display: none; }
.collection-detail-page .share-widget .fb-share,
.collection-detail-page .share-widget .twitter-share,
.playlist-detail-page .share-widget .fb-share,
.playlist-detail-page .share-widget .twitter-share {
font-size: 0px;
font-size: 0rem;
width: 40px;
height: 40px;
padding: 12px; }
.collection-detail-page .share-widget ul,
.playlist-detail-page .share-widget ul {
display: none;
position: absolute; }
.collection-detail-page .share-widget ul li:nth-child(1),
.collection-detail-page .share-widget ul li:nth-child(2),
.playlist-detail-page .share-widget ul li:nth-child(1),
.playlist-detail-page .share-widget ul li:nth-child(2) {
width: auto; }
.collection-detail-page .share-widget ul li:nth-child(3),
.playlist-detail-page .share-widget ul li:nth-child(3) {
clear: inherit; }
.collection-detail-page .embed-panel-wrapper,
.playlist-detail-page .embed-panel-wrapper {
display: none !important; } }
@media (max-width: 520px) {
.collection-detail-page .item.is-featured .cell,
.playlist-detail-page .item.is-featured .cell {
width: 150px !important; }
.collection-detail-page .item.is-featured .cell-content-outer,
.playlist-detail-page .item.is-featured .cell-content-outer {
width: calc(100% - 150px) !important; } }
@media (max-width: 460px) {
.collection-detail-page .item.is-featured .cell,
.playlist-detail-page .item.is-featured .cell {
width: 100% !important;
margin: 0 0 30px 0; }
.collection-detail-page .item.is-featured .cell-content-outer,
.playlist-detail-page .item.is-featured .cell-content-outer {
width: 100% !important;
padding: 0; }
.collection-detail-page .playlist-wrapper .song-duration,
.playlist-detail-page .playlist-wrapper .song-duration {
position: absolute;
right: 20px; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1), .collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.collection-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3) {
text-align: right;
padding-right: 28px; } }
.collection-detail-page .related-title,
.playlist-detail-page .related-title {
font-size: 200px;
font-size: 20rem;
font-weight: bold;
margin-bottom: 35px;
position: relative; }
.collection-detail-page .related-title span,
.playlist-detail-page .related-title span {
display: inline-block;
background: #f4f6fa;
padding: 0 20px 0 0;
position: relative;
z-index: 100; }
.collection-detail-page .related-title:after,
.playlist-detail-page .related-title:after {
height: 1px;
width: 100%;
background: #e4e7ed;
position: absolute;
top: 50%;
left: 0;
z-index: 0;
content: ''; }
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
position: relative;
padding: 0 0 50px 0;
zoom: 1;
margin-left: -50px; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 50px;
width: 20%; }
.collection-detail-page .cell-grid.standard .col:nth-child(5n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
@media (min-width: 1151px) and (max-width: 1300px) {
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 20%; }
.collection-detail-page .cell-grid.standard .col:nth-child(5n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
.collection-detail-page .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (min-width: 851px) and (max-width: 1150px) {
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 25%; }
.collection-detail-page .cell-grid.standard .col:nth-child(4n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(4n+1) {
clear: left; }
.collection-detail-page .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-detail-page .cell-grid.standard .col.is-featured,
.playlist-detail-page .cell-grid.standard .col.is-featured {
width: 50%; } }
@media (min-width: 601px) and (max-width: 850px) {
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 33.33333%; }
.collection-detail-page .cell-grid.standard .col:nth-child(3n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(3n+1) {
clear: left; }
.collection-detail-page .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (max-width: 850px) {
.collection-detail-page .cell-grid.standard .cell-meta .play-count,
.playlist-detail-page .cell-grid.standard .cell-meta .play-count {
display: none; } }
@media (min-width: 481px) and (max-width: 600px) {
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 50%; }
.collection-detail-page .cell-grid.standard .col:nth-child(2n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-detail-page .cell-grid.standard .col:nth-child(2n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(2n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (max-width: 480px) {
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
zoom: 1;
margin-left: -25px; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 25px;
width: 50%; }
.collection-detail-page .cell-grid.standard .col:nth-child(2n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-detail-page .cell-grid.standard .col:nth-child(2n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(2n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (max-width: 400px) {
.collection-detail-page .cell-grid.standard,
.playlist-detail-page .cell-grid.standard {
zoom: 1;
margin-left: 0;
margin-left: 0; }
.collection-detail-page .cell-grid.standard:before, .collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:before,
.playlist-detail-page .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page .cell-grid.standard:after,
.playlist-detail-page .cell-grid.standard:after {
clear: both; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
float: left;
padding-left: 0;
width: 100%; }
.collection-detail-page .cell-grid.standard .col:nth-child(1n+1),
.playlist-detail-page .cell-grid.standard .col:nth-child(1n+1) {
clear: left; }
.collection-detail-page .cell-grid.standard .col,
.playlist-detail-page .cell-grid.standard .col {
padding-left: 0; }
.collection-detail-page .cell-grid.standard .col:nth-child(2n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(2n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
.collection-detail-page.rtl .item.is-featured,
.collection-detail-page.rtl .item.is-featured,
.playlist-detail-page.rtl .item.is-featured,
.playlist-detail-page.rtl .item.is-featured {
float: right; }
.collection-detail-page.rtl .playlist-wrapper,
.collection-detail-page.rtl .playlist-wrapper,
.playlist-detail-page.rtl .playlist-wrapper,
.playlist-detail-page.rtl .playlist-wrapper {
float: right;
padding: 0 50px 0 0; }
.collection-detail-page.rtl .playlist-wrapper .row .col,
.collection-detail-page.rtl .playlist-wrapper .row .col,
.playlist-detail-page.rtl .playlist-wrapper .row .col,
.playlist-detail-page.rtl .playlist-wrapper .row .col {
float: right !important; }
.collection-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(1),
.collection-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(1),
.playlist-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(1),
.playlist-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(1) {
padding: 0 22px 0 0; }
.collection-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3),
.collection-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3) {
padding: 0 0 0 40px !important;
text-align: right; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 80px 0 5px; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before,
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1):before {
right: 20px;
left: auto; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3) {
padding: 0 0 0 40px;
text-align: right; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .like-icon,
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .like-icon,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .like-icon,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .like-icon {
left: auto;
right: 50px; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder,
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder {
right: auto;
left: 10px; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .delete-song,
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .delete-song,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .delete-song,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .delete-song {
right: auto;
left: 6%; }
@media (max-width: 850px) {
.collection-detail-page.rtl .playlist-wrapper,
.collection-detail-page.rtl .playlist-wrapper,
.playlist-detail-page.rtl .playlist-wrapper,
.playlist-detail-page.rtl .playlist-wrapper {
padding: 0; }
.collection-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3),
.collection-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .header-row .col:nth-child(3) {
padding: 0 0 0 40px !important;
text-align: right !important; } }
@media (max-width: 600px) {
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 55px 0 5px !important; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3),
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(3) {
padding: 0 !important; }
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder,
.collection-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder,
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .reorder {
left: 0; } }
@media (max-width: 460px) {
.collection-detail-page.rtl .playlist-wrapper .song-duration,
.collection-detail-page.rtl .playlist-wrapper .song-duration,
.playlist-detail-page.rtl .playlist-wrapper .song-duration,
.playlist-detail-page.rtl .playlist-wrapper .song-duration {
position: absolute;
right: auto;
left: 20px; } }
@media (max-width: 850px) {
.collection-detail-page.rtl .item.is-featured .cell,
.playlist-detail-page.rtl .item.is-featured .cell {
width: 300px;
float: right; }
.collection-detail-page.rtl .item.is-featured .cell-content-outer,
.playlist-detail-page.rtl .item.is-featured .cell-content-outer {
float: right;
padding: 0 25px 0 0;
border: 0; } }
.collection-detail-page.rtl .related-title span,
.playlist-detail-page.rtl .related-title span {
padding: 0 0 0 20px; }
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -50px;
margin-left: 0 !important; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 50px;
padding-left: 0 !important;
width: 20%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
@media (min-width: 1151px) and (max-width: 1300px) {
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 20%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n+1) {
clear: left; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (min-width: 851px) and (max-width: 1150px) {
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 25%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(4n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(4n+1) {
clear: left; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; }
.collection-detail-page.rtl .cell-grid.standard .col.is-featured,
.playlist-detail-page.rtl .cell-grid.standard .col.is-featured {
width: 50%; } }
@media (min-width: 601px) and (max-width: 850px) {
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 33.33333%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(3n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(3n+1) {
clear: left; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (min-width: 481px) and (max-width: 600px) {
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 50%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(2n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(2n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(2n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (max-width: 480px) {
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 50%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(2n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(2n+1) {
clear: left; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(2n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(2n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
@media (max-width: 400px) {
.collection-detail-page.rtl .cell-grid.standard,
.playlist-detail-page.rtl .cell-grid.standard {
zoom: 1;
margin-right: 0;
margin-left: 0 !important;
margin-right: 0; }
.collection-detail-page.rtl .cell-grid.standard:before, .collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:before,
.playlist-detail-page.rtl .cell-grid.standard:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.collection-detail-page.rtl .cell-grid.standard:after,
.playlist-detail-page.rtl .cell-grid.standard:after {
clear: both; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
float: right;
padding-right: 0;
padding-left: 0 !important;
width: 100%; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(1n+1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(1n+1) {
clear: left; }
.collection-detail-page.rtl .cell-grid.standard .col,
.playlist-detail-page.rtl .cell-grid.standard .col {
padding-right: 0; }
.collection-detail-page.rtl .cell-grid.standard .col:nth-child(2n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1), .collection-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(2n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(3n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(4n + 1),
.playlist-detail-page.rtl .cell-grid.standard .col:nth-child(5n + 1) {
clear: inherit; } }
.playlist-detail-page .cell-content-outer {
border-top: 1px solid #e4e7ed; }
.playlist-detail-page .playlist-wrapper .header-row .col:nth-child(3),
.playlist-detail-page .playlist-wrapper .row.row .col:nth-child(3) {
padding: 0 40px 0 0;
text-align: left; }
.ar .playlist-detail-page .playlist-wrapper .header-row .col, .ar
.playlist-detail-page .playlist-wrapper .row.row .col {
text-align: right; }
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 5px 0 55px; }
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(2) {
padding: 0 5px; }
.playlist-detail-page .playlist-wrapper .row:not(.header-row) .col:nth-child(3) {
padding-right: 50px; }
.playlist-detail-page.rtl .playlist-wrapper .row:not(.header-row) .col:nth-child(1) {
padding: 0 55px 0 5px; }
.suggestions-page .suggested-artists {
zoom: 1;
margin-left: -50px; }
.suggestions-page .suggested-artists:before, .suggestions-page .suggested-artists:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page .suggested-artists:after {
clear: both; }
.suggestions-page .suggested-artists .col {
float: left;
padding-left: 50px;
width: 50%; }
.suggestions-page .suggested-artists .col:nth-child(2n+1) {
clear: left; }
.suggestions-page .item {
position: relative;
margin: 0 0 50px 0;
min-height: 170px; }
.suggestions-page .item .play-suggestion-song {
color: inherit;
display: block;
padding: 0 0 0 170px;
position: relative; }
.suggestions-page .item .play-suggestion-song:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
content: "\E016";
font-size: 16px;
opacity: 0;
color: #4179ce;
position: absolute;
left: 198px;
top: 18px;
z-index: 100; }
.suggestions-page .item .cell-thumb {
width: 170px;
height: 100%;
position: absolute;
left: 0;
top: 0;
box-shadow: none;
border-radius: 2px 0 0 2px; }
.suggestions-page .item .content {
position: relative;
width: 100%;
border: 1px solid #e4e7ed;
border-left: 0;
border-radius: 2px;
min-height: 205px;
background: #f0f2f5; }
.suggestions-page .item h2 {
font-size: 140px;
font-size: 14rem;
font-weight: bold; }
.suggestions-page .item .play-suggestion-song.active:before {
-webkit-transition: opacity 200ms 200ms ease;
transition: opacity 200ms 200ms ease;
opacity: 1; }
.suggestions-page .item .play-suggestion-song.active .upper {
background: #fafcff; }
.suggestions-page .item .play-suggestion-song.active .track-title,
.suggestions-page .item .play-suggestion-song.active .genre,
.suggestions-page .item .play-suggestion-song.active .duration {
color: #4179ce; }
.suggestions-page .upper {
font-size: 140px;
font-size: 14rem;
zoom: 1;
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
padding: 15px 10px 15px 50px;
border-bottom: 1px solid #e4e7ed;
display: block;
width: 100%;
background: #f5f6f8; }
.suggestions-page .upper:before, .suggestions-page .upper:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page .upper:after {
clear: both; }
.suggestions-page .upper .track-title,
.suggestions-page .upper .genre,
.suggestions-page .upper .duration {
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
display: inline-block;
float: left; }
.suggestions-page .upper .track-title {
-webkit-transition: color 200ms ease, -webkit-transform 200ms 200ms ease;
transition: color 200ms ease, -webkit-transform 200ms 200ms ease;
transition: transform 200ms 200ms ease, color 200ms ease;
transition: transform 200ms 200ms ease, color 200ms ease, -webkit-transform 200ms 200ms ease;
font-weight: bold;
width: 65%;
padding: 0 0 0 5px; }
.suggestions-page .upper .track-title span {
max-width: calc(100% - 30px);
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.suggestions-page .upper .genre,
.suggestions-page .upper .duration {
font-size: 120px;
font-size: 12rem; }
.suggestions-page .upper .genre {
width: 23%; }
.suggestions-page .upper .duration {
width: 12%;
position: absolute;
right: 0; }
.suggestions-page .upper .like-icon {
-webkit-transition: -webkit-transform 200ms 200ms ease;
transition: -webkit-transform 200ms 200ms ease;
transition: transform 200ms 200ms ease;
transition: transform 200ms 200ms ease, -webkit-transform 200ms 200ms ease;
position: absolute;
left: 30px;
top: 17px;
z-index: 100; }
.suggestions-page .upper .like-icon:before {
font-size: 11px;
color: #e4e7ed; }
.suggestions-page .lower {
padding: 27px 60px 30px 30px;
display: block;
background: #f0f2f5;
border-top: 1px solid #fff; }
.suggestions-page .lower h2 {
margin: 0 0 5px 0; }
.suggestions-page .lower h2 span {
font-size: 110px;
font-size: 11rem;
color: #c1c5cb;
margin: 0 0 0 5px;
display: inline-block;
font-weight: normal; }
.suggestions-page .lower .desc {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto; }
.suggestions-page .lower .desc p {
font-size: 120px;
font-size: 12rem; }
.suggestions-page .lower .desc p:last-child {
margin: 0; }
@media (max-width: 1150px) {
.suggestions-page .suggested-artists {
zoom: 1;
margin-left: -25px; }
.suggestions-page .suggested-artists:before, .suggestions-page .suggested-artists:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page .suggested-artists:after {
clear: both; }
.suggestions-page .suggested-artists .col {
float: left;
padding-left: 25px;
width: 50%; }
.suggestions-page .suggested-artists .col:nth-child(2n+1) {
clear: left; }
.suggestions-page .suggested-artists .item .lower {
padding: 27px 30px 30px 30px; } }
@media (min-width: 901px) and (max-width: 1150px) {
.suggestions-page .item .play-suggestion-song {
color: inherit;
display: block;
position: relative;
padding: 0; }
.suggestions-page .item .play-suggestion-song:before {
left: 118px; }
.suggestions-page .item .cell-thumb {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
box-shadow: none;
border-radius: 2px 0 0 0; }
.suggestions-page .item .upper {
width: calc(100% - 100px);
margin: 0 0 0 100px;
height: 100px;
position: relative;
padding: 15px 10px 15px 40px; }
.suggestions-page .item .upper .track-title {
width: 88%; }
.suggestions-page .item .upper .genre {
-webkit-transition: -webkit-transform 200ms 200ms ease;
transition: -webkit-transform 200ms 200ms ease;
transition: transform 200ms 200ms ease;
transition: transform 200ms 200ms ease, -webkit-transform 200ms 200ms ease;
position: absolute;
left: 44px;
top: 40px; }
.suggestions-page .item .upper .like-icon {
left: 18px; }
.suggestions-page .item .lower {
padding: 20px; }
.suggestions-page .item:hover .upper .genre {
-webkit-transition: -webkit-transform 200ms ease;
transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
transition: transform 200ms ease, -webkit-transform 200ms ease;
-webkit-transform: translateX(27px);
transform: translateX(27px); }
.suggestions-page .item .play-suggestion-song.active .upper .genre {
-webkit-transform: translateX(27px);
transform: translateX(27px); } }
@media (min-width: 901px) {
.suggestions-page .item:hover .play-suggestion-song:before {
-webkit-transition: opacity 200ms 200ms ease;
transition: opacity 200ms 200ms ease;
opacity: 1; }
.suggestions-page .item:hover .upper {
background: #fafcff; }
.suggestions-page .item:hover .track-title,
.suggestions-page .item:hover .genre,
.suggestions-page .item:hover .duration {
color: #4179ce; }
.suggestions-page .item:hover .like-icon,
.suggestions-page .item:hover .track-title {
-webkit-transition: -webkit-transform 200ms ease;
transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
transition: transform 200ms ease, -webkit-transform 200ms ease;
-webkit-transform: translateX(27px);
transform: translateX(27px); }
.suggestions-page .item .play-suggestion-song.active .like-icon,
.suggestions-page .item .play-suggestion-song.active .track-title {
-webkit-transition: -webkit-transform 200ms ease;
transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
transition: transform 200ms ease, -webkit-transform 200ms ease;
-webkit-transform: translateX(27px);
transform: translateX(27px); } }
@media (max-width: 900px) {
.suggestions-page .suggested-artists {
zoom: 1;
margin-left: 0;
margin-left: 0; }
.suggestions-page .suggested-artists:before, .suggestions-page .suggested-artists:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page .suggested-artists:after {
clear: both; }
.suggestions-page .suggested-artists .col {
float: left;
padding-left: 0;
width: 100%; }
.suggestions-page .suggested-artists .col:nth-child(1n+1) {
clear: left; }
.suggestions-page .suggested-artists .col {
padding-left: 0; }
.suggestions-page .suggested-artists .play-suggestion-song:before {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
left: 55px;
opacity: 1;
font-size: 50px;
color: rgba(255, 255, 255, 0.7);
position: absolute; }
.suggestions-page .suggested-artists .play-suggestion-song.active:before {
color: white; }
.suggestions-page .suggested-artists .upper .duration {
position: absolute;
right: 10px;
width: 40px; } }
@media (max-width: 600px) {
.suggestions-page .suggested-artists .item .play-suggestion-song {
color: inherit;
display: block;
position: relative;
padding: 0; }
.suggestions-page .suggested-artists .item .play-suggestion-song:before {
font-size: 40px;
left: 30px;
top: 50px; }
.suggestions-page .suggested-artists .item .cell-thumb {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
box-shadow: none;
border-radius: 2px 0 0 0; }
.suggestions-page .suggested-artists .item .upper {
width: calc(100% - 100px);
margin: 0 0 0 100px;
height: 100px;
position: relative;
padding: 15px 10px 15px 40px; }
.suggestions-page .suggested-artists .item .upper .track-title {
width: 100%;
margin: 0 0 5px 0; }
.suggestions-page .suggested-artists .item .upper .genre {
margin: 0 0 0 5px;
width: auto; }
.suggestions-page .suggested-artists .item .upper .duration {
margin-left: 20px;
position: relative;
width: auto; }
.suggestions-page .suggested-artists .item .upper .like-icon {
left: 18px; }
.suggestions-page .suggested-artists .item .lower {
padding: 20px;
border-left: 1px solid #e4e7ed; }
.suggestions-page .suggested-artists .item .play-suggestion-song.active .upper .genre {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@media (max-width: 400px) {
.suggestions-page .suggested-artists .item .play-suggestion-song {
padding: 0; }
.suggestions-page .suggested-artists .item .play-suggestion-song:before {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
top: 75px; }
.suggestions-page .suggested-artists .item .cell-thumb {
position: relative;
height: 150px;
width: 100%; }
.suggestions-page .suggested-artists .item .content {
border-radius: 0 0 2px 2px;
border-top: 0; }
.suggestions-page .suggested-artists .item .upper {
width: 100%;
margin: 0;
height: auto;
border-left: 1px solid #e4e7ed; } }
.suggestions-page.rtl .suggested-artists {
zoom: 1;
margin-right: -50px;
margin-left: 0 !important; }
.suggestions-page.rtl .suggested-artists:before, .suggestions-page.rtl .suggested-artists:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page.rtl .suggested-artists:after {
clear: both; }
.suggestions-page.rtl .suggested-artists .col {
float: right;
padding-right: 50px;
padding-left: 0 !important;
width: 50%; }
.suggestions-page.rtl .suggested-artists .col:nth-child(2n+1) {
clear: left; }
.suggestions-page.rtl .item .play-suggestion-song {
padding: 0 170px 0 0; }
.suggestions-page.rtl .item .play-suggestion-song:before {
left: 198px;
left: auto;
right: 198px; }
.suggestions-page.rtl .item .cell-thumb {
left: auto;
right: 0;
border-radius: 2px 2px 0 0; }
.suggestions-page.rtl .item .content {
border: 1px solid #e4e7ed;
border-right: 0; }
.suggestions-page.rtl .upper {
padding: 15px 50px 15px 10px; }
.suggestions-page.rtl .upper .track-title,
.suggestions-page.rtl .upper .genre {
float: right; }
.suggestions-page.rtl .upper .duration {
right: auto;
left: 0; }
.suggestions-page.rtl .upper .genre {
padding: 0 0 0 5px; }
.suggestions-page.rtl .upper .track-title {
width: 65%;
padding: 0 5px 0; }
.suggestions-page.rtl .upper .like-icon {
left: auto;
right: 30px; }
.suggestions-page.rtl .lower h2 span {
margin: 0 5px 0 0; }
@media (min-width: 901px) {
.suggestions-page.rtl .item:hover .like-icon,
.suggestions-page.rtl .item:hover .track-title {
-webkit-transform: translateX(-27px);
transform: translateX(-27px); }
.suggestions-page.rtl .item .play-suggestion-song.active .like-icon,
.suggestions-page.rtl .item .play-suggestion-song.active .track-title {
-webkit-transform: translateX(-27px);
transform: translateX(-27px); } }
@media (max-width: 1150px) {
.suggestions-page.rtl .suggested-artists {
zoom: 1;
margin-right: -25px;
margin-left: 0 !important; }
.suggestions-page.rtl .suggested-artists:before, .suggestions-page.rtl .suggested-artists:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page.rtl .suggested-artists:after {
clear: both; }
.suggestions-page.rtl .suggested-artists .col {
float: right;
padding-right: 25px;
padding-left: 0 !important;
width: 50%; }
.suggestions-page.rtl .suggested-artists .col:nth-child(2n+1) {
clear: left; } }
@media (min-width: 901px) and (max-width: 1150px) {
.suggestions-page.rtl .item .play-suggestion-song {
color: inherit;
display: block;
position: relative;
padding: 0; }
.suggestions-page.rtl .item .play-suggestion-song:before {
right: 118px;
left: auto; }
.suggestions-page.rtl .item .cell-thumb {
right: 0;
left: auto;
border-radius: 0 2px 0 0; }
.suggestions-page.rtl .item .upper {
margin: 0 100px 0 0;
padding: 15px 40px 15px 10px; }
.suggestions-page.rtl .item .upper .track-title {
width: 88%; }
.suggestions-page.rtl .item .upper .genre {
-webkit-transition: -webkit-transform 200ms 200ms ease;
transition: -webkit-transform 200ms 200ms ease;
transition: transform 200ms 200ms ease;
transition: transform 200ms 200ms ease, -webkit-transform 200ms 200ms ease;
position: absolute;
right: 44px;
left: auto;
top: 40px; }
.suggestions-page.rtl .item .upper .like-icon {
right: 18px;
left: auto; }
.suggestions-page.rtl .item .lower {
padding: 20px; }
.suggestions-page.rtl .item:hover .upper .genre {
-webkit-transition: -webkit-transform 200ms ease;
transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
transition: transform 200ms ease, -webkit-transform 200ms ease;
-webkit-transform: translateX(-27px);
transform: translateX(-27px); }
.suggestions-page.rtl .item .play-suggestion-song.active .upper .genre {
-webkit-transform: translateX(-27px);
transform: translateX(-27px); } }
@media (max-width: 900px) {
.suggestions-page.rtl .suggested-artists {
zoom: 1;
margin-right: 0;
margin-left: 0 !important;
margin-right: 0; }
.suggestions-page.rtl .suggested-artists:before, .suggestions-page.rtl .suggested-artists:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.suggestions-page.rtl .suggested-artists:after {
clear: both; }
.suggestions-page.rtl .suggested-artists .col {
float: right;
padding-right: 0;
padding-left: 0 !important;
width: 100%; }
.suggestions-page.rtl .suggested-artists .col:nth-child(1n+1) {
clear: left; }
.suggestions-page.rtl .suggested-artists .col {
padding-right: 0; }
.suggestions-page.rtl .suggested-artists .play-suggestion-song:before {
right: 55px;
left: auto; }
.suggestions-page.rtl .suggested-artists .upper .duration {
left: 10px;
right: auto; } }
@media (max-width: 600px) {
.suggestions-page.rtl .suggested-artists .item .play-suggestion-song {
color: inherit;
display: block;
position: relative;
padding: 0; }
.suggestions-page.rtl .suggested-artists .item .play-suggestion-song:before {
right: 30px;
left: auto; }
.suggestions-page.rtl .suggested-artists .item .cell-thumb {
right: 0;
left: auto;
top: 0; }
.suggestions-page.rtl .suggested-artists .item .upper {
margin: 0 100px 0 0;
padding: 15px 40px 15px 10px; }
.suggestions-page.rtl .suggested-artists .item .upper .genre {
margin: 0 5px 0 0;
width: auto; }
.suggestions-page.rtl .suggested-artists .item .upper .duration {
margin-right: 20px;
margin-left: 0; }
.suggestions-page.rtl .suggested-artists .item .upper .like-icon {
right: 18px;
left: auto; } }
@media (max-width: 400px) {
.suggestions-page.rtl .suggested-artists .item .play-suggestion-song {
padding: 0; }
.suggestions-page.rtl .suggested-artists .item .play-suggestion-song:before {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
top: 75px; }
.suggestions-page.rtl .suggested-artists .item .cell-thumb {
position: relative;
height: 150px;
width: 100%; }
.suggestions-page.rtl .suggested-artists .item .content {
border-radius: 0 0 2px 2px;
border-top: 0; }
.suggestions-page.rtl .suggested-artists .item .upper {
border-right: 1px solid #e4e7ed;
border-left: 0;
margin: 0; }
.suggestions-page.rtl .suggested-artists .item .lower {
border-right: 1px solid #e4e7ed;
border-left: 0; } }
.single-playlist-thumb {
width: 100% !important;
height: 100% !important; }
.double-playlist-thumb {
width: 50% !important;
height: 100% !important; }
@font-face {
font-family: "Icons";
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot);
src: url(/assets/Icons-d8668b4021e9922fc9c2cd538bcdadfe.eot?#iefix) format("eot"), url(/assets/Icons-ed68885b06a155555b7c6296d862ccfd.woff) format("woff"), url(/assets/Icons-81e1ed4c78f4a206c9a369afc3468a8a.ttf) format("truetype"), url(/assets/Icons-1e81fbe7f9dea2acc4d8c46d6cac8cfe.svg#Icons) format("svg"); }
.icon:before {
font-family: "Icons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
text-decoration: none;
text-transform: none; }
.icon-icn_01_cans:before {
content: "\E001"; }
.icon-icn_02_mic:before {
content: "\E002"; }
.icon-icn_03_darrow:before {
content: "\E003"; }
.icon-icn_04_play:before {
content: "\E004"; }
.icon-icn_05_bin:before {
content: "\E005"; }
.icon-icn_06_add:before {
content: "\E006"; }
.icon-icn_07_tick:before {
content: "\E007"; }
.icon-icn_08_edit:before {
content: "\E008"; }
.icon-icn_09_fb:before {
content: "\E009"; }
.icon-icn_10_twitter:before {
content: "\E00A"; }
.icon-icn_11_insta:before {
content: "\E00B"; }
.icon-icn_12_globe:before {
content: "\E00C"; }
.icon-icn_13_music:before {
content: "\E00D"; }
.icon-icn_14_image:before {
content: "\E00E"; }
.icon-icn_15_camera:before {
content: "\E00F"; }
.icon-icn_16_user:before {
content: "\E010"; }
.icon-icn_17_speech:before {
content: "\E011"; }
.icon-icn_18_cog:before {
content: "\E012"; }
.icon-icn_19_links:before {
content: "\E013"; }
.icon-icn_20_crop:before {
content: "\E014"; }
.icon-icn_21_heart:before {
content: "\E015"; }
.icon-icn_22_play:before {
content: "\E016"; }
.icon-icn_23_share:before {
content: "\E017"; }
.icon-icn_24_fbalt:before {
content: "\E018"; }
.icon-icn_25_twitteralt:before {
content: "\E019"; }
.icon-icn_26_google:before {
content: "\E01A"; }
.icon-icn_27_tumblr:before {
content: "\E01B"; }
.icon-icn_28_mail:before {
content: "\E01C"; }
.icon-icn_29_tickalt:before {
content: "\E01D"; }
.icon-icn_30-back:before {
content: "\E01E"; }
.icon-icn_31-reorder:before {
content: "\E01F"; }
.icon-icn_32-reorderalt:before {
content: "\E020"; }
.share-widget .embed-panel .embed-textarea {
height: inherit; }
/*
.donate-page {
&.rtl {
direction: rtl;
}
}
*/
.body-content {
-webkit-transition: -webkit-transform 200ms ease-in-out;
transition: -webkit-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }
.random-play-wrapper {
position: absolute;
width: 550px;
height: calc(100vh - 85px);
top: 44px;
left: 0;
-webkit-transform: translateX(-550px);
transform: translateX(-550px);
background: #202227;
z-index: 100;
-webkit-transition: -webkit-transform 200ms ease-in-out, box-shadow 200ms ease;
-webkit-transition: box-shadow 200ms ease, -webkit-transform 200ms ease-in-out;
transition: box-shadow 200ms ease, -webkit-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, box-shadow 200ms ease;
transition: transform 200ms ease-in-out, box-shadow 200ms ease, -webkit-transform 200ms ease-in-out;
color: #b5bdc9; }
.ie9 .random-play-wrapper {
margin-left: -550px; }
.random-play-wrapper:before {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(32, 34, 39, 0)), color-stop(70%, rgba(32, 34, 39, 0.9)));
background: -webkit-linear-gradient(top, rgba(32, 34, 39, 0) 0, rgba(32, 34, 39, 0.9) 70%);
background: linear-gradient(to bottom, rgba(32, 34, 39, 0) 0, rgba(32, 34, 39, 0.9) 70%);
height: 90px;
width: 100%;
position: absolute;
bottom: 120px;
left: 0;
z-index: 100;
pointer-events: none;
content: ''; }
.random-play-wrapper * {
box-sizing: border-box; }
.openRandom .random-play-wrapper {
-webkit-transform: translateX(0);
transform: translateX(0);
box-shadow: 27px 0px 27px -17px rgba(0, 0, 0, 0.8); }
.random-play-wrapper .header {
font-size: 14;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
background: #282c35;
display: block;
padding: 25px 40px 25px 60px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
position: relative; }
.random-play-wrapper .header:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\E012";
color: #616670;
position: absolute;
font-size: 14px;
top: 25px;
left: 39px; }
.random-play-wrapper .filter-label {
font-size: 12px;
margin: 0 0 20px 0; }
.random-play-wrapper .filter-wrapper {
padding: 25px 40px;
height: calc(100% - 190px); }
.random-play-wrapper .filter-wrapper .filter-inner {
zoom: 1;
margin-left: -50px;
height: 100%; }
.random-play-wrapper .filter-wrapper .filter-inner:before,
.random-play-wrapper .filter-wrapper .filter-inner:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.random-play-wrapper .filter-wrapper .filter-inner:after {
clear: both; }
.random-play-wrapper .filter-wrapper .filter-col {
display: inline-block;
float: left;
padding: 0 0 30px 50px;
width: 50%;
height: 100%; }
.random-play-wrapper .filter-wrapper .filter-list {
padding: 0 0 50px 0;
overflow: auto;
height: 100%; }
.random-play-wrapper .filter-wrapper .btn {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-size: 13px;
width: calc(100% - 80px);
position: absolute;
bottom: 30px;
z-index: 200;
padding: 11px 20px;
height: 50px;
text-align: center; }
.random-play-wrapper input[type="checkbox"] {
display: none; }
.random-play-wrapper input[type="checkbox"] + label {
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
position: relative;
cursor: pointer;
display: block;
height: 40px;
width: 100%;
border: 1px solid transparent;
background: #1d1f22;
display: inline-block;
border-radius: 2px; }
.random-play-wrapper input[type="checkbox"] + label span {
position: absolute;
top: 12px;
left: 20px;
color: #b5bdc9;
width: calc(100% - 20px); }
.random-play-wrapper input[type="checkbox"] + label:hover {
background: #15161a; }
.random-play-wrapper input[type="checkbox"]:hover + label {
background: #15161a; }
.random-play-wrapper input[type="checkbox"]:checked + label {
background: #15161a; }
.random-play-wrapper input[type="checkbox"]:checked + label span:after {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\E01D";
font-size: 7px;
position: absolute;
right: 15px;
top: 4px;
color: #3d63a3; }
.random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span {
left: 40px;
width: calc(100% - 40px); }
.random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span:before {
background-image: url(/assets/bg/sprites/flag_sprite-4c34e1320c5db1967115464c59f7ce6c.png);
background-repeat: no-repeat;
position: absolute;
left: -26px;
top: 2px;
width: 20px;
height: 11px;
content: ''; }
.random-play-wrapper .filter-list.by-country #afghanistan + label span:before {
background-position: 0 0; }
.random-play-wrapper .filter-list.by-country #algeria + label span:before {
background-position: 0 -11px; }
.random-play-wrapper .filter-list.by-country #bahrain + label span:before {
background-position: 0 -22px; }
.random-play-wrapper .filter-list.by-country #egypt + label span:before {
background-position: 0 -33px; }
.random-play-wrapper .filter-list.by-country #iran + label span:before {
background-position: 0 -44px; }
.random-play-wrapper .filter-list.by-country #iraq + label span:before {
background-position: 0 -55px; }
.random-play-wrapper .filter-list.by-country #jordan + label span:before {
background-position: 0 -66px; }
.random-play-wrapper .filter-list.by-country #kurdistan + label span:before {
background-position: 0 -77px; }
.random-play-wrapper .filter-list.by-country #kuwait + label span:before {
background-position: 0 -88px; }
.random-play-wrapper .filter-list.by-country #lebanon + label span:before {
background-position: 0 -99px; }
.random-play-wrapper .filter-list.by-country #lybia + label span:before {
background-position: 0 -110px; }
.random-play-wrapper .filter-list.by-country #libya + label span:before {
background-position: 0 -110px; }
.random-play-wrapper .filter-list.by-country #mauritania + label span:before {
background-position: 0 -121px; }
.random-play-wrapper .filter-list.by-country #morocco + label span:before {
background-position: 0 -132px; }
.random-play-wrapper .filter-list.by-country #oman + label span:before {
background-position: 0 -143px; }
.random-play-wrapper .filter-list.by-country #pakistan + label span:before {
background-position: 0 -154px; }
.random-play-wrapper .filter-list.by-country #palestine + label span:before {
background-position: 0 -165px; }
.random-play-wrapper .filter-list.by-country #qatar + label span:before {
background-position: 0 -176px; }
.random-play-wrapper .filter-list.by-country #saudi_arabia + label span:before {
background-position: 0 -187px; }
.random-play-wrapper .filter-list.by-country #somalia + label span:before {
background-position: 0 -198px; }
.random-play-wrapper .filter-list.by-country #sudan + label span:before {
background-position: 0 -209px; }
.random-play-wrapper .filter-list.by-country #syria + label span:before {
background-position: 0 -220px; }
.random-play-wrapper .filter-list.by-country #tunisia + label span:before {
background-position: 0 -231px; }
.random-play-wrapper .filter-list.by-country #turkey + label span:before {
background-position: 0 -242px; }
.random-play-wrapper .filter-list.by-country #unaffiliated + label span:before {
background-position: 0 -253px; }
.random-play-wrapper .filter-list.by-country #united-arab-emirates + label {
font-size: 12px; }
.random-play-wrapper .filter-list.by-country #united-arab-emirates + label span:before {
background-position: 0 -264px; }
.random-play-wrapper .filter-list.by-country #united_states + label span:before {
background-position: 0 -275px; }
.random-play-wrapper .filter-list.by-country #yemen + label span:before {
background-position: 0 -286px; }
.random-play-wrapper .jspTrack {
background: none; }
.random-play-wrapper .jspVerticalBar {
border: none;
right: -10px;
top: 5px; }
.random-play-wrapper .jspDrag {
border: none;
background: #2b2e33;
border-radius: 10px;
width: 5px;
box-shadow: none; }
html[lang="ar"].openRandom .random-play-wrapper {
-webkit-transform: translateX(0);
transform: translateX(0); }
html[lang="ar"] .random-play-wrapper {
-webkit-transform: translateX(-550px);
transform: translateX(-550px); }
html[lang="ar"] .random-play-wrapper .header {
padding: 25px 60px 25px 40px; }
html[lang="ar"] .random-play-wrapper .header:before {
left: auto;
right: 39px; }
html[lang="ar"] .random-play-wrapper .filter-label {
padding: 0 10px 0 0; }
html[lang="ar"] .random-play-wrapper input[type="checkbox"] + label span {
right: 20px;
left: auto; }
html[lang="ar"] .random-play-wrapper input[type="checkbox"]:checked + label {
background: #15161a; }
html[lang="ar"] .random-play-wrapper input[type="checkbox"]:checked + label span:after {
left: 15px;
right: auto; }
html[lang="ar"] .random-play-wrapper .filter-wrapper .filter-list {
padding-left: 10px !important; }
html[lang="ar"] .random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span {
right: 40px;
left: auto;
padding-right: 20px; }
html[lang="ar"] .random-play-wrapper .filter-list.by-country input[type="checkbox"] + label span:before {
right: -26px;
left: auto; }
html[lang="ar"] .jspPane {
padding: 0 0 50px 0 !important; }
html[lang="ar"] .jspVerticalBar {
right: auto; }
.random-trigger {
position: absolute;
left: 0;
width: 10px;
height: 10px;
background: #fff;
z-index: 100;
cursor: pointer; }
.toggle-random-settings {
position: absolute;
right: 15px;
top: 13px;
width: 12px;
height: 12px;
padding: 2px;
overflow: visible !important;
text-align: center; }
.toggle-random-settings:before {
font-family: "Icons";
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
content: "\E012";
color: #b5bdc9;
text-shadow: 0 -1px 0 #232b37;
position: absolute;
font-size: 10px; }
.toggle-random-settings:after {
-webkit-transition: top 200ms ease, opacity 200ms ease;
transition: top 200ms ease, opacity 200ms ease;
position: absolute;
top: -23px;
right: 4px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 4.5px 0 4.5px;
border-color: #202227 transparent transparent transparent;
opacity: 0;
content: ''; }
.openRandom .toggle-random-settings:after {
-webkit-transition: top 200ms 200ms ease, opacity 200ms 200ms ease;
transition: top 200ms 200ms ease, opacity 200ms 200ms ease;
opacity: 1;
top: -13px; }
.toggle-random-settings:hover {
background: none !important; }
.toggle-random-settings:hover:before {
color: #d2d7df; }
.toggle-random-settings:hover .tooltip {
display: block; }
@media (min-width: 600px) {
.openRandom .body-content {
-webkit-transform: translateX(550px);
transform: translateX(550px); }
.openRandom html[lang="ar"] .body-content {
-webkit-transform: translateX(-550px);
transform: translateX(-550px); }
.openRandom .ie9 .body-content {
position: relative;
margin-left: 550px; }
.openRandom html[lang="ar"] .ie9 .body-content {
margin-left: -550px; } }
@media (max-width: 767px) {
.random-play-wrapper .filter-wrapper .btn {
bottom: 50px; }
.toggle-random-settings:before {
top: 11px; }
.toggle-random-settings:after {
right: 10px; }
.openRandom .toggle-random-settings:after {
top: -14px; } }
@media (max-width: 600px) {
.random-play-wrapper {
display: none; } }
.ar #primary-header .header-upper .inner.clearfix {
float: left; }
.ar #primary-header .header-upper .number-band-track-info-u .title {
margin: 0 5px 0 0; }
.ar #primary-header .header-upper .number-band-track-info-u .number-of-bands-icon {
margin: 0 3px 0 5px; }
.ar #primary-header .header-upper .number-band-track-info-u .number-of-tracks-icon {
margin: 0 3px 0 5px; }
#primary-header {
height: auto;
font-size: 6.25%;
box-shadow: none; }
#primary-header .header-upper .tagline,
#primary-header .header-upper .number-band-track-info-u {
font-size: 13px; }
#primary-header .nav-wrapper-upper .secondary-nav li {
font-size: 13px; }
#primary-header .header-upper {
font-size: 10px;
background: #2b2f35;
line-height: 1;
font-weight: bold;
overflow: hidden;
height: 30px;
padding: 0 0 0 15px;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; }
#primary-header .header-upper span {
display: inline-block; }
#primary-header .header-upper .inner {
display: inline-block; }
#primary-header .nav-container {
position: relative; }
#primary-header .tagline {
font-size: 11px;
display: inline-block;
float: left;
color: #6c747c;
margin: 0 5px 0 0;
font-weight: bold;
padding: 10px 0 5px; }
#primary-header .number-band-track-info-u {
font-size: 11px;
display: inline-block;
float: left;
color: #6f777e;
padding: 9px 15px 5px; }
#primary-header .number-band-track-info-u span {
float: left; }
#primary-header .number-band-track-info-u span:not(.number-of-bands-icon):not(number-of-tracks-icon):not(.title) {
color: #c6c9ce; }
#primary-header .number-band-track-info-u span.title {
color: #6f777e;
margin: 0 0 0 5px; }
#primary-header .number-of-bands-icon {
background: url(/assets/header/mic-da8386a49a401141616d33937bd979e0.svg) no-repeat left top;
margin: 0 3px 0 0; }
#primary-header .number-of-tracks-icon {
margin: 0 3px 0 15px;
background: url(/assets/header/music-efa52fdfab79173ba51ac73a5dec2f90.svg) no-repeat left top; }
#primary-header .nav-wrapper-upper {
display: inline-block;
float: right;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; }
#primary-header .nav-wrapper-upper ul {
margin: 0;
padding: 0; }
#primary-header .nav-wrapper-upper li {
display: inline-block;
float: left;
font-size: 11px;
margin: 0 0 0 15px; }
#primary-header .nav-wrapper-upper a {
color: #838d9b; }
#primary-header .nav-wrapper-upper a:hover {
color: #9fa7b2; }
#primary-header .secondary-nav,
#primary-header .social-nav,
#primary-header .extension-wrapper,
#primary-header .lang-switch {
display: inline-block;
float: left;
position: relative;
padding-right: 15px; }
#primary-header .secondary-nav:after,
#primary-header .social-nav:after,
#primary-header .extension-wrapper:after,
#primary-header .lang-switch:after {
position: absolute;
right: 0;
top: -10px;
height: 40px;
width: 1px;
background: #414751;
content: ''; }
#primary-header .secondary-nav {
padding: 9px 15px 5px 0; }
#primary-header .secondary-nav a {
color: #c6c9ce; }
#primary-header .social-nav {
padding: 9px 15px 5px 0; }
#primary-header .social-nav ul {
padding: 0;
margin: 0; }
#primary-header .social-nav li span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
#primary-header .social-nav path {
-webkit-transition: fill 200ms;
transition: fill 200ms; }
#primary-header .social-nav a path {
fill: #fff; }
#primary-header .social-nav a:hover path {
fill: #bec3cb; }
#primary-header .extension-wrapper {
font-size: 10px;
font-size: 10rem;
text-transform: uppercase;
padding: 0 15px; }
#primary-header .extension-wrapper a {
display: inline-block;
float: left;
padding: 10px 0 9px 25px;
background-size: 15px;
color: #c6c9ce;
display: inline-block;
margin: 1px 0 0 0; }
#primary-header .extension-wrapper a.firefox {
background: url(/assets/header/firefox-4a74357795a206a906013b195ee061dd.png) no-repeat left top 7px;
background-size: 15px; }
#primary-header .extension-wrapper a.chrome {
background: url(/assets/header/chrome-14ee435e93dc0339b32f4750f4da1843.png) no-repeat left top 7px;
background-size: 15px; }
#primary-header .lang-switch {
font-weight: normal; }
#primary-header .lang-switch .locale {
font-size: 11px;
display: inline-block;
padding: 10px 15px 5px !important;
color: #fff;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; }
#primary-header .lang-switch .locale.ar {
font-size: 18px;
padding: 6px 15px 5px !important;
font-family: 'ArialRoundedMT', Helvetica, Arial; }
#primary-header .lang-switch .locale:hover {
color: #cfd5dc; }
#primary-header .header-lower {
background: #333942;
padding: 0 15px;
height: 45px; }
#primary-header .logo-mideast-tunes-u {
display: inline-block;
float: left;
padding: 10px 0;
display: inline-block; }
#primary-header .logo-mideast-tunes-u span {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
#primary-header .header-top-nav-u {
display: inline-block;
float: left;
font-size: 14px;
font-weight: bold;
margin: 0 0 0 30px;
font-family: "proxima_nova_semibold", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; }
#primary-header .header-top-nav-u li {
display: inline-block;
float: left;
margin: 0 0 0 25px; }
#primary-header .header-top-nav-u li:first-child {
margin: 0; }
#primary-header .header-top-nav-u a {
color: #dee4ec;
padding: 14px 0;
display: inline-block;
position: relative; }
#primary-header .header-top-nav-u a:after {
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #5195ef;
opacity: 0;
content: ''; }
#primary-header .header-top-nav-u a.active:after,
#primary-header .header-top-nav-u a:hover:after {
opacity: 1; }
#primary-header .header-top-nav-u:after {
content: none; }
#primary-header .nav-admin-wrapper {
display: inline-block;
float: right;
padding: 10px 0 9px; }
#primary-header .nav-admin-wrapper .butn {
font-size: 11px;
margin: 0 0 0 5px;
font-family: 'ArialRoundedMT', Helvetica, Arial; }
#primary-header .nav-admin-wrapper .butn span {
text-shadow: none; }
#primary-header .nav-admin-wrapper .iphone-app-button .phone-icon {
background: url(/assets/header/phone-icon-f716bfd20f8c6a4e83397710dbea90b5.png) no-repeat center; }
#primary-header .nav-admin-wrapper .butn.user-admin {
font-size: 11px;
color: #dee4ec;
border: 0;
padding: 8px 25px 8px 40px;
background-repeat: no-repeat;
background-position: left center;
border: 1px solid #17191d;
position: relative;
top: -1px;
color: #fff;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid #17191d;
background: #17191d;
background: -webkit-linear-gradient(top, #1c1f23 0%, #16181b 100%);
background: linear-gradient(to bottom, #1c1f23 0%, #16181b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1f23', endColorstr='#16181b',GradientType=0 ); }
#primary-header .nav-admin-wrapper .butn.user-admin span {
display: inline-block;
float: left;
position: absolute;
left: 1px;
top: 1px;
height: calc(100% - 2px);
width: 30px; }
#primary-header .nav-admin-wrapper .butn.user-admin:after {
position: absolute;
width: 0;
height: 0;
right: 7px;
top: 10px;
border-style: solid;
border-width: 4.5px 0 4.5px 5px;
border-color: transparent transparent transparent #3f444d;
content: '';
-webkit-transition: border-color 200ms;
transition: border-color 200ms; }
#primary-header .nav-admin-wrapper .butn.user-admin:hover {
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: #2a2f36; }
#primary-header .nav-admin-wrapper .butn.user-admin:hover:after {
border-color: transparent transparent transparent #4d525b; }
#primary-header .header-user-info-wrapper {
display: inline-block;
float: right; }
#primary-header .header-user-info-is-admin {
display: inline-block;
float: left; }
@media (min--moz-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
#primary-header .nav-admin-wrapper .iphone-app-button .phone-icon {
/* on retina, use image that's scaled by 2 */
background-image: url(/assets/header/phone-icon@2x-f0846aa6200a94adf4a83a7644625703.png);
background-size: 8px 13px; } }
@media (max-width: 900px) {
#primary-header .logo-mideast-tunes-u svg {
width: 40px; }
#primary-header .logo-mideast-tunes-u .hide-small {
display: none; }
#primary-header .header-top-nav-u {
margin: 0 0 0 10px; }
#primary-header .extension-wrapper {
display: none; } }
@media (max-width: 769px) {
#primary-header .menu-icon {
top: 13px; }
#primary-header .secondary-nav,
#primary-header .social-nav,
#primary-header .extension-wrapper,
#primary-header .lang-switch {
display: none; }
#primary-header .header-upper {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background: none;
position: absolute;
top: 46px;
height: 35px;
text-align: center;
padding: 5px 0 0 0;
z-index: 1;
border-bottom: 1px solid #000;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.25);
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33000000', EndColorStr='#00000000'); }
#primary-header .header-upper .inner {
display: inline-block; } }
@media (max-width: 430px) {
#primary-header .logo-mideast-tunes-u svg {
width: auto; }
#primary-header .logo-mideast-tunes-u .hide-small {
display: block; }
#primary-header .header-top-nav-u {
display: none; }
#primary-header .header-upper .tagline {
display: none; } }
@media (max-width: 370px) {
#primary-header .header-upper {
text-align: center; }
#primary-header .header-upper .tagline {
display: none; }
#primary-header .header-upper .number-band-track-info-u {
float: none; } }
.search__container.mosaic-meta-filter {
display: inline-block;
float: right;
height: 31px; }
@media only screen and (max-width: 359px) {
.search__container.mosaic-meta-filter {
float: left;
margin-top: 17px; } }
.mosaic-search-tools {
width: calc(100% - 341px); }
@media only screen and (max-width: 1280px) {
.mosaic-search-tools {
width: calc(100% - 234px); } }
.ar .mosaic-search-tools {
width: calc(100% - 437px); }
@media only screen and (max-width: 1280px) {
.ar .mosaic-search-tools {
width: calc(100% - 307px); } }
@media only screen and (max-width: 945px) {
.ar .mosaic-search-tools {
width: 100%; } }
.mosaic-artist-search-input:focus {
outline: none;
border: 0 !important;
box-shadow: none; }
.mosaic-search-results {
background-color: #ebf0f7; }
.mosaic-search-results-scroll-container {
bottom: 42px;
width: 325px; }
.mosaic-search-results-scroll-container.search-results--bottom {
bottom: 0;
top: 25px; }
.mosaic-search-results-scroll-container.search-results--mobile {
top: -11px; }
.search__results--empty {
width: 325px;
height: 183px;
border-radius: 2px;
background: #f4f4fa; }
.search__results--empty .search__results-image {
display: block;
width: 59px;
height: 58px;
margin: 0 auto;
padding-top: 41px; }
.search__results--empty .search__results-label {
margin-top: 10px;
font-family: 'proxima_nova_semibold';
font-size: 14px;
text-align: center;
color: #bdc1c7; }
.cancel-search-icon {
width: 16px;
height: 16px;
background-color: #1d1f22;
background-image: url(/assets/search-abort-sign-7c173a96d66825c8765eb7bae89da27b.png);
background-size: 16px; }
.search__entry {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 325px;
height: 55px;
background: #f4f4fa;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.search__entry:hover {
background: #ebecf2; }
.search-entry__image {
display: inline-block;
width: 41px;
margin: 0 10px; }
.search-entry__name {
overflow: hidden;
max-width: 260px;
font-size: 13px;
font-weight: bold;
white-space: nowrap;
color: #1f5db6;
text-overflow: ellipsis; }
.search-entry__info,
.search-entry__song-info {
display: inline-block;
width: 260px;
height: 30px; }
.search-entry__song-info {
margin: 0 10px; }
.search-entry__details {
overflow: hidden;
width: 260px;
margin-top: 2px;
font-size: 11px;
white-space: nowrap;
color: #737d8d;
text-overflow: ellipsis; }
.search-entry__genres {
display: inline-block;
overflow: hidden;
max-width: 158px;
margin-right: 4px;
white-space: nowrap;
text-overflow: ellipsis; }
.search-entry__country {
display: inline-block;
overflow: hidden; }
.search-location-icon {
display: inline-block;
overflow: hidden;
width: 11px;
height: 13px;
margin-right: 2px;
background-image: url(/assets/location-icon-ece41284b40d685303d9c6427f507bd1.png);
background-position: 0;
background-size: 11px 13px; }
.search__see-all-results {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 48px;
background: #ebecf2;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
@media only screen and (max-width: 960px) {
.mosaic-filter-popular-options {
left: -31px; } }
.artists-filter-panel__container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 64px;
padding-left: 28px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.artists-filter-panel__container .filter-entries-container {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 15px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.artists-filter-panel__container .filter-entries-container .filter-panel__genres-label,
.artists-filter-panel__container .filter-entries-container .filter-panel__countries-label {
margin-right: 8px;
font-size: 11px;
color: #b8bdcd; }
.filter-panel__results-label {
display: inline-block;
margin-right: 22px;
font-size: 18px;
color: #b8bdcd; }
.filter-panel__filter-entry {
display: inline-block;
margin-right: 5px;
background: #2f353c;
border: 1px solid #424a56;
box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0);
border-radius: 100px;
min-width: 58px;
height: 22px; }
.filter-panel__filter-entry .filter-entry__name {
display: inline-block;
float: left;
margin: 5px 10px 0;
font-size: 11px;
color: #b8bdcd;
opacity: .6; }
.filter-panel__filter-entry .filter-entry__remove-icon {
display: inline-block;
float: right;
width: 8px;
height: 8px;
margin: 7px 6px 0 0;
background-image: url(/assets/filter-remove-c56751a39ff802d140ec4f9ae8378eb9.png);
cursor: pointer; }
/*
*/