/* 
	Designed by Tracy Berna, www.tracyberna.com  -  Los Angeles CA US
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com November 2008
   All styles that have been changed are indented
	
	MAJOR BUGFIXES:
	- this brand-new new template had some major layout problems due to using position: relative in less than
	  ideal situations, and then attempting to force browser compatibility with many many many hacks. Even for
	  Firefox and Safari. all hacks were removed and the enitre layout was extensively reworked so that it is
	  now clean and simple
	- fixed a #navigation bug that was causing link text to behave strangely because the width was set to be
	  way too small. it is now wider, and when it needs to overlap #content, navigation goes underneath
	  
	STANDARD BUGFIXES:
	- added margins to home page images	and standard splash page code
	- reset text styling for home page .entry paragraphs, such as found in the home page #calendar 
	- removed .news {line-height: 130%;} code, which has no apparent benefits, yet makes text on the news
	  page look weird
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means the styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.

*/


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

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         #container {
         	position: relative; 		/* NEW!! needed for absolute positioning of nav and #emailsignup */
				padding-top: 82px;		/* NEW!! in new layout, this puts #banner in the right spot */
				text-align: left;			/* NEW!! this is necessary because otherwise, IE tries to center children */
         	margin: 0 auto;
         	width: 750px;
         	background: transparent url(/shared/showflyer/red_content_bg_red_pole.gif) top center no-repeat;
           	height: 818px				/* NEW!! was 900px; but now is reduced to accomodate top padding */
         }
			
         /* 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 #container { 		
               _height: 900px;		/* fake height for IE5win only = real min-height + padding + border */
               _he\ight: 818px;
               }

				
/* main content elements */

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         #content {
         	width: 500px;
         	height: 300px;
				margin-top: 10px;        /* NEW!! was -70px; but now using a new layout */
            margin-left: 70px;       /* NEW!! was 50px; but now using a new layout */
         	padding-top: 65px;
         	text-align: left;
         	overflow: auto;
				position: relative;
				z-index: 90;
         }

         /* 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: 365px;		/* fake height for IE5win only = real min-height + padding + border */
               _he\ight: 300px;
               }

				
         /* NEW!! Firefox hacks removed
         #content, x:-moz-any-link {margin-left: 20px;}
         #content, x:-moz-any-link, x:default {margin-left: 50px;}
         */

         /* NEW!! Safari hacks removed
         @media screen and (-webkit-min-device-pixel-ratio:0) {
         #content {
         	margin-left: 70px;
         	margin-top: -85px;
         }
         }
         */

#content .entry {
	margin-left: 40px;
	margin-right: 40px;
}

#content .entry {
	margin: 0 15px 20px 15px;
}

#content .notes {
	padding-bottom: 30px;
	margin-bottom: -30px;
}

.entry .name, .entry .act {
	font-weight: normal;
	margin: 0;
	font-size: 1.3em;
	color: #000;
}
.entry .name {
	margin-left: 0.5em;
}
.entry .act {
	margin-left: 1em;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}
.entry p {
	margin: 10px 20px 15px 30px;
	padding-bottom: 20px;
}
.details {
	margin: 0 20px 0 30px;
}
/* -- banner area -- */

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         #banner {
				position: relative;	/* NEW!! needed for absolute positioning of #banner .band span */			
				width: 570px;			/* NEW!! was width: 500px; but this was arbitrarily too small */
         /*	height: 300px; 			NEW!! this value is also arbitrary, and no longer needed */
         	margin: 0px;
				padding-top: 70px;	/* NEW!! this relates to #banner .photo, which was 70px too high before */
         /*	text-align: right;		NEW!! the band title should really be left aligned */ 
         }

         /* NEW!! Safari hacks removed
         @media screen and (-webkit-min-device-pixel-ratio:0) {
         #banner {
         	margin-top: -440px;
         	margin-bottom: 5px;
         }
         }
			*/

			
			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         #banner .photo {
				width: 400px;			/* NEW!! was width: 300px; though didn't match the image at all */
				height: 150px;			/* NEW!! was height: 220px;. The extra 70px are now #banner top padding */
