/*
	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
	- using position: relative in the wrong places caused the h1 to cover up page content. now using #content
	  padding exclusively to put it in the right spot.
	  
	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

*/
	
               	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_right_2.jpg) repeat-y fixed right;
	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_10.gif) no-repeat;
}
body.bio #content h1 {
	background:  url(/shared/fireside/bio_txt_10.gif) no-repeat;
}
body.music #content h1 {
	background:    url(/shared/fireside/music_txt_10.gif) no-repeat;
}
body.contact #content h1 {
	background:    url(/shared/fireside/contact_txt_10.gif) no-repeat;
}
body.press #content h1 {
	background:    url(/shared/fireside/press_txt_10.gif) no-repeat;
}
body.news #content h1 {
	background:    url(/shared/fireside/news_txt_10.gif) no-repeat;
}
body.calendar #content h1 {
	background:    url(/shared/fireside/calendar_txt_10.gif) no-repeat;
}
body.photos #content h1 {
	background:    url(/shared/fireside/photos_txt_10.gif) no-repeat;
}
body.video #content h1 {
	background:    url(/shared/fireside/video_txt_10.gif) no-repeat;
}
body.products #content h1 {
	background:    url(/shared/fireside/store_txt_10.gif) no-repeat;
}
body.guestbook #content h1 {
	background:    url(/shared/fireside/guestbook_txt_10.gif) no-repeat;
}
body.links #content h1 {
	background:    url(/shared/fireside/links_txt_10.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_10.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: right;
	top: 200px;
	width: 195px;
	letter-spacing: 0.2em;
	height: 280px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}

         #content {
         	padding:160px 50px 100px 230px;
         /*	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!! These styles are totally revised. The h1 used to use position: relative; and an 
         	IE browser hack, but this caused it to cover up page content on some pages (especially 
         	links page). Now it's back in the regular flow and is pushed down to the right spot by 
         	increasing content padding by 30px */
   		
         #content {
         	padding:190px 50px 100px 230px;		/* NEW!! margin-top used to be 160px */
         	min-height:700px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	min-height:350px;
         }


         /* 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 0 0 5px; 
   			padding: 0;						/* NEW!! fixes spacing bug by overriding browser-specific defaults */
         /*	position: relative; */		/* NEW!! see big comment above */
         /*	top: 30px; */				
         /*	left: 5px; */
         	width: 308px;
         	height: 77px; 				
         }
   		/*	html>body #content h1 {top: 30px;}	NEW!! this hack is no longer necessary at all */
			

					
#content img {margin-top: 1em;}

#content h1 span {
	display:none;
}
#content div.entry {
	padding-top: 0px;
}
#content h2 {
	border-bottom:dotted 1px #f00;
}
#banner {
	position:absolute;
	top:0px;
	width:740px;
	height:180px;
	border-bottom:5px #f00;
	background-image:      url(/shared/fireside/cbf_topbar_10.jpg);
	text-align: right;
	background-color: 656565;
	left: 0px;
}
#banner .band {
	height: 120px;
	width: 402px;
	position: absolute;
	border: 1px #000;
background-image: url(/images/theboys.jpg);
	top: 40px;
	left: 310px;
}
#banner .photo {
	height: 120px;
	width: 200px;
	position: absolute;
	top: 40px;
background-image: url(/images/regal2-cropped-topleft.jpg);
	left: 60px;
	background-repeat: no-repeat;
	background-position: center center;
}
#banner span {
	display:none;
}
         #emailsignup {
         	position:absolute;
         	top:575px;
         	left:25px;
         	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_10.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_green.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_10.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.products table {
	border-collapse:collapse;
}
body.products div.products {
	padding-top: 5px;
}
body.products 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.products #navproducts, 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; }