/* AXLE GREASE template stylesheet

	graphic design: Deirdre O'Lavery (www.dwarvenbrassiere.org)
	interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) September 2009
	
	MASTER FILE: gray, guitar theme, default banner
	
	Variations can be across any of 3 dimensions, resulting in 4 variations per color: 
	- 5 different colors ("axle grease" gray is standard)
	- guitar theme (standard) vs. bass theme
	- default banner photo (standard) or custom banner photo
	
*/

/* --- 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: #1e1c1d url(/shared/axlegrease/rockbg.jpg) top left;	
	text-align: left;	
  	}


/* ACCESSIBILITY */			

/* Hand - This is the hand graphic in the sidebar */
#accessibility {
	position: absolute;
	top: 623px;
	left: 50%;
	margin-left: 182px;
	width: 198px;
	height: 198px;
	background: url(/shared/axlegrease/handguitar-gray.gif) top left;
	text-indent: -9999px;
	z-index: 50;
	}
	
	
/* CONTAINER */
				
#container {
	position: relative;			/* this serves as a reference for #banner and #content h1 */
	width: 780px;
	margin: 0 auto;
	padding: 279px 0 0 0;		/* pushes #navigation and #content down to the right spot */
	background: #58504d;
  	}

			
/* NAVIGATION */	

#navigation {
	float: left;
	width: 134px;
	margin-bottom: 16px;
	background: url(/shared/axlegrease/navigation-gray.png) top left repeat-y;
	display: inline;			 		/* cures IE6 doubled-margin float bug */
	position: relative;
	z-index: 700;						/* makes it display over #banner and #content */
	}
	#navigation ul {
		width: 115px;
		margin: 0; 
		padding: 10px 0 33px 0;			
		list-style: none;
		font-size: 12px;
		text-transform: uppercase;
		}
		#navigation li {
			min-height: 24px;
			padding-top: 24px;
			line-height: 24px;
			text-indent: -10px;			/* creates hanging indent when there are multiple lines */
			}
			/* Ultra-Safe Hack for IE6: applies min-height, gives hasLayout */
			* html #navigation li {
				_height: 24px;				/* IE6 treats this as min-height */
				}
				
			#navigation li a {
				display: block;
				padding: 0 10px 0 20px;	/* extra 10px on left side for hanging indent */
				width: 85px;				/* gives hasLayout, preventing a spacing bug in IE6/7 */
				}

/* EMAIL SIGNUP */

#emailsignup {
	position: absolute;
	top: 550px;
	left: 571px;
	width: 190px;
	height: 70px;
	z-index: 200;							/* makes it display over any #content img photos that spill over */
	}
	#emailsignup form {
		}

/* BANNER */

#banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 780px;
	height: 211px;
	}

	/* Photo - This is the large photo at the top of the page */		
	#banner .photo {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(/shared/axlegrease/trainphoto.jpg) no-repeat;
		text-indent: -9999px;
		}
	
	/* Band - This is small band photo that sits on the right side */
	#banner .band {
		position: absolute;
		top: 281px;
		left: 571px;
		width: 203px;
		height: 258px;
		background: url(/shared/axlegrease/photobg-gray.jpg) top left no-repeat;
		}
		#banner .band span {
			display: block;
			position: absolute;
			top: 25px;
			left: 28px;
			width: 140px;
			height: 194px;
background: url(/images/p-cropped-smallphoto.jpg) no-repeat;
			text-indent: -9999px;
			}
		
					
/* CONTENT */
				
