/* UPSHADOW template stylesheet

	graphic design: Stacy Bias (www.stacybias.net)
	coding: Andrew Tay (www.andrewtay.com) February 2010
	
	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	{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 {
	text-align: left;	
  	}

/* ACCESSIBILITY */			

#accessibility {
	position: absolute;
	left: -9999px;
	}

/* CONTAINER */
				
#container {
	background: white url('/shared/upshadow/content-white.gif') center top repeat-y;
  	}

/* NAVIGATION */	

#navigation { 
	position: relative;		/* ie7 needs this for the flyouts to overlap the #banner */
	z-index: 9999;		 		/* ie7 needs this for the flyouts to overlap the #banner */
	min-height: 63px;
	background: url('/shared/upshadow/headerstripe-ocean.jpg') center top;
	}				
	/* Ultra-Safe Hack for IE6: applies min-height */
	* html #navigation {
		_height: 63px;						/* IE6 treats this as min-height */
		}
		 				
	#navigation ul {
		width: 960px;
		margin: 0 auto;		
		list-style: none;
		}
		#navigation li {
			display: block;
			float: left;
			font: bold 14px "trebuchet ms", arial, helvetica, sans-serif;
			text-transform: uppercase;
			}
			#navigation li a {
				display: block;
				float: left;			/* ie6 needs this for some bizarre reason */
				height: 63px;
				padding: 0 7px;
				line-height: 59px;
				}

   /* Special fancy code makes sure that navigation expands vertically if an extra line of links is 
		needed. Doesn't work in IE6/7. See	http://www.positioniseverything.net/easyclearing.html */
   #navigation ul:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
   	}		

				
/* EMAIL SIGNUP */

#emailsignup {
	position: relative;				/* using this instead of absolute so it will shift down in case nav expands */
	top: 325px;
	left: 346px;
	width: 260px;
	height: 355px;						/* this controls the height of the left border */
	margin: 0 auto -355px auto;	/* -ve bottom margin cancels out the height that was set above */
	padding-left: 15px;
	border-left: 2px solid #ccc;
	z-index: 900;
	}

	
/* BANNER */

#banner {
	position: relative;		/* reference for positioning #banner .band */
	clear: both;
	width: 956px;
	margin: 0 auto;
	padding-top: 12px;
	}
	
	/* Photo - This is the main photo at the top of the page. Dimensions are 955px x 301px */
	#banner .photo {
		width: 955px;
		height: 301px;
background: url(/images/webWhite_Suit_Shoot_by_Nik_Schnell_resized-cropped-topphoto-cropped-topphoto.jpg);
		text-indent: -9999px;
		}
		/* Band Span - This is the rounded-corner photo frame, and optionally displays the band name */
		#banner .photo span {
			display: block;
			width: 895px;
			height: 275px;
			padding: 16px 30px 10px 30px;		/* bottom padding protexcts descenders from being cut off in IE7 */
			background: url('/shared/upshadow/mainphotocorners-white.png') center center no-repeat;
			}
			/* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG */
			* html #banner .photo span {
				_background: none;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/mainphotocorners-white.png');
				}		

	/* Band - This is the secondary photo at the side of the page. Dimensions are 253px x 260px */
	#banner .band {
		position: absolute;
		top: 425px;
		right: 0;
		width: 253px;
		height: 260px;
background: url(/images/terrybylizsykes-cropped-sidephoto.jpg) center center;
		text-indent: -9999px;
		}
		/* Band Span - This is the rounded-corner photo frame */
		#banner .band span {
			display: block;
			width: 100%;
			height: 100%;
			background: url('/shared/upshadow/sidebarphotocorners-white.png') center center no-repeat;
			}
			/* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG */
			* html #banner .band span {
				_background: none;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/sidebarphotocorners-white.png');
				}		
		
			
/* CONTENT */
				
#content {
	width: 630px;
	min-height: 360px;
	margin: 0 auto;
	padding: 12px 300px 20px 20px;		/* padding-top also prevents margins from collapsing through */
	position: relative;
	}
	/* Ultra-Safe Hack for IE6: applies min-height */
	* html #content {
		_height: 360px;						/* IE6 treats this as min-height */
		}

	
/* FOOTER */
	
