/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com October 2008
   All styles that have been changed are indented
	
	VINYL SOUL - WIDE BANNER
	
	OCTOBER 2008:
	- new variation with different layout of #banner band images and #emailsignup
	- hid band name from #banner properly using text-indent
	- fixed an incorrectly used box model hack that was hiding important code from IE5 (#navigation padding)	
	- 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
	  
*/


body {
	background: #43180D url(/shared/vinylsoul/body-bg.gif);
	color: #000;
	padding: 0;
	margin: 0;
	text-align: center;
	font: x-small Helvetica, Arial, Verdana, sans-serif;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}
 html>body {
	font-size: small;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}
a {
	color: #B05905;
	font-weight: bold;
}
a:hover {
	color: #ffdd99;
}
address {
	font-style: normal;
}

         h1 {
         	margin: 0 0 12px 0;
         	text-transform: lowercase;
         	font-weight: normal;
         	text-align: left;
         }

			h1 span {
				background: url(/shared/vinylsoul/h1-martini.gif) right center no-repeat;
         	padding: 0 30px 0 0;
			}

h2 {
	font-size: 1.2em;
	font-weight: bold;
	position: relative;
	left: -32px;
	padding-left: 32px;
	text-transform: capitalize;
	margin: 2em 0 0 0;
	voice-family: "\"}\"";
	voice-family:inherit;
	background: url(/shared/vinylsoul/h2-arrow.gif) 18px 3px no-repeat;
}
h2 a {
	color: #fff;
}
h3 {
	font-size: 1.5em;
	text-transform: lowercase;
	margin: 0.5em 0 -3px 0;
}
h4 {
	font-size: 1em;
	margin-top: 0;
	color: #FFD02E;
	text-transform: lowercase;
}
#container {
	background: url(/shared/vinylsoul/container-bg.gif) bottom left no-repeat;
	text-align: left;
	margin: 0;
}

			/* NEW!! New layout for this variation */

         #emailsignup {
         	position: absolute;
				top: 163px;
				right: 58px;
				width: 290px;
         	color: #fff;
         	text-transform: lowercase;
         	font-weight: normal;
         	font-size: 1em;
				z-index: 999;
         }
					
         #emailsignup input {
         	width: 60px;			/* NEW!! before, both the field and the button were width: 83px; */
         }
			
			#emailsignup input#list_email {
				width: 118px;			/* NEW!! before, both the field and the button were width: 83px; */
				margin-left: 5px;

			}

			#content {
				min-height: 345px;
			}

         /* 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 { 		
            _height: 345px;		/* IE5/6 treat this as min-height */
            }


			
#content {
	background: url(/shared/vinylsoul/content-bg.gif) top right repeat-y;
	color: #fff;
	margin: 0 0 0 332px;
	padding: 20px 70px 20px 0;
}
#banner {
	background: #fff url(/shared/vinylsoul/banner-bg.gif) 0 0 repeat-x;
	height: 162px;
	width: 100%;
	margin: 0;
}

			/* NEW!! New layout for this variation */

         #banner .band {
         	position: absolute;
				top: 40px;
				height: 93px;
				width: 100%;
				z-index: 200;
background: url(/images/since-cropped-bannerphoto.jpg) 0 0 repeat-x;
				text-indent: -9999px;		/* NEW!! This hides the band name properly */
         }

			/* NEW!! New layout for this variation */

         #banner .photo {
         	position: absolute;
         	top: 0;
         	left: 0;
         	height: 162px;
         	width: 296px;
				z-index: 500;
				text-indent: -9999px;		/* NEW!! This hides the band name properly */
         }

         /* NEW!! Now using accessibility div to display an optional band logo in this variation */

         #accessibility {
         	position: absolute;
				left: 50%;
				top: 15px;
				height: 140px;
				width: 600px;
				margin-left: -167px;
         	text-indent: -9999px;
				z-index: 90;
         }
			
			
#navigation {
	width: 266px;
	position: absolute;
	top: 162px;
	background: url(/shared/vinylsoul/nav-bg.gif) 0 0 repeat-y;
}

         #navigation ul {
         	margin: 0;
         	background: url(/shared/vinylsoul/nav-ul-bg.gif) bottom left no-repeat;
         /*	padding: 0;
         	voice-family: "\"}\"";		NEW!! this hack accomplished nothing, yet it broke the layout in IE5
         	voice-family:inherit; 				by denying it the padding it needed to display the last nav link */
         	padding: 0 0 45px 0;
         }

#navigation li {
	display: inline;
}
#navigation li a {
	display: block;
	color: #fff;
	text-decoration: none;
	text-transform: lowercase;
	padding: 0.5em 50px 0.5em 59px;
	margin: 0;
	font-weight: normal;
	font-size: 1.1em;
}
#navigation li a:hover {
	background: url(/shared/vinylsoul/nav-li-arrow2.gif) 44px 11px no-repeat;
}
.name, .act {
	font-weight: bold;
	text-transform: lowercase;
	color: #FFD02E;
	margin-right: 0.7em;
}
address {
	margin-top: 1em;
}
#postForm {
	border: solid 2px #B05905;
	border-width: 0 1px 2px 0;
	margin: 15px 35px 30px 35px;
	padding: 10px;
	background: #EAB428;
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm label {
	color: #fff;
	padding: 3px;
	margin-bottom: 1px;
	width: 294px;
	font-weight: bold;
}
#postForm input[type="submit"] {
	width: 200px;
	margin: 0 auto;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	display: block;
	margin: auto;
}

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

