/* OVERLAY template stylesheet

	graphic design, interactive design, coding: Andrew Tay (www.andrewtay.com) October 2009

	- revised November 2009 so that background image is now aligned to top of the viewport (before, it
	  centered on the upper-middle area of the image.

	VARIATION FILE: all unique colors and images for this variation are given at the end of the file for 
						 ease of	maintenance, overriding earlier settings.
	
*/

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

	html, body, div, form	{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 -------------------------------------------------------------- */

html, body {
	height: 100%;
	text-align: left;	
	}
	/* Ultra-Safe Hack for IE6: hides vertical scrollbar except when absolutely necessary */
	* html, * body {
		_overflow-y: auto;		/* this gave IE7 serious problems upon resize, hence the hack for ie6 only */
		}

	/* This is the full page bg image: standard dimensions should be 1440px x 1080px to cover most monitors,
		though the image will tile so users can use smaller (or larger) images. */
	html {
		background-color: #666;
background: url(/images/DSC_0079_2_2-cropped-pagebackground.jpg) center top;
		}
		
/* ACCESSIBILITY */			
			
#accessibility {
	position: absolute;
	left: -9999px;
	}
	
/* CONTAINER */
				
#container {
	height: 100%;				/* content references this to calculate its height */
  	}
	/* Since we're using transparency filters, these parent divs MUST be positioned or else the links 
		won't work in IE6. Alternatively, these may be overridden by position: absolute; later. */
	#navigation, #content {
		position: relative;
		}	
	
/* NAVIGATION */	

/* For some reason, all browsers are messing up margins and postioning of multiple divs (in completely 
	different and unpredictable ways) when simultaneously floating #navigation and #emailsignup to the left and 
	applying overflow-y: auto to #content. Two different solutions are used here, depending on browser. */

#navigation {
	float: left;
	width: 205px;
	margin: 140px -205px 0 0;	/* negative right margin prevents #navigation from messing up #content */
	z-index: 300;					/* layers #navigation above #banner */
	}				
	/* Ultra-Safe Hacks for IE6 and IE7: A different solution for IE. This one actuially works for all browsers
		except Opera. Note that width: 0; doesn't work for IE7 .*/
	* html #navigation {
		_width: 1px;				/* 1px width (set later on ul) prevents #navigation from messing up #content */
		_margin: 140px 0 0 0;
		}
	*:first-child+html #navigation {
		*width: 1px;				/* 1px width (set later on ul) prevents #navigation from messing up #content */
		*margin: 140px 0 0 0;
		}

	#navigation ul {
		width: 205px;			/* true #navigation width, which IE needs */
		margin: 0 0 0 30px; 
		padding: 0;
		font: bold 17px Arial, Helvetica, sans-serif;
		list-style: none;
		}				
		#navigation li {
			}
			#navigation li a {
				display: block;
				line-height: 1;
				padding: 2px 0;
				background: url(/shared/overlay/blank.gif);		/* IE6/7 stupidly must have a bg for the to take full width */
				width: 100%;	/* this is needed for flyouts and gives IE6 hasLayout, preventing a spacing bug */
				/* cross-browser opacity settings */	
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
					*filter: alpha(opacity=70);
					opacity: 0.70;				
				}
				#navigation li a:hover {
					/* cross-browser opacity settings */	
						-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
						*filter: alpha(opacity=85);
						opacity: 0.85;				
					}

/* EMAIL SIGNUP */

/* Setting width to 1px solves the float/overflow-y conflict (mentioned above) in all browsers (width: 0
	doesn't work in IE7. The true width of 200px is applied to the form itself. */

#emailsignup {
	clear: both;
	float: left;
	width: 1px;			/* 1px width (reset later on form) prevents #emailsignup from messing up #content */
	height: 60px;
	margin: 30px -200px 0 15px;	/* negative right margin prevents #navigation from messing up #content */
	padding: 15px 199px 0 15px;	/* ie6/7 need the right padding when using the opacity filter */
	display: inline;			/* cures IE6 doubled margin float bug */
	z-index: 200;				/* layers #emailsignup above #footer */
	/* cross-browser opacity settings */		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		*filter: alpha(opacity=70);
		opacity: 0.70;
	}	
	#emailsignup:hover {
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			*filter:alpha(opacity=80);
			opacity: 0.80;
		}
		
		#emailsignup form {
			width: 200px;		/* true #emailsignup width */
			}
			* html #emailsignup form {
				_position: absolute;				/* ie6 needs this for the form to work */
				_filter: alpha(opacity=70);	/* position: absolute kills opacity. this replaces it */
				}
				
								
