/* 
	Designed by Steve Thiel, Crystal Clear Designs steve at ccdmail.com  -  Austin TX USA
	
	Tweaked by Andrew Tay (www.andrewtay.com) for HostBaby.com April-May 2007 
   All styles that have been changed are indented

	- 50px worth of indentation was moved from individual elements to the #content div as padding.
	- several small layout tweaks of stuff within #content, especially on the .product, .links and .music pages
	- now there's margin around the homepage image
	- fixed a bug that was causing band names with multiple words (or that were wider than 170px) to be split
	  into multiple lines. simply a matter of applying the right width to the .band span or applying
	  whitespace: nowrap;

*/


/*-----------------------------------------------
		Common
-----------------------------------------------*/

body {
	background-color: #F0E0C0;
	color: #000000;
	font-family: georgia, sans-serif;
	font-size: 12.5px;
}

a:link, a:active, a:visited {
	color: #807050; text-decoration: underline
}

a:hover {
	color: #C0B080; text-decoration: underline
}
input {
	font-family: georgia, sans-serif;
	font-size: 12.5px;
}

/*-----------------------------------------------
		Layout
-----------------------------------------------*/
#accessibility {
	display: none;
}

#container {
	width: 750px;
	margin: auto;
	padding: 0px;
}

#banner {
	position: absolute;
	top: 0px;
	width: 750px;
	z-index: 0;
}

#navigation {
	position: absolute;
	top: 30px;
}

#emailsignup {
	position: absolute;
	top: 30px;
	z-index: 1;
	width: 553px;
	margin-left: 190px;
	text-align: right;
	padding: 5px;
	height: 25px;
}

			/* NEW!! padding-left of 50px added to #content since everything inside this div should be indented
				by 50px or more. This makes it so if any new elements are added to the html, they will be indented
				to instead of being flush left. Margins and padding for existing elements have been reduced
				by 50px accordingly. */
				
         #content {
         	position: absolute;
         	top: 270px;
         	margin-left: 190px;
         	border: 2px solid #605030;
         	background-color: #FFFFFF;
         	color: #333333;
         	width: 510px;					/* NEW!! was 560px; see explanation above */
         	padding-bottom: 5px;
				padding-left: 50px;					/* NEW!! see explanation above */
         }

#footer {
	display: none;
}

/*-----------------------------------------------
		Banner
-----------------------------------------------*/
div.photo {
	position: absolute;
	top: 30px;
	left: 190px;
	background: url(/shared/riga/banner-guitar.jpg) no-repeat;
	width: 560px;
	height: 225px;
	border: 2px solid #605030;
}

			/* NEW!! The .band div has been designed to display the band name in plain text at the top of the page,
				and for some variations, to show a band photo as well. Since the .band span is positioned
				absolutely, it should be given a set width that's wider than the band name	if you want the band name
				to appear entirely on one line. Previously, FF, OP9 and IE7 would put each word of the band name on
				a separate line (aka wrapping) because each pair of words was wider than the 170px width of the
				.band div. An alternate solution, which the original designer used on some of the other variations,
				is to	apply white-space: nowrap to the span. Both fixes are included here. */
				
         div.band {
         	position: absolute;
         	top: 30px;
			/* width: 170px;					NEW!! These aren't necessary for this variation, so goodbye
         	height: 0px; 					NEW!! These aren't necessary for this variation, so goodbye */
         }

div.photo span {
	display: none;
}

         div.band span {
         	position: absolute; 
         	top: -25px;
				w2idth: 750px;				/*	NEW!! was 170px, but this is not wide enough for most band names */
         /*	text-align: center; 			NEW!! We want it left-justified, not centered (esp. with new width) */
         	font-family: georgia, sans-serif;
         	font-size: 20px;
         	font-weight: bold;
				white-space: nowrap;
         }



/*-----------------------------------------------
		Navigation
-----------------------------------------------*/

#navigation ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#navigation li {
	margin: 0px;
	padding-bottom: 3px;
	list-style-type: none;
}

#navigation  a {
	display: block;
	width: 150px;
	padding: 2px 2px 2px 10px;
	border-left: 10px solid #605030;
	border-bottom: 2px solid #605030;
	border-right: 2px solid #605030;
	border-top: 2px solid #605030;
	background: #C0B080;
	text-decoration: none;
	font-family: georgia, sans-serif;
}

#navigation a:link, #navigation a:active, #navigation a:visited {
	color: #000000; font-family: georgia, sans-serif;
}

#navigation a:hover {
	border-left: 10px solid #605030;
	border-bottom: 2px solid #605030;
	background: #807050;
	color: #ffffff;
	font-family: georgia, sans-serif;
}

