/* 
	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 - FULL SCREEN
	
	- for some reason the #footer wasn't clearing the #banner (which is floated left and contains the band photo)
	  in IE6 and IE7. In IE6, this can cause the band photo to be cut off. Since this is a relatively minor issue
	  that doesn't warrant a full bug fix, hacks were used to set min-height for IE7 and height for IE6 on the
	  #content div.

	SEPTEMBER 2008:
	- 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 height: 1.35em; (normally, we
	  would use width: 100%; but this causes the floated banner image to push the h2s down below in all
	  versions of IE)
   - 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;
}
html>body {
	width: auto;
	min-width: 700px;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}

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

/* main content elements */
#banner {
	width: 211px;
	float: left;
	margin-right: -211px;
}
#navigation ul {
	width: auto;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 40px;
}
#navigation li {
	display: inline;
	float: left;
}

         #content {
         	margin: 0 0 0 211px;
				padding-left: 20px;				/* NEW!! This replaces margin-left: 20px; on several elements */
         }
					
					/* NEW!! this new and relatively safe IE7-only hack applies min-height to #content */
					*:first-child+html #content{
						min-height: 512px;
					}
					
					/* NEW!! this new and relatively safe IE6-only hack simulates min-height, fixing a display bug */
					* html #content {
						_height: 512px;
					}
					
#footer {
	clear: both;
	margin-left: 211px;
}
#emailsignup {
	text-align: right;
}

/* -- banner area -- */
#banner .photo {
	width: 209px;
	height: 535px;
background: transparent url(/images/nuevaimagen-209x535-01.jpg) 0 0 no-repeat;
}
#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;
	margin: auto;
	display: block;
	padding-bottom: 5px;
}

#postForm label.security_code_label {
	width: 300px;
}

#postForm input#security_code {
	width: 300px;
}

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

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

         /* 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, setting width: 100%, as above, causes IE6 to mess up the layout by pushing the
				entire #content div below the floated banner image. Weirdness. */
         
         * html .guestbook h2 { 		
         	_width: 99%	;		/* NEW!! Special width for IE6 (and IE5) only  */
            }
			
.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: 20px 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/05-body-bg.gif) 0 0 repeat-y;
}
#container {
	padding: 0;
}

/* -- navigation -- */
#navigation ul {
	width: 100%;
	height: 59px;
	background: #DD7800 url(/shared/electrablue/05-nav-bg.gif);
}
#navigation li {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 3px 5px;
	font-size: 0.9em;
	margin: 30px 0 0 0;
}
#navigation li a:hover {
	background: transparent url(/shared/electrablue/05-nav-hover-bg.gif) center top repeat-y;
	color: #fc0;
}

/* Opera 7 has problems with the float. This hides it. */
html*#navigation li a {
	float: left;
}
#emailsignup {
	margin: 59px 0 0 0;
}

         #emailsignup input {
         	width: 60px;			/* NEW!! minor tweak improves appearance */
         }
			
			#emailsignup input#list_email {
				margin-left: 2px;		/* NEW!! minor tweak improves appearance */
				width: 115px;			/* NEW!! minor tweak improves appearance */
			}

/* -- banner area -- */
#banner {
	clear: left;
}
.no-images #banner .band {
	font-size: 36px;
	letter-spacing: -2px;
	padding: 20px 10px 390px 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; }