#footer 	{
	width: 100%;
	height: 100px;
	border-top: 32px solid #264645;
	background-color: #3a6967;
	text-align: center;
	}

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

body {
	color: #3f3f3f;
	font: 14px Arial, Helvetica, sans-serif;
	}

h1 {
	margin: 0 0 0 -20px;			/* margin-top: 0; is for browser consistency */
	color: #3a6967;
	font: bold 36px "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding-bottom: 3px;
	line-height: 1em;
	}
	
h2, h3, h4 {
	font-weight: bold;
	}

h2	{
	color: #264645;
	font-size: 1.25em;
	text-transform: uppercase;
	}

h3 {
	color: black;
	font-size: 1.1em;
	}

p, .notes {
	line-height: 1.2;
	}

#emailsignup form {
	color: #3a6967;
	font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	}
		
#footer p {
	color: #264645 !important;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	}	

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

/* general links */
a				{font-weight: bold; text-decoration: underline;}
	a:link 		{color: #69bcb9;}	
	a:visited	{color: #93b9b8;}
	a:hover 		{color: #638059;}	
	a:active		{color: #264645;}
		
/* navigation links */
#navigation li a 				{color: white; text-decoration: none;}
	#navigation li a:link 		{}
	#navigation li a:visited	{}
	#navigation li a:hover 		{background: url('/shared/upshadow/navarrow-white.png') center bottom;}
	#navigation li a:active		{background: none;}

	/* highlight current page */
	#navigation li a.highlight {
		background: url('/shared/upshadow/navarrow-white.png') center bottom;
		}

		/* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG. IE6 can't center
			the transparent PNG, so we've separated the arrow from the gradient. Arrow is centered, gradient is
			stretched. */
		* html #navigation li a:hover, 
		* html #navigation li a.highlight {
			_padding: 0;
			_background: none;
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/ie6-navarrow-gradient.png', sizingMethod='scale');
			}
			* html #navigation li a:hover span,
			* html #navigation li a.highlight span {
				_display: block;
				_background: url('/shared/upshadow/ie6-navarrow-white.gif') center bottom no-repeat;
				_padding: 0 7px 4px 7px;
				}
		
/* EMAILSIGNUP FORM */

#emailsignup form {
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 50px;
		height: 50px;
		margin-top: 2px;
		font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
		vertical-align: middle;		/* this is the secret to getting the button and the entry box to line-up */
		background: url('/shared/upshadow/emailbutton-oceanwhite.gif') center bottom no-repeat;
		border: none;	
		color: white;
		text-transform: uppercase;
		}
		#emailsignup input:hover {
			background-position: center top;
			}

	/* this is the entry box */
	#emailsignup input#list_email {
		width: 180px;
		height: 20px;
		margin-right: 8px;
		padding: 15px 8px;
		border: none;
		color: #666;
		background: url('/shared/upshadow/emailbox-white.gif') no-repeat;
		text-transform: none;
		}	

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

/* SPLASH */
.splash			 		{background: white url('/shared/upshadow/content-white.gif') center top repeat-y;}
#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;}
.contact .entry li	{padding-bottom: .15em;}	
	
/* CALENDAR */
#calendar .entry {
	margin: 0 0 2.3em 0;
	}
	/* Ultra-Safe Hack for IE6: gives hasLayout, curing potential rendering bugs */
	* html #calendar .entry {
		_height: 1px;					/* doesn't affect layout since IE6 treats this as min-height */
		}

	#calendar .entry .details {
		margin-left: 20px;
		}
		#calendar .entry h4 {
			font-size: 1em;
			margin-bottom: 0.5em;
			}
	
/* LINKS */
.links h3 {
	font-style: normal;
	}	
.links dl {
	margin-left: 20px;
	}

/* PRESS */

.press .entry {
	}
	.press .entry .caption {
		text-align: right;
		margin-right: 75px;
		font-style: italic;
		}
		
/* PHOTOS */
.photos dl {
	margin-left: 0;				/* ie needs this */
	}
   .photos dt	{
		font-weight: bold;
		font-size: 1.15em;
		margin: 0 0 0.8em 0; 
		}	
	.photos dd	{
		margin: 0 0 1.7em 0; 
		padding: 0;
		}	

/* MUSIC */
.music .details .artist {
	font-weight: bold;
	}


