/* 
	Designed by Jesse Fantacone  -  USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com May 2007 
   All styles that have been changed are indented
	
	- what began as a simple intention to put a min-height on the #content div turned into an investigation into
	  an obscure and very weird bug. It turns out that the original designer put min-height on #content, but it
	  didn't do anything at all because he had also set #content to display: table-cell;. Removing that caused
	  major display problems in FF and Opera, yet none in IE6 and IE7. Odd, no? For some reason, the top margin
	  that had been applied to h1 wasn't getting along with the #banner, which had position: absolute; top: 0;
	  left: 0;. Somehow the big top margin on the h1 pushed *everything* down--even its parents and siblings.
	  The fix was to comment out the table stuff on #content and the absolute positioning stuff on #banner, and
	  to adjust the margins on h1 accordingly. Despite all my knowledge of CSS, I have no idea why these three
	  things interacted in a way that was so strange, yet presumably according to spec since both FF and Opera
	  handled them identically. Anyway, problem gone now life good.
	- for the products page only, added padding-left: 40px; to the #content div. the original designer put
	  margin-left of 30-40px on most page elements individually, but not on the products page--presumably
	  because he didn't know what they layout would be. while it would make more logical sense to use
	  padding on all pages and reduce the margins accordingly, this is a quicker and easier fix.
	- recreated h1 header graphic for the photos page with a red background (for some reason, the only version
	  available was the one with the green background

*/


body {
	background: #666666 ;
	background-image: url(/shared/grid/squareback.gif);
	color: #A69E9E;
	padding: 0;
	margin: 0;
	text-align: center;
	font-family: arial, sans-serif;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: 11pt;

}


ul {
	padding: 0;
	margin: 0;
	list-style-type: none;	
}
form {
	margin: 0;
}
h2 {
	color: #A69E9E;
	font-size: 17px;
	font-weight: bold;
	background-image: url(/shared/grid/h2back.gif);
	background-repeat: repeat-x;
	margin: 0 0 0.5em 0;
	padding: .4em 0 .4em 0;
}
h3 {
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
	color: #A69E9E;
	margin: 0 0 1em 0;
	text-indent: 8px;
}
a {
	color: #A69E9E;
	font-weight: bold;
}
a:hover {
	color: #000000;
}
#container {
	width: 750px;
	text-align: left;
	margin: 0 auto;
	background: url(/shared/grid/content-background.gif);
	position: relative;
	top: 0px;
	
}
/* Navigation */
#navigation {
	font-size: 10pt;
	background: #000000;
	text-align: left;	
	width: 195px;
	position: absolute;
	top: 220px;
	left: 545px;
	
}
#navigation ul {
	margin: 0;
	padding: 0px 0px ;
	text-align: left;	
	width: 195px;
	voice-family: "\"}\"";
	voice-family:inherit;
	
}
 
#navigation li {
	list-style: none;
	display: block;
	background: #800000;
	height: auto;
	padding: 0px .5px;
	border: solid 1px black;
}
#navigation li a {
	color: #A69E9E;
	text-decoration: none;
	
}
#navigation li a:visited {
	color: #A69E9E;	
	text-decoration: none;	
}
#navigation li a:hover {
	color: #000000;	
	text-decoration: none;
}	


/* Email form */
#emailsignup {
	width: 195px;
	position: absolute;
	top: 490px;
	left: 545px;
	font-size: 9pt;
	background: #800000;
	border: solid 1px black;
}
#emailsignup span {
	display: block;
	width: 195px;
	overflow: hidden;
	font-size: 1px;
	letter-spacing: -1px;
	background: #800000;
	padding: 45px;
	height: 45px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}
 
#emailsignup div {
	text-align: left;
	text-indent: 5px;
	background: #800000;
}

/* hide from ie5/mac \*/
html>body form {
	background: #800000 -1px 52px no-repeat;
}

/* end hide */
#emailsignup input {
	margin-left: 10px;
	margin-bottom: 10px;
	display: inline;
}

/* Header images and band picture */

			/* NEW!! absolute positioning isn't really needed here and it causes a weird interaction with #content
			and h1 (see comment at top of file). */
			
         #banner {
         	width: 750px;
         	height: 166px;
         	background: url(/shared/grid/header.gif);
         /*	position: absolute;
         	top: 0px;
         	left: 0px; */
         }

 #banner .band {
	width: 500px;
	font-size: 1px;
	letter-spacing: -1px;
	overflow: hidden;
background: url(/images/logo2.jpg) 0 0 no-repeat;
	position: absolute;
	top: 10px;
	left: 25px;
	padding-top: 142px;
	height: 142px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
} 

#banner .photo {
	width: 204px;
	overflow: hidden;
	font-size: 1px;
	letter-spacing: -1px;
	position: absolute; 
	top: 60px;
	left: 545px;
	padding-top: 130px;
	
	
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}
 /* content */

			/* NEW!! display: table-cell; prevents min-height from working. Removing it caused a weird interaction
			with #banner and h1 (see comment at top of file), but this has been fixed. */

         #content {
         	padding-right: 250px;
         /*	display: table-cell; */
         	border: 0px;
         	min-height: 360px;			/* NEW!! was 550px; reduced because #banner is back in normal flow */
         /*	vertical-align: top; */
         }

			/* NEW!! This is a relatively safe hack that gives IE6 only a height, which it misinterprets as
			min-height, which in turn it doesn't interpret at all, because it's IE6 */
			
			* html #content	{height: 360px;}

         h1 {
         	width: 479px;
         	overflow: hidden;
         	background-repeat: no-repeat;
         	background-position: 12px 0;
         	margin-top: 39px;				/* NEW!! was 205px; reduced because #banner is back in normal flow */
         	padding-top: 37px;
         	height: 37px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	height: 0;
         }

