/* 
Host Baby
"Hanging Gardens"
Master CSS File
Last Updated: 07 October 2004
---------------------------
All images and stylesheets Copyright  Matt Weldon (www.blackhartstudios.com) 2004
	
	Bugfixes and minor adjustments by Andrew Tay (www.andrewtay.com) for HostBaby.com May 2007-August 2008 
   All styles that have been changed are indented
	
	- fixed a weird bug that prevented the quotes .gif image from displaying on blockquotes on the press page.
	  giving it an explicit width of 495px solved this
	- many margin and text styling adjustments: images now have margins, press and guestbook are now easier to
	  read, h2 styling has been changed a bit
	- minor fix to padding on h2, a problem which was created during a previous revision
	- 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 tweak to #navigation to make it easier to click
	- added simple trick to get centering to work in IE5
	
	August 2008:
	
	- fixed a visual glitch that would cause the #footer to disappear on pages that were very short; fixed using
	  min-height on #content
	- fixed a centering offset bug which caused the background images for body and #container to be misaligned
	  by 1px in all versions of IE

*/


         body
         {
			margin: 0;			      /* NEW!! was margin: 0 auto; but auto is unnecessary */
         padding: 0;
         font-size: 16px;
         font-family: verdana, sans-serif;
         text-align: center;		/* NEW!! was text-align: justify; This trick gets centering to work in IE5 */
         background: #B3BFA1 url(/shared/hanginggarden/body-bg.gif) repeat-y 50%;
         color: #111;
         }

blockquote
{
background: url(/shared/hanginggarden/blockquote.gif) top left no-repeat;
padding: 10px;
text-indent: 25px;
}


			/* NEW!! This div must be perfectly aligned with the background image of the body for it to look
				right, but it was offset by 1px in IE6 and IE7 due to some sort of rounding error or something in
				the way IE handles auto-centering. Now centered using negative margin centering
				(http://bluerobot.com/web/css/center2.html), which works in everything except IE6. An ultra-safe
				hack is used to fix it for IE6. */
				
         #container
         {
         font-size: 0.7em;
       	position: absolute;		/* NEW!! was position: relative; */
         width: 780px;
			margin-top: -11px;		/* NEW!! was margin: -11px auto; but auto is no longer used for centering */
         padding: 0;
         background: #B3BFA1 url(/shared/hanginggarden/v2-wrapper-bg.gif) repeat-y 50%;
         top: 0;
			text-align: justify;		/* NEW!! This trick gets centering to work in IE5 (see body above) */
			left: 50%;					/* NEW!! negative margin centering */
			margin-left: -390px;		/* NEW!! negative margin centering */
         }

         /* 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). */
         
         * html #container { 		
         	_margin-left: -389px;	/* NEW!! negative margin centering, tweaked for IE5/6 */
            }


#accessibility
{
display: none;
}

#emailsignup
{
display: none;
}

body.home #emailsignup
{
position: absolute;
display: block;
z-index: 109;
width: 130px;
right: 95px;
padding: 3px;
top: 375px;
background: #CCD9B8;
border: 1px solid #C0CCAD;
}

body.home  #emailsignup input
{
display: block;
margin: 1px;
right: 0;
}

a img
{
border: 3px double #78806C;
}

a:hover img
{
border: 1px solid #78806C;
padding: 2px;
}

/* Banner
-----------------------------*/

#banner
{
position: relative;
width: 780px;
height: 319px;
z-index: 101;
margin: 0 auto;
background: url(/shared/hanginggarden/v2-header.gif) top no-repeat;
}

div.photo
{
position: absolute;
width: 200px;
height: 105px;
background: url(/images/flamingmothart001-200x105-01.jpg);
right: 100px;
top: 15px;
}

div.photo span
{
display: none;
}

div.band
{
position: relative;
color: #B4BFA3;
font-size: 3.3em;
font-family: georgia, serif;
font-weight: bold;
top: 35px;
left: 105px;
text-align: left;
}

