/* 
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-June 2007 
   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 330px 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
	- fixed positioning bugs that affected #navigation and #footer
	- 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 they styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.
	- added simple trick to get centering to work in IE5

*/


         body
         {
         margin: 0 auto;
         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;
}

         #container
         {
         font-size: 0.7em;
         position: relative;
         width: 780px;
         margin: -11px auto;
         padding: 0;
         background: #B3BFA1 url(/shared/hanginggarden/v3-wrapper-bg.gif) repeat-y 50%;
         top: 0;
			text-align: justify;		/* NEW!! This trick gets centering to work in IE5 (see body above) */
         }

#accessibility
{
display: none;
}

#emailsignup
{
display: none;
}

body.home #emailsignup
{
position: absolute;
display: block;
z-index: 109;
width: 130px;
left: 95px;
top: 375px;
padding: 3px;
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/v3-header.gif) top no-repeat;
}

div.photo
{
position: absolute;
width: 200px;
height: 105px;
	background: url(/images/scarf-200x105.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: 250px;
padding: 5px;
}

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

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;

}

.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;
left: 0;
z-index: 102;
}

#navigation ul
{
position: absolute;
list-style-type: none;
display: block;
margin: 0;
padding: 0;
left: 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/v3-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; }