/* LENS template stylesheet

	graphic design, interactive design, coding: Andrew Tay (www.andrewtay.com) December 2009/February 2010
	
	This template uses several transparent background images that have to line up perfectly to achieve the right
	effect. Opacities used to create backgrounds:
	
		New Shades:	Light 45%	Lighter 60%		Lightest 80%	White
		New Shades:	Dark 50%		Darker 65%		Darkest 80%		Black
	
	Known issues:
	- Opera 9 won't make navigation text translucent.
	- this template uses position: fixed for #navigation and #emailsignup. This isn't supported in IE6, and
	  there aren't any workarounds available due to the div structure in the HTML code.
	- subnav menus aren't positioned correcly in IE6 (too high, and height is inconsistent).
		 
	VARIATION FILE: all unique colors and transparency settings are given at the end of the file for ease of
						 maintenance; however the transparent background images were changed be search and replace
						 through the main body of the code.
		
*/

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

	html, body, div, form	{margin: 0; padding: 0}		/* clears block margins/padding */
	img							{border: none;}				/* clears all image borders */

	h1, h2, h3, p, dl 		{margin: 0;}
 	ul, ol 						{margin: 1em 0 1em 35px; padding: 0;} 	/* firefox defaults */

									
/* --- GENERAL PAGE LAYOUT -------------------------------------------------------------- */

html {height: 100%;}		/* needed to pass full screen height onto #footer */

/* 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. */
body {
	height: 100%;			/* needed to pass full screen height onto #footer */
	text-align: left;
	background-color: #666;
background: url(images/image13.jpeg) left top fixed
	}

/* ACCESSIBILITY and CONTAINER */	

#accessibility {
	display: none;
	}
	
#container {
	height: 100%;			/* needed to pass full screen height onto #footer */
	padding: 1px;			/* top/bottom padding prevents margin collapsing, l/r gives extra space for bg shadow */
  	}

	
/* NAVIGATION */	

#navigation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	}
	/* Ultra-Safe Hack for IE6: IE6 doesn't understand position: fixed, so we use absolute instead */
	* html #navigation {
		position: absolute; 
		}
		
	#navigation ul {
		margin: 0 597px 0 0;		/* (552 + 25 + 20) + 10 li -- margin prevents overlap w/ banner and content */
		padding: 15px 0 0 15px;
		list-style: none;
		font: bold 1.167em Georgia, "Times New Roman", Times, serif;
		line-height: 1.66em;
		}		
		/* Ultra-Safe Hack for IE6: IE6 ignores the right padding on the li--this replaces it */
		* html #navigation ul {
			_padding-right: 0.66em;
			}

	/* NAVIGATION LIST ITEMS */
		
		#navigation li {
			display: inline;
			padding-right: 0.66em;
			}
			
	/* COOL INTERACTIVE NAVIGATION BUTTON EFFECT THINGS */
			
		/* Using a clever drop shadow effect on these links. */	

		/* A) Navigation - Normal Links */
		#navigation li a {
			position: relative;
			top: 1px;				/* corrects link offsets (see below) */
			left: 1px;				/* corrects link offsets (see below) */
			}
			/* Ultra-Safe Hack for IE6: prevents rendering bug by removing positioning. */
			* html #navigation li a {
				_position: static;		/* position: relative; caused hovered links to disappear in IE6 */
				}
			
			#navigation li a span {
				position: relative;
				top: -1px;			/* offsets link rectangle from shadow rectangle ("a span" from "a") */
				left: -1px;			/* offsets link rectangle from shadow rectangle ("a span" from "a") */
				}
				/* Ultra-Safe Hacks for IE6 and IE7: must have layout for offsets to work in IE6/7 */ 
				* html #navigation li a span					{_zoom: 1;}
				*:first-child+html #navigation li a span 	{*zoom: 1;}

		/* B) Navigation - Hovered Links */
		#navigation li a:hover {
			background: url('shared/lens/shadow-navbuttons-black10.png') right bottom no-repeat;	
			}
			#navigation li a:hover span {
				background: url('shared/lens/white30.png');	
				}

		/* C) Navigation - Active Links: creates pressed-button effect when link is clicked (not in IE6/7) */	
		#navigation li a:active {
			background: none;		
			-moz-outline: none;		/* FF proprietary: removes focus outline, which was distracting */
			}
			#navigation li a:active span {
				background: url('shared/lens/white45.png');	
				top: 0px;			/* adjusts offset when button is pressed */
				left: 0px;			/* adjusts offset when button is pressed */
				}

		/* D) Navigation - Ultra-Safe Hacks for IE6: alpha filter for alpha-transparent PNG. This looks a bit
								 different due to the limitations of the filter. Deliberately not giving hasLayout
								 to IE6 so we can remove the shadow effect. */
		* html #navigation li a:hover {
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/black10.png', sizingMethod='scale');
			}
			* html #navigation li a:hover span {
				_background: none;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/white30.png', 	sizingMethod='scale');
				}
					
/* Transparent nav text. Doesn't work in Opera 9 for who knows what reason. */
#navigation li a, #navigation li:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
	opacity: 0.65;}
	#navigation li a:hover {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		opacity: 0.90;}
	/* restore full opacity for subnav */	
	#navigation li ul.subnav li a {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		opacity: 1;}
	
	/* Ultra-Safe Hacks for IE6/7: IE prefers opacity to be applied to the span */
	* html #navigation li a span {_filter: alpha(opacity=65);}
	
	*:first-child+html #navigation li a span {*filter: alpha(opacity=65);}
	*:first-child+html #navigation li:hover a span {*filter: none;}	

					
/* EMAIL SIGNUP */