background:url(/images/WR_Circles-cropped-top.jpeg) left bottom no-repeat;
         	margin-left: 80px;
         /*	margin-top: -430px; 		NEW!! in the new layout, this is no longer needed
         	top: 100px;					NEW!! in the new layout, this is no longer needed */
         }

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         /* NEW!! Safari hacks removed
         @media screen and (-webkit-min-device-pixel-ratio:0) {
         #banner .photo {
         	height: 210px;
         }
         }
			*/

			
			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. Now using #banner .band span to display the band name. */
			
         #banner .photo span {
         /*	font-family: Impact, Haettenschweiler, sans-serif;
         	color: #000;
         	text-align:left;
         	font-size: 50px;
         	width: 600px;
         	position: relative;
				left: -260px; */
         	visibility: hidden; 
         }

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. This used to be hidden, and the styles were applied to #banner .photo span. This is a
				better way. */
				
         #banner .band span {
         	font-family: Impact, Haettenschweiler, sans-serif;
         	color: #000;
         	text-align:left;
         	font-size: 50px;
         	width: 600px;
         	position: absolute;		/* NEW!! now using absolute positioning to bring this above the photo */
				top: 0;						/* NEW!! now using absolute positioning to bring this above the photo */
				left: 85px;					/* NEW!! now using absolute positioning to bring this above the photo */
         /*	visibility: hidden; 			NEW!! now using this div to display band name */
         }


/* -- section-specific header replacement -- */
h1 {
	height: 35px;
	padding: 3px 0;
	margin-left: 10px;
	margin-top: -65px;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: left center;
	display:block;
}
.contact h1 {
	background-image: url(/shared/showflyer/contact.gif);
}
.calendar h1 {
	background-image: url(/shared/showflyer/calendar.gif);
}
.guestbook h1 {
	background-image: url(/shared/showflyer/guestbook.gif);
}
.home h1, .index h1, .list h1 {
	background-image: url(/shared/showflyer/welcome.gif);
}
.links h1 {
	background-image: url(/shared/showflyer/links.gif);
}
.music h1 {
	background-image: url(/shared/showflyer/music.gif);
}
.news h1 {
	background-image: url(/shared/showflyer/news.gif);
}
.photos h1 {
	background-image: url(/shared/showflyer/photos.gif);
}
.press h1 {
	background-image: url(/shared/showflyer/press.gif);
}
.bio h1 {
	background-image: url(/shared/showflyer/bio.gif);
}
.store h1 {
	background-image: url(/shared/showflyer/store.gif);
}

h1 span {
	visibility: hidden;
}

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


/* -- basic html elements -- */
body {
	font: 10pt Arial, sans-serif;
	color: #fff;
	background: #000 url(/shared/showflyer/skyline_bg.jpg) repeat-x;
	padding: 0;
}
a, a:visited {
	color: #000;
	text-decoration: none;
	border-bottom: 1px dashed #000;
}

a:hover {
	color: #c7c7c7;
	border-bottom: 1px dashed #c7c7c7;
}
h1 {
}

h2 {
	text-transform: lowercase;
	color: #fff;
	display:block;
	font-weight: bold;
	font-style: normal;
	font-size: 1.3em;
	margin: 0 0 5px 0;
	line-height: 1em;
	padding-left: 0.5em;
	background: transparent url(/shared/showflyer/red_squiggle.gif) left center repeat-x;
	padding: 10px;
}
h2 a {
	color: #e06700;
}
h3 {
	font-weight: normal;
	margin: 0;
	font-size: 1.3em;
	color: #000;
	padding: 5px;

}

         h4 {
         	font-size: 1em;
         	margin: 5px;
         	color: #444; 			/* NEW!! was #c7c7c7; but this was very difficult to read */
         }

ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p, li, dt, dd {
	line-height: 1.5;
}

/* -- navigation -- */

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         #navigation ul {
         /*	position: relative; 			NEW!! These styles were changed as part of new layout 
         	top: 220px;
         	left: 640px; 
         	width: 50px; */
				position: absolute;		/* NEW!! These styles were changed as part of new layout */
				top: 225px;					/* NEW!! These styles were changed as part of new layout */
				right: 60px;				/* NEW!! These styles were changed as part of new layout */
				width: 150px;				/* NEW!! This fixes a serious bug. Nav was too narrow before */
				z-index: 50;				/* NEW!! This forces the nav to be behind #content */
         	margin: 0;
         	padding: 0;
         	list-style-type: none;
         }

         /* NEW!! Safari hacks removed
         @media screen and (-webkit-min-device-pixel-ratio:0) {
         #navigation ul {
         	left: 565px;
         	padding-top: 10px;
         	width: 125px;
         }
         } 
			*/

