/* URBAN template stylesheet

	graphic design: Discmakers desgin team (www.discmakers.com)
	interactive design, coding, additional graphics: 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: #394039 url(http://www.morelandarbuckle.com/shared/urban/backgrounddots-green-norepeat.gif) center bottom no-repeat;
	}
	body {
		min-height: 1000px;			/* keeps background GIF from overlapping backgrounddots GIF */
		background: url(http://www.morelandarbuckle.com/shared/urban/background-green.png) top center no-repeat;
		text-align: left;	
	  	}
		/* Ultra-Safe Hack for IE6: applies min-height */
		* html body {
			_height: 1000px;			/* IE6 treats this as min-height */
			}	

/* ACCESSIBILITY */			

/* This is the speaker overlay */			
#accessibility {
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: -448px;
	width: 250px;
	height: 265px;
	background: url(http://www.morelandarbuckle.com/shared/urban/speakers-green.png) no-repeat;
	text-indent: -9999px;
	z-index: 200;					/* layers it over everything */
	}	
	/* Ultra-Safe Hack for IE6: uses IE proprietary filter to display transparent PNG */
	* html #accessibility {
		_background: none;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/urban/speakers-green.png');
		}		
	
	
/* CONTAINER */
				
#container {
	position: relative;			/* this serves as a reference for #banner */
	left: 45px;
	width: 820px;
	margin: 0 auto;
	padding-top: 110px;
  	}

		
/* BANNER */

/* This div places the background for the top of the content page */	
#banner {
	padding: 42px 0 15px 58px;
	background: url(http://www.morelandarbuckle.com/shared/urban/banner-green.png) left top no-repeat;
	min-height: 1px;		/* for one reason only: it gives hasLayout to IE7, which needs it */
	}
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF, gives hasLayout */
	* html #banner {
		_background: url(http://www.morelandarbuckle.com/shared/urban/banner-green.gif) top left no-repeat;		
		_height: 1px;		/* for one reason only: it gives hasLayout to IE6, which needs it */
		}		
	
	/* Photo - This is the band name at the top of the page (top of the colored rectangle) */
	#banner .photo {
		width: 666px;
		min-height: 41px;
		margin: 0 0 33px 1px;
		background: url(shared/urban/arrowtop-green.gif) top left no-repeat;
		}
		/* Ultra-Safe Hack for IE6: applies min-height */
		* html #banner .photo {
			_height: 41px;			/* IE6 treats this as min-height */
			}		
		/* Photo Span - This is the band name at the top of the page (bottom of the colored rectangle) */
		#banner .photo span {
			display: block;
			min-height: 28px;
			padding: 7px 0 6px 93px;
			color: #2a302a;
			font: 20px "arial black", impact, sans-serif;
			text-transform: uppercase;
			background: url(http://www.morelandarbuckle.com/shared/urban/arrowbottom-green.gif) bottom left no-repeat;
			}

	/* Band - This is the photo at the top of the page */
	#banner .band {
		width: 532px;
		height: 280px;
		border: 3px solid #8d8d8c;
background: url(http://www.morelandarbuckle.com/images/rsz_moreland_and_arbuckle_060_resized-cropped-bandphoto.jpg);
		}
		/* Band Span - This is the logo in the upper-right corner */
		#banner .band span {
			display: block;
			position: absolute;
			width: 200px;
			height: 60px;
			top: 70px;
			left: 506px;
			text-indent: -9999px;
			}

			
/* NAVIGATION */	

