/*___ DOCUMENT ___*/
html { overflow: hidden; /*overflow-y: auto;*/ }
html, body { position: relative; height: 100%; font-family: 'PT Sans Narrow', sans-serif; background: #ffffff; color: #FFF; margin: 0; }
a, a:active, a:visited, a:hover { color: #f00; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
.left { float: left; display: inline-block; }
.right { float: right; display: inline-block; }
/* BEGIN CLEAR FIX */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/* BEGIN CLEAR FIX */
/*___ SPOTIFY STYLES ___*/
.button { font-family: Lucida Grande, Tahoma, Arial; }
.button:hover { color: #000000 !important; text-decoration: none; }
.button.icon .shuffle { position: relative; top: 2px; background: url('../img/sprite.png') -220px -40px; margin-right: 5px; }
.button.icon .fb { position: relative; top: 2px; width: 9px; background: url('../img/sprite.png') -253px -270px; margin-right: 5px; }
.throbber div { background: url('../img/sprite.png') }
/*___ LOADING SCREEN ___*/
#splash, #error { position: absolute; background: #f4f4f4; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 10000; }
#error { display: none; padding-top: 100px; color: #000; }
#error h1 { color: #000; font-weight: bold; }
#offline { position: absolute; color: #ffffff; background: #232323; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 20000; display: none; }
#offline div { display: inline-block; font-size: 16px; color: #f4f4f4; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -175px; }
/*___ TOP BAR ___*/
div.top-bar { position: absolute; width: 100%; height: 33px; top: 0px; background: #171717; color: #959595; font-size: 13px; line-height: 33px; }
div.top-bar div.left { padding: 0 0 0 8px; }
div.top-bar span.chart-desc { padding: 0 0 0 8px; }
div.top-bar span.chart-desc span.saveName { display: none; }
div.top-bar div.wah-social { margin: 0 8px 0 0; }
div.top-bar div.wah-social span.follow { margin: 0 8px 0 0; }
div.top-bar div.wah-social a { display: inline-block; position: relative; top: 6px; width: 21px; height: 21px; text-indent: -9999px; margin: 0 0 0 1px; background-image: url('../img/sprite.png'); background-repeat: no-repeat; cursor: pointer; }
div.top-bar div.wah-social a.tw { background-position: 0px -40px; }
div.top-bar div.wah-social a.tw:hover { background-position-x: -30px; }
div.top-bar div.wah-social a.fb { background-position: -60px -40px; }
div.top-bar div.wah-social a.fb:hover { background-position-x: -90px; }
div.top-bar div.wah-social a.tu { background-position: -120px -40px; }
div.top-bar div.wah-social a.tu:hover { background-position-x: -150px; }
/*___ FOOTER ___*/
.footer { position: fixed; left: 0; bottom: 0; width: 100%; background: #ffffff; }
.footer .left, .footer .right { margin: 15px; } .footer .right { margin-top: 20px; }
.footer .huntedLogo { display: block; height: 50px; width: 170px; background: url('../img/sprite.png') 0 -100px; }
.footer .huntedLogo:hover { background-position: -250px -100px; }
.footer .huntedLogo:after, .footer .huntedTagline:after { display: none; }
.footer .huntedTagline { display: block; height: 42px; width: 156px; }
.footer .huntedTagline .tag { display: block; height: 20px; float: right; width: 155px; background: url('../img/sprite.png') 0 -299px; text-indent: -9999px; }
.footer .huntedTagline .url { display: block; height: 20px; float: right; width: 156px; background: url('../img/sprite.png') 0 -150px; text-indent: -9999px; margin-top: 5px; }
.footer .huntedTagline:hover .url { width: px; background-position-y: -170px }
.de .footer .huntedTagline { width: 179px; }
.de .footer .huntedTagline .tag { width: 179px; background-position-y: -320px }
.nl .footer .huntedTagline { width: 210px; }
.nl .footer .huntedTagline .tag { width: 210px; background-position-y: -340px }
.fr .footer .huntedTagline { width: 270px; }
.fr .footer .huntedTagline .tag { width: 270px; background-position-y: -360px }
.es .footer .huntedTagline { width: 185px; }
.es .footer .huntedTagline .tag { width: 195px; background-position-y: -380px }
/*___ PAGING ___*/
div#pagingWrapper { position: absolute; top: 28px; left: 190px; right: 190px; height: 21px; text-align: center; }
div#paging { height: 21px; margin: 0 auto; display: inline-block; }
div#paging span { width: 21px; height: 21px; display: inline-block; float: left; text-align: center; }
div#paging span a { display:block; width: 21px; height: 21px; background: url('../img/sprite.png') no-repeat -21px -70px; text-indent: -9999px; }
div#paging span a.current { background-position-x: 0; }
div#paging span:first-child { margin-right: 2px; }
div#paging span:first-child a { background-position-x: -63px; }
div#paging span:first-child a:hover { background-position-x: -84px; }
div#paging span:first-child a:active { background-position-x: -105px; }
div#paging span:first-child a.inactive { background-position-x: -42px; }
div#paging span:last-child { margin-left: 3px; }
div#paging span:last-child a { background-position-x: -147px; }
div#paging span:last-child a:hover { background-position-x: -168px; }
div#paging span:last-child a:active { background-position-x: -189px; }
div#paging span:last-child a.inactive { background-position-x: -126px; }
.page { position: relative; top: 33px; display: none; background: #f4f4f4; border-bottom: 1px solid #e1e1e1; }
/*___ TRACK CONTAINERS ___*/
#tracks-mask { overflow: hidden; margin: 0; }
#tracks { position: absolute; top: 0; left: 0; overflow: hidden; height: 600px; margin: 0; }
/*___ CUSTOM HUNTED STYLE PLAYER - removed drop shadows, curves etc. ___*/
.sp-player.sp-player-custom { position: absolute; width: 200px; height: 200px; border: 2px solid #ffffff; }
.sp-player.sp-player-custom.hover,
.sp-player.sp-player-custom.sp-player-playing { position: absolute; width: 200px; height: 200px; border: 2px solid #e23898; }
.sp-player.sp-player-custom .sp-image { background-size: 32px; background: #323232 url('../img/spinner.gif') no-repeat 50% 45%; }
.sp-player.sp-player-custom .sp-image.sp-image-loaded { background-size: cover; height: 82%; }
.sp-player.sp-player-custom .sp-player-image { border-radius: 0; box-shadow: none; }
.sp-player.sp-player-custom .info { position: absolute; left: 0; bottom: 0; background: #000000; overflow: hidden; padding: 5px 10px; width: 100%; height: 30px; }
.sp-player.sp-player-custom .info p.track-number { color: #acacac; font-size: 24px; padding: 0; margin: 0; float: left; vertical-align: middle; line-height: 30px; }
.sp-player.sp-player-custom .info p.track-text { font-size: 11px; line-height: 12px; padding: 0 7px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sp-player.sp-player-custom .info p.track-title { margin: 2px 0 0; color: white; }
.sp-player.sp-player-custom .info p.track-title a { color: #ffffff; }
.sp-player.sp-player-custom.playing .info p.track-title a { color: #e23898; }
.sp-player.sp-player-custom.playing .info p.track-title span.is-playing { display: none; }
.sp-player.sp-player-custom .info p.track-artist { margin: 2px 0 0; color: #ccc; text-transform: uppercase; }
.sp-player.sp-player-custom .info p.track-artist a { color: #cccccc; }
.sp-player.sp-player-custom .info p.track-artist a:hover { color: #e23898; text-decoration: underline !important; }
.sp-player.sp-player-custom .sp-player-button { background: url("sp://import/img/play-button-L.png") transparent; width: 66px; height: 66px; background-position-x: -136px; bottom: 50px; }
.sp-player.sp-player-custom.sp-player-paused .sp-player-button { background-position-x: 0px;}
.sp-player.sp-player-custom.sp-player-paused .sp-player-button:hover { background-position-x: -68px;}
.sp-player.sp-player-custom .sp-player-button:hover { background-position-x: -204px;}
.sp-player.promo-item { z-index: 100; }
/* .sp-player.promo-item.sp-player-custom .sp-image { background-size: cover; background-position: top right; height: 90.9%; }*/
.sp-player.promo-item.sp-player-custom .sp-image.sp-image-loaded { background-size: cover; background-position: top right; height: 90.9%; }
.sp-player.promo-item.sp-player-custom .info p { font-size: 16px; line-height: 30px; text-transform: uppercase; font-weight: bold; display: inline-block; float: left; margin: 0; }
.sp-player.promo-item.sp-player-custom .info p.track-number { color: #e23898; margin-right: 5px; }
.promo .sp-image { cursor: pointer; height: 100%; width: 100%; background-clip: content-box; background-size: cover; }
.promo:hover { position: absolute; width: 200px; height: 200px; border: 2px solid #e23898; }
/*___ GENRE PAGE ___*/
#genre { color: #ffffff; background: #232323; width: 100%; height: 100%; padding: 20px; overflow: auto; }
div.genre { float: left; margin: 0 20px 25px 0; overflow: hidden; }
div.genre a.preview { display: block; width: 276px; height: 276px; position: relative; }
div.genre a.preview span { display: inline-block; position: absolute; width: 134px; height: 134px; background-position: center center; background-repeat: no-repeat; background-size: auto 100%; border: 4px solid #ffffff; }
div.genre a.preview span:nth-child(1) { top: 0; left: 0; }
div.genre a.preview span:nth-child(2) { top: 0; right: 0; }
div.genre a.preview span:nth-child(3) { bottom: 0; left: 0; }
div.genre a.preview span:nth-child(4) { bottom: 0; right: 0; }
div.genre a.preview div.overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/genre_overlay.png') center center; display: none; }
div.genre div.title { padding: 10px 0; }
div.genre div.left { font-size: 14px; text-transform: uppercase; }
/*___ INSTANT PLAYLIST ___*/
#artist { color: #ffffff; background: #232323; }
#artist p { text-transform: uppercase; font-weight: bold; font-size: 16px; margin-bottom: 10px; }
#artist a.button { margin-top: 10px; }
#artist .searchWrapper { padding: 20px; overflow: auto; }
#artist .searchForm { margin: 15px 0 5px 0 ; }
#artist .searchForm .artistSearchField { display: none; }
#artist .artistInputField { font-size: 50px; text-transform: uppercase; letter-spacing: -.02em; color: #ffffff; width: 650px; overflow: hidden; border: none; background: transparent; height: 50px; line-height: 50px; margin: 35px 0 40px 0; font-weight: 700; outline: none !important; font-family: 'PT Sans Narrow', sans-serif; }
#artist .searchResults { color: #ffffff; font-size: 18px; }
#artist .searchResults ol { margin: 0; padding: 0; list-style-type: none; font-size: 16px; line-height: 16px; width: 300px; text-transform: uppercase; }
#artist .searchResults li { margin-bottom: 8px; }
#artist .searchResults a:link, .searchResults a:visited { color: #ffffff; text-decoration: none; }
#artist .searchResults a:hover:not(.button), .searchResults a:active, .searchResults a:focus, .searchResults a.selected { color: #ec3495 !important; }
/*___ PERSONAL ___*/
#personal { color: #ffffff; background: #232323; padding: 50px 20px 0 50px; overflow-y: auto; }
#personal .option { width: 380px; min-height: 130px; margin: 0 100px 60px 0; float: left; }
#personal .option.end { margin-right: 0; }
#personal .option.large { margin: 0; }
#personal h2 { color: #ffffff; font-size: 40px; line-height: 40px; text-transform: uppercase; margin-bottom: 60px; font-weight: bold; }
#personal h3 { color: #ffffff; font-size: 20px; line-height: 20px; text-transform: uppercase; margin-bottom: 15px; }
#personal p { color: #999999; font-size: 16px; width: 280px; }
#personal span.pDesc { display: inline-block; width: 280px; float: left; }
#personal form { margin-top: 25px; }
#personal input[type="text"] { color: #555555; background: #333333; border: none; outline: none; width: 210px; padding: 5px 8px; font-size: 16px; }
#personal .button { padding-top: 6px; padding-bottom: 6px; margin-left: 10px; }
#personal span.pImage { display: inline-block; width: 80px; height: 80px; margin: 0 20px 20px 0; background: url('../img/sprite.png') 0px -200px; float: left; }
#personal span.pImage.facebook { background-position-x: -80px; }
#personal span.pImage.popular { background-position-x: -160px; }
#personal div.popular { margin: 0; margin-top: 20px; padding: 0; list-style-type: none; }
#personal div.popular a { width: 142px; height: 150px; float: left; border: 2px solid transparent; margin-right: 6px; }
#personal div.popular a.last { margin-right: none; }
#personal div.popular a:hover { border: 2px solid #e23898 }
#personal div.popular img { width: 100%; margin: 0; }
#personal div.popular span { display: inline-block; position: relative; top: -5px; width: 122px; padding: 8px 10px; background: #000000; color: #ffffff; font-size: 14px; text-transform: uppercase; margin: 0; }
#personal a.generate { display: inline-block; width: 180px; height: 25px; margin: 30px 20px 20px 0; background: url('../img/sprite.png') -250px -40px; float: left; text-indent: -9999em; }
#personal a.generate:hover { background-position-y: -70px; cursor: pointer; }