/* 
	Designed by Adarsh Dilip www.adarshdilip.com  -  Saint John New Brunswick Canada
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April-July 2007 
   All styles that have been changed are indented
	
	- IE7 spacing problem resolved by getting rid of hacks and fixing the real layout bug
	- fixed height problem on one of the style images
	- minor problem with text appearing over the band photo fixed using Dwyer method
	- now using padding-left: 10px; on #content to make sure all content has at least some indentation. left
	  margins reduced accordingly
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means the styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.
	- minor code cleanup
	
*/


/* ------------------ ~ Basic Layout ~ ----------------- */

body {  
	font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif; 
	padding: 0;
	text-align: center;
	color: #461A06;
	margin-top: 25px;
	background: #210 url(/shared/pleather/body_bg.gif);
}

#accessibility {
	position: absolute;
	left: -9999px;
}

#container {
	width: 792px;
	margin: 0 auto;
	padding-top: 60px;
	text-align: left;
	background:  url(/shared/pleather/top_container.gif) no-repeat;
}

         /* NEW!! This does nothing, so goodbye.
         html>body #container {
         	padding-top: 60px;
         }
         */
	
form {
	margin: 0;
}



/* ------------------ ~ Navigation ~ ----------------- */
#navigation {
	float: left;
	width: 100%;
	line-height: normal;
}

#navigation ul {
	position: absolute;
	text-align: center;
 	font-size: 13px;             /* Change font size to align tabs in center - if more tabs, choose less font-size */
 	font-weight: bold;
	z-index: 2;
	width: 792px;
	height: 32px;
	top: 82px;
	margin: 0;
	padding: 10px 10px 0;
	list-style: none;
}

#navigation li {
	float: left;
	text-align: center;
	margin: 0px 3px 0px 1px;
	padding: 0 0 0 7px;
	background: url(/shared/pleather/menu_tab_left.gif) no-repeat left top;
}
	
#navigation a {
	float: left;
	display: block;
	color: #461A06;
	padding: 5px 15px 4px 6px;
	text-decoration: none;
	border: none;
	background: url(/shared/pleather/menu_tab_right.gif) repeat-x right top;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#header a {
	float:none;
}
/* End IE5-Mac hack */

#navigation li a:hover {
	color: #334800;
	text-decoration: line-through;
} 


/* ------------------ ~ Email Sign-up ~ ----------------- */

#emailsignup {
	z-index: 3;
	position: relative;
	top: 0px;
	left: 0px;
	width: 291px;
	height: 39px;
	color: #FFFCD2;
	font-size: 12px;
	font-weight: bold;
	line-height: 2.4em;
	text-align: center;
	margin: -46px 0px 0px 488px;
	background-image: url(/shared/pleather/email_bg.gif);
}

#emailsignup #list_email {
	margin: 7px 0 2px 3px;
	border: none;
	width: 100px;
	height: 17px;
	font-size: 12px;
}

#emailsignup #list_submit {
	margin: 7px 2px 1px 9px;
	background: #F2FCD8;
	border: none;
	color: #374D00;
	font-weight: bold;
	text-transform: uppercase;
}

/* ------------------ ~ Band Banner ~ ----------------- */

               #banner {
               	width: 786px;
               	height: 234px;			/* NEW!! was previously 174px, but this is correct */
               	margin-left: 3px;
               	position: relative;
               	top: 67px;
               }

               #banner .band {
               	position: relative;
               	z-index: 1;
               	font-size: 1px;
               	letter-spacing: -1px;
               	overflow: hidden;
               	height: 50px;			/* NEW!! was previously 100px, probably not the designer's intention */
               	margin: -278px 0px 0px 10px;
               }

	
#banner .photo {
	position: relative;
	font-size: 1px;
	letter-spacing: -1px;
	overflow: hidden;
	text-indent: 1000px;
	width: 786px;
	height: 187px;
	margin-top: -20px;
background: transparent url(/images/hugealbumcoversbannerjune09.jpg) no-repeat;
}

               /* NEW!! hides band name from photo using Dwyer method */
               /* see http://www.mezzoblue.com/tests/revised-image-replacement/) */
               
               #banner .band span {
               	display: block;
               	width: 0;
               	height: 0;
               	overflow: hidden;
               	}
               
               #banner .photo span {
               	display: block;
               	width: 0;
               	height: 0;
               	overflow: hidden;
               	}

