/* 
	Designed by  Deonya Fields, www.deonya.com  -  Kokomo IN US
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com May-June 2007 
   All styles that have been changed are indented
	
	- 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 bothe the li a and the li a span, whereas other browsers
	  don't. Eventually gave up and reverted it to how it was before.
	- 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.

*/


#accessibility {
  display: none;
}

* {
  margin: 0;
  padding: 0;
}

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

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

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

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

         h1 {
         	font-size: 1.7em;
         	color: #764400;
         	background: url(/shared/mic/5_bg_title.jpg) no-repeat;
         	height: 40px;
         	width: 482px;
         	margin-bottom: 10px;			/* NEW!! was padding-bottom, but switching to margin allows collapsing */
         }


         h2 {
           text-transform: lowercase;
           color: #764400;
           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: #764400;
  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;
         }

input {
	background: #FFFFFF;
	border: 1px solid #764400;
	color: #764400;
	font-size: 12px;
	margin: 2px 2px 2px 2px;
	padding: 2px;
}

#container {
  position: relative;
  margin: 0px auto;
  padding: 0;
  width: 704px;
  border: none;
  text-align: left;
  background: url(/shared/mic/5_bg_content.jpg) repeat-y center;
}


         #navigation ul {
         /*	margin: 0px auto; 		NEW!! Text is already centered through text-align. Fixes an IE5 problem. */
         	padding-top: 200px;
         	padding-bottom: 15px;
				width: 100%;
         	color: #ffffff;
         	text-align: center;
         	font-weight: bold;
         	background: url(/shared/mic/5_bg_header.jpg) no-repeat;
         	border: none;
         }
			

#navigation ul li {
  display: inline;
}

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

   		/* NEW!! This failed to fix a display anomaly in Safari (not sure whether it's a true bug or just a
   			different way of interpreting the spec) where the bottom padding on #navigation ul li a
   			doesn't work unless you also apply this to the span, even though the span tags are normally
   			completely extraneous. You'll only notice the difference while hovering on a link. Unfortunately,
				the fix messes it up in IE and the original problem was never severe enough to justify hacking it.

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

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

			/* NEW!! The perils of setting leading globally: the original designer set
				font: normal .8em/2em Arial, Helvetica, sans-serif; for the whole body. This was inherited here,
				causing the line-height to be way too small (descenders on letters like y, g, j, etc. would get
				cut off in IE). Fixed by increasing line-height and repositioning accordingly. */
				
         #banner {
           position: absolute;
           top: 136px;						/* NEW!! This was 150px; now it's reduced to make up for line-height. */
           right: 20px;
           width: 410px;
           text-align: right;
         }

         #banner .band span {
           line-height: 1.5;				/* NEW!! This prevents the text from being clipped off in IE */
           color: #ffdeb1;
           font-size: 36px;
           font-weight: bold;
         }

#banner .photo span {
  display: none;
}

#emailsignup {
  float:left;
  color: #764400;
  font-weight: bold;
  text-align: center;
  width:167px;
  height:81px;
  padding: 8px 0px 0px 0px;
  background: url(/shared/mic/5_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/5_bg_footer.jpg) no-repeat bottom;
}

#footer p {
  width:100%;
  color: #ffdeb1;
  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 #764400;
	width: 95%;
}

.music #content li {
	list-style-image: url(/shared/mic/5_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 #764400;
				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 #764400;
         	width: 95%;
         	padding-bottom: 15px;
         }

         #calendar h2, #calendar h3, #calendar h4, #calendar .entry, #calendar p {
         	color: #764400;
         	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: #4c2d01;
	font-size: 1em;
}

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

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

/*** /End Photos ***/

/*** Store ***/

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

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

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

/*** Guestbook ***/

#postForm {
	height: 300px;
	background: #ffdeb1;
	border: 1px solid #4c2d01;
	font-weight: bold;
	color: #764400;
	font-size: 12px;
	margin: 4px 4px 15px;
	width: 320px;
	padding: 8px;
}
#postForm input, #postForm label, #postForm textarea {
	display: block;
	text-align: left;
	width: 300px;
	margin: 0 auto 10px auto;
}
#postForm input:focus, #postForm textarea:focus {
	color: #fff;
	background: #C84130;
	font-weight: bold;
}
#postForm label {
	padding: 3px 0;
	margin-bottom: 1px;
	font-style: italic;
}

/*** /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; }