/* These styles are used in the Gregory's Eltham menu display frameset */

/* 	Site-wide element selctors are listed first, followed by site-wide ids and 
	classes Not all of these are used on the home page. Then the css for each
	page type is given, fully documented to make future maintenance easier.
	
														Roy Ayres, February 2006
*/

/*------------------------------------------------------------------------------	
	Site-wide styles: elements first, then "all pages" styles, although most of 
	these aren't used on the home page.
  ----------------------------------------------------------------------------*/
	a { color: #FFCC66 ; text-decoration: none ; }
	a:hover { background-color : #6A5ACD; color: yellow; }
	
	body {
		font-size : 80%;
		font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
		background-color : #003;
		color: #FC6;
		width:720px;
	}
	h2 {
		font-family: "Times New Roman", Times, serif;
		font-size:180%;
		font-weight:bold;
		font-style: italic;
		margin-left: 1em;
	}
	h3 {
		font-size: 1.1em;
		font-weight: bold;
		font-style: normal ;
		color: silver ;
	}
	hr {
		color:silver;
		height:2px;
	}

	/*	These are the frames used to display the site logo and menu across the top
		of the screen:
		#staticF : Containing frame for the logo and menu, absolutely positioned.
		#staticD : Containing frame for the menu bar, natural flow; ensures the
					menu elements stop before they reach the edge of the frame.
		#staticD a : The menu is cast as a series of buttons across the top of the
					screen, with a css rollover effect. Floats and margins do the rest.
	*/
	#staticF {
		position: absolute;
		top: 0;
		left: 0;
		height: 100px;
		width: 100%;
		overflow: hidden;
		margin: 0;
		padding: 2px 2px 2px 2px;
	}
	#staticD { position:relative; margin: 0 0 0 20px; }
	#staticD a {
		float: left;
		width: 10em;
		padding: 4px 4px 4px 4px;
		margin: 0 1em 1em 1em;
		border: 1px solid #FFCC66;
		text-align: center;
		vertical-align: middle;
		font-size: 80%;
	}
	#staticD a:hover { 
		background-color : #6A5ACD;
		border-top: 1px solid yellow;
		border-right: 1px solid yellow;
	}
	#staticD a:active {
		color : red;
	}
	/* mainF is the container for all the page contents below the header, including
		the cross-site copyright footer. There is usually nothing after the end of mainF.
	*/
	#mainF {
		position:absolute;
		width:740px;
		top:100px;
		left:0;
		margin:0;
		padding:0;
	}
	/* .copy is the site-wide copyright container
	*/
	#copy  {
		clear:both;
		position:relative;
		font-size:70%;
		color:#6666ff;
		width:150px;
		text-align:center;
		border-top:1px solid Blue;
		border-left:1px solid blue;
		border-bottom:1px solid #000066;
		border-right:1px solid #000066;
		padding:2px;
		margin-top:20px;
		left:450px;
	}
	/* .caption is used with photographs where no extra considerations apply. Examples
		include the pictures in the 'gregory' section
	*/
	.caption {
		text-align:center;
		font-size:80%;
		font-style:italic;
		font-weight:bold;
	}


	/*	.clear is used to provide a way of positioning succeeding elements below 
		any	floated elements within a display. Just add clear to the class= ...
	*/
	.clear {clear:both;}

/*-------------------- End of site-wide styles -------------------------------*/	

