/* STUDIO stylesheet template 

	visual design: Hostbay staff (www.hostbaby.com)
	interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) June 2009
	
	COLOR VARIATION - for this variation, some colors are overridden at the end of the file
	
*/

/* --- 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, body {
	height: 100%;
	}
	/* 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 */
		}
	 
body {
	position: relative;			/* when min-width is invoked this is needed as a reference for abs. positioning */
	color: black;
  	background: url(/shared/woodgrain/darkwood2.jpg) center center;
	text-align: left;	
	min-width: 800px;				/* forces horizontal scroll bar on very narrow screens */
	max-width: 1260px;			/* on very large screens, keeps #content from getting too wide */
  	}

/* BANNER */
	
#banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;					/* #banner needs to stack higher than #content, which is in normal flow */
	}
	/* Photo - This is the band photo/name at the top of the screen */
	#banner .photo {
		margin-top: 10px;
		margin-left: 40px;
		width: 450px;
		height: 90px;
background: url(/images/BrandingBrandonLogo_20110909_v_2-cropped-bandlogo.jpg) left center no-repeat;
		text-indent: -9999px;
		}
		/* Rounded Corner NW - This is the top of the nav & top left corner of #content */
		#banner .photo span {/* background-color: blue !important; */
			display: block;
			position: absolute;
			top: 100px;
			left: 30px;
			width: 260px;
			height: 20px;
			background: url(/shared/woodgrain/navcorners2dark.png) left top no-repeat;
			text-indent: -9999px;
			}		
			/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
			* html #banner .photo span {
				_background-image: url(/shared/woodgrain/navcorners2.gif);
				}

	/* Border N - This is the fluid top border of #content */
	#banner .band {/* background-color: red !important; */
		position: relative;
		top: 0px;
		margin: 0 70px 0 290px;		/* these allow the strip to be exactly the right width */
		height: 20px;
		background: url(/shared/woodgrain/borders2.png) center top repeat-x;
		}
		/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
		* html #banner .band {
			_background-image: url(/shared/woodgrain/borders2.gif);
			}
		
		/* Rounded Corner NE - This is the top right corner of #content */
		#banner .band span  {/* background-color: orange !important; */
			display: block;
			position: absolute;
			right: -20px;
			width: 20px;
			height: 20px;
			background: url(/shared/woodgrain/corners2dark.png) right top no-repeat;
			text-indent: -9999px;
			font-size: 0px;		/* since this div is small, extra text-hiding measures are needed */
			line-height: 0px;		/* since this div is small, extra text-hiding measures are needed */
			}
			/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
			* html #banner .band span {
				_background-image: url(/shared/woodgrain/corners2.gif);
				}
			
			
/* ACCESSIBILITY */			
			
/* Content Background - This fills in the right part of #content, leaving a gap between the scrollbar */
#accessibility {/* background-color: purple !important; */
	position: absolute;
	top: 120px;
	right: 50px;
	width: 100px;
	height: 70%;
	background: url(/shared/woodgrain/rightborder2.png) right center repeat-y;	/* right part of #content background */
	}
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html #accessibility {
		_background-image: url(/shared/woodgrain/rightborder2.gif);
		}
		
	/* Rounded Corner SE - This is the bottom right corner of #content */
	#accessibility a {/* background-color: yellow !important; */
		position: absolute;
		bottom: -20px;
		right: 0;
		width: 20px;
		height: 20px;
		background: url(/shared/woodgrain/corners2light.png) right bottom no-repeat;
		text-indent: -9999px;
		font-size: 0px;		/* since this div is small, extra text-hiding measures are needed */
		line-height: 0px;		/* since this div is small, extra text-hiding measures are needed */
		}
		/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
		* html #accessibility a {
			_background-image: url(/shared/woodgrain/corners2.gif);
			}
		
		
/* CONTAINER */
				
#container {
	height: 100%;				/* nav, content, bottom borders/corners, emailsignup, foooter all reference this */
  	}

/* NAVIGATION */	

