/*
	Cleansed By Fire
	by DesignbyBhaal (www.designbybhaal.com)
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007-August 2008
   All styles that have been changed are indented
	
	- many layout problems were caused by not zeroing margin and padding values
	  
	Second revision in August 2008:
	- corrected a critical flaw that completely wrecked the layout in ie5.5, rendering the site unreadable.
	  the code originally had a box model hack that was incorrectly applied; the original designer may have
	  intended to remove it completely but left some junk code behind by mistake. it is now commented out.
	- fixed text alignment in #content div for ie5 by specifying text-align: center;
	- used ultra-safe hacks to correct #container width in ie5 and #content min-height in ie5 and ie6
	- added standard tweak for splash page

	NEW VARIATION: using plain text headers instead of graphic headers.
	
*/

	
               	html, body, div	{margin: 0; padding: 0}		/* NEW!! clears block margins/padding */
                  img					{border: none;}				/* NEW!! clears all image borders */

						/* (mostly) firefox defaults, for other browser's benefit */ 						

      				ul, ol 			{margin: 1em 0 1em 40px; padding: 0;} 	/* NEW!! fixes nav layout bug */


body {
	margin:0;
	color:#000;
	font-family: Verdana, Arial, sans-serif;
	font-size:11px;
	line-height:18px;
	background:#000 url(/shared/fireside/bkg_left_3.jpg) repeat-y fixed;
	text-align:center;
	padding: 50px;
}
form {
	margin:0;
	padding:0;
}
p {
	margin:0;
	padding:0;
	margin-bottom:10px;
}
a {
	color: #000;
}
a:hover {
	color: #f00;
}
h2 {
	font-size:14px;
}
#accessibility {
	position: absolute;
	left: -9999px;
}

/*
body.home #content h1, body.list #content h1 {
	background:    url(/shared/fireside/welcome_txt_5.gif) no-repeat;
}
body.bio #content h1 {
	background:  url(/shared/fireside/bio_txt_5.gif) no-repeat;
}
body.music #content h1 {
	background:  url(/shared/fireside/music_txt_5.gif) no-repeat;
}
body.contact #content h1 {
	background:  url(/shared/fireside/contact_txt_5.gif) no-repeat;
}
body.press #content h1 {
	background:  url(/shared/fireside/press_txt_5.gif) no-repeat;
}
body.news #content h1 {
	background:  url(/shared/fireside/news_txt_5.gif) no-repeat;
}
body.calendar #content h1 {
	background:  url(/shared/fireside/calendar_txt_5.gif) no-repeat;
}
body.photos #content h1 {
	background:  url(/shared/fireside/photos_txt_5.gif) no-repeat;
}
body.video #content h1 {
	background:  url(/shared/fireside/video_txt_5.gif) no-repeat;
}
body.store #content h1 {
	background:  url(/shared/fireside/store_txt_5.gif) no-repeat;
}
body.guestbook #content h1 {
	background:  url(/shared/fireside/guestbook_txt_5.gif) no-repeat;
}
body.links #content h1 {
	background:  url(/shared/fireside/links_txt_5.gif) no-repeat;
}
*/

/* general */

			/* NEW!! Removed these lines that were part of a poorly-applied box model hack (that wasn't
				really necessary anyway. The hack was done incorrectly and messed-up the code in a way that
				most browers handled gracefully, but made the template completely unusable in IE5.5. */

         #container {
         /*	width: 528px;						NEW!! poorly-applied box model hack is now removed
         	voice-family: "\"}\"";			NEW!! poorly-applied box model hack is now removed		 
         	voice-family:inherit; 			NEW!! poorly-applied box model hack is now removed */
         	width:740px;
         	margin:0 auto;
         	padding:0;
         	text-align:left;
         	position:relative;
         	border:solid 1px #000;
         	border-bottom:none;
         	background-image:    url(/shared/fireside/cbf_sides_5.jpg);
         	background-repeat: repeat-y;
         	background-position: center top;
         }

         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy hack. The
         	* html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
         	backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */
         
         * html #container { 		
         	_width: 742px;			/* fake width for IE5win only = real width + padding + border */
            _w\idth: 740px;
            }

			