.calendar h1 {
	background-image: url(/shared/grid/calendar-var1.gif);
}
.contact h1 {
	background-image: url(/shared/grid/contact-var1.gif);
}
.guestbook h1 {
	background-image: url(/shared/grid/guestbook-var1.gif);
}
.home h1, .index h1, .list h1 {
	background-image: url(/shared/grid/welcome-var1.gif);
}
.links h1 {
	background-image: url(/shared/grid/links-var1.gif);
}
.music h1 {
	background-image: url(/shared/grid/music-var1.gif);
}
.news h1 {
	background-image: url(/shared/grid/news-var1.gif);
}
.bio h1 {
	background-image: url(/shared/grid/bio-var1.gif);
}

.photos h1 {
	background-image: url(/shared/grid/photos-var1.gif);
}
.press h1 {
	background-image: url(/shared/grid/press-var1.gif);
}
.products h1 {
	background-image: url(/shared/grid/products-var1.gif);
}
.name, .act {
	display: block;
	font-size: 1.1em;
	color: #A69E9E;
	font-style: italic;
	margin: 0 1em;
}
.entry ul {
	margin: 1em;
	display: block;
}
.entry {
	margin: 0 40px 1.5em 40px;
	
}
.details {
	margin: 1em;
}
.entry p {
	margin: 1em;
}

/* -- page-specific style -- */
#postForm {
	text-align: left;
	background: #800000;
	margin: 0 55px 35px 25px;
	width: 400px;
}
#postForm form {	
	padding: 25px 22px;
	height: 320px;
}
	
#postForm input, #postForm textarea {
	display: block;
	width: 360px;
	margin-bottom: 10px;
}
#postForm input {
	height: auto;
}
#postForm textarea {
	height: 100px;
}
#postForm input[type="submit"] {
	width: auto;
	height: auto;
	margin: 0  auto;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	position: relative;
	top: 5px;
	left: 0px;
}

#postForm label.security_code_label {
	width: 150px;
	position: relative;
	top: -27px;
	left: 15px;
}

#postForm input#security_code {
	position: relative;
	top: -25px;
	left: 120px;
	width: 240px;
}

#postForm input[type=submit] {
	text-align: center;
	position: relative;
	top: -20px;
}

.index #content p, .home #content p, .home #content img, .links dl, .links h2, .photos dl, .photos h2, .press h2 {
	margin: 1em 40px;
}
.music .details {
	margin: 0 40px;
}
.music h2 {
	margin: 2em 40px 0 30px;
}
.music h3 {
	margin: 2em 40px 0 40px;
}
.music .details {
	margin: 0 30px 15px 30px;
	
}

/* hide from ie5/mac \*/
.music .details {
	padding-bottom: 1px;
}
* html .music .details {
	padding-bottom: 7px;
}

/* end hide */
.music .details ul {
	margin-bottom: 0;
}
.music .artist {
	color: #A69E9E;
	padding-left: 16px;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	background: #800000;
	margin: -1em 0;
}
html>body .music .description {
	font-style: italic;
}
.music #content ul {
	background: #800000;
	list-style-image: url(/shared/grid/musicbullet.gif);
	margin: 10px 0;
	padding: 15px 20px 5px 20px;
	width: 400px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 360px;
}

.music #content li a {
	font-weight: normal;
	background: #800000;
}
.music #content li a:hover {
	color: #000000;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	
	display: block;
}
.music blockquote {
	margin: 0;
	padding: 10px 40px;
	width: 400px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 320px;
}
.music blockquote p {
	margin: 0 0 1em 0;
}
.music blockquote.lyrics {
	margin-bottom: 6px;
}
.photos dt {
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
	color: #A69E9E;
}
.photos dd {
	margin: 0 0 20px 0;
	padding: 2px;
	background: #990000;
}
/*
.photos img {
	max-width: 416px;
}
*/
.press h2 {
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 10px;
}
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/grid/ico-speech.gif) no-repeat;
}
#footer {
	background: url(/shared/grid/footer.gif) 0 0 no-repeat;
	text-align: center;
	vertical-align: bottom;
	width: 750px;
	height: 82px;
	
	/*margin-top: 264px;*/
	
}
#footer p {
	
	color: #DADADA;	
	margin: 0;
	padding: 25px 0px 0px 0px;
	clear: both;
	voice-family: "\"}\"";
	voice-family:inherit;
	
}

/* -- selected links --*/
.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 {
	color: #0600a0;
}

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

			/* NEW!! Minor tweaks to fix layout on products page and home page image */
			
			.products #content 	{padding-left: 40px;}
			.products h1 			{margin-left: -40px;}
			
			.home img				{margin-top: 0 !important; margin-bottom: 0 !important}


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