/* 
	Designed by  Deonya Fields, www.deonya.com  -  Kokomo IN US
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com May-June 2007 
	
	- due to what was obviously a typo, the font-size for h4 was set to 9em (i.e. absolutely enormous).
	  Normally, h4 only appears on the calendar page but the bug didn't show up because .calendar h4 is set to
	  1.1em. The simple fix was to set h4 font-size globally to 1.1em
	- attempted to fix a minor but unusually evil display anomaly in Safari where #navigation "buttons" (i.e. 
	  the li a elements) wouldn't display at full height; padding-bottom was ignored unless it was also applied
	  to li a span. Unfortunately, making the buttons the right height in Safari makes them too tall in all
	  versions of IE because IE adds the padding from both the li a and the li a span, whereas other browsers
	  don't. Eventually gave up and reverted it to how it was before. Sorry Safari.
	- fixed an IE5 display problem by commenting-out an unnecessary line that tried to center the #navigation ul
	  (it was unnecessary because the #naviagtion was already centered.
	- fixed a design flaw where line-height was globally set to be too small; caused part of band name to get
	  cut off.

	UPDATED FOR HOSTBABY WIZARD 2.0 (pre-release)
	Revised by Andrew Tay (www.andrewtay.com) for HostBaby.com April 2009
	All styles that have been changed are indented. New stuff for 2.0 update is marked as "TWO!!"
	
	- now accomodates long band names and additional navigation links (long or short) by allowing band title,
	  h1 heading, and navigation to use multiple lines
	- many many minor tweaks to input and form styling, including buttons that look more like buttons, changing
	  state on hover
	- modified guestbook postForm layout to accomodate captcha
	- cleaned up file, removing several comments from template revision process in 2007-2008

*/


#accessibility {
  display: none;
}

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0px auto 30px;
  color: #333333;
  text-align:center;
  font: normal .8em/2em Arial, Helvetica, sans-serif;
  	font-style: normal;
	font-weight: normal;
	font-variant: normal;
  background: #e8ebf1;
}

a:link {
	color: #212837;
	text-decoration: none;
	background-color: transparent;
	border-width: 0px;
	font-weight: bold;
}

a:visited {
  color: #5f739d;
  text-decoration: none;
  background-color: transparent;
  border-width: 0px;
  font-weight: bold;
}

a:hover, a:active {
  color: #5f739d;
  text-decoration: none;
  background-color: transparent;
  border-bottom: 1px dashed #5f739d;
  font-weight: bold;
}

			/* TWO!! h1 now stretches vertically when the title spills over to multiple lines */

			h1 {
				font-size: 1.7em;
				color: #343f56;
				background: url(/shared/mic/3_bg_title.jpg) bottom right no-repeat;	/* TWO!! added bottom right */
				padding-bottom: 15px;		/* TWO!! needed for now stretching h1 */
			/*	height: 40px;						TWO!! removed so that it will stretch for long, multi-line titles */
				width: 482px;
				margin-bottom: 10px;			/* NEW!! was padding-bottom, but switching to margin allows collapsing */
			}         
         
h2 {
  text-transform: lowercase;
  color: #343f56;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: 1px;
  margin: 10px 0 5px 0;			/* NEW!! margin-top was 0px, but this helps layout immensly */
}

h3 {
  text-transform: lowercase;
  color: #343f56;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: 1px;
  margin: 0 0 5px 0;
}

h4 {
  font-size: 1.1em;		/* NEW!! was 9em, an obvious typo */
  font-style: italic;
  margin: 2px 10px 10px 0;
  color: #764400;
}

			/* TWO!! Buttons now have slightly darker background to distinguish them from text boxes. Also added
				textarea so that it's styling would match. Had to reset color for input text boxes & textareas since
				there's now way to isolate buttons on their own. */
			
			input, textarea {
				background: #f4f6fb;		/*	TWO!! off-white color for buttoms (was #FFFFFF;) */
				border: 1px solid #343f56;
				color: #343f56;
				font-size: 13px;			/* TWO!! was 12px, but this renders more consistently btw. browsers */
				margin: 2px;
				padding: 2px;
			}
			input#list_email, 
			input#gbname, input#gbaddress, input#address, textarea,
			input#security_code {
				background: #FFFFFF;		/* TWO!! white color is restored for text boxes */
			}
			
			/* TWO!! Added a hover state for input buttons so it will be more obvious that they are buttons. Had to
				reset styles for input text boxes since there's now way to isolate buttons on their own. */
			
			input:hover {
				background: #cbd5eb;			/* TWO!! */
				border-color: #333;			/* TWO!! */
				color: #333;					/* TWO!! */
			}
			input#list_email, 
			input#gbname:hover, input#gbaddress:hover, input#address:hover, 
			input#security_code {
				background: #FFFFFF;			/* TWO!! */
				border: 1px solid #343f56;	/* TWO!! */
				color: #343f56;				/* TWO!! */
			}
			