#emailsignup {
	position: fixed;
	left: 0;
	bottom: 5px;
	margin-right: 572px;		/* (552 + 25 - 5) + 30 padding -- margin prevents overlap w/ content and footer */
	padding: 20px 30px 15px 15px;		/* simply expands hover area */
	/* cross-browser opacity settings */		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		*filter: alpha(opacity=50);
		opacity: 0.50;
	}
	/* Ultra-Safe Hack for IE6: IE6 doesn't understand position: fixed, so we use absolute instead */
	* html #emailsignup {
		_position: absolute; 
		}
	
	#emailsignup:hover {
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
			*filter: alpha(opacity=65);
			opacity: 0.65;
		}	

		
/* BANNER */
	
#banner {
	position: relative;		/* reference for .band positioning */
	float: right;
	width: 460px;
	padding: 20px 46px 20px 46px;
	background: url('shared/lens/banner-side-darkest.png') top left repeat-y;
	/* text styling */
		color: black;
		font: bold 38px Georgia, "Times New Roman", Times, serif;
		letter-spacing: -2px;
		line-height: 0.9em;
	}
	/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html #banner {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/banner-side-darkest.png', sizingMethod='scale');
		}

	/* Band Photo - This places the shadows */
	#banner .photo {
		position: relative;
		width: 460px;		/* gives hasLayout to IE6/7 */
		top: 1px;			/* 1px offset from the main band name */
		left: 1px;			/* 1px offset from the main band name */
		z-index: 300;
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
			*filter:alpha(opacity=25);
			opacity: 0.25;
		}
		/* Photo Span - These are the shadows of the band photo and name */
		#banner .photo span {
			display: block;
			padding-bottom: 255px;
			background: url('shared/lens/shadow-userimages-side.gif') bottom left no-repeat;
			}

	/* Band Band - This places the photo/name */
	#banner .band {
		position: absolute;
		top: 20px;
		left: 46px;
		z-index: 300;
		}
		/* Band Span - This is the band photo and band name. Photo dimensions are 460px x 200px. */
		#banner .band span {
			display: block;
			width: 460px;
			padding-bottom: 255px;
background: url(images/timemag-cropped-topphoto.jpg) left bottom no-repeat;
			}


/* CONTENT */
				
#content {
	clear: right;
	float: right;
	width: 460px;
	padding: 0 46px;
	background: url('shared/lens/content-side-darkest.png') top left repeat-y;
	}
	/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html #content {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/content-side-darkest.png', sizingMethod='scale');
		}
	
	/* TRANSLUCENT BACKGROUNDS within CONTENT */

	/* Because this design uses cutouts in the translucent background as a visual signature, the actual bg
		images must be applied to individual child elements of #content, and they must all line up with each other
		and with the main	backgrounds without overlapping. */
	#content>*,												/* default styling for all immediate children */
	#content #press>h2,									/* needed for hostbaby 2 (different div structure) */
	#content #calendar>p, #content #calendar>a, 	/* for show past dates, RSS feed */
	#content #guestbook>a {								/* for next/prev page */
		display: block; 			/* needed for "show past dates" link on old wizard */
		margin: 0;					/* discourages gaps... */
		border: none;				/* removes link underline */	
		background: url('shared/lens/cutout-generalcontent-darkest.png') left top repeat-y;
		}

		/* Ultra-Safe Hack for IE6: IE6 doesn't understand the direct child selector ">", so we need to
			select each child one-by-one, and then reset for any descendants that aren't direct children. */
		* html #content p, 
		* html #content a,
		* html #content h1, * html #content h2, * html #content h3, * html #content h4,
		* html #content ul, * html #content ol, * html #content dl,
		* html #content form, * html #content img, * html #content blockquote,
		* html #content .entry, * html #content .details, * html #content .notes, * html #content .contact,
		* html #content table#calendar,		/* for calendar past dates table */
		* html #content #contacts,	* html #content #bios,	/* for new Hostbaby2 div nesting*/
		* html .blog #content #news,								/* for new Hostbaby2 div nesting*/
		* html #content #postForm,   			/* for guestbook */ 
		* html #content #guestbook a {		/* for next/prev page */  
			_display: block;
			_margin: 0;
			_border: none;
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-generalcontent-darkest.png', sizingMethod='scale');
			_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
			}
			/* Ultra-Safe Hack for IE6: this prevents the transparency filter from messing up links. */
			* html #content a {
				_position: relative;	
				}

			/* Ultra-Safe Hack for IE6: One-by-one reset for descendents that aren't direct children, and 
				therefore don't need a translucent background image. */
			* html #content .entry p,
			* html #content .entry h2,	* html #content .entry h3,	* html #content .entry h4,
			* html #content .entry ul, * html #content .entry ol, * html #content .entry dl,
			* html #content .entry blockquote,
			* html #content .entry .details,
			* html #content .entry .notes,
			* html #content .details ul, * html #content .details ol, * html #content .details dl,
			* html #content table#calendar *,		/* for calendar past dates */
			* html .blog #content #news h2,	* html .blog #content #news p,	/* for new Hostbaby2 div nesting*/
			* html #content div form,					/* esp. for guestbook form */
			* html #content div .entry, 				/* esp. for guestbook entries */ 
			* html #content #guestbook .entry a { 	/* esp. for guestbook links */ 
				_filter: none;
				}		
			/* Additional reset for links. These should also be inline by default. */
			* html #content * a {
				_display: inline;
				_filter: none;
				}
			/* Additional reset for descendant images. */
			* html #content * img {
				_filter: none;
				}

	
/* FOOTER */
	
#footer 	{
	clear: right;
	float: right;
	width: 460px;
	height: 100%;				/* this forces transparent bg to reach the bottom of the page */
	padding: 0.66em 46px 1.33em 46px;
	background: url('shared/lens/banner-side-darkest.png') top left repeat-y;
	}
	/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html #footer {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/banner-side-darkest.png', sizingMethod='scale');
		}
	

/* GENERAL FLOAT PLACEMENT */	

#banner, #content, #footer {
	margin-right: 25px;		/* placement adjustment for this layout */
	display: inline;			/* cures IE6 doubled margin float bug */
	}