.guestbook h3 {
	font-size: 1em;
	margin-top: 0;
	color: #FFD02E;
	text-transform: lowercase;
}
.links h3, .music h3 {
	font-size: 1.2em;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
	font-weight: bold;
	color: #FFD02E;
}
.music .description {
	line-height: 150%;
	font-style: italic;
}
.music #content ul {
	border: solid 2px #B05905;
	border-width: 0 1px 2px 0;
	margin: 15px 35px 30px 35px;
	padding: 10px;
	background: #EAB428;
}
.music #content li a {
	font-weight: normal;
	color: #fff;
}
.music #content li a:hover {
	color: #f00;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	background: url(/shared/vinylsoul/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/vinylsoul/ico-play.gif) no-repeat;
	display: block;
}
.photos dt {
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
	color: #fff;
}
.photos dd {
	margin: 0 0 20px 0;
	padding: 2px;
	background: #fff;
	text-align: center;
}
.press h2 {
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 10px;
}
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/vinylsoul/ico-speech.gif) no-repeat;
}
#footer {
	margin: 0 0 0 273px;
	height: 120px;
	background: url(/shared/vinylsoul/footer-bg.gif) bottom left no-repeat;
}
#footer p {
	margin: 0;
	color: #fff;
	text-align: center;
	background: url(/shared/vinylsoul/footer-p-bg.gif) bottom right no-repeat;
	padding: 15px 20px 0 20px;
	height: 120px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 105px;
}

/* -- 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 {
	font-weight: bold;
	background: url(/shared/vinylsoul/nav-li-arrow.gif) 44px 11px no-repeat;
}


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



/* --- NEW!! COLOR CHANGES FOR ALL NEW VARIATIONS (these override previous settings) ----------------------- */

/* --- Background Images --- */

body 				{background: #43180D url(/shared/vinylsoul/body-bg-wine.gif);}
#container 		{background: url(/shared/vinylsoul/container-bg-wine.gif) bottom left no-repeat;}

	#banner 			{background: #fff url(/shared/vinylsoul/banner-bg-wine.gif) 0 0 repeat-x;}
	#navigation 	{background: url(/shared/vinylsoul/nav-bg-wine.gif) 0 0 repeat-y;}
	#navigation ul {background: url(/shared/vinylsoul/nav-ul-bg-wine.gif) bottom left no-repeat;}
/*	#emailsignup 	{background-image: url(/shared/vinylsoul/body-bg.gif)} */

	#content 		{background: url(/shared/vinylsoul/content-bg-wine.gif) top right repeat-y;}
	#footer 			{background: url(/shared/vinylsoul/footer-bg-wine.gif) bottom left no-repeat;}
	#footer p	 	{background: url(/shared/vinylsoul/footer-p-bg-wine.gif) bottom right no-repeat;}


/* --- Area Colors --- */

.photos dd {
	background: #5d1f1f;
	}
.music #content ul {
	background: #898676;
	border: solid 2px #6f734e;
	border-width: 0 1px 2px 0;
	}
#postForm {
	background: #898676;	
	border: solid 2px #6f734e;		
	border-width: 0 1px 2px 0;
	}

	
/* --- Image Candy --- */

#navigation li a:hover {
	background: url(/shared/vinylsoul/nav-li-arrow2-wine.gif) 44px 10px no-repeat;
	}
.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: url(/shared/vinylsoul/nav-li-arrow-wine.gif) 44px 10px no-repeat;
	}

   h1 span 			{background: url(/shared/vinylsoul/h1-circle-wine.gif) right center no-repeat;}
   h2 				{background: url(/shared/vinylsoul/h2-arrow-wine.gif) 18px 4px no-repeat;}

   .press .caption {
   	background: url(/shared/vinylsoul/ico-speech-olive1.gif) no-repeat;
	   }
   .music .mp3_hifi_download, .music .mp3_lofi_download {
   	background: url(/shared/vinylsoul/ico-cd.gif) no-repeat;
   	}
   .music .mp3_hifi_play, .music .mp3_lofi_play {
   	background: url(/shared/vinylsoul/ico-play.gif) no-repeat;
	   }
	

/* --- Text Colors --- */

body 					{color: black;}

#emailsignup 		{color: white;}
#navigation li a 	{color: white;}
#footer p 			{color: white;}

#content 			{color: white;}

   h2 a 		{color: white;}
   h4 		{color: #8c9162;}
   a 			{color: #ced49b;}
   a:hover 	{color: #e4e9ba;}
   
		.name, .act 	{color: #8c9162;}
      .photos dt 		{color: white;}

      .music .artist, .music .caption 	{color: #8c9162;}
      .music #content li a 				{color: white;}
      .music #content li a:hover 		{color: #e4e9ba;}

      .guestbook h3 		{color: #8c9162;}
      #postForm label 	{color: white;}