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

*/


/* 
USER SPECIFIC BACKGROUND IMAGE
max width should be 240px
*/
#content {
background-image: url(/images/ellenmandel-220x220.jpg);
	}

#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: #e00;								/* NEW!! helps make it obvious that this is a link */
         		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;
	}
	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;
	}
	.guestbook #content textarea {
		margin-bottom: 1.5em;
		}
	.guestbook #postForm {
		padding-bottom: 2em;
		}
/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	padding-left: 15px;
	padding-bottom: 10px;
	margin-right: 10px;
}

#postForm label.security_code_label {
	display: inline;
	width: 170px;
	font-size: 1.3em;
}

#postForm input#security_code {
	display: inline;
	width: 145px;
	margin-top: 1px;
	margin-bottom: 10px;
}

#postForm input[type=submit] {
	margin-top: 10px;
	text-align: center;
	clear: left;
}
	.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, .blog #navblog, .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;
		}

.home #content p {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 0.9em;
	line-height: 1;
	}
		
/* 
colors 
*/
body, input, textarea, h1, a {
	color: #000;
	}
	#emailsignup, #emailsignup * {
		color: #e00;
		}
	#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: #000;
		}

/* 
background-colors 
*/
body, #navigation, #footer {
	background-color: #e00;
	}
#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: #e00;
		}
/* 
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; }