/* 
	Designed by Rob Asumendi
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com May 2007 
   All styles that have been changed are indented

	- Sometimes I hate IE. I really do. Sometimes... Why? There was an especially devious and persistent bug 
	  that was causing a gap to appear between the #content and #footer. The original designer tried to fix it
	  visually by using position: relative; top: -20px; to shift the #footer up, but while this worked okay with
	  the html files in the designer kit, it didn't work with the actual html the CMS generates.
				
     The problem was caused by a 1.5em bottom margin on certain p elements (and similar bottom margins on 
	  other elements). According to spec, these *should* spill out of the containing div--in this case
	  #content--unless #content has a a bottom border or bottom padding, which it does. But IE ignores	this and
	  spills the p's margin out of the #content div anyway. Why? A lot of IE's weird behaviour has to do with 
	  an obscure property that Microsoft made up arbitrarily and that is unique to IE, called "hasLayout".
	  Basically, setting certain parameters on a div or other element will trigger hasLayout, and everything 
	  will be good. However, if you fail to trigger hasLayout, problems problems problems.

			explains the hasLayout pseudoproperty:		http://www.satzansatz.de/cssd/onhavinglayout.html
					
			examples of weird margin-collapsing problems in IE involving hasLayout:
															 		http://www.brunildo.org/test/IEMarginCollapseLayout.html 
	  
	  The main fix was to apply a width of 510px; to #content, which triggers hasLayout but this created another
	  IE-only display problem. I won't go into detail, but that problem was solved by moving a 200px top margin
	  from h1 to #content.
	- fixes an IE-6 problem where #banner and #content were shifting to the right as a result of #navigation
	  being floated. Now it's positioned absolutely
	- added fixed width and padding to #content, and then reduced margins of elements inside #content
	  accordingly. this makes sure that text and images that haven't been styled will still look like they're
	  in the right spot and not spilling out of the #content div
	- fixes to size and position of banner band image
	- added standard hostbaby splash code, margins on home page image
	
*/

/* =========== LAYOUT =========== */


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	text-align: center;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}

/* main structural elements */
#accessibility {
	position: absolute;
	left: -9999px;
}
#container {
	position: relative;
	width: 750px;
	text-align: left;
	margin: 0 auto;
}

/* main content elements */

            #banner {
            	position: relative;
            	margin-left: 200px;
            	width: 207px;
            	height: 46px;
            	top: 41px;				/* NEW!! this makes it look like how it was in IE before bug fixing */
            }

/* -- navigation -- */

			/* NEW!! Originally this was floated left, but this caused #content and #banner to shift to the
				right by a few px in IE6 only. This might be related to the infamous 3px text jog
				(http://www.positioniseverything.net/explorer/threepxtest.html), but then, maybe not. Simple fix:
				use absolute positioning instead. */
			
         #navigation {
         /*	float:left; 					NEW!! now positioned absolutely. see above */
				position: absolute;		/* NEW!! now positioned absolutely. see above */
				top: 0;						/* NEW!! now positioned absolutely. see above */
				left: 0;						/* NEW!! now positioned absolutely. see above */
         	width: 140px;
         }

#navigation ul {
	padding-left: 20px;
	width: 140px;
	background: url(/shared/messydesk/menu_bg.gif) left bottom no-repeat;
	list-style: none;
}

#navigation li {
	height:30px;
}

