/* @group General */ body {background:#000 none no-repeat 0 0;color:#fff;font:75%/1.2em 'Lato', Arial, Helvetica, sans-serif;} /* @end */ /* @group Typo */ a, a:hover, .hl {color:#fff;border:none;} a:hover {color:#fff;border-bottom:1px dotted #fff;} h1, h2, h3, h4, h5 {font:1em/1em 'Lato', Arial, Helvetica, sans-serif;margin:0 0 20px 0;color:#fff;font-size:1.25em;line-height:1.5em;text-transform:uppercase;font-weight:700;} p, li {font-size:1em;line-height:1.5em;} /* @end */ /* @group Wrapper */ #wrapper {} /* @end */ /* @group Header */ #header {} #logo {display:block;width:266px;height:138px;float:left;background:transparent url(../img/hf.logo.png) no-repeat 0 0;text-indent:-9999px;} #logo:hover {border:none;} #navigation li {margin:0 0 1px 0;} #navigation a {margin:0 0 1px 0;display:inline-block;background:transparent url(../img/hf.bg.nav.png) repeat 0 0;color:#ccc;padding:4px;margin:0 2px 0 0;font-size:.85em;line-height:1em;text-transform:uppercase;letter-spacing:1px;} #navigation a:hover {color:#999;border:none;} /* @end */ /* @group Content */ #content {} .section {position:relative;width:564px;margin:0 auto;} .body {background:#000;padding:24px;} .body a {border-bottom:1px dotted #fff;} .body a:hover {border:none;} .list li {width:180px;height:136px;float:left;margin:0 6px 12px 6px;overflow:hidden;} .list .first {margin:0 6px 12px 0;} .list .last {margin:0 0 12px 6px;} .list .thumb {display:block;width:180px;height:120px;background:#000 url(../img/hf.thumb.jpg) no-repeat 0 0;text-indent:-9999px;} .list .thumb:hover {border:none;} .list .title {display:block;margin:6px 0 0 0;color:#999;font-size:.75em;line-height:1em;text-transform:uppercase;letter-spacing:1px;} /* @end */ /* @group Article */ /* @end */ /* @group Artist */ .artist header {position:relative;height:320px;overflow:hidden;} .artist header h1 {position:absolute;bottom:0;left:24px;padding:8px 12px;margin:0;background:#000;color:#fff;font-size:1.6em;line-height:1em;text-transform:uppercase;} .artist nav {position:absolute;bottom:0;right:24px;} .artist nav ul {display:block;} .artist nav li {float:left;margin:0 1px 0 0;} .artist nav a {display:block;padding:8px 12px;background:#000;color:#aaa;font-size:.8em;line-height:1em;text-transform:uppercase;} .artist nav a:hover {border:none;color:#ccc;} .artist nav .active a {color:#fff;background:#000;} .artist nav .active a:hover {} .artist .body {padding:0;margin:24px;height:188px;overflow:hidden;} .artist .body p {margin:0 0 6px 0;} .artist .body iframe {margin:0 auto 12px auto;} .artist .tab {display:block;height:100%;overflow:hidden;} .artist #tab_artist_videos {text-align:center;height:100%;} .artist #tab_artist_info, .artist #tab_artist_sounds {display:block;height:100%;} .artist .col {float:left;} .artist .col_1 {width:600px;height:100%;overflow:auto;} .artist .col_2 {width:288px;padding:0 0 0 24px;} .artist .artist_sound {width:100%;height:81px;margin:0 0 12px 0;background:#fff;} .artist .tab a {border-bottom:1px dotted #fff;} .artist .tab a:hover {border:none;} /* @end */ /* @group Footer */ /* @end */ /* @group Intro */ #logo {position:absolute;top:50%;left:50%;margin:-69px 0 0 -133px;} #navigation {position:fixed;bottom:24px;left:24px;} /* @end */ /* @group Modal */ #modal {position:fixed;top:0;left:0;width:100%;height:100%;} #modal_overlay {position:absolute;top:0;left:0;background:#000 url(/img/hf.bg.stripe.png) repeat 0 0;width:100%;height:100%;} #modal_content {display:block;position:absolute;width:960px;height:560px;top:50%;left:50%;margin:-280px 0 0 -480px;background:#000;border:12px solid #222;} #modal_content .inner {display:block;position:relative;width:100%;height:100%;border:1px dotted #383838;} #modal_content .body {overflow:hidden;} #modal_close {display:block;position:absolute;top:50%;left:50%;margin:-296px 0 0 480px;padding:8px 12px;font-size:2em;line-height:1em;background:#222;color:#fff;text-transform:uppercase;text-align:center;border:1px solid #000;} #modal_close:hover {background:#383838;} /* @end */ /* Z-indexes */ #bg_w {z-index:100;} #bg {z-index:110;} #wrapper {z-index:200;} #logo {z-index:300;} #content {z-index:400;} .section {z-index:500;} #header {z-index:550;} #navigation {z-index:600;} #navigation li {z-index:610;} #navigation a {z-index:620;} #modal {z-index:900;} #modal_overlay {z-index:910;} #modal_content {z-index:920;} #modal_close {z-index:930;} /* @end */ /* @group CSS3 */ #modal_close {-moz-border-radius: 22px;-webkit-border-radius: 22px;} /*.artist nav a {-moz-border-radius: 6px;-webkit-border-radius: 6px;}*/ /* #modal_content {-moz-border-radius: 18px;-webkit-border-radius: 18px;} #modal_content .inner {-moz-border-radius: 12px;-webkit-border-radius: 12px;} #modal_content header, #modal_content header img {-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;} */ /* @end */ /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */ .jspContainer {overflow: hidden;position: relative;} .jspPane {position: absolute;} .jspVerticalBar {position: absolute;top: 0;right: 0;width: 4px;height: 100%;background: red;} .jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: red;} .jspVerticalBar *, .jspHorizontalBar * {margin: 0;padding: 0;} .jspCap {display: none;} .jspHorizontalBar .jspCap {float: left;} .jspTrack {background: #555;position: relative;} .jspDrag {background: #fff;position: relative;top: 0;left: 0;cursor: pointer;} .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {float: left;height: 100%;} .jspArrow {background: #50506d;text-indent: -20000px;display: block;cursor: pointer;} .jspArrow.jspDisabled {cursor: default;background: #80808d;} .jspVerticalBar .jspArrow {height: 16px;} .jspHorizontalBar .jspArrow {width: 16px;float: left;height: 100%;} .jspVerticalBar .jspArrow:focus {outline: none;} .jspCorner {background: #eeeef4;float: left;height: 100%;} /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner {margin: 0 -3px 0 0;}