/* 
	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
	
	ELECTRA BLUE - RIGHT NAV
	
	SEPTEMBER 2008:
	- 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
	- now using padding-left on #content, which is much more future-proof
	- fixed a minor bug in the #footer, involving page specific line-height settings for paragraphs
   - fixed a hasLayout bug that was causing the h2 not to display properly on the guestbook in IE. in all
     versions, certain h2s would be shifted over for no particular reason; in IE6, there were also repainting
     problems, causing the background image not to appear. solved by adding width: 100%;
	- fixed another hasLayout bug by giving hasLayout to #content. This actually fixed a problem that was
	  causing the left-margin of h1 to collapse in IE
	- 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
	
*/


/* =========== 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;
         }

			/* NEW!! Giving #content a specific width cures a nasty hasLayout bug that was causing the h1
				headers to shift left. */
				
         #content {
         	margin: 0 215px 0 0;
				width: 535px;	/* NEW!! this gives hasLayout without changing appearance in any way */
				padding-left: 20px;			/* NEW!! This replaces margin-left: 20px; on several elements */
         }
			
         /* 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). */
         
         * html #content { 		
         	_width: 515px;			/* fake width for IE6 & IE5 */
            }


/* -- banner area -- */
#banner .photo {
	width: 750px;
	height: 62px;
				background: url(images/flattopbird.jpg) top right no-repeat;
background: url(/images/nlightsboats-445x62-01.jpg) top right no-repeat;
	position: absolute;
	top: 0;
}
#banner .band {
	width: 227px;
	height: 120px;
				background: url(images/hugetoprightrayko2-227x120.jpg) no-repeat;
	position: absolute;
	top: 0;
}
#banner .band span {
	display: none;
}
#banner .photo span {
	display: none;
}

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


/* -- basic html elements -- */
body {
	font: 80% Arial, sans-serif;
	color: #fff;
	background: #000072;
}
a {
	color: #FEAE1C;
	font-weight: bold;
}
a:hover {
	color: #FF7E00;
}

         h2 {
         	color: #fff;
         	font-weight: bold;
         	font-size: 1.3em;
         	letter-spacing: -1px;
         	border-top: solid 6px #33338E;
         	border-right: solid 1px #33338E;
         	border-bottom: solid 1px #00005E;
         	background: url(/shared/electrablue/h2-bg.gif) 0 0 repeat-x;
         	padding: 10px 0 0 2px;
         	margin-bottom: 1em;
         	margin-top: 0;
         }

         /* 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). For some
				reason, IE5/6 need hasLayout in order to display the backround image (but not IE7). Using the
				Microsoft proprietary zoom: 1, which does not validate. */
         
         * html h2 { 		
         	_zoom: 1;	/* NEW!! This gives hasLayout to IE6 (and IE5?) */
            }


h2 a {
	color: #fff;
}

         h3 {
         	font-size: 15px;
         	margin: 0 10px 0 -10px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */	
         }
			#content #calendar h3 {
				margin-left: 10px;				/* NEW!! Reset to 30px for calendar only. */
			}
			
h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #E29500;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
input:focus, textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}

/* -- content area --*/
#emailsignup {
	text-align: right;
	background: #00005B url(/shared/electrablue/emailsignup-bg.gif) bottom left repeat-x;
	font-weight: bold;
	font-size: 0.9em;
	border-top: solid 1px #26268E;
	border-bottom: solid 1px #00001E;
	padding: 5px;
}
#emailsignup input:focus {
	font-weight: normal;
}

         #content .entry {
         	margin: 0 36px 30px 16px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
			
.entry .name, .entry .act {
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
	margin-left: 5px;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}
.entry p {
	margin: 10px 20px 15px 30px;
}

         .details {
         	margin: 0 20px 0 10px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
			#content #calendar .details {
				margin-left: 30px;				/* NEW!! Reset to 30px for calendar only. */
			}

#footer {
	font-size: 0.9em;
	text-align: center;
	border-top: solid 2px #000037;
	border-bottom: solid 1px #4B4B56;
	background: #52525D;
	padding: 8px 10px 11px 10px;
	margin: 2em 0 0 0;
	clear: both;
	background: url(/shared/electrablue/footer-bg.gif) bottom left repeat-x;
}
#footer p {
	margin: 0;
}

/* -- section-specific style -- */
         .home p, .index p, .list p, .list form {
         	margin: 0 20px 1.5em 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	line-height: 130%;
         }
			.home .entry p {
				margin-left: 30px;
				margin-top: 10px;		/* NEW!! This restores a top margin to the home page calendar */
			}

         #footer p {
         	line-height: 100% !important;		/* NEW!! This resets line-height in the #footer to standard */
         }

         #postForm {
         	border: solid 2px #fff;
         	margin: 0 35px 30px 15px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 10px;
         	background: #161651 url(/shared/electrablue/01-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 {
	background-color: #006;
	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;
}

			/* NEW!! This important new fix gives the proprietary hasLayout property to IE6 and IE7. Without it,
				IE was having trouble displaying h2 in the guestbook, resulting in the titles being shifted over
				sometimes, and repainting problems in IE6. */
			
         .guestbook h2 {
         	margin-bottom: 5px;
				width: 100%;	/* NEW!! forces h2 to full width, and gives hasLayout */
         }

