/*-------------------------------------------------------------------------------------------------------------------------------------------------
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: #000 url(../../i/mainbg.gif) repeat-y fixed 50% top; }
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: 920px; margin-left: -460px; }
#navwrapper { background-image: url(../../i/layout/navbg.gif); background-repeat: no-repeat; width: 920px; height: 78px; }
#mainnav { position: relative; left: 41px; width: 838px; height: 78px; }
#header { background-image: url(../../i/layout/headerbg.gif); background-repeat: no-repeat; height: 211px; }
#contentwrapper { background-image: url(../../i/layout/contentbg.gif); background-repeat: no-repeat; width: 920px; height: 770px; }
#content { position: relative; left: 20px; width: 880px; height: 100%; }
#leftcolumn { width: 278px; float: left; margin-top: 140px; }
#rightcolumn { position: relative; top: 55px; width: 557px; float: right; }
#footerbg { background-image: url(../../i/layout/footerbg.gif); background-repeat: no-repeat; width: 920px; height: 132px; margin-top: 100px; }
#footerwrapper { position: absolute; left: 20px; width: 880px; }
#footernav { font-size: 2.2em; width: 880px; float: left; clear: both; margin-top: 40px; padding-bottom: 20px; border-bottom: 2px solid #333; }
#copyright { width: 880px; float: left; margin-top: 10px; }
#biophoto { background-image: url(../../i/layout/biophoto.gif); background-repeat: no-repeat; position: relative; width: 130px; height: 173px; float: left; margin-right: 20px; margin-bottom: 20px; border: solid 5px #333; }
#biophoto:hover { cursor: crosshair; }

/* Main Navigation Links
-------------------------------------------------------------------------------------------------------------------------------------------------*/
#mainnav a { cursor: crosshair; }
#mainnav .news a { background-image: url(../../i/nav/nav-news.gif); background-repeat: no-repeat; background-position: left top; width: 99px; height: 78px; float: left; display: block; }
#mainnav .bio a { background-image: url(../../i/nav/nav-bio.gif); background-repeat: no-repeat; background-position: left top; width: 64px; height: 78px; float: left; display: block; }
#mainnav .gigs a { background-image: url(../../i/nav/nav-gigs.gif); background-repeat: no-repeat; background-position: left top; width: 84px; height: 78px; float: left; display: block; }
#mainnav .mixes a { background-image: url(../../i/nav/nav-mixes.gif); background-repeat: no-repeat; background-position: left top; width: 97px; height: 78px; float: left; display: block; }
#mainnav .setlists a { background-image: url(../../i/nav/nav-setlists.gif); background-repeat: no-repeat; background-position: left top; width: 130px; height: 78px; float: left; display: block; }
#mainnav .photos a { background-image: url(../../i/nav/nav-photos.gif); background-repeat: no-repeat; background-position: left top; width: 125px; height: 78px; float: left; display: block; }
#mainnav .links a { background-image: url(../../i/nav/nav-links.gif); background-repeat: no-repeat; background-position: left top; width: 93px; height: 78px; float: left; display: block; }
#mainnav .contact a { background-image: url(../../i/nav/nav-contact.gif); background-repeat: no-repeat; background-position: left top; width: 146px; height: 78px; float: left; display: block; }

/* Main Navigation Hover States
-------------------------------------------------------------------------------------------------------------------------------------------------*/
#mainnav .news a:hover, #mainnav .bio a:hover, #mainnav .gigs a:hover, #mainnav .mixes a:hover, #mainnav .setlists a:hover, #mainnav .photos a:hover, #mainnav .links a:hover, #mainnav .contact a:hover { background-position: right top; }

/* Main Navigation Selected States
-------------------------------------------------------------------------------------------------------------------------------------------------*/
#newspage #mainnav .news a, #biopage #mainnav .bio a, #gigspage #mainnav .gigs a, #mixespage #mainnav .mixes a, #setlistspage #mainnav .setlists a, #photospage #mainnav .photos a,  #linkspage #mainnav .links a, #contactpage #mainnav .contact a { background-position: right top; cursor: default; }

