/*
---------------------------
Hostbaby Wizard Template Design
author: Dave Kobrenski/BBM Designs
http://www.bbmdesigns.com
version: "Spring - version 2" 24 may 2005
---------------------------

	New variations by Andrew Tay (www.andrewtay.com) for HostBaby.com May 2007 
	
	- added new versions of each template, featuring plain text headers
	
	UPDATED FOR HOSTBABY WIZARD 2.0 (pre-release)
	Revised by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2009
	All styles that have been changed are indented. New stuff for 2.0 update is marked as "TWO!!"
	
	- repositioned #emailsignup so that it now floats directly below the band photo. previously, it had been
	  positioned near the bottom of the page, which meant it was hidden from view on long pages
	- now using new dynamically-added .highlight class to select active #navigation link
	- replaced all Tantek hacks with ultra-safe box model hacks
	- adjusted line spacing in nav to work better with long link names (better visual grouping for links
	  that spill onto multiple lines
	- cleaned up file, removing several comments from template revision process in 2007-2008
	  
*/


body {
	background: #E8DCC7 url(/shared/spring/bck.jpg) repeat-y left top;
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
	font-size: 13px;
	line-height: 1.6em;
	text-align: left;
}

/* Accessibility -------------------------- */

#accessibility {
	position: absolute;
	left: -9999px;
}

/* Main Structure -------------------------- */

#container {
	background: transparent url(/shared/spring/head.jpg) no-repeat center top;
	width: 900px;
	margin: 0;
	text-align: left;
	padding-top: 1px;
	position: relative;
}

#navigation {
	float: left;
	width: 185px;
	margin: 0 0 0 85px;
	display: inline;
	padding-top: 230px;
}

			/* TWO!! Layout change: #emailsignup now floats in the navigation column below the band photo, instead
				of being positioned at the bottom of the page. Main advantage is that it's more visible, especially
				on long pages. */

			#emailsignup {
				/* used positioning cuz IE sux */
			/*	position: absolute;	TWO!! IE may suk, but it's actually possible to get floats to work. See below:
				bottom: 0px;			TWO!!
				left: 85px;				TWO!! */
				/* below was better solution in everything but IE
				------------------
				float: right;
				clear: right; 
				display: inline;
				margin: 12px 85px 10px 0;
				------------------*/
				text-align: center;
				line-height: 1.9em;
				font-weight: bold;
				padding: 8px;
				border: 1px solid #853833;
				border-left: none;
				border-right: none;
				background-color: transparent;
				width: 169px;
				height: 65px;			/* TWO!! */
				float: left;			/* TWO!! now putting it so it automatically sits below band .photo */
				clear: left;			/* TWO!! */
				margin: 0 0 0 85px; 	/* TWO!! */
				display: inline;		/* TWO!! prevents IE doubled margin float bug */
				position: relative;	/* TWO!! this swaps position with the band .photo */
				top: 210px;				/* TWO!! this swaps position with the band .photo */
			}

			/* TWO!! An ultra-safe hack for IE6 and IE5 only, combining the * html hack and the underscore hack. 
				The * html makes sure that only IE5/6 see any of this (and the underscores act as a backup). The
				backslashes pass real values to IE6 that override the fake values for IE5. */
			* html #emailsignup { 		
				_width: 185px;			/* fake width for IE5win only = real width + padding + border */
				_w\idth: 169px;
			}

#banner {
	margin: 87px 0 0 71px; 
	padding: 1px;
	padding-left: 14px;
	line-height: 53px;
}

			/* TWO!! Layout change: #emailsignup now floats in the navigation column below the band photo, instead
				of being positioned at the bottom of the page. Main advantage is that it's more visible, especially
				on long pages. */
				
			.photo {
				position: relative; 	/* TWO!! this swaps position with #emailsignup */
				top: -83px;				/* TWO!! this swaps position with #emailsignup */
				float: left;
				clear: left;
				display: inline;
				font-size: 12px;
				line-height: 14px;
				text-align: center;
				margin: 12px 0 90px 0;
				padding: 10px 8px;
				border: 1px solid #853833;
				border-left: none;
				border-right: none;
				width: 168px;
			}
			
			/* TWO!! An ultra-safe hack for IE6 and IE5 only, combining the * html hack and the underscore hack. */
			* html .photo { 		
				_width: 183px;			/* fake width for IE5win only = real width + padding + border */
				_w\idth: 168px;
			}

