/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007 - September 2008
   All styles that have been changed are indented
	
	ARIZONA - BIG IMAGE
	
	- 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.

	SEPTEMBER 2008:
	- removed an ugly hack on the #banner, that strangely, only served to make the banner photo look out of
	  place in every browser
   - fixed a broken ie5 hack that was messing up #navigation. the hacked value had a large negative margin that
	  really didn't make any sense, even for ie5
	- improved layout of #emailsignup
	- added margins to home page images	
	- 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
	- rescued the template from hasLayout hell!! Previously, #content didn't have hasLayout, which caused an
	  IE6 bug repainting problem. but giving hasLayout (by applying a set width) triggered the IE float
	  model problem, with an extra 3px offset in IE6 (www.positioniseverything.net/explorer/floatmodel.html).
	  to solve it, #navigation had to be positioned absolutely
	- corrected two IE collapsing margin bugs that were causing the h1 header to be too high within #content,
	  and #content to be too high within container. solved by replacing margin-tops with padding-tops on
	  both parent elements (#container and #content)
	- 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;
}

			/* NEW!! This new/changed code helps fix one of two separate IE collapsing margin problems */

         #container {
         	width: 750px;
         	text-align: left;
         	margin: 0 auto;
         	padding: 1px;
         	position: relative;
				padding-top: 226px;		/* NEW!! This padding replaces a #content margin, which IE was collapsing */
         }

/* main content elements */
               #banner {
               	width: 555px;
               	height: 225px;
               	position: absolute;
               	top: 0;
						left: 195px;
               /*	margin-left: 5px;		NEW!! not necessary */
               }
					
					/* NEW!! This code is completely useless now
					
					NEW!! minor and relatively safe IE6-only hack corrects minor spacing bug 
					* #banner {left: 200px;}	
					
					/* NEW!! not necessary; now using left instead of margin-left
               html>body #banner {
               	margin-left: 194px;
               }
					*/
			
			/* NEW!! This code gets overidden later, anyway
         #navigation ul {
         	width: 191px;
         /*	float: left;		NEW!! Now using position: absolute; as part of hasLayout fix 
         }*/
			
			/* NEW!! This gets overidden later, anyway
         #content {
         	margin: 225px 0 0 194px;
         }
			*/

#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/Sig_21-cropped-topright.jpg) no-repeat;
						position: absolute;
               	top: 2px; 
               /*	margin-left: -191px; 	NEW!! not necessary*/
               }
               
               /* IE5Mac hack \ 			NEW!! not necessary
               #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: #000;
	background: #E3E2C0 url(/shared/arizona/body-bg.gif);
	padding: 0;
}
a {
	color: #09809F;
	font-weight: bold;
}
a:hover {
	color: #B11011;
}
h1 {
	color: #8E1718;
}
h2 {
	text-transform: lowercase;
	color: #A44E2E;
	font-weight: bold;
	font-style: normal;
	font-size: 1.3em;
	margin: 0 0 10px 0;
	background: url(/shared/arizona/h2-bg.gif) 0 0 repeat-x;
	height: 35px;
	line-height: 2;
	padding-left: 0.5em;
}
h2 a {
	color: #A44E2E;
}
h3 {
	font-weight: normal;
	margin: 0;
	font-size: 1.3em;
	color: #000;
}
h4 {
	font-size: 1em;
	margin: 2px 10px 10px 0;
	color: #716423;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
p, li, dt, dd {
	line-height: 1.5;
}

/* layout tweaks */

         #content, #footer {
         	padding: 10px 30px;
         /*	margin: 13px 13px 0 250px;			NEW!! This gets overidden later, anyway 
         	background: #fff url(/shared/arizona/container-bg.gif) top right repeat-y;
         	border: solid 1px #DFCFB5;
         	border-right: 0;
         	border-bottom-color: #C7AC7F; */
         }

#footer {
	clear: both;
}
#footer p {
	margin: 2px;
	font-size: 0.8em;
}
#navigation li a {
	color: #938446;
	text-decoration: none;
	font-size: 1em;
	text-transform: uppercase;
}

/* -- content area --*/
#content .entry {
	margin: 0 15px 30px 15px;
}
.entry .name, .entry .act {
	font-weight: normal;
	margin: 0;
	font-size: 1.3em;
	color: #000;
}
.entry .name {
	margin-left: 0.5em;
}
.entry .act {
	margin-left: 1em;
}
.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: 1.4;
         }

			/* 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: 100% !important;		/* NEW!! This resets line-height in the #footer to standard */
         }

.contact ul {
	list-style: none;
}
#postForm {
	border: double 3px #6A5D1E;
	margin: 0 0 35px 0;
	padding: 10px;
	background: #79BEDD url(/shared/arizona/guestbook-bg.gif) bottom left repeat-x;
}
#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: #000;
	background: #A8D4DF;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}

/* Captcha stuff */ 
#postForm img#gbimage {
	width: 100px;
	float: left;
	padding-left: 81px;
	margin-top: 7px;
	margin-right: 20px;
}

#postForm label.security_code_label {
	width: 185px;
	float: left;
}

#postForm input#security_code {
	float: left;
	width: 180px;
}

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

