/* COLORCURVES stylesheet template designed by Andrew Tay (www.andrewtay.com) for HostBaby.com August 2005 

	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April-August 2007 
   All styles that have been changed are indented
	
	- minor problem with text appearing over the band photo fixed using display: none;
	- 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.
	- added margins to home page image and default styling to #splashimage

	REVISION 2A:
	- major reworking of entire layout in order to eliminate a design flaw that only appeared in IE and Safari.
	  the design has a top background image that is fixed to the top of the page, and a bottom background image
	  which should connect to the bottom of #content, like a footer (yet it needed to span the full width of the
	  viewport, which the footer couldn't do). the problem was when the page was really short or the viewport
	  was really tall, it would behave differently depending on the browser: in FF an Opera it would stay stuck 
	  to the #content div, on IE and Safari it would stay stuch to the viewport. problem solved mainly by
	  rearranging all the divs, how they're laid out (type of positioning, margins, padding, etc.) and which
	  background image lies in which div. Many many things have been moved around.
	- minor margin tweak on links page
	
	REVISION 2B:
	- corrected an IE expanding box bug that cropped up as a result of the layout reworking (revision 2A) under
	  very specific conditions. as part of the revision 2A, #content width was set to 405px with a large
	  padding-right of 255 px to keep everything on the left two thirds and away from the band photo and
	  #navigation. the problem was that when the user had very wide content such as a wide photo, a long link,
	  etc. it would trigger the IE5/IE6 expanding box problem. *all* templates have this issue to some extent,
	  but it was made worse by the fact that 405px is narrower than usual, and the way it was structured before
	  revision 2A, the expanding box wasn't noticeable until the width reached ~650px. the solution was to
	  increase #content width to 630px, reduce padding-right to 30px, and set the width individually for each
	  page element. This is less elegant than using padding-right, but it works.
	  
	REVISION 2C:
	- continuing the REVISION 2B fix discussed above, defined a width for tables. currently, tables are only
	  found on the #calendar when you choose "show past dates"
	  
*/


/* --- GLOBAL PAGE SETTINGS --------------------------------------------------------- */

	html, body, div	{margin: 0; padding: 0}		/* clears block margins/padding */
   img					{border: none;}				/* clears all image borders */
 
   /* (mostly) firefox defaults, for other browser's benefit */
	
   p, blockquote 		{margin: 1em 0;}	
   ul, ol 				{margin: 1em 0 1em 35px; padding: 0;} 
   h2						{margin: .83em 0;}
	h3						{margin: 1em 0;}	
         
				
