/* BACKROADS stylesheet template coded by Andrew Tay (www.andrewtay.com) June 2008. This custom template is loosely based on the Colorcurves template, with custom graphics designed by Matt Doherty. */


/* IMPORTANT NOTE ON HOW TO CONTROL CENTERING IN NAVIGATION SECTION:

	1) WHAT YOU HAVE TO DO:

	Due to the complexity of the design (especially the use of transparencies), there was no way for the
	navigation links to be automatically centered. Consequently, you must tell it how much to indent each line
	of links manually (in other words, "fake" centering). 
	
	For example, for the draft version of the template, all 11 standard links were present in the standard order,
	which caused the links to appear on two lines: the first beginning with "HOME" and the second beginning with
	"NEWS". So to make the links appear centered, we apply left margins, setting the number of pixels to whatever
	looks right:
	
            #navigation li a#navhome {margin-left: 4px;}				// indents "HOME" link by 4px 
				#navigation li a#navnews {margin-left: 46px;}			// indents "NEWS" link by 46px
	
	That's all that's needed: two lines. Of course, if the first two links were something other than "HOME"
	and "NEWS", you'd have to change the lines to correspond to the correct links. You can choose the appropriate
	line from the following code, changing the number of px as necessary (##px). Make sure there are
	no spaces between the numerals and the px:
				
            #navigation li a#navhome {margin-left: ##px;}
            #navigation li a#navbio {margin-left: ##px;}
            #navigation li a#navnews {margin-left: ##px;}
            #navigation li a#navmusic {margin-left: ##px;}
            #navigation li a#navproducts {margin-left: ##px;}
            #navigation li a#navpress {margin-left: ##px;}
            #navigation li a#navphotos {margin-left: ##px;}
            #navigation li a#navcalendar {margin-left: ##px;}
            #navigation li a#navguestbook {margin-left: ##px;}
            #navigation li a#navcontact {margin-left: ##px;}
            #navigation li a#navlinks {margin-left: ##px;}

   2) HOW YOU GO ABOUT DOING IT:
					
	So where do you put this code? You can hard code it into the template by pasting the lines into the .CSS file
	wherever you want (the beginning or end is good). Be sure to save a copy of the original, just in case.
	
	It would probably be best to get the Hostbaby staff to help, or to do it for you. Either way, they'll have to
	import the modified file into their system, and then you'll have to re-publish to see the changes live.
	
	3) WHAT ELSE MIGHT YOU WANT TO DO?
	
	Let's say you only have six links, but you still want them to flow evenly over two lines. You'll have to
	force the page to break by making the navigation section narrower. You can do this by adding the line:
	
				#navigation {width: ###px !important;}
				
	...Which lets you make the width whatever you need it to be, overriding it's normal setting of 770 pixels.
	For example, if you want to make the link area narrower by 100 pixels, just add the line:

				#navigation {width: 670px !important;}
				
	If you're doing the fake centering thing listed above, you may have to go back and forth between the two
	bits of code, changin margin and width values until it looks the way you want it to.
	
*/


				
/* --- GLOBAL PAGE SETTINGS --------------------------------------------------------- */

	html, body, div	{margin: 0; padding: 0;}		/* clears block margins/padding */
   img					{border: none;}				/* clears all image borders */
 
   /* (mostly) firefox defaults, for other browser's benefit */
	
   p, blockquote 		{margin: 1em 0;}	
   ul, ol 				{margin: 1em 0 1em 35px; padding: 0;} 
   h2						{margin: .83em 0;}
	h3						{margin: 1em 0;}	
         
				