/*------------------------------------------------------------------------------
	Book pages styles follow. The layout is a little complex so is commented
	more thoroughly, including reasons for some of the settings.

	#book : a relative div to provide positioning for the menu and page display
	#menupanel : contains the textual menu on the left of the page. It contains:
	#spine : gives the illusion of an open book. For efficiency this has an interior:
	#spine div : which is a jpg that looks like shading on the page.
	
	#bookmenu : an absolute div that overlays the menu text over the background

	#page : surrounds the page image and looks like an open book. It contains:
	#page img : which is the actual payload of the document and is an image of a page.	
------------------------------------------------------------------------------*/

	/*	#book just acts as a positioning container for the menu and book page display
	*/
	#book{ position:relative; clear:both; }
	
	/* 	#menupanel width varies with font-size. It is important to use the same 
		width here as the left position of #page. #menupanel provides a container 
		for the spine display but does not actually contain the menu text, 
		which is in #bookmenu.
	*/
	#menupanel {
		position: relative;
		top:0;
		left:0;
		height: 956px;
		width: 15em;
		padding: 0;
		margin: 0;
		background: transparent url(graphics/menuback.gif) repeat-x top left;
	}

	/*	#spine is shown in context here to clarify its behaviour - it floats to 
		the right of #menupanel and is relative so it can be a container for the 
		image of a book spine that it encloses. Could have been all one background 
		but the file sizes get too big that way. The png that forms the background 
		to #spine is paletted but the image had to be a separate jpeg
		 - hence the empty div in the html markup
	*/
	#menupanel #spine {
		position: relative;
		height: 960px;
		width: 34px;
		float:right;
		background: transparent url(graphics/menubackspine.png) no-repeat top left;
	}
	#spine div {
		margin: 20px 0 0 1px;
		width:32px;
		height:925px;
		background: transparent url(graphics/pagespine-mid.jpg) no-repeat top left;
	}

	/*	#bookmenu is positioned over the top of the menu background divs but is 
		not contined within them. This means its content will overlay the background 
		if there's any problem with font-sizes, rather than pushing the page too 
		far to the right.
	
		In addition to the <a> tag formatting, this group includes specific formatting
		for the <ol> tags that surround the sections list and the <ol><li><ol> tags that
		surround the chapters display for the current section.
	*/
	#bookmenu {
		position:absolute;
		width: 12em;
		height:963px;
		padding: 60px .5em 0 2.5em;
		margin:0;
		color:#666;
		z-index:10;
	}
	#bookmenu a { color:#666; text-decoration:none;	}
	#bookmenu a:hover { color:yellow; background-color:#6A5ACD;	}
	#bookmenu ol, #bookmenu ul { font-weight: bold; color: #666; padding: 0; 	margin: 0 4px 0 1em; }
	#bookmenu ol li ol { font-weight:normal; }	/* #it's off to work we go# */
	
	/*	#page is positioned so it is snug against #menupanel in the design and 
		provide context for  the positioning of the (page) image it contains. 
		It is vital that the left property is equal to the width of #menupanel 
		and a little larger than that of #bookmenu.
	*/
	#page {
		position: absolute;
		top:0;
		left:15em;
		height:957px;
		width:622px;
		margin:0;
		padding:0;
		background: transparent url(graphics/pageback_all.png) no-repeat top left;
	}
	#pageimg { position: relative; top: 16px; width: 606px; height: 926px; border:none;}
	
		/* 	.pagenavbar is a class because there are (currently) two page nav bars on
		each book page. It provides a container for the three elements within
		all of which are floated left:
		.pagenavmid : this holds the page name and number for the current page.
		.pagenavturn : this provides the holder for the pageturn symbols and link
	*/
	.pagenavbar {
		position:relative;
		height:28px;
		padding-top : 4px;
		padding-bottom : 4px;
		padding-left:24px;
		width:100%;
	}
	.pagenavbar img  { border: none; }
	.pagenavmid { float:left; width: 59% ; text-align : center; }
	.pagenavturn { float:left; width: 20%; }
	/*
		There are some experimental classes below, working towards being able to 
		take the pageturn symbols out of the html and into the css. They do not
		yet work, but the idea is to have one background symbol to the left of
		the containing block and the other to the right of the contained <a> tag.
	*/
	.pnavleft { 
		float:left; 
		width:20%; 
		height:1em; 
		text-align:center; 
		background: transparent url(graphics/turnleft.png) no-repeat top left;
	}
	.pnavleft a {
		width:80%; 
		background: transparent url(graphics/turnleft.png) no-repeat top right;
	}
	.pnavendleft {
		float:right; 
		width:23px; 
		height:13px;
		background: transparent url(graphics/turnleft.png) no-repeat top left; 
		position:relative; 
		top:-13px;
	}
	.pnavright {
		float:left; 
		width:20%; 
		text-align:center; 
		background: transparent url(graphics/turnright.png) no-repeat top left;
	}
	.pnavendright {
		float:right; 
		width:23px; 
		background: transparent url(graphics/turnleft.png) no-repeat top left;
	}

/*---------------------- End of book page section ----------------------------*/

/* Styles used in the textual pages of "about" and "gregory" sections. These use
	the same general framework as the book pages, with additional styles because
	they display normal web text and images as if printed on the page.
*/

	/* #pagetext is the equivalent of #page img for text pages
	*/
	#pagetext {
		color:#666;
		margin:2em 2em 1em 1.5em;
		padding:.5em .5em .5em .5em;
	}
	#pagetext h3 {color:#333;}
	#pagetext a {color:#000;background-color: #F3E6D9;}
	#pagetext a:hover { background-color : #6A5ACD; color: yellow; }