/* Content
-----------------------------*/

         #content
         {
         position: relative;
         z-index: 104;
         width: 430px;
         margin-top: -185px;
         margin-left: 87px;
         padding: 5px;
         min-height: 150px;			/* NEW!! prevents the footer from disappearing on very short pages */
         }

         /* 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). */
         
         * html #content { 		
            _height: 150px;		/* NEW!! Only IE5/IE6 see this, and they treat it as if it were min-height */
            }


body.home #content p, body.press #content p, #calendar p
{
width: 320px;
margin: 0;
margin-left: 4px;
margin-top: 4px;
padding: 5px;
background: #CCD9B8 url(/shared/hanginggarden/corner.gif) no-repeat left top;
border: 1px solid #C0CCAD;
}

div.entry
{

}

div.notes
{
width: 405px;
margin-left: 25px;
}

         /* NEW!! This really is no longer needed. New styling for .entry h2, which only appears on .press,
				.guestbook, and sometimes .home pages is applied later in this file. Padding was made to apply
				only to the home page. 
				
         div.entry h2
         {
         font-family: georgia, serif;
         color: #66767C;
         padding-left: 18px;
         }
         */
			
         body.home div.entry h2
         {
         background: url(/shared/hanginggarden/post.gif) left no-repeat;
			padding-left: 18px;			/* NEW!! now only applies to this page so text can clear "post.gif" */
         }

body.home div.entry h2
{
background: url(/shared/hanginggarden/post.gif) left no-repeat;
}

span.date
{

}

#content h1
{
color: #929A86;
font-size: 2.5em;
font-family: georgia, serif;
font-weight: bold;
margin: 0;
padding: 0;
}

#content h1 span
{

}

#postForm
{
width: 300px;
}

#postForm input, #postForm label, #postForm textarea 
{
	
display: block;
	
text-align: left;
	
width: 300px;

}

#postForm input
{
background: #CCD9B8;
border: 1px solid #C0CCAD;
padding: 2px;
margin: 0 auto;	

}

#postForm input:focus, #postForm textarea:focus
{
border: 3px double #C0CCAD;
padding: 0;
}

#postForm textarea
{
	
color: #000;
	
background: #D8E5C3;
	
border: 1px solid #C0CCAD;
padding: 2px;
margin-bottom: 8px;
width: 298px;
}


#postForm label 
{
	
padding: 3px 0;
	
margin-bottom: 1px;
	
font-style: italic;

}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	position: relative;
	top: 5px;
	left: 0px;
}

#postForm label.security_code_label {
	width: 150px;
	position: relative;
	top: -45px;
	left: 120px;
	font-style: italic;
}

#postForm input#security_code {
	position: relative;
	top: -44px;
	left: 60px;
	width: 175px;
}

#postForm input[type=submit] {
	text-align: center;
	position: relative;
	top: -25px;
}

.artist
{
font-size: 0.8em;
margin: 0;
padding: 0;
font-style: italic;

}

.caption
{
font-style: italic;

}

/* Typography 
-----------------------------*/

h1
{
font-family: georgia, serif;
font-size: 1.1em;
color: #66767C;
}

			/* NEW!! Several styles that were previously for .calendar h2 are now applied to all h2, simply because
				they look better. The previous styles that were superceded are now commented out */
         h2
         {
         font-family: georgia, serif;
         color: #66767C; 
         font-size: 1.2em;
         font-weight: bold;
         margin: 10px 0 5px 0;
         padding: 0;
		/* font-size: 1.1em; */
      /* color: #464750; */
         }

h3
{
font-family: georgia, serif;
color: #66767C;
font-size: 1em;
margin: 0;
padding: 0;
}

/* Links
-----------------------------*/

a:link
{
text-decoration: none;
color: #4C5145;
}

a:visited
{
color: #78806C;
}

a:hover
{
color: #78806C;
text-decoration: underline;
}

a:active
{
color: #4C5145;
} 

