/* CSS Document */ body { margin:0 auto; padding:0; text-align:left; font:12px/20px Arial, Helvetica, sans-serif; color: #FFF; background:#000 url("../images/bg.jpg") top no-repeat; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,div,dd,dt,dl { margin:0; padding:0; list-style:none; } h1 { font-size:14px; font-weight:700; color:#FF0000; padding:0 26px 15px 40px;} h2 { font-size:12px; font-weight:700; color:#FF0000; padding:0 26px 15px 40px;} h3 { font-size:12px; font-weight:700; color:#FF0000; padding:0 26px 15px 0;} a { color: #ff0000; text-decoration:underline; } a:hover { color:#333; text-decoration:none; } /*-------------------- GLOBAL CLASSES --------------------*/ .clear { clear:both; } div.clear { height:.01em; overflow:hidden; } p.back-to-top { text-align:right; padding-right:30px; } img.img-left { float:left; margin:5px 15px 10px 0; } img.img-right { float:right; margin:5px 0 5px 10px; } p.right-text { padding: 64px 40px 0 25px; } /* ------------------------ FORM ELEMENTS ------------------------ */ form { width:280px; border:none; margin-left:0; /* set margin left */ } input { background-color:#333 !important; /* to prevent highlighting by Google Toolbar */ border:1px solid #FFF; color:#faf2de; width:275px; /* 5 pixles smaller than form width !important */ height:20px; line-height:50px; margin-bottom:2px; /* sets vertical spacing between fields */ padding-top:2px; /* vertically position text in input/textarea field */ padding-bottom:2px; font:11px Verdana, Arial, Helvetica, sans-serif; } /* ------------------------ MAIN CONTACT FORM ------------------------ */ #contact-main { margin:30px 0 10px 80px; } #contact-main fieldset { border:0; } #contact-main label { display:block; font-size:1em; margin-bottom:15px; position:relative; text-align:right; width:220px; } #contact-main label input, #contact-main label textarea, #contact-main label select { left:110%; position:absolute; top:-4px; width:250px; } #contact-main label img { left:110%; position:absolute; top:-4px; width:150px; height:40px; } #contact-main label select { width:250px; height:22px; } #contact-main label textarea { height:80px; overflow:auto; } /* ------------------------ SUBMIT FORM ELEMENTS ------------------------ */ input.submit, input.submit-contact-main { background:url("../images/btn-submit.jpg"); width:75px; height:25px; cursor:pointer; padding:0; margin-left:243px; } input.clear-contact-main { background:url("../images/btn-clear.jpg"); width:75px; height:25px; cursor:pointer; padding:0; margin:10px 0 0 243px; } input.submit-email { background:url("../images/btn-submit.jpg"); border:none; width:75px; height:25px; cursor:pointer; padding:0; margin:3px 0 0 202px; } /* ------------------------ HOME PAGE ------------------------ */ #container { width:1020px; margin:0 auto; } #masthead-signupform, #masthead { width:1020px; height:145px; position:relative; } #masthead-signupform { background-image:url("../images/masthead-new.jpg"); } #masthead { background-image:url("../images/masthead.jpg"); } #masthead-signupform a, #masthead a { width:264px; height:100px; top:15px; left:34px; position:absolute; } #masthead-signupform a span, #masthead a span { display:none; } #signup-form { width:280px; padding:47px 0 0 700px ; } #flash { padding:47px 0 0 22px; } #podcast { background:#20282f url("../images/index-podomatic.jpg") top left no-repeat; width:345px; height:432px; float:left; } #playlist { width:320px; height:372px; margin:45px 0 0 5px; } #body-contain { width:1020px; background:url("../images/bkgd-2col.jpg") repeat-y scroll 0 0 ; } #body-contain:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #index-2-col-end { background:url("../images/index-2-col-bottom.jpg") no-repeat; width:1020px; height:40px; } #welcome p { padding:0 0 15px 0; margin:0 26px 0 40px; /*border-bottom: 1px dotted #333333;*/ } #welcome p span { font-weight:700; color:#ff0000; } #releases-index { padding-top:64px; background:url("../images/index-title-releases.jpg") top no-repeat; width:345px; float:left; } #releases-index .release-info { width:280px; border-bottom:1px dotted #333; padding-bottom:35px; margin:0 0 20px 25px; } #three-columns { background:url("../images/bkgd-3col.jpg") repeat-y scroll 0 0; width:1020px; } #events-index { padding-top:64px; background:url("../images/index-title-events.jpg") top no-repeat; width:345px; display:inline; float:left; } #events-index .event-info { width:280px; border-bottom:1px dotted #333; margin-left:40px; padding:10px 0 10px; } #events-index .event-info p { display:block; overflow:hidden; } #chart-index { padding-top:64px; background:url("../images/index-title-chart.jpg") top no-repeat; width:330px; display:inline; float:left; } #chart-index .chart-info { margin:0 0 5px 25px; width:280px; } #chart-index ul { width:280px; padding:0 25px 5px; color:#FFF; } #chart-index li { background:transparent url("../images/bullet.gif") 0 15px no-repeat; padding:10px 0 10px 20px; border-bottom:1px dotted #333; } #hawt-card { float:left; padding: 30px 20px 0 25px; } #hawt-card p { color:#FFF; background-color:#ed2224; } /* ------------------------ SUBPAGE STYLES ------------------------ */ #container-sub { background:url("../images/bg-wrap-subpage.jpg"); width:951px; margin:0 auto; } #column-left { width:675px; float:left; } #column-left p { color:#FFF; padding: 0 26px 15px 40px; } #column-left h1.toppadding { padding-top:90px; } #column-left h3 { padding: 0 26px 15px 40px; } #column-right { width:345px; float:right; } #releases-sub { background:url("../images/index-title-releases.jpg") top no-repeat; width:345px; padding-top:64px; display:inline; float:left; } #releases-sub .release-info { width:280px; border-bottom:1px dotted #333; padding-bottom:35px; margin:0 0 20px 25px; } #event-sub { background:url("../images/sub-title-events.jpg") top no-repeat; padding-top:64px; width:345px; display:inline; float:left; } #event-sub .event-info-sub { width:280px; margin-left:25px; border-bottom:1px dotted #333; padding:10px 0 10px; } #event-sub .event-info-sub p { display:block; overflow:hidden; } #chart-sub { background:url("../images/sub-title-chart.jpg") top no-repeat; padding-top:64px; width:345px; display:inline; float:left; } #chart-sub .chart-info { margin:0 0 5px 25px; width:280px; } .chart-archive { width:600px; margin:0 0 20px 40px; padding-top:30px; border-top:1px dotted #333; } .media-video { width:600px; margin:0 0 20px 40px; } .music-release { width:600px; min-height:120px; border-bottom:1px dotted #333; margin:15px 0 5px 40px; display:block; } .music-release span.release-title { display:block; font-weight:700; color:#ff0000; } .music-release span { display:block; padding-bottom:3px; } /* single column list */ #column-left ul { padding:0 0 0 10px; } #column-left ul li { background:transparent url("../images/bullet.gif") 0 6px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding-left:20px; /* pushes text to the right to display bg img */ padding-bottom:10px; } #column-right ul { padding:0 35px 5px 25px; } #column-right li { background:transparent url("../images/bullet.gif") 0 15px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */ padding:10px 0 10px 20px; border-bottom:1px dotted #333; } /* ------------------------ NETWORK ICONS ------------------------ */ #network-icons { background:url("../images/hawt-network-icons.jpg") top no-repeat; width:345px; height:287px; position:relative; float:left; } #network-icons #podomatic a { height:70px; width:70px; top:64px; left:25px; position:absolute; } #network-icons #podomatic a:hover { background:url("../images/icon-hc-over.jpg"); } #network-icons #soundcloud a {height:70px; width:70px; top:64px; left:130px; position:absolute; } #network-icons #soundcloud a:hover { background:url("../images/icon-sc-over.jpg"); } #network-icons #youtube a { height:70px; width:70px; top:64px; left:235px; position:absolute; } #network-icons #youtube a:hover { background:url("../images/icon-yt-over.jpg"); } #network-icons #facebook a { height:70px; width:70px; top:179px; left:25px; position:absolute; } #network-icons #facebook a:hover { background:url("../images/icon-fb-over.jpg"); } #network-icons #twitter a { height:70px; width:70px; top:179px; left:130px; position:absolute; } #network-icons #twitter a:hover { background:url("../images/icon-tw-over.jpg"); } #network-icons #myspace a { height:70px; width:70px; top:179px; left:235px; position:absolute; } #network-icons #myspace a:hover { background:url("../images/icon-ms-over.jpg"); } #network-icons #podomatic a span, #network-icons #soundcloud a span, #network-icons #youtube a span, #network-icons #facebook a span, #network-icons #twitter a span, #network-icons #myspace a span { display:none; } /* ------------------------ SUBHEAD FRAMEWORK ------------------------ */ body#index #welcome, body#about #subhead, body#hawt-crew #subhead, body#hawt-la #subhead, body#hawt-sf #subhead, body#hawt-sd #subhead, body#events #subhead, body#music #subhead, body#media #subhead, body#gear #subhead, body#contact #subhead, body#thanks #subhead, body#top10 #subhead { height:64px; background-repeat:no-repeat; } body#index #welcome { background:url("../images/index-title-welcome.jpg") scroll top no-repeat; width:675px; min-height:400px; float:left; } body#about #subhead { background-image:url("../images/sub-title-about.jpg"); } body#hawt-crew #subhead { background-image:url("../images/sub-title-hawt.jpg"); } body#hawt-la #subhead { background-image:url("../images/sub-title-hawtla.jpg"); } body#hawt-sf #subhead { background-image:url("../images/sub-title-hawtsf.jpg"); } body#hawt-sd #subhead { background-image:url("../images/sub-title-hawtsd.jpg"); } body#events #subhead { background-image:url("../images/sub-title-upcoming.jpg"); } body#music #subhead { background-image:url("../images/sub-title-music.jpg"); } body#media #subhead { background-image:url("../images/sub-title-media.jpg"); } body#gear #subhead { background-image:url("../images/sub-title-gear.jpg"); } body#contact #subhead { background-image:url("../images/sub-title-contact.jpg"); } body#thanks #subhead { background-image:url("../images/sub-title-thankyou.jpg"); } body#top10 #subhead { background-image:url("../images/sub-title-top10.jpg"); } /* ------------------------ BANNER FRAMEWORK ------------------------ */ body#index #banner { background:#FFF url("../images/index-banner.jpg") top left no-repeat; width:675px; height:432px; float:left; } body#about #banner, body#hawt-crew #banner, body#hawt-la #banner, body#hawt-sf #banner, body#hawt-sd #banner, body#events #banner, body#music #banner, body#media #banner, body#gear #banner, body#contact #banner, body#top10 #banner, body#thanks #banner { width:1020px; height:315px; } body#about #banner { background:#FFF url("../images/sub-banner-la.jpg") top left no-repeat; } body#hawt-crew #banner { background:#FFF url("../images/sub-banner-la.jpg") top left no-repeat; } body#hawt-la #banner { background:#FFF url("../images/sub-banner-la.jpg") top left no-repeat; } body#hawt-sf #banner { background:#FFF url("../images/sub-banner-sf.jpg") top left no-repeat; } body#hawt-sd #banner { background:#FFF url("../images/sub-banner-sd.jpg") top left no-repeat; } body#events #banner { background:#FFF url("../images/sub-banner-sf.jpg") top left no-repeat; } body#music #banner { background:#FFF url("../images/sub-banner-la.jpg") top left no-repeat; } body#media #banner { background:#FFF url("../images/sub-banner-sd.jpg") top left no-repeat; } body#gear #banner { background:#FFF url("../images/sub-banner-sf.jpg") top left no-repeat; } body#contact #banner { background:#FFF url("../images/sub-banner-la.jpg") top left no-repeat; } body#top10 #banner { background:#FFF url("../images/sub-banner-sd.jpg") top left no-repeat; } body#thanks #banner { background:#FFF url("../images/sub-banner-sd.jpg") top left no-repeat; } /* ------------------------ BOTTOM WRAP ------------------------ */ #footer { background:url("../images/footer.jpg") top no-repeat; height:123px; width:1020px; height:145px; clear:both; } #footer p { color:#FFF; padding:60px 80px 0; } #footer a { color:#FFF; text-decoration:none; } #footer a:hover { color:#ff0000; text-decoration:none; } /*-------------------- NAVIGATION FRAMEWORK --------------------*/ /*--------------------Horizontal Sprite Navigation--------------------*/ #nav, #nav-01 a:hover, #nav-02 a:hover, #nav-03 a:hover, #nav-04 a:hover, #nav-05 a:hover, #nav-06 a:hover, #nav-07 a:hover, #nav-08 a:hover { background:url("../images/nav.jpg") no-repeat; } #nav { width:1020px; height:25px; margin:0; padding:0; position:relative; z-index: 9999; } #nav span { display:none; } #nav li { float:left; list-style:none; _display:inline; position:relative; } #nav li, #nav a { height:25px; display:block; } /* change height here also */ #nav-01 { width: 88px;} #nav-02 { width: 196px;} #nav-03 { width: 167px;} #nav-04 { width: 189px;} #nav-05 { width: 91px;} #nav-06 { width: 92px;} #nav-07 { width: 84px;} #nav-08 { width: 113px;} /*-------------- (-20px) X position of button / (-27px) height of image from above ------------- */ #nav-01 a:hover { background-position:0 -25px; } #nav-02 a:hover { background-position:-88px -25px; } #nav-03 a:hover { background-position:-284px -25px; } #nav-04 a:hover { background-position:-451px -25px; } #nav-05 a:hover { background-position:-640px -25px; } #nav-06 a:hover { background-position:-731px -25px; } #nav-07 a:hover { background-position:-823px -25px; } #nav-08 a:hover { background-position:-907px -25px; } /* ------------------------ son of suckerfish: horizontal sprite nav ------------------------ */ #nav li ul { position:absolute; left:-9999px; padding-right:1px; /* Fixes one px spacing for border-right in FF */ background-color:#333; /* Background color of drop down nav - add more styles (i.e. background image) if you want */ } #nav li ul li { height:25px; /* Height of each drop down nav item */ border:1px solid #FFF; border-top:none; } #nav li ul li a {width:100%; height:25px; /* Height of each drop down nav item, should match above */ line-height:25px; /* Height of each drop down nav item again, should match above */ } #nav li ul li a span { display:block; padding-left:23px; } /* Drop down link styles */ #nav a:link, #nav a:visited, #nav a:hover, #nav a:active { font-size:1em; color:#FFF; text-decoration:none; } #nav li:hover ul, #nav li.sfHover ul { left:auto; } /* Hover styles for drop down items */ #nav-03 ul a:hover, #nav-06 ul a:hover { background-image:none; background-color:#ed2224; color:#FFF; text-decoration:none; } /* width of drop down nav - choose width that allows items to display on one line */ #nav-03 ul, #nav-03 li { width:167px; } #nav-06 ul, #nav-06 li { width:167px; } /*-------------------- LIGHTBOX --------------------*/ #lightbox{ position:absolute; left:0; width:100%; z-index:100; text-align:center; line-height:0;} #lightbox img{ width:auto; height:auto;} #lightbox a img{ border:none; } #outerImageContainer{ position:relative; background-color:#FFF; width:250px; height:250px; margin:0 auto; } #imageContainer{ padding:10px; } #loading{ position:absolute; top:40%; left:0; height:25%; width:100%; text-align:center; line-height:0; } #hoverNav{ position:absolute; top:0; left:0; height:100%; width:100%; z-index:10; } #imageContainer>#hoverNav{ left:0;} #hoverNav a{ outline:none;} #prevLink, #nextLink{ width:49%; height:100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display:block; } #prevLink { left:0; float:left;} #nextLink { right:0; float:right;} #prevLink:hover, #prevLink:visited:hover { background:url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background:url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font:10px Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; overflow:auto; width:100% ; } #imageData{ padding:0 10px; color:#666; } #imageData #imageDetails{ width:70%; float:left; text-align:left; } #imageData #caption{ font-weight:700; } #imageData #numberDisplay{ display:block; clear:left; padding-bottom:1em; } #imageData #bottomNavClose{ width:66px; float:right; padding-bottom:0.7em; outline: none;} #overlay{ position:absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000; }