@import url("reset.css");
ul#mainNav {margin:0}

/* @group LAYOUT */
body {
	text-align:center; /* this centers the wrappers in older IEwin versions */
	padding: 0 450px 0 450px; /* these side paddings together determine the natural min-width */
	font : 75%/1.6 "Lucida Sans", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif; /*14px*/
	background-image: url(../graphics/site/pattern_068_green.gif);
	background-repeat: repeat;
	}
	
#sizer {
	width: 45%; /* here is the critical value for customizing the Jello behavior */
	margin: 0 auto 0 auto; /* standard centering method */
	text-align: left; /* resets centering hack to default */
	}	
	
div#wrapper {
	margin: 0 -450px 0 -450px; /* these side margins should be the same or slightly less than body paddings */
	position: relative;
	min-width: 900px; /* This prevents Safari from losing the negative margins in narrow windows */
	text-align:left;
	background-image: url(../graphics/site/pageedge.png);
	background-repeat: repeat-y;
	background-position: right top;
	}
	
/* Holly hack for IE Must be zero, not the usual 1% value, due to IE bug  \*/
* html body,
* html #sizer,
* html #wrapper { height: 0;}
/* */

/* helps IE get the child percentages right. */
#inner {
	width: 100%;
	background-image: url(../graphics/site/paperhole.jpg);
	background-repeat: repeat-y;
}

/* @end */

/* @group ELEMENTS */
h1, h2, h3, h4, h5, h6 {
	margin-bottom:0.5em; /*small margin*/
	line-height:1.4;
	}
p { margin: 0.5em 0 1em 0 }
h1 { font-size: 1.9em; }
h2 {
	font-size: 1.4em;
	color:#247e51;
	}
h3 {
	font-size: 1.5em; 
	line-height:1.6;
	background-color:#993399; 
	color: white; 
	display: inline;
	padding: 2px;
	}
h4 { 
	font-size: 1.16em; 
	color:#606; 
	}
li  { list-style-type: circle; list-style-position: inside;  }	
div#mainContent li {padding-bottom: 10px;}	
div#subContent ul {padding: 5px 0 15px 0}

div#mainContent p, 
div#mainContent h1, 
div#mainContent h3, 
div#mainContent h4,
div#mainContent ul,
div#mainContent form {
	padding-left: 80px;
	}
div#mainContent h2 {
	margin-left: 80px;
	display: inline;
	color:#fff;
	background-color:#396; 
	padding: 3px 4px;
	}	
div#mainContent h4 { margin-top: 1em; }	
	
div#mainContent h1  { 
	position:relative;
	width: 400px;
	height: 40px;
	margin-bottom: 15px;
	}
div#mainContent h1 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	}
div#subContent h2 {
	text-transform:uppercase; 
	padding-bottom: 10px; 
	color:#666
	}

/* @group Colors */
body#home h4, body#contact h4  { color:#247e51; } 
body#books h4, body#read h4 { color:#036; } 
body#about h4 { color:#c36; } 
body#about div#subContent h3 { background-color:#939;} 
body#about div#mainContent h2 { background-color:#c36;   } 
body#books div#mainContent h2 { background-color:#036 }
body#snippets div#mainContent h2 { background-color:#939; }  
body#books div#subContent h3, body#read div#subContent h3 { background-color:#396; } 
body#contact div#subContent h3 { background-color:#036; } 
body#home div#subContent ul {color:#606;} 
body#books div#subContent p {color: #036} 

body#books div.line, body#read div.line { background-image: url(../graphics/site/blueline.gif);	}
body#home div.line { background-image: url(../graphics/site/greenline.gif);	}
/* @end */

/* @group Layout and padding */

body#books div#subContent p {margin-top: 10px;}
body#read div#subContent ul	{padding-top: 0}
body#read div#subContent img {padding-top: 25px}
body#snippets div#mainContent p {padding-bottom: 10px}
body#snippets div#subContent p {padding-bottom: 15px; color: #606}
/* @end */
/* @end */

/* @group FOOTER */
div#footer	{
	height: 50px;
	margin-left: 80px;
	margin-right: 60px;
	padding-top: 100px;
	background-image: url(../graphics/site/footerline.gif);
	background-repeat: no-repeat;
	}

div#footer p {float: right}	
div#footer p.validated {float: left; margin: 0;}
div#footer p.validated a {border: none}
/* @end */

/* @group HEADER */

div#header {
	height: 220px;
	}
	
div#header h1 {
	float:right;
	width: 200px;
	position:relative;
	height: 180px;
	}	
