/* 
	Designed by Rob Asumendi
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April-May 2007 
   All styles that have been changed are indented

	Revision 1:	
	- major layout problems were caused by indenting each page element (e.g. p, h1, etc..) independently. now
	  all indentation is handled by padding within the #content div
	- band name block was partially covering up the nav. simply removed height declaration, problem solved
	- band photo wasn't displaying because the height on the .photo div wasn't set. now fixed.

	Revision 2:
	- massive code cleanup to eliminate messiness, redundancies
	- eliminated postion: relative; and position: absolute wherever possible. This simplifies the code and
	  helps eliminate certain bugs
	- fixed a weird bug that caused the nav text and h1 to shift up and down from page to page. For some reason,
	  lineheight: 130%; was aplied to the News page and the News page only.
	- fixed gap between #content and #footer, that was previously fudged using relative positioning to pull the
	  footer up
	- ever since padding-left: 383px; was added to the #content, we needed to shift h1 383px baclk to the left.
	  on revision 1, it ws done using position: relative, but this was clumsy and cause the horizontal scroll bar
	  to appear. now using margin-left: -383 px;. happy.
	- height added to #footer to prevent the background image from getting cut off
	- standard splash image code added
	- a few minor layout tweaks here and there
	- created new ico-speech-ltblue.gif image
	
*/



/* =========== LAYOUT =========== */


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	background: #f7fbfe url(/shared/gospel/bg_1.jpg) center top;
	text-align: center;
}
form {
	margin: 0;
}

/* main structural elements */
#accessibility {
	position: absolute;
	left: -9999px;
}
#container {
	position: relative;
	width: 809px;
	text-align: left;
	margin: 0 auto;
}

/* main content elements */

         #banner {
         	background: url(/shared/gospel/banner_bg_ltblue.jpg) no-repeat;
         	width: 809px;
         	height: 185px;
         	z-index: 1500;

         /*	position: relative; 				NEW!! removed position: relative; where it's not necessary */
         }

/* -- navigation -- */
#navigation {
	position: absolute;
	width: 809px;
	height:35px;
	top: 185px;
	background: url(/shared/gospel/navigation_bg_ltblue.jpg) no-repeat;
}

			/* NEW!! revision 2: the entire navigation has been revamped, using float: left, eliminating
				position: relative;, and adjusting padding and margins... all in the name of making it look
				pretty much hw it did before, but cleaner and more consistent across browsers and between pages */
			
         #navigation ul {
         	list-style: none;
				padding-top: 1px;
				padding-left: 24px;
				
         /*	width: 809px; */
         /*	position: relative; 				NEW!! now using normal flow and padding to control position
         	top: 7px;
         	left: 35px; */
         }

         #navigation li {
         	display: inline;
         }

         #navigation li a {
				float: left;					/* NEW!! browsers handle this more consistently than display: inline; */
				height: 35px; 
				line-height: 35px; 			/* NEW!! this centers the text vertically within the 35px */
         	padding: 0px 12px 0px 12px;
				margin-right: 5px;			/* NEW!! creates a small space between each "button" */
         	white-space: no-wrap;
				
         /*	display: inline; 					NEW!! now it's floated */ 
         /*	padding: 10px 12px 3px 12px;  NEW!! the top and bottom padding are no longer needed */
         }


			/* NEW!! revision 2: the #content div is back in the normal flow, using margins to control its own
				position and padding to control elements within. Much more reliable across browsers and no need
				for hacks. */

         #content {
				margin-top: 35px;
				padding: 0 0 0 383px;		/* NEW!! 383px... this is the right way to indent page content */
         	background: url(/shared/gospel/content_bg_ltblue.jpg) repeat-y;
				padding-bottom: 25px;

         /*	position: relative; 				NEW!! removed position: relative; it's not necessary 
         	top: 19px; */		
         }

         #content p {
         	width: 395px;
         /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
         }

         #content .entry {
         	width: 400px;
         	margin: 30px 15px 0 0;
         /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
         	clear: left;
         }

#content .entry p {
	margin-left: 0px;
}