/* BANNER */
	
#banner {
	position: relative;		/* for placement of band name and ie vertical centering */
	top: -20px;					/* original design would've been -33px */
	height: 170px;
	}
	/* Ultra-Safe Hack for IE6: corrects problem with the float model */
	* html #banner {
		_left: -238px;			/* shifts to the left. #banner loses some width this way, but not too too much */
		}

	#banner .photo {
		display: none;
		}
							
	#banner .band {

		/* vertical centering for good browsers */
			height: 170px;
			display: table-cell;
			vertical-align: middle;		
			
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
			/*	filter:alpha(opacity=60); 		opacity applied to span instead to avoid cutoff problems */
			opacity: 0.60;
		
		font-weight: bold;
		font-size: 72px;
		letter-spacing: -7px;
		text-transform: lowercase;
		line-height: 0.8;
		}
		#banner .band span {
			padding: 0.25em 0.2em 0.25em 0;		/* protects letters from being cut off, esp. in IE */
			}

		/* Ultra-Safe Hacks for IE6 and IE7: this gives a completely different technique for vertical
			centering, based on a browser bug. */
			
		/* vertical centering for IE6 */
		* html #banner .band {
			_height: auto;
			_display: block;
			_vertical-align: baseline;
			_position: absolute; top: 50%;
			}
			* html #banner .band span {
				_position: relative; 
				_top: -50%; 
				_filter:alpha(opacity=60);
				_zoom: 1;		/* must have hasLayout for transparency filter to work */
				}
		/* vertical centering for IE7 */
		*:first-child+html #banner .band {
			*height: auto;
			*display: block;
			*vertical-align: baseline;
			*position: absolute; top: 50%;
			}
			*:first-child+html #banner .band span {
				*position: relative; 
				*top: -50%; 
				*filter:alpha(opacity=60);
				*zoom: 1;		/* must have hasLayout for transparency filter to work */
				}
		
					
/* CONTENT */
				
#content {
	height: 73%;
	margin: -28px 20px 0 350px;	/* controls width for fluid layout */
	padding: 0 35px 0 5px;			/* horizontal only--vertical would break the layout */
	overflow-y: auto;
	}
	/* Ultra-Safe Hack for IE6: corrects IE6 3px float offset bug */
	* html #content {
		_margin-left: 347px;
		}
	
	/* This code prevents the actual stuff in the #content from becoming too wide. Since IE6 doesn't
		understnd the child ">" selector, nor max-width, we hack. */
	#content>* {
		max-width: 700px;
		}
		/* Ultra-Safe Hack for IE6: applies an approximation of max-width */
		* html #content p,
		* html #content h2, * html #content h3, * html #content h4,
		* html #content ul, * html #content ol, * html #content dl,	
		* html #content form,
		* html #content .entry, * html #content .notes, * html #content .details, * html #content .contact {
			_width:expression(document.body.clientWidth > 1150? "700px": "auto" );
			}
	
	
/* FOOTER */
	
#footer 	{
	position: absolute;
	bottom: 30px;
	left: 30px;
	z-index: 10;		/* layers #footer below everything else */
	}

			
/* --- Text Styles & Minor Placement Adjustments ------------------------------- */

body {
	color: white;
	font: 15px Arial, Helvetica, sans-serif;
	line-height: 1.33;
	}

	/* transparencies */	
	h2, .music h3, .products h3, 
	#calendar .entry h4,	.photos dt,
	#footer p {
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
			*filter:alpha(opacity=70);
			opacity: 0.70;
			*zoom: 1;
		}	

	/* causes top of all elements within #content to line up with top of #navigation */
	#content p,
	#content h2, #content h3, #content h4,
	#content ul, #content ol, #content dl,	#content li, #content dt,
	#content form, #content img, #content blockquote,
	#content .entry, #content .details, #content .notes, #content .contact {
		margin-top: 0;
		}
		/* alignment tweaking (in conjuction with -ve margin-top on empty h1) */
		#content h3 {margin-top: 2px;}
		#content p {margin-top: 3px;}
		#content blockquote {margin-top: 3px;}
		#content dl {margin-top: 3px;}
		#content .entry {margin-top: 1px;}
		.home #content img {margin-top: 7px;}
		.photos #content dl {margin-top: 2px;}
		#calendar {padding-top: 7px;}

