/* BAND template stylesheet

	graphic design: Discmakers desgin team (www.discmakers.com)
	interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) July 2009
	
	ˇˇImportant Note: for this template the photo to the left of #content is part of the #emailsignup div!!
	
	MASTER FILE (gray variation B - vertical nav)
	
*/

/* --- 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 {
	background: #e9dfc8;
	text-align: left;	
  	}


/* ACCESSIBILITY */			

#accessibility {
	position: absolute;
	left: -9999px;
	}
	
	
/* CONTAINER */
				
#container {
	position: relative;			/* this serves as a reference for #banner */
	width: 820px;
	margin: 0 auto;

	/* layout b */
	padding: 285px 15px 0 15px;
	
	background: black url(/shared/band/container-gray2.gif) top center repeat-y;
  	}

		
/* BANNER */

/* This div places the main background graphic */	
#banner {
	position: absolute;
	top: 0;
	left: 15px;
	width: 820px;
	height: 269px;
	background: url(/shared/band/maingraphic-gray.jpg) top left no-repeat;
	}

	/* Photo - This is the optional main logo at the top of the page */		
	#banner .photo {
		position: absolute;
		top: 65px;
		left: 50%;
		margin-left: -250px;
		width: 500px;
		height: 150px;
background: url(/images/achoiredtaste3.jpg) center bottom no-repeat;
		text-indent: -9999px;
		z-index: 200;
		}
	
	/* Band - This is the band name which sits below the logo */
	#banner .band {
		position: absolute;
		bottom: 6px;
		left: 0;
		width: 100%;
		line-height: 1.4;
		text-align: center;
		}

			
/* NAVIGATION */	

#navigation {

	/* layout b */
	float: left;
	width: 183px;
	margin: 0 0 0 39px;	
	padding: 0 17px 15px 0;
	border-right: 2px solid white;
	text-align: right;
	display: inline;			 /* cures IE6 doubled-margin float bug */
	
	}

	#navigation ul {
		margin: 0; 
		padding: 0;
		list-style: none;
		font-size: 10px;
		text-transform: uppercase;
		}
		#navigation li {
			}
			#navigation li a {

				/* layout b */
				display: block;
				padding: 0 0 7px 60px;
				line-height: 13px;

				}
				/* Ultra-Safe Hack for IE6: gives hasLayout, preventing a spacing bug */
				* html #navigation li a {
					_height: 1px;				/* this gives IE6 hasLayout without affecting layout */
					}


/* EMAIL SIGNUP */

/* Emailsignup - Unusually, this also places the left photo and its border so that they appear below the form */
#emailsignup {
	clear: both;
	float: left;
	display: inline;			/* cures IE6 doubled-margin float bug */
	
	/* layout b */
	width: 161px;
	height: 170px;
	margin: 0 0 15px 61px;
	padding-right: 17px;
	border-right: 2px solid white;
	background: url(/shared/band/photoborder-b-white.gif) left 48px no-repeat;		/* this is the photo border */
	text-align: right;
	
	}
	/* Form - This places the actual photo. Dimensions are Layout A: 141px x 242px and Layout B: 159px x 120px */
	#emailsignup form {

	/* layout b */
		height: 169px;			/* was height: 100%, but removing 1px at the bottom makes sure that border appears */
		margin-right: 1px;	/* this makes sure that right border appears ("width: 160px" doesn't work in IE) */ 
background: url(/images/henri5.jpg) 1px 49px no-repeat;

		}
		
					
/* CONTENT */
				
#content {
	min-height: 400px;
	margin: 0 50px 0 277px; 	/* margin-bottom was 30px; now using padding instead to avoid IE6/7 problems */
	padding: 15px 0 30px 0;		/* padding-top: 1px prevents margin collapsing */
	}
	/* Ultra-Safe Hack for IE6: applies min-height */
	* html #content {
		_height: 400px;		/* IE6 treats this as min-height */
		}

	
/* FOOTER */
	
#footer 	{
	clear: both;
	width: 100%;				/* IE 6/7 needs this to give hasLayout */
	
	/* layout b */
	background: #454545;
	padding-top: 30px;
	
	text-align: center;
	}
	#footer p {
		margin: 0;
		padding-top: 9px;
		height: 21px;
		background: #787777 url(/shared/band/footerstrip-repeat-gray.gif) left 3px repeat-x;
		}

/* FIXES FOR IE6 3px FLOAT OFFSET BUG */		