/* ------------------ ~ Contents ~ ----------------- */

         #content {
				width: 775px;        /*	NEW!! was 785px; but reduced to accomodate 10px padding */
         	margin-left: 2px;
         	margin-top: 0px;		/* NEW!! previously 61px, this is now controlled by banner height */
         	padding-bottom: 15px;
         	border-bottom: #4B650E thin dotted;			
         	border-left: #4B650E thin dotted;
         	border-right: #4B650E thin dotted;
            background: #FFFFFF url(/shared/pleather/content_bg.jpg) top right repeat-y;
            padding-left: 10px	/* NEW!! global indent. All left margins will be reduced by 10px */
         }

			
         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy hack. The
         	* html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
         	backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */
         
         * html #content { 
				_padding-left: 10px;		/* NEW!! for some reason this needs to be set again as part of this hack */
         	_width: 789px;				/* NEW!! fake width for IE5win only = real width + padding + border */
            _w\idth: 775px;
            }

		
					
					/* NEW!! This IE hack no longer works in IE7 and is no longer necessary 
               *>#content {
               	margin-top: 80px;
               } 
					*/

					
					/* NEW!! Weird-ass bug causes position for entire #content div to be thrown off between
						IE6/IE7 and Firefox/Opera. Only happens when font size for h1 is set. The fix was to
						apply the declaration to h1 span instead. Don't ask me why this works, but it eliminates
						need for IE hacks which weren't working in IE7 anymore anyway */
					
               #content h1 span {		/* NEW!! previously, this was applied to "#content h1 {" */
               	font-size: 20px;	
               	text-align: left;	
               	text-transform: capitalize;
               /*	margin-left: 10px;				NEW!! now using 10px #content padding */
               	line-height: 1.8em; 
               }

         #content p {
         	font-size: 14px;
         	text-align: left;
         	text-indent: 8px;
         /*	margin-left: 10px;				NEW!! now using 10px #content padding */
         	margin-right: 10px;
         	line-height: 1.4em;
         	border-bottom: thin dotted;
         }

         #content .entry h2 {
         	font-size: 16px;
         	color: #2E1401;
         	text-align: left;
         	margin-left: 10px;
         	margin-top: 20px;
         }
         
         #content .notes {
         	font-size: 12px;
         	line-height: 1.5em;
         	text-align: left;
         	text-indent: 8px;
         /*	margin-left: 10px;				NEW!! now using 10px #content padding */
         	margin-right: 10px;
         }

         #content h3 {
         	font-size: 16px;
         	color: #2E1401;
         	text-align: center;
         /*	margin-left: 10px;				NEW!! now using 10px #content padding */
         	line-height: 1.1em;
         
         }

/* ------------------ ~ Contents - MUSIC ~ ----------------- */

         /* NEW!! This page-specific styling was causing the entire #content div to shift upwards on the music
				page, probably due to the new line-height. Better to leave it the same as all the h1 on the other
				pages. It looks more consistent that way. 
			
         .music #content h1 {
         	font-size: 20px;
         	text-align: center;
         	text-transform: capitalize;
         	line-height: 2.8em;
         }
			*/

         .music #content .artist, .music #content .caption {
         	font-size: 12px;
         	color: #2E1401;
         /*	margin-left: 10px;				NEW!! now using 10px #content padding */
         	text-align: center;
         }

         .music #content blockquote {
         /*	margin-left: 50px;				NEW!! now using 10px #content padding */
				margin-left: 40px;			/* NEW!! margin-left reduced by 10px */
         }

.music h3 {
	margin-bottom: 0;
}

.music #content ul {
	font-size: 11px;
	text-align: center;
	list-style-type: none;
	margin: 15px 150px 0px 150px;
	padding: 10px;
	border: thin dotted;
	line-height: 1.9em;
}

.music #content li a {
	text-align: center;
	font-weight: normal;
	color: #233100;
}

.music #content li a:hover {
	color: #050700;
}