/* --- GENERAL PAGE LAYOUT -------------------------------------------------------------- */

   body {
      padding: 0;						
      text-align: center;				/* page auto-centering for IE5win */
      color: #fff4e5;
      background-color: black;	
      }
         
   #container {
      position: relative;		/* required for children with position: absolute; */
      width: 800px;				
      margin: 0px auto;			/* page auto-centering */
      background: black url(/templateimages/backroads-banner.gif) 0 0 no-repeat;
      }
			
   #content {
		width: 764px;				/* not strictly necessary, but this gives hasLayout to #content */
   	padding: 330px 18px 110px 18px;
   	text-align: left;	
	   }
 							
   #accessibility {
   	position: absolute;		/* taken out of normal flow, text hidden offscreen */
   	text-indent: -9999px; 
   	}
		
   #footer {
      height: 58px;				
      text-align: left;
      padding: 30px 0 0 15px;
      }

   			/* NEW!! An ultra-safe Tan hack for IE5 only (using Pixy underscores act as a backup). The
					backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */

            * html #footer { 		
					_height: 88px;		/* fake height for IE5win only: real height + padding + border */
   				_he\ight: 58px;
					}
         
   #footer p {
      margin: 0; 						/* this forces browser consistency */
      padding: 0;						/* this forces browser consistency */
      }
	
/* band name & images */
		
   #banner .band {
   	position: absolute;
   	left: 100px;	
   	text-indent: -9999px;			/* hides text version of band name off-screen */
   	width: 100%;
   	height: 100px;
   	background: url(/templateimages/backroads-bandname.gif) 0 0 no-repeat;
   	}
				
   #banner .photo 		{display: none;}	/* don't need a band photo for this template */
   #banner .photo span 	{display: none;}	/* gets rid of band title text that can appear in Opera */


   #emailsignup {
   	position: absolute;
   	top: 330px;				
   	right: 20px;			
   	z-index: 300;
   	}


/* --- Text Styles & Additional Margin Fixes ---------------------------------------- */

	body		{
   		   font-family: Helvetica, Arial, sans-serif;
			   font-size: 13px;
    			}
 
	h2 		{
   		   font-family: "Times New Roman", Times, serif;
            color: #d49a4e;
            font-weight: bold;
            font-size: 130%;
            text-align: left; 
            }
 
	h3			{
   			font-style: italic;
   			font-size: 100%;
   			}
    
   p, .notes {
    			line-height: 1.2;
    			}
				
	#emailsignup {
				font-weight: bold;
				}
			
   #emailsignup input[type="text"] {
				margin-left: 3px;
         	width: 115px;
         	}

	input#list_email {background-color: #fff4e5;}
   	