/* --- GENERAL PAGE LAYOUT -------------------------------------------------------------- */

         body {
				padding: 0;							/*	NEW!! rearranged... was padding: 0 0 106px 0; */
         	text-align: center;				/* page auto-centering for IE5win */
				color: black;
         	background-color: #FFFBF2;		/* NEW!! bottom background image now moved to #container */
			/*	background: #FFFBF2 url(/shared/colorcurves/colorcurves-pop-bottom.gif) 50% 100% no-repeat; */
         	}
         
			/* NEW!! Now #container is used to position the bottom image because we can always count on the
				bottom of #container to move along with the #content as the page gets taller or shorter. */
				
         #container {
				padding-top: 18px;			/* NEW!! Used to use position: relative; top: 18px; this is simpler */
         	width: 100%;
         	background: url(/shared/colorcurves/colorcurves-pop-bottom.gif) 50% 100% no-repeat;
         	}
			
			/* NEW!! Most of these styles used to be applied to the #container. #container was the "big
				rectangle" while #content didn't really do much positioning. Now #content is the "big rectangle"
				so that #container can used to position the bottom background image. At first, #content width was
				set to 405px with padding-right: 255px; to keep everything on the left side. This caused IE5/IE6
				expanding box problems on pages with wide images or long links, so now it's wider and width is
				set on an element-by-element basis. */
				
         #content {
         	position: relative;
         	left: -15px;
				width: 630px;				/* NEW!! was width: 405px; now wider to avoid IE expanding box problem */
         	min-height: 585px;
         	margin: 0px auto;			/* page auto-centering */
         	z-index: 50;
         	padding: 55px 30px 110px 30px; 		/* NEW!! rearranged... was padding: 45px 0px 0px 30px; */
         	border: 2px solid #666;
         	text-align: left;	
           	background: white url(/shared/colorcurves/colorcurves-pop-container.gif) 0 0 no-repeat;
     			}
			
   			/* 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). Both
					versions of IE will treat "height" as min-height, which is what we want anyway. The
					backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */

				* html #content {
            	_width: 694px;			/* fake width for IE5win only: real width + padding + border */
              	_w\idth: 630px;		/* NEW!! was width: 405px; now wider to avoid IE expanding box problem */
					_height: 750px;		/* fake height for IE5win only: real min-height + padding + border */
   				_he\ight: 585px;
					}

         /* NEW!! Part of a fix to the IE expanding box problem (see lengthy comments above). Since the
         actual area for page content is supposed to be 405px wide, these are now set to 405px
         individually. */
         
         #content p, 
         #content h1, 
         #content h2, 
         #content h3, 
         #content dl, 
         #content .details, 
         #content .entry,
			#content table {
            width: 405px;
            }
         
         /* NEW!! These are 35px narrower because of margin-left: 35px. */
         
         #content ul,
         #content ol, 
         #content #calendar .entry {
            width: 370px;							
            }
         
         /* NEW!! This is 20px narrower because of padding. */
         
         #content #guestbook .entry {
            width: 385px;
            }
         
         /* NEW!! These should all spread to the full width of the .entry that contains them. */
         
         #content .entry p,
         #content .entry h2,					
         #content .entry h3, 
         #content .entry .details {
            width: 100% !important;
            }
							
#accessibility {
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	height: 355px;		
	z-index: 10;
	font-size: 0px;
	text-indent: -9999px;
	background: url(/shared/colorcurves/colorcurves-pop-top.gif) 50% 0 no-repeat;
	}
			
			/* NEW!! Now that #content fills the role of the "big rectangle" and #footer is a sibling of
				#content, not a child (like it was when #container was the rectangle), it must be repositioned so
				it looks like it's inside the rectangle */
				
         #footer 	{
         	position: relative;				/*	NEW!! was clear: both; but #navigation is no longer floated */
         	left: -15px;
         	top: -90px; 						/* NEW!! #footer must now appear inside #content rectangle */
         	width: 660px;
         	height: 58px;						/* NEW!! was 54px */
         	margin: 0 auto;					/* NEW!! now auto-centered since #container isn't centered */
         	z-index: 400; 						/* NEW!! #footer must now appear inside #content rectangle */
         	background: url(/shared/colorcurves/colorcurves-pop-footer.gif) 0 100% no-repeat;
				text-align: left;
				padding: 30px 0 0 30px;			/*	NEW!! was padding: 1px 30px 30px 30px; */
         	}

   			/* NEW!! An ultra-safe Tan hack for IE5 only (using Pixy underscores act as a backup). The
					backslashes pass real values to IE6 that override the fake values for IE5 (box model problem). */

            * html #footer { 		
            	_width: 690px;			/* fake width for IE5win only: real width + padding + border */
               _w\idth: 660px;
					_height: 88px;		/* fake height for IE5win only: real height + padding + border */
   				_he\ight: 58px;
					}
         
         #footer p {
				margin: 0; 							/* NEW!! forces browser consistency */
				padding: 0;							/* NEW!! forces browser consistency */
				}
	
/* band name & images */
		
#banner .band {
	position: absolute;	
	left: -9999px;			/* hide off-screen */
	}
				
         #banner .photo {
         	position: absolute;
            top: 118px;							/* NEW!!	was top: 98px; when #containter was the "big rectangle" */
            left: 50%;							/* NEW!! was right: -11px; when #containter was the "big rectangle" */
            margin-left: 133px;				/* NEW!! */
            z-index: 400;						/* NEW!! */
         	width: 208px;
         	height: 177px;
