/* ************************************************* FOUR24, VERSION 5 General Screen Styles Created by the ridiculous Dan Mall http://www.danielmall.com/ ************************************************* */ /*------------------------------------------- General Selectors -------------------------------------------*/ * { margin: 0; padding: 0; line-height: 1.5; } body { font: normal 62.5% Courier, monospace; color: #888; background: #f2f2f2 url(/i/screen/page-bg.jpg) no-repeat right 0; } /* block level */ h1 { } h2 { } h3, .cd h2 { font: bold 22px Helvetica, Arial, sans-serif; color: #9f9f9f; margin: 0 0 0.8em; letter-spacing: -1px; } h4 { } h5 { } h6 { } p, ul, dl, ol { font-size: 13px; margin: 0 0 1.5em; } dd { /*margin: 0 0 0 15px;*/ } blockquote { margin: 0 0 1.2em; } table { margin: 0 0 1em; font-size: 13px; color: #9d9d9d; } tr { } th, td { border-top: 1px solid rgba(218, 218, 218, 0.5); padding: 1em 0; vertical-align: top; } /* inline */ em { font-style: italic; } strong { font-weight: bold; } a { color: #f47300; text-decoration: none; } a:hover, a:focus { color: #000; } a:hover, a:focus { background-color: #f47300; color: #fff; } img { display: block; margin: 0 0 10px; } a img { border: none; } input, textarea { font: 12px Georgia, 'Times New Roman', serif; color: #222; } code { /*font: 12px/1 'Courier New', Courier, monospace;*/ } sub, sup { line-height: 0; } abbr, acronym { border: none; } /*------------------------------------------- Global combinations -------------------------------------------*/ /* Phark Image Replacement - http://phark.typepad.com/phark/2003/08/accessible_imag.html */ h1, h2, #nav a, #footer ul a, #ablaze-debut h2, #promo-cta { display: block; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; } label[for] { display: block; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; } /* Trimming Outline in Firefox - http://snook.ca/archives/html_and_css/trimming_long_o */ /*\*/ #nav a, #footer ul a, #promo-cta { overflow: hidden; } /**/ /* Easy Clearing - http://www.positioniseverything.net/easyclearing.html */ #footer:after, #add-mailing-list:after, #ablaze-debut-wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #home #header h1, #home #header h2 { position: absolute; left: -9999px; } .real-hide { display: none; } /*------------------------------------------- Reusable Elements -------------------------------------------*/ ul.options li { display: inline; } ul.options li:before { content: "/"; color: #aaa; padding: 0 9px 0 1px; } ul.options li:first-child:before { content: ""; padding: 0; } .cd { padding: 0 0 0 155px; min-height: 150px; float: left; position: relative; width: 245px; margin: 0 0 0 35px; } .cd h2 { position: absolute; top: 0.9em; } .cd .date { margin-bottom: 2em; } /*------------------------------------------- Main Structure -------------------------------------------*/ #wrap { width: 960px; padding: 175px 0 0; position: relative; } h1 { background-image: url(/i/screen/logo.gif); width: 883px; height: 194px; position: absolute; top: 0; left: 0; } #header h2 { background-image: url(/i/screen/tagline.png); width: 433px; height: 76px; position: absolute; top: 152px; left: 488px; } #nav { position: absolute; width: 149px; height: 165px; left: 724px; top: 225px; z-index: 3; } #nav ul { list-style: none; } #nav li { position: absolute; right: 0; z-index: 1; } #nav li:hover, #home #nav-home, #about #nav-about, #music #nav-music, #contact #nav-contact { z-index: 2; } #nav a:hover, #nav a:focus, #about #nav-about a, #music #nav-music a { background-position: 0 -40px; } #nav-home { top: 0; } #nav-home a { background-image: url(/i/screen/nav-home.gif); width: 86px; height: 36px; } #nav-home a:hover, #nav-home a:focus, #home #nav-home a { background-position: 0 -36px; } #nav #nav-about { top: 31px; right: -5px; } #nav-about a { background-image: url(/i/screen/nav-about.gif); width: 149px; height: 40px; } #nav-music { top: 59px; } #nav-music a { background-image: url(/i/screen/nav-music.gif); width: 99px; height: 40px; } #nav-events { top: 95px; } #nav-events a { background-image: url(/i/screen/nav-events.gif); width: 101px; height: 32px; } #nav-events a:hover, #nav-events a:focus, #events #nav-events a { background-position: 0 -32px; } #nav-contact { top: 91px; /*top: 126px;*/ } #nav-contact a { background-image: url(/i/screen/nav-contact.gif); width: 128px; height: 42px; } #nav-contact a:hover, #nav-contact a:focus, #contact #nav-contact a { background-position: 0 -42px; } #footer { clear: both; background: transparent url(/i/screen/footer-rule.gif) no-repeat 30px 0; padding: 30px 0 5em 20px; } #footer p { font-size: 12px; color: #bfbfbf; float: left; margin-right: 30px; position: relative; top: 2px; } #footer ul { float: left; list-style: none; } #footer li { float: left; margin: 0 20px 0 0; position: relative; } #footer-itunes { top: -6px; } #footer-itunes a { background-image: url(/i/screen/footer-itunes.gif); width: 83px; height: 27px; } #footer-itunes a:hover, #footer-itunes a:focus { background-position: 0 -27px; } #footer-facebook a { background-image: url(/i/screen/footer-facebook.gif); width: 88px; height: 18px; } #footer-facebook a:hover, #footer-facebook a:focus { background-position: 0 -18px; } #footer-twitter { top: 1px; } #footer-twitter a { background-image: url(/i/screen/footer-twitter.gif); width: 83px; height: 19px; } #footer-twitter a:hover, #footer-twitter a:focus { background-position: 0 -19px; } #footer-youtube { top: -2px; } #footer-youtube a { background-image: url(/i/screen/footer-youtube.gif); width: 63px; height: 25px; } #footer-youtube a:hover, #footer-youtube a:focus { background-position: 0 -25px; } #footer-myspace a { background-image: url(/i/screen/footer-myspace.gif); width: 110px; height: 28px; } #footer-myspace a:hover, #footer-myspace a:focus { background-position: 0 -28px; } /*------------------------------------------- Home -------------------------------------------*/ #home #wrap { padding-top: 0; } #home #header { background: transparent url(/i/screen/home-header2.png) no-repeat 0 0; width: 100%; height: 379px; position: relative; z-index: 1; } #ablaze-debut-wrap { background: transparent url(/i/screen/ablaze-photo.jpg) no-repeat 530px 0; margin-top: -140px; padding-top: 150px; position: relative; z-index: 2; } #ablaze-debut { width: 500px; padding: 0 80px 0 20px; float: left; /*border-right: 1px solid #e6e6e6;*/ margin: 0 30px 40px 0; position: relative; } #ablaze-debut h2 { background-image: url(/i/screen/ablaze-is-here.gif); width: 248px; height: 42px; } #ablaze-debut h3 { margin-bottom: 0; } #ablaze-debut ul { list-style: none; } #ablaze-debut li { margin-bottom: 1.25em; } #promo-cta { background-image: url(/i/screen/watch-button.png); width: 189px; height: 29px; position: absolute; top: 2px; left: 290px; } #promo-cta:hover, #promo-cta:focus { background-position: 0 -29px; } #upcoming-events { width: 580px; float: left; margin: 0 0 30px 30px; padding: 0 0 0 20px; } #upcoming-events h2 { background-image: url(/i/screen/upcoming-events.gif); width: 600px; height: 25px; margin: 0 0 20px; position: relative; left: -20px; } #upcoming-events ul { list-style: none; } #upcoming-events > ul > li { float: left; width: 290px; } #upcoming-events h3 { margin-bottom: 0.1em; } #home #mailing-list { position: relative; top: 100px; } #mailing-list { width: 319px; float: left; position: relative; top: -10px; } #mailing-list h2 { background-image: url(/i/screen/our-mailing-list.gif); width: 306px; height: 24px; margin: 0 0 20px; } #mailing-list form { position: relative; top: -25px; } #mailing-list label { display: block; } label[for="uytd-uytd"] { background-image: url(/i/screen/email-address-label.gif); width: 85px; height: 12px; position: relative; top: 15px; } #uytd-uytd { width: 205px; padding: 2px; } #sign-up { position: relative; top: 15px; } /*------------------------------------------- About -------------------------------------------*/ /*#about #content { background: transparent url(/i/screen/band.png) no-repeat 0 0; padding: 334px 0 6em 265px; position: relative; z-index: 2; width: 525px; }*/ #about #wrap { padding-top: 81px; } #about #header h2, #about #nav { z-index: 3; } #about #content { background: transparent url(/i/screen/band2.jpg) no-repeat 0 0; padding: 424px 0 6em 175px; position: relative; z-index: 2; width: 615px; } /*------------------------------------------- Music -------------------------------------------*/ #music #content h2, #home #ablaze h2 { text-indent: 0; } #ablaze { background: transparent url(/i/screen/ablaze-cd.png) no-repeat 0 0; position: relative; z-index: 2; float: none; padding: 70px 0 0 257px; min-height: 220px; width: 477px; margin: -25px 0 0; } #ablaze h2 { font-size: 52px; top: 88px; } #ablaze .date { margin-bottom: 4.5em; } #higher-place { background: transparent url(/i/screen/higher-place-cd.jpg) no-repeat 0 0; } #libre { background: transparent url(/i/screen/libre-cd.jpg) no-repeat 0 0; } /*------------------------------------------- Events -------------------------------------------*/ #events #content { padding: 100px 0 3em 50px; width: 650px; } table.events { width: 508px; } table.events h3 { margin-bottom: 0.1em; } table.events .date { width: 100px; } table.events .date abbr { text-transform: uppercase; position: relative; top: 0.4em; } /*------------------------------------------- Contact -------------------------------------------*/ #contact #main { width: 289px; position: absolute; left: 30px; top: 270px; } #contact #content { padding: 0 0 4em 375px; } #contact form { margin-top: 80px; } #contact input, #contact select { width: 225px; padding: 1px; margin: 0 0 1.5em;} #add-mailing-list { margin-top: 10px; } #contact input#contact_mailing_list { width: auto; } #contact label { height: 18px; } label[for="contact_name"] { background-image: url(/i/screen/your-name.gif); } label[for="contact_email"] { background-image: url(/i/screen/your-email-address.gif); } label[for="contact_subject"] { background-image: url(/i/screen/subject.gif); } label[for="contact_event_date"] { background-image: url(/i/screen/event-date.gif); } label[for="contact_budget"] { background-image: url(/i/screen/estimated-budget.gif); } label[for="contact_message"] { background-image: url(/i/screen/your-message.gif); } label[for="contact_mailing_list"] { background-image: url(/i/screen/add-to-list.gif); position: relative; left: 20px; } #contact form #send-btn { width: auto; margin: 5px 0 10px; }