/* RETRO stylesheet template 

	graphic design: Hostbaby staff (www.hostbaby.com)
	interactive design, coding, additional graphics: Andrew Tay (www.andrewtay.com) June 2009
	
	COLOR VARIATION
	
*/

/* --- 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: #1f0239 url(/shared/retro/stripes-purple.gif) top center repeat-x;
	text-align: left;	
  	}


/* ACCESSIBILITY */			
			
#accessibility {
	position: absolute;
	left: -9999px;
	}	
	
	
/* CONTAINER */
				
#container {
	position: relative;			/* this serves as a reference for #banner */
	width: 860px;
	margin: 0 auto;
	padding-top: 315px;
  	background: url(/shared/retro/bg-container-purple.gif) center -52px repeat-y;
  	}

		
/* BANNER */

/* This div places the background for the upper portion of the page */	
#banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 773px;
  	background: transparent url(/shared/retro/bg-banner-purple.gif) top center no-repeat;	
	z-index: 1;
	}
	/* Photo - This is the photo at the top of the screen */
	#banner .photo {
		position: absolute;
		top: 160px;
		left: 185px;
		width: 614px;
		height: 122px;
		border: 3px solid #142755;
background: url(/images/logo-cropped-topphoto.gif) top left;
		}
		/* Photoburst - This is the cute little starburst graphic overlay thingy */
		#banner .photo span {
			position: absolute;
			bottom: -14px;
			right: -9px;
			width: 48px;
			padding-top: 62px;	/* these lines hide the span text */
			height: 0;				/* these lines hide the span text */
			overflow: hidden;		/* these lines hide the span text */
			background: url(/shared/retro/photoburst-purple.png) no-repeat;			
			}
			/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
			* html #banner .photo span {
				_background: none;
				_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/retro/photoburst-purple.png');
				}		

	#banner .band {
		position: absolute;
		top: 124px;
		left: 202px;
		font-size: 20px;
		font-weight: bold;
		text-transform: uppercase;
		}

			
/* NAVIGATION */	

#navigation {
	float: left;
	margin: -2px 0 0 15px;
	width: 135px;
	min-height: 375px;		/* this controls placement of #emailsignup and therefore, bottom of nav graphic */
	padding: 0 14px 0 8px;
	background: url(/shared/retro/bg-navigation-purple.gif) left 389px no-repeat;
	display: inline;			/* cures IE6 doubled-margin float bug */
	text-align: center;
	position: relative;	
	z-index: 200;				/* places it above #banner */
	}				
	/* Ultra-Safe Hack for IE6: applies min-height */
	* html #navigation {
		_height: 375px;		/* IE6 treats this as min-height */
		}

			
/* CONTENT */
				
#content {
	width: 600px;
	margin: 0 0 0 195px;
	padding: 0 0 10px 0;
	position: relative;
	z-index: 100;				/* places it above #banner */
	}
	h1 {
		display: none;
		}

	
/* EMAIL SIGNUP */

#emailsignup {
	clear: both;				/* always stays below #navigation */
	float: left;
	width: 148px;
	height: 70px;
	margin: 0 0 8px 15px;	
	padding: 12px 0 5px 9px;
	background: url(/shared/retro/bg-emailsignup-purple.gif) bottom left no-repeat;
	text-align: center;
	display: inline;			/* cures IE6 doubled-margin float bug */
	position: relative;
	z-index: 300;
	}		

	
/* FOOTER */
	
#footer 	{
	clear: both;				/* always stays below #emailsignup */
	width: 700px;
	height: 43px;
	margin: 0 auto;
	padding: 20px 0 0 130px;
  	background: url(/shared/retro/bg-footer-purple.gif) bottom center no-repeat;
	text-align: center;
	}
	#footer p {
		margin: 0;
		}

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

body {
	color: white;
	font: 11px Georgia, Times, serif;
	}

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

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

h3 {
	color: #bbb;
	font-size: 1.1em;
	}

p, .notes {
	line-height: 1.2;
	}
	
#navigation ul {
	margin: 0; 
	padding: 0;
	font-size: 14px;
	list-style: none;
	}				
	#navigation li {
		}
		#navigation li a {
			display: block;
			line-height: 19px;
			padding: 6px 0;
			}
			* html #navigation li a {
				_width: 100%;				/* this gives IE6 hasLayout, preventing a spacing bug */
				}
			
#footer p {
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	}	

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

/* general links */
a				{font-weight: bold; text-decoration: underline;}
a:link 		{color: #ad75e0;}	
a:visited	{color: #a584c3;}
a:hover 		{color: #eeddff;}	
a:active		{color: white;}

/* navigation links */
#navigation li a 				{text-decoration: none;}
#navigation li a:link 		{color: #333;}
#navigation li a:visited	{color: #333;}
#navigation li a:hover 		{color: #666;}
#navigation li a:active		{color: #1f0239;}

	#navigation li a span {
		padding-left: 17px;
		}
		#navigation li a:hover span {
			background: url(/shared/retro/asterisk-30trans.png) left center no-repeat;
			}
			/* Ultra-Safe Hack for IE6: eliminates non-essential alpha-transparent PNG */
				* html #navigation li a:hover span {
					_background: url(/shared/retro/asterisk-purple.gif) left center no-repeat;
					}		
			
	/* highlight current page */
	#navigation li a.highlight {
		}
		#navigation li a.highlight span {
			background: url(/shared/retro/asterisk-purple.gif) left center no-repeat; 
			}

/* email signup form elements */
#emailsignup form {color: #333;
	position: relative;		/* sets form as a reference for absolute positioning */
	font-size: 12px;
	text-transform: uppercase;
	}
	/* this affects both the entry box and the button */
	#emailsignup input {
		width: 45px;
		}
		#emailsignup input:hover {
			}
	/* this is the entry box */
	#emailsignup input#list_email {
		width: 80px;
		margin-right: 4px;
		color: #666;
		background: #e6e6e6;		
		}	
		#emailsignup input#list_email:focus {
			color: #444 !important;
			background: #d9d9d9 !important;		/* makes entry field slightly darker when it has focus */
			}	

/* --- 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 {
	color: black;
	font-weight: bold;
	}
	
/* GUESTBOOK */
/* guestbook entry form */
#postForm 	{
	width: 400px;
	margin: 18px auto 25px auto;
	}
	/* general entry fields */
	#postForm input#gbname,
	#postForm input#gbaddress,
	#postForm textarea,
	#postForm input#security_code {
		display: block;
		width: 388px;
		padding: 2px 5px;
		border: 1px solid #aaa;
		color: #666;
		background: #f6f6f6;
		margin-bottom: 10px;
		}
		#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;
		}
	/* submit button */
	#postForm input[type="submit"] {
		margin-top: 10px;
		width: 400px;
		}

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