#navigation {
	position: absolute;
	text-align: left;
	top: 180px;
	width: 200px;
	letter-spacing: 0.2em;
	height: 280px;
	left: 503px;
	margin: 0px;
	padding: 0px;
}

         #content {
         	padding:160px 250px 100px 50px;
         /*	min-height:700px;								NEW!! poorly-applied box model hack is now removed
         	voice-family: "\"}\"";						NEW!! poorly-applied box model hack is now removed
         	voice-family:inherit; 						NEW!! poorly-applied box model hack is now removed*/ 
         	min-height:350px; 
				text-align: left;							/* NEW!! needed for ie5; this is what was always intended */
         }


         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy hack. The
         	* html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
         	backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). 
				
				Both of these heights effectively function as min-heights because that's how IE5 and IE6
				treat them (even though neither browser understand "min-height") */
         
         * html #content { 		
            _height: 640px;		/* fake height for IE5win only = real min-height + padding + border */
            _he\ight: 350px;
            }
			

               #content h1 {
						margin: 0; 				/* NEW!! fixes spacing bug by overriding browser-specific defaults */
						padding-top: 40px;		/* NEW!! new padding values match old look more consistently */
						padding-bottom: 5px;		/* NEW!! new padding values match old look more consistently */
						font-size: 2.1em;
					}

				/*	html>body #content h1 {top: 15px;}		 NEW!! IE hack is useless now */
					
					#content img {margin-top: 1em;}

#content div.entry {
	padding-top: 0px;
}
#content h2 {
	border-bottom:1px dotted #000DCC;
}
#banner {
	position:absolute;
	top:0px;
	width:740px;
	height:180px;
	border-bottom:5px #f00;
	background-image:    url(/shared/fireside/cbf_topbar_5.jpg);
	text-align: right;
	background-color: 656565;
	left: 0px;
}
#banner .band {
	height: 120px;
	width: 402px;
	position: absolute;
	border: 1px #000;
background-image: url(/images/logocolor.jpg);
	top: 40px;
	left: 310px;
}
#banner .photo {
	height: 120px;
	width: 200px;
	position: absolute;
	top: 40px;
background-image: url(/images/citydrop-413x95-200x120-01.jpg);
	left: 60px;
	background-repeat: no-repeat;
	background-position: center center;
}
#banner span {
	display:none;
}
         #emailsignup {
         	position:absolute;
         	top:550px;
         	left:529px;
         	z-index:5;
         	width:145px;
         	padding:10px;
         	margin:10px;
         /*	voice-family: "\"}\"";				NEW!! poorly-applied box model hack is now removed
         	voice-family:inherit;				NEW!! poorly-applied box model hack is now removed
         	width:145px; 							NEW!! poorly-applied box model hack is now removed */
         	text-align: center;
         }
			

         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy hack. The
         	* html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
         	backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */
         
         * html #emailsignup { 		
         	_width: 165px;			/* fake width for IE5win only = real width + padding + border */
            _w\idth: 145px;
            }
			
			/* NEW!! poorly-applied box model hack is now removed
         html>#emailsignup {
         	width:145px;
         } */

#emailsignup input {
	font-size:10px;
	margin-top:10px;
}
#footer {
	background-image:    url(/shared/fireside/cbf_bottom_5.jpg);
	clear: both;
	background-repeat: no-repeat;
	width: 740px;
	position: absolute;
	height: 68px;
}
#footer p {
	font-size: 0.8em;
	color: #ccc;
	border: #000;
	text-align: left;
	margin-top: 40px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}
/* nav */
#navigation li {
	list-style-type: none;
	margin: 0;
	font-size: 0.75em;
	line-height: 1.1em;
}
#navigation a:link, #navigation a:visited {
	text-decoration: none;
	background-color: #666;
	color: #fff;
	display: block;
	padding: 3px 6px 0 6px;
	border: 1px solid #fff;
	border-top: 0;
	list-style-image: none;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 22px;
}
#navigation a:hover, #navigation a:active, #navigation a:focus {
	background-color: #ccc;
	color: #f00;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 22px;
}

/* home + news */
body.home p {
	color: #000;
	padding-top: 15px;
	padding-bottom: 5px;
}
body.home div.entry p {
	padding-bottom:0;
}
body.home div.notes p {
	padding-bottom: 0;
}

/* links */

