@charset "utf-8";

/* ////////////////////////////////////// aiwazzcreative css - first lets reset those assholes \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}
body{line-height:1.2}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}
:focus{outline:0}
a{outline:none}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse; border-spacing:0}

body{font-family:Arial,Verdana,Geneva,sans-serif; font-size:12px; background:#000}
a:link{color:#fff; text-decoration:none;}
a:visited{color:#fff; text-decoration:none;}
a:hover{color:#fff; text-decoration:underline;}
a:active{color:#fff; text-decoration:underline;}

#shitscreen{z-index:200; position:absolute; background:#675456; width:100%; height:650px; top:0; left:0; text-align:center; padding-top:150px; color:#339999;}
#outnow{z-index:101; position:absolute; background: url(../images/header-new.png); width:1000px; height:130px; top:-130px; left:50%; margin-left:-500px;}
.hcontain{position:relative; width:100%; height:130px;}
#buyvade{position:absolute; width:158px; height:54px; top:15px; left:750px;}
#buydisc{height:27px; width:158px; display:block; background: url(../images/buy-sprite.png) 0 0 no-repeat; cursor:pointer;}
#buydigital{height:27px; width:158px; display:block; background: url(../images/buy-sprite.png) 0 -54px no-repeat; cursor:pointer;}
.topwrapper{background:#675456; height:800px; width:100%; z-index:1; position:relative}
#player{position:fixed; z-index:60; width:1px; height:1px; top:0; left:0;}
#killplayer{position:absolute; z-index:60; width:150px; height:30px; top:760px; left:50%; margin-left:-75px; text-align:center; display:none;}
#launchplayer{position:absolute; z-index:60; width:150px; height:30px; top:760px; left:50%; margin-left:-75px; text-align:center; display:none;}

#flasher{z-index:150; position:absolute; background:#fff; width:100%; height:100%; top:0; left:0; display:none;}
#overlay{position:absolute; z-index:100; background:#675456; width:100%; height:650px; top:0; left:0; text-align:center; padding-top:150px; color:#339999;}
#sitelauncher{position:relative; width:100%;}
#launch-hifi{position:absolute; top:0; left:0%; margin-left:-397px;}
#launch-lofi{position:absolute; top:0; right:0%; margin-right:-397px;}
#counter{position:absolute; z-index:99; width:100px; height:12px; font-size:12px; top:5px; left:50%; margin-left:290px; text-align:right; padding:5px 5px 0 0; color:#339999; text-transform:uppercase; font-weight:bold; border: solid #339999 1px;}
#navsprite{position:absolute; z-index:6; width:300px; height:150px; font-size:12px; top:35px; left:50%; margin-left:70px; display:none;}
#navchild1{height:30px; width:300px; display:block; background:transparent url(../images/navsprite3.png) 0 0 no-repeat; cursor:pointer;}
#navchild2{height:30px; width:300px; display:block; background:transparent url(../images/navsprite3.png) 0 -60px no-repeat; cursor:pointer;}
#navchild3{height:30px; width:300px; display:block; background:transparent url(../images/navsprite3.png) 0 -120px no-repeat; cursor:pointer;}
#navchild4{height:30px; width:300px; display:block; background:transparent url(../images/navsprite3.png) 0 -180px no-repeat; cursor:pointer;}
#navchild5{height:30px; width:300px; display:block; background:transparent url(../images/navsprite3.png) 0 -240px no-repeat; cursor:pointer;}
#launch-hifi{cursor:pointer;}

#intro1{z-index:65; background:url(../images/stage-p1-final.png) left top no-repeat;}
#intro2{z-index:64; background:url(../images/stage-p2-final.png) left top no-repeat;}
#intro3{z-index:63; background:url(../images/stage-p4.png) left top no-repeat;}
#intro5{position:absolute; z-index:61; width:200px; height:200px; top:310px; left:50%; margin-left:-100px; background:url(../images/launch.png) left top no-repeat;}
.intros{position:absolute; width:300px; height:160px; top:150px; left:50%; margin-left:-150px;}
#launch{width:200px; height:200px; display:block; cursor:pointer;}

#bg-l{position:absolute; left:0; top:0; width:50%; height:800px; z-index:2; background:url(../images/bg-l.png) left top repeat-x;}
#bg-r{position:absolute; right:0; top:0; width:50%; height:800px; z-index:2; background:url(../images/bg-r.png) left top repeat-x;}
#bg-l3{position:absolute; left:0; top:0; width:50%; height:800px; z-index:3; background:url(../images/bg-l-3.png) left top repeat-x;}
#bg-r3{position:absolute; right:0; top:0; width:50%; height:800px; z-index:3; background:url(../images/bg-r-3.png) left top repeat-x;}
#bg-l4{position:absolute; left:0; top:0; width:50%; height:800px; z-index:4; background:url(../images/bg-l-4.png) left top repeat-x;}
#bg-r4{position:absolute; right:0; top:0; width:50%; height:800px; z-index:4; background:url(../images/bg-r-4.png) left top repeat-x;}

.topcell{width:800px; height:800px; margin:0 auto; position:relative; z-index:5; background:#675456}

#layer1{z-index:6; background:url(../images/layer1.png) left top no-repeat;}
#gfx-layer2{display:none;}
#gfx-layer3{display:none;}
#gfx-layer4{ display:none}
#snippet{position:absolute; left:277px; top:269px; width:256px; height:256px; overflow:hidden; z-index:7}
#layer2{z-index:8}
#lay2-sub1{position:absolute; width:217px; height:202px; top:231px; left:509px; background:url(../images/layer2-subsprite.png) no-repeat 0 0; cursor:pointer}
#lay2-sub2{position:absolute; width:207px; height:179px; top:497px; left:0px; background:url(../images/layer2-subsprite.png) no-repeat -217px 0px; display:none; cursor:pointer}
#lay2-sub3{position:absolute; width:132px; height:153px; top:265px; left:147px; background:url(../images/layer2-subsprite.png) no-repeat -424px 0px; display:none; cursor:pointer}
#lay2-sub3-v{position:absolute; width:132px; height:153px; top:265px; left:147px; background:url(../images/layer2-subsprite.png) no-repeat -424px 0px; display:none; cursor:pointer}
#lay2-sub3-vd{position:absolute; width:300px; height:147px; top:150px; left:400px; display:none}
#lay2-sub1-trig{position:absolute; width:300px; height:147px; cursor:pointer; top:11px; left:9px; background:url(../images/nausea.png) left top no-repeat; display:none}
#lay2-sub2-trig{position:absolute; width:300px; height:147px; cursor:pointer; top:478px; left:300px; background:url(../images/catnumber.png) left top no-repeat; display:none}
#lay2-sub3-trig{position:absolute; width:500px; height:230px; cursor:pointer; top:150px; left:300px; background: url(../images/midfi/roel.jpg) left top no-repeat; display:none}
#layer3{z-index:9}
#lay3-sub1{position:absolute; width:386px; height:211px; top:162px; right:0px; background:url(../images/layer3-subsprite.jpg) no-repeat 0 0; cursor:pointer}
#lay3-sub2{position:absolute; width:355px; height:259px; top:476px; left:0px; background:url(../images/layer3-subsprite.jpg) no-repeat -386px 0px; display:none; cursor:pointer}
#lay3-sub3{position:absolute; width:365px; height:212px; top:0px; right:0px; background:url(../images/layer3-subsprite.jpg) no-repeat -741px 0px; display:none; cursor:pointer}
#lay3-sub1-trig{position:absolute; width:500px; height:248px; cursor:pointer; top:11px; left:9px; background: url(../images/eddie.jpg) left top no-repeat; display:none}
#lay3-sub2-trig{position:absolute; width:500px; height:222px; cursor:pointer; top:478px; left:300px; background: url(../images/midfi/artists.jpg) left top no-repeat; display:none}
#lay3-sub3-trig{position:absolute; width:450px; height:700px; cursor:pointer; top:20px; left:50px; background: url(../images/tracklist.png) left top no-repeat; display:none}
#layer4{z-index:10}
#lay4-sub1{position:absolute; width:166px; height:168px; top:43px; right:20px; background:url(../images/layer4-subsprite.png) no-repeat 0 0; cursor:pointer}
#lay4-sub2{position:absolute; width:211px; height:246px; top:548px; left:0px; background:url(../images/layer4-subsprite.png) no-repeat -166px 0px; display:none; cursor:pointer}
#lay4-sub3{position:absolute; width:297px; height:296px; top:249px; right:253px; background:url(../images/layer4-subsprite.png) no-repeat -377px 0px; display:none; cursor:pointer}
#lay4-sub3-v{position:absolute; width:166px; height:168px; top:43px; right:20px; background:url(../images/layer4-subsprite.png) no-repeat 0 0; display:none; cursor:pointer}
#lay4-sub3-vd{position:absolute; width:300px; height:147px; top:150px; left:200px; display:none}
#lay4-sub1-trig{position:absolute; width:500px; height:240px; cursor:pointer; top:200px; left:9px; background: url(../images/date.png) left top no-repeat; display:none}
#lay4-sub2-trig{position:absolute; width:380px; height:200px; cursor:pointer; top:378px; left:300px; background: url(../images/albumart.png) left top no-repeat; display:none}
#lay4-sub3-trig{position:absolute; width:200px; height:356px; cursor:pointer; top:20px; left:590px; background: url(../images/vade.png) left top no-repeat; display:none}
#layer20{z-index:50; background:#675456;}

.d-none{display:none;}

.abs-m{position:absolute; left:0; top:0; width:800px; height:800px}
.rel-m{position:relative; width:800px; height:800px}

.footer{height:100px; width:1000px; margin:0 auto; background:url(../images/an.png) center 25px no-repeat}
#sarge{width:200px; height:100px; float:right; display:none}
#aiwazz{width:200px; height:100px; float:left; display:none}

/* ////////////////////////////////////// 360player \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* General warning:Beta-ish. Code could be a bit cleaner. */
.ui360, 
.ui360 *{ position:relative}

