/* 
	Designed by Jason Terk rain.xidus.net  -  Boston MA USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com June 2007 
   All styles that have been changed are indented
	
	- 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.
	- slight tweak to img margins for the sake of the homepage image
	- removed a small hack on the h1 (used to use margin-left, now position: relative and left)
	- fixed background images for IE6. the original designer attempted to pull off what's known as the Complex
	  Spiral: a CSS-based special effect discoverd by Eric Meyer 
	  
	  		meyerweb.com/eric/css/edge/complexspiral/demo.html
			
	  and	which is neat but doesn't work in IE6 due to a lack of support for background-attachment: fixed;
	  on anything other than body. Unfortunately, the failure of the effect causes the background images to be
	  misaligned, and well, look funny. Used a safe hack to put them back in place.

*/


/* Defaults */
* {
	margin: 0;
	border: 0;
	padding: 0;
}

/* Hide the accessibility content */
#accessibility {
	position: absolute;
	left: -9999px;
}

/* Basic structural stuff */
body {
	background: #F7EEE5 url(/shared/cornerfade/beige_fade_k.gif ) top left repeat-y fixed;
}

div#container {
	background: transparent url(/shared/cornerfade/beige_keys_fade.jpg ) top left no-repeat fixed;
	padding-top: 2em;
	padding-left: 6em;
}

div#content {
	width: 55%;
	margin-left: 6em;
	font-family: Georgia, 'Times New Roman', serif;
}

/* Links */
a:link {
	color: #8F827C;
}

a:visited {
	color: #8F827C;
}

a:hover {
	color: #444;
}

a:active {
	color: #000;
}

/* Navigation */
div#navigation {
	width: 8em;
	position: absolute;
	top: 2em;
	left: 20px;
}

#navigation ul {
	padding: .5em 0;
	border: 1px solid #F7EEE5;
	list-style: none;
	background: #8F827C url(/shared/cornerfade/beige_keys_nav.jpg ) top left no-repeat fixed;
}

			/* NEW!! Since IE6 can't pull off the Complex Spiral effect (see comment at top of file), this hack
				is necessary to realign the background image, which will behave as background-attachment: scroll. 
				The hack is relatively safe as it targets IE6 only and it combines the * html hack and the
				underscore hack for added safety. */
			
			* html #navigation ul {
				_background-position: -20px -2em;	/* NEW!! we would add 1px for the border, if not for the ems */
			}

			/* NEW!! Improved text styling, removing bold from Impact and adding web standard font Arial and
				MS Office font Haettenschweiler--which is also impossible to spell--to the font list */
				
         #navigation a {
         	margin: 0.25em;
         	text-decoration: none;
         /*	font-weight: bold;			NEW!! The font "Impact" should never be set in bold */
         	font-size: 1.2em;
         	font-family: Impact, "Arial Black", "haettenschweiler", "Trebuchet MS", Verdana, sans-serif;
         }

#navigation a:link {
	color: #F7EEE5;
}

#navigation a:visited {
	color: #F7EEE5;
}

#navigation a:hover {
	border-bottom: 1px dotted #FFF;
	color: #FFF;
}

#navigation a:active {
	color: #000;
}

/* Banner */
div#banner {
	height: 75px;
	margin-left: 6em;
}

#banner div.photo {
	width: 500px;
	height: 62px;
background: url(/images/hugesaxandtitle-445x62.jpg) top left no-repeat;
}

#banner div.band {
	display: none;
}

.photo span {
	display: none;
}

/* E-mail signup */
div#emailsignup {
	width: 9em;
	padding: 0.5em;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.8em;
	border: 1px solid #F7EEE5;
	background: #8F827C url(/shared/cornerfade/beige_keys_nav.jpg ) top left no-repeat fixed;
	position: absolute;
	top: 35em;
	left: 20px;
	color: #F7EEE5;
}

			/* NEW!! Since IE6 can't pull off the Complex Spiral effect (see comment at top of file), this hack
				is necessary to get rid of the background image, which shouldn't appear here if the effect is off. 
				The hack is relatively safe as it targets IE6 only and it combines the * html hack and the
				underscore hack for added safety. */

			* html div#emailsignup {
				_background-image: none !important;
			}

