/* 
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: #889EA6 url(/shared/hanginggarden/body-bg-blue.gif) repeat-y 50%;
         color: #111;
         }

blockquote
{
background: url(/shared/hanginggarden/blockquote-blue.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/v1-wrapper-bg-blue.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: inline;
z-index: 109;
right: 95px;
top: 165px;
}

body.home  #emailsignup input
{
margin: 1px;
}

a img
{
border: 3px double #464750;
}

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

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

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

div.photo
{
position: absolute;
width: 200px;
height: 105px;
right: 100px;
top: 15px;
}

div.photo span
{
display: none;
}

div.band
{
position: relative;
color: #ABB6BA;
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: 595px;
         margin-top: -160px;
         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: #B7C3C7 url(/shared/hanginggarden/corner-blue.gif) no-repeat left top;
border: 1px solid #BCC8CC;
}

div.entry
{

}

div.notes
{
width: 450px;
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-blue.gif) left no-repeat;
			padding-left: 18px;			/* NEW!! now only applies to this page so text can clear "post-blue.gif" */
         }

span.date
{

}

#content h1
{
color: #6C7E84;
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: #A4AFB3;
border: 1px solid #BCC8CC;
padding: 2px;
margin: 0 auto;	

}

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

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


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

}

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

a:visited
{
color: #6C7480;
}

a:hover
{
color: #6C7480;
text-decoration: underline;
}

a:active
{
color: #464750;
} 

p
{
font-size: 1em;
}

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

#navigation
{
position: absolute;
margin: 0 auto;
width: 600px;
top: 138px;
left: 88px;
z-index: 102;
}

#navigation ul
{
list-style-type: none;
display: block;
margin: 0;
padding: 0;
}

#navigation ul li
{
display: inline;
width: auto;
float: left;
}
			
				
#navigation ul li a
{
display: inline;
text-decoration: none;
font-size: 0.95em;
padding: 3px 5px;
font-weight: bold;
color: #525E62;
text-align: center;
background: none;
}
			
			/* NEW!! Minor tweak to make #navigation buttons easier to click. Top and bottom padding on "li a"
				elements has been increased. Since they're inline, this doesn't change their position at all--it
				just makes them taller. Padding for "li a span" must also be increased for it to work in Safari.
				It doesn't work in any version of IE unless you give li a or li a span "hasLayout", which
				unfortunately *does* change the positioning and would require some fiddling (not worth it).*/
			
			#navigation ul li a span
			{
			padding: 5px 0;
			}

#navigation ul li a:hover
{
color: #6C7E84;
}

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

#footer
{
position: relative;
width: 780px;
height: 60px;
background: url(/shared/hanginggarden/v1-footer-blue.gif) no-repeat;
}

#footer p
{
text-align: center;
color: #B4BFA3;
padding-top: 27px;
}

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

li
{
list-style-type: none;
}

li a
{
background: url(/shared/hanginggarden/bullet-blue.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: #464750;
     /*  margin: 0;
         margin-top: 10px;
         margin-bottom: 5px;
         padding: 0; */
         width: 499px;		/* NEW!! was 500px; curiously, this makes the dotting look better in FF and Opera */
         border-bottom: 1px dotted #464750;
         } 
		
#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: 495px;		/* 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; }