/* ------------------ ~ Contents - CONTACT ~ ----------------- */

         #content span.name {
         	font-size: 14px;
         	color: #050700;
         	font-weight: bold;
         	text-align: left;
			/*	margin-left: 25px;				NEW!! now using 10px #content padding */
				margin-left: 15px;			/* NEW!! margin-left reduced by 10px */
         }

.contact #content ul {
	list-style:none;
	font-size: 13px;
	color: #2E1401;
	line-height: 1.5em;
}

.contact #content ul li a{
	color: #2E1401;
	text-decoration: underline;
}

.contact #content ul li a:hover {
	color: #000000;
	text-decoration: underline;
}

/* ------------------ ~ Contents - PRESS ~ ----------------- */

.press #content blockquote {
	font-size: 13px;
	line-height: 1.5em;
}

         .press #content .caption {
         	font-size: 14px;
         	color: #2D2500;
         	font-weight: bold;
         	text-align: left;
         /*	margin-left: 40px;				NEW!! now using 10px #content padding */
         	margin-left: 30px;			/* NEW!! margin-left reduced by 10px */
         }

.press #content .caption a {
	font-size: 14px;
	color: #2D2500;
	font-weight: bold;
	text-align: left;
}

.press #content .caption a:hover {
	color: #584B0D;
}

/* ------------------ ~ Contents - CALENDAR ~ ----------------- */


			/* NEW!! 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 .entry {
         	border: thin dotted;
         	text-align: center;
         	margin: 0 100px 25px 100px;
         	padding-bottom: 10px;
         }
         
         #calendar h2 {
         	text-align: center;
         	font-size: 14px;
         	color: #564D22;
         }
         
         #calendar h3 {
         	font-weight: bold;
         	font-size: 18px;
         	text-transform: uppercase;
         	text-align: center;
         }
         
         #calendar h4 {
         	font-weight: bold;
         	font-size: 14px;
         	text-transform: uppercase;
         	text-align: center;
         }
         
         #calendar address {
         	font-weight: bold;
         	font-size: 14px;
         	color: #564D22;
         	text-align: center;
         }
         
         #calendar p {
         	font-size: 12px;
         	color: #292309;
         	text-align: center;
         	border-bottom: none;
         	text-transform: capitalize;
         }

/* ------------------ ~ Contents - PHOTOS ~ ----------------- */

.photos img {
	padding: 3px;
	border: solid 1px #1B2600;
	background: #384E02 url(/shared/pleather/photo-bg.gif);
}

         .photos dl {
         /*	margin: 0 20px;						NEW!! now using 10px #content padding */
         	margin: 0 20px 0 10px;			/* NEW!! margin-left reduced by 10px */
         	padding: 0;
         }

         .photos dt {
         	text-align: center;
         	text-transform: capitalize;
         	font-size: 12px;
         	color: #131A00;
         	padding: 5px;
         /*	margin: 15px 40px 2px 40px;				NEW!! now using 10px #content padding */
         	margin: 15px 40px 2px 30px;			/* NEW!! margin-left reduced by 10px */
         	border-top: thin dotted;
         	
         }

.photos dd {
	text-align: center;
	margin: 0;
	padding: 0;
}

/* ------------------ ~ Contents - STORE ~ ----------------- */

         .products #content .products {
         	border: thin dotted;
         	margin: 0 20px 0 20px;
         }

.products #content .products table td {
	float: left;
}

.products #content .products a {
	color: #2B2100;
}

.products #content .products a:hover {
	color: #4D3C02;
}

.products #content .products img {
	border: solid 1px #1B2600;
	padding: 2px;
	margin-left: 10px;
	margin-top: 23px;
}

.products #content .products h2 {
	font-size: 14px;
	text-indent: 15px;
	text-decoration: none;
}

.products #content .products p {
	font-size: 12px;
	border-bottom: none;
	text-indent: 25px;
}

/* ------------------ ~ Contents - GUESTBOOK ~ ----------------- */

         .guestbook #postForm {
         	height: 385px;
         /*	margin: 0 0 35px 10px;				NEW!! now using 10px #content padding */
         	margin: 0 0 35px 0;				/* NEW!! margin-left reduced by 10px */
         	padding: 0px;
         }

.guestbook #postForm input, .guestbook #postForm label {
	display: block;
	width: 300px;
	margin: 0 0 10px 0;
}