h1 { 
	height: 1px;
	margin: 0 0 -7px 0;
	}
	h1 span {display: none;}
				
h2, .music h3, .products h3 {			/* chosen to style these h3s like h2s */
	font-size: 1.5em;
	letter-spacing: -1px;
	margin-bottom: 0.33em;
	}
	/* Making these h2s & h3s smaller since they can appear several times on each page */
	#calendar h2, .links h2, .press h2, .news h2, .music h3, .products h3, #guestbook .entry h2 {
		font-size: 1.33em;
		}
	
h3 {
	font-size: 1em;
	margin-bottom: 0.33em;
	}
			
p {margin-bottom: 1em;}

blockquote {margin-bottom: 0.33em;}

address {font-style: normal;}
	
ul, ol, dd {
	margin-left: 30px;
	}	

/* .entry appears in: .contact, .bio, #calendar, .press, .news, .guestbook */			
.entry {
	margin-bottom: 1.66em;
	}
	/* .details appears in: #calendar (as a child of .entry), #music, #products */			
	.entry .details {
		margin-bottom: 1.66em;
		}
			
/* .caption appears in: 1) .press (child of .entry), 2) .products & .music (child of .details, not .entry) */
.caption {
	margin-bottom: 1em;
	}
	.press .entry .caption {
		text-align: right;
		margin-right: 75px;
		font-style: italic;
		}

/* .notes appears in .news only. Strangely, it uses hard-coded <br/> and offers little control */			
.notes br {line-height: 1em;}		/* slight tweak--doesn't work in WebKit */
	
#footer p {
	font-weight: bold; 
	margin: 0 0 1px 0;
	}	

	
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */
a {
	font-weight: bold; 
	text-decoration: none;
	border-bottom: 1px solid #aaa;				/* should be darker than text color */
	background: url('/shared/overlay/black25.png'); 
	}
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html a {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black25.png', sizingMethod='scale');
		_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
		}
	/* Ultra-Safe Hack for IE7: gets rid of transparent PNG on anything with opacity filter */
	*:first-child+html h3 a {
		*background: none;		/* IE can't handle the filter and the PNG on the same element */
		}  
	
	a:link 		{color: #ccc;}	
	a:visited	{color: #ccc;}
	a:hover 		{color: #eee; background: url('/shared/overlay/black35.png');}
	a:active		{color: #fff;}

		/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
		* html a:hover {
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black35.png', sizingMethod='scale');
			}

	h3 a:link		{color: #fff;}		/* reverts h3 links back to normal h3 color */
	h3 a:visited 	{color: #fff;}
	h3 a:hover 		{color: #eee;}
	h3 a:active		{color: #ccc;}
	
	.music h3 a {text-decoration: none;}	/* this is styled like an h2, so no underline */

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

	/* highlight current page */
	#navigation li a.highlight {
		/* cross-browser opacity settings */	
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
			*filter:alpha(opacity=95);
			opacity: 0.95;				
		}

/* email signup form elements */
#emailsignup form {
	font: bold 15px Arial, Helvetica, sans-serif;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 43px;
		}
	/* this is the entry box */
	#emailsignup input#list_email {
		border: none;	
		width: 100px;
		height: 1.33em;			/* 1.33em = 18px? */
		margin-right: 5px;
		padding: 1px 3px;
		color: #333;
		background: #fff;
		}	

		
/* --- ADDITIONAL PAGE-SPECIFIC STYLES ---------------------------------------------------------------------- */

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

/* HOME */
.home img {display: block;	margin: 1em 0;}

/* CONTACT */
.contact .name			{font-weight: bold;}
.contact .entry ul 	{list-style: none;}
	
/* CALENDAR */
#calendar .entry {
	padding: 1.33em 0 0 0;
	margin: 0 0 1.33em 0;
	border-top: 1px solid #fff;
	}
	/* Ultra-Safe Hack for IE6: gives hasLayout, curing a border rendering bug */
	* html #calendar .entry {
		_height: 1px;					/* doesn't affect layout since IE6 treats this as min-height */
		}
	#calendar .entry .details {
		margin: 1em 0 1em 30px;
		}
		#calendar .entry .details h4 {
			font-size: 1em;
			margin-bottom: 0; 		/*	was 0.33em; */
			}
	
/* LINKS */
.links dl 		{margin-bottom: 2em;}
	
/* PRESS */

/* NEWS */
.news .entry 	{margin-bottom: 2em;}

/* PHOTOS */
.photos dt	{
	font-weight: bold;
	font-size: 1.166em;
	margin-bottom: 0.66em; 
	}	
	.photos dd	{
		margin: 0 0 1.66em 0; 
		padding: 0;
		}	

/* PRODUCTS */

.products .details {
	margin-bottom: 2em;
	}
	.products .details dl {
		margin-bottom: 0;
		}
			
/* MUSIC */
.music .details {
	margin-bottom: 2em;
	}
	.music .details .artist 	{font-weight: bold;}
	.music .details .caption 	{margin-bottom: 0;}
	.music .details ul 			{margin-top: 0.33em !important; list-style: none;}
	
/* GUESTBOOK */

	/* transparencies */
	#postForm label, #postForm input, #postForm textarea, #postForm img {
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
			*filter: alpha(opacity=70);
			opacity: 0.70;	
			*zoom: 1;		/* gives hasLayout to IE 6/7, needed for transparency */
		}
		#postForm input:focus, #postForm textarea:focus, #postForm input[type="submit"]:hover {
			/* cross-browser opacity settings */		
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
				*filter: alpha(opacity=80) !important;
				opacity: 0.80 !important;				
			}
			
