/* 
	Designed by http://www.michelle-walker.co.uk/
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007 
   All styles that have been changed are indented

	Revision 1:		
	- in IE7, the footer background was not displaying it's full width (i.e. it looked funny). Fixed.
	- fixed design flaw in nav by making each tab 4px narrower. previously they were spilling into the next line
	
	Revision 2:
	- fixed problem with h1 positioning: everything looked great in IE but the h1 was too low in FF & Opera. it
	  turned out that the margins for h1 had not been set, and that IE was collapsing the top margin, as it likes
	  to do for some reason. solved by setting margin-top: 0;
	- fixed appearance of #navigation for Opera, which seemed to be mostly due to a discrepancy in text size
	  using percentages. now it's set to font-size: 11px;. yes you can't change the size in IE, but this is
	  unlikely to be a problem for the nav bar
	- massive code cleanup; nearly half of the original code didn't do anything at all. eliminated many
	  redundancies and simplified positioning. 
	- 150 lines of redundant code were pruned from the file for the sake of clarity. For reference, a master
	  version of the revised leaves-darkboots.css with the unnecessary code commented out can be found in the
	  /shared/leaves/ directory. Filename: leaves-darkboots - revision 2 master - readme.txt

	Revision 3:

	TEST - gave hasLayout to #container in the hopes that it will fix an IE-only #footer bug. We shall see...
	
*/


/*Base HTML Formatting*/

body {
	padding: 0;
	margin: 0 auto;
	width: 800px;
	font: 80% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #FFFF99;
	background: #804000;
}

			/* NEW!! Now setting this globally so we can lighten the code later on */
			
			div {
				margin: 0;
				padding: 0;
			}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

form {
	margin: 0;
}

h3 a {
	color: #804000;
}

h3 a:hover {
	color: #ff9;
}

/*Main Stucture*/
#accessibility {
	position: absolute;
	left: -9999px;
}

#container {
   position: relative;
   text-align: left;
   background: #804000 url(/shared/leaves/1cont_bg.jpg) 0 0 repeat-y;
}








			/* NEW!! These lines will give the #container layout. Hopefully these will fix the problem with the
				#footer jumping around. */
				
			#container {
				display: inline-block;
				}
			
			#container {
				display: block;
				}

				
				
				
				
				
				
				
/* Banner Section */

         #banner {
         	position: absolute;
         	top: 0;
         	width: 800px;
         	height: 372px;
         	background: #804000 url(/shared/leaves/1banner_road.jpg) 0 0 no-repeat;
         	z-index: 1;
         /*	padding: 0; 			NEW!! This does nothing, so goodbye */
         }

.photo {
	position: absolute;
	top: 49px;
	left: 574px;
	width: 161px;
	height: 161px;
background: transparent url(/images/verysmallpicwithcharis-161x161.jpg) 0 0 no-repeat;
	z-index: 2;
}

.band {
	position: absolute;
	top: 101px;
	left: 62px;
	width: 340px;
	height: 88px;
	z-index: 2;
}

#banner .band span {
	display: none;
}

#banner .photo span {
	display: none;
}

/* Navigation Section */
            #navigation {
            	position: absolute;
            	top: 280px;
					left: 25px;
            	width: 780px;
					height: 23px;			/* NEW!! */
					font-size: 11px; 		/* NEW!! was 0.85em; but this is more consistent */
            	z-index:3;
            }
				
         #navigation li {
         	display: inline;
         }

         #navigation a {
         	float:left;
         	background:#804000 url(/shared/leaves/1nav1_new.jpg) no-repeat left bottom;
         	margin:0 0 0 -1px;
         	padding:0 0 0 9px;
         	text-decoration: none;
         /*	cursor: pointer;		NEW!! This does nothing, so goodbye */
         }

            #navigation a span {
            /*	float: left; 		NEW!! This does nothing, so goodbye */
            	display: block;
            	background:#804000 url(/shared/leaves/1nav2_new.jpg) no-repeat right bottom;
            	padding: 5px 12px 9px 3px;	/* NEW!! was padding: 5px 14px 9px 5px; before, but it spilled over */
            	color:#ffff99;
					font: bold 11px Georgia, Times, serif;
            	line-height: 23px; 	/* NEW!! was 2.1em; which is equivalent. Moved from #navigation */
            }