/* FORM SUBMIT BUTTONS, INPUTS, TEXTAREAS */
/* Submit Buttons - this affects email list 2nd page, blog form and guestbook form */
.home table input[type="submit"],					/* ie6 doesn't understand this */
.blog #comment_form input#guestbook_button,
.guestbook #postForm input#guestbook_button {
	color: white;
	font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
	background: #3a6967;
	padding-bottom: 3px !important;	/* overrides inline styles in the HTML */
	border: none;
	}
	.home table input[type="submit"]:hover,
	.blog #comment_form input#guestbook_button:hover,
	.guestbook #postForm input#guestbook_button:hover {
		background: #264645;
		}

/* Inputs/Textareas - this affects email list 2nd page and blog form */		
.home table input, .home table select,
.blog #comment_form input, .blog #comment_form textarea {
	padding: 2px 5px !important;		/* overrides inline styles in the HTML */
	border: none;
	color: #555;
	background: #e0e0e0;
	}
	.home table select {
		padding: 0 !important;		/* overrides inline styles in the HTML */
		border: 2px solid #ddd;
		background: white;
		}
	
/* GUESTBOOK */
/* guestbook entry form */
#postForm {
	width: 406px;
	height: 325px;
	margin: 18px 0 15px 0;
	padding: 25px 97px 30px 97px;
	background: url('/shared/upshadow/guestbookform-ocean.gif') top center no-repeat;
	border-bottom: 10px solid #62b1c8;
	}
	
	/* labels */
	#postForm label {
		display: block;
		min-height: 18px;		/* helps improve spacing in Safari, which messes-up line-heights for some reason */
		font-weight: bold;
		color: white;
		}
	/* submit button */
	#postForm input {
		margin-top: 5px;
		width: 260px;
		}
	/* general entry fields */
	#postForm input#gbname,
	#postForm input#gbaddress,
	#postForm textarea,
	#postForm input#security_code {
		display: block;
		width: 398px;
		min-height: 16px;		/* helps improve spacing in Safari, which messes-up line-heights for some reason */
		padding: 2px 5px;
		border: none;
		color: #555;
		background: #fff;
		margin: 0 0 5px 0;
		}
		#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: 10px;							/* replaces lost margin-bottom from #gbcomment */
		}
	/* captcha "security code" text label */	
	#postForm .security_code_label {
		margin-top: 10px;							/* replaces lost margin-bottom from #gbcomment */
		width: 220px !important;
		margin-left: 115px;
		}
	/* captcha entry field */	
	#postForm input#security_code {
		width: 135px !important;
		margin-left: 115px;
		}

/* previous guestbook entries */		
#guestbook .entry	{
	padding: 2px 20px 2px 0;
	margin-bottom: 0;
	}				
	#guestbook .entry h2	{
		margin-bottom: 0;
		padding-bottom: 2px;
		color: black;
		font: 22px "Trebuchet MS", Arial, Helvetica, sans-serif;
		text-transform: none;			/* overrides earlier "uppercase" setting */
		}
	#guestbook .entry h3	{
		margin: 0; 
		padding: 0 0 6px 0;
		color: black;
		font-size: 12px;
		border-bottom: 1px solid #62b1c8;
		}
	#guestbook .entry	blockquote {
		padding: 0 20px;
		color: black;
		}				

		
/* --- 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;
			float: none;
			text-align: left;
			line-height: 1;
			}

/* --- 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/upshadow/downarrow-white.gif') right 7px 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: 40px;			/* 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;}
		
		
/* --- Styling for Sub-Navigation (Flyouts) --- */
	
#navigation li ul.subnav {
	padding: 0 1px 1px 0;
	background: url('/shared/upshadow/shadow-navbuttons-black10.png') right bottom no-repeat;		/* shadow */	
	}	
	#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: #264645;
			background: url('/shared/upshadow/white95.png');	
			}
			#navigation ul.subnav li a:hover	{
				color: #fff;
				background: #72c2bf url('/shared/upshadow/white25.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/upshadow/white95.png', sizingMethod='scale');
			_zoom: 1;
			}
			* html #navigation ul.subnav li a:hover {
				_background: #72c2bf url('/shared/upshadow/trans.gif');	/* ie6 needs this for the menu to work!! */	
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/white25.png', sizingMethod='scale');
				}


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