#emailsignup input {
	display: block;
	margin-top: 0.5em;
}

/* Footer */
div#footer {
	font-style: italic;
	font-size: 0.8em;
	margin-top: 1em;
	margin-left: 8em;
}

p {
	line-height: 1.3em;
}

         h1 {
         	font-size: 1.7em;
         	font-family: Verdana, Arial, sans-serif;
         	font-variant: small-caps;
         	margin: 0.5em 0;
				position: relative; 						/* NEW!! shifts h1 to the left; works in all browsers */
				left: -0.5em;								/* NEW!! shifts h1 to the left; works in all browsers */
         }
			
         /* NEW!! Now using relative positioning to shift h1 to the left. Not sure why it was getting cut off
				in IE6, but this works without hacks.
				
         This is hidden from various flavors of IE, they cut off the text 
         h1, [dummy] {
         	margin: 0.5em 0 0.5em -0.5em;
         }
         */

/* This is hidden from various flavors of IE, they cut off the text */
h1, [dummy] {
	margin: 0.5em 0 0.5em -0.5em;
}

h2 {
	font-size: 1.3em;
	font-weight: normal;
	font-variant: small-caps;
	font-style: italic;
	margin: 0.5em 0 0.5em 0;
	border-bottom: 1px solid;
}

h3 {
	font-size: 1.1em;
	font-weight: medium;
	font-variant: small-caps;
	margin: 0.5em 0 0.5em 0;
}

blockquote {
	border: 1px solid #8F827C;
	padding: 0.5em;
}

         img {
         	border: none;
         	margin: 5px 0;				/* NEW!! was 0 all around. There's really no reason for the side margins */
         }

div.caption {
	text-align: right;
	font-style: italic;
	margin-bottom: 1em;
}

.notes {
	line-height: 1.3em;
}

/* Music Lists */
.music h3 {
	border-bottom: 1px solid;
}

.music div.details {
	padding-bottom: 1em;
}

.music .details ul {
	list-style: none;
}

.music .details a {
	margin-left: 1em;
}

.music .artist {
	font-style: italic;
	margin-bottom: 0.5em;
}

/* Contact page */
.contact ul {
	list-style: none;
}

			/* NEW!! Before, these were styled at the page level (using body.calendar or .calendar for short).
			Now that calendars can also appear on the	home page, they are styled using div#calendar or
			#calendar for short. Calendars are always contained within a #calendar div, no matter what page
			they're on. Good, no? */

         /* Calendar */
         #calendar p {
         	margin-top: 1em;
         }
         
         #calendar h3 {
         	padding-left: 23px;
         	/* NOTE: @ is 20 x 20 image
         		font: 20pt Tempus Sans ITC
         	*/
         	background: transparent url(/shared/cornerfade/green_at_f.gif ) 0 1px no-repeat;
         }

/* Store & Cart */
table {
	margin-bottom: 1em;
}

.products ul {
	list-style: none;
}

/* Guestbook */
#postForm input, #postForm textarea {
	margin-bottom: 1em;
	border: 1px dotted #666;
}

#postForm {
	border: 1px dotted #BBB;
	padding: 1em 0 0 1em;
}

/* Photos */
.photos dt {
	font-style: italic;
	text-align: center;
	margin-bottom: 0.5em;
}

.photos dd {
	text-align: center;
	margin-bottom: 1em;
}

.photos dd img {
	border: 2px solid;
	margin: auto;
}

/* Misc. */
label {
	display: block;
}

/* hide from IE mac \*/
input {
	display: block;
}
/* end hiding from IE5 mac */
#splashimage { text-align: center; margin: 100px auto; }
#splashimage a img { border: 0; }


.news #content .news_next,.news_prev { line-height: 3 }