/* 
	Designed by Stacy Bias, www.hostbaby.com - Portland Oregon USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com August 2008 
   All styles that have been changed are indented
	
	- fixed basic margin issues, increasing padding-left on #content by 20px and reducing margin-left by 20px
	  on several elements. this makes the template more robust so that it will still look correct when new
	  elements are introduced
	- cured it of the text-shifiting bug. for some reason, the original set of templates designed by dave
	  shea each contained the code: 
	  
	  			.news {line-height: 130%;}. 
				
	  This doesn't seem to improve the appearance any, yet it makes all of the .news pages look weird because 
	  it causes the text to become misaligned--especially in the nav and h1. Since later designers often based
	  their work on his code, the error was replicated in several other templates. i could have changed it to
	  something like .news #content p {line-height: 130%;}, but decided to comment it out altogether.
	- some tweaks to the background image placement in the #footer
	
*/


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	text-align: center;
	background: #FF6600 url(/shared/lounge/orangediscobg.gif) no-repeat fixed;
	background-position: left top;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}

/* main structural elements */
#accessibility {
	position: absolute;
	left: -9999px;
}
#container {
	width: 750px;
	text-align: left;
	margin: 0 auto;
	padding-top: 0px;
	
}
html>body #container {
	padding-top: 0px;
}

/* main content elements */
#banner {
	height: 135px;
}
#navigation ul {
	width: 744px;
	position: absolute;
	top: 136px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#navigation li {
	display: inline;
}
#content {
	margin: 0;
}
#emailsignup {
	text-align: right;
	width: 743px;
}

/* -- banner area -- */
#banner .photo {
	width: 743px;
	height: 135px;
background: transparent url(/images/hugesteeldrumheaderpurplehos.jpg) 0 0 no-repeat;
	position: relative;
	top: 0px;
	left: 3px;
	border-bottom: 0px;
	border-top: 1px;
	border-right: 0px;
	border-left: 0px;
	border-thickness: 1px;
	border-color: #990066;
	border-style: dashed;
	voice-family: "\"}\"";
	voice-family: inherit;
	top: 0px;
	
}
#banner .band span {
	display: none;
}
#banner .photo span {
	display: none;
}

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


/* -- basic html elements -- */
body {
	font: 80% Verdana, sans-serif;
	color: #660000;
	margin:0;
	padding: 0;
}
a {
	color: #993300;
	font-weight: bold;
	border-bottom:dashed 1px #FF6600;
	text-decoration: none;
}
a:hover {
	color: #FF6600;
	border-bottom:dashed 1px #990066;
	
}

         h1 {
         	background: transparent url(/shared/lounge/orange_headerbullet.gif) 0 0 no-repeat;
         	background-position: left top;
         	margin-top: 22px;
         	margin-bottom: 15px;
         	margin-right: 0px;
         	margin-left: -20px;			/* NEW!! reduced margin-left by 20px; to allow #content padding */         					
				width: 450px;
         	color: #000000;
         	text-align: left;
         	height: 35px;
         	padding: 3px ;
         	font-weight: bold;
         	font-size: 20px;
         	text-transform: uppercase;
         	}

h2 {
	color: #990066;
	font-weight: normal;
	font-style: italic;
	font-size: 1.3em;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
         h3 {
         	color: #990066;
         	font-weight: bold;
         	font-size: 13px;
         	margin: 0 10px 0 -10px;		/* NEW!! reduced margin-left by 20px; to allow #content padding */         	
         }
h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #ffffff;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p {
	line-height: 1.3;
}


/* layout tweaks */

			/* NEW!! Now using 25px padding on the #content div (a 20px increase), and reducing margin-left by
				20px on children. */

         #content {
         	padding: 0 0 0 25px ;		/* NEW!! padding-left was 5px; */
         }

