/* 
	Designed by Stacy Bias for Hostbaby, www.hostbaby.com  -  Portland OR USA (Original coder unknown)
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com December 2008
	
	- removed all IE7 hacks
	- added support for .png transparency for IE5.5 and IE6. previously, the negative space of the banner
	  displayed as gray instead of transparent. this could also have been solved using a transparent .gif
	- simplified positioning of major divs, returning #content to normal flow and reducing usage of relative
	  positioning, when absolute could do the same thing more reliably
	- put #content back into the normal flow, where it used to be floated, solving a strange #footer clearing
	  bug and an ie doubled margin float bug
	- minor tweaks to placement of navigation, content, headers, etc. generally caused by not zeroing or
	  standardizing margin and padding values at the outset. includes eliminating code from #container that
	  shifted it up by 12px, presumably to eliminate a gap (but this was the wrong way to do it)
	- cured an IE6 expanding box problem by setting #banner .photo as position: absolute;. the problem was that
	  the #banner .photo div (which contained the overlay graphic) needed to be wider than the #banner itself
	  (which contained the actual square banner photo)
	- shifted #content to the right by 20px for better visual balance
	- set width on #footer p (aka copyright notice) to keep it from spilling over into #content area for bands
	  with long names
	- added styling for #guestbook entry form, where before there was none (it used to be a mess)
	- added line-height declaration for blockquote. previously, safari defaulted to a lower value than other
	  browsers
	- added standard tweak for splash page
	- corrected minor bug in #navigation section for highlighting the current page by changing code from the
	  obsolete .store #navstore to the current .products #navproducts.

	NEW VARIATION: allows for longer band names and h1 headers

	UPDATED FOR HOSTBABY WIZARD 2.0 (pre-release)
	Revised by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2009
	All styles that have been changed are indented. New stuff for 2.0 update is marked as "TWO!!"
	
	- changed positioning of #emailsignup so that it would float underneath the nav, automatically moving
	  further down as needed (it used to be position: absolute)
	- fixed several browser inconsistencies regarding placement of stuff inside #content div--mainly due to
	  IE's margin-collapsing-when-it-shouldn't bug. Now using h1 as a collapsible spacer so that all browsers
	  collapse top margins of h2, h3, etx. in the same way
	- added h3 styling where before there was none
	- made positioning of postForm div more consistent
	- now using new dynamically-added .highlight class to select active #navigation link
	- modified guestbook postForm layout to accomodate captcha
	- cleaned up file, removing several comments from template revision process in 2007-2008
	
*/


body{
	background:#000;
	font-family:Trebuchet MS;
	font-size:12px;
	color:#ffcc99;
	margin: 0 auto;
}

#container{
	width:910px;
	background:url(/shared/tattoo/pinup-body.jpg) repeat-y;
	margin:0 auto;
	padding:0;
	position:relative;
}

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


/*--------- TOP BANNER ---------*/

#banner .photo{
	width:793px;
	height:412px;
	background:url(/shared/tattoo/pinup-pinup.png) no-repeat;
	position:absolute;		/* NEW!! was position: relative, but this caused IE6 to expand #banner */
	top:0px;
	left:-230px;
	z-index:2; 
}

/* NEW!! This ultra-safe hack allows IE6 and IE5.5 to use PNG alpha transparency, using the proprietary AlphaImageLoader filter to serve up the .png file. See http://msdn2.microsoft.com/en-us/library/ms532969.aspx */

* html #banner .photo {
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/tattoo/pinup-pinup.png') no-repeat;
}
			
#banner{
	width:326px;
	height:271px;
background:url(/images/wkf.gif);
	position:absolute;		/* NEW!! was relative, but this interfered with the nav float in IE6 */
	left:288px;
	z-index:1;
}

/* NEW!! For these new "long band name" variations, we're putting the band name from #banner and
#banner span in the orange scroll thingy instead of h1. Live simulated shadow effect created by
superimposing both band titles. Cool. */

#banner span {
	position: absolute;
	width: 800px;
	top: 291px;
	left: -238px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font: normal 29px impact, sans-serif;
	z-index: 500;
}