/*------------------------------------------------------------------------------
	The remaining styles below are awaiting review and documentation.
	For now they are listed alphabetically.
------------------------------------------------------------------------------*/

.commentD {
	position: relative;
	width:540px;
	background-color: Navy;
	padding: 8px 8px 8px 8px;
	margin-bottom: 16px;
	border: ridge;
	border-width: 6px;
	border-color: #CC9933;
}
#descmenu {
	vertical-align: top;
	padding: 20px 2px 2px 25px;
	width: 180px;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 963px;
	margin:0;
}
#descmenu dd {
	margin-left:0px;
	padding-left:0px;
	float:left;
	width:150px;
	padding-top:2px;
	padding-bottom:2px;
	vertical-align:top;
}
#descmenu dl {
	margin-left:0px;
	padding-left:0px;
}
#descmenu dt {
	margin-left:0px;
	padding-left:0px;
	clear:both;
	float:left;
	width:28px;
	padding-top:2px;
	padding-bottom:2px;
	vertical-align:top;
}
#descpage {
	position: relative ;
	padding-top:24px;
	left:200px;
	width:688px;
}
dl.mnudl {
	display:block;
	position:relative;
	width:180px;
}
dl.mnudl a {
	display:block;
	margin-left:6px;
}
dl.mnudl dd {
	display :inline;
	text-align : center;
	margin-left:0px;
}
dl.mnudl dt {
	display : inline;
	text-align : center;
	margin-top:6px;
	margin-left:0px;
	font-weight:bold;
	padding-left : 1em;
	padding-right : 1em;
}
#frontis {
display: none;
	position : absolute;
	left : 230px;
	top : 110px;
	border : 6px ridge #CC9933;
}
#indexmenu {
	vertical-align: top;
	padding: 20px 2px 2px 0px;
	width: 180px;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 963px;
	margin: 0;
	border-right: 1px solid Silver;
}
#indexpage {
	position: relative ;
	padding-top:24px;
	padding-left:16px;
	border-left:1px solid silver;
	left:182px;
	width:688px;
}
.ixlist { margin-right: 20px; padding-right: 20px; }
.ixlist a { color:yellow }
.ixlist dt { font-weight:bold; }
.ixlist dd dd { display:inline; margin-left:0px; padding-left:0px; }
.ixlist dd dt { display:inline;font-weight:normal;margin-right:0px;padding-right:0px; }

.ixmenu { clear:both;width:100%;display:block;padding-bottom:.2em;position:relative;left:-1em; }
.ixmenu span { display:block;float:left;text-align:center;width:15%;font-weight:bold; }

.mnuSec {
	display:block;
	font-weight:bold;
	padding-top:4px;
	padding-bottom:4px;
	clear:both;
}

#newspanel {
	position : absolute;
	left : 230px;
	top : 110px;
	width: 321px;
	height: 407px;
	background: #006;
	padding: 1em;
	border : 6px ridge #CC9933;	
	text-align: center;
}

#newspanel h1 {
	text-align: center;
	font-weight: bold;
	font-style: italic;
	font-size: 250%;
	font-family: "Times New Roman", Times, serif;
}

#newspanel .booklink {
	display: block;
	position:absolute;
	top:395px;
	left: 1em;
	font-style:italic
}

#newspanel a, #welcomelink {
	text-decoration: underline;
}

.newsprint {
	padding: 1em;
	background: white;
	border: 3px solid #999;
}

#picdiv {
	position: relative ;
	left: 40px;
}
.picmain {
	border: ridge;
	border-width: 6px;
	border-color: #CC9933;
}
.picthmb {
	border: ridge;
	border-width: 6px;
	border-color: #CC9933;
}
#rrcgregory  {
	position : absolute;
	left : 300px;
	top : 30px;
}
.sitelogo {
	margin-left:120px;
}
#spacer {
	position:relative;
	height:400px;
	width: 20px;
}

.thmb {
	margin-top:16px;
	float:left;
	width:180px;
	height:220px;
	padding-left:3px;
	padding-right:3px;
}
#thmbD {
	margin-top:16px;
	text-align:center;
	width:500px;
}
.thmbL {
	margin-top:16px;
	float:left;
	width:240px;
}
.thmbR {
	margin-top:16px;
	float:right;
	width:240px;
}
#titlebox  {
	position : absolute;
	left : 30px;
	top : 15px;
}
#welcome {
	position : absolute;
	left : 30px;
	top : 300px;
	width : 155px;
	border : 6px ridge #CC9933;
	background-color : #006;
	padding : 4px ;
	text-align: center;
}