#container {
	background: url(/shared/lounge/orangedisco_containerbg.gif) center bottom repeat-y;
	width: 750px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 750px;
	padding: 0px;
}

			/* NEW!! The background image for this div was appearing off-center and it looked misaligned when
				compared to the white background of the #content div. Instead of specifying the width and then
				shifting the background image over, it now relies on left and right margins. */
				
         #footer {
        	/* width: 643px; 						NEW!! This is no longer necessary */
         	margin: 6em 5px 0 5px;		/* NEW!! Before, left and right margins were 0px */
            padding-bottom: 17px;
            text-align: center;
         	clear: both;
         	background: url(/shared/lounge/orange_footer.gif) 0px 0px no-repeat;		/* NEW!! was 3px 0px */
         }

#footer p {
	margin: 2px;
	font-size: 0.8em;
	color: #990066;
	
}

/* -- emailsignup --*/
#emailsignup {
	padding: 0px;
}

/* -- content area --*/

         /* -- content area --*/
         #content .entry {
         	margin: 15px 15px 30px -5px;		/* NEW!! margin-left was 15px; */
         	clear: left;
         }

.entry .name, .entry .act {
	font-weight: bold;
	font-style: normal;
	font-size: 1em;
	margin-left: 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #FF6600;
}
.entry .name {
	margin-left: 4em;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}

.entry p {
	margin: 10px 20px 15px 0px;
}

         .details {
         	margin: 0 20px 0 10px;		/* NEW!! reduced margin-left by 20px; to allow #content padding */
         }

.details li {
	margin: 2px 0px;
	padding-left: 16px;
	background: transparent url(/shared/lounge/orange_bullet3.gif) no-repeat 0px 50%;
}

/* -- section-specific style -- */
#navigation a {
    color: #993300;
}
#navigation a:hover {
    color: #CC3300;
}

         .home p, .index p, .list p, .list form {
         	margin: 0 0 1.5em 0;			/* NEW!! margin-left and margin-right were 20px; */
         	line-height: 130%;
         }

.contact ul {
	list-style: none;
}
.contact h2 {
    letter-spacing: 5px;
}


			/* NEW!! Added a declaration of the width. Before, the gray background of this div was spilling
				over the right side of #content. Adding the correct width also helps it center correctly. */
				
         #postForm {
         	height: 330px;
         	width: 685px;					/* NEW!! this fixes problems with centering, gray block */
         	margin: 0 0 35px 0;
         	padding: 10px;
         	background: url(/shared/lounge/orange_gbookbg.gif) top center repeat-y;
         }
			
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #fff;
	background: #C84130;
	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: 6px;
	margin-left: 190px;
}

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

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

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

.guestbook h2 {
	color: #990066;
	=margin: 0 0 2px 0;
	padding: 1px 1px 1px 20px;
	letter-spacing: 0;
	font-size: 1.1em;
	
}
.guestbook h2 a {
	font-weight:normal;
	
}
.guestbook h3 {
	margin: 0;
	padding: 10px 0 0 20px;
	font-weight:normal;
	font-size: 1em;
	text-transform: uppercase;
}
.guestbook blockquote {
	margin: 0;
	padding: 0px 20px 15px 20px;
}
.guestbook p:first-letter {
    font-size: 1.2em;
}

         .links h2 {
         	margin: 0 20px 10px 0;				/* NEW!! reduced margin-left by 20px; to allow #content padding */
         }
         .links dl {
         	margin: 0 25px 20px 5px;			/* NEW!! reduced margin-left by 20px; to allow #content padding */
         }

.links dd {
	margin-bottom: 5px;
}
.music h2 {
	font-size: 1.3em;
}
.music h2 {
	margin-top: 40px;
	padding-bottom: 10px;
	letter-spacing: 5px;
}

         .music h3 {
             text-transform:uppercase;
         	font-weight: bold;
         	margin: 5px 10px 5px 40px;			/* NEW!! reduced margin-left by 20px; to allow #content padding */
         }

.music h3 a {
    text-decoration: none;
    font-weight:normal;
}

         .music .details {
         	margin: 0 30px 15px 40px;			/* NEW!! reduced margin-left by 20px; to allow #content padding */
         }

