/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007 - September 2008
   All styles that have been changed are indented
	
	CANDY APPLE - RIGHTNAV
	
	- fixed h1 image replacement. now works fine in all browsers including IE6
	- minor indentation tweaks
	
	SEPTEMBER 2008:
	- corrected PHP code for the .band image. before, both .photo and .band had the same code, so the same
	  image appeared twice. an obvious mistake
	- fixed a bug in ie6 and ie7 which caused the page to look different in the upper-right corner. the bug
	  was due to the way ie was handling the #navigation, which was floated right with a top margin. now it's
	  positioned absolutely, solving the problem
	- fixed a broken ie5 hack that was messing up #navigation. it was probably originally due to a typo  
	- minor tweaks to #emailsignup
	- added margins to home page images	
	- removed .news {line-height: 130%;} code, which has no apparent benefits, yet makes text on the news
	  page look weird
	- fixed a minor bug in the #footer, involving page specific line-height settings for paragraphs
	- now using padding-left on #content, which is much more future-proof
	- corrected an IE collapsing margin bug that was causing the h1 header to be too high. solved by
	  eliminating margin-top from h1, and increading #content padding to compensate
   - solved the infamous IE #navigation link bug, where only the text portion of the links were active. By
     giving hasLayout to #navigation li a, the entire link blocks are now hoverable and clickable
	  
	AFTER SEPTEMBER 2008:
	- moved a comment that had been interfering with the PHP band photo code, causing the page to fail
	- added a specific width to the #emailsignup form, which was needed by ie6 (before, it made it too narrow,
	  causing the "join" button to spill on to the next line)

*/


/* =========== 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;		/* NEW!! this is needed because #navigation ul is now postion: absolute; */
         	width: 750px;
         	text-align: left;
         	margin: 0 auto;
         }

/* main content elements */
#emailsignup {
	voice-family: "\"}\"";
	voice-family:inherit;
	display: block;
	position: absolute;
	width: 524px;
	top: 68px;
}
#emailsignup {
}
#banner {
	height: 68px;
}

			/* NEW!! This has now been changed to position absolute because IE6 and IE7 handle floats with
				top margins differently from other browsers (basically, by making the #banner div narrower,
				which changed the appearance of the page. */
				
         #navigation ul {
				position: absolute; 			/* NEW!! */
				top: 68px; 						/* NEW!! */
				right: 0;						/* NEW!! */
         	width: 211px;
         /*	float: right; 						NEW!! no longer used */
         /*	margin-top: 68px; 				NEW!! no longer used */
         	margin-left: 0;
         }

         #content {
         	margin: 0 215px 0 0;
				padding-left: 20px;				/* NEW!! This replaces margin-left: 20px; on several elements */
         }

/* -- banner area -- */
#banner .photo {
	width: 750px;
	height: 62px;
background: url(/images/topbar.jpg) top right no-repeat;
	position: absolute;
	top: 0;
}

			/* NEW!! this was used to use url($flattop) for its image code, repeating the image in #banner .photo
				--an obvious mistake. */		

         #banner .band {
         	width: 227px;
         	height: 120px;
background: url(/images/ohsusannahlogosize.jpg) no-repeat;
         	position: absolute;
         	top: 0;
         }
			
#banner .band span {
	display: none;
}
#banner .photo span {
	display: none;
}

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

/* -- basic html elements -- */
body {
	font: 80% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #9A0000;
	background: #F00007;
}
a {
	color: #fff;
	font-weight: bold;
}
a:hover {
	color: #f00;
}
h2 {
	color: #9A0000;
	font-weight: normal;
	font-size: 1.3em;
	letter-spacing: -1px;
	padding: 5px 22px;
	margin-bottom: 0.7em;
	margin-top: 0;
}
h2 a {
	color: #9A0000;
}
         h3 {
         	font-size: 1.2em;
         	margin: 0 10px 0 5px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
h4 {
	font-size: 1em;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #F82E2E;
}
         ul {
         	padding: 0;
         	margin: 0 0 0 10px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	list-style-type: square;
         }
input:focus, textarea:focus {
	color: #C84130;
	background: #fff;
	font-weight: bold;
}

/* -- content area --*/
#emailsignup {
	font-size: 0.9em;
	padding: 5px;
	color: #8C0104;
}
#emailsignup input:focus {
	font-weight: normal;
}

         #content {
         	background: #FF9984 url(/shared/candyapple/05-content-bg.gif) 0 0 repeat-x;
         	padding-bottom: 10px;
				min-height: 360px;				/* NEW!! Another minor tweak to improve layout on short pages */
         }
			
         /* 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 #content {
            _height: 420px;		/* fake height for IE5win only = real min-height + padding + border */
            _he\ight: 360px;		/* IE5 and IE6 treat this as if it were min-height. */
            }


         #content h2 {
         	background: transparent;
         	background: url(/shared/candyapple/h2-bg.gif) bottom left repeat-x;
         	margin: 10px 25px 10px 5px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 5px 0;
         }
