/* 
	Designed by designer: Nigel Goodfellow www.thatluckydog.com - Ottawa Ontario Canada
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com June 2007
	New Wide variation designed by Andrew Tay based on Mr. Goodfellow's original, of course
	 
   All styles that have been changed are indented
	
	- improved #emailsignup; it now displays consistently across different browsers and no longer overlaps the
	  #banner photos as it did in FF before
	- minor tweaks for home page images, calendar .details
	
	NEW VARIATION: wide version is 50% wider (600px wide, which is still pretty squeezed)

*/


   body {
   	text-align: center;
   	margin: 0;
   	padding: 0;
   	background: #383C44 url(/shared/squeeze/bodybg_3-wide.gif) repeat-y center;	/* NEW!! Wide image */
   	}

#accessibility {
	position: absolute;
	left: -9999px;
	}
	
   #container {
   	text-align: left;
   	margin: 0px auto;
   	width: 600px;								/* NEW!! New variation is 50% wider (was 400px) */
   	border-top: 5px solid #301F03;
   	padding-top: 1px;
   	background: #fff url(/shared/squeeze/navbg_3-wide.gif) no-repeat top;
   	}

   #navigation {
   /*	height: 60px; */
   	height: 40px;								/* NEW!! Different proportions for wide variation */
   	}
	
#navigation ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}
	
#navigation li {
	margin: 0;
	padding: 0;
	float: left;
	height: 20px;
}

#navigation li a {
	display: block;
	font: 15px Georgia, serif;
	color: #999;
	text-decoration: none;
	padding: 0 4px 0 4px;
	background: transparent url(/shared/squeeze/navabg_3.gif) repeat-x;
	background-position: 0 0px;
	width: auto;
	}

#navigation li a:hover {
	color: #fff;
	background-position: 0 -20px;
	}

#navigation a.here {
	background: #fff url(/shared/squeeze/atest.gif) repeat-x;
	color: #666;
	}
	
         #emailsignup {
         	clear: both;
         	font: 0.7em Arial, sans-serif;
         	padding: 4px;
         	text-align: right;
				height: 26px;					/* NEW!! improves consistency across browsers */
				line-height: 26px;			/* NEW!! improves consistency across browsers (and centers vertically) */
         /*	margin-bottom: -17px;			
           	voice-family: "\"}\""; 			NEW!! These negative margins pulled the #banner up, partly
           	voice-family:inherit;					overlapping the #emailsignup. Must've been an attempt to 
           	margin-bottom: -16px; 					eliminate the gap that appeared in IE before (but no longer) */	
         	}
			
			#emailsignup form	{
				margin: 0;						/* NEW!! eliminates a gap that appeared below in IE6 */
				}
	
#emailsignup input {
	border: 1px solid #ccc;
	padding: 1px;
	font: 0.9em Verdana, sans-serif;
	margin-left: 10px;
	}
	
	/* NEW!! One of the biggest changes for the Wide variations is that there are now only two user-selected
		images and they're much larger with different proportions and an asymmetrical layout. The proportions
		of the #navigation div have also been adjusted to match. */
		
   #banner {
   /*	height: 90px; */
		height: 180px;
   	}
   	
   .photo {
   	float: left;
   /*	width: 199px;
   	height: 90px; */
		width: 134px;					/* NEW!! Different proportions for wide variation */
		height: 180px;					/* NEW!! Different proportions for wide variation */
background: #fff url(/images/scallop-cropped-leftphoto.gif);
   	}
   	
   .band {
   	float: right;
   /*	width: 200px;
   	height: 90px; */
		width: 465px;					/* NEW!! Different proportions for wide variation */
		height: 180px;					/* NEW!! Different proportions for wide variation */
background: #fff url(/images/edit-01-cropped-rightphoto.jpg);
   	}
	
.photo span, .band span {
	display: none;
	}
	
   #content {
   	clear: both;
   	width: 590px;							/* NEW!! New variation is 50% wider (was 400px) */
   	padding: 0 5px;
	}

	/* NEW!! In the original skinny versions, h1 was used simply to position a third user-selected image,
		which is why the h1 span was set to display: none. Now, we're using it as nature intended. New text
		styling, of course. */

   #content h1 {
   /*	border-top: 1px solid #fff;			NEW!! This styling is no longer needed
   	padding: 0;
   	margin: 0 0 10px 0; */
   	height: 41px;							/* NEW!! */
		color: #777;							/* NEW!! */
		font: bold 1.1em Tahoma, Arial, Helvetica, Verdana, sans-serif;	/* NEW!! */
   	}
   
	/*	NEW!! Now we want the h1 to appear in all its resplendent glory
   #content h1 span {
   	display: none;
   	} */
	
#content h2 {
	font: 0.9em Tahoma, sans-serif;
	color: #301F03;
	padding: 0 5px 0 20px;
	margin: 0 0 10px 0;
	background: transparent url(/shared/squeeze/h2bg.gif) no-repeat left center;
	}
	
