/*
thhp.css v.1.0
June 6,2011 

The body and html tags should have no margin and no padding.
Some browsers insist on inserting a margin where none is needed.

If a rule applies to more than one tag, they may be listed
together, separated by commas.

Don't forget the ; at the end of each line between {  }.
*/
body,html {
	margin:0;
	padding:0; }
	
/*
We'll use a sans serif font.
Arial is for Windows systems,
Helvetica is available almost anywhere else.

For those browsers that still don't understand us
we add "sans-serif" and let them choose whatever
they want.

We're not using a fixed font size here.
The font size .9em is a relative size that refers to the
visitor's screen. We're not messing with their
individual settings.
*/
body {
	font-family:arial,helvetica,sans-serif;
	font-size:.9em;
	margin-left:1em; }
	
/*
This is the outer wrapper
that encloses everything else on our page.

The width is set to a relative size that should
work for most visitors.
*/	
div#wrapper {
	text-align:left;
	width:52em; }
	
/*
Another wrapper around the content or the payload if you will.

The left margin lets some empty space open on
the left side where the menu will appear.
*/	
div#content {
	margin-left:134px; }

/*
Some definitions for the #content section
May be expanded if needed.
*/
div#content h1 {
	font-size:170%;
	padding:0 1em 0 5em;
	margin:0 0 2em 0;
	color:#606060;
	font-weight:normal;
	font-style:italic;
	letter-spacing:2px;
	text-align:right;
	line-height:1.6em;
	border-right:1px dotted #000;
	border-bottom:1px dotted #000; }
	
div#content h2 {
	font-size:130%;
	padding:0;
	font-weight:normal; }
	
div#content h3 {
	font-size:110%;
	font-weight:bold; }

/* justified text */
div#content p {
	text-align:justify;
	line-height:1.3em; }
	
/*
should be used for abstract + author
*/
div#content p.abstract {
	font-weight:bold; }
	
div#content p.author {
	text-align:right;
	font-style:italic; }
	
div#content dt {
	font-weight:bold;
	margin-top:1em; }
	
div#content dd p {
	margin:.2em; }
		
div#content li {
	margin:1em 0 0 0; }	

div#content li p {
	margin:.5em 0 0 0; }
	

/*
Now the menu.

float:left puts it to the left of everything that follows.

The width is smaller than the empty space provided above. This leaves
a nice little gap between the menu items and the main text block.
*/
div#menu {
	float:left;
	width:120px;
	font-size:90%; }

/*
these definitions create the block
or button look for the menu items
*/
div#menu a {
	background:#fff;
	text-decoration:none;
	color:#000;
	display:block;
	margin-bottom:4px;
	padding:2px;
	border-top:1px solid #eee;
	border-left:1px solid #eee;
	border-bottom:1px solid #aaa;
	border-right:1px solid #aaa; }

div#menu a:hover {
	background:#ddd;
	color:#000;
	border-top:1px solid #aaa;
	border-left:1px solid #aaa;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd; }

/*
the search box below the menu
*/ 	
div#searchbox  {
	margin:30px 0 0 0;
	text-align:center;
	background:#eee;
	border:1px solid #000;
	padding:2px; }

div#searchbox input {
	width:80%;
	font-size:90%; }

/*
The banner text or image on top of the pages. 
Push the payload and the menu a little further down.
Image and text are centered.
*/
div#banner {
	padding-top:10px;
	margin:0 0 0 40px;
	text-align:center; }

/*
	a border or a background for the banner images
	could be defined here
*/
div#bannerimage { 
	padding-bottom:40px; }

/*
the formatting of the banner text
*/
div#bannertext {
	font-size:200%;
	font-weight:bold;
	margin:20px 0 80px 0;
	padding-bottom:40px;
	color:#606060;
	letter-spacing:4px;
	border-bottom:1px solid black; }
	
/*
The "top" link for jumping to the top
of the page and the the footer line.
*/

div#gotop {
	font-size:90%;
	text-align:left;
	margin-top:1em; }
	
div#gotop a {
	text-decoration:none; }

div#footer {
	text-align:left;
	font-size:90%;
	font-style:italic; }
	
/*
	The notes section. This definition
	draws a thin line over the notes
	section. No <hr> needed.
*/
div#notes {
	border-top:1px solid black;
	margin-top:3em; }

div#notes h3 {
	font-size:110%; }

/*
	The img tag has no border. This suppresses
	the blue frame that is shown in some
	browsers when the image is a link.
	May be overruled by local definitions. 
 */
img {
	border:none; }
	
/*
	Formatting for footnote links
*/
	 
sup,sub {
	font-size:90%;
	font-weight:bold;
	line-height:.5em;
	vertical-align: baseline;
	position: relative; }

sup {
	bottom:.5em; }

sub {
	top: .4em; }

sup a:hover {
	color:#fff;
	background:#000; }
	
/*
formatting for quotations
*/
#content div.quote {
	margin-left:4em;
	font-size:95%; }
	
#content .quote p {
	line-height:1em; } 	

/*
pageturner formatting
*/
div.pageturner {
	line-height:2.5em;
	padding-bottom:3em; }

/* 
three sections for left, center and right
i.e back, caption and next
*/
div.pageturner .back {
	width:29%;
	float:left;
	border-top:1px solid black;
	border-bottom:1px solid black;
	padding:2px; }

div.pageturner .center {
	text-align:center;
	width:39%;
	float:left;
	font-weight:bold;
	border-top:1px solid black;
	border-bottom:1px solid black;
	padding:2px; }

div.pageturner .forward {
	width:29%;
	text-align:right;
	float:left;
	border-top:1px solid black;
	border-bottom:1px solid black;
	padding:2px; }

/*
	floating image formatting and positioning
*/

div.imgdefault,div.imgleft,div.imgright,div.imgcenter {
	font-size:80%;
	padding:2px;
	border:1px solid black;
	background:#ddd;
	margin-top:.3em; }
	
/* default: do nothing */
div.imgdefault {}

div.imgleft {
	float:left;
	margin-right:1em; }

div.imgright {
	float:right;
	margin-left:1em; }

div.imgcenter {
	margin:0 auto; }

div.imgcaption {
	text-align:center; }

hr {
	border:0;
	border-top:1px solid #777;
	border-bottom:1px solid #fff; }