#content {
	position: relative;
	width: 367px;
	min-height: 505px;
	margin: 0 0 16px 156px; 			
	padding: 20px;						/* padding-top prevents margin collapsing */
	background: #22201e url(/shared/axlegrease/content-gray.png) left bottom no-repeat;
	}
	/* Ultra-Safe Hack for IE6: applies min-height, corrects 3px float offset */
	* html #content {
		_height: 505px;				/* IE6 treats this as min-height */
		_margin: 0 3px 0 153px;		/* left margin reduced by 3px, right increased by 3px */
		}
		
	/* H1 - This is used to place the guitar/bass graphic and the top rounded corners */
	#content h1 {
		position: relative;				/* also serves as a refernce to h1 span */
		top: -20px;
		left: -20px;
		width: 407px;
		height: 532px;
		margin: 0 -407px -532px 0;		/* these -ve margins prevent the h1 block from taking up space */
		background: url(/shared/axlegrease/content-guitar-gray.gif) top left no-repeat;
		}
		/* H1 Span - The band/page name ribbon */
		#content h1 span {
			display: block;
			position: absolute;
			bottom: 554px;
			left: -156px;					/* same number of px as #content margin-left */
			width: 720px;
			min-height: 32px;
			padding: 7px 20px 7px 40px;
			line-height: 32px;
			background: url(/shared/axlegrease/h1-gradient-gray.png) left -3px repeat-y;
			}
			/* Ultra-Safe Hack for IE6: applies min-height */
			* html #content {
				_height: 32px;				/* IE6 treats this as min-height */
				}

	/* These lines of code force the rest of the content to layer above the h1 guitar/bass graphic */			
	#content * {
		position: relative;
		z-index: 500;
		}		
	#content h1 {
		z-index: 0 !important;
		}		

	/* This could also be used instead of #content * or #content>*
	#content p,
	#content h2, #content h3, #content h4,	#content img,
	#content ul, #content ol, #content dl,	
	#content form,
	#content .entry, #content .notes, #content .details, #content .contact {
		position: relative;
		z-index: 500;
		} */
		
	/* This makes it so that large images won't expand the #content div in IE6 */		
	* html #content img, * html #content object, * html #content embed {
		_margin-right: -185px;
		}
	
/* FOOTER */
	
#footer 	{
	clear: both;
	width: 100%;				/* IE 6/7 needs this to give hasLayout */
	height: 47px;
	background: url(/shared/axlegrease/footer-gray.png) left top repeat-y;
	text-align: center;
	}
	#footer p {
		padding-top: 14px;
		margin: 0;
		}

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

body {
	color: #c4c1c0;
	font: 12px Georgia, "Times New Roman", Times, serif;
	}

#banner .band {
	}

h1 {
	margin-top: 0;					/* for browser consistency */
	margin-bottom: 0.5em;		/* for browser consistency */
	color: #c4c1c0;
	font: italic 26px Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	}
	
h2	{
	margin-top: 0;					/* for browser consistency */
	color: #7b6c59;
	font: italic 14px Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	}

h3 {
	margin-bottom: 0.5em;	/* */
	color: #7a7572;
	font: bold italic 15px Georgia, "Times New Roman", Times, serif;
	}

h4 {
	margin-top: 0.5em;	/* */
	}

#footer p {
/*	color: #c4c1c0 !important; */
	font: italic 14px Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	}	
		
p, .notes {
	line-height: 1.2;
	}

.details, .contact .entry ul {
/*	font-style: italic; */
	}	

address {
	}	
	
/* --- Link Styling & Form Elements ------------------------------------------------- */

/* general links */

a				{font-weight: bold; text-decoration: underline;}
	a:link 		{color: #a9ad8c;}	
	a:visited	{color: #a9ad8c;}
	a:hover 		{color: #7f8269;}	
	a:active		{color: #999;}

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

#navigation li a 				{text-decoration: none;}
	#navigation li a:link 		{color: #c4c1c0;}
	#navigation li a:visited	{color: #c4c1c0;}
	#navigation li a:hover 		{color: #7b6c59;}
	#navigation li a:active		{color: #999;}
	
	/* highlight current page */
	#navigation li a.highlight {
		color: #7b6c59 !important;
		}

/* email signup form elements */
#emailsignup form {
	line-height: 1.4;
	color: #c4c1c0;
	font-style: italic;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 40px;
		border: 1px solid #7b6c59;
		background: #c4c1c0;
		}
		#emailsignup input:hover {
			background-color: #aca9a8;
			}
	/* this is the entry box */
	#emailsignup input#list_email {
		width: 135px;
		height: 1.35em;
		margin-right: 8px;
		padding: 2px;
		border: 1px solid #7b6c59;
		color: #7b6c59;
		background: #22201e;
		}	

		