#container {
  position: relative;
  margin: 0px auto;
  padding: 0;
  width: 704px;
  border: none;
  text-align: left;
  background: url(/shared/mic/3_bg_content.jpg) repeat-y center;
}

			/* TWO!! Several small changes make it look better when links spill over to a second line. */

			#navigation ul {
			/*	margin: 0px auto; 		NEW!! Text is already centered through text-align. Fixes an IE5 problem. */
			/*	padding-top: 200px;		NEW!! Superceded below.
				padding-bottom: 15px; */
				width: 674px;			/* TWO!! was 100%, but that doesn't work with left/right padding */
				padding: 201px 15px 15px 15px;	/* TWO!! added left/right padding and increased top from 200px */
				line-height: 1.9;		/* TWO!! helps second line of links line up nicely with page background */
				color: #ffffff;
				text-align: center;
				font-weight: bold;
				background: url(/shared/mic/3_bg_header.jpg) no-repeat;
				border: none;
			}

#navigation ul li {
  display: inline;
}

#navigation ul li a {
  color: #ffffff;
  text-decoration: none;
  padding: 4px;
}

/* NEW!! Failed attempt to fix a display anomaly in Safari, where the link hover color on #navigation ul li
	a:hover doesn't appear below the text (as if there were no bottom-padding). Applying bottom-padding to span
	fixes it in Safari, but breaks IE. 

#navigation ul li a span {
  padding-bottom: 4px;			/* NEW!! This padding fixes things for Safari 
} */

#navigation ul li a:hover {
  background: #212837;
  color: #ffffff;
  border: none;
}

			/* TWO!! Several changes to accomodate long band names. Band name text is now anchored to the 
				bottom-left corner of the banner area, whether it needs one line or two. Incorporates a previous
				fix to a problem in IE where descenders on letters like y, g, j would get clipped because the
				line-height had been set globally to 2em (based on the body font-size, which was too small.  */
			
			#banner {
			  position: absolute;
			  top: 80px;			/* TWO!! originally 150px, later reduced to 136px; to make up for line-height. */
			  right: 20px;
			  width: 410px;
			  text-align: right;
			  height: 108px;		/* TWO!! 108px is enough for two lines of band name */
			}
			
			#banner .band {
				position: absolute;		/* TWO!! */
				bottom: 0;					/* TWO!! */
				right: 0;					/* TWO!! */
				}
			
			#banner .band span {
			  line-height: 1.4;			/* TWO!! was 1.5, which was new code that fixed text clipping in IE */
			  color: #9eaac4;
			  font-size: 36px;
			  font-weight: bold;
			}

#banner .photo span {
  display: none;
}

#emailsignup {
  float:left;
  color: #343f56;
  font-weight: bold;
  text-align: center;
  width:167px;
  height:81px;
  padding: 8px 0px 0px 0px;
  background: url(/shared/mic/3_bg_newsletter.jpg) no-repeat;
  position: absolute;
  left: 10px;
}

#content {
  margin: 0px 10px 0px 182px;
  padding: 0px 10px 10px;
}

#footer {
  clear: both;
  height: 108px;
  width: 704px;
  background: url(/shared/mic/3_bg_footer.jpg) no-repeat bottom;
}

#footer p {
  width:100%;
  color: #212837;
  width: 95%;
  text-align: right;
  padding-top: 60px;
}

li {
	list-style: none;
}

img {
	border: none;
}

/*** Music ***/

.music .details {
	margin-bottom: 20px;
	border-bottom: 1px solid #343f56;
	width: 95%;
}

