/* 
	Designed by Bernadette Bly, www.webneck.com  -  Kent WA USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April-May 2007 
   All styles that have been changed are indented
	
	- OBSOLETE: layout problems in IE7 were caused by using position: relative and margins to control position.
	  browsers interpret this differently, so the fix was to use top, left, right, etc. instead
	- NEW MAY 2007: 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.

*/



/* =========== 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 {
	width: 100%;
	voice-family: "\"}\"";
	voice-family:inherit;
	padding: 0px;
	text-align: left;
	padding: 0px 0px 0px 0px;
	vertical-align:top;
}

					/* NEW!! This used to use position: absolute; but now it's part of the regular flow */
					
               #banner  {
	            /*	position:absolute;
	              	top:0px;
	              	left:0px; */
               	width:100%;
               	height:98px;
               	padding: 0;
               	font-family:verdana;
               	font-size: 190%;
               	background: #9a205e url(/shared/spotlight/backgroundsm.jpg) right top no-repeat;
               	z-index:0;
               	
               }

#banner .photo{
	display: none;

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

					/* NEW!! These styles have been revamped and cleaned up in a big way. It now uses 
					position: absolute; on the #navigation div instead of position: relative; on the ul. Also, the
					border has been moved to #navigation */
					
               #navigation
               {
						position:absolute;	/* NEW!! used to be relative? I don't remember */
               	top: 97px;				/* NEW!! this is the right way to push the nav down */
               	width: 100%;
						height: 20px;
               	border: 1px solid #751244;
               	/*background: #9b205e;*/
               }

               #navigation ul
               {
               	width:100%;
               	margin: 0;				/* NEW!! used to be 97px 0 0 0; but now it's used to zero the list */
               	padding:0;
               	list-style-type: none;
               	text-align: center;
               	z-index:1;
               }

#navigation ul li
{
	width: 78px;
	height: 18px;
	border-left: 1px solid #751244;
	border-right:  1px solid #751244;
	padding: 0;
	margin: 0 0 0px 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
	text-align: center;
	float: left;
	font: normal 10px/18px "lucida grande", "lucida sans unicode", verdana, lucida, sans-serif;

}

#navigation ul li a
{
	width: 78px;
	height: 18px;
	border-top: 1px solid #751244;
	border-left: 1px solid #751244;
	border-bottom: 1px solid #751244;
	border-right: none;
	padding: 0;
	margin: 0 0 0px 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
	text-align: center;
	float: left;
	font: normal 10px/18px "lucida grande", "lucida sans unicode", verdana, lucida, sans-serif;
}

#navigation ul li a:hover
{
background-color:#000000;
	color: #ffffff;
	background: url(/shared/spotlight/anglelight-2.gif) 0px 0px no-repeat;
	background-position: center left;
}



.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 {
	text-transform: uppercase;
	padding: 0px 0px 0px 0px;
}

					/* NEW!! This has also been revamped. Used to be position: relative; and pushed down using top,
					but this pushed content off the bottom of the screen in some cases */
					
               #content {
               	color:#ffffff;
               	width: 100%%;
               	margin: 41px 0px 0px 10px;		/* NEW!! margin-top used to be 0 */
               	padding:0px;
               }
					
#content h1 {
	color:#adc9fb;
}
#content h2 {
	color:#adc9fb;
}

					/* NEW!! This used to use relative positioning and margin-top */

               #emailsignup {
               	position: absolute;	/* NEW!! was relative before, but this adds better control */
               	top:117px;				/* NEW!! was 0 before */
						right:0;					/* NEW!! */
               	width:250px;
               	float: right;
               	align:center;
               	color:#ffffff;
               	font-family:arial;
               	font-size:80%;
               	padding: 5px;
               	z-index:1;
               }
#emailsignup input {
	background-color:#000000;
	color:#ffffff;
}
#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{
               	margin-top: 50px; /* NEW!! simply because it looks better */
               	font-family:arial;
               	font-size:12px;
               	color:#ba53f8;
               	text-align:center;
               }
					
#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;
}


					/* NEW!! prevents image titles from butting up against images */
               .photos img {
               	margin-top: 13px;
               	margin-bottom: 13px;
               	}

					/* NEW!! small spacing tweak for readability */
					.links dt {
						margin-top: 2px;
						}
						
#splashimage { text-align: center; margin: 100px auto; }
#splashimage a img { border: 0; }