.music .artist {
	color: #FF6600;
}
.music .artist, .music .caption {
	display: inline;
	text-size: 0.7em;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	list-style-type: none;
	padding: 0px 0px;
	margin: 0px 0;
}
.music #content li a {
	font-weight: normal;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 0 0 10px 20px;
	background: url() no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 0 0 10px 20px;
	background: url() no-repeat;
	display: block;
}

			/* NEW!! I'm not sure why this bizarre bit of code was put here in the first place (it appears in
				several templates by different designers. It made the h1 and nav text shift out of place, but only
				on the news page. Gone.

         .news {
         	line-height: 130%;
         }
			
			*/

.photos img {
	border: solid 1px #D0C6C6;
	background: #F3F5F2;
	padding: 10px;
}

         .photos dl {
         	margin: 0 20px 0 0;			/* NEW!! reduced margin-left by 20px; to allow #content padding */
         	padding: 0;
         }
			
.photos dt {
	padding: 5px;
	margin: 20px 0 1px 0;
	align: center;
}
.photos dd {
	margin: 0;
	padding: 0;
	align: center;
}
.press h2 {
	margin-left: 20px;
	margin-right: 20px;
	letter-spacing: 5px;
}
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 0 35px;
	
	
}

.press .entry  {
	background: transparent url(/shared/lounge/orange_bullet.gif) no-repeat 0 6px;
	margin-bottom: 18px;
	padding: 0px;
}

.news h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-weight: bold;
	font-style: normal;
	color: #990066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #990066;
}

.news .entry  {
	background: transparent url(/shared/lounge/orange_bullet2.gif) no-repeat 0 6px;
	margin-bottom: 18px;
	padding: 0px;
}

.bio h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-weight: bold;
	font-style: normal;
	color: #990066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #990066;
}

.bio .entry  {
	background: transparent url(/shared/lounge/orange_bullet2.gif) no-repeat 0 6px;
	margin-bottom: 18px;
	padding: 0px;
}

.guestbook h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-weight: bold;
	font-style: normal;
	color: #990066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #990066;
}

.guestbook .entry  {
	background: transparent url(/shared/lounge/orange_bullet2.gif) no-repeat 0 6px;
	margin-bottom: 18px;
	padding: 0px;
}

.entry h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-weight: bold;
	font-style: normal;
	color: #990066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #990066;
}

.entry  {
	background: transparent url(/shared/lounge/orange_bullet2.gif) no-repeat 0 6px;
	margin-bottom: 18px;
	padding: 0px;
}

.links h3 a {
	font-size: 0.9em;
}
.calendar h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-weight: bold;
	font-style: normal;
	color: #990066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #990066;
}
.calendar h3 {
	font-weight: normal;
	font-variant: small-caps;
	font-size: 1.1em;
	margin: 0;
}

.calendar h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #990066;
}
#calendar .entry {
	position: relative;
	margin-bottom: 18px;
	padding: 0;
	background: transparent url(/shared/lounge/orange_bullet2.gif) no-repeat 0 6px;
}

/* -- 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 {
	text-transform: uppercase;
	padding: 3px 8px 3px 8px;
}

/* -- section-specific image replacement -- */

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


/* -- navigation -- */
#navigation ul {
	margin: 0 0 0 0;
	text-align: center;
	height: 18px;
	border-top: dashed 1px #990066;
	border-bottom: dashed 1px #990066;
	border-right: 0px;
	border-left: 0px;
	background: url(/shared/lounge/orange_nav_bg.gif) 3px 0px no-repeat;
	

	
	}
#navigation li {
	display: inline;
	
}
#navigation li a {
	text-decoration: none;
	padding: 3px 8px 3px 8px;
	margin: 0;
	font-size: 0.9em;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	}
#navigation li a:hover {
	background: none;
}
/* ie5/mac hack \*/
#navigation li a:hover {
	background: url(/shared/lounge/orange_nav_bg.gif) 1px 1px no-repeat;
}
/* end hack */
#emailsignup {
	position: absolute;
	top: 160px;
	width: 742px;
	height:60px;
	text-align: right;
}
#banner .photo {
	top: 0px;
	voice-family: "\"}\"";
	voice-family: inherit;
	top: 0px;
}


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

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


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