#banner .photo span {
	color: black;
	margin-top: 2px;
	left: -10px;
	z-index: 490;
}

			/* TWO!! Several changes to #content in order to force browser consistency (avoiding IE collapsing
				margin problems)--namely, reduced padding-top by 20px to allow h1 to act as a 20px high
				collapsible spacer. See also headers section below. */
			
			#content{
				width:540px;
				margin: 0 0 0 241px;			/* NEW!! top was 117px, but this is better for browser consistency */
				padding-left: 20px;			/* TWO!! was 12px; now shifting to the right for better visual balance */
				padding-top: 410px;			/* TWO!! was 390px; h1 adds 20px more collapsible space */
			}


/*--------- LEFT BAR ---------*/

			/* TWO!! Increased padding-left and reduced width by 15px to help create hanging indent effect on
				list items that spill over to multiple lines. */
				
			#navigation{
				width:146px;				/* TWO!! reduced from 156px; */
				min-height:280px;			/* TWO!! for Wizard 2.0: this was height before, reduced from 395px */
				float:left;
				padding:42px 0 0 30px;	/* TWO!! top is up from 30px, making up for ul top margin. left was 20px */
				margin-left:65px;
				margin-top:390px;
				background:url(/shared/tattoo/pinup-navtop_bg.png) top left no-repeat;
				display: inline;			/* NEW!! this cures the IE6 doubled margin float bug */
			}

			/* TWO!! An ultra-safe hack for IE6 and IE5 only, combining the * html hack and the underscore hack. */
			
			* html #navigation { 		
				_height: 280px;			/* TWO!! IE5/6 treats this as min-height */
			}

				
			#navigation ul {
				margin-top: 0;				/* NEW!! forces consistency between browsers */
			}

			
#navigation a{
	font-size:18px;
	font-weight:normal;
	font-family:impact;
	color:#0066cc;
	text-decoration:none;
}

#navigation a:hover{
	text-transform:uppercase;
}

			/* TWO!! New styling to create hanging indent. Padding-left on #navigation has been increased to 
				match. */	
				
			#navigation ul li {
				list-style:none;
				text-indent: -10px;		/* TWO!! creates a hanging indent, making extra-long links clearer */
			}
			
			/* TWO!! Now using .highlight class (which is added dynamically) to highlight current page */
				
			.highlight {
				text-transform: uppercase;
				color: #ff9000 !important;					/* NEW!! helps users know where they are */
			}

			/* TWO!! This now floats so that if the #navigation needs additional vertical space, it is
				automatically pushed down. Lots of style changes needed to pull this off. */
				
			#emailsignup {
				width:156px;
				height:84px;
				color:#fff;
			/*	position:absolute;				TWO!! all removed--floating instead
				z-index:4;
				top:740px;
				left:77px; */
				font-weight:bold;
				float: left;					/* TWO!! float styling */
				clear: both;					/* TWO!! float styling */
				margin: 5px 0 0 67px;		/* TWO!! float styling */
				padding: 19px 0 0 12px;		/* TWO!! float styling */
				background: url(/shared/tattoo/pinup-email_bg.png) top left no-repeat;	/* TWO!! float styling */
				display: inline;				/* TWO!! float styling: cures IE6 doubled margin float bug */
				margin-bottom: -110px;		/* TWO!! this allows #footer to hug closely below on short pages */
				position: relative;			/* TWO!! This makes sure #footer background stacks below #emailsignup */
				z-index: 100;					/* TWO!! This makes sure #footer background stacks below #emailsignup */
			}


/*--------- FOOTER ---------*/

#footer{
	color:#ff6600;
	font-size:9px;
	text-transform:uppercase;
	clear:both;
	width:910px;
	height:116px;
	background:url(/shared/tattoo/pinup-footer.jpg) top left no-repeat;
	padding-right:100px;
}

			/* TWO!! Now, #footer p is smart: it now sits at the bottom of the page, but this means that on short
				pages, it automatically nests neatly below #emailsignup. */
			
			#footer p {
			/*	position:absolute;				TWO!! new styling for new placement at bottom of page
				top:783px;	
				left:133px; */
				width: 102px;					/* NEW!! keeps copyright text from spilling over into #content area */
				line-height: 1.2;				/* NEW!! forces consistency between browsers */
				margin-top: 0;					/* NEW!! forces consistency between browsers */
				position: relative;			/* TWO!! this makes sure #footer p stacks above #emailsignup */
				margin-left: 125px;			/* TWO!! styled to hug #emailsignup or sit at bottom of page */
				padding: 70px 0 10px 5px; 	/* TWO!! styled to hug #emailsignup or sit at bottom of page */
				z-index: 200;					/* TWO!! this makes sure #footer p stacks above #emailsignup */
			}
			