#containermiddle1, #containermiddle2 {
	display: none;				/* these new empty divs caused a 1px gap in ie */
	}
			
/* --- Text Styles & Minor Placement Adjustments ------------------------------- */

body {
	color: black;
	font: 93.75% Georgia, "Times New Roman", Times, sans-serif;		/* 93.75% = 15px */
	line-height: 1.33;
	}

/* H1 - This places the 4px thick horizontal line and extra spacing at the top of content. */
#content h1 {
	height: 4px;
	padding-bottom: 21px;
	background: url('shared/lens/cutout-h1-darkest.png') top left repeat-y;
	}
	/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html #content h1 {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-h1-darkest.png', sizingMethod='crop');
		}
	
	#content h1 span {
		display: none;
		}
	
/* H2 & H3 - These are styled together. */				
h2, .music h3, .products h3 {			/* chosen to style these h3s like h2s */
	padding: 0 0 1em 0;
	font: bold 1.26em "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	}
	.music h3 {
		text-align: left;
		padding-bottom: 0.66em;
		}

h3 {
	font-size: 1em;
	margin-bottom: 0.33em;
	}
	.bio h2, .contact h2, .music h2	{font-size: 1.533em;}	/* major centered headings: 1.533em = 24px; */
	#calendar h2, .press h2				{font-size: 1.33em;}		/* minor centered headings: 1.33em = 20px; */

	/* H2 & H3 CUTOUTS */
	.links #content h2, .news #content h2, .products #content h3 {
		text-align: left;
		padding-left: 30px;
		background: url('shared/lens/cutout-h2-darkest.png') left top repeat-y;
		}
		/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG. */
		* html .links #content h2, * html .news #content h2, * html .products #content h3 {
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-h2-darkest.png', sizingMethod='crop');
			_zoom: 1;
			}
			
p 				{padding-bottom: 1em;}		/* replaces margin-bottom: 1em; */
blockquote 	{margin-top: 0;}
address 		{font-style: normal;}
ul, ol, dd 	{margin-left: 30px;}	

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

/* .notes appears in .news only. Strangely, it uses a hard-coded <br/> and offers little control */			
.notes br {line-height: 1em;}		/* slight tweak--doesn't work in WebKit */
	
#footer p {
	font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	}	


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

/* general links */
#content a {
	font-weight: bold; 
	text-decoration: none;
	border-bottom: 1px dotted #444;	/* ie6 ignores this because of low specificity (this is not a problem) */
	}
	a:link 		{color: #222;}	
	a:visited	{color: #444;}
	a:hover 		{color: #222; background: url('shared/lens/white25.png');}
	a:active		{color: #000; background: url('shared/lens/white45.png');}

	h3 a:link		{color: #000;}		/* reverts h3 links back to normal h3 color */
	h3 a:visited 	{color: #000;}
	h3 a:hover 		{color: #222;}
	h3 a:active		{color: #000;}

	/* Removes border on calendar "show past dates", etc. -- only needed for wizard 1 */
	#content>a 		{border: none !important; text-decoration: underline; padding-bottom: 1em;}	
		#content>a:link 		{color: #222;}	
		#content>a:visited	{color: #222;}
		#content>a:hover 		{color: #000;}
		#content>a:active		{color: #000;}
		
	/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG. */
	* html #content * a {
		border-bottom: 1px dotted #444;		/* assigns border only most links, but not "show past dates" */
		}
		* html #content a:hover,
		* html #content #guestbook .entry a:hover {
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/white25.png', sizingMethod='scale');
			}
			
/* navigation links */
#navigation li a 				{border: none; text-decoration: none;}
	#navigation li a:link 		{color: #eee;}
	#navigation li a:visited	{color: #eee;}
	#navigation li a:hover 		{color: #eee;}
	#navigation li a:active		{color: #eee;}

	/* highlight current page */
	#navigation li a.highlight {
		text-decoration: underline;
		}

/* email signup form elements */
#emailsignup form {
	color: white;
	font: bold 17px Georgia, "Times New Roman", Times, 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-left: 5px;
		padding: 1px 3px;
		color: #333;
		background: #fff;
		}	

		
/* --- Images -------------------------------------------------------------- */
		
/* GENERAL IMGs (e.g. on Photo page) - Adds translucent drop shadow to all images except home page image. 
	It doesn't work in IE6, but degrades nicely (the shadow simply doesn't appear). */
#content * img, #splashimage a img {
	background: url('shared/lens/shadow-generalimages.png') top left no-repeat;
	padding: 0 1px 1px 0;
	}

/* HOME PAGE IMAGE - This img presented some difficulty as there's no parent div that we can use to place the
	translucent	background. Solution? Scale the image to a fixed width and give it a fixed padding so that we 
	can be sure	that it (and the bg) will fill the entire width of #content. Applied to all immediate child
	images as a precaution. */

/* For most browsers (not IE6): adds drop shadow */
#content>img {
	width: 350px;
	height: auto;						/* maintains image proportions, overriding px height hard coded in HTML */
	padding: 0 55px 1px 55px;		/* for shadow, normal bottom padding had to be eliminated */
	background: url('shared/lens/shadow-homeimage-darkest.png') top left repeat-y;
	}
	/* For most browsers (not IE6), adds top padding to any p that immediately follows */
	#content>img+p {
		padding-top: 1em;
		}		
		
	/* Ultra-Safe Hack for IE6: IE6 doesn't understand the direct child selector ">". */
	* html .home #content img {
		width: 350px;
		height: auto;					/* maintains image proportions, overriding px height hard coded in HTML */
		margin: 0 !important;		/* overrides margins for inline floated images */
		padding: 0 55px 1em 55px;	
		background: none;
		}
		
		
/* --- ADDITIONAL PAGE-SPECIFIC STYLES ---------------------------------------------------------------------- */

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

