/* 
	Designed by Stacy Bias for Hostbaby, www.hostbaby.com  -  Portland OR USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com December 2008
   All styles that have been changed are indented
	
	- 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 straange #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 12px 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
	
	NEW VARIATION: allows for longer band names and h1 headers

*/


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

         #container{
         	width:910px;
         /*	min-height:500px;*/
         	background:url(/shared/tattoo/pinup-body.jpg) repeat-y;
         	margin:0 auto;
         	padding:0;
         	position:relative;
         /*	top:-12px; 							NEW!! removed this strange code from #banner and #container */
         }

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



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

			
         #banner .photo{
         	width:793px;
         	height:440px;
         	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. 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, unfortunately). 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/cb07green.jpg);
         	position:absolute;		/* NEW!! was relative, but this interfered with the nav float in IE6 */
         /*	top:12px; 						NEW!! removed this strange code from #banner and #container */
         	left:288px;
         	z-index:1;
         }

			
			/* NEW!! Removed IE7 hack
         *:first-child+html #banner .photo{
         	width:793px;
         	height:440px;
         	background:url(/shared/tattoo/pinup-pinup.png) no-repeat;
         	position:relative;
         	top:0px;
         	left:-225px;
         	z-index:2;
         }

			/* NEW!! Removed IE7 hack
         *:first-child+html #banner{
         	width:326px;
         	height:271px;
         	/* background:url($top); 
         	position:relative;
         	top:12px;
         	left:45px;
         	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;
				}
				

			/* NEW!! Several changes to #content in order to force browser consistency (mainly to avoid IE
				collapsing margin problems. */
				
         #content{
         	width:540px;
         /* float:left;						/* NEW!! better to have #content back in normal flow */
				margin: 0 0 0 241px;			/* NEW!! top was 117px, but this is better for browser consistency */
				padding-top: 415px;			/* NEW!! this is a better way to push everything down */
				padding-left: 12px;			/* NEW!! shifting everything to the right for better visual balance */
         }


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

         #navigation{
         	width:156px;
         	height:395px;
         	float:left;
         	padding:42px 0 0 20px;		/* NEW!! increased from 30px to make up for ul top margin */
         	margin-left:65px;
         	margin-top:390px;
         	background:url(/shared/tattoo/pinup-nav_bg.png) top left no-repeat;
         	display: inline;				/* NEW!! this cures the IE6 doubled margin float bug */
         }

			/* NEW!! Removed IE7 hack
         *:first-child+html #navigation{
         	margin-top:410px;
         }*/

			#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;
}

#navigation ul li{
	list-style:none;
}
			/* NEW!! Removed IE7 hack
         *:first-child+html #navigation ul{
         	padding-top:10px;
         }*/

.home #navhome, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar, .bio #navbio, .store #navstore {
	text-transform: uppercase;
}

#emailsignup{
	width:156px;
	height:84px;
	color:#fff;
	position:absolute;
	z-index:4;
	top:740px;
	left:77px;
	font-weight:bold;
}


/*--------- 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;
}

         #footer p{
         	position:absolute;
         	top:783px;					/* NEW!! increased from 770px to make up for loss of top margin */
         	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 */
         }



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

			/* NEW!! For these new "long band name" variations, we're moving h1 back to the main content area.
				Not quite as cool, but hey... */

         h1{
         	color: #fc9;
         	font: normal 22px impact, sans-serif;
         	line-height: 22px;
				padding: 15px 0 5px 0;
				margin-top: 0;					/* NEW!! forces consistency between browsers */
         }

			/* NEW!! Removed IE7 hack
         *:first-child+html h1{
         	color:#fff;
         	font-size:22px;
         	font-family:impact;
         	width:220px;
         	line-height:22px;
         	font-weight:normal;
         	text-transform:uppercase;
         	position:relative;
         	top:-85px;
         	left:100px;
         	z-index:3;
         	text-align:center;	
         }
			*/

h2{
	color:#ff6600;
	font-size:24px;
	font-family:impact;
	font-weight:normal;
}




/*--------- 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 */
				}

			/* NEW!! 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. */
			
         #postForm 	{
            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;
         		}
         
         /* NEW!! standard tweak for splash page images */
         
               #splashimage { text-align: center; margin: 100px auto; }
               #splashimage a img { border: 0; }