div#header h1 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../graphics/site/header.png);
	background-repeat: no-repeat;
	}

/* @end */

/* @group MAIN NAV */

ul#mainNav {
	float: left;
	width: 556px;
	padding: 130px 0 0 80px;
	background-image: url(../graphics/navigation/navimages.jpg);
	background-repeat: no-repeat;
	background-position: 80px 0px;
	list-style-type:none; 
	diplay:inline;
	}
	
ul#mainNav li {display:inline;}
ul#mainNav li a {
	float:left; 
	display:block; 
	height: 45px; 
	position: relative;
	border: none
	}
	
ul#mainNav li a span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	}	
	
ul#mainNav li a.home {width: 58px; padding-right: 20px;}	
ul#mainNav li a.about {width: 127px; padding-right: 20px;}
ul#mainNav li a.books {width: 62px; padding-right: 20px;}
ul#mainNav li a.snippets {width: 96px; padding-right: 20px;}
ul#mainNav li a.contact {width: 133px}

a:link.home span, a:visited.home span	{
	background-image: url(../graphics/navigation/home.gif);
	background-repeat: no-repeat;
	}

a:link.about span, a:visited.about span	{
	background-image: url(../graphics/navigation/fingerprint.gif);
	background-repeat: no-repeat;
	}
	
a:link.books span, a:visited.books span	{
	background-image: url(../graphics/navigation/books.gif);
	background-repeat: no-repeat;
	}	
	
a:link.snippets span, a:visited.snippets span	{
	background-image: url(../graphics/navigation/snippets2.gif);
	background-repeat: no-repeat;
	}	
	
a:link.contact span, a:visited.contact span	{
	background-image: url(../graphics/navigation/contact.gif);
	background-repeat: no-repeat;
	}	
	
a:hover.home span, body#home a.home span {
	background-image: url(../graphics/navigation/home_over.gif);
	}			
	
a:hover.about span, body#about a.about span {
	background-image: url(../graphics/navigation/fingerprint_over.gif);
	}	
	
a:hover.books span, body#books a.books span {
	background-image: url(../graphics/navigation/books_over.gif);
	}
	
a:hover.snippets span, body#snippets a.snippets span {
	background-image: url(../graphics/navigation/snippets2_over.gif);
	}	
	
a:hover.contact span, body#contact a.contact span {
	background-image: url(../graphics/navigation/contact_over.gif);
	}

/* @end */	
	
/* @group MAIN AND SUB COLUMNS */
div#mainContent { 
	float: left; 
	width: 63%; 
	color: #000;
	margin-bottom: 4em;
	}
		
div#subContent {
	width: 210px;
	padding: 0 0 30px 20px;
	float: right;
	margin-right: 60px;
	display: inline;
	margin-bottom: 4em;
	background-image: url(../graphics/site/subcontentline.gif);
	background-repeat: no-repeat;
	}
/* @end */

/* @group PAGES */

/* @group Titles */
body#home div#mainContent h1 span {background-image: url(../graphics/signage/welcome.gif);}	
body#about div#mainContent h1 span {background-image: url(../graphics/signage/fingerprint.gif);}	
body#authorinfo div#mainContent h1 span	{background-image: url(../graphics/signage/author.gif);}
body#books div#mainContent h1 span	{background-image: url(../graphics/signage/books.gif);}	
body#read div#mainContent h1 span {background-image: url(../graphics/signage/try.gif);}	
body#snippets div#mainContent h1 span {background-image: url(../graphics/signage/snippets.gif);}
body#contact div#mainContent h1 span {background-image: url(../graphics/signage/contact.gif);}
body#reviews div#mainContent h1 span {background-image: url(../graphics/signage/reviews.gif);}
/* @end */

/* @group Layout */
body#form div#mainContent {height: 400px}
body#authorinfo div#subContent {padding-top: 25px}	/*because h2 is usually at the top of this column with 15px top pad */
/* @end */	

/* @group Home page */
body#home div#mainContent ul.news {
	width: 100%;
	overflow: hidden;
	}
body#home div#mainContent ul.news li {
	width: 25%;
	margin-right: 1em;
	padding: 10px;
	float: left;
	overflow: hidden;
	border: 3px solid #ccc;
	background: #ffdafe;
	}	
div#feed {
	margin-left: 80px;
	margin-top: 0.5em;
	}
div#mainContent div#feed ul { padding: 0}	
div#mainContent div#feed h3, div#mainContent div#feed p {
	background-color: transparent;
	color: #333;
	display: block;
	padding: 0;
	}