#content h2 a {
	color: #773C1C;
	}

#content h3, .name {
	font: 1em Arial, Tahoma, sans-serif;
	color: #545967;
	padding: 0 5px 0 20px;
	margin: 0;
	}	

#content p {
	font: 0.7em Verdana, sans-serif;
	color: #777;
	padding: 0 5px 0 20px;
	margin: 0 0 10px 0;
	background: transparent url(/shared/squeeze/pbg.gif) no-repeat left center;
	}
	
#content .notes {
	font: 0.7em Verdana, sans-serif;
	color: #777;
	padding: 0 5px 0 20px;
	margin: 0 0 10px 0;
	}

#content a {
	color: #555;
	text-decoration: none;
	border-bottom: 1px solid #555;
	}
	
#content a img {
	border: 1px solid #777;
	padding: 1px;
	}
	
.entry {
	padding: 5px 0 5px 0;
	/* border-top: 5px solid #eee; */
	margin: 0;
	}
	
         .details {
         	padding: 5px 0 15px 20px;					/* NEW!! padding-left was 0, but this is better */
         	/* border-bottom: 5px solid #eee; */
         	/*	margin-bottom: 13px; 						NEW!! I think it looks better without this gap */
         	}

         .details .price {padding-left: 15px;}		/* NEW!! another small aesthetic improvement */
	
.artist {
	font: 0.7em Verdana, sans-serif;
	color: #777;
	padding: 0 5px 0 20px;
	margin: 0 0 10px 0;
	}	
	
#content ul {
	margin: 0 0 0px 20px;
	padding: 0;
	list-style-type: none;
	}
	
#content li {
	margin: 0;
	padding: 2px 0 2px 15px;
	background: transparent url(/shared/squeeze/pbg.gif) no-repeat left center;
	font: 0.7em Tahoma, sans-serif;
	color: #888;
	}
	
#content li a {
	text-decoration: none;
	border-bottom: 1px solid #555;
	}
	
#content li a:hover {
	}

#content blockquote {
	font: 0.8em Georgia, serif;
	color: #777;
	padding: 0 5px 0 20px;
	margin: 5px 0 10px 0;
	background: transparent url(/shared/squeeze/blockquotebg.gif) no-repeat left top;
	}
	
#content .caption {
	font: 0.7em Verdana, sans-serif;
	padding: 0 5px 0 20px;
	margin: 0 0 10px 0;
	}
	
#content .details {
	color: #888;
	}	
	
address {
	margin: 0;
	padding: 0 0 0 15px;
	background: transparent url(/shared/squeeze/pbg.gif) no-repeat left center;
	color: #888;
	}
		
#content h4 {
	margin: 0;
	padding: 0 0 0 15px;
	background: transparent url(/shared/squeeze/pbg.gif) no-repeat left center;
	color: #888;
	}
	
dl {
	text-align: center;
	}
	
dt {
	margin: 0 0 5px 0;
	padding: 9px 5px 14px 5px;
	font: 0.7em Tahoma, sans-serif;
	color: #888;
	background: transparent url(/shared/squeeze/photobg.gif) no-repeat bottom center;
	}
	
dd {
	margin: 0;
	padding: 0;
	}
	
table .entry {
	border-top: 10px solid #eee;
	}
	
th {
	font: 0.7em Arial, Tahoma, sans-serif;
	color: #888;
	text-align: left;
	}	
	
td {
	color: #888;
	}
	
   #postForm {
   	padding: 10px 10px 10px 20px;						/* NEW!! margin-left: 20px is just for Wide variation */
   	margin: 0 0 5px 0;
   	border-bottom: 4px solid #eee;
   	}
			
   .guestbook #postForm	form	{width: 380px;}	   /* NEW!! necessary for wide variation */
	
#postForm label {
	display: block;
	font: 0.6em Arial, sans-serif;
	text-transform: uppercase;
	color: #888;
	}
	
#postForm input, #postForm textarea {
	width: 275px;
	text-align: center;
	display: block;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-top: 7px;
	margin-bottom: 7px;
}

#postForm label.security_code_label {
	width: 220px;
	margin-top: 8px;
	margin-left: 15px;
	float: left;
}

#postForm input#security_code {
	width: 161px;
	float: left;
	margin-left: 15px;
	background: #fff;
}

#postForm input[type=submit] {
	clear: both;
	display: block;
	text-align: center;
	width: 280px;
}

#footer {
	margin-top: 10px;
	background: #eee url(/shared/squeeze/footerbg.gif);
	}
	
#footer p {
	font: 0.7em Tahoma, sans-serif;
	text-align: center;
	margin: 0;
	padding: 3px;
	color: #888;
	}

   /* NEW!! minor tweaks for home page images, calendar .details */
   
   .home img {
	   margin: 10px 0 10px 20px; 		/* NEW!! margin-left: 20px; is just for Wide variation */
	   display: block;					/* NEW!! display: block triggers margin collapse */
   	}	
         

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