/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007 - October 2008
   All styles that have been changed are indented
	
	VELVET PAISLEY - BIG IMAGE
	
	- band photo was pushed down in all browsers due to an extra top: **px declaration that wasn't needed at all.
	  this is now commented out
	- shifted #content up by 25px because of the above (it now looks better)
	- band photo was pushed to the right in IE7, due to failed hacks and the use of margin-left instead of just
	  left. this was a relatively simple fix.
	- fixed an IE6-only doubled float margin bug in the #naviagtion by adding display: inline; Please see
	  http://www.positioniseverything.net/explorer/doubled-margin.html
	  
	OCTOBER 2008:
	- fixed a collapsing margin problem in IE5/6/7, although in this case, IE was	collapsing the #container
	  padding and keeping the #content margin, likely a result #content not having hasLayout. solved by
	  eliminating #container padding and adding to #content and #navigation margins. weird.
	- corrected #navigation bug where #navigation links for .bio and .product pages were shorter when
	  current(less padding) than the others. solved by adding an !important declaration to the link styling
	- improved layout of #emailsignup
	- added margins to home page images	
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means they styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.
	- reset text styling for home page .entry paragraphs, such as found in the home page #calendar 
	- removed .news {line-height: 130%;} code, which has no apparent benefits, yet makes text on the news
	  page look weird
	- fixed a minor bug in the #footer, involving page specific line-height settings for paragraphs
	- solved the infamous IE #navigation link bug, where only the text portion of the links were active. By
	  giving hasLayout to #navigation li a, the entire link blocks are now hoverable and clickable
	  
*/


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


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	text-align: center;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}

/* main structural elements */
#accessibility {
	position: absolute;
	left: -9999px;
}
         #container {
         	width: 750px;
         	text-align: left;
         	margin: 0 auto;
         /*	padding: 1px; 			NEW!! This is overriden later */	
         	position: relative;
         }

/* main content elements */

            #banner {
            	width: 555px;
            	height: 146px;
            	position: absolute;
            	top: 79px;
					left: 204px;		/* NEW!! not surprisingly, this works much better */
            /*	margin-left: 5px; */
            }
				
				/* NEW!! this is now handled using top and left, which is more consistent across browsers
            html>body #banner {
            	margin-left: 194px;
            }
				*/
				
            #navigation ul {
					display: inline;		/* NEW!! This cures the double-float-margin bug in IE6 */
            	width: 191px;
            	float: left;
            }
				
         #content {
         	margin: 225px 0 0 194px;	/* NEW!! margin-top is overridden later */
         }
			
#emailsignup {
	position: absolute;
	top: 0;
	left: 0;
	width: 190px;
	height: 47px;
	padding: 2px;
}
#emailsignup span {
	display: block;
}
#emailsignup input {
	width: 80px;
}

/* -- banner area -- */

               #banner .band {
               	width: 555px;
               	height: 223px;
background: url(/images/hugestylegraphichbabyupload.jpg) no-repeat;
               	position: absolute;
               /*	top: 2px; 					NEW!! not necessary */
               /*	margin-left: -191px; 	NEW!! not necessary */
               }
               
					
               /* IE5Mac hack \ 				NEW!! this hack is now redunadant, IE5mac is now obsolete
               #banner .band {
               	margin-left: 0;
               }
               
               /* end hack */
					
               #banner .band span {
               	display: none;
               }
               #banner .photo span {
               	display: none;
               }

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


/* -- basic html elements -- */
body {
	font: 80% Georgia, sans-serif;
	color: #516651;
	background: #679167 url(/shared/velvetpaisley/body-bg.jpg);
	padding: 25px 4%;
}
a {
	color: #B67E13;
	font-weight: bold;
}
a:hover {
	color: #B11011;
}
h1 {
	color: #8E1718;
}
h2 {
	text-transform: lowercase;
	color: #7E917E;
	font-weight: normal;
	font-style: italic;
	font-size: 1.3em;
	letter-spacing: 2px;
	margin: 0;
}
h3 {
	font-size: 15px;
	margin: 0 10px;
}
h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #40673A;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p {
	line-height: 1.4;
}

