/* CSS RESET */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight: bold; color: #ffffff; text-transform: uppercase; font-family: BentonSansCondBlack; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* 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%; } /* GENERAL STYLES */ body { background: #e2e2e2; color: #000000; overflow: hidden; font-family: BentonSansCondRegular; } h1 { font-size: 45px; line-height: 49px; } h2 { font-size: 22px; line-height: 18px; margin-bottom: 20px; text-transform: none; } h1 span,h2 span,h3 span,h4 span,h5 span,h6 span { color: #006690; } p { } #footer a[href^='http:']::after { content: url('../img/icon-external.png'); } /* Restyling */ .sp-list { max-height: none; } .sp-list > div { font-family: 'BentonSansCondMedium' !important; max-height: 800px; font-size: 12px; } .button, .sp-button { font: 12px/17px "Lucida Grande", "Tahoma", "Arial", sans-serif !important; } .button:hover, .sp-button:hover { text-decoration: none; } .sp-image { background-size: 100% 100% !important; } /* COMMON HEADER AND LOADING */ #loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222222; color: #444444; z-index: 10000; text-align: center; font-size: 12px; } #loading .content { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } #loading .throbber { height: 32px; width: 32px; background: transparent; position: relative; margin: 20px auto 0 auto; display: none; } #loading .meter { height: 20px; position: relative; background: #555; padding: 1px; width: 200px; margin: 10px auto; } #loading .meter > span { display: block; height: 100%; background-color: #333; position: relative; overflow: hidden; width: 1%; } #error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222222; color: #444444; z-index: 10001; text-align: center; font-size: 12px; display: none } #error .content { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -64px; } #header { position: fixed; width: 100%; z-index: 1000; background: #ffffff; border-bottom: 1px solid #d6d6d6; color: #444444; overflow: hidden; font-size: 14px; height: 50px; } #header .left { float: left; line-height: 50px; padding-left: 20px; } #header .left a { margin-left: 4px; position: relative; top: 7px; } #header .right { float: right; line-height: 50px; padding-right: 20px; } #header .right a { display: block; width: 53px; height: 28px; text-indent: -9999px; background: url('../img/sprite.png') no-repeat 0 -400px; margin-top: 11px; } #header .right a:hover { background-position-y: -450px; } #header .center { position: absolute; top: 0; left: 50%; width: 145px; height: 50px; text-align: center; background: url('../img/headerbg.png') no-repeat center center; background-size: 100% auto; } #header .center h1 { display: inline-block; font-size: 20px; line-height: 50px; color: #444444; padding: 0 10px; background: #ffffff; font-family: BentonSansCondBold; text-transform: none; } #footer { background: #232323; color: #ffffff; font-size: 12px; clear: both; text-align: center; padding: 7px 0 5px 0; width: 100%; box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.4); } #footer a { color: #ffffff; text-decoration: none; } #footer a.sprite { margin-left: 5px; position: relative; top: -1px; } /* ARTIST LISTING PAGE STYLING */ #artists { overflow-y: auto; height: 100%; } #artists .scroll { position: absolute; top: 50px; left: 0; width: 100%; overflow-y: auto; } #artists .scroll .inner { max-width: 800px; margin: 20px auto 0 auto; padding-top: 510px; /*background: url('../img/home_background.png');*/ } #artists .col { display: block; float: left; margin: 0 19px 19px 0 !important; position: relative; width: 180px; height: 180px; } /* #artists .col.last { margin-right: 0 !important; } */ #artists .col a { display: block; text-decoration: none; } #artists .col .graphic { position: absolute; top: 0; left: 0; width: 180px; height: 180px; background-position: 50% 50%; background-size: cover; border: 1px solid #ffffff; } #artists .col .overlay { position: absolute; top: 0; left: 0; background: #006690; color: #ffffff; width: 150px; height: 150px; padding: 15px; z-index: 1000; opacity: 0; overflow: hidden; -webkit-transition-property:opacity; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: linear; border: 1px solid #ffffff; } #artists .col .overlay:hover { opacity: 1; } #artists .col .overlay h2 { font-size: 22px; color: #ffffff; line-height: 22px; padding-bottom: 10px; font-family: BentonSansCondBlack; text-transform: uppercase; margin-bottom: 5px; background: url('../img/sprite.png') no-repeat 100% 100%; } #artists .col .overlay .blurb { padding-top: 5px; font-size: 14px; } #artists .col .comingsoon { position: absolute; top: -1px; right: -5px; z-index: 7000; height: 68px; width: 68px; background: url('../img/sprite.png') no-repeat -220px -160px; } #artists .col .shadow { position: absolute; top: 1px; left: 1px; width: 100%; height: 100%; background: rgba(0,0,0,0.6) } /* #artists .col.about .overlay { opacity: 1; }*/ #artists .col.about .overlay:hover { cursor: default; } #artists .feature { position: absolute; top: 0; left: 0; height: 510px; width: 100%; margin: 0; background: #1e1e1e } #artists .feature .graphic { max-width: 780px; height: 464px; margin: 20px auto 0 auto; border-radius: 7px; position: relative; left: -10px; } #artists .feature .gradient { width: 100%; height: 100%; background: -webkit-linear-gradient(left, rgba(45,45,45,1) 0%,rgba(24,24,24,0) 80%,rgba(0,0,0,0) 100%); border-radius: 7px; } #artists .feature .wrap { padding: 30px 0 0 20px; width: 350px; } #artists .feature h3, #artists .feature h2 { text-transform: uppercase; margin-left: 34px } #artists .feature h3 { font-family: BentonSansCondBold; color: #acacac; font-size: 22px; line-height: 22px; margin-bottom: 10px; } #artists .feature h2 { font-family: BentonSansCondBlack; color: #ffffff; font-size: 42px; line-height: 42px; margin-bottom: 10px; letter-spacing: -1px; } #artists .feature h2 a { color: #ffffff; } #artists .feature h2 a:hover { text-decoration: none; } #artists .feature a.rm { display: inline-block; font-family: BentonSansCondBold; font-size: 15px; background: #acacac; margin: 12px 0 0 34px; padding: 5px 11px 3px 11px; color: #ffffff; border-radius: 4px; } #artists .feature a.rm:hover { background: #006690; text-decoration: none; } #artists .feature p { font-family: 'BentonSansCondMedium'; color: #c2c2c2; font-size: 18px; line-height: 20px; margin-left: 34px; } #artists .album_wrap { font-family: BentonSansCondBold; color: #ffffff; display: none; font-size: 13px; line-height: 15px; text-transform: uppercase; text-align: center; position: relative; z-index: 20; } #artists .album_wrap a { color: #ffffff; } #artists .album_wrap a:hover { text-decoration: none; } #artists .album_wrap span { color: #acacac } /* ARTIST PAGE STYLING */ #singleArtistPage { height: 100%; width: 100%; position: relative; background: #000000; } #singleArtistPage ul.gallery { position: absolute; top: 0; left: 0; z-index: 1; width: 10000px; } #singleArtistPage ul.gallery li { float: left; } #singleArtistPage div.photo-left { position: fixed; top: 50%; left: 20px; z-index: 2; } #singleArtistPage div.photo-right { position: fixed; top: 50%; right: 20px; z-index: 2; } #singleArtistPage div.galleryHider { position: absolute; top: 0; left: 0; width: 10000px; height: 10000px; background: #000000; z-index: 5; } #singleArtistPage .goback { display: block; position: fixed; top: 10px; right: 20px; z-index: 4; text-indent: -9999px; } #singleArtistPage .gohome { position: absolute; top: 30px; right: 20px; } #singleArtistPage .left { position: absolute; top: 0; left: 0; z-index: 10; padding: 0; width: 280px; height: 100%; background: #bfbfbf; font-size: 18px; overflow-y: auto; word-wrap: break-word; } #singleArtistPage .left h1 { color: #363636; font-size: 42px; line-height: 42px; } #singleArtistPage .left .scroll { padding: 25px; } #singleArtistPage .left .blurb { color: #363636; font-size: 18px; margin-top: 10px; line-height: 22px; font-family: BentonSansCondRegular; } #singleArtistPage .left ul { border-top: 1px solid #959595; margin-top: 20px; font-size: 17px; } #singleArtistPage .left ul li { border-bottom: 1px solid #959595; } #singleArtistPage .left ul li a, #singleArtistPage .left ul li.active ul li a { display: block; padding: 7px 0 5px 0; text-transform: uppercase; color: #363636; text-decoration: none; } #singleArtistPage .left ul li a:hover, #singleArtistPage .left ul li.active a, #singleArtistPage .left ul li.active ul li.active a { color: #ffffff; font-family: 'BentonSansCondMedium'; } #singleArtistPage .left ul ul { margin: 0; border: none; display: none; } #singleArtistPage .left ul li.active ul { display: block; } #singleArtistPage .left ul ul li { margin: 0 0 2px 0; border: none; padding-left: 10px; } #singleArtistPage .left .social_links { margin-top: 10px; } #singleArtistPage .left .social_links a { margin-right: 5px; } #singleArtistPage .rightWrapper { position: absolute; top: 0; right: 0; /*left: 330px;*/ z-index: 10; height: 100%; overflow-y: auto; background-color: #000000; background-position: 100% 0; background-repeat: no-repeat; background-size: auto 100%; color: #ffffff; font-size: 14px; } #singleArtistPage .right { padding: 25px; padding-right: 180px; } #singleArtistPage .right h1 { font-family: BentonSansCondBold; font-size: 22px; text-transform: none; margin-bottom: 10px; } #singleArtistPage .right h2 { margin-bottom: 30px; } #singleArtistPage .right .artistReturn { position: fixed; top: 10px; right: 20px; z-index: 5; } #singleArtistPage #biography, #singleArtistPage .right .discography, #singleArtistPage .right .top_albums, #singleArtistPage .right #playlists { display: none; } /* paging */ div.pagingDots { clear: both; min-height: 20px; margin: 0 0 20px 0; text-align: center; max-width: 450px; } div.pagingDots a { display: inline-block; width: 20px; height: 20px; background: url('../img/sprite.png') -40px -380px; text-indent: -9999px; } div.pagingDots a.active, div.pagingDots a:hover { background-position: -60px -380px; } div.pagingDots a.goLeft, div.pagingDots a.goLeft.inactive:hover { background-position: -20px -380px; } div.pagingDots a.goLeft:hover { background-position: 0 -380px; } div.pagingDots a.goRight, div.pagingDots a.goRight.inactive:hover { background-position: -80px -380px; } div.pagingDots a.goRight:hover { background-position: -100px -380px; } /* track listing */ #singleArtistPage .plWrap { /*background: rgba(34,34,34,0.85);*/ background: url('../img/overlay.png'); padding: 20px; border-radius: 5px; max-width: 410px; margin-bottom: 20px; } #singleArtistPage .sp-list > div { background-color: #222222 !important; background-image: none; } #singleArtistPage .sp-list .sp-item:nth-child(odd) { background-color: #292929; background-image: none; } #singleArtistPage .sp-list .sp-track-playing, .sp-list:focus .sp-item.sp-track-selected { background: #1a1a1a !important; color: #006690 !important; } #singleArtistPage .sp-list .sp-track-playing .sp-icon-star:not(:hover) { background-image: url("../img/mainlist-row-playing-marker.png"); } #singleArtistPage .sp-list .sp-track.sp-track-playing:not(.sp-track-selected) :-webkit-any(.sp-track-field-duration,.sp-track-field-number) { color: #006690 !important; } #singleArtistPage .sp-list:focus .sp-item.sp-track-selected { background-color: transparent; color: #006690; } #singleArtistPage .sp-list .sp-track-playing.sp-track-selected, #singleArtistPage .sp-list .sp-track-selected { background: #006690 !important; color: #ffffff !important; background-image: none; } /* BIO */ #singleArtistPage #biography p, #singleArtistPage .right .top_albums p { font-size: 18px; line-height: 22px; max-width: 410px; margin-bottom: 10px; color: #c2c2c2; } #singleArtistPage #biography p:nth-child(2) { font-family: BentonSansCondBold; color: #ffffff; } /*#singleArtistPage #top_albums .album_wrap p:first-child*/ /* DISCOGRAPHY */ #singleArtistPage #discography { } #singleArtistPage #discography, #singleArtistPage div#top_albums { overflow-y: auto; height: 100%; } #singleArtistPage #discography .col, #singleArtistPage div#top_albums .col { float: left; margin: 0 20px 20px 0; } #singleArtistPage .albumMeta { width: 180px; height: 50px; text-align: center; } #singleArtistPage .albumMeta h3 { max-height: 40px; overflow: hidden; } #singleArtistPage .albumMeta a { color: #ffffff; } #singleArtistPage .albumMeta a:hover { text-decoration: none; } #singleArtistPage #discography .sp-player { width: 180px; height: 180px; border: 1px solid #ffffff; } #singleArtistPage #discography .sp-player-image { border-radius: 0 !important; box-shadow: none !important; } /* PLAYLISTS */ #singleArtistPage #playlists div.wrapper { overflow: hidden; position: relative; background: white; width: 100%; height: 100%; } #singleArtistPage #playlists div.player { float: left; margin-right: 10px; display: inline-block; } #singleArtistPage #playlists .player .sp-player { width: 180px; height: 180px; margin-right: 10px; border: 1px solid #ffffff; } #singleArtistPage #playlists div.playlistMeta { } #singleArtistPage #playlists div.playlistMeta .info { float: left; display: inline-block; } #singleArtistPage #playlists div.playlistMeta h2 { font-family: BentonSansCondBold; color: #ffffff; font-size: 23px; line-height: 24px; margin: 0; text-transform: uppercase; } #singleArtistPage #playlists div.playlistMeta h3 { color: #aaaaaa; font-size: 20px; margin: 0 0 5px 0; } #singleArtistPage #playlists div.playlistMeta span.desc { display: inline-block; color: #acacac; font-size: 19px; line-height: 22px; margin: 0 0 10px 0; font-family: 'BentonSansCondMedium'; } #singleArtistPage #playlists div.playlistMeta .info a { font-weight: bold; font-family: BentonSansCondBold; } #singleArtistPage #playlists div.tracklist { margin-top: 20px; overflow: hidden; clear: both; } #singleArtistPage #playlists .plWrap { max-width: 100%; } /* TOP ALBUMS */ #singleArtistPage div#top_albums { position: relative; } #singleArtistPage div#top_albums ul { list-style: none; padding: 0; margin: 0; width: 400px; height: 240px; overflow: hidden; } #singleArtistPage div#top_albums ul li { width: 180px; height: 180px; } #singleArtistPage div#top_albums .album_wrap { } #singleArtistPage div#top_albums .album_wrap .centre { text-align: center; } #singleArtistPage div#top_albums .album_wrap .centre h2, #singleArtistPage div#top_albums .album_wrap .centre h3 { font-family: BentonSansCondBold; font-size: 22px; line-height: 26px; color: #ffffff; text-transform: uppercase; margin: 0; } #singleArtistPage div#top_albums .album_wrap .centre h3 { color: #acacac; margin-bottom: 20px; } #singleArtistPage div#top_albums .album_wrap a:not(.sp-button) { color: #ffffff; } #singleArtistPage div#top_albums .album_wrap a:hover { text-decoration: none; } #singleArtistPage div#top_albums .album_wrap .gloss { padding: 20px; background: url('../img/overlay.png'); border-radius: 7px; } #singleArtistPage div#top_albums .album_wrap p { font-family: 'BentonSansCondMedium'; font-size: 15px; margin: 0 0 10px 0; } #singleArtistPage div#top_albums .tracklist { margin-top: 15px; } span.read-more a:hover { color: #006690 !important; text-decoration: none; } /* FEATURE CAROUSEL */ div.carousel { height: 220px; position: relative; } div.carousel div.carArrow { position: absolute; top: 55%; left: 50%; margin: -11px 0 0 -170px; width: 11px; height: 21px; background: url('../img/sprite.png') no-repeat -140px -400px; cursor: pointer; } div.carousel div.carArrow:hover { background-position: -140px -450px; } div.carousel div.carArrow.carRight { margin-left: 160px; background-position: -160px -400px; } div.carousel div.carArrow.carRight:hover { background-position: -160px -450px; } div.carousel ul { position: absolute; left: 50%; list-style: none; padding: 0; margin: 0; margin-left: -90px !important; height: 250px !important; width: 180px !important; } div.carousel ul li { height: 180px; width: 180px; cursor: pointer; } div.carousel ul li .player { height: 100%; width: 100%; } div.carousel ul li .sp-player { height: 100%; width: 100%; border: 1px solid #fff !important; margin-bottom: 15px; } div.carousel ul li.roundabout-moveable-item:not(.roundabout-in-focus) .sp-player button { display: none !important; } div.carousel ul li .t, div.carousel ul li .y { visibility: hidden; display: block; color: #ffffff; text-align: center; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: BentonSansCondBold; font-size: 13px; text-transform: uppercase; } div.carousel ul li .y { color: #acacac; } div.carousel ul li.roundabout-in-focus { cursor: auto; } div.carousel ul li.roundabout-in-focus .t, div.carousel ul li.roundabout-in-focus .y { visibility: visible; } /* top_tracks mods */ #top_albums div.carousel { } #top_albums div.carousel ul { margin-left: -140px !important; width: 280px !important; } #top_albums div.carousel div.carArrow { width: 17px; height: 35px; background-position: -100px -400px; margin-left: 0; left: 5%; } #top_albums div.carousel div.carArrow.carRight { width: 17px; height: 35px; background-position: -120px -400px; right: 5%; left: auto } #top_albums div.carousel div.carArrow:hover, #top_albums div.carousel div.carArrow.carRight:hover { background-position-y: -450px; } /* PLAYLISTS PAGE STYLING */ #playlists { } #playlists .scroll { position: absolute; top: 50px; left: 0; width: 100%; height: 500px; overflow-y: auto; background: #e2e2e2; } #playlists .inner { width: 800px; margin: 20px auto; } #playlists ul.artistList { list-style-type: none; width: 165px; float: left; border-top: 1px solid #c2c2c2; font-size: 12px; margin-right: 20px; font-family: 'BentonSansCondMedium'; text-transform: uppercase; } #playlists ul.artistList li { border-bottom: 1px solid #c2c2c2; } #playlists ul.artistList li a:link, #playlists ul.artistList li a:visited { display: block; color: #222222; padding: 7px 0px 6px 10px; } #playlists ul.artistList li a:active, #playlists ul.artistList li a:hover { color: #006690; text-decoration: none; } #playlists ul.artistList li a.current { color: #ffffff !important; background: #006690 !important; font-family: BentonSansCondBold; } #playlists .playlists { width: 615px; float: left; } #playlists.mainPage div.playlist { overflow: hidden; margin-bottom: 20px; background: #ffffff; padding: 20px; border-radius: 5px; } #playlists div.playlist div.playlistLeft { width: 200px; float: left; margin-right: 20px; } #playlists div.playlist div.playlistRight { float: left; width: 355px; } #playlists div.playlist div.playlistRight h2 { font-family: BentonSansCondBold; color: #000000; font-size: 26px; margin: 5px 0 10px 0; text-transform: uppercase; } #playlists div.playlist div.playlistRight span.desc { display: block; color: #888; font-size: 19px; margin: 0 0 10px 0; font-family: 'BentonSansCondMedium'; } #playlists div.playlist div.playlistRight a { margin-bottom: 15px; } .tlToggle { font-size: 13px; background: #292929; text-align: center; padding: 6px; color: #ffffff; } .tlToggle:hover { color: #006690; cursor: pointer; } .tlToggle span { position: relative; top: -1px; margin-left: 2px; } #playlists.mainPage .sp-list .sp-track-playing .sp-icon-star:not(:hover) { background-image: url("../img/mainlist-row-playing-marker.png"); } #playlists.mainPage .sp-list .sp-track.sp-track-playing:not(.sp-track-selected) :-webkit-any(.sp-track-field-duration,.sp-track-field-number) { color: #006690 !important; } #playlists.mainPage .sp-list .sp-track-playing.sp-track-selected, #playlists.mainPage .sp-list .sp-track-selected { background: #006690 !important; color: #ffffff !important; background-image: none; } #playlists.mainPage .sp-list .sp-track.sp-track-playing:not(.sp-track-selected) :-webkit-any(.sp-track-field-name,.sp-track-field-artist,.sp-track-field-number) { color: #006690 !important; background: transparent; } #playlists.mainPage .sp-list.sp-light .sp-track-playing { background-image: none; text-shadow: none; } #playlists.mainPage .sp-list.sp-light > div { background-color: #EDEDED; background-image: none; } #playlists.mainPage .sp-list .sp-item:nth-child(odd) { background: #e2e2e2 } #playlists.mainPage .tlToggle { font-size: 13px; background: #e2e2e2; text-align: center; padding: 6px; color: #222; } #playlists.mainPage .tlToggle:hover { color: #006690; cursor: pointer; } /* ABOUT PAGE STYLING */ #about { width: 765px; margin: 0 auto; } #about h2 { padding: 20px 0; color: #006690; } #about .sprite-logo-ongrey { text-indent: -9999px; float: left; margin: 0 20px 30px 0; } #about p { margin: 0 0 15px 0; font-size: 14.5px; line-height: 22px; } /* SPRITES */ .sprite { display: inline-block; background: url('../img/sprite.png'); text-indent: -9999px; } .sprite-logo-ongrey { width: 86px; height: 64px; background-position: 0 0; } .sprite-legacyof { width: 178px; height: 30px; background-position: -86px 0; } .sprite-smallfb { width: 23px; height: 23px; background-position: -250px -400px; } .sprite-smalltw { width: 23px; height: 23px; background-position: -220px -400px; } .sprite-smallfb:hover, .sprite-smalltw:hover { background-position-y: -450px; } .sprite-galleryright { width: 49px; height: 49px; background-position: -100px -220px; } .sprite-galleryleft { width: 49px; height: 49px; background-position: 0px -220px; } .sprite-galleryright:hover, .sprite-galleryleft:hover, .sprite-galleryright.active, .sprite-galleryleft.active { background-position-y: -300px; } .sprite-galleryright.inactive, .sprite-galleryleft.inactive { background-position-y: -220px !important; } .sprite-greyfb { width: 28px; height: 28px; background-position: -340px -400px; } .sprite-greytw { width: 28px; height: 28px; background-position: -310px -400px; } .sprite-greyweb { width: 28px; height: 28px; background-position: -280px -400px; } .sprite-greyfb:hover, .sprite-greytw:hover, .sprite-greyweb:hover { background-position-y: -450px; } .sprite-delete { width: 60px; height: 60px; background-position: -200px 0; opacity: 0.5; } .sprite-delete:hover { opacity: 1; } .sprite-delete:active { width: 60px; height: 60px; background-position: -200px -60px; } .sprite-down { width: 10px; height: 6px; background-position: 100% 0; } .tlToggle:hover .sprite-down { width: 10px; height: 6px; background-position: 100% -20px; } .sprite-down-light { width: 10px; height: 6px; background-position: 100% -40px; } .tlToggle:hover .sprite-down-light { width: 10px; height: 6px; background-position: 100% -20px; } //.sprite- { width: px; height: px; background-position: px px; } /* FONTS */ .BentonSansCondRegular { font-family: BentonSansCondRegular; } .BentonSansCondBold { font-family: BentonSansCondBold; } .BentonSansCondBlack { font-family: BentonSansCondBlack; } .BentonSansCondMedium { font-family: 'BentonSansCondMedium'; }