#navigation li a {
	text-decoration: none;
	display: block;
	white-space: no-wrap;
	padding: 5px 0 3px 28px;
}
#navigation li a:hover {
	background: url(/shared/messydesk/nav-bg-hover.gif) 5px 4px no-repeat;
}

			/* NEW!! This margin-top has been moved to the #content div, where it logically belonged in the first
				place... and this actually solves an IE-only display bug, which didn't really appear until we
				assigned #content a set width. Full explanation at the top of the file. */

         #content {
         	margin: 200px 0 0 190px;		/* NEW!! margin-top was 0 before */
				width: 470px;						/* NEW!! improves layout and solves IE margin collapsing bug */
				margin-top: 241px;				/* NEW!! this makes it look like how it was in IE before bug fixing */
				padding: 0 20px 45px 20px;		/* NEW!! */
				background: url(/shared/messydesk/content_bg.gif) repeat-y;
         }
			
			/* NEW!! Since #content now has padding, we need to put h1 back in the right spot */
			
			#content h1 {
				margin-left: -20px;				/* NEW!! makes up for new padding-left: 20px on #content */
				width: 510px;						/* NEW!! makes up for new padding-left: 20px on #content */
				margin-right: -60px;				/* NEW!! imroves centering in IE6 but doesn't affect other browsers */
			}
			
			/* NEW!! This is new moved above to #content
         #content h1 {
         	margin-top: 200px;
         }
			*/
			
#content .entry {
	width: 400px;
}

         #emailsignup {
         	position: absolute;	/* NEW!! was postion: relative, but IE handled it differently from FF & OP9 */
         /*	float: right; 				NEW!! not needed with absolute positioning */
         	top: 150px;
         	left: 349px;			/*	NEW!! was left: -50px; which was meant for position relative */
         	padding: 4px;
         	width: 335px;
         	height: 25px;
         }
			
			/* NEW!! this margin hack is no longer needed
         div>#emailsignup {
         	margin-left:28px;
         }*/

#emailsignup span {
	display: block;
}
#emailsignup input {
	width: 83px;
	margin-left: 10px;
}


/* -- banner area -- */
#banner .band {
	position: absolute;
	top: 10px;
	left:5px;
	width: 207px;
	height: 46px;
background: url(/images/IMG_60121-cropped-topfloat.JPG) no-repeat;
}

#banner .band span {
	display: none;
}

#banner .photo {
	position: absolute;
	top: 70px;
	width: 121px;
	height: 139px;
	background: url(/shared/messydesk/bandphoto_bg.gif) no-repeat;
}

			/* NEW!! For some reason, the original designer didn't include this photo even though it seemed to be
				part of his plan. New positioning here makes it look correct. */
				
         #banner .photo span {
         	overflow: hidden;
				text-indent: -9999px;	
	        	position: absolute;
         	top: 12px;
				left: 11px;
				width: 100px;			/* NEW!! was width: 108px; */
				height: 115px;  		/* NEW!! was height: 130px; */
         /*	margin-left: 5px; 		NEW!! margin-left does nothing when using position: absolute */
background: url(/images/IMG_5832-2-cropped-inframe.JPG) no-repeat;
         }

/* =========== STYLE =========== */


/* -- basic html elements -- */
body {
	font-family: "Courier New", Courier, mono, "Times New Roman", Times, serif;
	font: 80%;
	color: #172D5F;
	background: #A1ADC0 url(/shared/messydesk/bg_2.jpg) center top;
	margin:0;
	padding: 0;
}
a {
	/*color: #172D5F;*/
	color: #00c;
	font-weight: bold;
}
a:hover {
	color: #C75F19;
}
h1 {
	color: #8E1718;
}
h2 {
	text-transform: lowercase;
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
h3 {
	font-size: 15px;
	margin: 0 10px;
}
h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #40673A;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p {
	line-height: 1.3;
}

/* layout tweaks */

/* NEW!! This stuff has been moved up with the rest of the content styles 
#content {
	padding: 0 0 45px 0;
	background: url(/shared/messydesk/content_bg.gif) repeat-y;
}
*/

#content p {
	width: 450px;
}

#container {
	width: 760px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 750px;
	padding: 0px;
}

         #footer {
         /*	position: relative;			NEW!! these two lines appear to have an attempt to correct an IE-only
         	top: -20px; 							margin bug that has now been fixed elsewhere */
         	margin: 0 0 0 190px;
				padding-bottom: 15px; 
		  		height: 46px;
				width: 510px;				/* NEW!! this has been added to match the new #content width */
         	text-align: center;
         	clear: both; 
         	background: url(/shared/messydesk/footer_bg.gif) left top no-repeat;
         }

			
         #footer p {									
				margin-top: 0px;			/* NEW!! this prevents a gap from appearing between #content and #footer */
         	padding: 2px;
         	font-size: 0.8em;
         }