#navigation a:hover {
	background: #804000 url(/shared/leaves/1nav1_new.jpg) no-repeat left bottom;
	background-position: -9px 100%;
}

#navigation a:hover span {
	background: #804000 url(/shared/leaves/1nav1_new.jpg) no-repeat right bottom;
}

         .home #navhome, .home #navhome:hover,
         .bio #navbio, .bio #navbio:hover,
         .music #navmusic, .music #navmusic:hover ,
         .contact #navcontact, .contact #navcontact:hover,
         .press #navpress, .press #navpress:hover,
         .news #navnews, .news #navnews:hover,
         .calendar #navcalendar, .calendar #navcalendar:hover,
         .photos #navphotos, .photos #navphotos:hover,
         .products #navproducts, .products #navproducts:hover,
         .guestbook #navguestbook, .guestbook #navguestbook:hover,
         .links #navlinks, .links #navlinks:hover {
         	background:#804000 url(/shared/leaves/1nav1_new.jpg) no-repeat left bottom;
         	background-position: -21px 100%;
				margin:0 0 0 -1px;
         	padding:0 0 0 9px;
         /*	float:left;		NEW!! This does nothing, so goodbye */
         /*	text-decoration: none;		NEW!! This does nothing, so goodbye */
         /*	cursor: pointer; 		NEW!! This does nothing, so goodbye */
         }

            .home #navhome span, .home #navhome:hover span,
            .bio #navbio span, .bio #navbio:hover span,
            .music #navmusic span, .music #navmusic:hover span,
            .contact #navcontact span, .contact #navcontact:hover span,
            .press #navpress span, .press #navpress:hover span,
            .news #navnews span, .news #navnews:hover span,
            .calendar #navcalendar span, .calendar #navcalendar:hover span,
            .photos #navphotos span, .photos #navphotos:hover span,
            .products #navproducts span, .products #navproducts:hover span,
            .guestbook #navguestbook span, .guestbook #navguestbook:hover span,
            .links #navlinks span, .links #navlinks:hover span {
            	background:#804000 url(/shared/leaves/1nav2s_new.jpg) no-repeat right bottom;
            	padding:5px 14px 9px 5px;	/* NEW!! was padding: 5px 14px 9px 5px; before, but it spilled over */
            }

/* email signup */

         #emailsignup {
         	position: absolute;
         /*	margin: 0; 		NEW!! This does nothing, so goodbye */
         	top: 249px;
         	left: 425px;
         	width: 400px;
         	font: 100% Georgia, Times, serif;
         	z-index: 2;
         }

/*for IE only */
#emailsignup input {
	position: relative;
	left: 95px;
	margin: 0 6px 0 0;
	background: #B4965A url(/shared/leaves/1form_bg_small.jpg) no-repeat;
	background-position: center;
	border: 2px #B4955A solid;
	color: #804000;
	text-align: center;
	font: 90% Georgia, Times, serif;
	z-index: 3;
}

#emailsignup input[name="list_email"]{
	position: relative;
	left: 78px;
	width: 75px;
	background: #B4965A url(/shared/leaves/1indent_bg.jpg) no-repeat;
	color: #804000;
	border: 0;
	text-align: center;
	font: 95% Georgia, Times, serif;
	padding: 5px 15px 6px 10px;
	top: -2px;
	z-index: 3;
}

#emailsignup input[name="list_submit"]{
	position: relative;
	padding: 5px 0 5px 0;
	background: #B4965A url(/shared/leaves/1button_small.jpg) no-repeat;
	width: 49px;
	border: 0;
	left: 71px;
	color: #FFFF99;
	text-transform: capitalize;
	font: 100% Georgia, Times, serif;
	z-index: 3;
}

