* {padding:0;margin:0} p {clear:both;padding:0;margin:0} html {overflow:-moz-scrollbars-vertical;font:11px Arial, Helvetica, sans-serif;-webkit-text-size-adjust:none;} html, body {height:100%;min-height:100%;width:100%;} body {background-image:URL(/images/bg_body.jpg);background-color:#000;background-position:50% 0;background-repeat:no-repeat;color:#fff;} img {border:0} .regulator {display:block;clear:both;line-height:0;font-size:0;height:0} a {outline:0} .container {width:100%;height:100%;min-height:100%} .container .header {width:100%;height:185px;border-bottom:4px solid rgba(0, 0, 0, 0.8);background:URL(/images/bg_header.jpg) 50% 0 no-repeat} .container .header .inner {position:relative;width:990px;height:185px;background:URL(/images/bg_header_logo.png) 50% 0 no-repeat;margin:0 auto} .container .header .inner .menu {position:absolute;top:118px;left:17px;width:380px;height:185px} .container .header .inner .menu a {display:block;float:left;height:31px} .container .header .inner .menu a span {display:none} .container .header .inner .menu a.homebtn {width:58px;background:URL(/images/mainbtns/1_home.png)} .container .header .inner .menu a.musicalbtn {width:99px;background:URL(/images/mainbtns/2_demusical.png)} .container .header .inner .menu a.gallerybtn {width:75px;background:URL(/images/mainbtns/3_gallery.png)} .container .header .inner .menu a.infobtn {width:49px;background:URL(/images/mainbtns/4_info.png)} .container .header .inner .menu a.educatiebtn {width:82px;background:URL(/images/mainbtns/5_educatie.png)} .container .header .inner .menu a:hover {background-position:0 -35px} .container .header .inner .menu a.act {background-position:0 -70px} .container .header .inner .menu a.showsub {background-position:0 -105px} .container .header .inner .subs {position:absolute;display:none;left:17px;top:149px;z-index:100} .container .header .inner .subs a {display:block;clear:both;width:363px;height:36px;padding:0;background:URL(/images/bg_subs.png);text-decoration:none;text-transform:uppercase;color:#646567;font:12px Times New Roman, serif} .container .header .inner .subs a.act {color:#1a171b;font-weight:bold} .container .header .inner .subs a:hover {background-position:0 -39px;color:#1a171b} .container .header .inner .subs a span {display:block;float:left} .container .header .inner .subs a span.img {padding:4px 6px} .container .header .inner .subs a span.title {width:323px;height:28px;margin-top:4px} .container .header .inner .subs a:hover span.title {background-position:0 -28px} .container .header .inner .subs a.act span.title {background-position:0 -56px} .container .header .inner .subs .shadow {clear:both;width:362px;height:3px;background:URL(/images/bg_subs_shadow.png);font-size:0;line-height:0} .container .header .inner .logobtn {position:absolute;top:3px;left:417px;width:155px;height:175px} .container .header .inner .quotes {position:absolute;top:0;left:638px;width:360px;height:185px} .container .header .inner .quotes .quote {position:absolute;top:0;left:0;width:360px;height:185px} .container .header .inner .quotes .quotesbtn {display:block;width:360px;height:185px} .container .header .inner .quotes .quotesbtn { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */ zoom: 1; } .container .header .inner .quotes .quotesbtn:hover {background-position:0 -185px} .container .content {width:990px;margin:0 auto} .container .content .leftContent {float:left} .container .content .leftContent .video {width:635px;height:387px;padding:4px;margin:32px 0 0 12px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .latestnews {margin:10px 0 0 12px;width:635px} .container .content .leftContent .latestnews .title {width:635px;border:4px solid #000;background:URL(/images/bg_regpage_title.jpg)} .container .content .leftContent .latestnews .newsitem {margin-top:4px;width:643px;height:134px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .latestnews .newsitem .img {float:left;width:134px;height:129px;padding:5px 0 0 4px;margin:0;cursor:pointer} .container .content .leftContent .latestnews .newsitem .desc {float:left;position:relative;width:490px;height:134px;padding:0;margin:0;overflow:hidden} .container .content .leftContent .latestnews .newsitem .desc .title {background:none;width:490px;height:7px;overflow:hidden;border:0;padding:13px 0;margin:0;font-size:14px;line-height:18px;color:#fa9600;cursor:pointer} .container .content .leftContent .latestnews .newsitem .desc .txt {width:480px;font-size:13px;line-height:18px;padding-top:0} .container .content .leftContent .latestnews .newsitem .desc .txt a {color:#fa9600;text-decoration:none;white-space:nowrap;} .container .content .leftContent .latestnews .newsitem .desc .txt a:hover {color:#fff} .container .content .leftContent .latestnews .newsitem .desc .share {position:absolute;left:1px;top:102px} .container .content .leftContent .latestnews .newsitem .desc .share .deelvia {display:block;float:left;width:60px;height:16px;background:URL(/images/bg_deel_via.png)} .container .content .leftContent .latestnews .newsitem .desc .share a {float:left;display:block;width:18px;height:16px} .container .content .leftContent .latestnews .newsitem .desc .share a.fbbtn {background:URL(/images/deel_via/deel_via_facebook.png)} .container .content .leftContent .latestnews .newsitem .desc .share a.twbtn {background:URL(/images/deel_via/deel_via_twitter.png)} .container .content .leftContent .latestnews .newsitem .desc .share a.hybtn {background:URL(/images/deel_via/deel_via_hyves.png)} .container .content .leftContent .latestnews .newsitem .desc .share a.gpbtn {background:URL(/images/deel_via/deel_via_google.png)} .container .content .leftContent .latestnews .newsitem .desc .share a:hover {background-position:0 -19px} .container .content .leftContent .homeImgs {margin:10px 0 0 12px;width:635px;padding:8px 0 8px 8px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .homeImgs a {display:block;float:left;width:211px;height:115px} .container .content .leftContent .homeImgs a img {width:205px;height:115px} .container .content .leftContent .regpage {width:635px;min-height:859px;padding:4px;margin:32px 0 0 12px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .musicpage {width:635px;padding:4px;margin:32px 0 0 12px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .musicpage.littleMargin {margin-top:10px} .container .content .leftContent .regpage .title {background:URL(/images/bg_regpage_title.jpg)} .container .content .leftContent .regpage .img {margin-top:4px} .container .content .leftContent .regpage .desc, .container .content .leftContent .musicpage .desc {padding:12px 12px 20px 12px;font-size:13px;line-height:18px} .container .content .leftContent .regpage .desc .header1 {color:#fa9600;font-weight:bold} .container .content .leftContent .regpage .desc a {font-style:italic;color:#fa9600;text-decoration:none} .container .content .leftContent .regpage .desc a:hover {color:#fff} .container .content .leftContent .regpage .desc ul, .container .content .leftContent .regpage .desc ol {padding:13px 0 13px 13px} .container .content .leftContent .regpage .desc .noColor {color:#fff;font-style:normal} .container .content .leftContent .regpage .desc .noColor:hover {color:#fa9600} .container .content .leftContent .musicpage form {padding:12px 12px 20px 12px;font-size:13px;line-height:18px} .container .content .leftContent .musicpage .title {color:#fa9600} .container .content .leftContent .musicpage form label {float:left;width:143px;padding-top:11px} .container .content .leftContent .musicpage form input[type=text], .container .content .leftContent .musicpage form textarea {float:left;width:450px;height:31px;font:12px Arial, Helvetica, sans-serif;margin:5px 0 0 0;padding:0 9px;border:0;background:rgba(255, 255, 255, 0.15);color:#fff} .container .content .leftContent .musicpage form textarea {resize:none;width:592px;height:150px;padding:9px} .container .content .leftContent .musicpage form a {text-transform:uppercase;color:#fff;text-decoration:none} .container .content .leftContent .musicpage form a:hover {color:#fa9600} .container .content .leftContent .musicpage form .counter {float:right} .container .content .leftContent .crew {padding:10px 0 0 6px} .container .content .leftContent .crew .crewbtn {position:relative;float:left;width:311px;height:110px;cursor:pointer} .container .content .leftContent .crew .crewbtn .img {float:left;width:107px;padding:0;margin:0} .container .content .leftContent .crew .crewbtn .img img {width:100px;height:100px} .container .content .leftContent .crew .crewbtn .desc {float:left;width:201px;height:75px;padding:4px 0 0 0} .container .content .leftContent .crew .crewbtn .desc .role {color:#fa9600} .container .content .leftContent .crew .crewbtn .desc .name {color:#fff;clear:both} .container .content .leftContent .crew .crewbtn .twitter {display:block;position:absolute;left:1px;top:83px;left:108px;height:16px;padding-right:20px;color:#fff;text-decoration:none;background:URL(/images/deel_via/deel_via_twitter.png) top right no-repeat} .container .content .leftContent .crew .crewbtn .twitter span {display:block;padding-top:1px} .container .content .leftContent .crew .crewbtn .twitter:hover {background-position:right -19px} .container .content .leftContent .crew .crewbtn .twitter span {displasy:none} .container .content .leftContent .crew .crewbtn .linkbtn {display:none} .container .content .leftContent .crew .crewbtn:hover .desc .role {color:#fff} .container .content .leftContent .crewDetail {} .container .content .leftContent .crewDetail .crewHeader {position:relative;padding:6px 6px 0 6px} .container .content .leftContent .crewDetail .crewHeader .img {float:left;width:157px} .container .content .leftContent .crewDetail .crewHeader .desc {float:left;width:210px;padding:11px 0 0 0;line-height:18px;} .container .content .leftContent .crewDetail .crewHeader .role {color:#fa9600} .container .content .leftContent .crewDetail .crewHeader .name {color:#fff;clear:both} .container .content .leftContent .crewDetail .crewHeader .twitter {display:block;position:absolute;top:102px;left:163px;height:16px;padding-right:20px;color:#fff;text-decoration:none;background:URL(/images/deel_via/deel_via_twitter.png) top right no-repeat} .container .content .leftContent .crewDetail .crewHeader .twitter span {display:block;padding-top:1px} .container .content .leftContent .crewDetail .crewHeader .twitter:hover {background-position:right -19px} .container .content .leftContent .crewDetail .crewHeader .backbtn {position:absolute;top:19px;right:20px;font-size:13px;color:#fff;text-decoration:none} .container .content .leftContent .crewDetail .crewHeader .backbtn:hover {color:#fa9600} .container .content .leftContent .crewDetail .crewDesc {clear:both;width:615px;padding:12px 10px 0 10px;font-size:13px;line-height:18px} .container .content .leftContent .crewDetail .crewDesc .header1 {color:#fa9600;font-weight:bold} .container .content .leftContent .crewDetail .crewDesc a {font-style:italic;color:#fa9600;text-decoration:none} .container .content .leftContent .crewDetail .crewDesc a:hover {color:#fff} .container .content .leftContent .crewDetail .crewDesc ul, .container .content .leftContent .crewDetail .crewDesc ol {padding:13px 0 13px 13px} .container .content .leftContent .partners {width:643px;padding:10px 0 0 0;margin-left:-4px} .container .content .leftContent .partners .header1 {color:#fa9600;font-size:13px;padding:0 0 13px 16px} .container .content .leftContent .partners .partnerbtn {clear:both;display:block;width:635px;margin:0 0 15px 4px;cursor:pointer} .container .content .leftContent .partners .partnerbtn .img {float:left;display:block;width:209px;height:70px;margin:0;background:rgba(255, 255, 255, 0.04)} .container .content .leftContent .partners .partnerbtn .desc {float:left;display:block;width:400px;padding:0 5px;color:#fff;background:none} .container .content .leftContent .partners .partnerbtn:hover .img {background:rgba(255, 255, 255, 0.08)} .container .content .leftContent table {margin-top:10px} .container .content .leftContent table .song td {padding:2px 0;border-bottom:1px solid #101212} .container .content .leftContent table .song td.index {width:45px;text-align:center} .container .content .leftContent table .song td.name {width:430px} .container .content .leftContent table td.time, .container .content .leftContent table td.price, .container .content .leftContent table td.artist, .container .content .leftContent table .song td.album, .container .content .leftContent table .song td.view-in-itunes {display:none} .container .content .leftContent .vidYT {width:635px;height:387px;padding:4px;margin:32px 0 0 12px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .thumbsYT {width:623px;margin:10px 0 0 12px;padding:20px 0 0 20px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .thumbsYT .vidthumb {display:block;width:155px;height:124px;float:left;text-decoration:none} .container .content .leftContent .thumbsYT .vidthumb .img {display:block;width:138px;height:77px;overflow:hidden} .container .content .leftContent .thumbsYT .vidthumb .img img {width:138px;margin-top:-12px} .container .content .leftContent .thumbsYT .vidthumb .tit {display:block;clear:both;width:130px;height:24px;padding:6px 4px;line-height:14px;overflow:hidden;color:#fff} .container .content .leftContent .thumbsYT .vidthumb.act .tit, .container .content .leftContent .thumbsYT .vidthumb:hover .tit {color:#fa9600} .container .content .leftContent .regpage form {padding:12px 0 20px 12px;font-size:13px;line-height:18px} .container .content .leftContent .regpage form .header1 {color:#fa9600;padding-bottom:8px} .container .content .leftContent .regpage form label {float:left;width:103px;padding-top:11px} .container .content .leftContent .regpage form input[type=text] {float:left;width:492px;font-size:12px;height:31px;margin:5px 0 0 0;padding:0 9px;border:0;background:rgba(255, 255, 255, 0.15);color:#fff} .container .content .leftContent .regpage form .signupbtn {color:#fa9600;text-decoration:none} .container .content .leftContent .regpage form .signupbtn:hover {color:#fff} .container .content .leftContent .news {width:635px;padding:4px;margin:28px 0 0 12px} .container .content .leftContent .news .newsitem {margin-bottom:4px;width:643px;height:134px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .news .newsitem .img {float:left;width:134px;height:129px;padding:5px 0 0 4px;margin:0;cursor:pointer} .container .content .leftContent .news .newsitem .desc {float:left;position:relative;width:490px;height:134px;padding:0;margin:0;overflow:hidden} .container .content .leftContent .news .newsitem .desc .title {background:none;width:490px;height:7px;overflow:hidden;border:0;padding:13px 0;margin:0;font-size:14px;line-height:18px;color:#fa9600;cursor:pointer} .container .content .leftContent .news .newsitem .desc .txt {width:480px;font-size:13px;line-height:18px;padding-top:0} .container .content .leftContent .news .newsitem .desc .txt a {color:#fa9600;text-decoration:none;white-space:nowrap;} .container .content .leftContent .news .newsitem .desc .txt a:hover {color:#fff} .container .content .leftContent .news .newsitem .desc .share {position:absolute;left:1px;top:102px} .container .content .leftContent .news .newsitem .desc .share .deelvia {display:block;float:left;width:60px;height:16px;background:URL(/images/bg_deel_via.png)} .container .content .leftContent .news .newsitem .desc .share a {float:left;display:block;width:18px;height:16px} .container .content .leftContent .news .newsitem .desc .share a.fbbtn {background:URL(/images/deel_via/deel_via_facebook.png)} .container .content .leftContent .news .newsitem .desc .share a.twbtn {background:URL(/images/deel_via/deel_via_twitter.png)} .container .content .leftContent .news .newsitem .desc .share a.hybtn {background:URL(/images/deel_via/deel_via_hyves.png)} .container .content .leftContent .news .newsitem .desc .share a.gpbtn {background:URL(/images/deel_via/deel_via_google.png)} .container .content .leftContent .news .newsitem .desc .share a:hover {background-position:0 -19px} .container .content .leftContent .newsDetail {} .container .content .leftContent .newsDetail .newsHeader {position:relative;padding:6px 6px 0 6px} .container .content .leftContent .newsDetail .newsHeader .img {float:left;width:127px;height:129px;} .container .content .leftContent .newsDetail .newsHeader .desc {float:left;width:400px;padding:11px 0 0 5px;line-height:18px} .container .content .leftContent .newsDetail .newsHeader .date {color:#fa9600;font-size:13px} .container .content .leftContent .newsDetail .newsHeader .tit {color:#fa9600;clear:both;font-size:16px;line-height:18px} .container .content .leftContent .newsDetail .newsHeader .share {position:absolute;left:139px;top:102px} .container .content .leftContent .newsDetail .newsHeader .share .deelvia {display:block;float:left;width:60px;height:16px;background:URL(/images/bg_deel_via.png)} .container .content .leftContent .newsDetail .newsHeader .share a {float:left;display:block;width:18px;height:16px} .container .content .leftContent .newsDetail .newsHeader .share a.fbbtn {background:URL(/images/deel_via/deel_via_facebook.png)} .container .content .leftContent .newsDetail .newsHeader .share a.twbtn {background:URL(/images/deel_via/deel_via_twitter.png)} .container .content .leftContent .newsDetail .newsHeader .share a.hybtn {background:URL(/images/deel_via/deel_via_hyves.png)} .container .content .leftContent .newsDetail .newsHeader .share a.gpbtn {background:URL(/images/deel_via/deel_via_google.png)} .container .content .leftContent .newsDetail .newsHeader .share a:hover {background-position:0 -19px} .container .content .leftContent .newsDetail .newsHeader .backbtn {position:absolute;top:19px;right:20px;font-size:13px;color:#fff;text-decoration:none} .container .content .leftContent .newsDetail .newsHeader .backbtn:hover {color:#fa9600} .container .content .leftContent .newsDetail .newsDesc {clear:both;width:615px;padding:12px 10px 0 10px;font-size:13px;line-height:18px} .container .content .leftContent .newsDetail .newsDesc .header1 {color:#fa9600;font-weight:bold} .container .content .leftContent .newsDetail .newsDesc a {font-style:italic;color:#fa9600;text-decoration:none} .container .content .leftContent .newsDetail .newsDesc a:hover {color:#fff} .container .content .leftContent .newsDetail .newsDesc ul, .container .content .leftContent .newsDetail .newsDesc ol {padding:13px 0 13px 13px} .container .content .leftContent .newsDetail .newsDesc img, .container .content .leftContent .newsDetail .newsDesc object {margin-left:-4px} .container .content .leftContent .photoHolder {width:635px;height:387px;padding:4px;margin:32px 0 0 12px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .photoHolder .img {position:relative;width:635px;height:356px} .container .content .leftContent .photoHolder .img li {position:absolute;left:0;top:0;width:635px;height:387px;text-align:center;list-style-type:none} .container .content .leftContent .photoHolder .btns {height:27px;margin-top:4px;position:relative} .container .content .leftContent .photoHolder .btns a {display:block;position:absolute;width:44px;height:27px} .container .content .leftContent .photoHolder .btns a.prevbtn {left:0px;background:URL(/images/pijl_links.png)} .container .content .leftContent .photoHolder .btns a.nextbtn {right:0;background:URL(/images/pijl_rechts.png)} .container .content .leftContent .photoHolder .btns a:hover {background-position:0 -27px} .container .content .leftContent .photoHolder .btns span.tit {display:block;position:absolute;left:44px;width:547px;height:20px;text-align:center;color:#fa9600;font-size:12px;padding-top:7px;} .container .content .leftContent .albums {width:622px;padding:20px 0 20px 20px;margin:10px 0 0 12px;min-height:363px;background:rgba(0, 0, 0, 0.8)} .container .content .leftContent .albums a {display:block;float:left;width:155px;height:104px;text-decoration:none;text-align:center} .container .content .leftContent .albums a img {max-width:138px;max-height:77px} .container .content .leftContent .albums a .desc {display:block;width:138px;height:19px;overflow:hidden;text-align:center;font-size:12px;padding-top:8px;color:#fff} .container .content .leftContent .albums a:hover .desc, .container .content .leftContent .albums a .desc.act {color:#fa9600} .container .content .rightContent {float:left;width:305px;margin:32px 0 0 10px} .container .content .rightContent .orderPanel {clear:both;width:305px;height:87px;padding:4px;background:rgba(0, 0, 0, 0.8) URL(/images/bg_orderpanel.jpg) 4px 4px no-repeat} .container .content .rightContent .orderPanel .orderticketsbtn {display:block;width:305px;height:87px;background:URL(/images/btn_ordertickets.png) no-repeat} .container .content .rightContent .orderPanel .orderticketsbtn:hover {background-position:0 -87px} .container .content .rightContent .bookxPanel {clear:both;width:305px;height:73px;padding:4px;margin-top:10px;background:rgba(0, 0, 0, 0.8) URL(/images/bg_bookxpanel.jpg) 4px 4px no-repeat} .container .content .rightContent .bookxPanel .bookGroupbtn {display:block;width:305px;height:73px;background:URL(/images/btn_bookgroups.png) no-repeat} .container .content .rightContent .bookxPanel .bookGroupbtn:hover {background-position:0 -73px} .container .content .rightContent .mp3Panel {clear:both;width:305px;height:87px;padding:4px;margin-top:10px;background:rgba(0, 0, 0, 0.8) URL(/images/bg_bookxpanel.jpg) 4px 4px no-repeat} .container .content .rightContent .mp3Panel .vrijMetMijbtn {display:block;width:305px;height:87px;background:URL(/images/btn_vrijmetmij.jpg) no-repeat} .container .content .rightContent .mp3Panel a.vrijMetMijbtn:hover {background-position:0 -87px} .container .content .rightContent .tweetsPanel {clear:both;width:305px;height:283px;padding:4px;margin-top:10px;background:rgba(0, 0, 0, 0.8)} .container .content .rightContent .tweetsPanel .titleBar {width:305px;height:28px;background:URL(/images/bg_titleBar.jpg)} .container .content .rightContent .tweetsPanel .titleBar.twitter {background:URL(/images/bg_titleBarTwitter.jpg)} .container .content .rightContent .tweetsPanel .titleBar .title {display:block;width:305px;height:28px;background:URL(/images/btn_tweetsTitle.png)} .container .content .rightContent .tweetsPanel .titleBar .title:hover {background-position:0 -28px} .container .content .rightContent .tweetsPanel .tweets {position:relative;overflow:hidden;height:226px;padding:9px 12px 0 12px} .container .content .rightContent .tweetsPanel .tweets ul {} .container .content .rightContent .tweetsPanel .tweets li {list-style-type:none;clear:both;display:block;font-size:12px;padding-bottom:9px} .container .content .rightContent .tweetsPanel .tweets ul .firstItem {line-height:18px} .container .content .rightContent .tweetsPanel .tweets ul .secondItem {line-height:16px} .container .content .rightContent .tweetsPanel .tweets ul .username {display:block;color:#fa9600} .container .content .rightContent .tweetsPanel .tweets ul .firstItem .username {font-size:14px} .container .content .rightContent .tweetsPanel .tweets ul .msg {display:block;font-style:italic} .container .content .rightContent .tweetsPanel .tweets ul .firstItem .msg {font-size:15px} .container .content .rightContent .tweetsPanel .tweets ul a {color:#fa9600;text-decoration:none} .container .content .rightContent .tweetsPanel .readon {clear:both} .container .content .rightContent .tweetsPanel .readon .readallTweets {display:block;float:left;width:118px;height:20px;margin-left:8px;background:URL(/images/btn_readallTweets.png)} .container .content .rightContent .tweetsPanel .readon .readallTweets:hover {background-position:0 -22px} .container .content .rightContent .tweetsPanel .readon .nextprev {float:right} .container .content .rightContent .tweetsPanel .readon .nextprev a {display:block;float:left;width:19px;height:19px;background:URL(/images/btn_arrowup.png)} .container .content .rightContent .tweetsPanel .readon .nextprev a.downbtn {background:URL(/images/btn_arrowdown.png)} .container .content .rightContent .tweetsPanel .readon .nextprev a:hover {background-position:0 -22px} .container .content .rightContent .followPanel {clear:both;width:305px;height:115px;padding:4px;margin-top:10px;background:rgba(0, 0, 0, 0.8)} .container .content .rightContent .followPanel .titleBar {width:305px;height:28px;background:URL(/images/bg_titleBar.jpg)} .container .content .rightContent .followPanel .titleBar.twitter {background:URL(/images/bg_titleBarTwitter.jpg)} .container .content .rightContent .followPanel .titleBar .title {display:block;width:305px;height:28px;background:URL(/images/btn_followUs.png)} .container .content .rightContent .followPanel .titleBar .title:hover {background-position:0 -28px} .container .content .rightContent .followPanel .tweets {padding:9px 12px 0 12px;font-size:13px;font-style:italic;line-height:17px} .container .content .rightContent .followPanel .tweets ul, .container .content .rightContent .followPanel .tweets li {list-style-type:none} .container .content .rightContent .followPanel .tweets ul {position:relative;height:80px;overflow:hidden} .container .content .rightContent .followPanel .tweets li {position:absolute;height:80px;opacity:0} .container .content .rightContent .followPanel .tweets a {color:#fa9600;text-decoration:none} .container .content .rightContent .facebookPanel {clear:both;width:305px;height:216px;padding:4px;margin-top:10px;background:rgba(0, 0, 0, 0.8)} .container .content .rightContent .merchandisePanel {clear:both;width:305px;height:87px;padding:4px;margin-top:10px;background:rgba(0, 0, 0, 0.8)} .container .content .rightContent .merchandisePanel .titleBar {width:305px;height:87px;background:URL(/images/bg_merchandisebtn.jpg)} .container .content .rightContent .merchandisePanel .titleBar .merchandisebtn {display:block;width:305px;height:87px;background:URL(/images/btn_merchandise.png)} .container .content .rightContent .merchandisePanel .titleBar .merchandisebtn:hover {background-position:0 -87px} .container .content .submenu {padding:44px 0 0 89px} .container .content .submenu a {display:block;float:left;height:20px} .container .content .submenu a span {display:none} .container .content .submenu a.newproductionsbtn {width:151px;background:URL(/images/subbtns/new_productions.png)} .container .content .submenu a.disclaimerbtn {width:99px;background:URL(/images/subbtns/disclaimer.png)} .container .content .submenu a.contactbtn {width:86px;background:URL(/images/subbtns/contact.png)} .container .content .submenu a.partnersbtn {width:83px;background:URL(/images/subbtns/partners.png)} .container .content .submenu a.persbtn {width:49px;background:URL(/images/subbtns/pers.png)} .container .content .submenu a.signupbtn {width:194px;background:URL(/images/subbtns/aanmelden_nieuwsbrief.png)} .container .content .submenu a:hover {background-position:0 -21px} .container .content .submenu a.act {background-position:0 -42px} .container .content .submenu .share {float:left;padding-left:77px;background:URL(/images/volg_ons.png) no-repeat} .container .content .submenu .share a {display:block;float:left;height:18px} .container .content .submenu .share a.fbbtn {width:22px;background:URL(/images/footer_facebook.png)} .container .content .submenu .share a.twbtn {width:22px;background:URL(/images/footer_twitter.png)} .container .content .submenu .share a.hvbtn {width:22px;background:URL(/images/footer_hyves.png)} .container .content .submenu .share a:hover {background-position:0 -21px} .container .content .partnersFooter {clear:both;width:810px;height:241px;margin:0 auto;background:URL(/images/footer_logos.png) 0 51px no-repeat} .tracklist-table {width:625px;margin-left:-4px} .tracklist-table .price, .tracklist-table .time, .tracklist-table thead, .tracklist-table .artist, .tracklist-table .view-in-itunes {display:none} .tracklist-table .index.ascending {width:20px;text-align:left} /* General warning: Beta-ish. Code could be a bit cleaner. */ .ui360, /* entire UI */ .sm2-360ui { /* canvas container */ position:relative; float:left; } .ui360, .sm2-360ui { min-width:50px; /* should always be at least this. */ min-height:50px; } .sm2-360ui { width:50px; height:50px; } .ui360, .ui360 * { vertical-align:middle; } .sm2-360ui { position:relative; display:inline-block; /* firefox 3 et al */ float:left; /* IE 6+7, firefox 2 needs this, inline-block would work with fx3 and others */ *display:inline; /* clear:left; */ } .sm2-360ui.sm2_playing, .sm2-360ui.sm2_paused { /* bump on top when active */ z-index:10; } .ui360 a { /* .sm2_link class added to playable links by SM2 */ float:left; display:inline; position:relative; color:#000; text-decoration:none; left:3px; /* slight spacing on left UI */ top:18px; /* vertical align */ text-indent:50px; /* make room for UI at left */ } .ui360 a.sm2_link { /* SM2 has now started */ text-indent:0px; /* UI now in place. */ } .ui360 a, .ui360 a:hover, .ui360 a:focus { padding:2px; margin-left:-2px; margin-top:-2px; } .ui360 a:hover, .ui360 a:focus { background:#eee; border-radius:3px; outline:none; } .ui360 .sm2-canvas { position:absolute; left:0px; top:0px; } .ui360 .sm2-timing { position:absolute; display:block; left:0px; top:0px; width:100%; height:100%; margin:0px; font:11px "helvetica neue",helvetica,monaco,lucida,terminal,monospace; color:#666; text-align:center; line-height:50px; } .ui360 .sm2-timing.alignTweak { text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */ } .ui360 .sm2-cover { position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:2; display:none; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* old-skool bug: IE 9 won't catch mouse events otherwise. /smash */ } .ui360 .sm2-360btn { position:absolute; display:block; top:50%; left:50%; /* width:22px; height:22px; margin-left:-11px; margin-top:-11px; */ /* by default, cover whole space. make smaller when playing. */ width:50px; height:50px; margin-left:-25px; margin-top:-25px; border-radius: 25px; cursor:pointer; z-index:3; } .ui360 .sm2-360data { display:inline-block; font-family:helvetica; } .sm2-inline-block .ui360 .sm2-360btn, .ui360 .sm2-360ui.sm2_playing .sm2-360btn, .ui360 .sm2-360ui.sm2_paused .sm2-360btn { /* smaller clickable button, in center */ width:22px; height:22px; margin-left:-11px; margin-top:-11px; } .ui360 .sm2-360ui.sm2_playing .sm2-cover, .ui360 .sm2-360ui.sm2_paused .sm2-cover { display:block; } /* this could be optimized a fair bit. */ .ui360, .ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn { background:transparent url(/js/soundmanager/360-button-play.png) no-reoeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABoUlEQVR42sWVu2oCQRhGU/s8gpVYJeQJNkZSbiH4QNuLlQZS21sJayGYaOEFVFDxNiremj9zig2uzk5YQpKFg8PMd75ZZle9E5Ff4e+Ll8tlQuNoPI2vUcCYOdbIxCmm9F5T0YgNMmS/LebSwWdNa7VayXq9ls1mI9vtVna7nQBj5lgjQxYHN7KY3QkiUbDf7+V4PMrpdArBHGtkyOJc3/n1mVaUUl+F5/PZSrABDi4dpmKH3QkixQEHlw5TsccZmsRCoSD1et1ajkuHqdg/HA5GKZPJCOTzeanVasYMLh2mYsXDIGAoDuG6rlSr1WCdBxrcsTIWazgrQiHS6bSRYJ3XDzeq2O/3+9Ltdm9IpVIhstmslEqlUAY36ii8ZrMpjUbjhmQyKeA4jhSLRWMGN+rhOZ1Oh8ANuVxOyuUy40hwo163RK/XeyPQbrdjgYNr/ILAYDB41Gf1wZnFAQfX+iM0HA5fxuPx+2g0Ej22QoYsDq61mGsymTxMp9NX/Sk2yJDFsRZfXpzXbDZ7WiwW3nw+9zUKGDPHGpkL5V//mn7OJyJZApyzeUS5AAAAAElFTkSuQmCC); *background-image: url(/js/soundmanager/360-button-play.png); background-repeat: no-repeat; } .ui360 { /* "fake" button shown before SM2 has started, non-JS/non-SM2 case etc. background image will be removed via JS, in threeSixyPlayer.init() */ background-position: 14px 50%; _background:transparent url(/js/soundmanager/360-button-play.gif) no-repeat 14px 50%; /* IE 6-only: special crap GIF */ } .ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn { background-position:50% 50%; _background:transparent url(/js/soundmanager/360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */ } .ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn { cursor:pointer; } .ui360 .sm2-360btn-default:hover, .ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover { background:transparent url(/js/soundmanager/360-button-play-light.png) no-repeat 50% 50%; _background:transparent url(/js/soundmanager/360-button-play.gif) no-repeat 50% 50%; cursor:pointer; } .ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover, .ui360 .sm2-360btn-playing:hover { background:transparent url(/js/soundmanager/360-button-pause-light.png) no-repeat 50% 50%; _background:transparent url(/js/soundmanager/360-button-pause-light.gif) no-repeat 50% 50%; cursor:pointer; } .ui360 .sm2-360ui.sm2_playing .sm2-timing { visibility:visible; display:none; } .ui360 .sm2-360ui.sm2_buffering .sm2-timing { visibility:hidden; display:none; } .ui360 .sm2-360ui .sm2-timing, .ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing, .ui360 .sm2-360ui.sm2_paused .sm2-timing { visibility:hidden; display:none; } .ui360 .sm2-360ui.sm2_dragging .sm2-timing, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing { /* paused + dragging */ visibility:visible; display:none; } .ui360 .sm2-360ui.sm2_playing .sm2-360btn, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover { /* don't let pause button show on hover when dragging (or paused and dragging) */ background:transparent; cursor:auto; } .ui360 .sm2-360ui.sm2_buffering .sm2-360btn, .ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover { background:transparent url(/js/soundmanager/icon_loading_spinner.gif) no-repeat 50% 50%; opacity:0.5; visibility:visible; } /* inline list style */ .sm2-inline-list .ui360, .sm2-inline-block .ui360 { position:relative; display:inline-block; float:left; _display:inline; margin-bottom:-15px; } .sm2-inline-list .ui360 { /* inline player: minor tweak, tighten spacing */ margin-right:-2px; } .sm2-inline-block .ui360 { margin-right:8px; } .sm2-inline-list .ui360 a { display:none; } /* annotations */ ul.ui360playlist { list-style-type:none; } ul.ui360playlist, ul.ui360playlist li { margin:0px; padding:0px; } div.ui360 div.metadata { display:none; } div.ui360 a span.metadata, div.ui360 a span.metadata * { /* name of track, note etc. */ vertical-align:baseline; } /* larger canvas, spectrum + EQ visualization and other items */ .ui360-vis, .ui360-vis .sm2-360ui, .sm2-inline-list .ui360-vis { /* size of the container for the circle, etc. */ width:52px; height:52px; float:left; } .ui360-vis { position:relative; /* a little extra spacing */ padding-top:1px; padding-bottom:1px; margin-bottom:-18px; /* approximate "line height" we want */ padding-left:248px; margin-left:0px; background-position:22.6% 50%; /* (~109px) initial play button position */ } .sm2-inline-list .ui360-vis { cursor:pointer } .ui360-vis a { font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace; white-space:nowrap; text-indent:0px; /* undo inline style */ top:46%; /* ehh. */ } .sm2-inline-list .ui360-vis a { line-height:256px; top:auto; } .ui360-vis .sm2-360ui { margin-left:-256px; } .ui360-vis .sm2-timing { font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace; color:#333; text-align:center; line-height:256px; text-indent:0px; display:none; } .sm2-inline-list .ui360-vis, .sm2-inline-list .ui360-vis .sm2-360ui { margin-left:0px; } .sm2-inline-list .ui360-vis { margin:8px 13px 7px 0px; padding-left:0px; background-position:50% 50%; /* initial play button position */ } .sm2-inline-list .ui360-vis .sm2-360ui { border:1px solid #eee; /* offset the border */ margin-left:-1px; margin-top:-1px; } .sm2-inline-list .ui360-vis a { position:absolute; display:inline; left:0px; bottom:0px; top:1px; width:100%; /* 2px padding in box */ height:99%; /* dumb vertical hack */ *height:256px; /* IE is dumb. */ overflow:hidden; font-size:small; font-weight:300; color:#333; margin:0px; padding:0px; line-height:488px; /* bottom vertical alignment for text */ *line-height:480px; /* IE again */ text-align:center; border-radius:0px; } .sm2-inline-list .ui360 a:hover { background-color:transparent; /* reset */ } .sm2-inline-list .ui360-vis:hover .sm2-360ui, .sm2-inline-list .ui360-vis a.sm2_link:hover, .sm2-inline-list .ui360-vis a.sm2_link:active, .sm2-inline-list .ui360-vis a.sm2_link:focus { background-color:transparent; } .sm2-inline-list .ui360-vis:hover a.sm2_link { background-color:#fafafa; *background-color:transparent; /* eh, screw IE. */ } /* Use a bigger loading image for this layout */ .ui360-vis .sm2-360btn, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn, .ui360-vis .sm2-360ui.sm2_playing .sm2-360btn { width:48px; height:48px; margin-left:-24px; margin-top:-24px; border-radius: none; } .ui360-vis, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn, .ui360-vis .sm2-360btn-default { background:transparent url(/js/soundmanager/360-button-vis-play.png) no-repeat 50% 50%; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABuVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADv7++lpaXr6+uAgIDk5OQzMzPt7e1tbW3n5+dgYGDW1tZNTU10dHQ5OTnw8PCvr6/e3t6JiYlAQEDb29vo6OgrKyuqqqrq6uq4uLjf399AQEDGxsbq6uqAgIDY2Nje3t61tbXp6enU1NTu7u7r6+vl5eXt7e2fn5/n5+fDw8Ph4eHv7+/t7e3CwsLW1tbu7u7b29vw8PDm5uYgICDp6enY2Nji4uLo6Ojm5uakpKTS0tLPz8/h4eHw8PDs7Ozj4+Pa2trg4ODx8fHT09Pk5OTPz8/S0tLBwcGmpqawsLCOjo7h4eHn5+fo6OgAAADY2NjNzc3n5+cAAADd3d3Gxsbu7u7t7e0AAADX19fl5eXi4uLf39/Hx8fn5+fs7Ozg4ODR0dHX19e4uLjv7+/z8/P09PTy8vL19fXv7+/n5+fx8fH29vbs7Ozq6urm5ubo6Ojw8PDu7u7p6enr6+sAAAB/f3/Z2dn39/fh4eGOjo4ODg7t7e3l5eWWlpba2tqjo6NVVVXk5OTe3t65ubnMzMzExMTf39/GxsampqZiYmJNcTiZAAAAbXRSTlMAAQIEAwcFCAb5EdAImAXpB6oIUAoLCfsgZQ0EVrsGEr4ZYQgbsgpUYxikNd/aatQQli+R7rlUUdas6+8I+VaFruoOOV/S8Nq5sWL8UqmKUFsuHyTcrtsJm0z7C49V3NMKkdKXuk7S7oVeVSv7tAAEVwAAAu5JREFUeF6llmVz3DwURmNLsr1pmJmZmZmxzMwsybS8gXJfhl9cKXbHEK+TmZ4P/nDnOXN1NbalHD8CQ7QRGDmhnIQhBDYQnkhheRECSVIQQrLMHookAciUkHhBw1zVwuLShcJIpPDC0uJC1VxDQTaFx1srSvM3DUxU1TRVlWBjM7+0opUrQaupLSnrLK7ELIepwaCYmbiyuLOspJY38eeLykdGxzDhYQfKCmOjI+VFPkMQYF7NZD0l2DgFJrR+siYPegxBzBvqeoQxpgGw8qOuoTz3HGw9udUPCaFZIORhdS5blZOHjXWDBIdABusanb0S4MpqEw4XcNPqCrQFQQTN+XwPQ8CY5jcDUbB3KLdlg6hnQDZacqEgWA3a2rF6Jri9zWohwI6dXXK2QHZ3OqBw0qC7B6vnAPd0sxZMkHr7VNPD34YZgNrXK3EBSgPU9HJ4eIQDDDogQS4ow4QJxy4+MmKs4oYJZFhhggjQuMoKHoHzn3bsQx1HQOTClOkXLP6lviZTtjCjmn7B5g/izqszliBHTB+HDhl3PSJbwnxSS3n45HDkVLXkvCWg5Uws7eHgJ98/uKqxzLI9w3o6oXuwhd+OPNVEet0WtnU9/sWNJfz1u6cY1/VtLghQuRgk/PmBmT7hogJPXo3L8YQed3Nw8PWfuB89Eb8scUGUrl33DfH/N93BGeH6NUnkArh1O5FOuNETp2GR27cAE/iaJu6mz8HdCQnan+i96XQmdgaZ9PQ9+xMVoPJgNhrNhBKNzj5Q+E/AavH4SSz6OZRo7Mlj3oDDp7jyPJoKJfr8CpvAOUrQi6eppJaVZOrpCwTdP1cgr93UjKxoN9dka2KX8ealZtBADO3lG2+e7xRAd7Y0igOg2tYdBKD/CBIBenf/lYGJD2y8uv8OgaBDDkry3v57SlQXhL7f35OlwJOXGUBBl571JykmzCIE02T/s0tIASyf/R6Arr59fcM62G+8fnsVhdwFwq4Ov345Of/15wd0RYY81HHUTQAAAABJRU5ErkJggg==); *background-image:url(/js/soundmanager/360-button-vis-play.png); _background:transparent url(/js/soundmanager/360-button-vis-play.gif) no-repeat 50% 50%; cursor:pointer; } .ui360-vis:hover .sm2-360btn, .ui360-vis .sm2-360btn-default:hover, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn:hover { background:transparent url(/js/soundmanager/360-button-vis-play-light.png) no-repeat 50% 50%; _background:transparent url(/js/soundmanager/360-button-vis-play.gif) no-repeat 50% 50%; cursor:pointer; } .ui360-vis .sm2-360ui.sm2_playing .sm2-360btn:hover, .ui360-vis .sm2-360btn-playing:hover { background:transparent url(/js/soundmanager/360-button-vis-pause-light.png) no-repeat 50% 50%; _background:transparent url(/js/soundmanager/360-button-vis-pause-light.gif) no-repeat 50% 50%; cursor:pointer; } .ui360-vis { /* non-JS / before-loaded state */ background-position: 21% 50%; _background:transparent url(/js/soundmanager/360-button-vis-play.gif) no-repeat 21% 50%; /* IE 6-only: special crap GIF */ } .ui360-vis .sm2-360btn-default { /* real button, post-loaded state */ _background:transparent url(/js/soundmanager/360-button-vis-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */ } .ui360-vis .sm2-360ui.sm2_dragging .sm2-360btn { visibility: hidden; } .soundmanager {margin-top:20px} .soundmanager .smback { float:left; width:50px; height:50px; -moz-transition-delay: 0s; -moz-transition-duration: 0.2s; -moz-transition-property: background, border, box-shadow; -moz-transition-timing-function: ease-in-out; background-color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 32px 32px 32px 32px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.075) inset; margin-right: 14px; } .text {padding-top:18px;font-size:14px;color:#fa9600} .text a {color:#fa9600;text-decoration:none} .text a:hover {color:#fff} .text .whitetxt {color:#fff}