/* MIXBACK template stylesheet

	graphic design: Stacy Bias (www.stacybias.net)
	coding: Andrew Tay (www.andrewtay.com) July 2009
	
	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 -------------------------------------------------------------- */

html {
	background: white url(/shared/mixdown/bodytoprepeat-bluegreen.gif) top center repeat-x;
	}
body {
	background: url(/shared/mixdown/bodytop1150-bluegreen.gif) top center no-repeat;
	text-align: left;	
  	}

/* ACCESSIBILITY */			

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

/* CONTAINER */
				
#container {
	position: relative;			/* this serves as a reference for #banner .photo and #banner .band */
	padding-top: 225px;
  	}

/* BANNER */

#banner {
	}
	
	/* Photo - This is the horizontal photo at the top of the page */
	#banner .photo {
		position: absolute;
		top: 47px;
		left: 50%;
		margin-left: -392px;
		width: 568px;
		height: 128px;
		}
		/* Photo Span - This is the main band name that sits above the top photo */
		#banner .photo span {
			display: block;
			position: absolute;
			top: -25px;
			left: -5px;
			width: 562px;			/* 578px total including padding */
			height: 158px;			/* 138px + 20 extra to let text sit above rounded border */
			padding-right: 16px;
			background: url(/shared/mixdown/photoframe-bluegreen-ie6.png) top left no-repeat;
			color: white;
			font: 24px Impact, Haettenschweiler, "Arial Black", sans-serif;
			text-align: right;
			}
			/* 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/mixdown/photoframe-bluegreen-ie6.png');
				}		

	/* Band - This is the secondary photo at the side of the page */
	#banner .band {
		position: absolute;
		top: 272px;
		left: 50%;
		margin-left: 204px;
		width: 222px;
		height: 295px;
		border: 8px solid #62b1c8;
		text-indent: -9999px;
		}

			
/* NAVIGATION */	

#navigation {
	padding: 3px 0;
	background: #5aa90a;
	}				
	#navigation ul {
		margin: 0 auto; 
		list-style: none;
		text-align: center;
		}
		#navigation li {
			display: inline;
			border-left: 1px solid white;
			padding: 0 2px;
			font: 10px arial, helvetica, sans-serif;
			text-transform: uppercase;
			}
			#navigation li:first-child {
				border-left: none;				/* ie6 doesn't understand this, but it's non-essential */
				}

			#navigation li a {
				padding-left: 0.4em;
				line-height: 22px;
				}

			
/* CONTENT */
				
#content {
	width: 620px;
	margin: 0 auto;
	padding: 12px 285px 20px 15px;		/* padding-top also prevents margins from collapsing through */
	position: relative;
	z-index: 500;
	}

	
/* EMAIL SIGNUP */

#emailsignup {
	background: url(/shared/mixdown/emailsignup-bluegreen.gif) bottom left no-repeat;
	position: absolute;
	top: 22px;
	left: 50%;
	margin-left: 200px;
	width: 237px;
	height: 158px;
	text-align: right;		/* Firefox needs this because it ignores right: 0; */
	}
	/* This generates and places the word "Newsletter", though it doesn't work in IE 6/7/8. We're doing it this
		way instead of using a GIF or PNG so that the font rendering will be exactly the same as the band name.
		There are slight inconsistencies in the way FF, Safari, Opera and Chrome handle this, but it's okay. */		
	#emailsignup:before {
		display: block;
		position: absolute;
		margin-right: 22px;
		right: 0;				/* Safari and Opera need this because they ignore text-align: right; */
		margin-bottom: -30px;
		content: "Newsletter";
		color: white;
		font: 24px Impact, Haettenschweiler, "Arial Black", sans-serif;
		}

	
/* FOOTER */
	
#footer 	{
	position: absolute;
	top: 576px;
	left: 50%;
	margin-left: 204px;
	width: 238px;
	text-align: right
	}


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

body {
	color: #264b01;
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	}

h1 {
	margin-top: 0;			/* for browser consistency */
	color: #62b1c8;
	font: 30px Impact, Haettenschweiler, "Arial Black", sans-serif;
	text-transform: uppercase;
	padding-bottom: 3px;
	}
	
h2, h3, h4 {
	font-weight: bold;
	}

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

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

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

#emailsignup form {
	color: #0a85a9;
	font: bold 16px Arial, Helvetica, sans-serif;
	line-height: 2;
	text-transform: uppercase;
	}
		