div#feed h3 { margin-top: 1em; }
div.blog { 
	background: url(../graphics/site/blogbottom.jpg) no-repeat 0 100%;
	width: 100%;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	}
div#subContent div.blog h4 {
	padding-top: 90px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0;
	display: block;
	color:#606;
	background: url(../graphics/site/blogtop.jpg) no-repeat;
	}	
/* @end */

/* @group Notepaper */
.notepaper {
	float: right;
	width: 220px;
	height: 245px;
	margin-left: 20px;
	background: url(../graphics/site/notepaper.jpg) no-repeat 100% 0;
	}
body#home div#mainContent div.notepaper h4, body#books div#mainContent div.notepaper h4 {
	color: #333;
	padding: 1.5em 30px 1em 25px;
	}

/* @end */




/* @end */

/* @group LINKS */
a { text-decoration: none; font-weight: bold; }
a:link, a:visited { color:#247e51; border-bottom: 1px solid #247e51;}
a:hover { color:#333; border-bottom: 1px solid #333;}

div#subContent a:link, div#subContent a:visited,
body#home div#mainContent ul.news li a:link,
body#home div#mainContent ul.news li a:visited { 
	color:#606; 
	border-bottom: 1px solid #606;
	}
div#subContent a:hover,
body#home div#mainContent ul.news li a:hover { color:#333; border-bottom: 1px solid #333;}

body#books div#subContent a:link, body#books div#subContent a:visited,
body#read div#subContent a:link, body#read div#subContent a:visited { color:#036; border-bottom: 1px solid #036;}
body#books div#subContent a:hover,
body#read div#subContent a:hover  { color:#333; border-bottom: 1px solid #333;}

div#footer a {border: none}

/* @end */

/* @group CLASSES */
.clear { clear:both; }

.floatlf {float: left; margin-right: 10px; padding-top: 5px}
.floatrt {float: right; margin-left: 10px; padding-top: 5px}
div#mainContent img.floatlf {float: left; margin-right: 10px; padding: 5px 0 0 80px;}


.text_green {color:#247e51; font-weight: bold}
.text_grey {color:#666; font-weight: bold}
.text_blue {color:#036; font-weight: bold}
.text_purple {color:#606;  font-weight: bold}
.small {color:#036; font-size: 90%;}

div.line {
	padding: 5px 0;
	margin: 30px 0 30px 80px;
	background-image: url(../graphics/site/line.gif);
	background-repeat: no-repeat;
	}

/* @end */


/* @group FORMS */
form { padding: 25px 0 1em 0; margin: 0; border: none}
input { width: 160px; }	
textarea { width: 160px; height: 160px; 	}	

input,select,textarea {
font-size:	16px;
color: 	#fff;
font-style: italic;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
padding: 8px 0 8px 10px;
margin:	0;
background: #036;
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}	
	
input:focus,select:focus,textarea:focus{ background: #e6e6e6; color: #000;}

.input_wrap {
	display: block;
	padding: 0;
	margin:	8px 0 0 0;
	padding-left: 10px; 
	}
input.contact_button {
	color: #036;
	display: block;
	width: 180px;
	font-size: 20px;
	background: url('../graphics/site/littletick.gif') no-repeat right -20px;
	border: none;
	font-style: normal;
	text-align:	center;
	font-weight: bold;
	padding: 0 0 0 10px;
	margin:	10px 0 0 0;
	cursor:	pointer;
	}

body#snippets input.contact_button {
	color: #036;
	display: block;
	width:  230px;
	font-size: 20px;
	background: url('../graphics/site/littletick.gif') no-repeat right -20px;
	border: none;
	font-style: normal;
	font-weight: bold;
	text-align: left;
	padding: 0;
	margin:	10px 0 0 0;
	cursor:	pointer;
	}

input.contact_button:hover, body#snippets input.contact_button:hover{
background-position:center right;
color:				#5c6364;		
}	

body#snippets input, body#snippets textarea { width: 300px; }	
body#snippets textarea { height: 150px }
body#snippets form { padding-top: 0}
body#snippets .input_wrap { padding-left: 0 }

body#snippets input, 
body#snippets select, 
body#snippets textarea {
color: 	#333;
background: #e8e8e8;
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}

/* @end */

/* @group SKIPNAV */
#skipnav
	{ position:absolute;
	margin-left: -1000px;
	}

#skipnav a:focus, #skipnav a:active 
	{
	margin-left: 1000px;
	overflow: visible;
	display: block;
	width: 10em;
	}
/* @end */