/* 
	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. biggest change is that page is now centered
	- 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 #emailsignup, now that it's absolute */
         	width: 780px;
         	text-align: left;
         	padding: 0;					/* NEW!! padding-top was 120px; */
         	vertical-align:top;
				margin: 0 auto;			/* NEW!! Automatic centering for all browsers (previously only in IE) */
         }

			/* NEW!! This used to use position: absolute; but now it's part of the regular flow. Using
				position: relative; so that we can use z-index to place #banner higher than #navigation. */
					
         #banner  {
	      	position:relative;		/* NEW!! was absolute, but now part of normal flow. */
	        	top:0; 
         	width:780px;
         	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: 100;				/* NEW!! was 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 */
         	align:left;
         	top: 90px;					/* NEW!! was -30px; */
         	width: 138px;
         	height:600px;
         	padding: 45px 0px 0px 0px;
         	background: url(/shared/spotlight/nav-ul-bg2.jpg) left top no-repeat;
         	margin-left:0;
				z-index: 50;				/* NEW!! this is used to place #banner over top in case of overlap */
         }
         #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: 460px;
         	margin: 0 0 0 150px;			/* NEW!! margin-top was 50px; */
         }

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

			/* NEW!! Several minor changes to #emailsignup to improve appearance. Now it's aligned to the bottom
				right corner of #banner in a way that looks the same in all browsers */
				
         #emailsignup {
         	white-space: nowrap;	
         	position: absolute;
         	top: 78px;						/* NEW!! was 38px, but now this replaces margin-top as well */
         	margin: 0;						/* NEW!! was margin: 35px 0 0 519px; but it's better to use top, right */
         	color:#ffffff;
         	font-family:arial;
         	background-color:#000000;
				right: 0;						/* NEW!! this is a better way to put in on the right */
				z-index: 200;					/* NEW!! was 1; */
         }
			
         #emailsignup input {
         	white-space: nowrap;	
         	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:260px;
	/*
        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; 
}   

.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{
         	color:white;
         	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 {
	list-style: 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{
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; }