/* layout tweaks */
#content {
	padding: 0 30px;
}

         #container {
         	border: double 5px #4E7446;
         	background: #fff url(/shared/velvetpaisley/footer.gif) bottom left repeat-x;
         	padding: 10px;
				padding-top: 0px;		/* NEW!! Now using top margins only to push #content and #navigation down. */
         	width: 775px;
         	voice-family: "\"}\"";
         	voice-family: inherit;
         	width: 750px;
         }

#footer {
	border-top: solid 1px #D0C6C6;
	border-bottom: solid 1px #D0C6C6;
	clear: both;
}
#footer p {
	margin: 2px;
	font-size: 0.8em;
}

/* -- emailsignup --*/
#emailsignup {
	color: #516651;
	background: #E3ECE2 url(/shared/velvetpaisley/emailsignup-bg.gif) bottom left no-repeat;
	padding: 8px;
	border-bottom: solid 3px #6E8D77;
	border-top: solid 1px #fff;
}

/* -- content area --*/
#content .entry {
	margin: 0 15px 30px 15px;
	clear: left;
}
.entry .name, .entry .act {
	font-weight: bold;
	font-style: normal;
	font-size: 0.85em;
	margin-left: 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #516651;
}
.entry .name {
	margin-left: 4em;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}
.entry p {
	margin: 10px 20px 15px 30px;
}
.details {
	margin: 0 20px 0 30px;
}

/* -- section-specific style -- */
.home p, .index p {
	margin: 0 20px 1.5em 20px;
	line-height: 130%;
}

			/* NEW!! This new code resets values for p on the home page--in particular, special paragraphs
				such as those found in the home page #calendar or the home page #footer. */
			
			.home .entry p {
				margin-left: 30px;	/* NEW!! This resets margin-left to standard for entries */
				margin-top: 10px;		/* NEW!! This restores a top margin to the home page calendar */
				line-height: 1.5;		/* NEW!! This resets line-height to standard */
			}
			
         #footer p {
         	line-height: 1.4 !important;		/* NEW!! This resets line-height in the #footer to standard */
         }

.contact ul {
	list-style: none;
}
#postForm {
	border: double 3px #D0C6C6;
	margin: 0 0 35px 0;
	padding: 10px;
	background: #F3F5F2 url(/shared/velvetpaisley/postform-bg.gif) bottom left no-repeat;
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	display: block;
	margin: auto;
}

#postForm input[type="submit"] {
	text-align: center;
}

.guestbook h2 {
	margin: 0 0 2px 0;
	letter-spacing: 0;
	font-size: 1em;
	border-bottom: double 3px #D0C6C6;
}
.guestbook h2 a {
	text-transform: lowercase;
}
.guestbook h3 {
	margin: 0;
	padding: 0;
	border: 0;
	display: inline;
	float: right;
	font-size: 0.85em;
	text-transform: uppercase;
}
.guestbook blockquote {
	margin: 0;
	padding: 0 20px;
}
.links h2 {
	margin: 0 20px 10px;
}
.links dl {
	margin: 0 25px 20px;
}
.links dd {
	margin-bottom: 5px;
}
.music h2 {
	font-size: 1.3em;
}
.music h2 {
	margin-top: 40px;
}
.music h3 {
	font-size: 0.9em;
	text-transform: uppercase;
}
.music .details {
	margin: 0 30px 15px 30px;
}
.music .artist {
	color: #B9B9BD;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	list-style-type: none;
	background: #F3F5F2;
	padding: 5px 10px;
	margin: 10px 0;
	border: double 3px #D0C6C6;
}
.music #content li a {
	font-weight: normal;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	background: url(/shared/velvetpaisley/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/velvetpaisley/ico-play.gif) no-repeat;
	display: block;
}

			/* NEW!! This odd bit of code makes all the text on the news page look misaligned. Gone.  
         .news {
         	line-height: 130%;
         }
			*/

