/* 
	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: "Lucida Grande", "Lucida Sans", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	padding: 0;
	text-align: center;
	color: #292727;
	margin-top: 25px;
	background: #210 url(/shared/pleather/bg_pattern.gif);
}

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

#container {
	width: 792px;
	margin: 0 auto;
	padding-top: 60px;
	text-align: left;
	background: url(/shared/pleather/top_container_blue.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;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}

#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_blue.gif) no-repeat left top;
}
	
#navigation a {
	float: left;
	display: block;
	color: #363636;
	padding: 5px 15px 4px 6px;
	text-decoration: none;
	border: none;
	background: url(/shared/pleather/menu_tab_right_blue.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: #1E1E1E;
	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_blue.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;
background :url(/images/changeart-cropped-logofloat.jpg) no-repeat;
               }

	
#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/hugeaudiojunglewlogo-786x187.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_blue.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: #070707;
	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: #070707;
         	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: #070707;
         /*	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: #070707;
	line-height: 1.5em;
}

.contact #content ul li a{
	color: #070707;
	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: #0A0A0A;
         	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: #0A0A0A;
	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: #373737;
         }
         
         #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: #373737;
         	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: #3E3E3E;
         	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: #393939;
}

.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: #393939;
         }
         
         .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: #393939;
}

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

         .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: #000000;
         }

.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_blue.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 **************/