.photo span {
	/* this span acts as the caption for the photo */
	/* IMPORTANT: below needs to be the actual height of the photo, PLUS 12px. */
	margin-top: 137px;	
	font-style: italic;
	display: block;	
}

.band {
	font-size: 28px;
	color: #fff;	
	font-weight: bold;
	padding-left: 169px;
	letter-spacing: 1px;
}

#content {
	margin: 0 0 0 284px;
	padding: 0 14px 0 0;
	width: 456px;
}
			/* TWO!! An ultra-safe hack for IE6 and IE5 only, combining the * html hack and the underscore hack. */
			* html #content { 		
				_width: 470px;			/* fake width for IE5win only = real width + padding + border */
				_w\idth: 456px;
			}

				
#footer {
	margin: 20px 155px 0 290px;
	padding: 5px 0 0 0;
	border-top: 1px solid #C8BBA4;
	clear: left;
}

#footer p {
	color: #999;
	font-size: 12px;
	margin: 0;
	padding: 0;
}

/* Navigation Links --------------------------- */

#navigation li {
	padding-top: 1px;
	padding-bottom: 1px;
	margin: 0;
}

#navigation ul, #navigation li {
	position: relative;
}
			
			/* TWO!! Decreased line-height so that long link names look more coherent (as far as appearance goes,
				this only affects links that spill onto multiple lines. */
				
			#navigation li a {
				display: block;	
				line-height: 20px;					/* NEW!! was line-height: 24px; */
				margin: 0;
				padding: 3px 8px 3px 22px;			/* NEW!! was padding: 1px 8px 1px 22px; */
				height: 1em;
				color: #fff;
			}

html>body #navigation li a {
	height: auto;
}

#navigation li a:hover {
	background-color: #C56D4D;
	text-decoration: none;
}

/* Active Navigation Links --------------------------- */

			/* TWO!! Now using .highlight class (which is added dynamically) to highlight current page */

			.highlight {
				background-color: #EAAB72;
				text-transform: uppercase;
				font-weight: bold;
				color: #963F3A;
			}

/* Basic HTML ----------------------------- */

div, h1, h2, h3, h4, h5, ul, li, dl, dt, dd {
	margin: 0;
	padding: 0;	
}

/* Header elements -------------------------- */

/* NEW!! These changes style the text for plain text headers. Display: none; and the background images
	have been commented out (see further below), allowing this text to appear  */
				
h1 {
	margin: 12px 0;
	/*	height: 40px; */								/* NEW !! text styling */
	padding-top: 10px;								/* NEW !! text styling */
	background-position: left center;
	background-color: transparent;
	background-repeat: no-repeat;
	padding-bottom: 4px;
	border-bottom: 1px solid #C8BBA4; 
	}

h1 span {
	color: #632E2B;																	/* NEW !! text styling */
	font: italic 26px "Georgia", "Times New Roman", Times, Serif; 		/* NEW !! text styling */
	/*	display: none; */																/* NEW !! makes text appear */
	}

h2 {
	margin: 12px 0 6px 0;
	color: #632E2B;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 22px;
}

h2 span.date {
	display: block;
	margin: 3px 0 0 0;
	text-align:right;
	font-size: 13px;
	padding-top: 3px;
	border-top: 1px solid #ccc;
	font-style: italic;
}

h3 {
	font-size: 15px;
	font-weight: bold;
	color: #000;
}

/* Links -------------------------------- */

a {
	font-weight: bold;
}

