/* 
	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.
	- seveeral minor visual tweaks that were unique to this variation. these largely revolved around correcting
	  the background images, which appeared uneven before. changes were made to image placement, and to the
	  images themselves, using photoshop.
	
*/


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	text-align: center;
	background: #97A678 url(/shared/lounge/olivediscobg.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: 747px;				/* NEW!! minor visual tweak. This was 744px before. */
         	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/croppiano-750x136-01.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: #fff;
	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: #FFFFFF;
	margin:0;
	padding: 0;
}
a {
	color: #330066;
	font-weight: bold;
	border-bottom:dashed 1px #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #BDCC66;
	border-bottom:dashed 1px #FFFFFF;
	
}

         h1 {
         	background: url(/shared/lounge/ppl_headerbg.gif) 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: #FFFFFF;
         	text-align: left;
         	height: 35px;
         	padding: 0px 3px 0 0 ;
         	font-weight: bold;
         	}
				
h2 {
	color: #330066;
	font-weight: normal;
	font-style: italic;
	font-size: 1.3em;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}

         h3 {
         	color: #330066;
         	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; */
         }

			
			/* NEW!! Tweaked the background image using Photoshop. Before, the black stripes were uneven, but it
				looks better now. */
			
         #container {
         	background: #8A66CC url(/shared/lounge/middlebg2_ppl-revised.gif) center bottom repeat-y;	/* NEW! */
         	width: 750px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	width: 750px;
         	padding: 0px;
         }
			
			
			/* NEW!! Tweaked the background image using Photoshop. Before, the black stripes were uneven, but it
				looks better now (also moved background image further to right--changed 3px to 4px). */

         #footer {
            width: 746px;					/* NEW!! minor visual tweak. Was 743px */
         	margin: 6em 0 0 0;
            padding-bottom: 20px;
            text-align: center;
         	clear: both;
         	background: url(/shared/lounge/ppl_headerbg-revised.gif) 4px 0px no-repeat;	/* NEW!! */
         }

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

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

         /* -- 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: #BDCC66;
}
.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/ppl_bullet3.gif) no-repeat 0px 50%;
}

/* -- section-specific style -- */
#navigation a {
    color: #330066;
}
#navigation a:hover {
    color: #464D1A;
}

         .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/ppl_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: #330066;
	=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: #BDCC66;
}
.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(/shared/lounge/record_ico.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 0 0 10px 20px;
	background: url(/shared/lounge/record_ico.gif) 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/ppl_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: #330066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #FFFFFF;
}

.news .entry  {
	background: transparent url(/shared/lounge/ppl_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: #330066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #FFFFFF;
}

.bio .entry  {
	background: transparent url(/shared/lounge/ppl_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: #330066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #FFFFFF;
}

.guestbook .entry  {
	background: transparent url(/shared/lounge/ppl_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: #330066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #FFFFFF;
}

.entry  {
	background: transparent url(/shared/lounge/ppl_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: #330066;
	margin: 0 0 6px 0;
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #FFFFFF;
}
.calendar h3 {
	font-weight: normal;
	font-variant: small-caps;
	font-size: 1.1em;
	margin: 0;
}

#calendar .entry {
	position: relative;
	margin-bottom: 18px;
	padding: 0;
	background: transparent url(/shared/lounge/ppl_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 -- */

			/* NEW!! Tweaked the background image using Photoshop. Before, the black stripes were uneven, but it
				looks better now. */
			
         #navigation ul {
         	margin: 0 0 0 0;
         	text-align: center;
         	height: 18px;
         	border-top: dashed 1px #FFFFFF;
         	border-bottom: dashed 1px #FFFFFF;
         	border-right: 0px;
         	border-left: 0px;
         	background: url(/shared/lounge/ppl_nav_bg-revised.gif) 4px 0px no-repeat;		/* NEW!! */
         	}
         	
#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/ppl_darknav2.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; }