/* 
	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/cross_black_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;
	}

a:visited {
	color: #666666;
	}
	
a:active {
	color: #FF3333;
	}
	
a:hover {
	color: #0000FF;
	}

img{ 
border: none;
}

blockquote {
	padding: 5px;
}

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

	
#banner {
	position: absolute;
	left:0px;
	top:0px;
	width:1000px;
	height: 168px;
	padding: 0px 0px 0px 0px;
	background: url(/shared/allelu/cross_black_header.gif) 0 0 no-repeat;
	}
	
/*#container {
	position: relative;	
	width: 1000px;
	text-align: left;
	margin: 0 auto;
	}*/


			/* NEW!! The navigation section used to have bus in IE6. In the process of fixing it, it was easier to
				clean up and simplify the whole #navigation, ul, li, and li a entries. Now the #navigation div is
				sized and positioned correctly and any unnecessary margins or padding have been removed */
				
         #navigation {
         	position: absolute;
         	top: 168px;
         	left: 39px;
         /*	width:185px;
         	padding: 0px 5px 5px 4px; */
				width: 140px;
         	}	

#content {
	position: absolute;
	top: 168px;
	left: 195px;
	width:505px;
	padding: 15px 25px 15px 25px;

	}		

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

#footer {
	position: absolute;
	top: 700px;
	left: 50px;
	padding: 0;
	margin: 0;
	font-size: 11px;
	font-weight: bold;
	color: #333333;
}
#footer p {
	color: #333333;
	text-align: left;
	margin: 0;
	padding:0;
}
	
/* type */

#content {
 	font-size:12px;
	font-family:  Arial, Verdana, sans-serif;
	color: #000000;
	line-height: 1.5em;
	}
	
h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	margin: 0px;
	
}	

/*
h1 {
	color: #333333;
	border-bottom: 1px dotted #333333;
	font-size: 26px;
	font-weight: bold;
	padding: 10px 0px 6px 0px;
}	
	
h1 {
	color: #333333;
	height: 38px;
	padding: 5px 0 0 5px;
	margin: 10px 0 30px 0;
}
*/
         h1 {
         	color: black;
				font: italic bold 27px Georgia, Times, serif;	/* NEW!! intended to match the old graphic header */
         /*	font-size: 26px;				 						NEW!! not needed 
         	font-weight: bold; */
         	padding: 7px 4px 1px 0px;						/* 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: 0;						/* NEW!! padding-bottom was 30px, but this did nothing at all */
         	border: none;
         	}

         #navigation li {
         	display: block;
         	margin: 0;
         	padding: 0; 					/* NEW!! padding-left was 35px, but now #navigation pushs it over */
         	font-family:"Trebuchet MS", Arial, Verdana, sans-serif;
         	font-size: 14px;
         	}

         #navigation li a {
         	display: block;
				height: 28px;					/* NEW!! setting height solve many problems, especially in IE6 */
				line-height: 28px;			/* NEW!! this automcatically vertically centers text in each block */
				padding-left: 15px;
         /*	padding: 5px 5px 5px 15px; 	NEW!! no need for all this padding anymore */
         	color: #000000;
         	background: #CCCCCC;
         	border-top: 1px solid #CCCCCC;	
         	border-bottom: 1px solid #CCCCCC;
         	text-decoration: none;
         /*	width: 115px; 						NEW!! width is now set by the #navigation div */
         	font-weight: bold;
         	}

#navigation li a:hover {
	color: #000000;
	text-decoration: none;
	background: #EEEEEE;
	border-top: 1px solid #999999;	
	border-bottom: 1px solid #999999;
	}
	
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;
	}
		
.index #content p, .home #content p, .links dl, .links h2, .photos dl, .photos h2, .press h2 {
	margin: 1em 20px;
}

.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: #EEEEEE;
	padding: 15px;
	border-bottom: 1px dotted #666666;
	}

.artist {
	padding-left: 20px
}	
	
.details {
	background: #EEEEEE;
	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: #EEEEEE;
	padding: 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: 222px;
	width: 760px;
	height: 138px;
	padding-top: 138px;
	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:158px;
	left:770px;
	
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 0;
}	


/* image replacement 

.home h1 span, .index h1 span, .list h1 span {
	background-image: url(/shared/allelu/welcome.gif);
}
.calendar h1 span {
	background-image: url(/shared/allelu/calendar.gif);
}
.guestbook h1 span {
	background-image: url(/shared/allelu/guestbook.gif);
}
.contact h1 span {
	background-image: url(/shared/allelu/contact.gif);
}
.links h1 span {
	background-image: url(/shared/allelu/links.gif);
}
.music h1 span {
	background-image: url(/shared/allelu/music.gif);
}
.news h1 span {
	background-image: url(/shared/allelu/news.gif);
}
.photos h1 span {
	background-image: url(/shared/allelu/photos.gif);
}
.press h1 span {
	background-image: url(/shared/allelu/press.gif);
}
.bio h1 span {
	background-image: url(/shared/allelu/bio.gif);
}
.products h1 span {
	background-image: url(/shared/allelu/store.gif);
}
*/

			/* NEW!! See the two declarations commented out below? Removing these solved a display problem
				in IE6, yet they didn't seem to serve a purpose in the first place. Simple fixes are good! 
				
         h1 span {
         	display: block;
         	width: 180;
         	font-size: 1px;
         	color: #CCCCCC;
         /*	padding: 50px 0 0 0; 
         	overflow: hidden;
         	background-position: 0 0;
         	background-repeat: no-repeat;
         /*	height: 0px !important; 
         	height: 57px;
         }*/

         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: #999999;
	border: 2px solid #666666;
	margin: 10px 55px 30px 40px;
	width: 400px;
}
#postForm form {
	background: #999999;
	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;
	text-align: center;
	display: block;
	clear: both;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	float: left;
}

#postForm input#security_code {
	display: inline;
	float: left;
	width: 220px;
	height: 15px;
	margin-left: 30px;
}

label.security_code_label {
	float: left;
	margin-left: 30px;
}

			/* 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#gbaddress (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#gbaddress 		{width: 360px; height: 15px; margin: 0;}

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

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