* html #content {
	_position: relative;
	_left: -3px;				/* moves #content 3px to the left, where it should be */
	_margin-right: 47px;		/* 50 - 3 = 47px restores lost 3px of #content width */
	}		
		
			
/* --- Text Styles & Minor Placement Adjustments ------------------------------- */

body {
	color: white;
	font: 11px Verdana, Tahoma, Arial, Helvetica, sans-serif;
	}

#banner .band {
	color: white;
	font-size: 24px;
	text-transform: uppercase;
	}

h1 {
	margin-top: 0;					/* for browser consistency */
	margin-bottom: 0.5em;		/* for browser consistency */
	color: white;
	font: bold 17px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	}
	
h2, h3, h4 {
	font-weight: bold;
	}

h2	{
	margin-top: 0;					/* for browser consistency */
	color: #898989;
	font-size: 1.25em;
	text-transform: uppercase;
	}

h3 {
	color: #e9dfc8;
	font-size: 1.1em;
	font-style: italic;
	}
	
p, .notes {
	line-height: 1.2;
	}
	
#footer p {
	color: white !important;
	font: italic 10px Georgia, "Times New Roman", Times, serif;
	}	

.details, .contact .entry ul {
	font-style: italic;
	}	
	
	
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */

a				{font-weight: bold; text-decoration: underline;}
	a:link 		{color: #bbb;}	
	a:visited	{color: #9e9e9e;}
	a:hover 		{color: #eee;}	
	a:active		{color: #999;}

	h3 a:link		{color: #e9dfc8;}		/* reverts h3 links back to normal h3 color */
	h3 a:visited 	{color: #e9dfc8;}
	h3 a:hover 		{color: #fff5de;}
	h3 a:active		{color: #999;}
		
/* navigation links */

/* layout b */		
#navigation li a 				{text-decoration: none;}
	#navigation li a:link 		{color: #7f7f7f;}
	#navigation li a:visited	{color: #7f7f7f;}
	#navigation li a:hover 		{color: white;}
	#navigation li a:active		{color: #444;}
	
	/* highlight current page */
	#navigation li a.highlight {
		color: white !important;
		}

/* email signup form elements */
#emailsignup form {
	color: white;
	font: bold 11px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	line-height: 1.4;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 40px;
		}
	/* this is the entry box */
	#emailsignup input#list_email {
		width: 95px;
		margin-right: 4px;
		border: none;
		height: 1.35em;
		color: #666;
		background: white;
		}	

/* layout b */			
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 50px;
		}
	/* this is the entry box */
	#emailsignup input#list_email {
		width: 100px;
		}	

			
/* --- 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 1.3em 0;
	padding-bottom: 1px;				/* browser consistency: prevents margin of p from collapsing through .entry */
	}
	/* 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;
		}

/* NEWS */

.news .entry {
	margin-bottom: 2.5em;
	}
			
/* 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 {
	margin-bottom: 2.5em;
	}

.music .details .artist {
	color: white;
	font-weight: bold;
	}
	
/* GUESTBOOK */
/* guestbook entry form */
#postForm 	{
	position: relative;			/* for some bizarre reason, ie6 needs this to position the captcha image. */
	width: 400px;
	margin: 18px auto 40px auto;
	}
#postForm form {
	margin: 0;						/* ie needs this to keep from adding extra space at the bottom */
	}	
	/* labels */
	#postForm label {
		display: block;
		min-height: 1.25em;		/* improves spacing in Safari, which sometimes mishandles line-heights */
		}
	/* submit button */
	#postForm input {
		display: block;
		margin: 20px auto 0 auto;
		width: 300px;
		}
	/* general entry fields */
	#postForm input#gbname,
	#postForm input#gbaddress,
	#postForm textarea,
	#postForm input#security_code {
		display: block;
		width: 388px;
		margin: 2px 0 10px 0;
		padding: 2px 5px;
		border: 1px solid #aaa;
		color: #666;
		background: #f6f6f6;
		}
		#postForm textarea {
			height: 100px;
			margin-bottom: 0 !important;		/* forces browser constistency */
			overflow-y: auto;						/* auto-hides scrollbar in ie */
			}
		#postForm input#gbname:focus,
		#postForm input#gbaddress:focus,
		#postForm textarea:focus,
		#postForm input#security_code:focus {
			color: #444 !important;
			background: #eee !important;		/* makes entry field slightly darker when it has focus */
			}	
	
	/* 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 field */	
	#postForm input#security_code {
		width: 268px !important;
		margin-left: 120px;
		}

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