/* --- 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 */
	border-bottom: 2px solid #7b6c59;	/* */
	}
	/* 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 h2 {
		}
	#calendar .entry h3 {
		}
	#calendar .entry .details {
		margin-left: 0;
		}
		#calendar .entry .details 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. */
	margin: 0 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: 250px;
		}
	/* general entry fields */
	#postForm input#gbname,
	#postForm input#gbaddress,
	#postForm textarea,
	#postForm input#security_code {
		display: block;
		width: 355px;
		margin: 2px 0 10px 0;
		padding: 2px 5px;
		border: 1px solid #aaa;
		color: #666;
		background: #c4c1c0;	/* */
		}
		#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: #cecece !important;		/* */
			}	
	
	/* 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: 235px !important;
		margin-left: 120px;
		}

/* previous guestbook entries */		
#guestbook .entry	{
	padding: 2px 10px 2px 5px;
	margin-bottom: 10px;
	font-size: 14px;
	}				
	#guestbook .entry h2	{
		padding-bottom: 4px;
		border-bottom: 2px solid #7b6c59;	/* */
		margin-bottom: 0;
	/* color: #81807E; */
		font-size: 16px;
		text-transform: none;
		}
	#guestbook .entry h3	{
		margin: 0; 
		padding: 0;
	/* color: #81807E; */
		font-size: 14px;
		font-weight: normal;
		text-align: right;
		}


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

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

#navigation ul#navlist li {
	position: relative;			/* used as a reference for subnav */
	}
	/* Flyout Arrows */
	#navigation ul#navlist li.hasflyout {
		background: url(/shared/axlegrease/rightarrow-gray.gif) 105px 32px no-repeat !important;
		}
		/* Ultra-Safe Hacks for IE6 and IE7: this eliminates strange gap that appears when a li in the main nav
			has a subnav that also has li in it. The margin is reduced using ems because the size of the gap
			depends on the font size used in the main nav. */
		* html             #navigation ul#navlist li.hasflyout 	{*margin-bottom: -0.23em;}
		*:first-child+html #navigation ul#navlist li.hasflyout 	{*margin-bottom: -0.23em;}
		
		#navigation ul#navlist li.hasflyout:hover {
			}

/* --- Positioning and Hover Effect for Sub-Navigation (Flyouts) --- */
				
#navigation li ul.subnav {
	display: block;
	position: absolute;
	z-index: 1000;
	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: 120px;
	border: 5px solid #58504d;
	padding: 0;
	}
	#navigation li:hover ul.subnav,
	#navigation li.sfhover ul.subnav {
		top: 24px;				/* causes subnav to appear on hover (it's critical that there's no gap) */
		right: -129px;			/* causes subnav to appear on hover (it's critical that there's no gap) */
		}

/* --- Styling for Sub-Navigation (Flyouts) --- */
	
	#navigation li ul.subnav li {
		border-top: 2px solid #58504d;
		}	
		#navigation li ul.subnav li:first-child {
			border-top: none;
			}	
			
	#navigation li ul.subnav li a {
		display: block;
		width: 90px;					/* gives hasLayout to IE6/7. otherwise, it would be unnecessary */
		padding: 5px 10px 5px 20px;
		line-height: 1.25;
		font-size: 10px;
		}
		#navigation ul.subnav li a:link 		{color: #b1a089; background: #22201e;}
		#navigation ul.subnav li a:visited 	{color: #b1a089; background: #22201e;}
		#navigation ul.subnav li a:hover 	{color: #b1a089; background: #383635;}
		#navigation ul.subnav li a:active 	{color: #c4c1c0; background: #383635;}