/* This places the top part of the nav background */
#navigation {
	clear: both;
	float: right;
	width: 218px; 				/* 188px width of colored area + 15px + 15px for rough edges & drop shadow */
	margin: 83px 3px 0 -135px; 
	padding: 52px 0 0 0;
	background: url(http://www.morelandarbuckle.com/shared/urban/navtop-green.png) top left no-repeat;
	display: inline;			/* cures IE6 doubled-margin float bug */
	position: relative;
	z-index: 100; 				/* layers it above #banner and #content */
	}				
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html #navigation {
		_background: url(http://www.morelandarbuckle.com/shared/urban/navtop-green.gif) top left no-repeat;		
		}		

	/* This places the repeating middle part of the nav background */
	#navigation ul {
		min-height: 260px;
		margin: 0; 
		padding: 10px 30px 0 30px;
		font-size: 14px;
		text-transform: uppercase;
		list-style: none;
		background: url(http://www.morelandarbuckle.com/shared/urban/navigation-green.png) top left repeat-y;
		}
		/* Ultra-Safe Hack for IE6: applies min-height, replaces alpha-transparent PNG with transparent GIF */
		* html #navigation ul {
			_height: 260px;			/* IE6 treats this as min-height */
			_background: url(http://www.morelandarbuckle.com/shared/urban/navigation-green.gif) top left repeat-y;		
			}		
			
		#navigation li {
			border-top: 1px solid #e2e2e2;
			}
			/* Ultra-Safe Hack for IE6: gives hasLayout, curing a border-rendering bug */
			* html #navigation li {
				_height: 1px;					/* this gives IE6 hasLayout without affecting layout */
				}
			#navigation li:first-child {
				border-top: none;				/* ie6 doesn't understand this, but it's non-essential */
				}

			#navigation li a {
				display: block;
				padding: 6px 3px;
				line-height: 18px;
				}
				/* Ultra-Safe Hack for IE6: gives hasLayout, preventing a spacing bug */
				* html #navigation li a {
					_height: 1px;				/* this gives IE6 hasLayout without affecting layout */
					}

			
/* CONTENT */
				
#content {
	width: 538px;
	min-height: 350px;
	margin: 0 0 0 0;
	padding: 1px 134px 15px 58px;		/* padding-top: 1px prevents margin collapsing */
	background: url(http://www.morelandarbuckle.com/shared/urban/content-green.png) top left repeat-y;
	}
	/* Ultra-Safe Hack for IE6: applies min-height, replaces alpha-transparent PNG with transparent GIF */
	* html #content {
		_height: 350px;			/* IE6 treats this as min-height */
		_background: url(http://www.morelandarbuckle.com/shared/urban/content-green.gif) top left repeat-y;	
		}		

	
/* EMAIL SIGNUP */

#emailsignup {
	clear: both;					/* always stays below #navigation */
	float: right;
	width: 188px;
	height: 65px;
	margin: 0 3px 0 -135px; 
	padding: 45px 15px 0 15px;
	background: url(http://www.morelandarbuckle.com/shared/urban/emailsignup-green.png) bottom left no-repeat;
	text-align: center;
	position: relative;
	z-index: 100; 					/* layers it above #banner and #content */
	display: inline;				/* cures IE6 doubled-margin float bug */
	}		
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html #emailsignup {
		_background: url(http://www.morelandarbuckle.com/shared/urban/emailsignup-green.gif) bottom left no-repeat;
		}		

	
/* FOOTER */
	
#footer 	{
	width: 730px;
	height: 60px;
	padding-top: 10px;
	background: url(http://www.morelandarbuckle.com/shared/urban/footer-green.png) bottom left no-repeat;
	}
	/* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */
	* html #footer {
		_background: url(http://www.morelandarbuckle.com/shared/urban/footer-green.gif) bottom left no-repeat;		
		}		
	#footer p {
		margin: 0;
		color: #ecff18 !important;
		text-align: center;
		}

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

body {
	color: #aaa;
	font: 12px Arial, Helvetica, sans-serif;
	}

h1 {
	margin-top: 0;			/* for browser consistency */
	font-size: 1.8em;
	padding-bottom: 3px;
	}
	
h2, h3, h4 {
	font-weight: bold;
	}

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

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

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

#emailsignup {
	color: #ecff18;
	font: bold 12px Arial, Helvetica, sans-serif;
	line-height: 1.5;
	text-transform: uppercase;
	}
		
#footer p {
	font-weight: bold;
	font-size: 8px;
	text-transform: uppercase;
	}	

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