/* Headings
-------------------------------------------------------------------------------------------------------------------------------------------------*/
h1 a { background-image: url(../../i/layout/mainlogo.gif); background-repeat: no-repeat; text-align: left; text-indent: -5000px; position: relative; top: 92px; left: 343px; width: 548px; height: 67px; display: block; }
h1 a:hover { border-style: none; }
h2 { text-indent: -5000px; position: relative; width: 214px; height: 35px; margin-bottom: 50px; padding: 0; }
h3 { color: #00b3e2; font-size: 1.5em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5em; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px solid #808080; display: block; }
h4 { color: #fff; font-size: 3em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; margin-bottom: 10px; }
h5 { color: #00b3e2; font-size: 1.5em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5em; }

/* Pageheaders
-------------------------------------------------------------------------------------------------------------------------------------------------*/
.pageheader-news { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 280px; position: relative; }
.pageheader-bio { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 245px; position: relative; }
.pageheader-gigs { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 210px; position: relative; }
.pageheader-mixes { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 175px; position: relative; }
.pageheader-setlists { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 140px; position: relative; }
.pageheader-photos { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 105px; position: relative; }
.pageheader-links { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 70px; position: relative; }
.pageheader-contact { background-image: url(../../i/layout/pageheaders.gif); background-position: 0 35px; position: relative; }

/* Sidebar
-------------------------------------------------------------------------------------------------------------------------------------------------*/
.sb-calendar a { background-image: url(../../i/layout/sidebar-calendar.gif); background-repeat: no-repeat; background-position: left top; width: 278px; height: 63px; display: block; }
.sb-calendar a:hover { background-position: right top; }
.sb-myspace a { background-image: url(../../i/layout/sidebar-myspace.gif); background-repeat: no-repeat; background-position: left top; width: 278px; height: 63px; display: block; }
.sb-myspace a:hover { background-position: right top; }
.sb-facebook a { background-image: url(../../i/layout/sidebar-facebook.gif); background-repeat: no-repeat; background-position: left top; width: 278px; height: 63px; display: block; }
.sb-facebook a:hover { background-position: right top; }

/* Global Lists
-------------------------------------------------------------------------------------------------------------------------------------------------*/
ul { list-style-type: none; }
ul a { text-indent: -5000px; }

/* Nav Lists
-------------------------------------------------------------------------------------------------------------------------------------------------*/
#mainnav ul { width: 838px; float: left; margin: 0; padding: 0; list-style-type: none; }
#mainnav ul li { float: left; }
#mainnav a:hover { border-style: none; }

/* Layout Lists
-------------------------------------------------------------------------------------------------------------------------------------------------*/
#leftcolumn ul { width: 307px; margin: 0; padding: 0; list-style-type: none; }
#leftcolumn ul li { margin-bottom: 20px; }
#leftcolumn a:hover { border-style: none; }
#footernav ul { width: 100%; float: left; margin: 0; padding: 0; list-style-type: none; }
#footernav ul li { float: left; padding-right: 30px; }
#footernav ul li:last-child { padding: 0px; }
#footernav ul a { color: #c5c4c4; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; text-transform: uppercase; }
#footernav ul a:hover { color: #00b3e2; border-style: none; }

/* Image Lists
-------------------------------------------------------------------------------------------------------------------------------------------------*/
ul.gallerythumbs { margin-top: 20px; list-style-type: none; width: 557px; }
ul.gallerythumbs li { width: 80px; height: 80px; float: left; margin-right: 20px; margin-bottom: 20px; list-style-type: none; }
ul.gallerythumbs a:hover { border-style: none; }
.gallerythumb { background-color: #000; padding: 2px; border: solid 2px #808080; }
.gallerythumb:hover { border-color: #00b3e2; }

/* Styled Lists
-------------------------------------------------------------------------------------------------------------------------------------------------*/
ul.detailslist { margin-bottom: 20px; padding-left: 10px; border-left: 2px dotted #808080; color: #f0f0f0; font-size: 2em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.4em; }
ul.detailslist:hover { border-color: #00b3e2; }
ul.gigslist { margin-bottom: 20px; padding-left: 10px; border-left: 2px dotted #808080; color: #f0f0f0; font-size: 1.6em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 1.4em; }
ul.linkslist { float: left; margin: 0 0 20px; padding: 0; list-style-type: square; font-size: 1.2em; line-height: 1.6em; list-style-position: inside; }
ul.setlist { float: left; margin: 0 0 20px; padding: 0; list-style-type: square; font-size: 1.2em; font-style: italic; line-height: 1.6em; list-style-position: inside; }
ol.tracklist { float: left; margin: 0 0 20px; padding: 0; font-size: 1.2em; font-style: italic; line-height: 1.6em; list-style-type: decimal-leading-zero; list-style-position: inside; }

/* Contact Form
-------------------------------------------------------------------------------------------------------------------------------------------------*/
#contactform { margin-top: 20px; }
fieldset { width: 100%; 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: #00b3e2; font-size: 1.2em; margin-left: 20px; padding-right: 5px; padding-left: 5px; }
#submit { background-color: #333; width: 100px; }
#submit:hover { color: #000; background-color: #00b3e2; cursor: pointer; }
#reset { background-color: #333; width: 100px; }
#reset:hover { color: #000; background-color: #00b3e2; cursor: pointer; }

/* Basic Typography
-------------------------------------------------------------------------------------------------------------------------------------------------*/
strong { color: #f0f0f0; font-weight: bold; font-style: normal; text-transform: uppercase; }
em { font-style: italic; }
p { font-size: 1.2em; text-align: justify; margin-bottom: 20px; }

/* Styles
-------------------------------------------------------------------------------------------------------------------------------------------------*/
.blue { color: #00b3e2; font-weight: bold; }
.bluecaps { color: #00b3e2; font-weight: bold; text-transform: uppercase; }
.intro { color: #f0f0f0; font-size: 2em; font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-style: italic; line-height: 1.8em; text-align: left; margin-top: 20px; }
.options { font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; display: block; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid #333; }

/* Links
-------------------------------------------------------------------------------------------------------------------------------------------------*/
a:link, a:visited { color: #00b3e2; text-decoration: none; }
a:hover { color: #f0f0f0; text-decoration: none; border-bottom: 2px solid #00b3e2; }
a:active { color: #00b3e2; }

/* Floats
-------------------------------------------------------------------------------------------------------------------------------------------------*/
.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: #00b3e2; 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: #00b3e2; 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; }

#twitter { margin: 0px; padding: 0px; width: 278px; font-size: 1.2em; }
#twitter ul { list-style: none; width: 278px; padding: 0px; margin: 0px; line-height: 14px; }

/* Twitter Integration
-------------------------------------------------------------------------------------------------------------------------------------------------*/

.twitted ul#twitter_update_list li span a {color: #00b3e2; }
.twitted ul#twitter_update_list li a { color: #4f4f4f; }
.twitted ul#twitter_update_list li span a:hover, .twitted ul#twitter_update_list li a:hover { color: #fff; }
.twitted ul#twitter_update_list li { margin: 0; padding: 0.8em 0 1em 0; border-bottom: 1px solid #2a2a2a; }
.twitted ul#twitter_update_list li.lastTweet { border-bottom: none; }