/* HOME */


/* CONTACT */
.contact .name			{font-weight: bold;}
.contact .entry ul 	{list-style: none;}

/* BIO */
	
/* CALENDAR */

/* The Wizard code is weird in that there is a #calendar div for current dates and a #calendar table for past
	dates. This styling applies only to the div. */
#content div#calendar {
	padding-right: 0;
	background: none;
	position: relative;
	}
	
	/* CALENDAR ENTRY CUTOUTS - Large translucent background with separator line cutout at top. */
	#content div#calendar .entry {
		padding: 1.66em 0 0.66em 0;	/* top/bottom padding replaces top/bottom margins */
		background: url('shared/lens/cutout-calendarentry-darkest.png') left top repeat-y;	
		}
		/* this removes the separator line from the first calendar entry (not for IE6) */
		#content div#calendar .entry:first-child {
			padding-top: 0;
			background-position: left -5px;
			}
		/* this restores spacing at the top of #calendar on the home page (not for IE6) */
		#content p+div#calendar {
			padding-top: 20px;
			background: url('shared/lens/cutout-generalcontent-darkest.png') left top no-repeat;	/* spacing */
			}

		/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
		* html div#calendar .entry {
			_background: none !important;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-calendarentry-darkest.png', sizingMethod='crop');
			_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
			}

	div#calendar .entry .details {
		margin: 1em 0 1em 30px;
		padding-bottom: 0;
		}
		div#calendar .entry .details h4 {
			font-size: 1em;
			margin: 0;
			}

	/* RSS feed - unlike the News and Blog RSS feeds, this isn't contained within an <h2></h2>, so it doesn't
		have its own trans background. Unfortunately, setting a trans background would replace the feed icon,
		so we're stuck with this absolute positioning nonsense. */
	#content a.calendar_rss_feed {
		position: absolute;
		font: bold 12px "Trebuchet MS", arial, helvetica, sans-serif;
		z-index: 9999;
		}
	.home #footer 		{padding-top: 2em;}		/* this creates extra space for the RSS feed link */
	.calendar #footer {padding-top: 3.33em;}	/* this creates extra space for the RSS feed link */

	
/* LINKS */
.links dl {
	padding-bottom: 2em;	
	}

	
/* PRESS */

/* PRESS ENTRY CUTOUTS - this code places left and right quotes around the blockquote using three separate
	transparent PNGs. The .entry block and the blockquote block are exactly the same size and overlap
	completely, but the PNGs are designed not to interfere with each other. */
.press #content .entry {
	position: relative;		/* positioning reference for .caption */
	margin-bottom: 60px;		/* creates fixed-size gap for caption */
	padding: 0;
	background: url('shared/lens/cutout-pressquotesleft-darkest.png') left top repeat-y;
	}
	/* Ultra-Safe Hack IE7: gives hasLayout. */
	*:first-child+html .press #content .entry {*zoom: 1;}		/* ie7 needs this or all hell breaks loose */

	.press #content .entry blockquote {
		margin: 0;
		padding: 5px 40px 8px 40px;
		background: url('shared/lens/cutout-pressquotesright-darkest.png') right bottom repeat-y;
		}
	.press #content .entry .caption {
		position: absolute;
		left: 0;
		bottom: -60px;			/* shifts .caption into gap */
		width: 380px;
		height: 60px;			/* sets .caption to same fixed-size as gap */
		padding: 0 40px;
		background: url('shared/lens/cutout-generalcontent-darkest.png') repeat-y;
		}

	/* Ultra-Safe Hacks for IE6: IE can't use the above technique because .caption would disappear when
		positioned outside of .entry. So we're resetting everything and just using the left quote. */
	* html .press #content .entry {
		_position: static;
		_margin: 0;
		_background: none !important;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-pressquotes-ie6-darkest.png', sizingMethod='crop');
		_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
		}
		* html .press #content .entry blockquote {
			_background: none !important;
			}
		* html .press #content .entry .caption {
			_position: static;
			_background: none !important;
			}
		
	/* This fixes layout for custom press pages */
	.press #content #press {
		margin: 0;
		padding: 0;
		background: none;
		}


/* NEWS */

/* Since the h2 is contained within the .entry div, we must use a single graphic for both the .entry background
	and the h2 square cutout. As of Wizard 2, all news entries are contained within a #news div (much like
	#calendar or #guestbook). */

/* Reset parent #news div */	
.news #content #news {
	padding: 0;		
	background: none;
	}
	/* Ultra-Safe Hack for IE6: resets IE6-only alpha filter */
	* html .news #content #news {
		_filter: none;
		}

	.news #content .entry {
		padding: 0 0 2em 0;
		background: url('shared/lens/cutout-newsentryh2-darkest.png') left top repeat-y;
		zoom: 1;						/* ie7 needs hasLayout to prevent a rendering bug */
		}
		/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
		* html .news #content .entry {
			_background: none !important;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-newsentryh2-darkest.png', sizingMethod='crop');
			}
			/* makes text selectable again (keeps filter from messing it up) */
			* html .news #content h2 a, * html .news #content .notes {
				_position: relative;			
				}

		
		/* News RSS Feed - removes h2 styling for the new RSS feed thingy (no idea why this is coded as an <h2> */
		.news #content h2 {
			padding-left: 0;
			background: url('shared/lens/cutout-generalcontent-darkest.png') left top repeat-y;
			}
			/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
			* html .news #content h2 {
				_padding: 0;
				_background: none;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-generalcontent-darkest.png', sizingMethod='scale');
				_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
				}

			/* styling for the RSS feed link itself */
			.news #content a.news_rss_feed {
				border: none;
				background-position: center left !important;
				padding: 0 0 0 19px !important;
				}

			/* restores h2 styling for the real <h2>s */
			.news #content .entry h2 {
				padding: 0 0 1em 30px;
				background: none;
				}
				/* restores h2 styling for the real <h2>s */
				* html .news #content .entry h2 {
					_filter: none;
					}

					
	/* Ultra-Safe Hacks for IE6: The wizard produces a strange empty <a> before the h2, which pushed
		the h2 down in IE6 only. This fixes it. */
	* html .news #content .entry a {
		_display: none;
		}
		* html .news #content .entry h2 a,
		* html .news #content .entry .notes a {
			_display: inline;
			}

			
