/* 
	Designed by Christof Hoeke, C the Dot www.cthedot.de  -  Bielefeld  Germany
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com June 2007 
   All styles that have been changed are indented
	
	- now using px to control letter-spacing instead of ems. apparently, when you use ems, ie calculates them
	  differently from FF and Opera--not a surprise, although the W3C spec gives browser makers lattitude in
	  this area, so for once, IE may not be completely wrong. but this way is more consitent
	- all 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
	- fixed a strange bug that seemed to prevent the underline from appearing on all h3 elements in all versions
	  of IE. in face, the underline trick is done by a) following each h3 with a div or other block that has
	  a solid color background that matches the page (e.g. black) and a 1px top border that matches the color of
	  the h3, and b) using position: relative to push the h3 down behing this div/block so that the bottom gets
	  cut off. problem was, the border didn't appear in IE--actually it was getting reduced by 1px, which in
	  this case reduced it to nothing. ultimately it was an IE-specific "hasLayout" problem (see
	  http://haslayout.net/haslayout.shtml), solved by giving the div/block "layout" 
	- fixed minor anomaly in Safari that prevented the input boxes on the .guestbook page from covering the
	  bottom portion of the form labels
	- made #navigation li a elements easier to click

*/


/* 
USER SPECIFIC BACKGROUND IMAGE
width should ideally be 200x200 or 220x220 px
*/
#content {	
	}

/*	
	ch v1.21BB 041006
*/

/* -- Basic HTML Elements -- */
body, form , ul, li, blockquote, dd {
	padding: 0;
	margin: 0;
	}
	ul {
		list-style-type: none;
		}
h1, h2, h3, h4, h5, h6, div, p, dl, dt, blockquote {
	pos\ition: relative;
	padding: 0;
	margin: 0;
	}

         	h1 {
         /*		letter-spacing: -0.04em; 					NEW!! IE interprets this differently when using ems */
         		letter-spacing: -2.5px;					/* NEW!! but all browsers seem to handle px the same */	
         		z-index: 2000;
         		left: -130px;
         		top: 0.4em;
         		margin-bottom: 1em;
         		}

	h2, h3, label, .press .caption, .photos dt {
		le\tter-spacing: -0.04em; /* not IE 5 */
		left: 0.05em;
		top: 0.2em; 
		}
	h2 a, h3 a {
		letter-spacing: normal;
		}
hr {
	display: none;
	}
img {
	border: 0;
	}

input, textarea {
	font-weight: bold;
	min-width: 60px;
	height: 1.3em;
	border: 1px solid;
	}
	input[type=text], textarea[name] {
		border: 1px dotted;
		}
	input[type=submit] {
		border-style: outset;
		}
	textarea {
		height: 6em;
		}
@media all {
	input, textarea {
		height: auto;
		}
}
	
a {
	text-decoration: none;
	border-bottom: 1px dotted;
	}
	a:hover, a:focus, a:hover h2, a:focus h2 {
		text-decoration: underline;
		}
	td a {
		border-bottom: 0;
		text-decoration: underline;
		}
		td a:hover, td a:focus {
			border-bottom: 1px dotted;
			}
	#navigation a {
		border-bottom: none;
		}
		#navigation a:hover, #navigation a:focus {
			text-decoration: none;
			}
		
/* -- main elements -- */
#accessibility {
	display: none;
	}
#container {
	}

/* 
navigation 
*/
#navigation {
	padding: 0.25em 1% 0.7em;
	}
	#navigation li {
		display: inline;
		}
		#navigation a {
			padding: 0 0.6em;
			}
/* 
emailsignup
*/		
#emailsignup {
	text-transform: lowercase;
	text-align: right;
	padding: 0.2em 1% 1px;
	}
	#emailsignup input {
		border-width: 1px;
		margin-left: 1em;
		}
	#emailsignup input[type=text] {
		border-width: 0 1px 1px;
		}
	#emailsignup input[type=submit] {
		border-width: 1px;
		}
/*
banner 
*/
#banner {
	display: none;
	}

/* 
content 
*/
#content {
	padding: 40px 17% 5em 250px;
	}
	#content li {
		margin-bottom: 0.2em;
		}
	.entry {
		margin-top: 1.5em;
		}
	.name {
		margin-bottom: 1em;
		}
	.artist {
		font-style: italic;
		}
	blockquote, .notes, .artist, .name, .act, .details li, .bio .entry p,
	.calendar .details, .links dl {
		padding: 2px 2px 2px 5%;
		}
	.photos dd {
		padding-top: 1px;
		}
/* 
footer
*/
#footer {
	padding: 1.1em 1% 0.6em;
	text-align: right;
	}

/* -- PAGE SPECIFIC -- */
.home h1 {
	margin-bottom: 30px;
	}	
	.home #content p {
		}

.music #content li {
	text-align: right;
	}
		
.contact #content .name {
	display: block;
	position: relative;
	margin-bottom: 1.2em;
	}
	.contact #content li {
		text-align: right;
		}

.press .entry {
	padding-top: 1.5em;
	}
	.press blockquote {
		font-style: italic;
		text-align: right;
		z-index: 1000;
		}
	.press .caption {
		top: -0.15em;
		}

