/* 
	Designed by Jordi Romkema, Jor-On Web and Print Design www.jor-on.com  -  Zeewolde  Netherlands
	
	Bugfixed by Andrew Tay (www.andrewtay.com) for HostBaby.com June 2007 
   All styles that have been changed are indented
	
	- 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.
	- minor usability improvements: 1) max-width is now applied to p, blockquote, etc. to keep the lines from
	  getting too long before wrapping; 2) display: block; is now applied to #navigation a, which makes menu
	  links easier to click
	- new margins on home page image

*/


/* elements */

body {
	background-color: #FFFFFF;
	background-image: url(/shared/oldbook/bg_left-classic.gif);
	background-repeat: repeat-y;
	background-position: left top;
	margin-left: 146px;
	margin-right: 0px;
	padding: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
}

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

a:hover, a:active {
	color: #A5B176;
	text-decoration: underline;
}

address {	
	margin: 0px;
	padding: 0px;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

blockquote {
	padding-left: 20px;
}

img {
	border-color: #000000;
}

hr {
	color: #CAD991;
	background-color: #CAD991;
	border: 0px;
	height: 1px;
}

form {
	margin: 0px;
}

/* classes */

.name {
	padding-left: 5px;
	color: #7B8552;
	font-weight: bold;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

.caption {
	font-style: italic;
	color: #666666;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

/* accessibility */

#accessibility {
	position: absolute;
	left: -9999px;
}

#accessibility a {
	display: none;
}

/* content */

#content {
	background-image: url(/shared/oldbook/pagebg-classic.gif);
	background-repeat: repeat;
	background-position: left top;
}

#content h1 {
	background-color: #D9B791;
	background-image: url(/shared/oldbook/head-classic.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 10px;
	margin-bottom: 0px;
	width: auto;
	color: #FFFFFF;
	text-align: right;
	height: 60px;
	padding-right: 10px;
	font-weight: bold;
	text-transform: lowercase;
	font-size: medium;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: x-large;
}

#content h1 span {
	line-height: 60px;
	vertical-align: middle;
	margin: 0px;
}

#content h2 {
	background-image: url(/shared/oldbook/bg_header-classic.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 1px;
	text-indent: 5px;
	font-weight: bold;
	color: #B39778;
	margin: 0px;
	margin-top: 10px;
	font-size: small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: medium;
}

#content h2 .date {
	font-weight: normal;
}

#content h3 {
	font-weight: normal;
	color: #A5B176;
	font-size: small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: medium;
}

#content p, #content .notes, blockquote, td {
	padding: 5px;
	margin: 0px;
	margin-top: 10px;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

/* banner */

#banner .photo {
	background-image: url(/shared/oldbook/bg_left_bar-classic.gif);
	position: absolute;
	height: 210px;
	width: 146px;
	left: 0px;
	top: 0px;
}

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

#banner .band {
	display: none;
}

/* navigation */

#navigation {
	background-image: url(/shared/oldbook/bg_menu-classic.gif);
	background-repeat: repeat-x;
	height: 26px;
	margin: 0px;
}

         #navigation li {
         	background-image: url(/shared/oldbook/menusplit-classic.gif);
         	background-repeat: no-repeat;
         	list-style-type: none;
         	float: left;
         	padding-left: 0px;			/* NEW!! Padding reduced by 5px to make up for increase for li a */
         	padding-right: 5px;			/* NEW!! Padding reduced by 5px to make up for increase for li a */
         	background-position: right top;
         	text-transform: lowercase;
         	margin: 0px;
         	font-size: x-small;
         	voice-family: "\"}\"";
         	voice-family:inherit;
         	font-size: small;
         }

#navigation ul {
	padding-left: 0px;
	margin: 0px;
}

         #navigation li a {
         	line-height: 26px;
         	vertical-align: middle;
				display: block;					/* NEW!! Makes links easier to click, no change in appearance */
				padding: 0 5px;					/* NEW!! Makes clickable area full width */
			}

#navigation a:link, #navigation a:visited {
	color: #000000;
	text-decoration: none;
}

#navigation a:hover, #navigation a:active {
	color: #FFFFFF;
}

/* footer */

#footer {
	padding: 2px;
	margin: 0px;
	margin-top: 10px;
	color: #CCCCCC;
	font-size: xx-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: x-small;
}

/* forms, inputs, textareas, etc. */

#emailsignup {
	margin-top: 10px;
	background-color: #EEFFAA;
	padding: 3px;
	text-align: right;
	text-transform: lowercase;
	color: #7B8552;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

#postForm {
	text-align: left;
	background-color: #EEFFAA;
	margin: 0px;
	margin-top: 10px;
	text-transform: lowercase;
	color: #7B8552;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

#postForm form {
	padding: 10px;
}

#postForm input, #postForm textarea {
	display: block;
	width: 360px;
	margin-bottom: 10px;
}

#emailsignup input, #postForm input, #postForm textarea {
	margin-left: 5px;
	border: 1px solid #7B8552;
	background-color: #F6FFD1;
	padding: 1px;
	font-weight: bold;
	color: #7B8552;
}

#emailsignup input[type="text"], #postForm input[type="text"], #postForm textarea {
	background-image: url(/shared/oldbook/formbg-classic.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#emailsignup input[type="submit"], #postForm input[type="submit"] {
	background-image: url(/shared/oldbook/formsubmitbg-classic.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}

/* page specific */

.guestbook #content h3 {
	text-indent: 5px;
	font-style: italic;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

.links #content h3, .calendar #content h3 {
	padding: 0px;
	margin: 0px;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

			/* 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 h3, #calendar .details {
         	padding-left: 5px;
         	margin: 0px;
         }
			
			/* NEW!! minor tweak for home page image */

         .home img {margin: 10px 0; display: block;}	/* NEW!! display: block triggers margin collapse */
         
			/* NEW!! Since this is a fluid layout and #content will stretch in width, this prevents lines from
				becoming so long (really, "wide") that they are hard to read. Ultra-safely hacked for IE6 using
				the * html and underscore hacks. IE6 can't do max-width, so this uses a proprietary workaround.
				see (www.svendtofte.com/code/max_width_in_ie/) and (www.cameronmoll.com/archives/000892.html) */
				
			p, blockquote, .entry, .details,	.guestbook #guestbook {
				max-width: 750px;
			}
			
			* html p, blockquote, .entry, .details,	.guestbook #guestbook {
				_width:expression(document.body.clientWidth > 751? "750px" : "auto");
			}

.music .artist {
	color: #A5B176;
	text-indent: 5px;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

.photos #content dt {
	margin: 0px;
	background-color: #EEFFAA;
	color: #7B8552;
	padding: 0px;
	padding-left: 5px;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

.photos #content dd {
	background-color: #FFD3A7;
	padding: 3px;
	margin: 0px;
	margin-top: 1px;
	margin-bottom: 10px;
	background-image: url(/shared/oldbook/bg_menu-classic.gif);
	background-repeat: repeat-x;
	text-align: center;
}

.music #content h3 {
	font-weight: bold;
	color: #B39778;
}

.contact #content li {
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

.music #content li {
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family:inherit;
	font-size: small;
}

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