/* --- Link Styling ----------------------------------------------------------------- */

	/* general links */	   
	a				{font-weight: bold; text-decoration: underline;}
   a:link 		{color: #b35614;}	
	a:visited	{color: #b37243;}
   a:hover 		{color: #EDAD53;}	
   a:active		{color: white;}

	/* links page links */
	.links a:link h2				{text-decoration: none;}				
	.links a:visited h2			{text-decoration: none;}				
	.links a:hover h2				{color: #EDAD53;}				
	.links a:hover h2				{color: #EDAD53;}				

	
				
/* --- NAVIGATION for GOOD BROWSERS (Fireforx, Opera, Safari, IE7+, etc.. ----------------------------------- */

   #navigation {
   	position: absolute;
   	top: 200px;		
	left: 0;	
	width: 800px; 
   	height: 130px;
   	padding: 0 5px;
   	z-index: 200;
   	}				
				
	#navigation ul {
		margin: 0; 
		padding: 0;
		list-style: none; 
 		}				
		
	/* The minimum width is required to keep the block from collapsing. Width is actually controlled by
		the various #navigation li a elements, and various from link to link. Of course, IE6 doesn't
		understand min-width at all, but due to a design flaw on Microsoft's part, it behaves as if it did 
		anyway, which is very handy */
				
	#navigation li {
		float: left;
		height: 42px;
		min-width: 20px;		/* see comment above */
		margin: 0 4px;
		}

	#navigation li a {
		display: block;
		height: 100%;
		width: 93px;		/* this width is later overridden on a link-by-link basis */
		}

         	/*	fyi: these are the nominal widths of each link, in pixels (i.e. without glow)
         	
         	home 68	bio 43	news 68	music 77		store 80		press 77		photos 96
         	calendar 133	guestbook 144	contact 118	links 75
         	
         	- all link text is nominally 25px high
				- to get final dimensions, add 25px to width and height for each 
				- it's 207 px from the top of the page to the nominal top of the first row
				- row height (leading) is 42px			*/
		
            #navigation li a#navhome {
					background: url(/templateimages/backroads-nav-home.png) 0 -5px no-repeat;
					width: 93px;
                                        margin-left: 20px;
					}
            #navigation li a#navbio {
					background: url(/templateimages/backroads-nav-bio.png) 0 -5px no-repeat;
				   width: 68px;
					}	
            #navigation li a#navnews {
					background: url(/templateimages/backroads-nav-news.png) 0 -5px no-repeat;
					width: 93px;
					}
            #navigation li a#navmusic {
					background: url(/templateimages/backroads-nav-music.png) 0 -5px no-repeat;
					width: 102px;
					}
            #navigation li a#navproducts {
					background: url(/templateimages/backroads-nav-store.png) 0 -5px no-repeat;
					width: 105px;
					}
            #navigation li a#navpress {
					background: url(/templateimages/backroads-nav-press.png) 0 -5px no-repeat;
					width: 102px;
					}
            #navigation li a#navphotos {
					background: url(/templateimages/backroads-nav-photos.png) 0 -5px no-repeat;
					width: 121px;
					}
            #navigation li a#navcalendar {
					background: url(/templateimages/backroads-nav-calendar.png) 0 -5px no-repeat;
					width: 158px;
                                        margin-left: 80px;
					}
            #navigation li a#navguestbook	{
					background: url(/templateimages/backroads-nav-guestbook.png) 0 -5px no-repeat;
					width: 169px;
					}
            #navigation li a#navcontact {
					background: url(/templateimages/backroads-nav-contact.png) 0 -5px no-repeat;
					width: 143px;
					}
            #navigation li a#navlinks {
					background: url(/templateimages/backroads-nav-links.png) 0 -5px no-repeat;
					width: 100px;
					}
   
		
         	/* Dwyer Image Replacement (www.mezzoblue.com/tests/revised-image-replacement/) */
         
         	#navigation li a span {
         		display: block;
         		width: 0;
         		height: 0;
         		overflow: hidden;
         		}

					
	/* hovering navigation */
	#navigation li a:link 		{background-position: 0 -5px !important;}
	#navigation li a:visited	{background-position: 0 -5px !important;}
	#navigation li a:hover 		{background-position: 0 -105px !important;}
	#navigation li a:active		{background-position: 0 -5px !important;}
					
	/* highlight current page in navigation */
	.home #navigation li a#navhome, 
	.index #navigation li a#navindex,
	.music #navigation li a#navmusic,
	.contact #navigation li a#navcontact,
	.press #navigation li a#navpress,
	.news #navigation li a#navnews,
	.photos #navigation li a#navphotos,
	.guestbook #navigation li a#navguestbook,
	.links #navigation li a#navlinks,
	.calendar #navigation li a#navcalendar,
	.bio #navigation li a#navbio,
	.products #navigation li a#navproducts {
				background-position: 0 -55px !important;
				}

				