#emailsignup input[name="list_submit"]:hover {
	color: #804000;
}

/* Content Section */

         #content {
         /*	position: relative; 
         	margin-top: 35px;
         	top: -36px; */
         	padding: 370px 60px 23px 60px;   
         	width: 680px;
         }

         #content p {
         	font: 100% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
				margin-top: 1em;			/* NEW!! improves consistency between browsers (based on FF defaults) */
				margin-bottom: 1em;		/* NEW!! improves consistency between browsers (based on FF defaults) */
         }

/* Page Heading Graphics*/

         #content h1 {
				margin-top: 0;		/* NEW!! a major oversight, this puts the h1 in the same place for all browsers */
				margin-left: -5px;	/* NEW!! this makes up for left: -5px; */
         	height: 77px;
         	background: url(/shared/leaves/leaves_only_light.jpg) top left no-repeat;
         }


#content h1 span {
	display: none;
}

.home #content h1 {
	background: url(/shared/leaves/1home.jpg) top left no-repeat;
}

.bio #content h1 {
	background: url(/shared/leaves/1bio.jpg) top left no-repeat;
}

.music #content h1 {
	background: url(/shared/leaves/1music.jpg) top left no-repeat;
}

.contact #content h1 {
	background: url(/shared/leaves/1contact.jpg) top left no-repeat;
}

.press #content h1 {
	background: url(/shared/leaves/1press.jpg) top left no-repeat;
}

.news #content h1 {
	background: url(/shared/leaves/1news.jpg) top left no-repeat;
}

.calendar #content h1 {
	background: url(/shared/leaves/1calendar.jpg) top left no-repeat;
}

.photos #content h1 {
	background: url(/shared/leaves/1photos.jpg) top left no-repeat;
}

.products #content h1 {
	background: url(/shared/leaves/1store.jpg) top left no-repeat;
}

.guestbook #content h1 {
	background: url(/shared/leaves/1guestbook.jpg) top left no-repeat;
}

.links #content h1 {
	background: url(/shared/leaves/1links.jpg) top left no-repeat;
}

/* Home Page Specific */

         .home .entry h2,
         .news .entry h2 {
         	color: #804000;
         	font: 210% Georgia, Times, serif;
         	padding: 10px 0 0 80px;
         /*	height: 46px; 			NEW!! removing this improves appearance on home pages with calendars */
         	width: 600px;
         	margin-left: 0px;
         	text-align: left;
         	background: url(/shared/leaves/1leaves.jpg) no-repeat;
         }

			/* NEW!! basic styling for the calendar when it appears on the home page */
			.home #calendar h3,
			.home #calendar .details,
			.home #calendar p {
				margin-left: 80px;
				}
			
.date {
	display: block;
	color: #C2A97A;
	font: 60% Georgia, Times, serif;
	font-weight: bold;
}

.news .notes {
	margin-left: 40px;
}

.notes,
.bio .entry p {
	font: 105% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	margin-left: 15px;
	width: 630px;
	padding-bottom: 10px;
}

/*=========Music Page==========*/
.music #content h2 {
	display: block;
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin:20px 0px 20px 10px;
	padding:0;
}

.music h3 {
	color: #804000;
	font: 160% Georgia, Times, serif;
	width: 500px;
	text-align: left;
	background: url(/shared/leaves/1music_note.jpg) no-repeat;
	padding: 15px 0 10px 50px;
	margin: 0 0 0 50px;
}

/*
.music h3 a {
	color: #FE6600;
}
*/

blockquote, .artist, .caption {
	width: 450px;
	font: 95% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	margin-left: 133px;
}

.details ul {
	margin-left: 160px;
/*	height: 60px; */
	width: 470px;
	margin-top: 5px;
	padding-bottom: 12px;
	background: url(/shared/leaves/1mp3_420x130.jpg) no-repeat;
	border: 1px #804000 solid;
}