.guestbook #postForm form p {
	border:none;
}

.guestbook #postForm textarea {
	display: block;
	width: 600px;
	height: 150px;
	margin: 0 0 10px 0;
}

.guestbook #postForm input:focus, .guestbook #postForm textarea:focus {
    background: #ffc;
}

.guestbook #postForm label {
	padding: 3px 0px;
	margin-bottom: 1px;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
}

#postForm label.security_code_label {
	width: 500px;
	margin-left: 20px;
	float: left;
}

#postForm input#security_code {
	width: 180px;
	float: left;
	margin-left: 20px;
	margin-right: 200px;
}

#postForm input[type=submit] {
	clear: both;
	width: 305px;
	text-align: center;
}

         .guestbook #guestbook h2 {
         /*	margin-left: 30px;				NEW!! now using 10px #content padding */
         	margin-left: 20px;			/* NEW!! margin-left reduced by 10px */
         	padding-top: 10px;
         	font-size: 14px;
         }
         
         .guestbook #guestbook h3 {
         /*	margin-left: 30px;				NEW!! now using 10px #content padding */
         	margin-left: 20px;			/* NEW!! margin-left reduced by 10px */
         	font-size: 11px;
         	text-align: left;
         	color: #79561F;
         }

         .guestbook #guestbook blockquote {
         /*	margin-left: 50px;				NEW!! now using 10px #content padding */
         	margin-left: 40px;			/* NEW!! margin-left reduced by 10px */
         	font-size: 12px;
         	text-align: left;
         	line-height: 1.7em;
         }

.guestbook #guestbook .entry {
	border-top: thin dotted;
}


/* ------------------ ~ Contents - LINKS ~ ----------------- */

         .links #content dl {
         /*	margin-left: 10px;				NEW!! now using 10px #content padding */
         	margin-left: 0px;				/* NEW!! margin-left reduced by 10px */
         	margin-right: 10px;
         	text-align: left;
         	border-bottom: thin dotted;
         }

.links #content h3  {
	font-size: 14px;
	text-align: left;
	margin: 20px;
}

.links #content h3 a  {
	color: #3F2A0A;
}

.links #content h3 a:hover  {
	color: #815F29;
}

         .links #content h2  {
         	font-size: 16px;
         	text-align: left;
         /*	margin: 20px;				NEW!! now using 10px #content padding */
         	margin: 20px 20px 20px 10px ;			/* NEW!! margin-left reduced by 10px */
         	color: #3F2A0A;
         }

.links #content a {
	text-decoration: none;
}

.links #content a:hover {
	color: #815F29;
	text-decoration: underline;
}


/* ------------------ ~ Footer ~ ----------------- */

#footer {
	position: relative;
	clear: both;
	font-size: 11px;
	color: #FFFCD2;
	line-height: 2.9em;
	width: 786px;
	height: 30px;
	text-align: center;
	margin-left: 3px;
	z-index: 6;
	background-image: url(/shared/pleather/footer_bg.gif);
}

#splashimage { text-align: center; margin: 100px auto; }
#splashimage a img { border: 0; }

/*************** START NEW STUFF **************/
/* quick fix stuff added to end of file to fix ugly link colors,
 * lack of margin on some pages and h2 grouping indentation.
 */
 
         h2 {
         	color: #2E1401;
         	text-align: left;
         /*	margin-left: 10px;				NEW!! now using 10px #content padding */
         	margin-left: 0px;				/* NEW!! margin-left reduced by 10px */
         	margin-top: 20px;
         }
         
         .home #content .entry {
         	width: 750px;
         /*	margin-left: 15px;				NEW!! now using 10px #content padding */
         	margin-left: 5px;				/* NEW!! margin-left reduced by 10px */
         	margin-right: 15px;
         }
         
         .products #content .details {
         	width: 750px;
         /*	margin-left: 15px;				NEW!! now using 10px #content padding */
         	margin-left: 5px;				/* NEW!! margin-left reduced by 10px */
         	margin-right: 15px;
         }

a {
	text-align: center;
	font-weight: normal;
	color: #233100;
}

a:hover {
	color: #050700;
}
/*************** END NEW STUFF **************/