p
{
font-size: 1em;
}

/* Navigation
-----------------------------*/

#navigation
{
position: absolute;
width: 600px;
top: 140px;
right: 0;
z-index: 102;
}

#navigation ul
{
position: absolute;
list-style-type: none;
display: block;
margin: 0;
padding: 0;
right: 90px;
}

#navigation ul li
{
display: block;
width: 150px;
}

			/* NEW!! These fixes revolve around a bug/display difference in IE that caused the li to have a 1px
				margin top and bottom, causing the whole nav list to be too tall and to be overlapped by the
				e-mail signup. The fix was to explicitliy set the box height to 13px */
				
         #navigation ul li a
         {
         display: block;
         text-decoration: none;
      /* font-size: 0.95em; */
			font-size: 11px;			/* NEW!! More consistent than 0.95em, which wasn't changeable in IE anyway */  
			height: 13px;				/* NEW!! This forces IE to render it the same way as FF and Opera */
			margin-right: 1px;		/* NEW!! Ever so slight improvement in appearance */
         padding: 3px 5px;
         font-weight: bold;
         color: #66767C;
         text-align: left;
         background: none; 
         border-bottom: 1px dotted #78806C;
         }

#navigation ul li a:hover
{
color: #99a9af;
border-bottom: 1px dotted #C0CCAD;
}

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

#footer
{
position: relative;
width: 780px;
height: 60px;
background: url(/shared/hanginggarden/v2-footer.gif) bottom no-repeat;
padding-top: 100px;
}

			/* NEW!! small positioning discrepancy between IE and FF/Opera was caused by not zeroing margin-top */
         #footer p
         {
         text-align: center; 
         color: #B4BFA3;
         padding-top: 38px; 	/* NEW!! previously was padding-top: 27px */
         margin: 0;				/* NEW!! */
         }

/* Lists
-----------------------------*/

li
{
list-style-type: none;
}

li a
{
background: url(/shared/hanginggarden/bullet.gif) left no-repeat;
padding-left: 16px;
}

/* Calendar
-----------------------------*/

        	.contact h2, .bio h2, #calendar h2			/* NEW!! This was applied at .calendar level before */
         {
      /* font-size: 1.2em;		NEW!! these styles have now been applied to h2 in 
         font-weight: bold; 			general, so they would be redundant here */
         color: #78806c;
     /*  margin: 0;
         margin-top: 10px;
         margin-bottom: 5px;
         padding: 0; */
         width: 435px;		
         border-bottom: 1px dotted #78806c;
         } 

#calendar h3
{
margin: 0;
margin-left: 10px;
padding: 0;
}

.details
{
margin: 0;
margin-left: 10px;
padding: 0;
}

.details h4
{
margin: 0;
padding: 0;
font-weight: normal;
}

address
{
font-style: normal;
}

#calendar p
{
margin-left: 10px;
font-style: italic;
}

			/* NEW!! Here are several margin and text styling adjustments to improve layout and readability.
				There's only one real bug fix, which is this quotes image that used to disappear from IE6 on the
				press page only. Setting a width caused it to reappear */
				
         img {margin: 4px;}

			h1 {margin-bottom: 10px !important;}

			h4 {font-size: 1em;}		/* NEW!! improves appearance in IE */

			
			/* page specific */			
			
			.press .entry		{padding-bottom: 10px;}
			.press h2			{margin-top: 15px; margin-bottom: 0;}
			.press .caption	{margin-left: 50px;}
			.press blockquote {
				width: 330px;		/* NEW!! the quotes gif didn't appear in IE6, but this fixes it for some reason */
				margin: 5px 0 0 40px;
				} 	

			.photos dt {
				color: #66767C;
				font: bold 1.2em georgia, serif;
				}
			.photos dd {
				margin-bottom: 15px;
				}

			.guestbook h3 				{margin-left: 10px;}
			.guestbook blockquote	{margin: 10px 40px 15px 40px;} 


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