.photos img {
	border: solid 1px #D0C6C6;
	background: #F3F5F2;
	padding: 10px;
}
.photos dl {
	margin: 0 20px;
	padding: 0;
}
.photos dt {
	text-align: center;
	padding: 5px;
	background: url(/shared/03-banner-bg.gif) repeat-x;
	margin: 10px 0 1px 0;
}
.photos dd {
	text-align: center;
	margin: 0;
	padding: 0;
}
.press h2 {
	margin-left: 20px;
	margin-right: 20px;
}
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/velvetpaisley/ico-speech.gif) no-repeat;
}
.links h3 a {
	font-size: 0.9em;
}

			/* NEW!! Before, these were styled at the page level (using body.calendar or .calendar for short).
			Now that calendars can also appear on the	home page, they are styled using div#calendar or
			#calendar for short. Calendars are always contained within a #calendar div, no matter what page
			they're on. Good, no? */

         #calendar h2 {
         	font-size: 1.1em;
         }
         #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;
	font-size: 0.85em;
	letter-spacing: 2px;
	font-weight: bold;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 1px;
}

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

         h1 {
         	height: 41px;
         	margin: 0 0 0 0;
         	background-repeat: no-repeat;
         	background-position: top left;
         	background-color: transparent;
         }

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

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

/* -- navigation -- */

         #navigation ul {
				margin-top: 16px;			/* NEW!! replaces padding-top that was removed from #container */
         	padding-right: 15px;
         	padding-bottom: 6px;
         	width: 120px;
         	background: url(/shared/velvetpaisley/04-nav-ul-bg.gif) right bottom no-repeat;
         	list-style: none;
         }
			
#navigation li {
	display: inline;
}

			/* NEW!! Added !important declaration, which forces all pages to have save padding for the
				corresponding link in #navigation. Previously, .bio and .product pages had less for some reason. */
				
         #navigation li a {
         	font-weight: normal;
         	text-decoration: none;
         	display: block;
         	font-size: 0.9em;
         	white-space: nowrap;
         	padding: 4px 0 !important;		/* NEW!! added !important declaration */
         	border-bottom: solid 1px #F2DED9;
         }

#navigation li a:hover {
	background: url(/shared/velvetpaisley/04-nav-bg.gif) right center no-repeat;
}
#emailsignup {
	top: 12px;
	left: 204px;
	width: 539px;
}

/* -- selected links --*/
.home #navhome, .blog #navblog, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar {
	padding: 7px 0;
}

				/* NEW!! This is part of an IE5/6/7 collapsing margin fix, although in this case, it was
					collapsing the #container padding and keeping the #content margin */

            #content {
            	margin-top: 335px;	/* NEW!! was 350px, later 325px. now added 10px from #container padding. */
            }
				
#footer {
	margin: 5em 30px 4em 30px;
}
            	/* NEW!! serves no purpose, yet it wrecks the layout by pushing the band photo to far down 
				   #banner .band {
               	top: 78px;
               	left: -6px;
               }
               html>body #banner .band {
               	top: 78px;
               	left: 0;
               } 
					*/
					
.no-images #banner .band {
	font-size: 3em;
	font-weight: 100;
	font-style: italic;
	letter-spacing: 1px;
	padding: 100px 20px 2px 10px;
	color: #7A7474;
	text-align: right;
	line-height: 0.8;
}

			/* NEW!! Several improvements to #emailsignup make it look a lot neater. These override earlier
				settings */

         #emailsignup input {
				margin-top: 1px; 		/* NEW!! minor tweak improves appearance */
         	width: 60px;			/* NEW!! before, both the field and the button were width: 86px; */
         }
			
			#emailsignup input#list_email {
				margin-left: 2px;		/* NEW!! minor tweak improves appearance */
				width: 115px;			/* NEW!! before, both the field and the button were width: 86px; */
			}

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

         .home img {
				margin: 15px 0 15px 20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
				display: block;		/* NEW!! display: block triggers margin collapse */
				}	

			/* NEW!! This ultra-safe hack gives hasLayout to the h2 in IE6 & IE5, which allows the header to appear
				consistently. Both browsers treat this as min-height, so this doesn't affect appearance. */
				
			* html h2 	{_height: 0;}			/* NEW!! triggers hasLayout in IE6 & IE5 */

				
			/* NEW!! These two lines give hasLayout to the #navigation links in IE5-7, which allows the links to
				to behave properly as blocks--i.e. placing the mouse anywhere in the block causes the hover effect
				to appear, and you can click anywhere in the block to activate the link. The first line is seen
				by all browsers but does not change appearance. The second line is seen only by IE5 & IE6 due
				to an utra-safe hack (combined * html and underscore hack). */
				
			#navigation li a {min-height: 0;}			/* NEW!! triggers hasLayout in IE7 */
			* html #navigation li a {_height: 0;}		/* NEW!! triggers hasLayout in IE6 & IE5 */
			

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