/*-----------------------------------------------
		EmailSignUp
-----------------------------------------------*/
#emailsignup input {
	margin-left: 5px;
	font-weight: normal;
}
#emailsignup { 
	color: #FFFFFF;
}
/*-----------------------------------------------
		Content
-----------------------------------------------*/

         #content h1 {
         	background: url(/shared/riga/header-brown.jpg) no-repeat;
         	margin: 0 0 0 -50px;		/* NEW!! negative margin brings it flush left to inside of #content */
         	padding: 10px 0 0 15px;	/* NEW!! this was in piano variations but left out of guitar variations */
         	width: 560px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	width: 545px;
         	height: 40px;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	height: 30px;
         	font-family: georgia, sans-serif;
         	font-size: 15px;
         	font-style: normal;
         	color: #F0E0C0;
         }

         #content h2 {
         	margin-left: 0px;					/* NEW!! margin/padding reduced by 50px */
         	border-bottom: 1px solid #504030;
         	font-size: 15px;
         }

         div.notes {
         	margin: 0px;
         	padding: 7px;
         	padding-left: 25px;					/* NEW!! margin/padding reduced by 50px */
         	line-height: 17.5px;
         }

         #content p {
				margin: 7px 7px 14px 25px;			/* NEW!! margin/padding reduced by 50px, now using margin */
         /*	margin: 0px;
         	padding: 7px;
         	padding-left: 25px;	*/				
         	line-height: 17.5px;
         }

/*-----------------------------------------------
		Music
-----------------------------------------------*/

         .music h3 {
         	margin-left: 0px;					/* NEW!! margin/padding reduced by 50px */
         	border-bottom: 1px solid #504030;
         	font-size: 15px;
         }
         
         div.details {
         	margin-left: 25px;					/* NEW!! margin/padding reduced by 50px */
         }

/*-----------------------------------------------
		Contact
-----------------------------------------------*/

         div.entry span.name, li {
         	margin-left: 25px;					/* NEW!! margin/padding reduced by 50px */
         }
/*-----------------------------------------------
		Press
-----------------------------------------------*/

         div.caption {
         	margin-left: 25px;					/* NEW!! margin/padding reduced by 50px */
         }
         
         div.entry blockquote {
         	margin-left: 40px;					/* NEW!! margin/padding reduced by 50px */
         }

/*-----------------------------------------------
		Calendar
-----------------------------------------------*/

         div.entry h3 {
         	margin-left: 10px;					/* NEW!! margin/padding reduced by 50px */
         	border-bottom: 0px solid #504030;
         	font-size: 12.5px;
         }

/*-----------------------------------------------
		Photos
-----------------------------------------------*/

         .photos dt {
         	margin-left: 0px;					/* NEW!! margin/padding reduced by 50px */
         	border-bottom: 1px solid #504030;
         }
         
         .photos dd {
         	margin-left: 25px;					/* NEW!! margin/padding reduced by 50px */
         }
         
.photos img {
	padding-top: 10px;
	padding-bottom: 20px;
}

/*-----------------------------------------------
		Store
-----------------------------------------------*/

         div.products img {
         	border: 0px;
         	padding-left: 5px;					/* NEW!! margin/padding reduced by 50px */
         }

/*-----------------------------------------------
		Guestbook
-----------------------------------------------*/

         #postForm {
         	text-align: left;
         	margin: 0 55px 0px 32px;		/* NEW!! left margin has been tweaked. now it's centered */
         	width: 400px;
         }
#postForm form {
	padding: 25px 20px;
}
#postForm input, #postForm textarea {
	display: block;
	width: 360px;
	margin-bottom: 10px;
}
#postForm input[type="text"] {
	height: 15px;
}
#postForm textarea {
	height: 100px;
}
#postForm input[type="submit"] {
	width: 200px;
	margin: 0 auto;
}
/*-----------------------------------------------
		Links
-----------------------------------------------*/

.links dt, a, h2, h3 {
	border: 0px;
}

         .links h3 {
         	margin-left: 0px;			/* NEW!! margin/padding reduced by 50px */
         	font-size: 12.5px;
         }

			
/* --- NEW!! Numeruos layout tweaks to approve appearance and readability ----------------------------- */
			
			dd {
				margin-left: 15px;
				}

			li, dt, dd, address, 
			.caption, .notes, .price {
				margin-right: 7px;					/* NEW!! prevents text from touching wall of #content div */
				}

			.caption					{margin-bottom: 12px;}					
				
			/* NEW!! page-specific tweaks */
			
         .home img 				{margin: 12px 0 3px 25px;}
			
			.links dl 				{margin-left: 25px;}

			.products .caption 	{margin-left: 0;}

 			.music .caption		{margin-bottom: 0px;}
			
			.music h3 a				{text-decoration: none;}

			.products dd 			{margin-bottom: 7px;}

			
#splashimage { text-align: center; margin: 100px auto; }
#splashimage a img { border: 0; }