#navigation li {
	display:block;
	height: 40px;
	text-align:right;
	font-family: Impact, Haettenschweiler, sans-serif;
	text-transform:uppercase;
	font-size: 20px;
}

         #navigation li a, #navigation li a:visited {back3ground-color: purple;
         /*	float: right;			NEW!! this messed up the link spacing in IE */
         	padding-top: 5px;	
         	border:none;
         }

         /* NEW!! Safari hacks removed
         @media screen and (-webkit-min-device-pixel-ratio:0) {
         #navigation li a, #navigation li a:visited {
         	height: 20px;
         	padding-bottom: 9px;
         	padding-top: 1px;
         
         }
         }
			*/

			
#navigation li a:hover {
	color: #c7c7c7;
}

/* -- emailsignup --*/

			/* NEW!! Major changes to the way this template has been laid out. This div has been changed as part of
				the revision. */
				
         #emailsignup {
         	text-align: center;
         /*	position: relative; 				NEW!! now using absolute positioning
         	top: 250px;
         	left: 75px; */
				position: absolute;			/* NEW!! now using absolute positioning */
				top: 690px;						/* NEW!! now using absolute positioning */
				left: 75px;						/* NEW!! now using absolute positioning */
         	width: 190px;					/* NEW!! reduced from 200px to allow for left/right padding */
				padding: 10px 5px 0 5px;	/* NEW!! new left/right padding forces Safari to match other browsers */
         	height: 60px;
         	color: #fff;
         	background: #000;
         	border: 1px solid white;
         }

			/* NEW!! Huh?! There is no div within #emailsignup. Gone.
         #emailsignup div {
         	height: 35px;
         	margin: 0;
         	margin: 0 10px;
         } */


/* -- footer --  */

         #footer {
         /*	height: 20px;				NEW!! this is not needed at all */
         	width: 100%;
         	margin: 0px;
				text-align: center;	/* NEW!! this is needed to center text in new layout */
         }

         #footer p {
         	font-size: 0.8em;
         	padding: 1em;
         	margin: 0;				/*	NEW!! this forces consistency between browsers (specifically IE) */
         }

/* -- section-specific style -- */

         .home p, .index p {
         	margin: 0 20px 1.5em 20px;
         	line-height: 1.4;
         }
			
			/* NEW!! This new code resets values for p on the home page--in particular, special paragraphs
				such as those found in the home page #calendar or the home page #footer. */
			
			.home .entry p {
				margin-left: 30px;	/* NEW!! This resets margin-left to standard for entries */
				margin-top: 10px;		/* NEW!! This restores a top margin to the home page calendar */
				line-height: 1.5;		/* NEW!! This resets line-height to standard */
			}
			
         #footer p {
         	line-height: 100% !important;		/* NEW!! This resets line-height in the #footer to standard */
         }

			/* NEW!! Before, these were styled at the page level (using body.calendar or .calendar for short).
			Now that calendars can also appear on the	home page, they are styled using div#calendar or
			#calendar for short. Calendars are always contained within a #calendar div, no matter what page
			they're on. Good, no? */

         #calendar h3 {
         	font-family: Impact, Haettenschweiler, sans-serif;
         	color:#fff;
         	font-size: 20px;
         	margin: 0; 				/* NEW!! was margin: 0 0 1em 0; */
         	text-indent: 8px;
         	text-transform: uppercase;
         }
         
         #calendar h4 {
         	top: 15px;
         }

         #calendar .details {
         /*	margin-top: -45px;		NEW!! the original designer wanted to move this div up beside the h3, but 
         	margin-left: 200px; 				they would overlap unless h3 was really short. Now the layout is */
				margin-top: -12px;		/* 	more ordinary, but at least it works consistently. */
         }

         #calendar .details address {
         	top: -1.5em;
         	left: 3em;
         }

.contact ul {
	list-style: none;
}

#postForm {
	margin: 0 0 35px 0;
	padding: 10px;
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 0px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #000;
	background: #A8D4DF;
	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: 5px;
	margin-left: 86px;
	margin-bottom: 15px;
}

#postForm label.security_code_label {
	width: 150px;
	padding-top: 0px;
	margin-left: 15px;
	float: left;
}

#postForm input#security_code {
	width: 175px;
	float: left;
	margin-left: 15px;
}

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

