/* 
	Designed by designer: Erika Meyer, Seastorm Design  -  Portland OR USA
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com May 2007 
   All styles that have been changed are indented
	
	- cleaned up navigation system, solving a problem that caused the nav to look wrong in IE6
	- fixed another IE6 problem which caused the page content to be pushed down below the h1
	- minor tweaks to the e-mail signup and the guestbook form for the sake of browser consistency
	- added margins to img and basic styling to splash page

*/


#accessibility {display:none;}

body {
	background: #999999 url(/shared/allelu/flower_red_strip.gif) repeat-y;
	padding:0px;
	margin:0px;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	voice-family: "\"}\"";
	voice-family:inherit;
}

a {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
	padding-left: 3px;
	padding-right: 3px;
	}
p {
	padding: 4px;
}	

a:visited {
	color: #666666;
	}
	
a:active {
	color: #FF0000;
	}
	
a:hover {
	color: #CC0000;
	}

img{ 
border: none;
}

blockquote {
	padding: 5px;
}

li {
	font-size: 11px;
}
/* main div positioning */

	
#banner {
	position: absolute;
	left:0px;
	top:0px;
	z-index: 1;
	width:1000px;
	height: 185px;
	padding: 0px 0px 0px 0px;
	background: url(/shared/allelu/flower_red_header.gif) 0 0 no-repeat;
	}
	
/*#container {
	position: absolute;
	left:0px;
	top:0px;
	width:800px;
	height: 800px;
	padding: 0px 0px 20px 0px;
	}*/

#navigation {
	position: absolute;
	top: 168px;
	left: 37px;
	width:143px;
	z-index: 10;
	padding: 0px;
	}	

#content {
	position: absolute;
	top: 160px;
	left: 195px;
	width:505px;
	padding: 0px 25px 15px 25px;
	z-index: 15;
	}		

			#emailsignup {
         	width: 200px;				/* NEW!! was 204px, but 200px makes Opera break the line in right spot */
         	position: absolute;
         	top: 165px;
         	left: 600px;				/* NEW!! was 537px, but this makes more space for the plain text h1 */
         	font-size: 13px;
         	z-index: 20;
         }

#footer {
	position: absolute;
	top: 700px;
	left: 50px;
	padding: 0;
	margin: 0;
	font-size: 11px;
	font-weight: bold;
	color: #333333;

}
#footer p {
	color: #333333;
	background: transparent;
	text-align: left;
	margin: 0;
	padding:0;
}
	
/* type */

#content {
 	font-size:12px;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	color: #000000;
	line-height: 1.5em;
	}
	
p {
	font-size: 12px;
	}

dl {
background: #FFFFFF;
border-bottom: 1px dotted #666666;
padding: 10px;
}

	
h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	margin: 0px;
	
}	

         h1 {
         	color: #666;
				font: bold 24px Verdana, Tahoma, serif;	/* NEW!! intended to match the old graphic header */
         /*	font-size: 26px;				 						NEW!! not needed 
         	font-weight: bold; */
         	padding: 8px 4px 0 0;						/* NEW!! was 4px 4px 4px 0px; but this works better now */
         }

h2 {
	color: #333333;
	font-size: 18px;
	font-weight: normal;
	padding: 8px 0px 4px 0px;
}

h3 {
	color: #333333;
	font-size: 16px;
	font-weight: normal;
	padding: 4px 0px 4px 0px;
}

h4 {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	padding: 3px 0px 5px 0px;
}

h5 {
	color: #333333;
	font-size: 13px;
	font-weight: normal;
	padding: 3px 0px 3px 0px;
}

h6 {
	color: #333333;
	font-size: 12px;
	font-weight: normal;
	padding: 3px 0px 3px 0px;
}

/* navigation */
	
#navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0px 0px 0px 0px;
	border: none;
	}

#navigation li {
	display: block;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-family:"Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 14px;
	}

         #navigation li a {
         	display: block;
         	padding: 5px 5px 5px 25px;
         	margin: 0;
         	color: #000000;
         	background: #FFFFFF;
         	border-top: 1px solid #FFFFFF;	
         	border-bottom: 1px solid #FFFFFF;
         	text-decoration: none;
         	width: 108px;
         	font-weight: bold;
				height: 18px;					/* NEW!! setting height makes nav more consistent across browsers */
				line-height: 18px;			/* NEW!! this automcatically vertically centers text in each block */
         	}

#navigation li a:hover {
	color: #000000;
	margin: 0;
	text-decoration: none;
	background: #DDDDDD url(/shared/allelu/bullet_red1.gif) left no-repeat;
	border-top: 1px solid #666666;	
	border-bottom: 1px solid #666666;
	}
	