#footer p {
	color: #62b1c8 !important;
	font: 9px Impact, Haettenschweiler, "Arial Black", sans-serif;
	text-transform: uppercase;
	}	

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

/* general links */
a				{font-weight: bold; text-decoration: underline;}
	a:link 		{color: #5aa90a;}	
	a:visited	{color: #9a9;}
	a:hover 		{color: #638059;}	
	a:active		{color: #666;}
		
/* navigation links */
#navigation li a 				{text-decoration: none;}
	#navigation li a:link 		{color: white;}
	#navigation li a:visited	{color: white;}
	#navigation li a:hover 		{color: #d7eebf;}
	#navigation li a:active		{color: #ddd;}

	/* highlight current page */
	#navigation li a.highlight {
		color: #d7eebf !important;
		}

/* email signup form elements */
#emailsignup form {
	margin-top: 50px;
	text-align: center;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 50px;
		}
		#emailsignup input:hover {
			}
	/* this is the entry box */
	#emailsignup input#list_email {
		width: 100px;
		margin-right: 4px;
		padding: 2px 5px;
		border: none;
		color: #666;
		background: #f2f2f2;
		}	

/* --- 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;}
.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 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;
	}
	
/* GUESTBOOK */
/* guestbook entry form */
#postForm 	{
	width: 406px;
	height: 275px;
	margin: 18px 0 15px 0;
	padding: 25px 97px 30px 97px;
	background: url(/shared/mixdown/guestbookform-bluegreen.gif) top center no-repeat;
	border-bottom: 20px solid #62b1c8;
	}
	
	/* labels */
	#postForm label {
		display: block;
		min-height: 18px;		/* helps improve spacing in Safari, which messes-up line-heights for some reason */
		color: white;
		text-transform: uppercase;
		}
	/* submit button */
	#postForm input {
		margin-top: 5px;
		width: 260px;
		}
	/* general entry fields */
	#postForm input#gbname,
	#postForm input#gbadress,
	#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: #666;
		background: #f2f2f2;
		margin: 0 0 5px 0;
		}
		#postForm textarea {
			height: 50px;
			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;
		}				


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

html {background: white url(/shared/mixdown/bodytoprepeat-khaki.gif) top center repeat-x;}
body {background: url(/shared/mixdown/bodytop1150-khaki.gif) top center no-repeat;}

/* BANNER */

	/* Photo Span - This is the main band name that sits above the top photo */
	#banner .photo span {background: url(/shared/mixdown/photoframe-khaki-ie6.png) top left no-repeat;}
		* html #banner .photo span {_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/mixdown/photoframe-khaki-ie6.png');}		

	/* Band - This is the secondary photo at the side of the page */
	#banner .band {
		border: 8px solid #b0b399;
		}

/* NAVIGATION */	

#navigation {background: #b9be96;}				
#navigation li {border-left: 1px solid black;}

/* EMAIL SIGNUP */

#emailsignup {background: url(/shared/mixdown/emailsignup-khaki.gif) bottom left no-repeat;}
	
		
/* --- Text Styles & Minor Placement Adjustments ----------------------------------- */

body 	{color: #33302e;}
h1 	{color: #33302e;}
h2		{color: #33302e;}
h3 	{color: black;}

#emailsignup form {color: #686b5b;}
		
#footer p {color: #b0b399 !important;}	

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

/* general links */
a				{font-weight: bold; text-decoration: underline;}
	a:link 		{color: #686b5b;}	
	a:visited	{color: #898969;}
	a:hover 		{color: #4a4c41;}	
	a:active		{color: #999;}
		
/* navigation links */
#navigation li a 				{text-decoration: none;}
	#navigation li a:link 		{color: #33302e;}
	#navigation li a:visited	{color: #33302e;}
	#navigation li a:hover 		{color: #746d68;}
	#navigation li a:active		{color: #444;}

	/* highlight current page */
	#navigation li a.highlight {
		color: #746d68 !important;
		}

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

/* GUESTBOOK */
	/* guestbook entry form */
	#postForm 	{
		background: url(/shared/mixdown/guestbookform-khaki.gif) top center no-repeat;
		border-bottom: 20px solid #999e83;
		}
	
	/* previous guestbook entries */		
	#guestbook .entry h3	{
		border-bottom: 1px solid #999e83;
		}