background: url(/images/wynn-208x177.jpg) 50% 50% no-repeat;
	         }
         
            /* NEW!! Gets rid of band title text that was appearing over the band photo in Opera */
            #banner .photo span {display: none;}			


			/* NEW!! */
								
         #navigation {
         	position: absolute;				/*	NEW!! rearranged... was float: right; which won't work anymore */
         	top: 351px;							/* NEW!! */
         	right: 50%;							/* NEW!! */
         	width: 107px;
         	height: 335px;
         	margin-right: -279px;			/* NEW!! */
         	z-index: 300;						/* NEW!! */
         /*	margin: 331px 50px 0 0; 			NEW!! not needed with absolute positioning */
        		}				

         #emailsignup {
         	position: absolute;
         	top: 30px;							/*	NEW!! was top: 10px; when #containter was the "big rectangle" */
         	right: 50%;							/*	NEW!! was right: 10px; when #containter was the "big rectangle" */
         	margin-right: -319px;
         	z-index: 300;
         	}


/* --- Text Styles & Additional Margin Fixes ---------------------------------------- */

	body		{
   		   font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
			   font-size: 13px;
    			}
 
	h2 		{
            color: #971801;
            font-weight: bold;
            font-size: 115%;
            text-align: left; 
            }
 
	h3			{
   			font-style: italic;
   			font-size: 100%;
   			}
    
   p, .notes {
    			line-height: 1.2;
    			}
				
         	/* NEW!! This is no longer needed
         	#footer p {
     				padding-top: 25px;
     				} */

	#navigation ul {
				margin: 0; 
				padding: 0;
				font-size: 15px;
				list-style: none;
 				}				

	#navigation li {
				line-height: 100%; 
				margin-bottom: 6px;
				}

	#emailsignup {
				font-weight: bold;
				}
   #emailsignup input[type="text"] {
				margin-left: 3px;
         	width: 115px;
         	}

   	