#navigation {/* background-color: green !important; */
	position: absolute;
	top: 120px;
	left: 30px;
	width: 205px;
	height: 70%;
	padding: 0 35px 0 20px;			/* horizontal only--vertical would break the layout */
	background: url(/shared/woodgrain/navigation2.png) left center repeat-y;
	z-index: 400;
	}				
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html #navigation {
		_background-image: url(/shared/woodgrain/navigation2.gif);
		}

			
/* CONTENT */
				
#content {
	position: relative;
	top: 120px;
	height: 70%;
	margin: 0 20px 0 285px;			/* controls width for fluid layout */
	padding: 0 35px 0 5px;			/* horizontal only--vertical would break the layout */
  	background: url(/shared/woodgrain/60trans.gif) right center repeat-y;	/* left part of the #content background */
	overflow-y: scroll;				/* forces scrollbar to appear, keeps everything within #content window */
	}

	
/* EMAIL SIGNUP */

/* Rounded Corner SW - This has the bottom of the nav, bottom left corner of #content, and #emailsignup bg */
#emailsignup {/* background-color: orange !important; */
	position: absolute;
	top: 70%;	
	left: 30px;
	width: 425px;
	height: 35px;
	margin-top: 120px;
	padding: 30px 15px 0 20px;	
	background: url(/shared/woodgrain/navcorners2.png) left -60px no-repeat;
	z-index: 300;
	}		
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html #emailsignup {
		_background-image: url(/shared/woodgrain/navcorners2.gif);
		}

	
/* FOOTER */
	
#footer 	{
	position: absolute;
	top: 70%;
	left: 0;
	margin-top: 125px;
	width: 100%;
	}
	/* Border S - This is the fluid bottom border of #content */
	#footer p {/* background-color: maroon !important; */
		display: block;
		position: relative;
		top: -5px;
		padding-top: 30px;			/* places text below #content */
		margin: 0 70px 0 490px;		/* these allow the strip to be exactly the right width */
		background: url(/shared/woodgrain/borders2.png) center -60px repeat-x;
		color: white;
		font: bold 17px Helvetica, Arial, sans-serif;
		text-align: right;
		}
		/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
		* html #footer p {
			_background-image: url(/shared/woodgrain/borders2.gif);
			}

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

body {
	color: #333;
	font: 13px Helvetica, Arial, sans-serif;
	}

h1, h2, h3, h4 {
	color: black;
	font-weight: bold;
	}

h1 {
	font-size: 2em;
	margin-top: 0.2em;
	}
			
h2	{
	font-weight: bold;
	font-size: 1.25em;
	}

h3 {
	font-style: italic;
	font-size: 1em;
	}

p, .notes {
	line-height: 1.2;
	}
	
#navigation ul {
	margin: 0; 
	padding: 0;
	font: bold 17px Arial, Helvetica, sans-serif;
	list-style: none;
	}				
	#navigation li {
		}
		#navigation li a {
			display: block;
			line-height: 1;
			padding: 3px 0;
			width: 100%;				/* this gives IE6 hasLayout, preventing a spacing bug */
			}

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

/* general links */
a				{font-weight: bold; text-decoration: underline;}
a:link 		{color: #ff1d25;}	
a:visited	{color: #ff6f74;}
a:hover 		{color: #df1920;}	
a:active		{color: white;}

/* navigation links */
#navigation li a 				{text-decoration: none;}
#navigation li a:link 		{color: #ff1d25;}
#navigation li a:visited	{color: #ff1d25;}
#navigation li a:hover 		{color: white; background-color: #df1920; padding: 3px 5px; width: 195px;}
#navigation li a:active		{color: #ff1d25;}

	/* highlight current page */
	#navigation li a.highlight {
		color: white !important; 
		background-color: #ff1d25; 
		padding: 3px 5px; 
		width: 195px;		
		}

/* general form elements */
input, textarea {
	color: #666;
	background: #e6e6e6;		
	}		
input:focus, textarea:focus {
	color: #444 !important;
	background: #d8d8d8 !important;		
	}		

/* email signup form elements */
#emailsignup form {
	position: relative;		/* sets form as a rference for absolute positioning */
	padding-top: 1px;			/* pushes text down a bit */
	height: 19px;
	font: bold 15px Arial, Helvetica, sans-serif;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		position: absolute;
		top: 1px;
		right: 1px;
		width: 50px;
		height: 18px;
		margin: 0; 
		padding: 0; 
		border: none;	
		color: white;
		font: bold 12px Arial, Helvetica, sans-serif;
		background: url(/shared/woodgrain/joinred4.gif) left top no-repeat;
		}
		#emailsignup input:hover {
			background-position: left -20px;
			}
	/* this is the entry box */
	#emailsignup input#list_email {
		top: 2px; 
		right: 56px;
		width: 230px;
		height: 14px; 
		padding: 1px 3px;
		color: #666;
		background: #e6e6e6;		
		}	

