/* [Villainous Records] -------------------------------------------------- author(s): C Goodchild (chris_goodchild@hotmail.co.uk) date: 06/11/2009 description: Global stylesheet */ /* RESET (Eric Meyer - http://meyerweb.com/) -------------------------------------------------- */ 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, 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-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } /* BASE: Default font & background/foreground styles -------------------------------------------------- */ body { font: normal normal normal 62.5%/1.3 Arial, Verdana, Helvetica, sans-serif; /* 10px base font size */ background: #000 url(../images/layout/stripes.gif) 0 0 repeat; background-attachment: fixed; color: #CCC; } /* COMMON: Headings, paragraphs, links, lists, etc -------------------------------------------------- */ h1, h2, h3 { display: block; line-height: 1; } p { margin-bottom: 20px } /* IE applies :active in place of :focus */ a:link, a:visited { text-decoration: none; border-bottom: 1px solid #544763; color: #544763; } a:hover, a:active, a:focus { text-decoration: none; background: #000; color: #544763; } a img { display: block } ul { list-style: none; margin: 0; } ol {} li {} /* ACCESSIBILITY: Skip links appear on focus -------------------------------------------------- */ ul.skiplinks a { position: absolute; top: -1000px; left: -1000px; background: #333; border: 1px solid #666; font-size: 1.4em; font-weight: bold; color: #FFF; } ul.skiplinks a:focus { position: absolute; top: 10px; left: 20px; } /* WARNINGS: Upgrade browser & JS disabled -------------------------------------------------- */ #upgrade-browser { } .js-enabled #no-js { display: none } /* CONTAINER -------------------------------------------------- */ #wrapper { width: 996px; margin: 0 auto; background: url(../images/layout/fade.png) 0 0 repeat-y; } .container { overflow: hidden; width: 960px; margin: 0 auto; background: #000; } /* GRID: Global -------------------------------------------------- */ #news, #artists, #catalogue, #shop, #contact { width: auto; margin: 0 20px 10px 20px; padding: 20px; } /* HEADER -------------------------------------------------- */ #header { position: relative; overflow: hidden; width: 920px; margin: 12px auto; } #logo { width: 430px; height: 133px; background: url(../images/layout/logo.jpg) 0 0 no-repeat; } #logo h1 { text-indent: -9999px; } #navigation { position: absolute; bottom: 0; right: 0; text-align: right; } #navigation li { display: inline-block; margin-left: 12px; font-size: 2em; text-transform: uppercase; } #navigation li a { display: block; height: 21px; background: url(../images/navigation/primary.gif); font-size: 0; text-indent: -9999px; overflow: hidden; } #navigation li.n1 a { width: 83px; background-position: 0 0; } #navigation li.n2 a { width: 113px; background-position: 0 -21px; } #navigation li.n3 a { width: 53px; background-position: 0 -42px; } #navigation li.n4 a { width: 92px; background-position: 0 -84px; } #navigation li.n1 a:hover { width: 83px; background-position: -120px 0; } #navigation li.n2 a:hover { width: 113px; background-position: -120px -21px; } #navigation li.n3 a:hover { width: 53px; background-position: -120px -42px; } #navigation li.n4 a:hover { width: 92px; background-position: -120px -84px; } #navigation li a, #navigation li a:visited { border: none; color: #FFF; } #navigation li a:hover, #navigation li a:active, #navigation li a:focus { color: #544763; } #social { position: absolute; top: 0; right: 0; margin: 0; padding: 10px 0 0 10px; background: #0C0C0C; border: 1px solid #191919; } #social h2 { margin-bottom: 10px; font-size: 1.2em; color: #FFF; } .social-links { overflow: hidden; margin: 0 0 10px 0; padding: 0; } #fancy_ajax p { clear: both; } #header .social-links { overflow: hidden; clear: both; margin-bottom: 30px } #header .social-links li { float: left; width: 32px; height: 32px; margin: 0 10px 0 0; padding: 0; } #header .social-links li a { display: block; height: 32px; border: none; text-indent: -9999px; background: url(../images/icons/socials.gif) 0 0 no-repeat; } #header .social-links li.youtube a { background-position: -32px 0; } #header .social-links li.lastfm a { background-position: -64px 0; } #header .social-links li.twitter a { background-position: -96px 0; } #header .social-links li.facebook a { background-position: -128px 0; } #header .social-links li.sonic a { background-position: -160px 0; } #header .social-links li.myspace a:hover { background-position: 0 -32px; } #header .social-links li.youtube a:hover { background-position: -32px -32px; } #header .social-links li.lastfm a:hover { background-position: -64px -32px; } #header .social-links li.twitter a:hover { background-position: -96px -32px; } #header .social-links li.facebook a:hover { background-position: -128px -32px; } #header .social-links li.sonic a:hover { background-position: -160px -32px; } #artists .social-links { overflow: hidden; clear: both; margin-bottom: 30px } #artists .social-links li { float: left; width: 32px; height: 32px; margin: 0 10px 0 0; padding: 0; } #artists .social-links li a { display: block; height: 32px; border: none; text-indent: -9999px; background: url(../images/icons/socials.gif) 0 0 no-repeat; } #artists .social-links li.youtube a { background-position: -32px 0; } #artists .social-links li.lastfm a { background-position: -64px 0; } #artists .social-links li.twitter a { background-position: -96px 0; } #artists .social-links li.facebook a { background-position: -128px 0; } #artists .social-links li.sonic a { background-position: -160px 0; } #artists .social-links li.myspace a:hover { background-position: 0 -32px; } #artists .social-links li.youtube a:hover { background-position: -32px -32px; } #artists .social-links li.lastfm a:hover { background-position: -64px -32px; } #artists .social-links li.twitter a:hover { background-position: -96px -32px; } #artists .social-links li.facebook a:hover { background-position: -128px -32px; } #artists .social-links li.sonic a:hover { background-position: -160px -32px; } /* CONTENT: Page/Block Name -------------------------------------------------- */ /* HEADINGS */ #content h2 { width: 200px; height: 29px; margin-bottom: 30px; background: url(../images/layout/headings.png) 0 0 no-repeat; text-indent: -9999px; } #artists h2 { background-position: 0 -30px } #catalogue h2 { background-position: 0 -60px } #contact h2 { background-position: 0 -120px } #about-us h2 { background-position: 0 -150px } /* NEWS */ #news { width: 880px; background: #191919; } div.new-release { width: 360px; float: left; } div.new-release img { display: block; } ul.feed_data { width: 340px; float: left; background: #000; margin-right: 20px; padding: 10px 10px 0 10px; } ul.feed_data li { margin-bottom: 10px; font-size: 1.2em; } ul.feed_data li p { margin: 0; } ul.feed_data li span { display: block; } ul.feed_data li a { border: none; } div.latest { width: 500px; float: left; margin-right: 20px; } .latest h3 { margin-bottom: 20px; font-size: 2.4em; } .latest p { font-size: 1.4em; } .latest p embed { margin-left: -4px; } /* ARTISTS */ #artists { width: 880px; background: #111; } #sections { width: 880px; overflow: hidden; } #sections ul { width: 3600px; } #sections li { width: 900px; float: left; } #artists img { float: left; display: block; width: 240px; margin-right: 20px; } #artists .info { float: left; display: block; width: 580px; } .info h3 { margin-bottom: 20px; font-size: 2.4em; } .info p { font-size: 1.6em } .info a { padding: 5px 10px; font-weight: bold; background: #000; border: none; } .info a:hover, .info a:active, .info a:focus { color: #CCC; } #controls { float: right; margin-top: 20px; clear: both; } #controls li { position: relative; display: inline; } #controls li a { display: inline-block; height: 30px; margin-left: 10px; background: url(../images/layout/buttons.gif) 0 0 no-repeat; border: none; text-indent: -9999px; font-size: 0; } #controls li.prev a { width: 60px; } #controls li.next a { width: 60px; background-position: -60px 0; } #controls li.prev a:hover { background-position: 0 -30px; } #controls li.next a:hover { background-position: -60px -30px; } /* CATALOGUE */ #catalogue { width: 880px; min-height: 360px; background: #191919; } #catalogue #target { float: left; width: 610px; min-height: 300px; margin-right: 20px; padding: 16px 20px; background: #000; } #target h3 { clear: both; margin-bottom: 18px; font-size: 1.6em; line-height: 1.2; font-weight: bold; } #target h4 { margin-bottom: 12px; font-size: 1.4em; font-weight: bold; line-height: 1; } #target ul, #target ol, #target p { margin-bottom: 12px; font-size: 1.2em; } #target ol { list-style-position: inside; } #target #cta { width: 180px; float: left; margin-right: 20px; } #cta p { margin: 0; padding: 15px 0; text-transform: uppercase; text-align: center; font-weight: bold; color: #F00; } #cta ul { text-align: center; margin-bottom: 18px; padding-top: 5px; } #cta ul li { margin-bottom: 5px; line-height: 1.5; } #cta ul li a:hover { border: none; background: transparent; color: #FFF; } #target #info { width: 380px; float: left; } #catalogue #releases { float: left; width: 200px; margin: 0; padding: 10px 0 0 10px; background: #000; } #releases li { float: left; width: 40px height: 40px; margin: 0 10px 10px 0; background: #333; } /* CONTACT & ABOUT */ #contact { background: #111 } #contact-form, #about-us { width: 420px; float: left; } #contact-form h3 { font-size: 1.8em; font-weight: bold; margin-bottom: 10px; } #contact-form p { font-size: 1.4em; } #contact-form { margin-right: 40px; } #sendMail legend { display: none; } #sendMail ul { } #sendMail li { margin-bottom: 20px; } #sendMail label, #sendMail input { float: left; } #sendMail label { display: block; width: 100px; padding: 10px; font-size: 1.6em; } #sendMail input, #sendMail textarea { width: 280px; padding: 10px; background: #000; border: none; font: bold 1.6em/1 Arial; color: #544763; } #sendMail textarea { height: 150px; } #sendMail label span { color: #F00; } #sendMail button { display: block; float: right; clear: both; width: 80px; height: 30px; background: url(../images/layout/buttons.gif) -120px 0 no-repeat; border: none; cursor: pointer; } #sendMail button:hover, #sendMail button:focus { background-position: -120px -30px; } #sendMail .error { display: block; padding-top: 2px; font-size: 1.3em; font-weight: bold; color: red; } #sendMail .message .error { margin-left: 120px; } #about-us p { font-size: 1.4em; } /* FOOTER -------------------------------------------------- */ #footer p { float: right; padding-right: 20px; text-align: right; text-transform: uppercase; font-size: 1.4em; color: #333; } /* CLEARFIX: Add "clear" class to container of floats -------------------------------------------------- */ #news:after, #artists:after, #catalogue:after, #shop:after, #contact:after, #sendMail ul li:after, .slide:after, #controls:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #news, #artists, #catalogue, #shop, #contact, #sendMail ul li, #controls, .slide { display: inline-block; } /* IE FIXES: IDs applied to ".container_12" -------------------------------------------------- */ #ie6 {} #ie7 {} #ie8 {}