#container 		{background: white url('/shared/upshadow/content-white.gif') center top repeat-y;}
#navigation 	{background: url('/shared/upshadow/headerstripe-red.jpg') center top;}				
#emailsignup 	{border-left: 2px solid #ccc;}

#banner .photo span {
	background: url('/shared/upshadow/mainphotocorners-white.png') center center no-repeat;}
	* html #banner .photo span {
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/mainphotocorners-white.png');}		

#banner .band span {
	background: url('/shared/upshadow/sidebarphotocorners-white.png') center center no-repeat;}
	* html #banner .band span {
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/sidebarphotocorners-white.png');}		
		
#footer 	{
	border-top: 32px solid #290610;
	background-color: #420a1a;}
			
/* --- Text Styles & Minor Placement Adjustments ----------------------------------- */

body 	{color: #3f3f3f;}

h1 	{color: #420a1a;}
h2		{color: #420a1a;}
h3 	{color: black;}

#emailsignup form {color: #420a1a;}
#footer p 			{color: #290610 !important;}	
	
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */
a:link 		{color: #8d1538;}	
a:visited	{color: #906370;}
a:hover 		{color: #610f26;}	
a:active		{color: #420a1a;}
		
/* navigation links */
#navigation li a {color: white;}

/* highlight current page */
#navigation li a:hover,
#navigation li a.highlight {
	background: url('/shared/upshadow/navarrow-white.png') center bottom;}
	* html #navigation li a:hover,
	* html #navigation li a.highlight span {
		_background: url('/shared/upshadow/ie6-navarrow-white.gif') center bottom no-repeat;}

/* this affects both the entry box and the button */
#emailsignup input {
	color: white;
	background: url('/shared/upshadow/emailbutton-redwhite.gif') center bottom no-repeat;}
	/* this is the entry box */
	#emailsignup input#list_email {background: url('/shared/upshadow/emailbox-white.gif') no-repeat;}	

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

/* Submit Buttons - this affects email list 2nd page, blog form and guestbook form */
.home table input[type="submit"], .blog #comment_form input#guestbook_button, 
.guestbook #postForm input#guestbook_button {
	color: white;
	background: #420a1a;
	}
	.home table input[type="submit"]:hover, .blog #comment_form input#guestbook_button:hover,
	.guestbook #postForm input#guestbook_button:hover {
		background: #290610;}

/* Inputs/Textareas - this affects email list 2nd page and blog form */		
.home table input, .home table select, .blog #comment_form input, .blog #comment_form textarea {
	color: #555;
	background: #e0e0e0;
	}
	.home table select {
		border: 2px solid #ddd;
		background: white;}

/* GUESTBOOK */
#postForm {
	background: url('/shared/upshadow/guestbookform-gray.gif') top center no-repeat;
	border-bottom: 10px solid #420a1a;
	}
	#postForm label 					{color: #666;}
	#postForm input#gbname,	#postForm input#gbaddress,	#postForm textarea, #postForm input#security_code {
		color: #555; background: #fff;}
	
	#guestbook .entry h2				{color: black;}
	#guestbook .entry h3				{color: black;	border-bottom: 1px solid #420a1a;}
	#guestbook .entry	blockquote 	{color: black;}				

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

#navigation ul#navlist li.hasflyout a span {
	background: url('/shared/upshadow/downarrow-white.gif') right 7px no-repeat !important;}
#navigation li ul.subnav {
	background: url('/shared/upshadow/shadow-navbuttons-black10.png') right bottom no-repeat;} /* shadow */	
	
	#navigation li ul.subnav li a {
		color: #420a1a;
		background: url('/shared/upshadow/white95.png');
		}
		#navigation ul.subnav li a:hover	{
			color: #fff;
			background: #420a1a url('/shared/upshadow/white25.png');}

	* html #navigation ul.subnav li a {
		_background: none;		/* necessary here */
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/white95.png', sizingMethod='scale');
		}
		* html #navigation ul.subnav li a:hover {
			_background: #420a1a url('/shared/upshadow/trans.gif');	/* ie6 needs this for the menu to work!! */	
			_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/upshadow/white25.png', sizingMethod='scale');}