/* --- NAVIGATION for BAD BROWSERS (IE6, IE5.5) ------------------------------------------------------------- */

   /* These ultra-safe hacks allow IE6 and IE5.5 to use PNG alpha transparency. The * html and _ hacks
   	make sure that no other browsers see this (each acheives the same thing, but using both is more
   	future-proof. 
		
		The IE proprietary AlphaImageLoader filter then serves up the .png file, but it
   	can't use repeat, or position unfortunately). See http://msdn2.microsoft.com/en-us/library/ms532969.aspx 
		
		This fix does not work in IE 5.01. Furthermore, the navigation layout in IE 5.01 is messed up to the
		point that it is no longer usable. Not worth fixing--that browser is too old	*/
		

	/* This gets rid of all the normal nav backgrounds for IE5.5 & IE6 */
   * html #navigation li a {
		_background: none !important;
		}
		
   /* HOME */
   * html #navigation li a#navhome:link, * html #navigation li a#navhome:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-home.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navhome:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-home.png',
 			sizingMethod='crop'
			);
   	}
   * html .home #navigation li a#navhome {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-home.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* BIO */
   * html #navigation li a#navbio:link, * html #navigation li a#navbio:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-bio.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navbio:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-bio.png',
 			sizingMethod='crop'
			);
   	}
   * html .bio #navigation li a#navbio {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-bio.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* NEWS */
   * html #navigation li a#navnews:link, * html #navigation li a#navnews:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-news.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navnews:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-news.png',
 			sizingMethod='crop'
			);
   	}
   * html .news #navigation li a#navnews {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-news.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* MUSIC */
   * html #navigation li a#navmusic:link, * html #navigation li a#navmusic:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-music.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navmusic:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-music.png',
 			sizingMethod='crop'
			);
   	}
   * html .music #navigation li a#navmusic {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-music.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* STORE */
   * html #navigation li a#navproducts:link, * html #navigation li a#navproducts:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-store.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navproducts:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-store.png',
 			sizingMethod='crop'
			);
   	}
   * html .products #navigation li a#navproducts {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-store.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* PRESS */
   * html #navigation li a#navpress:link, * html #navigation li a#navpress:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-press.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navpress:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-press.png',
 			sizingMethod='crop'
			);
   	}
   * html .press #navigation li a#navpress {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-press.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* PHOTOS */
   * html #navigation li a#navphotos:link, * html #navigation li a#navphotos:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-photos.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navphotos:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-photos.png',
 			sizingMethod='crop'
			);
   	}
   * html .photos #navigation li a#navphotos {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-photos.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* CALENDAR */
   * html #navigation li a#navcalendar:link, * html #navigation li a#navcalendar:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-calendar.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navcalendar:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-calendar.png',
 			sizingMethod='crop'
			);
   	}
   * html .calendar #navigation li a#navcalendar {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-calendar.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* GUESTBOOK */
   * html #navigation li a#navguestbook:link, * html #navigation li a#navguestbook:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-guestbook.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navguestbook:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-guestbook.png',
 			sizingMethod='crop'
			);
   	}
   * html .guestbook #navigation li a#navguestbook {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-guestbook.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* CONTACT */
   * html #navigation li a#navcontact:link, * html #navigation li a#navcontact:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-contact.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navcontact:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-contact.png',
 			sizingMethod='crop'
			);
   	}
   * html .contact #navigation li a#navcontact {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-contact.png',
 			sizingMethod='crop'
			) !important;
   	}

   /* LINKS */
   * html #navigation li a#navlinks:link, * html #navigation li a#navlinks:visited {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-plainlink-links.png',
 			sizingMethod='crop'
			);
   	}
   * html #navigation li a#navlinks:hover {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-hoverlink-links.png',
 			sizingMethod='crop'
			);
   	}
   * html .links #navigation li a#navlinks {
   	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (
			src='/templateimages/ie6-nav-current-links.png',
 			sizingMethod='crop'
			) !important;
   	}