a:link {
	color: #632E2B;
	text-decoration: none;
}

a:visited {
	color: #632E2B;
	text-decoration: none;
}

a:hover {
	color: #632E2B;
	text-decoration: underline;
}

a:active {
	color: #632E2B;
}

a img {
	border: 1px solid #fff;
}

a:hover img {
	border: 1px solid #CA863D;
}

/* images -------------------------- */

img {
	padding: 3px;
	border: 1px solid #ccc;
}

/* Lists -------------------------------- */

ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid #ccc;
}

/* Page Specific Stuff ----------------- */

.notes {
	margin: 0 0 0 10px;
}

.details {
	margin: 0 0 14px 10px;
}

.artist {
	color: #333;
	font-style: italic;
}

.name {
	font-weight: bold;
	font-size: 14px;
}

/* for the contact page */

body.contact .entry {
	margin-bottom: 14px;
}

body.contact .entry ul {
	margin-left: 14px;
}

/* for the press page */

blockquote {
	margin: 6px 0 0 0;
	background: transparent url(/shared/spring/lt_quote.gif) no-repeat left top;
	text-indent: 32px;
	padding-right: 30px;
	line-height: 22px;
}

body.content .caption {
	text-align: right;
	height: 19px;
	margin-top: -22px;
	margin-bottom: 24px;
	font-style: italic;
	padding-top: 26px;
	padding-bottom: 9px;
	padding-right: 28px;
	border-bottom: 1px solid #ccc;
	background: transparent url(/shared/spring/rt_quote.gif) no-repeat right top;
}

.caption a {
	font-weight: normal;
}

/* for the calendar page */

body.calendar .entry {
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
	margin-bottom: 14px;
}

address {
	font-style: italic;
}

body.calendar .entry p {
	margin: 0 0 0 10px;
	color: #4C4C4C;
}

/* for the guestbook page */

body.guestbook #postForm {
	border: 1px solid #ccc;
	padding: 9px;
	background-color: #F1F0EB;
	margin: 16px 0;
}

body.guestbook #postForm label, 
body.guestbook #postForm input {
	display: block;	
}

body.guestbook #postForm input {
	height: 16px; /* for IE5 mac */
}

/* hide real value from IE5 Mac \*/
body.guestbook #postForm input {
	height: auto;
}
/* end hack */

body.guestbook #postForm label {
	font-weight: bold;
}

			body.guestbook #postForm input, body.guestbook #postForm textarea {
				width: 300px;
				margin-bottom: 12px; 
				display: block;			/* TWO!! this forces captcha image onto its own line */
			}

body.guestbook blockquote {
	background-image: none;
	text-indent: 0;
	padding-left: 12px;
	color: #4C4C4C;
}

#guestbook h2, #guestbook h3 {
	margin: 0;
}

#guestbook .entry {
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
	margin-bottom: 10px;
}

			/* TWO!! These styles position captcha image and input box */
			
			.guestbook form {
				margin: 0;								/* TWO!! forces browser constistency */
				}
			.guestbook #gbcomment {
				height: 100px !important;			/* TWO!! forces browser constistency */
				margin-bottom: 0 !important;		/* TWO!! forces browser constistency */
				}
			.guestbook #gbimage {
				position: absolute;
				margin-top: 12px;
				}
			.guestbook .security_code_label {
				margin-top: 17px;
				margin-left: 120px;
				}
			.guestbook #security_code {
				margin-left: 120px;
				width: 180px !important;
				}

			
/* for the products page */

body.products div.products h2, body.products div.products p {
	margin: 0;
}

body.products div.products .entry {
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
}

body.products div.products form table {
	border-collapse: collapse;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
}

body.products div.products form table td, body.products div.products form table th {
	padding: 3px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

body.products div.products form table th {
	font-weight: bold;
	background-color: #F1F0EB;
	text-align: center;
}

/* for the links page */

body.links dt h3 a {
	font-size: 13px;
	font-weight: normal;
}

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