/* -- emailsignup --*/
#emailsignup {
	background: url(/shared/messydesk/email_bg.gif) no-repeat;
	padding: 4px 8px 12px 8px;
	font-size: 12px;
}

/* -- content area --*/

         #content .entry {
         	margin: 30px 15px 40px 15px;	/* NEW!! margin-left is reduced by 20px because of #content padding */
         	clear: left;
         }
			
.entry .name, .entry .act {
	font-weight: bold;
	font-style: normal;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #40673A;
}
.entry .name {
	margin-left: 4em;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}
.entry p {
	margin: 10px 20px 15px 0px;
}
.details {
	margin: 0 20px 0 30px;
}

/* -- section-specific style -- */
#navigation a {
	color: #172D5F;
}
#navigation a:hover {
	color: #fff;
}

			/* NEW!! minor tweaks for splash and home page images */

			.home img {
				display: block;					/* NEW!! display: block triggers margin collapse */
				margin: 0.5em 0;
			}
			
         .home p, .index p {
         	margin: 0 20px 1.5em 0;			/* NEW!! margin-left is reduced by 20px because of #content padding */
         	line-height: 130%;
         }
			
.contact ul {
	list-style: none;
}
.contact h2 {
    letter-spacing: 5px;
}

			/* NEW!! These styles reposition the form and the background image, counteracting the changes made
				due to applying width and padding to the #content div */

         #postForm {
         	height: 320px;
         /*	margin: 0 0 35px 0; 
         	padding: 10px; */
         	margin: 0 0 35px -20px;					/* NEW margin-left. See explanation above */
         	padding: 10px 10px 10px 80px;			/* NEW padding-left. See explanation above */
         	background: url(/shared/messydesk/postform_bg.gif) -120px 10px no-repeat;
         }
			
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-top: 9px;
	margin-left: 53px;
}

#postForm label.security_code_label {
	width: 200px;
	margin-left: 10px;
	float: left;
}

#postForm input#security_code {
	width: 180px;
	float: left;
	margin-left: 10px;
	background: #fff;
}

#postForm input[type=submit] {
	text-align: center;
	margin-top: 10px;
	clear: both;
}

.guestbook h2 {
	margin: 0 0 2px 0;
	padding: 1px 1px 1px 20px;	
	letter-spacing: 0;
	font-size: 1.1em;
}
			
.guestbook h2 a {
	text-transform: lowercase;
	font-weight:normal;
}
         .guestbook h3 {
         	margin: 0;
         	padding: 10px 0 0 20px;		/* NEW!! padding-left is reduced by 20px because of #content padding */
         	font-weight:normal;
         	font-size: 1em;
         	text-transform: uppercase;
         }
			
.guestbook blockquote {
	margin: 0;
	padding: 0px 20px 15px 20px;
}
.guestbook p:first-letter {
    font-size: 1.2em;
}

         .links h2 {
         	margin: 0 0 10px 0;	/* NEW!! margin-left/right reduced by 20px for new #content padding */
         }
         .links dl {
         	margin: 0 5px 20px 5px;		/* NEW!! margin-left/right reduced by 20px for new #content padding */
         }
			
.links dd {
	margin-bottom: 5px;
}
.music h2 {
	font-size: 1.3em;
}
.music h2 {
	margin-top: 40px;
	padding-bottom: 10px;
	letter-spacing: 5px;
}

         .music h3 {
            text-transform:uppercase;
         	font-weight: normal;
         	margin: 5px 10px 5px 40px;		/* NEW!! margin-left/right reduced by 20px for new #content padding */
         	color: #40673A;
         	font-weight: bold;
         }
			
.music h3 a {
    text-decoration: none;
    font-weight:normal;
}

         .music .details {
         	margin: 0 10px 15px 40px;		/* NEW!! margin-left/right reduced by 20px for new #content padding */
         }
			
