/* 
	Designed by Bernadette Bly, Red Emerald www.webneck.com  -  Kent WA USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com December 2008
   All styles that have been changed are indented
	
	- several minor changes were made for browser consistency. it appears to have been designed for ie, so other
	  browsers were made to match.
	- relative and absolute positioning were causing so many layout problems that they've now been
	  removed from most screen elements (putting them back into the normal flow). Only the nav and the e-mail
	  signup are position: absolute; now. code has also been cleaned-up, removing some redundancies.
	- #footer now sits at the bottom of #content like it should (due to #content now being part of normal flow)

*/


/* =========== layout =========== */


/* basic html elements */
body {
	background-color:black;
	padding: 0;
	margin: 0;
	text-align: center;
	font-family:verdana;
}
a {
	color: #adc9fb;
	font-weight: bold;
}
a:hover {
	color: #fba9c5;
}
img {
	border:0;
}

         #container {
				position: relative;		/* NEW!! this is needed to position #banner, #emailsignup */
         	width: 100%;
         /*	voice-family: "\"}\"";
         	voice-family:inherit; */
         	padding: 0px;
         	text-align: left;
         	padding: 120px 0px 0px 0px;
         	vertical-align:top;
         }
			
         #banner  {
         /*	clear:left;						NEW!! this doesn't do anything */
         	position:absolute;
         	top:0;
				left:0;						/* NEW!! this definitely does something, and is necessary */
         	width:100%;
         	height:98px;
         	font-family:verdana;
         	font-size: 190%;
         	padding: 0px 0px 0px 0px;
         	background: #9a205e url(/shared/spotlight/banner_welcome.jpg) right top no-repeat;
         	z-index:0;
         	
         }

#banner .photo{
	display: none;

}
#banner .band{
	padding: 25px 0px 0px 25px;
}

			/* NEW!! Now using absolute positioning for navigation (since it doesn't interact with other divs
				anyway) and normal flow for #content. */
					
         #navigation{
         	position:absolute;		/* NEW!! was relative */
         /*	float:left;						NEW!! this is easier to control by absolute positioning */
				left:0;
         	top: 120px;					/* NEW!! was 0px; */
         	width: 138px;
         	height:600px;
         	padding: 45px 0px 0px 0px;
         	background: url(/shared/spotlight/nav-ul-bg2.jpg) left top no-repeat;
         	margin-left:0;
         }
         #navigation ul {
         /*	position:relative;			NEW!! these were used to shift the ul to the left, but this caused
         	left:-50px; 							rendering problems in IE7. now using negative left margin. */
				margin: 0 0 0 -10px;		/* NEW!! margin-left was 40px by default. */
				padding: 0;					/* NEW!! forces consistency between browsers */
         }
			
#navigation li {
	height:15px;
	padding: 5px 0 0px 0px;
	margin: 0 0 0 20px;
	list-style: none;
	font-family:verdana;
	font-size:12px;
}
#navigation li a {
	text-decoration: none;
	white-space: no-wrap;
	padding: 0px 0px 0px 30px;
	color:#ffffff;
}
#navigation li a:hover {
	background: url(/shared/spotlight/nav-bg-hover.gif) 20px 3px no-repeat;
}
.home #navhome, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
	text-transform: uppercase;
	padding: 0px 0px 0px 35px;
}

			/* NEW!! Now using absolute positioning for navigation (since it doesn't interact with other divs
				anyway) and normal flow for #content. */
					
         #content {
         /*	position:absolute;				NEW!! Now part of normal flow
         	top:50px;							NEW!! Now part of normal flow */
         	color:#ffffff;
         	width: 77%;
         	margin: 0 0 0 150px;			/* NEW!! margin-top was 50px; */
         }

         #content h1 {
         	color:#adc9fb;
				margin-top: 0em;				/* NEW!! This forces the same appearance in all browsers */
         }
			
#content h2 {
	color:#adc9fb;
}


         #emailsignup {
         	position: absolute;		/* NEW!! was relative, but this works better */
         	top: 75px;					/* NEW!! was top:-65px; but 75px matches the original appearance */
         /*	width:250px;					NEW!! this code didn't work so well anyway
         	float: right;							this code didn't work so well anyway
         	align:center;							this code didn't work so well anyway */
         	color:#ffffff;
         	font-family:arial;
         	font-size:80%;
         	margin: 0;
         	z-index:1;
         /*	margin-top:20px;				NEW!! now using top: 75px exclusively to control vertical positioning */
				right: 10px;
         }

         #emailsignup input {
         	background-color:#000000;
         	color:#ffffff;
         	width: 45px;					/* NEW!! because it looks good */
         }

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


#postForm{
	width:400px;
        /*
	background-color:#9a205e;
        */
	padding:10px;
}
#postForm form {
        padding: 25px 20px;
}

#postForm input, #postForm textarea {
        display: block;
        width: 360px;
        margin-bottom: 10px;
}
#postForm input[type="text"] {
        height: 15px;
}
#postForm textarea {
        height: 100px;
}
#postForm input[type="submit"] {
        width: 200px;
        margin: 0 auto; 
}   

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-top: 3px;
	margin-left: 15px;
	margin-bottom: 10px;
}

#postForm label.security_code_label {
	width: 220px;
	margin-left: 10px;
	float: left;
}

#postForm input#security_code {
	width: 220px;
	float: left;
	margin-left: 10px;
	background: #fff;
}

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

.contact #banner {
	background-image: url(/shared/spotlight/banner_contact.jpg);
}
.calendar #banner {
	background-image: url(/shared/spotlight/banner_calendar.jpg);
}
.guestbook #banner {
	background-image: url(/shared/spotlight/banner_guestbook.jpg);
}
.home #banner, .index #banner, .list #banner {
	background-image: url(/shared/spotlight/banner_welcome.jpg);
}
.links #banner {
	background-image: url(/shared/spotlight/banner_links.jpg);
}
.music #banner {
	background-image: url(/shared/spotlight/banner_music.jpg);
}
.news #banner {
	background-image: url(/shared/spotlight/banner_news.jpg);
}
.photos #banner {
	background-image: url(/shared/spotlight/banner_photos.jpg);
}
.press #banner {
	background-image: url(/shared/spotlight/banner_press.jpg);
}
.bio #banner {
	background-image: url(/shared/spotlight/banner_bio.jpg);
}
.products #banner {
	background-image: url(/shared/spotlight/banner_store.jpg);
}

         #footer{
         	clear:left;
         	position:relative;
         	font-family:arial;
         	font-size:12px;
         	color:#ba53f8;
         	padding: 20px 0 0 0;		/* NEW!! was 0 0 0 10px; but this suits the new layout better */
         	text-align:left;
				margin-left: 150px;		/* NEW!! this now matches the left margin of #content */
         }
			
			
#accessibility{
	display:none;
}
#content li a {
	padding: 0px 0px 0px 15px;
	list-style: none;
	text-decoration: none;
	white-space: nowrap;
	color:#ffffff;
}
#content li a:hover {
	background: url(/shared/spotlight/sidelight.gif) 10px 0px no-repeat;
	background-position: left;
}
#content ul{
list-style: none;
margin: 0px 0px 0px 0px;
padding: 5px 0px 10px 0px;
}

.details li{
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 10px;
}

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