.details li a {
	position: relative;
	display: block;
	top: 6px;
	margin-left: 100px;
	color: #FFFF99;
	font: 110% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-weight: bold;
	text-decoration: none;
	width: 340px;
	padding: 2px;
}

.details li a:hover {
	color: #C2A97A;
}

/*========= Contact Page ===========*/
.entry h2{
	margin-left: 15px;
	color: #804000;
	font: 170% Georgia, Times, serif;
	/*font-weight: bold;*/
}

.entry .name {
	margin-left: 45px;
	color: #FFFF99;
	font: 130% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-weight: bold;
}

.entry li {
	margin-left: 45px;
	color: #FFFF99;
	font: 100% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-weight: bold;
}

.entry a {
	color: #804000;
	font: 110% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-weight: bold;
}

/* Guestbook Specific */

			/* NEW!! */
			
         #postForm {
         	float: right;
         	width: 240px;
				margin: -20px 0 0 0; 		/* NEW!! was margin: 0; this makes up for top: -20px; */
         }

#postForm input, textarea {
	background: #B4965A url(/shared/leaves/1form_bg.jpg) 0 0 repeat-y;
	width: 240px;
	margin: 4px 4px 4px 0;
	border: 2px #B4965A solid;
	padding: 2px 0 0 4px;
	font: 105% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #FBF8BB;
	font-weight: bold;
}

#postForm input[type="submit"]{
	background: url(/shared/leaves/1button_long.jpg) no-repeat;
	border:0;
	font: 105% Georgia, Times, serif;
	font-weight: bold;
	color: #FFFF99;
	margin: 5px;
	padding:4px 0 10px 0;
}

#postForm input[type="text"], textarea {
	background: #B4965A url(/shared/leaves/1form_bg.jpg) 0 0 repeat-y;
	border: 2px #B4965A solid;
	font: 105% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #FBF8BB;
}

#postForm input[type="submit"]:hover {
	color: #C2A97A;
}

#postForm label {
	display: block;
	font: 105% Georgia, Times, serif;
	font-weight: bold;
	color: #FFFF99;
	padding-left: 5px;
}

#guestbook {
	float: left;
	display: inline;
	margin-left: -6px;
	width: 425px;
	padding-bottom: 5px;
}

#guestbook .entry {
	width: 425px;
	background: #987C45 url(/shared/leaves/1comment.jpg) no-repeat;
	border: 1px #B4955A solid;
	margin-bottom: 5px;
}

#guestbook h2 {
	font: 95% Georgia, Times, serif;
	font-weight: bold;
	color: #FFFF99;
	width: 325px;
	padding-left:60px;
	padding-top: 15px;
	margin-bottom: 1px;
}

#guestbook h3 {
	width: 369px;
	font: 75% Georgia, Times, serif;
	font-weight: bold;
	color: #804000;
	text-align :right;
	margin-left: 25px;
	margin-top: 2px;
}

#guestbook blockquote {
	width: 325px;
	background: #B4965A url(/shared/leaves/1quote.jpg) no-repeat;
	padding: 15px 15px 15px 30px;
	border: 1px #876E3D solid;
	margin: 0px 5px 25px 25px;
	color: #804000;	
}

/* Photo Page Specific */
.photos #content h2 {
	display: block;
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin:20px 0px 20px 10px;
	padding:0;
}

.photos dt {
	text-align: center;
	width: 720px;
	font: 100% Georgia, Times, serif;
	color: #FFFF99;
	margin: 20px 0 5px -20px;
}

.photos dd {
	width: 720px;
	text-align: center;
	margin-left: -20px;
}

.photos img {
	border: 6px #804000 double;
}

/* =========== Calendar Page =============== */
#calendar {
	padding-bottom: 2px;
}

.calendar .entry .price {
	color: #FFFF99;
	font: 130% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	margin: 0 0 0 150px;
}