/* -- section-specific style -- */
body.bio div.entry {
	margin-top: 40px;
}
body.news div.entry {
	margin-top: 40px;
}
.music h2 {
	font-size: 1.3em;
}
.music h2 {
	margin-top: 40px;
	padding-bottom: 10px;
	letter-spacing: 5px;
}
.music h3 {
	text-transform:uppercase;
	font-weight: bold;
	font-size: 1.3em;
	margin-top: 5px;
	margin-right: 10px;
	margin-left: 60px;
	margin-bottom: 5px;
	padding-top: 20px;
}
.music h3 a {
    text-decoration: none;
    font-weight:normal;
}
.music .details {
	margin: 0 30px 15px 60px;
	text-decoration: none;
	list-style-type: none;
}
.music .artist {
	color: #838386;
}
.music .artist, .music .caption {
	display: inline;
	text-size: 0.7em;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	margin: 10px 0;
	list-style-type: none;
	list-style-image:  url(/shared/fireside/bullet_triangle_blue.gif);
	display: block;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
}
.music #content li a {
	font-weight: normal;
	text-decoration: none;
}
.music .m3u_hifi_clip {
	padding: 0 0 10px 20px;
	display: block;
}
.music .m3u_lofi_clip {
	padding: 0 0 10px 20px;
	display: block;
}
.contact ul {
	list-style: none;
}
.contact h2 {
    letter-spacing: 5px;
}
body.contact div.entry {
	margin-top: 40px;
	margin-bottom: 50px;
}
.press h2 {
	margin-left: 20px;
	margin-right: 20px;
	letter-spacing: 5px;
	margin-top: 0px;
}
.press .entry {
	background:    url(/shared/fireside/quote_5.gif) no-repeat 0.1em 0.01em;
	line-height: 1.25em;
	letter-spacing: 0.1em;
	text-align: left;
	vertical-align: top;
	font-size: 1em;
	margin: 40px 0 12px;
	padding: 0 0 0 10px;
	font-style: normal;
}
.press .caption {
	margin: 0 40px 40px;
	font-style: italic;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	text-align: right;
}
.calendar h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-style: normal;
	color: #000;
}
.calendar h2 a {
    font-weight:normal;
}
body.calendar div.entry {
	margin-top: 40px;
}
.calendar h3 {
	font-weight: normal;
	font-variant: small-caps;
	font-size: 1.1em;
	margin: 0;
}
.photos img {
	border: solid 1px #D0C6C6;
	background: #F3F5F2;
	padding: 10px;
}
.photos dl {
	padding: 5px 0 0;
	margin-bottom: 0;
	margin-left: 0px;
	margin-right: 0px;
}
.photos dt {
	padding: 0px;
	margin: 20px 0 1px;
}
.photos dd {
	margin: 0;
	padding: 0;
}
#postForm {
	height: 320px;
	margin: 0 0 35px;
	padding: 10px 0px;
	width: 400px;
	text-align: left;
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: justify;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #000;
	background: #F0FF00;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
	font-weight: bold;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	margin-right: 15px;
	position: relative;
	top: 0px;
	left: 50px;
}

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

#postForm input#security_code {
	position: relative;
	top: -50px;
	left: 60px;
	width: 175px;
}

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

body.store table {
	border-collapse:collapse;
}
body.store div.store {
	padding-top: 5px;
}
body.store tbody td {
	text-align: left;
}
.guestbook h2 {
	margin: 0 0 0px;
	letter-spacing: 0;
	font-size: 1.1em;
	font-style: italic;
	padding-top: 0px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 20px;
}
.guestbook h2 a {
	text-transform: lowercase;
	font-weight:normal;
}
.guestbook h3 {
	margin: 0;
	padding: 0px 0 0 20px;
	font-weight:normal;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .2em;
}
.guestbook blockquote {
	margin: 0;
	padding: 0px 20px 10px;
}
.guestbook p:first-letter {
    font-size: 1.2em;
}
body.video p {
	color: #000;
	padding-top: 15px;
}
/*
.links h2 {
	margin-top: 0;
	margin-right: 20px;
	margin-left: 20px;
}
.links dl {
	margin-top: 0;
	margin-right: 25px;
	margin-left: 25px;
}
.links dd {
	padding-top: 0px;
}
.links h3 a {
	margin-right: 20px;
	margin-left: 20px;
	font-size: 0.9em;
}
.links dt {
	padding-top: 1px;
*/
/*
body.links #content dl {
	margin-top: 0;
	margin-right: 25px;
	margin-left: 25px;

}
body.links #content dt {
	padding-top: 3px;

}
body.links #content h3 {
	font-size: 1.2em;
}
*/
body.links h3 {
	font-size: 1.1em;
}
body.links h2 {
	margin: 0px 20px 20px;
	padding-top: 10px;
	font-size: 1em;
}
.links dl {
	margin: 5px 25px 15px;
	padding-top: 5px;
}
.links dd {
	margin-bottom: 5px;
}
/* =========== TWEAKS =========== */
/* -- selected links --*/
body.home #navhome, .blog #navblog, body.index #navindex, body.music #navmusic, body.contact #navcontact,  body.press #navpress, body.news #navnews, body.photos #navphotos, body.guestbook #navguestbook,  body.links #navlinks, body.calendar #navcalendar, body.bio #navbio, body.store #navstore, body.video #navvideo {
	text-transform: uppercase;
	color: #ff0;
}

			/* NEW!! minor tweaks for splash page */

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