/* general links */
a				{font-weight: bold; text-decoration: underline;}
	a:link 		{color: #94ab8c;}	
	a:visited	{color: #72888c;}
	a:hover 		{color: #638059;}	
	a:active		{color: #e2e2e2;}
		
/* navigation links */
#navigation li a 				{text-decoration: none;}
	#navigation li a:link 		{color: #2a302a;}
	#navigation li a:visited	{color: #2a302a;}
	#navigation li a:hover 		{color: black;}
	#navigation li a:active		{color: #e2e2e2;}

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

/* email signup form elements */
#emailsignup form {
	}
	/* 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;
		color: #666;
		background: #eee;
		}	
		#emailsignup input#list_email:focus {
			color: #444 !important;
			background: #f6f6f6 !important;		/* makes entry field slightly lighter 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: #e2e2e2;
	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: #eee;
		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: #f6f6f6 !important;		/* makes entry field slightly lighter 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: #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;
		}


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


html {background: #f8f5ed url(shared/urban/backgrounddots-red-norepeat.gif) center bottom no-repeat;}
body {background: url(shared/urban/background-red.png) top center no-repeat;}


/* ACCESSIBILITY */			

/* This is the speaker overlay */			
#accessibility {background: url(shared/urban/speakers-red.png) no-repeat;}	
	* html #accessibility {
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/urban/speakers-red.png');
		}		
	
	
/* BANNER */

/* This div places the background for the top of the content page */	
#banner {background: url(shared/urban/banner-red.png) left top no-repeat;}
	* html #banner {_background: url(http://www.morelandarbuckle.com/shared/urban/banner-red.gif) top left no-repeat;}		
	
	/* Photo - This is the band name at the top of the page (top of the colored rectangle) */
	#banner .photo {background: url(shared/urban/arrowtop-red.gif) top left no-repeat;}
		
	/* Photo Span - This is the band name at the top of the page (bottom of the colored rectangle) */
	#banner .photo span {
		color: #f8f5ed;
		background: url(shared/urban/arrowbottom-red.gif) bottom left no-repeat;
		}

	/* Band - This is the photo at the top of the page */
	#banner .band {border: 3px solid #e1dcce;}
			
			
/* NAVIGATION */	

/* This places the top part of the nav background */
#navigation {background: url(shared/urban/navtop-red.png) top left no-repeat;}				
	* html #navigation {_background: url(http://www.morelandarbuckle.com/shared/urban/navtop-red.gif) top left no-repeat;}		

	/* This places the repeating middle part of the nav background */
	#navigation ul {background: url(shared/urban/navigation-red.png) top left repeat-y;}
		* html #navigation ul {_background: url(http://www.morelandarbuckle.com/shared/urban/navigation-red.gif) top left repeat-y;}		
		
	#navigation li {border-top: 1px solid #a58170;}
			
/* CONTENT */
				
#content {background: url(shared/urban/content-red.png) top left repeat-y;}
	* html #content {_background: url(http://www.morelandarbuckle.com/shared/urban/content-red.gif) top left repeat-y;}		

/* EMAIL SIGNUP */

#emailsignup {background: url(shared/urban/emailsignup-red.png) bottom left no-repeat;}		
	* html #emailsignup {_background: url(http://www.morelandarbuckle.com/shared/urban/emailsignup-red.gif) bottom left no-repeat;}		

/* FOOTER */
	
#footer 	{background: url(shared/urban/footer-red.png) bottom left no-repeat;}
	* html #footer {_background: url(http://www.morelandarbuckle.com/shared/urban/footer-red.gif) bottom left no-repeat;}		
	
	#footer p {
		color: #e1dcce !important;
		}

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

body 	{color: #f8f5ed;}
h2		{color: #b0352d;}
h3 	{color: white;}

#emailsignup 	{color: #ae2f27;}
		
/* --- Link Styling & Form Elements ------------------------------------------------ */

/* general links */
	a:link 		{color: #d0cbbf;}	
	a:visited	{color: #aca89e;}
	a:hover 		{color: #e1dcce;}	
	a:active		{color: #f8f5ed;}
		
/* navigation links */
	#navigation li a:link 		{color: #2d150d;}
	#navigation li a:visited	{color: #2d150d;}
	#navigation li a:hover 		{color: #6b061b;}
	#navigation li a:active		{color: #6b061b;}

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

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

/* MUSIC */
.music .details .artist {color: #e2e2e2;}
	
/* GUESTBOOK */
	/* general entry fields */
	#postForm input#gbname,
	#postForm input#gbaddress,
	#postForm textarea,
	#postForm input#security_code {
		border: 1px solid #aaa;
		color: #666;
		background: #eee;
		}
		#postForm input#gbname:focus,
		#postForm input#gbaddress:focus,
		#postForm textarea:focus,
		#postForm input#security_code:focus {
			color: #444 !important;
			background: #f6f6f6 !important;		/* makes entry field slightly lighter when it has focus */
			}	
	
/* previous guestbook entries */		
	#guestbook .entry h2	{
		color: #e2e2e2;
		border-bottom: 1px solid #B9B8B7;
		}
	#guestbook .entry h3	{
		color: #e2e2e2;
		}