/* PHOTOS */

/* Standard Photo Gallery */
.photos #content dt {
	margin: 0;
	padding: 0 0 0.66em 0; 
	font-weight: bold;
	font-size: 1.166em;
	}	
	.photos #content dd {
		margin: 0;						/* overrides default left margin */
		padding: 0 0 1.66em 0;		/* top/bottom padding replaces top/bottom margins */
		}
		
	/* This limits photo width to 450px, now that the wizard is no longer doing it. Doesn't affect Lytebox. */
	.photos dl img {
		max-width: 450px;
		}
		/* Ultra-Safe Hack IE6: this is the IE6 equivalent of max-width */
		* html .photos dl img {
			_width: expression(this.width > 450 ? "450px" : "auto");
			}
	
/* Lytebox Photo Gallery */
.photos #content .hb_lytebox_class dl {
	padding-bottom: 1em;
	}
	
	.photos #content .hb_lytebox_class dd {
		margin-right: 5px;		/* horizontal spacing between images */
		vertical-align: 2px;	/* additional vertical spacing below images (doesn't work in Opera) */
		}
		/* Ultra-Safe Hack IE7: more spacing */
		*:first-child+html .photos #content .hb_lytebox_class dd {vertical-align: 14px;}		
		
		.photos #content .hb_lytebox_class dd a {
			border: none;			/* removes link underline */
			font-size: 9px;		/* controls size of hover rectangle (ie ignores it, opera expands it) */
			zoom: 1;					/* ie needs this to be able to show link hover bg */
			}
			.photos #content .hb_lytebox_class dd a img {
				margin: 0 0 12px 0;	/* controls distance between bottom of image and baseline */
				}
	
	
	/* Ultra-Safe Hacks for IE6: Okay, this isn't IE6's fault. As of Dec. 2009, there's a stray dl tag in the
		code for the new lytebox gallery, causing filter to display twice. This crudely fixes it. */
	* html #content .hb_lytebox_class dl dl,	* html #content .hb_lytebox_class dl h2 {			
		filter: none; 
		}

			
/* PRODUCTS */
.products .details {
	padding-bottom: 2em;		/* top/bottom padding replaces top/bottom margins */
	}
	.products .details dl {
		margin-bottom: 0;
		}
			
/* MUSIC */

/* MUSIC DETAILS - this code clears the details area for cutouts, except for a separator/spacer at bottom
	(which, of coursee, doesn't work in IE6) */
.music #content .details {
	margin: 0;
	padding: 0 0 53px 0;
	background: url('shared/lens/cutout-musicdetails-darkest.png') left bottom no-repeat;	/* separtr/spacing */
	}
	.music #content .details:last-child {
		padding: 0 0 20px 0;
		background-image: url('shared/lens/cutout-generalcontent-darkest.png'); /* no separator/less spacing */
		}

	/* Ultra-Safe Hack for IE6: clears backgrounds, filters, and spacing */
	* html .music #content .details {
		_padding: 0;
		_background: none;
		_filter: none;			/* remove previously set background so we can have cutouts instead */
		}

	/* Ultra-Safe Hacks for IE6: spacing adjustments, since we can't use the separator on .details */
	* html .music #content h1										{_padding-bottom: 0;}
	* html .music #content h2, * html .music #content h3 	{_padding-top: 1em; _padding-bottom: 0;}
				
/* MUSIC LIST ITEM CUTOUTS - this code places cutout bullet points to the left of every music link. */
.music #content .details ul {
	margin: 0;
	padding: 20px 0 0 0;
	list-style: none;
	background: url('shared/lens/cutout-generalcontent-darkest.png') left top no-repeat;	/* top spacing */
	}
	.music #content .details ul li {
		margin: 0;
		padding: 0 0 0.33em 30px;
		list-style: none;
		background: url('shared/lens/cutout-musicclip-darkest.png') left top repeat-y;	/* cutout bullet */
		}
			
	/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html .music #content .details ul {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-generalcontent-darkest.png', sizingMethod='crop');
		_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
		}
		* html .music #content .details ul li {
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-musicclip-darkest.png', sizingMethod='crop');
			_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
			}
		
	 
/* MUSIC NON-CUTOUTS - this code places standard backgrounds for .artists, .caption, .description, .lyrics */
.music #content .details .artist 		{font-weight: bold;}
.music #content .details .caption 		{margin: 0;	padding: 0;}
.music #content .details .lyrics 		{font-style: italic;}
.music #content .details .description, .music #content .details .lyrics	{
	margin: 0; padding: 1em 30px;
	}
	.music #content .details .artist, 
	.music #content .details .caption,
	.music #content .details .description,
	.music #content .details .lyrics {
		background: url('shared/lens/cutout-generalcontent-darkest.png') left top repeat-y;
		}

		/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
		* html .music #content .details .artist, 
		* html .music #content .details .caption {
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-generalcontent-darkest.png', sizingMethod='scale');
			_zoom: 1;					/* IE6 needs hasLayout for the filter to work */
			}
		/* Ultra-Safe Hacks for IE6: no new filters necessary; already applied to all blockquotes */
		* html .music #content .details .description,
		* html .music #content .details .lyrics {
			_background: none;		
			_font-style: normal;		/* this prevents IE6 from expanding .lyrics horizontally and breaking layout */
			}
				
				
/* FORM SUBMIT BUTTONS, INPUTS, TEXTAREAS */

