/* Alex Taylor's "Postage Paid"
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com July 2007 
   All styles that have been changed are indented
	
	- a standard IE collapsing top margin bug was solved by restoring the h1 (it used to be display: none;) and
	  giving it a minimal height with no margins
	- calendar styling is now applied at the div level instead of the page level (#calendar instead 
	  of .calendar). This means the styling gets applied to the calendar when it's chosen to appear on the home
	  page, too.
	- margins added to home page image

*/


html {
margin: 0 auto;
height: 100%;
}

body {
height: 100%;
background: black url(/shared/postagepaid/content-background.jpg) top left repeat-y;
margin: 0 auto;
margin-top: -15px;
padding: 0;
text-align: left;
font-family: Lucida Grande, arial, helvetica, sans-serif;
font-size: 79%;
color: #641C1C;
}

#accessibility {
display: none; /* we'll add this in later */
}

a, a:link, a:visited, a:active {
color: #5A300B;
text-decoration: none;
background: url(/shared/postagepaid/link-off.gif) bottom repeat-x;
}

a:hover {
background: url(/shared/postagepaid/link.gif) bottom repeat-x;
}


#navigation a {
background: none;
}

#navigation a:hover {
background: url(/shared/postagepaid/link.gif) bottom repeat-x;
}

hr {
height: 1px;
color: #5A300B;
background: #5A300B;
border-style: none;
}

input, textarea {
border: none;
background: #E3E1B5;
margin: 2px;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
color: #686342;
padding: 2px;
}

input:hover {
color: #908952;
}

input:focus {
background: #E3E1B5 url(/shared/postagepaid/link.gif) bottom repeat-x;
color: #641C1C;
}

#container {
position: relative;
width: 749px;
min-height: 100%; /* this has adverse effects in IE5.2/Mac */
background: #ccc;
background: transparent url(/shared/postagepaid/border-right.jpg) top right repeat-y;
} 

#navigation {
position: absolute;
top: 89px;
left: 0px;
margin: 0;
padding: 0;
text-align: left;
text-transform: lowercase;
background: url(/shared/postagepaid/nav-left.jpg) 4px 2px no-repeat;
width: 140px;
}


#navigation ul {
list-style-type: none;
margin: 0;
margin-left: 35px;
padding: 0;
}


#banner {
position: absolute;
top: 0;
left: 0;
width: 749px;
height: 88px;
background: url(/shared/postagepaid/header.jpg) no-repeat;
}

#banner div.band {
position: absolute;
top: 60px;
left: 170px;
color: #5A300B;
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
font-size: 2em;
text-transform: uppercase;
}

#banner div.photo {
position: absolute;
top: 90px;
right: 8px;
width: 192px;
height: 197px;
background: url(/shared/postagepaid/photoframe.jpg) no-repeat;
}

	#banner div.photo span {
	position: absolute;
	top: 19px;
	left: 34px;
	z-index: 90;
	display: block;
	text-indent: -9999px;
	color: white;
	text-transform: lowercase;
	width: 139px;
	height: 137px;
	}


#emailsignup {
position: absolute;
top: 300px;
left: 580px;
z-index: 10;
overflow: visible;
margin: 0;
padding: 0;
width: 180px;
height: 90px;
text-align: left;
}
	
	
			/* NEW!! These changes correct some spacing differences between browsers that were caused by IE's
				collapsing margin problem. Basically, the top margin of the first element within #content collapses
				with body and html and shifts everything up, even though the margin isn't touching body or html (and
				shouldn't collapse even	if it did). Instead of removing the top margin from every first element in
				#content, it's simpler to bring h1 back but with minimal height and no margins. */

         #content {
         width: 415px;
         padding-top: 89px;				/* NEW!! was 90px, but reduced to make up for new 1px h1 */
         margin-left: 125px;
         text-align: left;
         }
         
			#content h1 {
         /*	display: none; 					NEW!! now using h1 span to hide the h1 text */
	        	height: 1px; 					/* NEW!! this h1 div now protects margins from elements that follow */
         	margin: 0;						/* NEW!! from collapsing w/ html and body and shifting #content up */
         	}
         
         h1 span {
				display: none;					/* NEW!! moved from h1 */
				}
         
         h2 {
				margin-top: 0.85em;			/* NEW!! makes spacing consistent across browsers */
				}
         	
	
	#content p {
	font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
	font-size: 1.2em;
	}
	
	div.entry {
	margin-left: 5px;
	}
	
	div.entry h2 {
	padding-top: 4px;
	padding-bottom: 6px;
	background: url(/shared/postagepaid/approved.jpg) left top no-repeat;
	font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
	font-size: 1.2em;
	color: #280909;
	text-transform: uppercase;	
	}
	
	span.date {
	text-transform: none;
	}
	
	div.notes {
	color: #280909;
	margin-top: 0;
	margin-left: 12px;
	font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
	line-height: 1.4em;
	font-size: 1.2em;
	}
	