/* guestbook entry form */
#postForm {
	margin: 3px 0 30px 0;
	}
	/* Ultra-Safe Hacks for IE6: prevents #postForm and comments from jumping down on very narrow screens. Not
		stricly necessary, but it helps. */
	* html #postForm {
		_position: absolute; 
		_top: -6px;
		}
	* html .guestbook h1 {
		_margin-bottom: 365px;
		}
		
	#postForm label {
		display: block;
		font-weight: bold;
		}
	/* this affects both the entry boxes and the button */
	#postForm input {
		width: 300px;
		}
		/* this affects entry boxes only */
		#postForm input#gbname, 
		#postForm input#gbaddress, 
		#postForm input#security_code, 
		#postForm textarea {
			display: block;
			width: 390px;
			border: none;
			margin-bottom: 15px;	
			padding: 2px 5px;
			color: #333;				/* overrides previous settings */
			background: white;		/* overrides previous settings */
			font: 1em Arial, Helvetica, sans-serif;	/* overrides previous settings */
			}
		/* this affects the textarea box only */	
		#postForm textarea {
			height: 100px;
			margin-bottom: 0 !important;		/* forces browser constistency */
			overflow-y: auto;						/* auto-hides scrollbar in ie */
			}

	/* captcha image */	
	#postForm #gbimage {
		position: absolute;
		margin-top: 15px;							/* replaces lost margin-bottom from #gbcomment */
		}
	/* captcha "security code" text label */	
	#postForm label.security_code_label {
		margin-top: 15px;							/* replaces lost margin-bottom from #gbcomment */
		margin-left: 120px;
		}
	/* captcha entry box */	
	#postForm input#security_code {
		width: 270px !important;
		margin-left: 120px;
		}

/* previous guestbook entries */		
#guestbook .entry	{
	padding: 2px 0;
	margin-bottom: 1em;
	}				
	#guestbook .entry h2	{
		font-size: 1.166em;
		padding-bottom: 4px;
		margin-bottom: 0;
		border-bottom: 1px solid #fff;
		}
	#guestbook .entry h3	{
		margin-bottom: 0.33em;
		font-size: 1em;
		text-align: right;
		}

		
/* --- FLYOUT SUB-MENUS ------------------------------------------------------------------------------------- */

/* --- Resets for Sub-Navigation (Flyouts) --- */
			
		/* Resets subnav ul to defaults. Added "body" in front to increase 
			specificity and reduce cascade problems. */	
		body #navigation ul.subnav, body #navigation ul.subnav li, body #navigation ul.subnav li a {	
			width: auto; height: auto; 
			min-width: 0; min-height: 0; max-width: none; max-height: none;
			margin: 0; padding: 0; border: none; background: none;
			text-align: left;
			line-height: 1;
			}

/* --- Changes to Main Navigation --- */

