/* 
	Designed by Dave Shea www.brightcreative.com
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2007 - October 2008
   All styles that have been changed are indented
	
	STEEL MAGNOLIA - LEFT NAV

	- band photo was pushed to the right in IE7, due to failed hacks and the use of margin-left instead of just
	  left. this also required applying position: relative; to #container, and right: 0px; to #emailsignup,
	  as well as commenting out many many browser-specific hacks.
	
	OCTOBER 2008:
	- fixed a broken ie5 hack that was messing up #navigation. the hacked value had a large negative margin that
	  really didn't make any sense, even for ie5
	- improved layout of #emailsignup
	- added margins to home page images	
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means they styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.
	- reset text styling for home page .entry paragraphs, such as found in the home page #calendar 
	- removed .news {line-height: 130%;} code, which has no apparent benefits, yet makes text on the news
	  page look weird
	- now using padding-left on #content, which is much more future-proof
	- fixed a minor bug in the #footer, involving page specific line-height settings for paragraphs
	- solved the infamous IE #navigation link bug, where only the text portion of the links were active. By
	  giving hasLayout to #navigation li a, the entire link blocks are now hoverable and clickable
	  
*/



/* =========== LAYOUT =========== */


/* Basic HTML Elements */
body {
	padding: 0;
	margin: 0;
	text-align: center;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
form {
	margin: 0;
}

/* main structural elements */
#accessibility {
	position: absolute;
	left: -9999px;
}
#container {
	width: 750px;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* main content elements */
               #banner {
               	width: 191px;
               	height: 210px;
               	position: absolute;
               	top: 0;
						left: 0;
               /*	margin-left: -191px; */
               }
					/*
               html>body div#banner {
               	margin-left: 0;
               }
					*/
#navigation ul {
	width: 190px;
	float: left;
	margin-top: 210px;
}

         #content {
         	margin: 0 0 0 195px;
				padding-left: 20px;			/* NEW!! This replaces margin-left: 20px; on several elements */
         }

            #emailsignup {
            	position: absolute;
            	top: 0;
					right: 0;		/* NEW!! this is much simpler than using width to push it to the right edge */
            	text-align: right;		
            	padding: 4px;
				}
				
            /*	NEW!! all of this width stuff including multiple hacks is now no longer necessary
				
					width: 554px;
            	voice-family: "\"}\"";
            	voice-family:inherit;
            	width: 546px;*/
					
           
				/*
            html>body #emailsignup {
            	width: 554px;
            }*/
            
            /* ie5/mac hack \*/
				/*
            html>body #emailsignup {
            	width: 742px;
            }*/

				/* end hack */

/* -- banner area -- */
               #banner .band {
               	width: 190px;
               	height: 211px;
background: url(/images/purpleredo-cropped-topleft.jpg) no-repeat;
	               /*	margin-left: -3px; 		NEW!! not necessary anymore */
					}
					
					/* NEW!! not necessary anymore
               #banner .band {
               	position: relative;
               	left: -191px;
               }*/
               
               /* ie5/mac hack \*/
               #banner .band {
               	position: absolute;
               	top: 0;
               	left: auto;
               }
               /* end hack */
					
					/* NEW!! not necessary anymore
               html>body #banner .band {
               	margin-left: 1px;
               }*/

#banner .band span {
	display: none;
}
#banner .photo span {
	display: none;
}

/* =========== STYLE =========== */


/* -- basic html elements -- */
body {
	font: 13px "Trebuchet MS", Verdana, Arial, sans-serif;
	color: #fff;
	background: #43434F url(/shared/steelmagnolia/01-body-bg.gif) center top repeat-y;
}
 a {
	color: #BDBDCA;
	font-weight: bold;
}
a:hover {
	color: #FC6453;
}
h2 {
	text-transform: uppercase;
	color: #B9B9BD;
	font-weight: bold;
	font-size: 17px;
	background: #52525F url(/shared/steelmagnolia/01-h2-background.gif) repeat-x;
	padding: 4px 10px;
	border-bottom: solid 1px #4B4B56;
}
h2 a {
	color: #fff;
}

         h3 {
         	font-size: 15px;
         	margin: 0 10px 0 -10px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
			#calendar h3 {
				margin-left: 10px;			/* NEW!! Reset to previous value because margin was reduced twice. */
			}

h4 {
	font-size: 14px;
	font-style: italic;
	margin: 2px 10px 10px 0;
	color: #222236;
}
ul {
	padding: 0;
	margin: 0 0 0 30px;
	list-style-type: square;
}
input:focus, textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}

/* -- content area --*/
#emailsignup input:focus {
	font-weight: normal;
}

         #content .entry {
         	margin: 0 15px 30px -5px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }

.entry .name, .entry .act {
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
	margin-left: 5px;
}
.entry ul {
	margin-top: 10px;
}
.entry li {
	line-height: 20px;
}
.entry p {
	margin: 10px 20px 15px 30px;
}

         .details {
         	margin: 0 20px 0 10px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
			#calendar .details {
				margin-left: 30px;			/* NEW!! Reset to previous value because margin was reduced twice. */
			}
			
#footer {
	font-size: 11px;
	text-align: center;
	border-top: solid 1px #4B4B56;
	border-bottom: solid 1px #4B4B56;
	background: #52525D;
	padding: 4px;
	margin-top: 2em;
	clear: both;
}
#footer p {
	margin: 0;
}

/* -- section-specific style -- */

         .home p, .index p {
         	margin: 0 20px 1.5em 0px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	line-height: 130%;
         }

			/* NEW!! This new code resets values for p on the home page--in particular, special paragraphs
				such as those found in the home page #calendar or the home page #footer. */
			
			.home .entry p {
				margin-left: 30px;	/* NEW!! This resets margin-left to standard for entries */
				margin-top: 10px;		/* NEW!! This restores a top margin to the home page calendar */
				line-height: 1.5;		/* NEW!! This resets line-height to standard */
			}
			
         #footer p {
         	line-height: 1.45 !important;		/* NEW!! This resets line-height in the #footer to standard */
         }
			
         #postForm {
         	border: solid 1px #696973;
         	border-left-color: #44424F;
         	border-top-color: #44424F;
         	margin: 0 20px 30px 0px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 10px;
         	background: #61606C url(/shared/steelmagnolia/03-banner-bg.gif) 0 0 repeat-x;
         }

#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm label {
	background-color: #565562;
	padding: 3px;
	margin-bottom: 1px;
	width: 294px;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	display: block;
	margin: auto;
}

			/* NEW!! Before, these were styled at the page level (using body.calendar or .calendar for short).
			Now that calendars can also appear on the	home page, they are styled using div#calendar or
			#calendar for short. Calendars are always contained within a #calendar div, no matter what page
			they're on. Good, no? */

         #guestbook h2 {
         	margin-bottom: 5px;
         }
         
         #guestbook h2 a {
         	text-transform: lowercase;
         }
         
         #guestbook h3 {
         	width: 100px;
         	float: left;
         	margin: 0 15px 20px 0;
         	padding: 5px 5px;
         	background: url(/shared/steelmagnolia/01-h3-bg.gif) repeat-x;
         	text-align: center;
         	border: solid 1px #696973;
         }

			
         .links h2 {
         	margin: 0 20px 10px 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }
         .links dl {
         	margin: 0 25px 20px 5px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }

.links dd {
	margin-bottom: 5px;
}
         
			.music h2, .music h3 {
         	margin: 0 20px 10px 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	font-size: 17px;
         }
			
.music h2 {
	margin-top: 40px;
}

         .music .details {
         	margin: 0 30px 15px 10px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }

.music .artist {
	color: #B9B9BD;
}
.music .artist, .music .caption {
	display: inline;
	padding-right: 10px;
}
.music .description {
	line-height: 150%;
	font-style: italic;
	border-bottom: solid 1px #797982;
}
.music #content ul {
	list-style-type: none;
	background: #6A6A74;
	padding: 5px 10px;
	margin: 10px 0;
	border: solid 1px #797982;
}
.music .mp3_hifi_download, .music .mp3_lofi_download {
	padding: 6px 0 6px 25px;
	background: url(/shared/steelmagnolia/01-cdicon.gif) no-repeat;
	display: block;
}
.music .mp3_hifi_play, .music .mp3_lofi_play {
	padding: 6px 0 6px 25px;
	background: url(/shared/steelmagnolia/01-playicon.gif) no-repeat;
	display: block;
}

			/* NEW!! This odd bit of code makes all the text on the news page look misaligned. Gone.  
         .news {
         	line-height: 130%;
         }
			*/

.photos img {
	border: solid 1px #53535F;
	background: #7A7A83;
	padding: 10px;
}

         .photos dl {
         	margin: 0 20px 0 0;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	padding: 0;
         }

.photos dt {
	padding: 5px;
	background: url(/shared/steelmagnolia/03-banner-bg.gif) repeat-x;
	margin: 10px 0 1px 0;
}
.photos dd {
	text-align: center;
	margin: 0;
	padding: 0;
}

			/* NEW!! Brand new code, since margin reduction was not applied on h2 in general */
			
			.photos h2 {
				margin-left: -20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
			}

         .press h2 {
         	margin-left: 0px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         	margin-right: 20px;
         }
			
.press .caption {
	margin: 0 40px 40px;
	padding: 5px 5px 5px 30px;
	background: url(/shared/steelmagnolia/01-speech.gif) no-repeat;
}

