/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007 
   All styles that have been changed are indented
	
	ELECTRA BLUE - LEFT NAV
	
	- band photo was pushed to the right in IE7, due to failed hacks and the use of margin-left instead of just
	  left. this also required applying position: relative; to #container, and right: 0px; to #emailsignup,
	  as well as commenting out many many browser-specific hacks.
	- also commented out some redundancies and fixed an IE-specific collapsing padding/margin bug
	  
	SEPTEMBER 2008:
	- fixed a broken ie5 hack that was messing up #navigation. it was probably originally due to a typo  
	- improved layout of #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%;
   - 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 {
               	width: 750px;
               	text-align: left;
               	margin: 0 auto;
               	padding: 90px 0 0 0;	/* NEW!! was padding: 0; but now using top padding to push stuff down */
						position: relative;	/* NEW!! this is necessary for position: absolute on #banner to work */
               }

/* main content elements */


               #banner {
               	width: 191px;
               	height: 210px;
               	position: absolute;
               	top: 0;					/* NEW!! better to use this than margin-left */
						left: 0;					/* NEW!! */
               /*	margin-left: -191px; 	NEW!! not necessary */
               }
					
					/* NEW!! not necessary
               html>body div#banner {
               	margin-left: 0;
               }
					*/
					
#navigation ul {
	width: 190px;
	float: left;
	margin-top: 210px;
}

               #content {
               	margin: 0 0 2em 195px;	/* NEW!! margin-bottom was 0; 2em value was taken from #footer */ 
						padding-left: 20px;		/* NEW!! This replaces margin-left: 20px; on several elements */
               }
					
               #emailsignup {
               	position: absolute;
               	top: 0;
						right: 0;				/* NEW!! this controls position much better than without it */
               	text-align: right;
               	padding: 4px;
              /* 	width: 554px;
               	voice-family: "\"}\"";
               	voice-family:inherit;
               	width: 546px; */
               }
					
					/* NEW!! not necessary
               html>body #emailsignup {
               	width: 554px;
               }
					               
               /* ie5/mac hack \				NEW!! not necessary
               html>body #emailsignup {
               	width: 742px;
               }
               /* end hack */

/* -- banner area -- */
               #banner .band {
						margin-left: 1px;		/* NEW!! minor tweak because photo doesn't line up otherwise */
               	width: 190px;
               	height: 211px;
background: url(/images/Promo_45-cropped-topleft.jpg) no-repeat;
					
               	/* margin-left: -3px; 	NEW!! not necessary */
               }
					
					/* NEW!! not necessary
               #banner .band {
               	position: relative;
               	left: -191px;
               }
               
               /* ie5/mac hack \   			NEW!! not necessary
               #banner .band {
               	position: absolute;
               	top: 0;
               	left: auto;
               }
               
               /* end hack 					NEW!! not necessary
               html>body #banner .band {
               	margin-left: 1px;
               }
					*/

#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: 0 0 0 0;				/* NEW!! margin-top: 2em; */
               	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 20px 5px;		/* 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 -- */

         h1 {
         	height: 36px;
         	margin: 0px 36px 0 16px;		/* NEW!! was margin: 20px 36px 0 36px; Reduced margin-left */
         	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/04-body-bg.gif) center top repeat-y;
}
#container {
	border: solid 1px #000;
	border-top: 0;
	border-bottom: 0;
}
               #content {
               	margin-top: 0px;		/* NEW!! was 60px */
               	padding-top: 0px;		/* NEW!! was 10px */
               }

/* -- navigation -- */
#navigation ul {
	margin-left: 0;
	margin-top: 240px;
	background: #E29500 url(/shared/electrablue/04-nav-bg.gif) 0 0 repeat;
	position: absolute;
	top: -29px;
	width: 191px;
	padding: 10px 0 20px 20px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 171px;
}
 #navigation {
}

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

 #navigation {
}
#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 {
	margin-left: 1px;
	margin-top: 192px;
	position: relative;
	width: 179px;
	text-align: left;
	position: absolute;
}
#emailsignup input {
	width: 83px;
}
*/
               #emailsignup {
               	margin: 0 0 0 -194px;			/* NEW!! was margin-top: 0px; */
               	padding: 7px 10px 0 5px;
               	color: #fff;
               	background: #00005B url(/shared/electrablue/emailsignup-bg.gif) bottom left repeat-x;
               	position: absolute;
               	top: 0;
               	width: 750px;
               	height: 59px;
               	voice-family: "\"}\"";
               	voice-family:inherit;
               	width: 735px;
               	height: 52px;
               }
               html>body #emailsignup {
               	margin-left: 1px;
               }
               #emailsignup input {
               	width: 83px;
               }
               
               /* ie5/mac hack \*/
               html>body #emailsignup {
               	width: 735px;
               }
               /* end hack */

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

					
#footer {
	margin-left: 194px;
}

/* -- banner area -- */
#banner {
	position: absolute;
	top: 0;
}
#banner .band {
	left: 0;
}
.no-images #banner .band {
	font-size: 36px;
	letter-spacing: -2px;
	line-height: 40px;
	padding: 80px 10px 2px 10px;
	color: #B9B9BD;
	text-align: center;
}

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