/* Inputs/Textareas - this affects the Listbaby form and the Blog form */		
.home table input[type="text"], .home table select,
.blog #comment_form input[type="text"], .blog #comment_form textarea {
	padding: 2px 5px !important;		/* overrides inline styles in the HTML */
	border: none !important;
	background: url('shared/lens/shadow-guestbooktextarea.png') bottom right;
	/* cross-browser opacity settings */		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
		*filter: alpha(opacity=55);
		opacity: 0.55;	
		*zoom: 1;		/* gives hasLayout to IE 6/7, needed for transparency */
	}
	.home table input[type="text"]:focus, .home table select:focus,
	.blog #comment_form input[type="text"]:focus, .blog #comment_form textarea:focus {
		/* 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 */
		}
		
	/* Listbaby form: draws border around country select box */	
	.home table select {
		border: 1px solid #666 !important;
		padding: 1px !important;		/* overrides inline styles in the HTML */
		background: white;				/* overrides setting above */
		}
		
	/* Listbaby form: increases spacing between input boxes */	
	.home table tr {
		height: 1.66em;		
		}

	/* Listbaby form: re-centers submit button (overriding inline styles), but restores right alignment for
		select box label. Doesn't work in IE. */	
	.home table tr:last-child td {
		text-align: center;
		padding-top: 10px;
		}
		.home table tr#list_tr_country:last-child td {
			text-align: right;
			padding: 0;
			}

	/*	Ultra-Safe Hack for IE6: like links, these must have position to keep from getting screwed-up by the
		transparency filter */
	* html input, * html textarea {			
		position: relative !important;
		}
			
			
/* BLOG */

/* The Guestbook page and the new Blog pages handle comments similarly. The only difference is the	name of the
	containing div: in the Guestbook, it's id'd as #guestbook, but in the Blog, it's classed as .guestbook. This
	is probably just a mistake. Anyhow, both #guestbook and .guestbook are styled together in a later section 
	of code. */

/* This removes background from .blog page, and restores a general background to some elements */
.blog #content #news {
	background: none;		
	}
	.blog #news>h2, 
	.blog #news .entry, 
	.blog #news #comment_form, 
	.blog #news a.blog_rss_feed {
		background: url('shared/lens/cutout-generalcontent-darkest.png') left top repeat-y;
		}
		
	/*	Ultra-Safe Hacks for IE6: this does the same thing for IE6 */
	* html .blog #content #news {
		_filter: none;
		}
		* html .blog #content #news h2,
		* html .blog #content #news .entry, 
		* html .blog #content #news #comment_form {
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-generalcontent-darkest.png', sizingMethod='scale');
			_zoom: 1;
			}
			* html .blog #content #news * h2 {
				_filter: none !important;		/* restored for descendants that aren't direct children */
				}			
			
/* this eliminates hard-coded kludgy code in HTML, apparently written to create extra spacing */	
.blog #news>br, .blog #news>p {
	display: none;
	}
	/*	Ultra-Safe Hacks for IE6: this does the same thing for IE6 */
	* html .blog #news br, * html .blog #news p {
		_display: none;
		}
		* html .blog #news * br {_display: inline;}	/* restored for descendants that aren't direct children */
		* html .blog #news * p 	{_display: block;}	/* restored for descendants that aren't direct children */
		
/* additional blog styling */		
.blog .entry span.date,	.blog .entry span.comments {
	line-height: 3;
	font-style: italic;
	font: bold 15px "Trebuchet MS", arial, helvetica, sans-serif;
	}	
.blog form label {
	font-weight: bold;
	}	
.blog form textarea {
	width: 320px !important;
	height: 100px;
	overflow-y: auto;						/* auto-hides scrollbar in ie */
	}

	
/* GUESTBOOK/BLOG */

	/* transparencies */
	#postForm input#gbname, 
	#postForm input#gbadress, #postForm input#gbaddress,
	#postForm input#security_code, 
	#postForm textarea {
		/* cross-browser opacity settings */		
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
			*filter: alpha(opacity=55);
			opacity: 0.55;	
			*zoom: 1;		/* gives hasLayout to IE 6/7, needed for transparency */
		}
		#postForm input#gbname:focus, 
		#postForm input#gbadress:focus, #postForm input#gbaddress:focus,
		#postForm input#security_code:focus, 
		#postForm textarea:focus {
			/* cross-browser opacity settings */		
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important;
				*filter: alpha(opacity=70) !important;
				opacity: 0.70 !important;				
			}
			
/* POSTFORM - This is the guestbook entry form */
#content #postForm {
	width: 460px;
	padding: 0 !important;			/* IE6 needs the !important to override the * html earlier */
	}
	/* IE6 needs the bottom padding to be in the form instead of postForm */
	#postForm form {
		padding: 0 0 35px 0;		/* top/bottom padding replaces top/bottom margins */
		position: relative;
		z-index: 9999;
		}

	#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#gbadress, #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: url('shared/lens/shadow-guestbookinput.png') bottom right;	/* override */
			font: 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;				/* override */
			}
			/* this affects the input entry box only */	
			#postForm input#gbname, 
			#postForm input#gbadress, #postForm input#gbaddress,
			#postForm input#security_code {
				height: 18px;
				}
			/* this affects the textarea entry box only */	
			#postForm textarea {
				height: 100px;
				margin-bottom: 0 !important;		/* forces browser constistency */
				overflow-y: auto;						/* auto-hides scrollbar in ie */
				background: url('shared/lens/shadow-guestbooktextarea.png') bottom right;		/* override */
				}

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

/* GUESTBOOK/BLOG ENTRY CUTOUTS - similar to the press page, this code places left and right quotes around the
	blockquote using multiple transparent PNGs (#guestbook and .guestbook work for Guestbook/Blog pages, 
	respectively. */