.ui360, 
.sm2-360ui{ /* size of the container for the circle,etc. */ width:50px;  height:50px}

.ui360{ position:relative;  /* a little extra spacing */ padding-top:1px;  padding-bottom:1px;  margin-bottom:-18px; /* approximate "line height"we want */ margin-left:42px; /* 50px,with a few off */}

.ui360 a{ line-height:50px}

.sm2-360ui{ margin-left:-50px}

.ui360{ width:auto}

.ui360, 
.ui360 *{ vertical-align:middle}

.sm2-360ui{ position:relative;  display:inline-block; /* firefox 3 et al */ float:left; /* firefox 2 needs this,inline-block would work with fx3 and others */ *float:left; /* IE 6+7 */ *display:inline;  *clear:left}

.sm2-360ui.sm2_playing, 
.sm2-360ui.sm2_paused{ /* bump on top when active */ z-index:10}

.ui360 a.sm2_link{/* this class added to playable links by SM2 */ position:relative}

.ui360 a{ color:#000;  text-decoration:none}

.ui360 a, 
.ui360 a:hover, 
.ui360 a:focus{ padding:2px;  margin-left:-2px;  margin-top:-2px}

.ui360 a:hover, 
.ui360 a:focus{ background:#eee;  -moz-border-radius:3px;  -webkit-border-radius:3px;  -khtml-border-radius:3px;  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:#fff;  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;  z-index:2;  display:none}

.ui360 .sm2-360btn{ position:absolute;  top:50%;  left:50%;  width:22px;  height:22px;  margin-left:-11px;  margin-top:-11px;  cursor:pointer;  z-index:3}

.ui360 .sm2-360btn-default{}

.ui360 .sm2-360data{ display:inline-block;  font-family:helvetica}

.ui360 .sm2-360ui.sm2_playing .sm2-cover, 
.ui360 .sm2-360ui.sm2_paused .sm2-cover{ display:block}

/* this could be optimized a fair bit. */
.ui360 .sm2-360btn-default{ background:transparent url(http://www.roelfuncken.com/images/360/360-button-play.png) no-repeat 50% 50%;  _background:transparent url(http://www.roelfuncken.com/images/360/360-button-play.gif) no-repeat 50% 50%; /* IE 6-only:special crap GIF */ cursor:pointer}

.ui360 .sm2-360ui.sm2_paused .sm2-360btn{ background:transparent url(http://www.roelfuncken.com/images/360/360-button-play.png) no-repeat 50% 50%;  _background:transparent url(http://www.roelfuncken.com/images/360/360-button-play.gif) no-repeat 50% 50%;  cursor:pointer}

.ui360 .sm2-360btn-default:hover, 
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover{ background:transparent url(http://www.roelfuncken.com/images/360/360-button-play-light.png) no-repeat 50% 50%;  _background:transparent url(http://www.roelfuncken.com/images/360/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(http://www.roelfuncken.com/images/360/360-button-pause-light.png) no-repeat 50% 50%;  _background:transparent url(http://www.roelfuncken.com/images/360/360-button-pause-light.gif) no-repeat 50% 50%;  cursor:pointer}

.ui360 .sm2-360ui.sm2_playing .sm2-timing{ visibility:visible}

.ui360 .sm2-360ui.sm2_buffering .sm2-timing{ visibility:hidden}

.ui360 .sm2-360ui .sm2-timing, 
.ui360 .sm2-360ui .sm2-360btn:hover+.sm2-timing, 
.ui360 .sm2-360ui.sm2_paused .sm2-timing{ visibility:hidden}

.ui360 .sm2-360ui.sm2_dragging .sm2-timing, 
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover+.sm2-timing{ /* paused+dragging */ visibility:visible}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn, 
x.ui360 .sm2-360btn-playing, 
.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(http://www.roelfuncken.com/images/360/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{ margin-bottom:0px}

.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}

/* ////////////////////////////////////// 360playeranimations \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* larger canvas, spectrum+EQ vis and other items */
.ui360, 
.sm2-360ui{ /* size of the container for the circle,etc. */ width:256px;  height:256px}

.ui360{ position:relative;  /* a little extra spacing */ padding-top:1px;  padding-bottom:1px;  margin-bottom:-18px; /* approximate "line height"we want */ margin-left:248px; /* full width,minus a few */}

.ui360 a{ font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;  white-space:nowrap;  line-height:256px}

.sm2-360ui{ margin-left:-256px}

.ui360 .sm2-timing{ line-height:256px}

.ui360 .sm2-timing{ font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;  color:#fff;  text-align:center;  line-height:256px;  text-indent:0px;  display:none}

.sm2-inline-list .ui360, 
.sm2-inline-list .sm2-360ui{ margin-left:0px}

.sm2-inline-list .ui360{ margin:8px 13px 7px 0px}

.sm2-inline-list .sm2-360ui{ border:0}

.sm2-inline-list .ui360 a{ position:absolute;  left:0px;  bottom:0px;  margin-left:1px;  width:100%; /* 2px padding in box */ height:auto;  font-size:x-small;  padding:2px 0px;  color:#999;  line-height:15px;  text-align:center;  display:inline;  -moz-border-radius:0px;  -khtml-border-radius:0px;  border-radius:0px}

.sm2-inline-list .ui360 a:focus, 
.sm2-inline-list .ui360 a:active{ background-color:transparent}

/* Use a bigger loading image for this layout */
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn, 
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover{  background:transparent url(http://www.roelfuncken.com/images/360/icon_loading_spinner_bigger.gif) no-repeat 50% 50%;  opacity:0.5;  visibility:visible}