/*
    @project   shape <http://thisisshape.net>
    @author    Axel Staps <http://artack.net>
    @copyright Copyright (c) 2011, Axel Staps <http://artack.net>
    @license   this code is property of Axel Staps <http://artack.net>
*/

/*reset*/
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

/*generic*/
.clearfix:after{content:" ";display:block;clear:both;visibility:hidden;line-height:0;height:0;font-size:0}
.clearfix{display:block}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
html {position:relative}
body{font:normal normal normal 12px/17px Arial,sans-serif;color:#fff;text-decoration:none;text-align:left;background:#e6e6e6}
.fll{float:left} .flr{float:right} .fln{float:none}
.cll{clear:left} .clr{clear:right} .clb{clear:both}
.hide {display:none!important}
.hideTxt {text-indent:-99999px}
.op0 {opacity:0}
.op1 {opacity:1}
a {outline:none}
.big {font-weight:bold}

/*layout*/
#bgImg {position:absolute;z-index:-10;right:-50px;top:0;width:1371px;height:1310px;background:url("../img/bg_03.jpg") no-repeat scroll left top transparent}
#wrap {position:relative;width:910px;height:620px;margin:0 auto;z-index:1}
  #nav {position:absolute;right:320px;top:10px;padding:0 10px 0 27px;background:#000}
  #nav li {float:left;width:60px;font-size:15px;line-height:27px;text-align:center;color:#9e5cbd;cursor:pointer}
  #nav .active {font-size:18px;font-weight:bold;color:#fff}
  #nav .hover {color:#f6e2ff}
  
  #badge, #badgeText {position:absolute;top:230px;right:632px}
  #badge {width:180px;height:180px;background:url('../img/badge.jpg') scroll no-repeat -34px -28px transparent}
  #badgeText {width:169px;height:100px;padding:80px 15px 0 0;font-size:42px;text-align:right;line-height:25px;color:#fff;text-decoration:none;cursor:pointer}
  #badgeText .small {font-size:22px;line-height:0}
  
  .cntBox {position:absolute;width:489px;right:0;margin:50px 0 0 0}
  #about p {float:left;width:240px;direction:ltr}
  #pic {display:block;float:right;width:219px;height:219px}
  #contact {margin-top:20px}
  #contact a {display:block;margin-top:10px;font-size:24px;line-height:26px;color:#46b897;text-decoration:none}
  #dates {position:absolute;width:265px;left:0;bottom:-185px}
  #dates .link {color:#fff;text-decoration:none}
  .date {font-size:14px}
  #links {position:absolute;right:41px;top:418px;direction:ltr}
  #links li {float:left;margin-left:10px;overflow:hidden}
  #links a {display:block;background:url('../img/sprite.png') scroll no-repeat 0 0 transparent}
  a#mixcloud {width:46px;height:26px}
  a#soundcloud {width:56px;height:24px;background-position:0 -30px}
  a#lastfm {width:38px;height:23px;background-position:0 -55px}
  a#vast {width:58px;height:22px;background-position:0 -79px}
  
  .dlIcon, .tlIcon {width:26px;height:14px;background:url('../img/sprite.png') scroll no-repeat -67px 0 transparent;cursor:pointer;overflow:hidden}
  .dlIcon {background-position:-67px -15px}
  
  .mix {position:relative;width:100%;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #000}
  #mixes .player {}
  #mixes object {display:block;margin:0 0 5px 0} //normal height:40px
  #mixes h2 {height:20px;margin:5px 0 0;font-size:24px;line-height:24px;cursor:pointer}
  #mixes .loc {font-size:12px}
  #mixes .control {float:left;clear:left;width:18px;height:26px;margin:0 15px 0 0}
  #mixes .play {background:url('../img/sprite.png') scroll no-repeat 0 0 transparent}
  #mixes .pause {background:url('../img/sprite.png') scroll no-repeat 0 -26px transparent}
  #mixes .progressBar {float:left;clear:both;width:400px;height:5px;margin:10px 0 0 0;background:#000}
  #mixes .progress {float:left;width:100%;height:5px;background:#fff}
  #mixes .tracklist {position:relative;width:479px;height:auto;margin-left:10px;padding-top:10px}
  #mixes .tlIcon, #mixes .dlIcon {position:absolute;display:block;right:34px;margin:-18px 0 0 0}
  #mixes .dlIcon {margin-top:-36px}
  #mixes .cover {float:right;display:block;width:200px;height:200px;margin:20px 0 0 10px}
  #mix1 .cover {background:url('../mixes/interjection.jpg') scroll no-repeat 0 0 transparent}
  #mix2 .cover {background:url('../mixes/vast-podcast09.jpg') scroll no-repeat 0 0 transparent}
  #mix3 .cover {background:url('../mixes/vast-podcast07.jpg') scroll no-repeat 0 0 transparent}
  #mix4 .cover {background:url('../mixes/stopdanceminimix.jpg') scroll no-repeat 0 0 transparent}
  #mix5 .cover {background:url('../mixes/lights-dimmed.jpg') scroll no-repeat 0 0 transparent}
  #mix6 .cover {background:url('../mixes/best-of-robot-koch.jpg') scroll no-repeat 0 0 transparent}
  #mix7 .cover {background:url('../mixes/schoene-freiheit-podcast.jpg') scroll no-repeat 0 0 transparent}
  #mix8 .cover {background:url('../mixes/interjection-2.jpg') scroll no-repeat 0 0 transparent}
  
  #gallery ul {float:right;margin:0 0 10px}
  #gallery li {float:left;width:60px;height:40px;margin:0 0 0 12px;background:#000}
  #gallery .dlIcon {display:block;float:right;margin-top:6px}
  .bigPic {float:right;line-height:0}
  .picInfo {position:relative;margin:-25px 0 0;padding:0 10px;line-height:25px;background:#2ea08c;direction:ltr}
  .picInfo a {color:#fff}