#content .entry {
	margin: 0 0 30px 0;
}

         .press #content .entry {
         	margin-left: -20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }			

#content .entry h2 {
	border: 0;
	border-bottom: solid 1px #CB0000;
}
         .entry .name, .entry .act {
         	font-weight: bold;
         	font-size: 1em;
         	margin-left: 10px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	display: block;
         }
         .entry ul {
         	margin-top: 10px;
         	margin-left: 40px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
.entry li {
	line-height: 20px;
}

               .entry p, .notes {			/* NEW!! now applied to .notes, which had no indentation before */
               	margin: 10px 20px 15px 40px;	/* NEW!! Reduced margin-left by 20px; */
               }
					
         .details {
         	margin: 0 20px 0 10px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
#footer {
	font-size: 0.9em;
	text-align: center;
	border-top: solid 1px #E10000;
	border-bottom: solid 1px #f00;
	background: #fff url(/shared/candyapple/05-footer.gif) 0 0 repeat-x;
	padding: 8px 10px 11px 10px;
	margin: 2px 0 0 0;
	clear: both;
	color: #f00;
}

         #footer p {
         	margin: 0;
				line-height: 1.25;			/* NEW!! this forces consistency from page to page */
         }


/* -- section-specific style -- */
         .home p, .index p, .list p, .list form {
         	margin: 0.5em 20px 1.5em 0;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	line-height: 140%;
         }
         #postForm {
         	border: solid 2px #fff;
         	margin: 15px 35px 30px 15px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 10px;
         	background: #FA0000 url(/shared/candyapple/shiny-bg.gif) 0 0 repeat-x;
         }
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm label {
	color: #fff;
	background-color: #c90000;
	padding: 3px;
	margin-bottom: 1px;
	width: 294px;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	float: left;
	padding-left: 82px;
	margin-top: 7px;
	margin-right: 20px;
}

#postForm label.security_code_label {
	width: 172px;
	float: left;
}

#postForm input#security_code {
	float: left;
	width: 172px;
}

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

.guestbook h2 {
	margin-bottom: 5px;
}
.guestbook h2 a {
	text-transform: lowercase;
}
         .guestbook h3 {
         	width: 100px;
         	float: left;
         	margin: 0 15px 20px -10px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 5px 5px;
         	background: url(/shared/candyapple/shiny-bg.gif) repeat-x;
         	text-align: center;
         	border: solid 1px #fff;
         	color: #FF8275;
         }
         .links dl {
         	margin: 0 25px 20px 5px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }

			.guestbook blockquote {
				margin-left: 20px;				/* NEW!! Reduced margin-left by 20px; now using content padding. */
				}

			
.links dd {
	margin-bottom: 5px;
}
.music h2 {
	margin-top: 40px;
	margin-bottom: 1em;
}
.music h3 {
	margin-top: 20px;
}
         .music .details {
         	margin: 0 30px 15px 10px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
.music .artist {
	color: #F82E2E;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	list-style-type: none;
	background: #161651 url(/shared/candyapple/shiny-bg.gif) 0 0 repeat-x;
	padding: 5px 10px;
	margin: 10px 0;
	border: solid 1px #fff;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	background: url(/shared/candyapple/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/candyapple/ico-play.gif) no-repeat;
	display: block;
}

			/* NEW!! This odd bit of code makes all the text on the news page look misaligned. Gone.  
         .news {
         	line-height: 130%;
         }
			*/

.photos img {
	border: solid 1px #AF0000;
	border-bottom-color: #CF0000;
	border-right-color: #CF0000;
	background: #B00 url(/shared/candyapple/photo-bg.gif) 0 0 no-repeat;
	padding: 10px;
}
         .photos dl {
         	margin: 0 20px 0 0;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 0;
         }
.photos dt {
	color: #fff;
	padding: 5px;
	background: #a00 url(/shared/candyapple/01-shiny-bg.gif) repeat-x;
	margin: 10px 0 3px 0;
}
.photos dd {
	text-align: center;
	margin: 0;
	padding: 0;
}
         .press h2 {
         	margin-left: 20px;	/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	margin-right: 40px;
         	margin-top: 10px;
         }
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/candyapple/ico-speech.gif) no-repeat;
}

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

			/* NEW!! Margin-top was 10px, but IE6 and IE7 collapse this, causing the header to be to high.
				margin-top is now set to 0, and #content padding-top is increased by 10px. */
				
         h1 {
         	height: 38px;
         	padding: 5px 0 0 5px;
         	margin: 0 0 30px -20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	background: url(/shared/candyapple/h1-bg.gif) repeat-x;
         }
			