html>body #navigation li a {
	width: auto;
	}	


/* classes */

.caption {
	padding: 0px 0px 5px 45px;
	font-size: 11px;
}


.date {
	font-size: smaller;
	font-style: italic;
	margin: 5px;
	}

.products img {
border: 1px solid #000000;
margin: 3px;
}

.products .entry {
border: 1px solid #666666;
margin: 2px;
}

.music .details {
	margin: 0 30px;
}
.music h2 {
	margin: 2em 40px -1em 30px;
}
.music h3 {
	margin: 2em 40px 0 40px;
}
.music .details {
	margin: 0 30px 15px 30px;
}

.calendar .details {
	border: none;
}

.entry {
	background: #FFFFFF;
	margin: 10;
	padding: 5px 20px 15px 20px;
	border-bottom: 1px dotted #666666;
	}

.artist {
	padding-left: 20px
}	
	
.details {
	background: #FFFFFF;
	padding: 15px;
	border-top: 1px dotted #666666;
	border-bottom: 1px dotted #666666;
	}	
	
.photos dt {
	padding: 5px 5px 5px 40px;
}

.photos dd {
	padding: 0px 0px 25px 0px;
}

#guestbook .entry {
	background: #FFFFFF;
	padding: 0px 15px 15px 15px;
	border-bottom: 1px dotted #666666;
	border-top: 1px dotted #666666;
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
	}

#banner .band {
	top: 0px;
	left: 42px;
	width: 763px;
	height: 140px;
	padding-top: 140px;
	font-size: 1px;
	letter-spacing: -1px;
	overflow: hidden;
	position: absolute;
	
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}

#banner .photo {
	width: 218px;
	padding-top: 600px;
	height: 600px;
	overflow: hidden;
	font-size: 1px;
	letter-spacing: -1px;
	position: absolute;
	top:178px;
	left:769px;
	
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}	


/* image replacement 

.home h1 span, .index h1 span, .list h1 span {
	background-image: url(/shared/allelu/welcome_grey.gif);
}
.calendar h1 span {
	background-image: url(/shared/allelu/calendar_grey.gif);
}

.contact h1 span {
	background-image: url(/shared/allelu/contact_grey.gif);
}

.guestbook h1 span {
	background-image: url(/shared/allelu/guestbook_grey.gif);
}

.links h1 span {
	background-image: url(/shared/allelu/links_grey.gif);
}
.music h1 span {
	background-image: url(/shared/allelu/music_grey.gif);
}
.news h1 span {
	background-image: url(/shared/allelu/news_grey.gif);
}
.photos h1 span {
	background-image: url(/shared/allelu/photos_grey.gif);
}
.press h1 span {
	background-image: url(/shared/allelu/press_grey.gif);
}
.bio h1 span {
	background-image: url(/shared/allelu/bio_grey.gif);
}
.products h1 span {
	background-image: url(/shared/allelu/store_grey.gif);
}
*/

         h1 span {
         	display: block;
         	width: 365px;			/* NEW!! now we need more space for longer titles */
         	height: 40px;
         /*	width: 180px;
         	font-size: 1px; 
         	color: #CCCCCC;
         	padding: 40px 0 0 0;
         	overflow: hidden; 
         	background-position: 0 0;
         	background-repeat: no-repeat; 
         	height: 0px !important;
         	height:   px; */
         }

/* guestbook form */

#postForm {
	text-align: left;
	background: #EEEEEE;
	border: 1px dotted #CCCCCC;
	margin: 10px 55px 30px 40px;
	width: 400px;
}
#postForm form {
	background: #EEEEEE;
	padding: 25px 20px;
	}
	
#postForm input, #postForm textarea {
	display: block;
	width: 360px;
	margin-bottom: 10px;
}
#postForm input {
	height: 15px;
}
#postForm textarea {
	height: 90px;
}
#postForm input[type="submit"] {
	width: 200px;
	height: 30px;
	margin: 10px auto;
}


			/* NEW!! These hacks fix some minor minor layout problems in IE6 only. The problem is that IE6
				doesn't understand #postForm input[type="submit"], so the only way to specifiy styling specific
				to the submit button is to specify it for all input fields and change it to something else for the
				other two input fields, which can be done because they were given unique IDs in the html of
				input#gbname and input#gbadress (note the mispelling). Yes, they are hacks, but they won't hurt
				future browsers, so they're safe. */
				
			* html #postForm input 					{width: 200px; height: 30px; margin: 10px auto;}
			* html #postForm input#gbname,
			* html #postForm input#gbadress 		{width: 360px; height: 15px; margin: 0;}

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

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