/* bio page -------------*/
body.bio div.entry p {
color: #280909;
margin-top: 0;
margin-left: 12px;
line-height: 1.4em;
}

/* music page ------------*/
body.music #content h3 {
margin-bottom: 2px;
padding-left: 72px;
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
font-size: 1.3em;
color: #403F2A;
background: url(/shared/postagepaid/music_songtitle.gif) left bottom no-repeat;

}

body.music div.artist {
margin-top: 4px;
margin-left: 35px;
padding-left: 30px;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em; 
color: #403F2A;
background: url(/shared/postagepaid/music_by.gif) left bottom no-repeat;
}

body.music div.details ul{
list-style-image: url(/shared/postagepaid/bullet.gif);
}

body.music div.details li {
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
padding: 2px;
}

/* contact page -----------*/
body.contact h2 {
margin-bottom: 2px;
padding-left: 83px;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: #403F2A;
background: url(/shared/postagepaid/contact_occupation.gif) left 7px no-repeat;
}

body.contact span.name {
margin-bottom: 2px;
margin-left: 40px;
padding-left: 47px;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
color: #403F2A;
background: url(/shared/postagepaid/contact_name.gif) left bottom no-repeat;
}

body.contact div.entry ul {
list-style-type: none;
color: #280909;
line-height: 1.4em;
}

body.contact div.entry {
padding-bottom: 8px;
}

/* press page -----------*/
body.press blockquote {
padding-left: 30px;
background: url(/shared/postagepaid/quote.gif) top left no-repeat;
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
font-size: 1.2em;
line-height: 1.5em;
min-height: 34px;
color: #280909;
}

body.press div.caption {
margin-left: 70px;
padding-left: 76px;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
color: #403F2A;
background: url(/shared/postagepaid/press_signature.gif) left bottom no-repeat;
}

body.press div.entry {
background: url(/shared/postagepaid/hr.jpg) center bottom no-repeat;
padding-bottom: 20px;
}

/* calendar page ----------*/


			/* 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? */

         #calendar h2 {
         margin-top: 2px;
         margin-bottom: 2px;
         padding-left: 74px;
         font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
         font-size: 1em;
         font-weight: normal;
         color: black;
         background: url(/shared/postagepaid/calendar_datetime.gif) left 6px no-repeat;
         }
         
         #calendar h3 {
         margin-top: 2px;
         margin-bottom: 2px;
         padding-left: 64px;
         font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
         font-size: 1.1em;
         font-weight: normal;
         text-transform: uppercase;
         color: #280909;
         background: url(/shared/postagepaid/calendar_location.gif) left bottom no-repeat;
         }
         
         #calendar h4 {
         margin-top: 0;
         margin-bottom: 9px;
         margin-left: 74px;
         font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
         font-size: 1.1em;
         font-weight: normal;
         color: #280909;
         }
         
         #calendar address {
         margin-top: 0;
         margin-left: 74px;
         font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
         font-size: 1.1em;
         font-weight: normal;
         color: #280909;
         }
         
         #calendar div.entry {
         background: url(/shared/postagepaid/hr.jpg) left bottom no-repeat;
         padding-bottom: 30px;
         margin-top: 8px;
         margin-bottom: 15px;
         }

         #calendar div.entry p {
         margin-left: 30px;
         font-weight: normal;
         color: #403F2A;
         }

/* photos page ----------*/