#navigation ul#navlist li {
	position: relative;			/* used as a reference for subnav */
	_width: 100%;					/* gives hasLayout to IE6, preventing more spacing problems */
	}
	/* Flyout Arrows */
	#navigation ul#navlist li.hasflyout a span {
		padding-right: 15px;
		background: url(/shared/overlay/rightarrow-white.gif) right 6px no-repeat !important;
		}

	/* Hover Highlight/Layering */
	#navigation ul#navlist li:hover,
	#navigation ul#navlist li.sfhover {
		z-index: 999;		/* forces submenu to overlap all of the main navigation links and #emailsignup */
		}

	/* Ultra-Safe Hacks for IE6 and IE7: this eliminates strange gap that appears when a li in the main nav
		has a subnav that also has li in it. The margin is reduced using ems because the size of the gap
		depends on the font size used in the main nav. */
	* html             #navigation ul#navlist li.hasflyout 	{*margin-bottom: -0.23em;}
/*	*:first-child+html #navigation ul#navlist li.hasflyout 	{*margin-bottom: -0.23em;} not needed this time */
		
			
/* --- Positioning and Hover Effect for Sub-Navigation (Flyouts) --- */
				
#navigation li ul.subnav {
	display: block;
	position: absolute;
	z-index: 999;
	top: -9999px;			/* hides menu offscreen when it isn't being hovered (better accessibility) */
	right: 9999px;			/* hides menu offscreen when it isn't being hovered (better accessibility) */
	width: 200px;
	padding: 0;
	}
	#navigation li:hover ul.subnav,
	#navigation li.sfhover ul.subnav {
		top: -2px;			/* causes subnav to appear on hover (it's critical that there's no gap) */
		left: 100px;		/* causes subnav to appear on hover (it's critical that there's no gap) */
		}

/* --- Styling for Sub-Navigation (Flyouts) --- */
	
	#navigation li ul.subnav li {
		border-top: 1px dotted #4a4a4a;
		font-size: 1px;		/* this odd bit of code prevents IE 6/7 from inserting extra space below li */
		}	
		#navigation li ul.subnav li:first-child {
			border-top: none;
			}	
			
	#navigation li ul.subnav li a {
		display: block;
		padding: 6px 7px;
		font-size: 14px;
		font-weight: bold;
		color: #4a4a4a;
		background: #ccc;
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=92)" !important;
			*filter: alpha(opacity=92) !important;
			opacity: .92 !important;
			*zoom: 1;				
		}
		#navigation ul.subnav li a:hover 	{color: #ccc; background: #4a4a4a;}


/* --- VARIATION -------------------------------------------------------------------------------------------- */
/* ---- CODE ------------------------------------------------------------------------------------------------ */

/* overlay color */			
body {
	background: url(/shared/overlay/ol-midnightstrong.png);
	}
	* html body {_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/ol-midnightstrong.png', sizingMethod='scale');
		}

/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */ 

a {border-color: #a5a9b8; background: url('/shared/overlay/black30.png');}		/* band name -10% brightness */
	
	a:link 		{color: #b5bac9;}		/* color source: band name (over overlay over ~50% grey) */
	a:visited	{color: #b5bac9;}		/* color source: band name */
	a:hover 		{color: #dddbea; background: url('/shared/overlay/black45.png');}	/* from hovered emailsignup */
	a:active		{color: #fff;}

	/* Ultra-Safe Hacks for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html a {_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black30.png', sizingMethod='scale');
		}
		/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
		* html a:hover {_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black45.png', sizingMethod='scale');
			}
	
	h3 a:link		{color: #fff;}		/* reverts h3 links back to normal h3 color */
	h3 a:visited 	{color: #fff;}
	h3 a:hover 		{color: #dddbea;}		/* color source: hovered #emailsignup box */
	h3 a:active		{color: #b5bac9;}		/* color source: band name */
	
/* navigation links */

	#navigation li a:link 		{color: #fff;}
	#navigation li a:visited	{color: #fff;}
	#navigation li a:hover 		{color: #fff;}
	#navigation li a:active		{color: #b5bac9;}		/* color source: band name */


/* --- Styling for Sub-Navigation (Flyouts) ------------------------------------------ */
	
#navigation li ul.subnav li {border-color: #151f45;}	/* color source: lighter than shadow */	
			
	#navigation li ul.subnav li a 			{color: #151f45; background: #b5bac9;}		
	#navigation li ul.subnav li a:hover 	{color: #b5bac9; background: #151f45;}		

body.flash_player_frame {
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader.Enabled=false;
}