/*--------- HEADERS ---------*/

			/* TWO!! IE likes to collapse top margins of h2, h3, etc. even when it shouldn't (meaning that it
				collapses the margins into the #content padding), causing everything in #content to shift up.
				Non-standard behaviour, yet it actually helps they layout.
				
				These new styles get other browsers to do the same by reducing #content's paddin-top by 20px and
				using an empty h1 block as a 20px high collapsible spacer (1px tall, 19px bottom margin). Would have
				used h1 span to put the header where it should be, but decided not to display it at all since
				repeating the band name right below the banner looked too redundant.
				
				Also, new styling for h3 and improved appearance and flexibility for h1 by centering vertically and
				allowing it to be wider than before. */
				
			h1 {
				margin: 0 0 19px 0; 			/* TWO!! allows margins of h2, h3, etc. to collapse into h1 */
				height: 1px;					/* TWO!! */
				}

			h1 span {
			/*	color: #fc9;											NEW!! This code styled the h1 header, but was removed
				font: normal 22px impact, sans-serif;					because the header looked too redundant
				padding: 15px 0 5px 0; 										below the band name in the banner.
				line-height: 22px;											 
				margin-top: 0;				/* NEW!! forces consistency between browsers 
				visibility: hidden;		/* NEW!! hides the h1 while still using it to preserve spacing 
				padding: 0;					/* NEW!! hides the h1 while still using it to preserve spacing */
				display: none;				/* TWO!! browsers were handling h1 spacing inconsistenly anyway */
			}


			h2{
				color:#ff6600;
				font-size:24px;
				font-family:impact;
				font-weight:normal;
			}
			
			h3 {
				font-size: 18px;				/* TWO!! this was previously unstyled */
				margin-bottom: 0.5em;		/* TWO!! this was previously unstyled */
				}


/*--------- LINKS ---------*/

a{
	color:#f57e20;
	font-weight:bold;
	text-decoration:none;
}

a h2{
	color:#f57e20;
	text-decoration:none;	
}

a:hover, a h2:hover{
	text-decoration:underline;
	color:#fff;
}


/* --- NEW STYLES --- */

blockquote {
	line-height: 1.5;				/* NEW!! forces consistency between browsers, especially Safari */
}

p {
	line-height: 1.5;				/* NEW!! forces consistency between browsers, especially Safari */
	margin: 1em 0;					/* NEW!! forces consistency between browsers, especially Safari */
}

			.guestbook #guestbook {
				padding-top: 310px;			/* TWO!! this pushes entries down, now that postForm is absolute */
			}
				
			/* TWO!! This gives much needed styling to the guestbook form, which had been left unstyled by
				the original designer. Based loosely on the code for Colorcurves. For Hostbaby Wizard 2.0, it is now
				position: absolute, requiring changes elsewhere. */

			#postForm 	{
				position: absolute;			/* TWO!! this prevents #nav float from interfering with these floats */
				top: 430px;						/* TWO!! for browser consistency; from top of page, not #content */
				text-align: left;
				width: 410px;
				margin: 0 0 0 32px;
				display: block;
				height: 235px;
			}

#postForm label {
	float: left;
	width: 100px;			
	height: 25px;
	padding: 3px 0 7px 0;
}
					
#postForm input, #postForm textarea {
	float: right;
	width: 300px;
	height: 19px;
	margin-bottom: 10px;
}
	#postForm textarea {
		height: 100px;
	}
	#postForm input[type="submit"] {
		width: 303px;
		height: 23px;
	}
			
			/* TWO!! Captcha styling */

			.guestbook #gbimage {
				clear: both;
				margin: 0 200px 10px 106px;
				}
				
/* NEW!! standard tweak for splash page images */

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