.music #content li {
	list-style-image: url(/shared/mic/3_sound_icon.jpg);
	margin-left: 23px;
	padding-bottom: 5px;
}

/*** /End Music ***/

/*** Calendar ***/


/* NEW!! New styling for calendar when it's chosen to appear on the home page */

.home #calendar {
	border-top: 1px solid #343f56;
	margin-top: 15px;
	padding-top: 15px;
}

/* NEW!! These next two statements were previously applied at the page class level 
	(e.g. .calendar .entry instead of #calendar .entry. Doing it this way has the added 
	advantage that the styling also affects the calendar when it's on the home page */

#calendar .entry {
	margin-bottom: 20px;
	border-bottom: 1px solid #343f56;
	width: 95%;
	padding-bottom: 15px;
}

#calendar h2, #calendar h3, #calendar h4, #calendar .entry, #calendar p {
	color: #343f56;
	font-size: 1.1em; 
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1.1em;		/* NEW!! Was 1em, but text looked a little too bunched together */
}

/* NEW!! improves spacing and makes the calendar a lot clearer */
#calendar .entry p {
	margin-top: 10px;
}

/*** /End Calendar ***/

/*** Photos ***/

.photos dt {
	color: #fff;
	padding: 2px 2px 2px 8px;
	width: 95%;
	font-weight: bold;
	margin-bottom: 4px;
	background: #212837;
	font-size: 1em;
}

.photos dd {
	margin-bottom: 20px;
}

.photos img {
	background: url(/shared/mic/3_bg_img.jpg);
	padding: 6px;
	border: 1px solid #212837;
}

/*** /End Photos ***/

/*** Store ***/

.products table {
	margin-bottom: 15px;
	border-bottom: 1px solid #212837;
	width: 98%;
}

.products img {
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: url(/shared/mic/3_bg_img.jpg);
	padding: 6px;
	border: 1px solid #212837;
}

.products hr {
	visibility: hidden;
}
/*** /End Store ***/

/*** Guestbook ***/

			/* TWO!! Many many small changes to form styling, including addition of captcha styling. */

			#postForm {
			/*	height: 300px;					TWO!! removed so that it can expand around captcha */
				background: #e8ebf1;
				border: 1px solid #212837;
				font-weight: bold;
				color: #343f56;
				font-size: 12px;
				margin: 4px 4px 15px;
				width: 320px;
				padding: 8px;			
			}
			
			#postForm input, #postForm label, #postForm textarea {
				display: block;
			/*	text-align: left;				TWO!! removed so that the submit button looks more like a button */
				width: 300px;
				margin: 0 auto 10px auto;
			}
			
			#postForm textarea {
				height: 6.5em;				/* TWO!! forces consistency between browsers */
				}
#postForm input:focus, #postForm textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}
			#postForm label {
				padding: 1px 0;			/* TWO!! top/bottom padding reduced from 3px to tighten spacing overall */
				margin-bottom: 1px;
				font-style: italic;
			}

			/* TWO!! Captcha styling */

			.guestbook #gbcomment {
				margin-bottom: 0 !important;			/* TWO!! forces browser constistency */
				}
			.guestbook #gbimage {
				position: absolute;
				margin-left: 8px;
				margin-top: 18px;							/* TWO!! replaces lost margin-bottom from #gbcomment */
				}
			.guestbook .security_code_label {
				display: block;
				margin-top: 10px;							/* TWO!! replaces lost margin-bottom from #gbcomment */
				width: 184px !important;
				margin: 10px 0 0 120px !important;
				}
			.guestbook #security_code {
				width: 187px !important;
				margin-left: 120px;
				margin-bottom: 20px;	
				}

/*** /End Guestbook ***/


			/* NEW!! several minor tweaks to improve text flow, margins and layout */

			dd 		{font-style: italic;}
			h2 		{margin-top: 10px;}
				
			p 			{margin: 0 0 0.2em 0;}		/* NEW!! Improves visual rhythm of text */
				
			.links dl {
				line-height: 1.5em;
				}
			
			.products .details {
				margin-bottom: 1em;
				}
			
			.guestbook blockquote {
				margin-bottom: 1.5em;
				}

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