#content	#guestbook,
#content	.guestbook {
	padding: 40px 0 0 0;			/* separator image height must = padding */
	background: url('shared/lens/cutout-guestbookseparator-darkest.png') top left no-repeat;		/* separator line */
	}
	/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html #content #guestbook,
	* html #content .guestbook {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-guestbookseparator-darkest.png', sizingMethod='crop');
		_zoom: 1;				/* IE6 needs hasLayout for the filter to work */
		}
	
	#content #guestbook .entry,
	#content .guestbook .entry	{
		position: relative; 		/* reference for h2 and h3 */
		padding: 0;
		background: url('shared/lens/cutout-guestbookquotesleft-darkest.png') left top repeat-y;
		*zoom: 1;		/* ie7 needs this or all hell breaks loose */
		}
		/* Guestbook H2 - This is the person's name. */
		#content	#guestbook .entry h2,
		#content	.guestbook .entry h2	{
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			font-size: 17px;
			}
		/* Guestbook H3 - This is the date. */
		#content	#guestbook .entry h3,
		#content	.guestbook .entry h3	{
			position: absolute;
			top: 0;
			right: 0;
			margin: 0;
			font-size: 13px;
			}
		/* Guestbook Blockquote - This is the comment itself. */
		#content	#guestbook .entry blockquote,
		#content	.guestbook .entry blockquote {
			margin: 0;
			padding: 30px 35px 45px 40px;
			background: url('shared/lens/cutout-guestbookquotesright-darkest.png') right bottom repeat-y;	
			}

		/* Ultra-Safe Hacks for IE6: IE can't use the above technique so we're resetting everything and just 
			using the left quote. */
		* html #content #guestbook .entry,
		* html #content .guestbook .entry {
			_position: static;
			_background: none !important;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-guestbookquotes-ie6-darkest.png', sizingMethod='crop');
			}
			/* Guestbook H2 - This is the person's name. */
			* html #content #guestbook .entry h2,
			* html #content .guestbook .entry h2 {
				_position: static;
				_text-align: left;
				}
			/* Guestbook H3 - This is the date. */
			* html #content #guestbook .entry h3,
			* html #content .guestbook .entry h3 {
				_position: static;
				_float: right;
				_margin-top: -2.66em;
				}
			/* Guestbook Blockquote - This is the comment itself. */
			* html #content #guestbook .entry blockquote,
			* html #content .guestbook .entry blockquote {
				_position: relative;
				_padding-top: 0;
				_background: none;
				}
				* html #content #guestbook .entry a,
				* html #content .guestbook .entry a {
					padding: 0;
					display: inline;
					}

#guestbook a:last-child {
	padding-bottom: 1em;
	}

/* these are the hard-coded nbsp; spaces that are btw. the next page and previous page links */				
span#guestbook_betw {
	display: none;
	}

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

		/* Additional reset to remove the "/" content that was added before. */			
		body #navigation ul.subnav li:after {content: "";}

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

#navigation ul#navlist li {
	position: relative;			/* used as a reference for subnav */
	}
	/* Flyout Arrows */
	#navigation ul#navlist li.hasflyout a span {
		padding-right: 13px;
		background: url('shared/lens/downarrow-white.gif') right 11px 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 */
		}

			
/* --- Positioning and Hover Effect for Sub-Navigation (Flyouts) --- */

	/* Known issue: Opera 9.6 has problems with having display: inline on the main #navigation lis and position: 
		absolute on the .subnav. It expands #navigation, creating a horizontal scroll bar when hovered and
		sometimes produces repainting problems. */
						
#navigation li ul.subnav {
	display: none;			/* choosing to use the "none/block" technique only because Opera 9.6 chokes */
	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;
	}
	#navigation li:hover ul.subnav,
	#navigation li.sfhover ul.subnav {
		display: block;	/* choosing to use the "none/block" technique only because Opera 9.6 chokes */
		top: 0.9em;			/* causes subnav to appear on hover (it's critical that there be no gap) */
		left: 0px;			/* causes subnav to appear on hover (it's critical that there be no gap) */
		}

	/* Ultra-Safe Hack for IE7: this gives hasLayout to the li, which improves subnav positioning. Unfortunately,
		this also forces IE6 to display theses <li>s as block, so we must restrict the fix to IE7. Also, small
		position tweak. */
	*:first-child+html ul#navlist li 						{*zoom: 1;}
	*:first-child+html #navigation li:hover ul.subnav	{*top: 1.2em;}
		
		
/* --- Styling for Sub-Navigation (Flyouts) --- */
	
#navigation li ul.subnav {
	padding: 0 1px 1px 0;
	background: url('shared/lens/shadow-navbuttons-black10.png') right bottom no-repeat;		/* shadow effect */	
	}	
	#navigation li ul.subnav li {
		display: block;		/* this layout needs this, since parent li is now inline */
		font-size: 1px;		/* this odd bit of code prevents IE 6/7 from inserting extra space below li */
		}	
		#navigation li ul.subnav li a {
			display: block;
			top: auto; 				/* overrides 1px offset used in main nav for shadow effect */
			left: auto;				/* overrides 1px offset used in main nav for shadow effect */
			padding: 6px 7px;
			font-size: 14px;
			font-weight: bold;
			color: #eee;
			background: url('shared/lens/black50.png');	
			}
			#navigation ul.subnav li a:hover	{
				color: #fff;
				background: url('shared/lens/black70.png');	
				}
			#navigation ul.subnav li a:active {
				padding: 7px 6px 5px 8px;
				}

	/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
	* html #navigation li ul.subnav {
		_background: none;					/* removes shadow effect, which doesn't work in IE6 */	
		}	
		* html #navigation ul.subnav li a {
			_background: none;	
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/black50.png', sizingMethod='scale');
			_zoom: 1;
			}
			* html #navigation ul.subnav li a:hover {
				_background: url('http://www.carolynemas.com/shared/lens/trans.gif');	/* ie6 needs this for the menu to work!! */	
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/black70.png', sizingMethod='scale');
				}


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