body.photos #content dt {
text-align: left;
margin-bottom: 4px;
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
font-size: 1.2em;
color: #403F2A;
background: url(/shared/postagepaid/photos_caption.gif) top left no-repeat;
padding-left: 58px;
line-height: 1.3em;
}

body.photos #content dd {
text-align: left;
margin-bottom: 20px;
}

body.photos #content dd img {
padding: 8px;
background: url(/shared/postagepaid/photo_background.jpg);
}

/* products page ----------*/
body.products div.entry {
margin-bottom: 30px;
}

body.products div.entry h2 {
margin: 0;
padding: 0;
background: none;
}

body.products div.entry p {
margin: 4px 0 0 0;
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
line-height: 1.4em;
color: #403F2A;
}

body.products div.entry a, body.products div.entry a:link, body.products div.entry a:visited, body.products div.entry a:active, body.products div.entry a:hover {
font-weight: bold;
}    

/* products item */
body.products div.products h2 {
margin: 0;
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
}

body.products div.products li {
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1.1em;
font-weight: normal;
color: #280909;
}

/* products cart */
body.products th {
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1.1em;
font-weight: normal;
color: #74724D;
}

body.products h3 {
margin: 10px 0 0 0;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1.1em;
font-weight: normal;
color: #280909;
}

body.products input {
border: 1px solid #9C9772;
background: #E3E1B5;
margin: 2px;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
color: #9C9772;
}

body.products #emailsignup input {
background: #E3E1B5;
color: #686342;
border: none;
}

body.products #emailsignup input:hover {
color: #908952;
}

body.products #emailsignup input:focus {
background: #E3E1B5 url(/shared/postagepaid/link.gif) bottom repeat-x;
color: #641C1C;
}

/* guestbook page ----------*/

body.guestbook #postForm {
margin-left: 40px;
width: 300px;
}

body.guestbook input {
margin-bottom: 15px;
}

body.guestbook label {
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
color: #A29D80;
}

body.guestbook textarea {
display: block;
height: 100px;
width: 260px;
}

/* Captcha stuff */
#postForm img#gbimage {
	width: 100px;
	float: left;
	margin-top: 10px;
	margin-left: 3px;
}

#postForm label.security_code_label {
	width: 150px;
	margin-top: 12px;
	margin-left: 10px;
	float: left;
}

#postForm input#security_code {
	width: 150px;
	float: left;
	margin-left: 10px;
}

#postForm input[type=submit] {
	clear: both;
	width: 265px;
	text-align: center;
}

body.guestbook h2 {
padding-left: 45px;
margin-bottom: 0;
background: url(/shared/postagepaid/guestbook_name.gif) left 8px no-repeat;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: #280909;
text-transform: none;
}


body.guestbook h3 {
margin: 0;
padding: 0;
padding-left: 45px;
padding-bottom: 8px;
background: url(/shared/postagepaid/guestbook_date.gif) no-repeat;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
color: #280909;
}

body.guestbook blockquote {
font-family: Hoefler Text, Garamond, Georgia, Times New Roman, serif;
font-size: 1.2em;
line-height: 1.4em;
color: #403F2A;
margin-top: 5px;
padding-bottom: 20px;
background: url(/shared/postagepaid/hr.jpg) left bottom no-repeat;
}

/* links page ----------*/
body.links h3 {
font-size: 1em;
margin: 0.4em;
margin-left: 2.5em;
}

body.links h2 {
font-size: 1.2em;
color: #635E45;
margin: 0.9em;
}




/* selected nav links----*/
body.home #navhome, body.bio #navbio, body.music #navmusic, body.contact #navcontact, body.press #navpress,  body.news #navnews, body.calendar #navcalendar, body.photos #navphotos, body.products #navproducts, body.guestbook #navguestbook, body.links #navlinks {
background: url(/shared/postagepaid/link.gif) bottom repeat-x;
}

#footer {
margin-top: 40px;
padding-left: 105px;
text-align: left;
font-family: American Typewriter, Courier New, Courier, Arial, sans-serif;
font-size: 1em; 
color: #641C1C;
background: url(/shared/postagepaid/legalese.jpg) 30px no-repeat;
}


			/* NEW!! minor tweaks for splash and home page images */

         .home img {margin: 1.3em 0 1em 0; display: block;}	/* NEW!! display: block triggers margin collapse */
         

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