#calendar {
	}
	#calendar .entry {
		margin-bottom: 1.5em;
		}
	#calendar .entry h2, #calendar .entry h3 {
		padding-top: 0;
		}
	#calendar .details, #calendar p {
		text-align: right;
		}
	#calendar h4, #calendar address {
		font-style: normal;
		display: inline;
		padding-left: 1em;
		}
	#calendar p {
		padding-top: 0.2em;
		}
		
.photos dd {
	position: relative;
	text-align: center;
	margin-bottom: 5em;
	padding-top: 0;
	}
	.photos dd img {
		margin-right: 70px;
		}

.products h2, .products h3, .products p, .products ul, .products .entry {
	position: static;
	}
	.products #content a {
		font-size: 1.5em;
		}
	.products #content h3 {
		text-align: right;
		padding: 0;
		}
	.products #content .entry {
		margin-bottom: 2em;
		}
	.products #content h2 a {
		font-size: 1em;
		}
		
         .guestbook #content input, .guestbook #content textarea {
         	display: block;
         	margin: -0.6em 0 0.3em 0;
         	width: 450px;
         	position: relative; 		/* NEW!! This forces input boxes to cover form labels in Safari */
         	z-index: 200;				/* NEW!! This forces input boxes to cover form labels in Safari */
         	}
         	.guestbook #content textarea {
         		margin-bottom: 1.5em;
         		}
         	.guestbook #postForm {
         		padding-bottom: 2em;
         		}
         	.guestbook .entry {
         		margin-bottom: 2em;
         		}	
         	.guestbook .entry h2, .guestbook .entry h3 {
         		padding-top: 0;
         		}
			
.links #content h3{
	margin-bottom: 0.5em;
	}
			
/* -- STYLE -- */

/* 
fonts 
*/
body {
	font: bold 82%/1.3 Arial, Helvetica, sans-serif;
	}
	textarea {
		font-family: Arial, Helvetica, sans-serif;
		}
	h4, h5, h6, textarea {
		font-size: 1em;
		}
	#banner {
		font-weight: normal;
		}
h1, h2, h3, label, .press .caption, .photos dt {
	font-weight: normal;
	font-size: 3em;
	line-height: 0.8;
	}
	h1 {
		font-size: 5em;
		text-transform: lowercase;
		}
	#navigation {
		text-transform: lowercase;
		}
	dl h3 {
		font-weight: bold;
		font-size: 1em;
		line-height: 1.1;
		}
	.home #navhome, .index #navindex, .music #navmusic, .contact #navcontact,
	.press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,
	.links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
		font-size: 2em;
		}

	/* NEW!! These lines make the clickable area invisibly larger (the full height of the #navigation bar) */
	
	#navigation a {
		padding-top: 0.8em !important; 			/* NEW!! same great taste, easier to click */
		padding-bottom: 0.8em !important;		/* NEW!! same great taste, easier to click */
		}

.home #content p, .bio #content p:first-line, .notes:first-line, .name {
	font-family: Verdana, Helvetica, sans-serif;
	}

/* 
colors 
*/
body, input, textarea, h1, a {
	color: #fff;
	}
	a:visited {
		color: #ddd;
		}
h2, h3, label, .press .caption, .press .caption a, .photos dt {
	color: #9ac; 
	}
#navigation a, #footer {
	color: #000;
	}
	#navigation a:hover, #navigation a:focus,
	.home #navhome, .index #navindex, .music #navmusic, .contact #navcontact,
	.press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,
	.links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
		color: #fff;
		}
		
/* 
background-images
*/
#navigation {
	background: url(/shared/bigfont/top.gif) repeat-x left bottom;
	}
#content {
	background-repeat: no-repeat;
	background-position: 25px 0;
	}
#footer {
	background: url(/shared/bigfont/bottom.gif) repeat-x left top;
	}

/* 
background-colors 
*/
body, #navigation, #footer {
	background-color: #9ac;
	}
#emailsignup, #banner, #content {
	background-color: #000;
	}

			/* NEW!! Before, calendar was 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? */

      	input, textarea,
      	.press blockquote,
      	.notes, .name, .artist, .guestbook blockquote, .bio .entry p, #calendar .details, .photos dd, 
      	.links dl {
      		background-color: #000;
      		}
      	input[type=submit]:hover, input[type=submit]:focus {
      		background: #9ac;
      		}
/* 
borders 
*/
.press blockquote {
	border-bottom: 1px solid #9ac;
	}

			/* NEW!! Before, calendar was 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? 
			
			But there's more to this story: the border wouldn't appear in any version of IE (actually, it was
			being reduced by 1px) due to these divs/blocks not "havingLayout" (see
			http://haslayout.net/haslayout.shtml). Usual fixes such as specifiying height or width or position
			didn't work (they interfered with the fluid layout) and the Holly Hack is no longer safe to 
			use--if it ever was. But setting display: inline-block; and setting it back to display: block; in a
			separate	statement neatly solves the problem without resorting	to hacks and without messing up other
			browsers. */

         .notes, .name, .artist, .guestbook blockquote, 
			.bio .entry p, #calendar .details, .photos dd, .links dl {		
         	border-top: 1px solid #9ac; 
				display: inline-block;
         	}
				
         .notes, .name, .artist, .guestbook blockquote, 
			.bio .entry p, #calendar .details, .photos dd, .links dl {		
				display: block;
         	}
				
.guestbook #content input[type=text], .guestbook #content textarea[name] {
	border-top: 1px solid #9ac;
	}
	.links h1 + dl {
		border-top: none;
		background: none;
		}

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