#emailsignup {	/* cross-browser opacity settings */		
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	*filter: alpha(opacity=80); 
	opacity: 0.80;
	}	
	#emailsignup:hover {	/* cross-browser opacity settings */		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		*filter: alpha(opacity=90); 
		opacity: 0.90;}

#banner {color: #ddd; font-size: 37px;}	/* smaller font needed for white on black text */

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

body 			{color: #ddd;}
h2, h3 		{color: #eee;}

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

/* TRANSLUCENT NAVIGATION LINKS (for dark/darker/darkest variations) */

/* Transparent nav text. Doesn't work in Opera 9 for who knows what reason. */
#navigation li a {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
	opacity: 0.65;}
	#navigation li a:hover {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		opacity: 0.90;}
	/* restore full (or mostly full) opacity for subnav */	
	#navigation li ul.subnav li a {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		_filter: alpha(opacity=90);	/* gives this to IE6, but not IE7 */
		opacity: 0.90;
		}
	
	/* Ultra-Safe Hacks for IE6/7: IE prefers opacity to be applied to the span */
	* html #navigation li a span {_filter: alpha(opacity=65);}
	
	*:first-child+html #navigation li a span {*filter: alpha(opacity=65);}
	*:first-child+html #navigation li:hover a span {*filter: none;}	

	
/* Navigation - Hovered/Active Links */
#navigation li a:hover span 	{background: url('shared/lens/white35.png');}
#navigation li a:active span 	{background: url('shared/lens/white50.png');}

	* html #navigation li a:hover span {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/white35.png', 	sizingMethod='scale');
				}
	
	#navigation li a:link 		{color: #000;}
	#navigation li a:visited	{color: #000;}
	#navigation li a:hover 		{color: #000;}
	#navigation li a:active		{color: #000;}

	
/* TRANSLUCENT CONTENT LINKS (for dark/darker/darkest variations) */
	
/* Opacity settings are only applied to those links without a translucent background already. This causes lots
	of problems in IE6/7, so they get left out. */
#content * a:link, #content * a:visited {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
	opacity: 0.65;
	}
#content * a:hover, #content * a:active {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	opacity: 0.90;
	}
	/* reset for next/prev page and for hostbaby2 photo galleries */
	#content * a.guestbook_next, #content * a.guestbook_prev,
	#content .hb_lytebox_class a {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		opacity: 1.00;
		}


	/* translucent styling for most links. */
	#content a {border-bottom: 1px dotted #bbb;}					/* ie6 ignores this because of low specificity */
		#content * a:link			{color: #fff;}	
		#content * a:visited 	{color: #ddd;}
		#content * a:hover 		{color: #fff; background: url('shared/lens/white25.png');}
		#content * a:active		{color: #fff; background: url('shared/lens/white45.png');}

	/* non-translucent styling for "show past dates", etc. */
	#content>a {border: none; text-decoration: underline;}	
		#content>a:link		{color: #ddd;}	
		#content>a:visited 	{color: #ddd;}
		#content>a:hover 		{color: #fff;}
		#content>a:active		{color: #fff;}

		/* Ultra-Safe Hacks for IE7: using colors only instead of opacity */
			*:first-child+html #content a:link 		{*color: #eee;}	
			*:first-child+html #content a:visited	{*color: #ccc;}
			*:first-child+html #content a:hover		{*color: #fff;}
			*:first-child+html #content a:active 	{*color: #fff;}
		
		/* Ultra-Safe Hacks for IE6: using colors only instead of opacity */
		* html #content * a {border-bottom: 1px dotted #bbb;}	
			* html #content a:link 		{_color: #eee;}	
			* html #content a:visited	{_color: #ccc;}
			* html #content a:hover, 
			* html #content a:active, * html #content #guestbook .entry a:hover {
				_background: none;
				_color: #fff; 
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/white25.png', sizingMethod='scale');
				}
	
	
/* EMAILSIGNUP */			

#emailsignup form {color: black;}
	#emailsignup input#list_email {color: #fff; background: #000;}	

/* --- Images -------------------------------------------------------------- */
		
#content * img {
	background: url('shared/lens/shadow-generalimages30.png') top left no-repeat;
	}
			
/* --- ADDITIONAL PAGE-SPECIFIC STYLES ---------------------------------------------------------------------- */

/* GUESTBOOK */

#postForm input#gbname, #postForm input#gbadress, #postForm input#gbaddress, #postForm input#security_code, #postForm textarea {
	color: black;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
	*filter: alpha(opacity=45); 
	opacity: 0.45;	
	}
	#postForm input#gbname:focus, #postForm input#gbadress:focus, #postForm input#gbaddress:focus, 
	#postForm input#security_code:focus, #postForm textarea:focus {	/* cross-browser opacity settings */		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)" !important;
		*filter: alpha(opacity=60) !important;	
		opacity: 0.60 !important;				
		}
			
	/* POSTFORM - This is the guestbook entry form */
	#postForm input#gbname, #postForm input#gbadress, #postForm input#security_code {
		background: url('shared/lens/shadow-guestbookinput30.png') bottom right;
		}
		#postForm textarea {
			background: url('shared/lens/shadow-guestbooktextarea30.png') bottom right;}
		
		
/* --- FLYOUT SUB-MENUS ------------------------------------------------------------------------------------- */

#navigation ul#navlist li.hasflyout a span {
	background: url('shared/lens/downarrow-black.gif') right 11px no-repeat !important;}

	#navigation li ul.subnav li a 			{color: #eee; background: url('shared/lens/black65.png');}
	#navigation li ul.subnav li a:hover		{color: #fff; background: url('shared/lens/black90.png');}

		* html #navigation li ul.subnav li a {_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/black65.png', sizingMethod='scale');
			}
		* html #navigation li ul.subnav li a:hover {
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/black90.png', sizingMethod='scale');}