.guestbook h2 {
	margin: 0;
	padding: 0px;
	line-height: 1;
	font-size: 1em;
	background-image: none;
	height: 1em;
	border-bottom: solid 1px #716423;
}
.guestbook h2 a {
	text-transform: lowercase;
}
.guestbook h3 {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: right;
	font-size: 0.85em;
	text-transform: uppercase;
	position: relative;
	top: -1.2em;
	color: #716423;
}
.guestbook blockquote {
	margin: 0;
	padding: 0 1em;
}
.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: #79BEDD url(/shared/arizona/guestbook-bg.gif) bottom left repeat-x;
	padding: 5px 10px;
	margin: 10px 0;
	border: double 3px #6A5D1E;
}
.music #content li a {
	font-weight: normal;
	color: #000;
}
.music #content li a:hover {
	color: #B11011;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	background: url(/shared/arizona/ico-cd.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/arizona/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 #B76345;
	background: #D5AF9B url(/shared/arizona/photo-bg.gif);
	padding: 10px;
}
.photos dl {
	margin: 0 20px;
	padding: 0;
}
.photos dt {
	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: 20px;
}
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/arizona/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 h3 {
         	font-weight: bold;
         	font-size: 0.9em;
         	margin: 0 0 1em 0;
         	letter-spacing: 0.1em;
         	text-indent: 8px;
         	text-transform: uppercase;
         }

/* -- 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 {
	color: #fff;
}

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

         h1 {
         	height: 24px;
         	margin: 0 0 20px 0;				/* NEW!! margin-top was 10px; now using #content padding. */
         	background-repeat: no-repeat;
         	background-position: center top;
         	background-color: transparent;
         }

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

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

/* -- navigation -- */

			/* NEW!! This new code is also part of the fix to the hasLayout problem. Nav is now positioned
				absolutely, instead of floating (which was triggering a 3px space IE float model bug whenever
				hasLayout was given to #content (or even children of #content). See
				http://www.positioniseverything.net/explorer/floatmodel.html */
				
         #navigation ul {
         	background: url(/shared/arizona/04-nav-bg.gif) repeat;
         	margin-left: 0;
         	margin-top: 67px;
         	border: double 3px #6A5D1E;
         	width: 188px;
         	position: absolute;			/* NEW!! Now using absolute positioning instead of float */
         	top: 1px;						/* NEW!! Now using absolute positioning instead of float */
         }

         #navigation li {
         	display: block;
         	padding-bottom: 1px;
         	list-style: none;
         	margin-bottom: -2px;			/* NEW!! This was -19px, which must have been a typo */
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	margin-bottom: -1px;
         }
			
         #navigation li a {
         	display: block;
         	padding: 10px 20px;	
         	background: url(/shared/arizona/04-nav-li-bg.gif) center bottom no-repeat;
         }

#navigation li {
}
#navigation li a#navlinks {
	background-image: none;
}
#navigation li a:hover {
	color: #CD2412;
	background: #E6E3BC url(/shared/arizona/04-nav-a-bg.gif) left bottom repeat-x;
	padding-left: 16px;
}

			/* NEW!! Several improvements to #emailsignup make it look a lot neater. These override earlier
				settings */
			
         #emailsignup {
         	color: #fff;
         	position: absolute;
         	width: 190px;		/* NEW!! was 200px; but this looks more correct */
         	height: 60px;
         	text-align: left;
         	overflow: auto;
         	background: url(/shared/arizona/04-emailsignup-bg.gif) 0 0 no-repeat;
         	padding: 7px 0 0 5px;
         }

         #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-right: 2px;	/* NEW!! minor tweak improves appearance */
				width: 115px;			/* NEW!! before, both the field and the button were width: 86px; */
			}

			/* NEW!! this code corrects some horrendous hasLayout and collapsing margin problems in all versions
				of IE */
			
         #content, #footer {
         	margin: 13px 0 0 195px;
         	background: #fff url(/shared/arizona/container-bg.gif) top right repeat-y;
         	border: solid 1px #DFCFB5;
         	border-right: 0;
         	border-bottom-color: #C7AC7F;
				width: 494px;			/* NEW!! This gives hasLayout correcting an IE6 repainting problem */
         }


         /* NEW!! An ultra-safe hack for IE6 and IE5 only, combining the Tan hack and the Pixy 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 (box model problem). */
         
         * html #content, * html #footer { 		
         	_width: 554px;			/* fake width for IE5win only = real width + padding + border */
            _w\idth: 494px;
            }

			
			
			/* NEW!! This new/changed code helps fix two separate IE collapsing margin problems */
			
         #content {
         	margin-top: 0;			/* NEW!! This was 225px, but now using #container padding to push down */
         	padding-top: 20px;	/* NEW!! Increased by 10px, which was removed from h1 top margin */
         }

/* -- banner area -- */

         /*	NEW!! This odd bit of code is no longer needed 
         #banner .band {
         	left: -6px;
         }*/
			
         /* NEW!! This weird hack wasn't helping anything. It simply made it look crooked in all browsers.
				Now it's gone. 
         
         html>body #banner .band {
         	left: 0;
         }
         */

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

         .home img {
				margin-top: 15px;
				margin-bottom: 15px;
				display: block;		/* NEW!! display: block triggers margin collapse */
				}	

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