/* -- selected links --*/
.home #navhome, .blog #navblog, .index #navindex, .music #navmusic, .contact #navcontact,   .press #navpress, .news #navnews, .photos #navphotos, .guestbook #navguestbook,  .links #navlinks, .calendar #navcalendar, .bio #navbio, .products #navproducts {
	background: #3D3B49;
}

/* -- section-specific image replacement -- */

         h1 {
         	height: 72px;
         	border-top: solid 1px #8F8F96;
         	margin-top: 0;
         	background-repeat: no-repeat;
         	background-position: bottom right;
         	background-color: #7A7A83;
				margin-left: -20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
         }

.contact h1 {
	background-image: url(/shared/steelmagnolia/h1-contact.gif);
}
.calendar h1 {
	background-image: url(/shared/steelmagnolia/h1-calendar.gif);
}
.guestbook h1 {
	background-image: url(/shared/steelmagnolia/h1-guestbook.gif);
}
.home h1, .index h1, .list h1 {
	background-image: url(/shared/steelmagnolia/h1-welcome.gif);
}
.links h1 {
	background-image: url(/shared/steelmagnolia/h1-links.gif);
}
.music h1 {
	background-image: url(/shared/steelmagnolia/h1-music.gif);
}
.news h1 {
	background-image: url(/shared/steelmagnolia/h1-news.gif);
}
.photos h1 {
	background-image: url(/shared/steelmagnolia/h1-photos.gif);
}
.press h1 {
	background-image: url(/shared/steelmagnolia/h1-press.gif);
}
.bio h1 {
	background-image: url(/shared/steelmagnolia/h1-bio.gif);
}
.products h1 {
	background-image: url(/shared/steelmagnolia/h1-store.gif);
}
h1 span {
	display: none;
}

/* =========== TWEAKS =========== */

body {
	background-image: url(/shared/steelmagnolia/03-body-bg.gif);
}

/* -- navigation -- */
#navigation ul {
	background: url(/shared/steelmagnolia/01-nav-bg.gif) repeat-x;
	margin-left: 0;
}

         #navigation li {
         	display: block;
         	padding-bottom: 1px;
         	list-style: none;
         	margin: 0 0 -2px 0;		/* NEW!! margin-bottom was -19px, which must have been a typo */
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	margin: 0 0 -1px 0;
         }

#navigation li {
}
#navigation li a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px 20px;
	border-bottom: solid 1px #62626C;
	border-top: solid 1px #84848C;
	font-size: 11px;
	text-transform: uppercase;
}
#navigation li a:hover {
	border-top-color: #852D00;
	border-bottom-color: #FF7360;
	background: #C9412A url(/shared/steelmagnolia/01-nav-hover-bg.gif) repeat-x;
}
#emailsignup {
	background: transparent url(/shared/steelmagnolia/01-emailsignup.gif) bottom right no-repeat;
}

         #emailsignup input {
         	width: 60px;			/* NEW!! before, both the field and the button were width: 83px; */
         }
			
			#emailsignup input#list_email {
				margin-left: 2px;	/* NEW!! minor tweak improves appearance */
				width: 115px;			/* NEW!! before, both the field and the button were width: 83px; */
			}

#footer {
	margin-left: 194px;
}

/* -- banner area -- */
.no-images #banner .band {
	font-size: 36px;
	letter-spacing: -2px;
	line-height: 40px;
	padding: 80px 10px 2px 10px;
	color: #B9B9BD;
	text-align: center;
}
			
			/* NEW!! minor tweaks for splash and home page images */

         .home img {
				margin: 15px 0 15px -20px;		/* NEW!! Reduced margin-left by 20px; now using content padding. */
				display: block;		/* NEW!! display: block triggers margin collapse */
				}	

			/* NEW!! This ultra-safe hack gives hasLayout to the h2 in IE6 & IE5, which allows the header to appear
				consistently. Both browsers treat this as min-height, so this doesn't affect appearance. */
				
			* html h2 	{_height: 0;}			/* NEW!! triggers hasLayout in IE6 & IE5 */

				
			/* NEW!! These two lines give hasLayout to the #navigation links in IE5-7, which allows the links to
				to behave properly as blocks--i.e. placing the mouse anywhere in the block causes the hover effect
				to appear, and you can click anywhere in the block to activate the link. The first line is seen
				by all browsers but does not change appearance. The second line is seen only by IE5 & IE6 due
				to an utra-safe hack (combined * html and underscore hack). */
				
			#navigation li a {min-height: 0;}			/* NEW!! triggers hasLayout in IE7 */
			* html #navigation li a {_height: 0;}		/* NEW!! triggers hasLayout in IE6 & IE5 */
			

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