.music .artist {
	color: #000;
}
.music .artist, .music .caption {
	display: inline;
	/*text-size: 0.5em;*/
	font-size: 11px;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	width: 400px;
	list-style-type: none;
	border: 1px solid #000;
	background: #fff top left no-repeat;
	padding: 5px 10px;
	margin: 10px 0;
}
.music #content li a {
	font-weight: normal;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 0 0 10px 20px;
	background: url(/shared/messydesk/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 0 0 10px 20px;
	background: url(/shared/messydesk/ico-play.gif) no-repeat;
	display: block;
}
.news {
	line-height: 130%;
}
.photos img {
	border: solid 1px #D0C6C6;
	background: #F3F5F2;
	padding: 10px;
}
         .photos dl {
         	margin: 0 0;						/* NEW!! margin-left/right reduced by 20px for new #content padding */
         	padding: 0;
         }
.photos dt {
	width: 400px;
	padding: 5px;
	margin: 20px 0 1px 0;
}
.photos dd {
	margin: 0;
	padding: 0;
}
         .press h2 {
         	margin-left: 0px;					/* NEW!! margin-left/right reduced by 20px for new #content padding */
         	margin-right: 20px;
         	letter-spacing: 5px;
         }

         .press .caption {
         	margin: 0 0 20px 40px;			/* NEW!! margin-left/right reduced by 20px for new #content padding */
         	padding: 0 5px 0 35px;
         	background: url(/shared/messydesk/ico-speech.gif) no-repeat;
         	color: #000;
         }

.links h3 a {
	font-size: 0.9em;
}
.calendar h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-style: normal;
	color: #40673A;
}
.calendar h2 a {
    font-weight:normal;
}
.calendar h3 {
	font-weight: normal;
	font-variant: small-caps;
	font-size: 1.1em;
	margin: 0;
}

/* -- 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 {
	text-transform: uppercase;
	padding: 5px 3px 3px 22px;
}

/* -- section-specific image replacement -- */

			/* NEW!! For some reason, h1 has page-specific padding which doesn't really do anything since the
				h1 span is set to display: none;. Probably left over from an earlier idea that got scrapped.
				But now that h1 has a set width, the padding is causing horizontal scroll bars to appear, so it
				has been overridden (set to 0). */
				
         h1 {
         	height: 61px;
         	/*margin: 4em 0 1em 0;*/
         	background-repeat: no-repeat;
         	background-position: top left;
         	background-color: transparent;
         	padding-left: 0 !important;		/* NEW!! this overrides all the padding settings below */
         }

.bio h1 {
	background-image: url(/shared/messydesk/h1-bio.gif);
	padding-left: 257px;
}
.products h1 {
	background-image: url(/shared/messydesk/h1-store.gif);
	padding-left: 125px;
}
.contact h1 {
	background-image: url(/shared/messydesk/h1-contact.gif);
	padding-left: 77px;
}
.calendar h1 {
	background-image: url(/shared/messydesk/h1-calendar.gif);
	padding-left: 63px;
}
.guestbook h1 {
	background-image: url(/shared/messydesk/h1-guestbook.gif);
	padding-left: 52px;
}
.home h1, .index h1, .list h1 {
	background-image: url(/shared/messydesk/h1-welcome.gif);
	padding-left: 72px;
}
.links h1 {
	background-image: url(/shared/messydesk/h1-links.gif);
	padding-left: 310px;
}
.music h1 {
	background-image: url(/shared/messydesk/h1-music.gif);
	padding-left: 192px;
}
.news h1 {
	background-image: url(/shared/messydesk/h1-news.gif);
	padding-left: 76px;
}
.photos h1 {
	background-image: url(/shared/messydesk/h1-photos.gif);
	padding-left: 142px;
}
.press h1 {
	background-image: url(/shared/messydesk/h1-press.gif);
	padding-left: 209px;
}
h1 span {
	display: none;
}

/* =========== TWEAKS =========== */

/* -- 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 {
	padding: 5px 0 3px 28px;
}

			/* NEW!! standard hostbaby splash code */

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