/*------------------------------------------------------------------------------------------------------------------------------------------------- Basic Style Sheet Version: 1.1 Author: Nathan Winter Website: http://www.industriarts.com -------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Global -------------------------------------------------------------------------------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } html, body { height: 100% } body { color: #808080; font-size: 62.5%; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #000; background-image: url(../../i/mainbg.gif); background-repeat: repeat-x; background-position: 0 393px; } img { margin: 0; padding: 0; border-style: none; } a, a:link, a:focus, a:active, a:hover { outline: none; } /* Layout -------------------------------------------------------------------------------------------------------------------------------------------------*/ #wrapper { position: relative; left: 50%; width: 960px; margin-left: -480px; } #headtop { background-image: url(../../i/interface/headtop.gif); background-repeat: no-repeat; height: 71px; } #navtop { background-image: url(../../i/interface/navtop.gif); background-repeat: no-repeat; height: 55px; } #navmiddle { position: relative; left: 81px; width: 799px; height: 63px; } #navbottom { background-image: url(../../i/interface/navbottom.gif); background-repeat: no-repeat; height: 131px; } #headbottom { background-repeat: no-repeat; height: 284px; } #content { background-image: url(../../i/content/background.gif); background-repeat: no-repeat; width: 960px; height: 440px; } #leftcolumn { width: 603px; float: left; } #rightcolumn { width: 307px; float: right; } #footer { font-size: 1.6em; width: 960px; float: left; clear: both; margin-top: 40px; padding-top: 10px; padding-bottom: 8px; border-top: 2px solid #333; border-bottom: 2px solid #333; } #copyright { width: 960px; float: left; margin-top: 20px; } #biophoto { background-image: url(../../i/content/biophoto.gif); background-repeat: no-repeat; position: relative; width: 210px; height: 288px; float: left; margin-right: 10px; } /* Main Navigation Links -------------------------------------------------------------------------------------------------------------------------------------------------*/ #mainnav .news a { background-image: url(../../i/nav/nav-news.gif); background-repeat: no-repeat; background-position: left top; width: 92px; height: 63px; float: left; display: block; } #mainnav .bio a { background-image: url(../../i/nav/nav-bio.gif); background-repeat: no-repeat; background-position: left top; width: 68px; height: 63px; float: left; display: block; } #mainnav .djmixes a { background-image: url(../../i/nav/nav-djmixes.gif); background-repeat: no-repeat; background-position: left top; width: 145px; height: 63px; float: left; display: block; } #mainnav .djgigs a { background-image: url(../../i/nav/nav-djgigs.gif); background-repeat: no-repeat; background-position: left top; width: 121px; height: 63px; float: left; display: block; } #mainnav .design a { background-image: url(../../i/nav/nav-design.gif); background-repeat: no-repeat; background-position: left top; width: 114px; height: 63px; float: left; display: block; } #mainnav .gallery a { background-image: url(../../i/nav/nav-gallery.gif); background-repeat: no-repeat; background-position: left top; width: 129px; height: 63px; float: left; display: block; } #mainnav .contact a { background-image: url(../../i/nav/nav-contact.gif); background-repeat: no-repeat; background-position: left top; width: 130px; height: 63px; float: left; display: block; } /* Main Navigation Hover States -------------------------------------------------------------------------------------------------------------------------------------------------*/ #mainnav .news a:hover, #mainnav .bio a:hover, #mainnav .djmixes a:hover, #mainnav .djgigs a:hover, #mainnav .design a:hover, #mainnav .gallery a:hover, #mainnav .contact a:hover { background-position: right top; } /* Main Navigation Selected States -------------------------------------------------------------------------------------------------------------------------------------------------*/ #newspage #mainnav .news a, #biopage #mainnav .bio a, #djmixespage #mainnav .djmixes a, #djgigspage #mainnav .djgigs a, #designpage #mainnav .design a, #gallerypage #mainnav .gallery a, #contactpage #mainnav .contact a { background-repeat: no-repeat; background-position: right top; cursor: default; } #newspage #mainnav .news a { background-image: url(../../i/nav/nav-news-on.gif); } #biopage #mainnav .bio a { background-image: url(../../i/nav/nav-bio-on.gif); } #djmixespage #mainnav .djmixes a { background-image: url(../../i/nav/nav-djmixes-on.gif); } #djgigspage #mainnav .djgigs a { background-image: url(../../i/nav/nav-djgigs-on.gif); } #designpage #mainnav .design a { background-image: url(../../i/nav/nav-design-on.gif); } #gallerypage #mainnav .gallery a { background-image: url(../../i/nav/nav-gallery-on.gif); } #contactpage #mainnav .contact a { background-image: url(../../i/nav/nav-contact-on.gif); } /* Pageheaders -------------------------------------------------------------------------------------------------------------------------------------------------*/ .pageheader-news { background-image: url(../../i/content/pageheaders.gif); background-position: 0 413px; position: relative; } .pageheader-bio { background-image: url(../../i/content/pageheaders.gif); background-position: 0 354px; position: relative; } .pageheader-djmixes { background-image: url(../../i/content/pageheaders.gif); background-position: 0 295px; position: relative; } .pageheader-djgigs { background-image: url(../../i/content/pageheaders.gif); background-position: 0 236px; position: relative; } .pageheader-design { background-image: url(../../i/content/pageheaders.gif); background-position: 0 177px; position: relative; } .pageheader-gallery { background-image: url(../../i/content/pageheaders.gif); background-position: 0 118px; position: relative; } .pageheader-contact { background-image: url(../../i/content/pageheaders.gif); background-position: 0 59px; position: relative; } /* Sidebar -------------------------------------------------------------------------------------------------------------------------------------------------*/ .sb-socialnetworking { background-image: url(../../i/content/header-socialnetwork.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 13px; margin-bottom: 20px; } .sb-1{ background-image: url(../../i/content/sidebar-1.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 11px; } .sb-vampirefreaks a { background-image: url(../../i/content/sidebar-vflink.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 87px; display: block; } .sb-2{ background-image: url(../../i/content/sidebar-2.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 103px; } .sb-myspace a { background-image: url(../../i/content/sidebar-mslink.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 87px; display: block; } .sb-3 { background-image: url(../../i/content/sidebar-3.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 70px; margin-bottom: 30px; } .sb-externalLinks { background-image: url(../../i/content/header-links.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 13px; margin-bottom: 20px; } .sb-4 { background-image: url(../../i/content/sidebar-4.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 12px; } .sb-eventsLink a { background-image: url(../../i/content/sidebar-eventslink.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 35px; display: block; } .sb-eventsLink a:hover { background-position: right top; } .sb-5 { background-image: url(../../i/content/sidebar-5.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 75px; } .sb-blogLink a { background-image: url(../../i/content/sidebar-bloglink.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 35px; display: block; } .sb-blogLink a:hover { background-position: right top; } .sb-6 { background-image: url(../../i/content/sidebar-6.gif); background-repeat: no-repeat; background-position: left top; width: 307px; height: 108px; } /* Headings -------------------------------------------------------------------------------------------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-weight: normal; font-style: normal; } h1 a { background-image: url(../../i/mainlogo.gif); background-repeat: no-repeat; text-indent: -5000px; position: relative; top: 83px; width: 480px; height: 207px; display: block; } h1 a:hover { border-style: none; } h2 { text-indent: -5000px; position: relative; width: 432px; height: 59px; margin-bottom: 20px; padding: 0; } h3 { color: #f0f0f0; font-size: 1.8em; font-weight: bold; background-image: url(../../i/content/datebg.gif); background-position: left top; text-transform: uppercase; height: 24px; margin-bottom: 20px; padding-top: 5px; padding-left: 10px; border-bottom: 2px solid #99d553; width: 603px; } h4 { font-size: 2.8em; } h5 { color: #cceba9; text-transform: uppercase; font-size: 2.2em; margin-bottom: 10px; } h6 { color: #99d553; font-size: 4.5em; font-weight: bold; } /* Lists -------------------------------------------------------------------------------------------------------------------------------------------------*/ ul { list-style-type: none; } ul a { text-indent: -5000px; } #mainnav ul { width: 799px; float: left; margin: 0; padding: 0; list-style-type: none; } #mainnav ul li { float: left; } #mainnav a:hover { border-style: none; } ul.detailslist { border-left: 4px solid #333; margin-bottom: 20px; padding-left: 10px; color: #f0f0f0; font-size: 1.6em; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; line-height: 1.5em; } ul.event { border-left: 4px solid #333; padding-left: 10px; color: #f0f0f0; font-size: 1.6em; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; line-height: 1.5em; margin-top: 20px; } ul.event li { padding: 0px; margin: 0px; line-height: 1.5em; } ul.gigslist { margin-bottom: 20px; margin-top: 20px; color: #f0f0f0; font-size: 1.6em; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; line-height: 1.5em; border-left: 4px solid #333; padding-left: 10px; margin-bottom:10px; } ol.tracklist { float: left; margin: 0 0 20px; padding-bottom: 20px; font-size: 1.2em; font-style: italic; line-height: 1.6em; list-style-type: decimal-leading-zero; list-style-position: inside; border-bottom: 2px dotted #333; } #rightcolumn ul { width: 307px; margin: 0; padding: 0; list-style-type: none; } #rightcolumn a:hover { border-style: none; } ul.gigsnav { width: 603px; float: left; margin-bottom: 20px; padding: 0; list-style-type: none; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-size: 1.6em; } ul.gigsnav li { float: left; padding-right: 10px; } ul.gigsnav a { font-weight: bold; color: #f0f0f0; } #footer ul { width: 960px; float: left; margin: 0; padding: 0; list-style-type: none; } #footer ul li { float: left; padding-right: 5px; } #footer ul a { color: #f0f0f0; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-weight: bold; text-transform: uppercase; } /* Basic Typography -------------------------------------------------------------------------------------------------------------------------------------------------*/ strong { color: #f0f0f0; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-weight: bold; text-transform: uppercase; font-style: normal; } em { font-style: italic; } p { font-size: 1.2em; text-align: left; margin-bottom: 20px; } /* Styles -------------------------------------------------------------------------------------------------------------------------------------------------*/ .green { color: #99d553; } .boldgreen { color: #99d553; font-weight: bold; } .greencaps { color: #cceba9; text-transform: uppercase; } .intro { color: #f0f0f0; font-size: 1.8em; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-style: italic; line-height: 1.8em; margin-top: 20px; } .options { display: block; margin: 20px 0 30px 0; padding-bottom: 10px; border-bottom: 2px dotted #333; } .highlight { background-color: #242424; padding: 20px; } /* BuzzBoost -------------------------------------------------------------------------------------------------------------------------------------------------*/ .headline a { font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-size: 4.5em; font-weight: bold; } .headline a:hover { border: none; } div#creditfooter { display: none; } #rss ul { float: right; position: relative; margin: 0px; padding: 0px; list-style-type: none; } #rss ul li { padding-left: 20px; line-height: 20px; } #rss ul li a { font-size: 1.2em; } .rss { background-image: url(../../i/content/rss.gif); background-repeat: no-repeat; background-position: left center; } .email { background-image: url(../../i/content/email.gif); background-repeat: no-repeat; background-position: left center; } /* Image Lists -------------------------------------------------------------------------------------------------------------------------------------------------*/ ul.gallerythumbs { margin-top: 20px; list-style-type: none; width: 613px; } ul.gallerythumbs li { width: 88px; height: 120px; float: left; margin-right: 20px; margin-bottom: 20px; list-style-type: none; } ul.gallerythumbs a:hover { border-style: none; } .gallerythumb { background-color: #000; padding: 4px; border: solid 2px #808080; } .gallerythumb:hover { border-color: #99d553; } /* Links -------------------------------------------------------------------------------------------------------------------------------------------------*/ a:link, a:visited { color: #99d553; text-decoration: none; } a:hover { color: #f0f0f0; text-decoration: none; border-bottom: 2px solid #99d553; } a:active { color: #99d553; } /* Contact Form -------------------------------------------------------------------------------------------------------------------------------------------------*/ #contactform { margin-top: 20px; } fieldset { width: 603px; margin-bottom: 20px; padding: 0; border: solid 2px #333; } label { margin-top: 20px; margin-bottom: 5px; margin-left: 20px; display: block; } input { width: 200px; margin-left: 20px; color: #f0f0f0; background-color: #333; padding: 5px; border-style: none; border-width: 0; } textarea { color: #f0f0f0; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #333; margin-left: 20px; padding: 5px; border-style: none; border-width: 0; width: 300px; height: 100px; margin-bottom: 20px; display: block; } legend { color: #99d553; font-size: 1.2em; margin-left: 20px; padding-right: 5px; padding-left: 5px; } #submit, #reset { background-color: #333; width: 100px; } #submit:hover, #reset:hover { color: #000; background-color: #99d553; cursor: pointer; } /* Floats and Clears -------------------------------------------------------------------------------------------------------------------------------------------------*/ .left { float: left; } .right { float: right; } .clear { clear: both; } /* 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: #99d553; 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(i/lightbox/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(i/lightbox/nextlabel.gif) right 15% no-repeat; } #imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #99d553; 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: bold; color: #000; } #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; outline: none; } #imageData #bottomNavClose:hover { border-style: none; } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }