/* 
	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
	- design flaw: there was no way for the user to tell that in h3 was a link--they looked just like normal
	  h3s. now they have color
	- the strange IE-only "hasLayout" underline bug that appeared in the other variations didn't happen to
	  this one. no idea why not
	- 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
	  
	NEW VARIATION by Andrew Tay: a simple color change.

*/


/* 
USER SPECIFIC BACKGROUND IMAGE
max width should be 240px
*/
#content {
	}

#content {
	background-repeat: no-repeat;
	background-position: 0 120px;
	}

/*
	ch v1.21BW 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.07em; 					NEW!! IE interprets this differently when using ems */
         		letter-spacing: -4px;					/* 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; 					NEW!! IE interprets this differently when using ems */
         		letter-spacing: -1.5px;					/* NEW!! but all browsers seem to handle px the same */	
         		top: 0.2em;
         		}
         	h2 a, h3 a {
         		color: #fb0;								/* NEW!! links in a contasting color */
         		letter-spacing: normal;
         		}
hr {
	display: none;
	}
img {
	border: 0;
	}

input, textarea {
	font-weight: bold;
	min-width: 60px;
	height: 1.3em;
	border: 2px 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 black;
				}
				
	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 {
	text-align: center;
	padding: 0.3em 1%;
	}
	#navigation li {
		display: inline;
		}
		#navigation a {
			vertical-align: middle;
			padding: 0 0.6em;
			}
/* 
emailsignup
*/		
#emailsignup {
	text-transform: lowercase;
	text-align: right;
	padding: 0.25em 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: 7px 17% 50px 250px;
	marg\in-top: -1px;
	}
	#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;
		}
	.photos dd {
		padding-top: 1px;
		}
/* 
footer
*/
#footer {
	padding: 0.6em 1%;
	text-align: right;
	}

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

.music #content li {
	text-align: right;
	}

.contact #content .name {
	display: block;
	position: relative;
	}
	.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;
         		}
         	.guestbook #content input[type=text], .guestbook #content textarea[name] {
         		border: 1px dotted;
         		border-top: 2px solid;	
         		}

			
.links #content h3{
	margin-bottom: 0.5em;
	}
			
/* -- STYLE -- */

/* 
fonts 
*/
body {
	font: normal 100%/1.2 "Times New Roman", serif;
	}
	textarea, input {
		font-family: "Times New Roman", serif;
		}
	h1, h2, h3, #navigation, #footer, .press .caption, .photos dt, label, input, textarea {
		font-family: Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		font-weight: bold;
		}
		input[type=text], html>body textarea {
			font-family: "Times New Roman", serif;
			text-transform: none;
			font-weight: normal;
			}
h1, h2, h3, label, .press .caption, .photos dt {
	font-weight: normal;
	font-size: 2.1em;
	line-height: 0.8;
	}
	h1 {
		text-transform: uppercase;
		font-size: 3.6em;
		}
	dl h3 {
		font-weight: bold;
		font-size: 1em;
		line-height: 1.1;
		}
	h4, h5, h6 {
		font-size: 1em;
		}
	#navigation, #footer {
		font-size: 0.87em;
		}
	.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 {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 0.9em;
	line-height: 1;
	}
		
/* 
colors 
*/

         body, input, textarea, h1, a {
         	color: #000; 
         	}
         a {
      		color: #fb0;								/* NEW!! links in a contasting color (used to be black) */
         	}

			/* NEW!! Since the yellow on white is hard to read at small sizes, this makes it bold */
			a:link, a:hover, a:active {
				font-weight: bold;
				}
			#content a:visited, #content h3 a {
				font-weight: normal;
				}
	
	#emailsignup, #emailsignup * {
		color: #222;
		}
	#emailsignup input[type=submit]:hover, #emailsignup input[type=submit]:focus {
		color: #000;
		}
	a:visited {
		color: #666;
		}
h2, h3, label, .press .caption, .press .caption a, .photos dt {
	color: #000;
	}
#navigation a, #footer {
	color: #fff;
	}
	#navigation a:hover, #navigation a:focus {
		color: #fb0;
		}

/* 
background-colors 
*/
body, #navigation, #footer {
	background-color: #222;
	}
#emailsignup, #content {
	background-color: #fff;
	}
	
			/* 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: #fff;
      		}
		
	input[type=submit]:hover, input[type=submit]:focus {
		color: #222;
		}
/* 
borders 
*/
.press blockquote {
	border-bottom: 2px solid #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? */
	
         .notes, .name, .artist, .guestbook blockquote, 
			.bio .entry p, #calendar .details, .photos dd, .links dl {
         	border-top: 2px solid #000;
         	}
         	.links h1 + dl {
         		border-top: none;
         		background: none;
         		}

/* special redstyle */
#navigation a {
	padding: 0 0.3em;
	letter-spacing: -0.05em
	}
		

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