.guestbook h2 {
	margin: 0;
	padding: 0px;
	font-size: 1em;
	background: transparent url(/shared/showflyer/red_squiggle.gif) repeat-x;
	margin: 0 0 5px 0;
	line-height: 3em;
	padding-left: 0.5em;
}
.guestbook h2 a {
	text-transform: lowercase;
}
.guestbook h3 {
	margin: 0;
	padding: 0 20px 0 0;
	border: 0;
	text-align: right;
	font-size: 0.85em;
	text-transform: lowercase;
	margin-top: -2.7em;
	color: #fff;
}
.guestbook blockquote {
	margin-top: 1.3em;
	padding: 0 1em;
}

.links h2 {
	margin: 0 20px 10px;
}
.links h3 {
	background:transparent url(/shared/showflyer/red_record.gif) left center no-repeat;
	margin-left: 10px;
	padding-left: 55px;
}
.links dl {
	margin: 0 25px 20px;
}
.links dd {
	margin-bottom: 5px;
}

.links h3 a {
	font-size: 0.9em;
}

.music h2 {
	font-size: 1.3em;
}
.music h2 {
	margin-top: 40px;
}
.music h3 {
	font-size: 20px;
	font-family: Impact, Haettenschweiler, sans-serif;
	color:#fff;
	margin-left: 50px;
	padding-left: 15px;
	background: transparent url(/shared/showflyer/red_record.gif) left top no-repeat;
	text-transform:uppercase;
	margin-bottom: -7px;
}
.music .details {
	margin: 0 30px 15px 50px;
}
.music .artist {
	color: #000;
	font-style:italic;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #000;
}
.music #content ul {
	list-style-type: none;
	padding: 0;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	display: block;
}

			/* NEW!! This useless code just made text look bad on the news page
         .news {
         	line-height: 130%;
         }
			*/

.photos img {
	border: solid 10px #000;
}
.photos dl {
	margin: 0 20px;
	padding: 0;
}
.photos dt {
	padding: 5px;
	background: url(03-banner-bg.gif) repeat-x;
	margin: 10px 0 1px 0;
}
.photos dd {
	text-align: center;
	margin: 0;
	padding: 0;
}

.photos #content {
	font-style:italic;
}

.press h2 {
	margin: 20px;
}

.press blockquote {
	margin-left:10px;
	padding: 20px;
	font-style:italic;
	background: transparent url(/shared/showflyer/red_big_squiggle.gif);
}
.press .caption {
	margin: -10px 0 20px 180px;
	padding: 5px 5px 5px 35px;
	background: transparent url(/shared/showflyer/red_arrow.gif) top left no-repeat;
	height: 32px;
}

.store h2 {
}

/* -- selected links --*/

			/* NEW!! Changed .store #navstore to .products #navproducts */

         .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 {
         		background: transparent url(/shared/showflyer/red_asterisk.gif) left center no-repeat;
					padding-left: 30px;
         }

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

			/* NEW!! This was apparently done to correct the useless code just made text look bad on the news page
         .news #banner .photo span {
         	top: 25px;
         }

/* NEW!! IE hacks removed
layout tweaks for ie

* html #content {
	top: -30px;
	left: -120px;
	margin-top: -50px;
	margin-left: -120px;
}

*+html #content {
	margin-top: -500px;
	margin-left: -150px;
}

* html #banner {
	margin-top: -450px;
	margin-left: -100px;
}

*+html #banner {
	margin-top: 0px;
	margin-left: -225px;
}

* html #banner .photo {
	height: 150px;
	margin-top: 90px;
	margin-left: -330px;
}

* html #banner .photo span {
	top: -65px;
	left: -240px;
}

* html #navigation ul {
	width: 125px;
	margin: 0px;
	left: 250px;
}

*+html #navigation ul{
	width: 135px;
	margin-left: -800px;
}

* html #navigation li {
	width: 115px;
	float: right;
}

*+html #navigation li {
	width: 125px;
	float: right;
}

* html #emailsignup {
	padding-top: 10px;
	text-align: center;
	height: 60px;
	left: -180px;
	color: #fff;
	background: #000;
	border: 1px solid white;
}

* html .music h3 {
	font-size: 20px;
	margin-left: 60px;
	padding-left: 20px;
	overflow: auto;
}

* html #footer {
	margin-top: 10px;
	color: #000;
}

*+html #emailsignup {
	left: -200px;
	color: #000;
}

* html .news #banner .photo span {
	height: 60px;
	top: -42px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.news #banner .photo span {
	top: 22px;
}
*/

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

         .home img {
				margin: 15px 0 15px 20px;
				display: block;		/* NEW!! display: block triggers margin collapse */
				}	

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