/* --- Link Styling ----------------------------------------------------------------- */

	/* general links */	   
	a				{font-weight: bold; text-decoration: underline;}
   a:link 		{color: #5B8FBA;}	
	a:visited	{color: #5B8FBA;}
   a:hover 		{color: #EDAD53;}	
   a:active		{color: white;}

	/* navigation links */
	#navigation li a 				{text-decoration: none;}
	#navigation li a:link 		{color: white;}
	#navigation li a:visited	{color: white;}
	#navigation li a:hover 		{color: #FFE4AD;}
	#navigation li a:active		{color: white;}

	/* links page links */
	.links a:link h2				{text-decoration: none;}				
	.links a:visited h2			{text-decoration: none;}				
	.links a:hover h2				{color: #EDAD53;}				
	.links a:hover h2				{color: #EDAD53;}				

	
	/* highlight current page */
	.home #navhome, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
				color: #F09D18 !important;
				}
				
	/* playfully stagger links */
	#navigation li {text-align: center;}
	
   #navhome			{margin-left: 11px; 	margin-right: 10px;}	/* squeezed */
   #navbio			{margin-left: 4px; 	margin-right: 4px;}	
   #navmusic		{margin-left: 2px; 	margin-right: 20px;}	/* squeezed */
   #navcontact		{margin-left: 10px;}								
   #navpress		{margin-left: 0px; margin-right: 20px;}	/* squeezed */
   #navnews			{margin-left: 2px; margin-right: 4px;}
   #navcalendar	{margin-left: 2px; margin-right: 4px;}
   #navphotos		{margin-left: 0px; margin-right: 6px;}
   #navproducts	{margin-left: 5px; margin-right: 1px;}	
   #navguestbook	{margin-left: 10px;}								
   #navlinks		{margin-left: 6px; margin-right: 12px;}	/* squeezed */
   
	#navindex		{margin-left: 5px;}
	
	
/* --- PAGE SPECIFIC STYLES --------------------------------------------------------- */

	/* photos */
	.photos dt	{
   			color: #971801;
   			font-weight: bold;
   			font-size: 115%;
				margin: 1.7em 0 .8em 0; 
				}	
	.photos dd	{
				margin: 0; 
				padding: 0;
				}

	/* music */
	.music .artist, .music .details {margin: 0; padding: 0;}
	
	/* contact */
	.contact .name			{font-weight: bold;}
	.contact .entry ul 	{list-style: none;}
	.contact .entry li	{padding-bottom: .15em;}				
				
	/* press */
	.press .caption		{font-weight: bold; color: #8f8f8f;}
	
	/* products */
	.products hr {display: none;}

	/* calendar */
	
				/* 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, #calendar .details, #calendar .entry p {margin-left: 35px;}
         	#calendar h3, #calendar h4, #calendar address {
            			margin-top: 0; 
            			margin-bottom: 0.1em;
            			font-style: normal;
         				font-size: 100%;
            			}
							
         	#calendar h4		{font-weight: normal;}
	
	/* products */
	.products table	{font-size: 100%;}
	
	/* guestbook */
   #postForm 	{
           	text-align: left;
           	width: 340px;
				margin: 18px 0 25px 20px;
            }
   #postForm input, #postForm textarea {
         	display: block;
         	width: 100%;
         	margin-bottom: 10px;
     	    	}
   #postForm textarea {
   			height: 100px;
   			}
   #postForm input[type="submit"] {
   			width: 200px;
   			margin: 0 auto;
				}

	#guestbook .entry	{
				padding: 2px 10px;
				margin-bottom: 10px;
				}				
	#guestbook .entry h2	{
      		font-size: 100%;
      		color: #BAA486;
      		padding-bottom: 4px;
      		margin-bottom: 0;
      		border-bottom: 1px solid #DCD1C2;
      		}
	#guestbook .entry h3	{
      		font-size: 85%;
      		color: #BAA486;
      		text-align: right;
      		margin: 0; padding: 0;
      		}

	/* links */
	.links h3	{font-style: normal;}	

			/*	.links h1	{margin-bottom: 80px;} 		NEW!! not really necessary for it to look right */

	.links dl, .links h2 {margin-left: 10px;}

					
/* --- Modified Rundle Image Replacement (phark.typepad.com/phark/2003/08/) --------- */

	h1			{
            width: 400px; height: 80px;
				margin: 0; padding: 0;
				}
	h1 span 	{
            display: block;
				text-indent: -9999px;		/* hide off-screen */
            }
			
	.home h1			{background: url(/shared/colorcurves/pop-welcome.gif) top left no-repeat;}
	.index h1		{background: url(/shared/colorcurves/pop-index.gif) top left no-repeat;}
	.music h1 		{background: url(/shared/colorcurves/pop-music.gif) top left no-repeat;}
	.contact h1	 	{background: url(/shared/colorcurves/pop-contact.gif) top left no-repeat;}
	.press h1  		{background: url(/shared/colorcurves/pop-press.gif) top left no-repeat;}
	.news h1 		{background: url(/shared/colorcurves/pop-news.gif) top left no-repeat;}
	.photos h1		{background: url(/shared/colorcurves/pop-photos.gif) top left no-repeat;}
	.guestbook h1 	{background: url(/shared/colorcurves/pop-guestbook.gif) top left no-repeat;}
	.links h1 		{background: url(/shared/colorcurves/pop-links.gif) top left no-repeat;}
	.calendar h1 	{background: url(/shared/colorcurves/pop-calendar.gif) top left no-repeat;}
	.bio h1 			{background: url(/shared/colorcurves/pop-bio.gif) top left no-repeat;} 
	.products h1 	{background: url(/shared/colorcurves/pop-store.gif) top left no-repeat;}	
	
	
   			/* NEW!! minor tweaks for splash and home page images */
   
            .home img {margin: 1em 0; display: block;}	/* NEW!! display: block triggers margin collapse */
            
            #splashimage { text-align: center; margin: 100px auto; }
            #splashimage a img { border: 0; }