.calendar .entry {
	background: url(/shared/leaves/1calendar_bg.jpg) no-repeat;
	display: block;
	width: 600px;
	border: 1px #804000 solid;
	margin:0 0 5px 40px;
}

.calendar .entry h2 {
	display: block;
	width: 400px;
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin: 15px 0 0 80px;
	font-weight: bold;
}

.calendar .entry h3 {
	color: #FFFF99;
	width: 420px;
	font: 160% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-weight: bold;
	margin: 15px 0 0 150px;
}

.calendar .entry h4 {
	position: relative;
	/*top: 23px;*/
	width: 420px;
	color: #FFFF99;
	font: 140% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	margin: 0 0 0 150px;
	padding: 15px 0 0 0; /* amended 31/05/05 */
}

.calendar .entry p {
	color: #804000;
	width: 420px;
	font: 140% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-weight: bold;
	margin: 0 0 0 150px;
	padding-bottom: 10px;
}

.calendar .entry address {
	position: relative;
	color: #FFFF99;
	font: 130% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	margin: 0 0 0 150px;
}

/* Press */
.press #content h2 {
	display: block;
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin:20px 0px 20px 10px;
	padding:0;
}

.press .entry blockquote {
	font: 105% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	margin-left: 25px;
	width: 580px;
	padding: 10px 0 10px 30px;
	background: url(/shared/leaves/1press_quote.jpg) no-repeat;
}

.press .entry .caption {
	font: 125% Georgia, Times, serif;
	color: #804000;
	text-align:  right;
	margin-top: -15px;
	margin-left: 25px;
	width: 580px;
	padding-left: 30px;
	padding-bottom: 10px;
}

.press .entry .caption a {
	font: 100% Georgia, Times, serif;
	color: #804000;
	margin-left: 2px;
	width: 580px;
	padding-left: 30px;
	padding-bottom: 10px;
}

.press .entry .caption a:hover {
	color: #C2A97A;
}

/* Links */
.links #content h2 {
	display: block;
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin:0 0 0 25px;
	padding:0;
}

         .links #content dl a {
         	font: 100% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
         	color: #FFFF99;
         	margin: 0 0 0 60px;
         	padding: 0;
         /*	text-decoration: none; 		NEW!! Better to have underlines for usability reasons */
         	padding: 0;
         }

.links #content a h2 {
	font: 135% "Lucida Grande",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif;
	color: #804000;
	margin: 0 0 0 60px;
	text-decoration: none;
	text-align: left;
	padding: 0 0 15px 0;
}

.links #content a:hover  {
	color: #804000;
}

.links #content a:hover h2 {
	color: #B19354;
}

.links dd {
	margin: 10px 0px 10px 133px;
	color: #FFFF99;
	width: 500px;
}

/* products */
.products #content h2 {
	display: block;
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin:20px 0px 20px 10px;
	padding:0;
}

.products .entry {
	width: 400px;
}

.products .entry  h2 {
	color: #804000;
	font: 155% Georgia, Times, serif;
	margin-left: -25px;
}

.products #content h3 {
	color: #FFFF99;
	font: 155% Georgia, Times, serif;
	margin-left: 55px;
}

.products dt a {
	margin: 10px 0px 0px 133px;
	color: #FFFF99;
}

         .products dd {
         	margin: 7px 0px 10px 200px;		/* NEW!! margins adjusted for visual clarity */
         /*	margin: 10px 0px 0px 133px; */
         	color: #FFFF99;
         }

         #footer {
         /*	position: relative; 		NEW!! this doesn't do anything */
         	clear: both; 
         	height: 64px;
         	width: 860px;			/* NEW!! fixes background problem in IE7. 860px matches #content width */
         	font-weight: normal;
         	font-size: 100%;
         	margin-top: 10px;
         	background: #804000 url(/shared/leaves/1cont_foot.jpg) 0 0 no-repeat;
         	z-index: 4;
         }

#footer p {
	font-weight: normal;
	font-size: 100%;
	padding-top: 10px;
	margin-left: 60px;
}

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