.contact h1 span {
	background-image: url(/shared/candyapple/h1-contact.gif);
}
.calendar h1 span {
	background-image: url(/shared/candyapple/h1-calendar.gif);
}
.guestbook h1 span {
	background-image: url(/shared/candyapple/h1-guestbook.gif);
}
.home h1 span, .index h1 span, .list h1 span {
	background-image: url(/shared/candyapple/h1-welcome.gif);
}
.links h1 span {
	background-image: url(/shared/candyapple/h1-links.gif);
}
.music h1 span {
	background-image: url(/shared/candyapple/h1-music.gif);
}
.news h1 span {
	background-image: url(/shared/candyapple/h1-news.gif);
}
.photos h1 span {
	background-image: url(/shared/candyapple/h1-photos.gif);
}
.press h1 span {
	background-image: url(/shared/candyapple/h1-press.gif);
}
.bio h1 span {
	background-image: url(/shared/candyapple/h1-bio.gif);
}
.products h1 span {
	background-image: url(/shared/candyapple/h1-store.gif);
}

					/* NEW!! This is a better way to get rid of the text in this span. fixes IE6 problem */
               h1 span {
               	display: block;
						height: 32px;
						background-position: 0 0;
						background-repeat: no-repeat;
						font-size: 9px;
						text-indent: -9999px;
               }

					/* NEW!! This was the old way, which left vestigal text and positioning problems in IE6 
               h1 span {
               	display: block;
               	width: 250px;
               	font-size: 1px;
               	color: #C00300;
               	padding: 57px 0 0 0;
               	overflow: hidden;
               	background-position: 0 0;
               	background-repeat: no-repeat;
               	height: 0px !important; 
               	height: 57px;
               }
					*/

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

body {
	background: #F00007 url(/shared/candyapple/01-body-bg.gif) center top repeat-y;
}

         #content {
         	margin-right: 196px;
         	padding-top: 60px;		/* NEW!! padding-top was 50px; now increased by 10px to solve IE problem. */
         	background-position: 0 47px;
         	margin-top: 1px;
         }

/* -- navigation -- */

         #navigation ul {
         /*	background: url(/shared/candyapple/04-nav-bg.gif) repeat-x; 	NEW!! image doesn't even exist. */
         	width: 191px;
         }

         #navigation li {
         	display: block;
         	padding-bottom: 1px;
         	list-style: none;
         	margin-bottom: -2px;			/* NEW!! This was -19px, which must have been a typo */
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	margin-bottom: -1px;
         }
			
#navigation li {
}

         #navigation li a {
         	display: block;
         	color: #D4583B;
         	text-decoration: none;
         	padding: 8px 20px 12px 20px;	/* NEW!! was padding: 10px 20px, but this is more visually correct */
         	font-size: 0.9em;
         	text-transform: lowercase;
         	background: url(/shared/candyapple/04-nav-link.gif) bottom left no-repeat;
         }
			
#navigation li a:hover {
	color: #fc0;
}

/* -- selected links --*/
.home #navhome, .blog #navblog, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar {
	color: #666;
	background: url(/shared/candyapple/04-nav-selected.gif) bottom left no-repeat;
}
#emailsignup {
	position: absolute;
	width: 554px;
	height: 47px;
	top: 76px;
	border: 0;
	font-size: 0.8em;
	 color: #fff;
	text-align: left;
	background: #DA0000 url(/shared/candyapple/04-emailsignup-bg.gif) bottom left repeat-x;
	margin-top: 1px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 544px;
	top: 68px; 
}

         #emailsignup input {
         	width: 60px;			/* NEW!! before, both the field and the button were width: 83px; */
         }
			
			#emailsignup input#list_email {
				margin-left: 2px;		/* NEW!! minor tweak improves appearance */
				width: 115px;			/* NEW!! before, both the field and the button were width: 83px; */
			}

         #emailsignup form {
         	position: absolute;
         	left: 278px; 			/* NEW!! was left: 305px; minor tweak improves appearance */
				width: 275px;			/* NEW!! this is needed so that IE6 can make the box wide enough */
         }
			
#emailsignup div {
	padding: 13px 10px 0 10px;
	background: #9E0001 url(/shared/candyapple/05-emailsignup-bg-2.gif) -13px 20px repeat-x;
	width: 300px;
	height: 28px;
	float: right;
	text-align: center;
}

/* -- banner area -- */
#banner {
	background: #D00200 url(/shared/candyapple/01-banner-bg.gif) repeat-x;
}

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

         .home img {
				margin-bottom: 15px; 
				display: block;	/* NEW!! display: block triggers margin collapse */
				}	
				
			/* NEW!! These two lines give hasLayout to the #navigation links in IE5-7, which allows the links to
				to behave properly as blocks--i.e. placing the mouse anywhere in the block causes the hover effect
				to appear, and you can click anywhere in the block to activate the link. The first line is seen
				by all browsers but does not change appearance. The second line is seen only by IE5 & IE6 due
				to an utra-safe hack (combined * html and underscore hack). */
				
			#navigation li a {min-height: 0;}			/* NEW!! triggers hasLayout in IE7 */
			* html #navigation li a {_height: 0;}		/* NEW!! triggers hasLayout in IE6 & IE5 */
			

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