/*------------------------------------------------------------- Style Sheet: Davy Knowles version: 1.0 author: Satsu website: http://www.satsu.co.uk/ -------------------------------------------------------------*/ /* =Reset CSS http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -------------------------------------------------------------*/ 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } hr { display: none; } /* =Core Layout -------------------------------------------------------------*/ body { font-size: 62.5%; /* set 1em = 10px */ font-family: "lucida grande", arial, helvetica, sans-serif; text-align: center; background: #040101 url(../images/ui/home2.jpg) top center; color: #fff; background-attachment: fixed; } /* =General tags -------------------------------------------------------------*/ p, li { font-size: 1.2em; line-height: 1.2em; } li p { font-size: 1em; margin: 0; } p { margin: 1.5em 0 0 0; } blockquote { margin: 5em 0; font-size: 0.8em;} h1 { width: 170px; height: 100px; position: absolute; top: 10px; z-index: 100; } h1 a { width: 170px; height: 100px; display: block; background: transparent url(../images/ui/logo.png) no-repeat top left; text-indent: -999px;} h1 a:hover { width: 170px; height: 100px; background: transparent url(../images/ui/logo.png) no-repeat 0 -100px; } h1, h2, h3 { font-family: Georgia, times, serif; font-weight: normal; color: #e3dccf; } h2 { font-size: 3em; margin-top: 30px; margin-bottom: 10px; } h3 { font-size: 2.4em; margin-bottom: 0; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } ol li h3, ul li h3 { font-size: 2em; } a { color: #ed7b24; text-decoration: none; } a:hover { text-decoration: underline; } form { position: relative; } form input { border: none; float: left; } form label { display: block; font-size: 1.1em; clear: both; font-weight: normal; color: #578cb5; } form input.text { width: 185px; height: 25px; background: url(../images/ui/input.png) no-repeat; display: block;padding: 0 0.1em; color: #777; margin-bottom: 5px; } form input.submit { width: 59px; height: 25px; background: url(../images/ui/submit.png) no-repeat; text-align: center; display: block; color: #bf4343; margin-top: 5px; } /* =General content -------------------------------------------------------------*/ #container { width: 960px; margin: 0 auto; text-align: left; position: relative; } #content { position: relative; padding-top: 190px; float: left; } .full-width { position: relative; width: 960px; clear: both; float: left; margin-bottom: 30px;} .col { width: 225px; float: left; margin-right: 20px; } .col-double { width: 470px; float: left; margin-right: 20px; } .col-treble { width: 695px; float: left; margin-right: 20px; } .last { margin: 0!important; float: right;} .black { padding: 10px; background: transparent url(../images/ui/black.png); overflow: hidden; } p.meta { font-size: 0.9em; margin: 0.2em 0; } span.accent, span.noun, span.town, span.date { color: #578cb5; } span.town, span.date { font-size: 0.9em; } span.noun { font-style: italic; } span.comments { display: block; border-bottom: 1px solid #578cb5; padding-bottom: 10px; margin-bottom: 10px; padding-top: 3px; } p.meta { font-size: 0.9em; margin: 0.2em 0; } p.caveat { clear: both; } #blog-entry h3 { margin-bottom: 0; margin-right: 130px; } #blog-entry h3 a:hover { color: #fff; } #blog-recent h3 { font-size: 1em; font-family: "lucida grande", tahoma, arial, helvetica, sans-serif; } a.more { background: transparent url(../images/ui/arrow_orange.png) no-repeat right center; color: #000; padding: 2px 20px 2px 5px; font-size: 0.9em; } #flickr p { padding-right: 5px; margin:0 0 10px 0; } #flickr a img { margin: 5px 5px 0 0; border: 3px solid #ed7b24; width:57px; height:57px; } #flickr a:hover img { border: 3px solid #fff; } /* =Main Nav -------------------------------------------------------------*/ ul#nav { position: absolute; top: 110px; left: 0; width: 960px; height: 100px; background: transparent url(../images/ui/nav_strip.png) no-repeat top left; font-size: 2em; padding-left: 20px; } ul#nav li { float: left; height: 40px; margin-top: 30px; } ul#nav li a { display: block; height: 20px; text-indent: -999em; background: transparent url(../images/ui/nav_list.gif) no-repeat top left; } ul#nav li a#n-blog { background-position: 0 0; width: 70px; } ul#nav li a#n-blog:hover { background-position: 0 -20px; } ul#nav li a#n-gallery { background-position: -70px 0; width: 180px; } ul#nav li a#n-gallery:hover { background-position: -70px -20px; } ul#nav li a#n-about { background-position: -250px 0; width: 140px; } ul#nav li a#n-about:hover { background-position: -250px -20px; } ul#nav li a#n-gigs { background-position: -390px 0; width: 70px; } ul#nav li a#n-gigs:hover { background-position: -390px -20px; } ul#nav li a#n-downloads { background-position: -450px 0; width: 130px; } ul#nav li a#n-downloads:hover { background-position: -450px -20px; } ul#nav li a#n-press { background-position: -580px 0; width: 140px; } ul#nav li a#n-press:hover { background-position: -580px -20px; } ul#nav li a#n-contacts { background-position: -720px 0; width: 110px; } ul#nav li a#n-contacts:hover { background-position: -720px -20px; } ul#nav li a#n-shop { background-position: -830px 0; width: 70px; } ul#nav li a#n-shop:hover { background-position: -830px -20px; } ul#nav li a.selected { background-position-y: -20px!important; } /* =Home -------------------------------------------------------------*/ #home #shop { width: 470px; margin-right: 490px; margin-bottom: 20px;} #home #shop h2 { font-size: 5em; color: #e3dccf; } #home #shop h2 em { display: block; font-size: 0.5em; line-height: 1em;} #home #shop h2 a:hover { color: #fff; } #home #shop blockquote p { padding-right: 20px; color: #4e8b9a; font-size: 1.7em; } #home #shop blockquote p cite { display: block; margin-top: 0.3em; font-size: 0.6em;} #home #shop blockquote { margin: -1em 0 0 0;} #home #shop ul#buy-it { clear: both; height: 35px; margin: 10px 0 10px -3px;} #home #shop ul#buy-it li { text-indent: -999em; width: 86px; height: 35px; float: left; margin-right: 10px; } #home #shop ul#buy-it li a { display: block; width: 86px; height: 35px; } #home #shop ul#buy-it li#amazon a { display: block; width: 102px; height: 35px; } #home #shop ul#buy-it li#itunes a { background: transparent url(../images/ui/buy_itunes.png) no-repeat top left; } #home #shop ul#buy-it li#itunes a:hover { background: transparent url(../images/ui/buy_itunes.png) no-repeat bottom left; } #home #shop ul#buy-it li#blix a { background: transparent url(../images/ui/buy_blix.png) no-repeat top left; } #home #shop ul#buy-it li#blix a:hover { background: transparent url(../images/ui/buy_blix.png) no-repeat bottom left; } #home #shop ul#buy-it li#amazon a { background: transparent url(../images/ui/buy_amazon.png) no-repeat top left; } #home #shop ul#buy-it li#amazon a:hover { background: transparent url(../images/ui/buy_amazon.png) no-repeat bottom left; } #home #forum a { display: block; width: 127px; height: 141px; position: absolute; top: 410px; right: -60px; background: transparent url(../images/ui/visit-forum.png) no-repeat top left; text-indent: -999em; margin-top: 10px; } #home #forum a:hover { background: transparent url(../images/ui/visit-forum.png) no-repeat bottom left; } #home #gigs ol li { margin-bottom: 0.5em; } #home #gigs ol li a { display: block; line-height: 1.5em; } #home #blog-entry { position: relative; background: transparent url(../images/ui/blog_plectrum.png) no-repeat top right; margin-top: -90px; padding-top: 90px; } #home #blog-recent { float: right; margin-right: 0; } #home #blog-recent ol li { float: left; background: transparent url(../images/ui/arrow.png) right center; display: inline; width: 205px; margin-left: 10px; margin-bottom: 1em; padding: 5px 10px;} #home #blog-recent ol { float: left; padding: 10px 10px 0 0; margin-bottom: 20px; margin-left: -10px;} #home #media { position: absolute; top: 250px; right: 0; } #home #media h2 { text-align: right; margin-bottom: 0; } #home ul#social li { line-height: 1.9em;} #home ul#social li a { background: transparent url(../images/ui/arrow_orange.png) no-repeat right center; color: #000; padding: 2px 20px 2px 5px; font-size: 0.9em; } #banner-ad { position: absolute; top: 30px; right: 5px; } /* = Gigs -------------------------------------------------------------*/ #tour { background: #040101 url(../images/ui/gigs.jpg) top center; background-attachment: fixed; } #tour #dates h2 { clear: both; } #tour #dates h3 { clear: both; margin: 1.5em 0 0.5em 0; } #tour #dates p.intro { padding-right: 600px; margin: 1.5em 0 3em 0;} #tour #dates ol { margin-bottom: 120px; clear: both; } #tour #dates ol li { float: left; background: transparent url(../images/ui/arrow.png) no-repeat right center; display: inline; width: 200px; margin-right: 20px; margin-bottom: 20px; padding: 5px 10px; } #tour #dates ol li:hover { background: transparent url(../images/ui/arrow_blue.png) no-repeat right center; } #tour #dates ol li a { display: block; line-height: 1.5em; } #tour #dates li:hover span.date, #tour #dates li:hover span.town { color: #fff; } /* = About -------------------------------------------------------------*/ #about { background: #040101 url(../images/ui/about.jpg) top center; background-attachment: fixed; } #about h2.equipment { margin-bottom: 0; } #about #twitter { position: absolute; top: 80px; left:495px; background: transparent url(../images/ui/twitter.png) top left; padding: 20px 0;} #about #twitter h2 { text-indent: -999em; } #about #twitter #twitter_update_list { margin: 0 0 0 10px; font-style: italic; font-size: 0.9em; color: #578cb5; } #about #twitter a#follow { margin-left: 10px; margin-top: 2px; display: inline-block; } #about img { border: 3px solid #fff; margin-top: 2em; } #about .guitar { font-size: 0.9em; font-style: italic; } #about .guitar ul { margin-top: 1.5em; padding: 10px; background: transparent url(../images/ui/black.png); } #about .guitar ul li { color: #578cb5; margin-bottom: 0.5em; font-size: 1em; font-style: italic; } /* = Blog -------------------------------------------------------------*/ #blog { background: #040101 url(../images/ui/blog.jpg) top center; background-attachment: fixed;} #blog #twitter, #blog-article #twitter { z-index: 100; position: absolute; top: 10px; left:295px; background: transparent url(../images/ui/twitter2.png) no-repeat top left; width: 405px; } #blog #twitter h2, #blog-article #twitter h2 { text-indent: -999em; } #twitter #twitter_update_list { margin: -20px 0 0 82px; font-style: italic; font-size: 0.9em; color: #578cb5; } #twitter a#follow { margin-left: 82px; margin-top: 2px; display: inline-block; } #blog-carousel { float: left; clear: both; margin-top: 10px; } #blog-carousel ol li { float: left; margin-right: 20px; position: relative; width: 225px; margin-bottom: 10px; } #blog-carousel ol li.post-a { background: transparent url(../images/ui/polaroid-1.png) no-repeat top left; } #blog-carousel ol li.post-b { background: transparent url(../images/ui/polaroid-2.png) no-repeat top left; } #blog-carousel ol li.post-c { background: transparent url(../images/ui/polaroid-3.png) no-repeat top left; } #blog-carousel ol li.post-d { background: transparent url(../images/ui/polaroid-4.png) no-repeat top left; margin-right: 0;} #blog-carousel ol li p.meta { margin: 0.5em 0; } #blog-carousel ol li p { margin: 1.5em 0; } #blog-carousel { position: relative; } #blog-carousel h3 { font-size: 1.1em; font-family: "lucida grande", arial, helvetica, sans-serif;} #blog-carousel .entry p { font-size: 0.9em; } #blog-carousel .entry { width: 205px; background: transparent url(../images/ui/arrow_up.png) no-repeat; margin-top: 250px; padding: 40px 10px 30px 10px; min-height: 180px; position: relative; } #blog-carousel .entry p a.more { position: absolute; bottom: 10px; left: 10px;} #blog-carousel img { width: 195px; height: 147px; position: absolute; top: 17px; left: 14px; } #blog-article { background: #040101 url(../images/ui/about.jpg) top center; background-attachment: fixed;} #blog-article .entry #polaroid { float: right; margin: 10px 0 10px 10px; background: transparent url(../images/ui/polaroid-4.png) no-repeat top left; width: 225px; height: 240px; } #blog-article .entry img { margin-top:17px; margin-left: 14px; } #blog-article .entry { margin-bottom: 30px;} #blog-article #flickr, #blog-article #links { margin-top: 65px!important; } #blog-article #links ul li { line-height: 1.9em;} #blog-article #links ul li a { background: transparent url(../images/ui/arrow_orange.png) no-repeat right center; color: #000; padding: 2px 20px 2px 5px; font-size: 0.9em; } #blog-article .comments { margin: 40px 0 20px 0; padding-top: 20px; border-top: 1px solid #ed7b24; } #blog-article .comments ol li { margin-top: 20px; } #blog-article .comments ol li.comment-odd { padding: 10px; background: transparent url(../images/ui/black-40.png); } #blog-article .comments ol li.comment-even { padding: 10px; background: transparent url(../images/ui/black-60.png); } #blog-article .comments ol li p { margin: 1.5em 0;} #blog-article .comments form { margin-top: 20px;} #blog-article .comments form label { margin-bottom: 5px; } #blog-article .comments form input.text { margin-bottom: 20px; } #blog-article .comments form textarea { margin-bottom: 10px; width: 100%; height: 100px;} #blog-article .comments form img { clear: both !important; float: left !important; margin: -5px 0 0 0; } #blog-article .comments form label.submit { margin-top: 20px; clear: both; color: } #blog-article .comments form input.submit{ width: 59px; height: 25px; background: url(../images/ui/submit.png) no-repeat; text-align: center; display: block; color: #bf4343; margin-top: 15px; clear: both; } /* = Media Gallery -------------------------------------------------------------*/ #m-gallery { background: #040101 url(../images/ui/gigs.jpg) top center; background-attachment: fixed;} #m-gallery #f-gallery { width: 468px; border: 1px solid #274b67; height: 600px; background: transparent url(../images/ui/black-60.png); } #m-gallery .media-player { margin-bottom: 20px; height: 202px; width: 380px; padding-top: 16px; padding-left: 80px; background: transparent url(../images/ui/screen.png) no-repeat; padding-bottom: 30px;} #m-gallery .media-player div { margin-bottom: 40px;} /* = Press Tent -------------------------------------------------------------*/ #press { background: #040101 url(../images/ui/gigs.jpg) top center; background-attachment: fixed; } #press h2 { clear: both; } #press p.intro { padding-right: 600px; margin: 1.5em 0 3em 0;} #press #downloads ol { margin-top: 20px; clear: both; } #press #downloads ol li { margin-bottom: 0.5em; float: left; background: transparent url(../images/ui/arrow.png) no-repeat right center; display: inline; width: 180px; margin-right: 20px; margin-bottom: 20px; padding: 5px 10px; } #press #downloads ol li:hover { background: transparent url(../images/ui/arrow_blue.png) no-repeat right center; } #press #downloads ol li a { display: block; line-height: 1.5em; } #press #addresses ol { margin-top: 10px; float: left; clear: both; } #press #addresses ol li { margin-bottom: 0.5em; margin-right: 20px; margin-bottom: 20px; background: transparent url(../images/ui/black.png); padding: 10px; } #press #addresses ol li a { display: block; line-height: 1.5em; } #press #addresses ol li span.noun { display: block; font-style: normal; margin-top: 3px;} /* = downloads -------------------------------------------------------------*/ #downloads { background: #040101 url(../images/ui/gigs.jpg) top center; background-attachment: fixed; } #downloads h3 { margin-bottom: 10px; } #downloads h4 { color: #578cb5; margin: 10px 0 -10px 0; background: transparent url(../images/ui/black.png); padding: 3px; } #downloads #wallpapers ul { float: left; margin-top: 5px; margin-bottom: 20px; } #downloads #wallpapers li { float: left; position: relative; } #downloads #wallpapers li.large img { width: 222px; height: 137px; } #downloads #wallpapers li.medium img { width: 117px; height: 72px; } #downloads #wallpapers li.small img { width: 85px; height: 52px; } #downloads li a img { border: 3px solid white; margin-right: 6px; } #downloads #wallpapers li a.more { position: absolute; top: 3px; left: 3px; font-size: 0.6em; background: url(../images/ui/black.png); color: orange; display: block; } #downloads a:hover img, #downloads #iphone a:hover img { border: 3px solid orange; } #downloads #iphone { position: relative; background: transparent url(../images/ui/iphone.png) no-repeat; width: 225px; height: 286px; } #downloads #iphone a img { position: absolute; left: 12px; top: 48px; width: 123px; height: 188px; border: 3px solid white; } #downloads #iphone a.more { position: absolute; top: 51px; left: 15px; font-size: 0.6em; background: url(../images/ui/black.png); color: orange; } #downloads #street-team { position: relative; } #downloads #street-team p { font-size: 1.1em; } #downloads #street-team img { margin: 20px 0 0 0; border: 3px solid white; } #downloads #street-team ul li { float: left; background: transparent url(../images/ui/arrow_orange.png) no-repeat right center; display: inline; width: 180px;margin-bottom: 0.5em; padding: 5px 10px; } #downloads #street-team ul li a { display: block; line-height: 1.5em; color: #000; } /* =Search form ------------------------------------------------------------*/ #search { position: absolute; top: 63px; right: 0; } #search form { position: relative; } /* = Contacts -------------------------------------------------------------*/ #contacts { background: #040101 url(../images/ui/gigs.jpg) top center; background-attachment: fixed; } #contacts #addresses ol { float: left; margin-bottom: 120px; clear: both; } #contacts #addresses ol li { margin-bottom: 0.5em; float: left; background: transparent url(../images/ui/arrow.png) no-repeat right center; display: inline; width: 200px; margin-right: 20px; margin-bottom: 20px; padding: 5px 10px; } #contacts #addresses ol li:hover { background: transparent url(../images/ui/arrow_blue.png) no-repeat right center; } #contacts #addresses ol li a { display: block; line-height: 1.5em; } /* = Street Team -------------------------------------------------------------*/ #street-team { background: #040101 url(../images/ui/gigs.jpg) top center; background-attachment: fixed; } #street-team .full-width { margin-top: 40px; } #street-team #teamer img { width: 100px; height: 100px; margin-right: 10px; float: left; background: transparent url(../images/ui/teamer-bg.png) top right; padding: 5px 15px 5px 5px; } #street-team h4 { background: transparent url(../images/ui/arrow_blue.png) no-repeat right center; margin-bottom: 20px; padding: 5px 10px; } #street-team #posters img { float: left; margin-right: 10px; margin-bottom: 10px; } #street-team #posters ul { clear: both; margin-top: 10px; } #street-team #posters ul li { float: left; } #street-team #posters ul li a { background: transparent url(../images/ui/arrow_orange.png) no-repeat right center; color: #000; padding: 2px 20px 2px 5px; font-size: 0.9em; margin-right: 10px; } #street-team #help ul { margin-top: 10px; } #street-team #help ul li { background: transparent url(../images/ui/black.png); padding: 5px 10px; margin-bottom: 10px; } #street-team #help ul li em { color: #578cb5; display: block; font-style: italic; } #street-team ul#social { margin-top: 10px; } #street-team ul#social li { line-height: 1.9em;} #street-team ul#social li a { background: transparent url(../images/ui/arrow_orange.png) no-repeat right center; color: #000; padding: 2px 20px 2px 5px; font-size: 0.9em; } #street-team #forum { } #street-team #forum a { display: block; width: 127px; height: 141px; background: transparent url(../images/ui/visit-forum.png) no-repeat top left; text-indent: -999em; margin-top: 10px; } #street-team #forum a:hover { background: transparent url(../images/ui/visit-forum.png) no-repeat bottom left; } #street-team .social-media { margin: 20px 0 10px 0; } #street-team form { padding-top: 10px; } #street-team form label { margin-bottom: 3px; } #street-team .sign-up .subscribe { cursor: pointer; color: red; } #street-team .sign-up .subscribe:hover { cursor: pointer; color: black; } #street-team .sign-up input { margin-bottom: 10px; } #street-team .sign-up .selection { margin-bottom: 10px; display: block;} #street-team .sign-up .check { clear: left; } /* =Footer -------------------------------------------------------------*/ #footer { clear:both; float: left; width: 960px; margin-top: 50px; padding: 0 0 30px 0; border-top: 1px solid #ed7b24; color: #578cb5; position: relative; } #footer p { line-height: 2em; font-size: 0.9em; } #footer a#satsu { text-indent: -999em; background: transparent url(../images/ui/satsu.png) no-repeat top left; width: 102px; height: 18px; display: inline-block; margin-left: 5px; } #footer p.footer-addition { position: absolute; top: 0; right: 0; } /* Removes fieldset borders. even on Opea 7 */ fieldset { border: 1px solid transparent; } label { display: block; font-family: arial, sans-serif; font-weight: bold; margin: 0.2em; } /* =Tables -------------------------------------------------------------*/ table { border-spacing: 0; border-collapse: collapse; } td { text-align: left; font-weight: normal; } /* =Clearing -------------------------------------------------------------*/ /* Class for self clearing - use this where ever possible */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* Class for clearing floats */ .clear { clear: both; } /* =Misc 1 -------------------------------------------------------------*/ /* =Misc 2 -------------------------------------------------------------*/