#emailsignup {
	position: absolute;
	top: 235px;
	left: 25px;
	width: 295px;
	height: 20px;
	z-index: 999;
	border: 1px solid #3b4550;
	padding: 4px 8px 8px 8px;
}

#emailsignup span {
	display: block;
}
#emailsignup input {
	width: 80px;
	margin-left: 10px;
}


/* -- banner area -- */
               #banner .band {
               	position: absolute;
               	top: 160px;
               	left:35px;
               /*	height: 46px; 			NEW!! This serves no apparent purpose and it covers up the nav bar */
               }

               #banner .photo {
               	position: absolute;
               	top: 290px;
               	left: 58px;			/* NEW!! Changed from 52px for better visual balance */
      				height: 204px;		/* NEW!! This was missing, preventing the photo from appearing at all */
               	width: 252px;
               	z-index: 1500;
background: url(/images/larry-01.jpg) no-repeat;
               }

#banner .band span {
	font-size: 18px;
	text-transform: capitalize;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
#banner .photo span {
	display: none;
}

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


/* -- basic html elements -- */
body {
	font-family: Arial, Helvetica, sans-serif;
	font: 80%;
	color: #3b4550;
}
a {
	color: #3b4550;
	font-weight: bold;
}
a:hover {
	color: #000000;
}
h1 {
	color: #3b4550;
}
h2 {
	text-transform: uppercase;
	color: #000000;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
h3 {
	font-size: 15px;
	margin: 0 10px;
}
h4 {
	font-size: 18px;
	font-style: italic;
	margin: 2px 10px 4px 0;
	color: #3b4550;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: square;
}
p {
	line-height: 1.3;
}

/* layout tweaks */


			/* NEW!! revision 2: all this code was trying to do was to hide an unresolved bug that caused the 
				footer to be pushed down by some weird margin problems--see below */

         #footer {
				height: 65px;		/* NEW!! before the footer background graphic was getting cut off */
         	background: url(/shared/gospel/footer_ltblue.jpg) left top no-repeat;
				
         /*	position: relative;
         	top: -20px; 
       		padding-bottom: 15px;
         	clear: both; */
         }
			
			/* NEW!! These lines fix the footer gap problems--essentially a gap that appeared between the #content
				and the #footer. Very strange, considering that the problems are fairly	browser-specific */
			
			#footer p 	{margin-top: 0;}
			.home p 		{margin-bottom: 0;}	/* NEW!! fixes an IE-only gap that is only on the Home page */
			
			
         #footer p {
         	padding: 8px 0 0 383px;
         	font-size: 0.8em;
         }

/* -- emailsignup --*/
#emailsignup {
	font-size: 12px;
}

#emailsignup input {
	font-size: 10px;
}

/* -- content area -- */

.entry .name, .entry .act {
	font-weight: bold;
	font-style: normal;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #3b4550;
}
			/* NEW!! Looks better without this... 
         .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 30px;
}

/* -- section-specific style ------------------------------------------------------------------------ */

#navigation a {
	color: #3b4550;
	font-size: 11px;
	text-decoration: none;
	text-transform: capitalize;
}
#navigation a:hover {
	color: #000000;
	text-decoration: underline;
}

			/* NEW!! These used to be ".home p, .index p", but unintentionally, this affected the footer too 
         .home p #content, .index p #content {
         	margin: 0 20px 1.5em 0; 
         /*	line-height: 130%; 
         } */
			
.contact ul {
	list-style: none;
}
.contact h2 {
    letter-spacing: 5px;
}

               #postForm {
               	height: 310px;
               	margin: 0 0 35px 0;
               /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
               }

#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
}
#postForm input:focus, #postForm textarea:focus {
	color: #ffe8dd;
	background: #000000;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	position: relative;
	top: 15px;
	left: 2px;
}

#postForm label.security_code_label {
	width: 150px;
	position: relative;
	top: -35px;
	left: 120px;
}

#postForm input#security_code {
	position: relative;
	top: -35px;
	left: 120px;
	width: 172px;
}

#postForm input[type=submit] {
	text-align: center;
	position: relative;
	top: -20px;
}