.guestbook h2 a {
	text-transform: lowercase;
}
.guestbook h3 {
	width: 100px;
	float: left;
	margin: 0 15px 20px 0;
	padding: 5px 5px;
	background: url(/shared/electrablue/01-h3-bg.gif) repeat-x;
	text-align: center;
	border: solid 1px #24247C;
	color: #4C4CB1;
}

         .links h2 {
         	margin-left: 20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	margin-right: 40px;
         }
			
         .links dl {
         	margin: 0 25px 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
			
.links dd {
	margin-bottom: 5px;
}

         .music h2, .music h3 {
         	margin: 0 20px 10px 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	font-size: 17px;
         }
			
.music h2 {
	margin-top: 40px;
	margin-bottom: 1em;
}

         .music .details {
         	margin: 0 30px 15px 10px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
			
.music .artist {
	color: #B9B9BD;
}
.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/electrablue/01-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/electrablue/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/electrablue/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 #fff;
	background: #010141;
	padding: 10px;
}

         .photos dl {
         	margin: 0 20px 0 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 0;
         }
			
.photos dt {
	padding: 5px;
	background: url(/shared/electrablue/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;
         }
			
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/electrablue/ico-speech.gif) no-repeat;
}

/* -- 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: #F29B4D;
	background: #CF5100 url(/shared/electrablue/05-nav-selected.gif) 0 0 no-repeat;
}

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

			/* NEW!! Margin-top was 20px, 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: 36px;
         	margin: 0px 36px 0 16px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	background-repeat: no-repeat;
         	background-position: 0 0;
         }
			
.contact h1 {
	background-image: url(/shared/electrablue/h1-contact.gif);
}
.calendar h1 {
	background-image: url(/shared/electrablue/h1-calendar.gif);
}
.guestbook h1 {
	background-image: url(/shared/electrablue/h1-guestbook.gif);
}
.home h1, .index h1, .list h1 {
	background-image: url(/shared/electrablue/h1-welcome.gif);
}
.links h1 {
	background-image: url(/shared/electrablue/h1-links.gif);
}
.music h1 {
	background-image: url(/shared/electrablue/h1-music.gif);
}
.news h1 {
	background-image: url(/shared/electrablue/h1-news.gif);
}
.photos h1 {
	background-image: url(/shared/electrablue/h1-photos.gif);
}
.press h1 {
	background-image: url(/shared/electrablue/h1-press.gif);
}
.bio h1 {
	background-image: url(/shared/electrablue/h1-bio.gif);
}
.products h1 {
	background-image: url(/shared/electrablue/h1-store.gif);
}
h1 span {
	display: none;
}

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

body {
	background: #000072 url(/shared/electrablue/01-body-bg.gif) center top repeat-y;
}
#container {
	border: solid 1px #000;
	border-top: 0;
	border-bottom: 0;
}

         #content {
         	padding-top: 70px;	/* NEW!! padding-top was 50px; now increased by 10px to solve IE problem. */
         }

			
/* -- navigation -- */
#navigation ul {
	background: non;
	padding: 0;
	width: 190px;
}

         #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 {
	margin: 0;
	padding: 0;
	display: inline;
	border: 0;
}
#navigation li a {
	display: block;
	background: #D35E00 url(/shared/electrablue/04-nav-a-bg.gif) 0 0 repeat-y;
	color: #fff;
	text-decoration: none;
	padding: 5px 20px;
	font-size: 0.9em;
}
#navigation li a:hover {
	background: #CD4600 url(/shared/electrablue/04-nav-hover.gif) 2px 0 repeat-y;
}
#navigation li a#navhome {
	border-top: solid 1px #E4970E;
}
#navigation li a#navlinks {
	border-bottom: solid 1px #C64200;
}
#emailsignup  {
	background: transparent url(/shared/electrablue/01-emailsignup-bg.jpg) bottom right no-repeat;
	border: 0;
	font-size: 0.85em;
	margin-top: 1px;
	width: 550px;
	position: absolute;
	top: 70px;
}

         #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; */
			}


/* -- banner area -- */
#banner {
	background: #4C4A57 url(/shared/electrablue/01-banner-bg.gif) repeat-x;
}
.no-images #banner .band {
	font-size: 48px;
	letter-spacing: -2px;
	padding: 2px 10px;
	color: #B9B9BD;
}
			
			/* NEW!! minor tweaks for splash and home page images */

         .home img {
				margin-top: 15px;
				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; }