/* --- PAGE-SPECIFIC STYLES --------------------------------------------------------------------------------- */

	/* photos */
	.photos dt	{
   		   font-family: Georgia, "Times New Roman", Times, serif;	
   			color: #d49a4e;
   			font-weight: bold;
   			font-size: 125%;
				margin: 1.7em 0 .8em 0; 
				}	
	.photos dd	{
				margin: 0; 
				padding: 0;
				}

	/* music */
	.music .artist, .music .details {margin: 0; padding: 0;}
	
	/* contact */
	.contact .name			{font-weight: bold;}
	.contact .entry ul 	{list-style: none;}
	.contact .entry li	{padding-bottom: .15em;}				
				
	/* press */
	.press .caption		{font-weight: bold; color: #8f8f8f;}
	
	/* products */
	.products hr {display: none;}

	/* calendar */
	
   /* Before, these were styled at the page level (using body.calendar or .calendar for short).
   Now that calendars can also appear on the	home page, they are styled using div#calendar or
   #calendar for short. Calendars are always contained within a #calendar div, no matter what page
   they're on. Good, no? */
   
   #calendar h3, #calendar .details, #calendar .entry p {margin-left: 35px;}
   #calendar h3, #calendar h4, #calendar address {
   	margin-top: 0;
		margin-bottom: 0.1em;
		font-style: normal;
		font-size: 100%;
		}
   	
   #calendar h4		{font-weight: normal;}
	
	/* products */
	.products table	{font-size: 100%;}
	
	/* guestbook */
	#guestbook {width: 600px;}
	
   #postForm 	{
           	text-align: left;
           	width: 340px;
				margin: 18px 0 25px 20px;
            }
   #postForm input, #postForm textarea {
         	display: block;
         	width: 100%;
         	margin-bottom: 10px;
     	    	}
   #postForm textarea {
   			height: 100px;
   			}
   #postForm input[type="submit"] {
   			width: 200px;
   			margin: 0 auto;
				}

	#guestbook .entry	{
				padding: 2px 10px;
				margin-bottom: 10px;
				}				
	#guestbook .entry h2	{
      		font-size: 100%;
      		color: #BAA486;
      		padding-bottom: 4px;
      		margin-bottom: 0;
      		border-bottom: 1px solid #DCD1C2;
      		}
	#guestbook .entry h3	{
      		font-size: 85%;
      		color: #BAA486;
      		text-align: right;
      		margin: 0; padding: 0;
      		}

	/* links */
	.links h3	{font-style: normal;}	

			/*	.links h1	{margin-bottom: 80px;} 		NEW!! not really necessary for it to look right */

	.links dl, .links h2 {margin-left: 10px;}

					
/* --- Modified Rundle Image Replacement for h1 (phark.typepad.com/phark/2003/08/) -------------------------- */

	h1			{
            width: 400px; height: 80px;
				margin: 0; padding: 0;
				}
	h1 span 	{
            display: block;
				text-indent: -9999px;		/* hide off-screen */
            }
			
	.home h1			{background: url(/templateimages/backroads-title-home.gif) center left no-repeat;}
	.index h1		{background: url(/templateimages/backroads-title-index.gif) center left no-repeat;}
	.music h1 		{background: url(/templateimages/backroads-title-music.gif) center left no-repeat;}
	.contact h1	 	{background: url(/templateimages/backroads-title-contact.gif) center left no-repeat;}
	.press h1  		{background: url(/templateimages/backroads-title-press.gif) center left no-repeat;}
	.news h1 		{background: url(/templateimages/backroads-title-news.gif) center left no-repeat;}
	.photos h1		{background: url(/templateimages/backroads-title-photos.gif) center left no-repeat;}
	.guestbook h1 	{background: url(/templateimages/backroads-title-guestbook.gif) center left no-repeat;}
	.links h1 		{background: url(/templateimages/backroads-title-links.gif) center left no-repeat;}
	.calendar h1 	{background: url(/templateimages/backroads-title-calendar.gif) center left no-repeat;}
	.bio h1 			{background: url(/templateimages/backroads-title-bio.gif) center left no-repeat;} 
	.products h1 	{background: url(/templateimages/backroads-title-store.gif) center left no-repeat;}	
	
	
   /* NEW!! minor tweaks for splash and home page images */
   
   .home img {margin: 1em 0; display: block;}	/* NEW!! display: block triggers margin collapse */
   
   #splashimage { text-align: center; margin: 100px auto; }
   #splashimage a img { border: 0; }