/* --- 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: 2.5em 0 2em 0;
	border-top: 2px solid #bbb;
	padding: 3px 0 0 0;
	}
	/* 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 h2 {
		display: inline;				
		position: relative;			
		left: 0;							/* wanted this to be 20px, but it caused a scrollbar in IE7 */
		top: -9px;						/* moves h2 up to midpoint of .entry border */
		line-height: 10px;			/* controls space left behinf by h2 */
		padding: 2px 5px 3px 5px;
		color: white;
		font-size: 14px;
		background: #bbb;
		}

	#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: 1.7em 0 .8em 0; 
	}	
.photos dd	{
	margin: 0; 
	padding: 0;
	}	

/* MUSIC */
.music .artist {
	}

.music .details .artist {
	color: black;
	font-weight: bold;
	}
	
/* GUESTBOOK */
/* guestbook entry form */
#postForm 	{
	width: 400px;
	margin: 18px 0 25px 0;
	}
	#postForm input, #postForm textarea {
		display: block;
		width: 390px;
		padding: 2px 5px;
		border: none;
		color: #666;
		background: #e6e6e6;
		margin-bottom: 10px;
		}
		#postForm textarea {
			height: 100px;
			margin-bottom: 0 !important;		/* forces browser constistency */
			overflow-y: auto;						/* auto-hides scrollbar in ie */
			}
		/* submit button */
		#postForm input[type="submit"] {
			margin-top: 15px;
			width: 400px;
			color: white;
			font-weight: bold;
			background: red url(/shared/woodgrain/submitred2.gif) left top no-repeat;
			}
			#postForm input[type="submit"]:hover {
				background-position: left -24px;
				}

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

/* previous guestbook entries */		
#guestbook .entry	{
	padding: 2px 10px 2px 5px;
	margin-bottom: 10px;
	}				
	#guestbook .entry h2	{
		font-size: 100%;
		color: #81807E;
		padding-bottom: 4px;
		margin-bottom: 0;
		border-bottom: 1px solid #B9B8B7;
		}
	#guestbook .entry h3	{
		font-size: 85%;
		color: #81807E;
		text-align: right;
		margin: 0; padding: 0;
		}

				
/* --- COLOR VARIATION -------------------------------------------------------------------------------------- */

body {
	color: #333;
	font: 13px Helvetica, Arial, sans-serif;
	}
#navigation ul {
	font: bold 17px Arial, Helvetica, sans-serif;
	}				

/* general links */
a:link 		{color: #75503e;}	
a:visited	{color: #92837c;}
a:hover 		{color: #4f362a;}	
a:active		{color: white;}

/* navigation links */
#navigation li a:link 		{color: #555;}
#navigation li a:visited	{color: #555;}
#navigation li a:hover 		{color: white; background-color: #4f362a;}
#navigation li a:active		{color: #75503e;}

/* highlight current page */
#navigation li a.highlight {
	color: white !important; 
	background-color: #555; 
	}

/* email signup form elements */
#emailsignup form {
	height: 19px;
	font: bold 15px Arial, Helvetica, sans-serif;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		color: white;
		font: bold 12px Arial, Helvetica, sans-serif;
		background: url(/shared/woodgrain/joincocoa4.gif) left top no-repeat;
		}
	/* this is the entry box */
	#emailsignup input#list_email {
		color: #666;
		background: #e6e6e6;		
		}	

/* guestbook submit button */
#postForm input[type="submit"] {
	color: white;
	background: #3fa9f5 url(/shared/woodgrain/submitcocoa2.gif) left top no-repeat;
	}