.guestbook h2 {
	margin: 0 0 2px 0;
	padding: 1px 1px 1px 20px;
	letter-spacing: 0;
	font-size: 1.1em;
}
.guestbook h2 a {
	text-transform: uppercase;
	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;
}

			/* NEW!! This used to be ".guestbook p:first-letter", but unintentionally, this affected #footer too */
			.guestbook #content p:first-letter {
         	font-size: 1.2em;
			}
			
         .links h2 {
         	margin: 0 20px 10px 0;			/* NEW!! used to be left 20px. This looks better */
         }
			
         .links dl {
         	margin: 0 25px 20px 15px;		/* NEW!! used to be left 25px. This looks better */
         }
			
.links dd {
	margin-bottom: 5px;
}

					/* NEW!! This looks a little better */
					.links dd, .products dd {
						margin-left: 20px;
					}
					
               .links h3 {
               /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
               }
               
               .links h2 {
               /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
               }


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

               .music h3 {
                  text-transform: uppercase;
               	font-weight: normal;
               	margin: 5px 10px 5px 0px;	/* NEW!! was margin-left 60px all around. This looks better */
               /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
               	color: #ffe8dd;
               	font-weight: bold;
               }

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

               .music .details {
               /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
               	margin-bottom: 20px;
               }

.music .artist {
	color: #3b4550;
}
.music .artist, .music .caption {
	display: inline;
	/*text-size: 0.5em;*/
	font-size: 11px;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}

         .music #content ul {
         	width: 330px;					/* NEW!! used to be 350px. This looks better */
         	list-style-type: none;
         	border: 1px solid #000;
         	padding: 5px 10px;
         	margin: 10px 0;
         }
			
.music #content li a {
	font-weight: normal;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 0 0 10px 20px;
	background: url(/shared/gospel/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 0 0 10px 20px;
	background: url(/shared/gospel/ico-play.gif) no-repeat;
	display: block;
}

			/* NEW!! This caused the navigation and h1 to become messed up 
         .news {
         	line-height: 130%;
         }*/


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

               .photos dl {
               	margin: 0 20px;
               /*	margin-left: 383px; */		/* NEW!! content padding now replaces all of these 383px margins */
               	padding: 0;
               }

         .photos dt {
         	width: 400px;
         	padding: 5px 5px 5px 0;		/* NEW!! used to be 5px all around. This looks better */
         	margin: 20px 0 1px 0;
         }
.photos dd {
	margin: 0;
	padding: 0;
}
.photos img {
	max-width: 350px;
}
.press h2 {
	margin-left: 20px;
	margin-right: 20px;
	letter-spacing: 5px;
}
.press .caption {
	margin: 0 40px 15px 40px;
	padding: 0 5px 0 35px;
	height: 25px;
	background: url(/shared/gospel/ico-speech-ltblue.gif) no-repeat;
	color: #3b4550;
}

.links h3 a {
	font-size: 0.9em;
}
.calendar h2 {
	font-size: 1.1em;
	text-transform:uppercase;
	font-style: normal;
	color: #000000;
}
.calendar h2 a {
    font-weight:normal;
}
.calendar h3 {
	font-weight: normal;
	font-variant: small-caps;
	font-size: 1.1em;
	margin: 0;
}

         /* -- 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: 5px 12px 3px 12px; 	NEW!! now we're only changing the left and right from 12px to 11px */
         	padding: 0px 11px 0px 11px;

         }

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

			/* NEW!! revamped for revision 2: now using margin-left to shift entire h1 div left so that it
				touches the left wall of #content and spans the entire width. This is necessary so the
				background image is visible. Rev 1 used position: relative; but this caused a horizontal scroll
				bar to appear and had to be hacked fir IE6. This is better. */
			
         h1 {
				margin-left: -383px;					/* NEW!! shifts entire h1 left, making up for #content padding */
         	padding: 15px 15px 0 383px;		/* NEW!! 383px aligns the h1 text with other stuff in #content */
         	height: 94px;
         	font-size: 24px;
				background: url(/shared/gospel/content_header_bg_ltblue.jpg) no-repeat; 	/* NEW!! cleaner code */
          }


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

			
			/* NEW!! standard hostbaby splash code */

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