@charset "iso-8859-1";
/*	CSS definitions for John Kember's website

	Notes:	The horizontal centering is all done using the technique that works on older browsers:
				- 	set the left position to 50% of the container, then use a margin-left offset to move
					the block to where it should be. (The more modern technique is to use margin: 0 auto;)
				-	for these pages the width of the #main block drives the layout; #lef tpanel and
					#rightpanel are offset accordingly. #main has a left margin of -half its computed width
					and #leftpanel is positioned its own computed width further left. #rightpanel is
					positioned +half of #main's computed width to the right. Result: a 3-panel layout.

				All dimensioning except images is done using em units; not ideal but at least it scales.
				It's a shame you can't mix units and do arithmetic in CSS!

				Current dimensions: page width = #main + #leftpanel + #rightpanel = (42+9+9) = 60em;
									#topnav 6em high.

				Sadly there is no easy solution to get all three columns the same length unless you can be
				absolutely sure the content won't overflow, using CSS 2 at least. So it's probable that a
				small javascript routine will be included to do this when each page loads. It's the kindest
				way ... (sigh)

				The design also makes use of CSS popups, vide Eric Meyer. An A tag is displayed as a block
				with an inline span. The span's normal display state is display:none but when a:hover occurs
				the span's display is set to :block and hey presto! a CSS-driven popup with no javascript.


				Take particular not of the two classes .noprint and .printonly which are intended to be added
				to the html layout to control how pages appear when printed - hiding such things as menus and
				displaying print-style headers for example.

				Roy Ayres, February 2008
*/

/*	printing controls	*/

@media print
{	.printonly {
	 display: block;
	 }
	 .noprint {
	 display: none;
	 }
	 #main {
	 	top: 0	!important;
	}
	#leftpanel, #rightpanel {
		top: 0 !important;
	}
	#main > h2 {
	border: none;
	text-align: center;
	background-color: transparent;
	padding: 0 0 1em 0;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 250%;
	margin: 0;
	width: 75%;
	position: relative;
	left: 12%;
}

}	/*	end @media print */

@media screen
{	.printonly {
	display: none;
	}
	.noprint {
	display: block;
	}
}	/* end @media screen */


/*	tag definitions		*/

a {
	text-decoration : none;
	color : inherit;
	font-size : .9em;
	font-weight : bold;
}
a:hover {
	background-color : #FF6;
	text-decoration : underline;
}
body {
	background-color: #FFD;
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
	color: #227;
	padding: 0;
	margin: 0;
}
h1,h2,h3,h4,h5,h6 {
 	color: #900;
	clear: both;
}
h1 {
	font-size: 160%;
}
h2 {
	font-size: 135%;
}
h3 {
	font-size: 120%;
}
dl {
	margin-left:3em;
}
dt {
	display: run-in;
	min-height: 22px;
	background-image: url(images/tinynote.gif);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 2em;
}
dd {
	margin-left: 6em;
	font-style:italic;
	position: relative;
	top: -.4em;
}
dt img {
	margin-right:5px;
}

dl.plainlist {
	margin: 0;
	background: inherit;
	padding: 0;
}
dl.plainlist dt {
	font-weight: bold;
	margin-top: 1.5em;
}
dl.plainlist dd {
	font-style: normal;
}

input {
	cursor: pointer;
}

ul,dl {
	list-style-image: url(images/tinynote.gif);
}


/*	A	*/

.articleblock {
	background-color: #FFE;
	padding: 4px 1em;
	border-width: 1px 5px 5px 1px;
	border-style: solid;
	border-color: #999 #CCC #CCC #999;
	clear: both;
	overflow: auto;
}
.articleblock h2 {
	margin: 0 0 5px;
	padding: 0;
	border-bottom: 1px solid #99C;
	text-align: center;
	color: #99C;
}

.articleblock ul {
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
}
.articleblock li {
	display: block;
	width: 50%;
	float: left;
	text-align: center;
	margin: 0 0 1em;
	font-weight: normal;
	min-height: 48px;
}
.articleblock li a {
	cursor: pointer;
	font-weight: normal;
}
.articleblock li a:hover {
	display: block;
	width: 100%;
	background-color: #FF6;
	min-height: 32px;
}
.articleblock li img {
	border-style: solid;
	border-color: #888 #99C #99C #888;
	border-width: 1px 2px 2px 1px;
	width: 26px;
	height: 36px;
	float: left;
}
.articleblock li span {
	display: block;
	float: left;
	width: 16em;
	margin: 0 0 0 1em;
	text-align: left;
}
.articledesc {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	color: #090;
}


/*	B	*/

#book_overview {
	width: 100%;
	float: left;
	margin-bottom: 1em;
}
#book_overview img {
	width: 156px;
	height: 216px;
	border-style: solid;
	border-color: #888 #99C #99C #888;
	border-width: 1px 6px 6px 2px;
	float: left;
	margin: 1em;
}
.book_summary {
/*	float: left;
	width: 20em;
*/
	margin: 1em 1em 0;
	padding-top: .5em;
	border-top: 1px solid #DDF;
	clear: both;
}
.buy_full {
/*	float: left;
	width: 20em;
*/
	margin-right: 1em ;
	padding-bottom: .5em;
	border-bottom: 1px solid #DDF;
	text-align: right;
}
.buy_full button {
	padding: 0 .3em;
	margin-left: 1em;
	display: inline-block;
	cursor: pointer;
}
.buy_short {
	float: right;
	width: 32em;
	margin: .5em;
	display: block;
}
.buy_short button {
	padding: 0 .3em;
	margin-left: 1em;
	display: inline-block;
	cursor: pointer;
}

/*	C	*/

.CDcaption {
	display: block;
	width: 80%;
	margin: 2em;
	float: right;
}
.CDdescription {
	margin-top : 20px;
}
.CDimage {
	float:left;
	margin-right:1em;
	width: 75px;
	height: 75px;
}
.clearfloats {
	clear:both;
}


/*	F	*/

#footer {
	margin: 2em 0 0 0;
	padding: 1em 2em;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	color: #666;
	border-top: 1px solid #CCC;
}


/*	H	*/

#homepage h3, #homepage h4, #idxall h3, #idxall h4 {
	padding-top: 1em;
	padding-bottom: 0;
}


/*	I	*/

.intro {
	padding: 2em;
	line-height: 130%;
}

.isbn {
 	font-size : .9em;
 	padding : 5px;
}


/*	L	*/

#leftpanel {
	position: absolute;
	width: 9em;
	background-color: #DEF;
	top: 6em;
	left: 50%;
	margin: 0 0 0 -30em;			/*	Position to left of centre column	*/
	z-index: 0;
}
#leftpanel a {
	display: block;
	position: relative;
	font-weight: normal;
	text-decoration: none;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 1em;
	color: #666;
}
#leftpanel a span {
	display: none;
}
#leftpanel a:hover {
	text-decoration: none;
}
#leftpanel a:hover span {
	display: block;
	position: absolute;
	left: 7em;
	top: 2em;
	z-index: 100;
	width: 30em;
	padding: .5em;
	background-color: #FFC;
	color: #336;
	cursor: pointer;
	border-top: 1px solid #669;
	border-left: 1px solid #669;
	border-right: 3px solid #99C;
	border-bottom: 3px solid #99C;
}
#leftpanel a:hover span b {
	font-weight: bold;
}
#leftpanel h2, #rightpanel h2 {
	border: none;
	text-align: center;
	margin: 2em .5em .5em 0;
}
#leftpanel .h2 {
	font-family: Arial,Helvetica,sans-serif;
	color: #900;
	font-size: 135%;
	margin: 2em .5em 1em .5em;
	text-align:center;
	font-weight: bold;
	font-style: normal;
}
#leftpanel img {
	display: block;
	width: 52px;
	height: 72px;
	position: relative;
	border-style: solid;
	border-color: #888 #99C #99C #888;
	border-width: 1px 3px 3px 1px;
	left: 50%;
	margin: 1em 0 1em -25px;
}
#leftpanel li {
	min-height: 22px;
	margin: 1em 0;
}

/*	M	*/

#main {
	position: absolute;
	top: 6em;
	width: 40em;				/*	42em including padding	*/
	margin: 0 0 0 -21em;		/*	centre the panel horizontally	*/
	background-color: #FFD;
	left: 50%;
	padding: 1em;
}


/*	N	*/


/*
.navblock {
	float:right;
	width:12em;
}
/**/
#navmenu {
	position: relative;
	overflow: auto;
	width: 32em;
	margin: .5em 0;
	padding: 0;
/*
	background-color: silver;
	border: 1px dotted red;
/**/
}
#navmenu a {
	display: block;
	overflow: hidden;
	margin: 3px;
	float: left ;
	width: 6em;
	height: 1em;
	border-width: 1px 2px 2px 1px;
	border-style: solid;
	border-color: #669 #99C #99C #669;
	background-color:#EEF;
	padding:3px;
	font-size:8pt;
	font-weight:normal;
	text-align:center;
	vertical-align:center;
	text-decoration: none;
}
#navmenu a:hover {
	border-width: 2px 1px 1px 2px;
	border-color: #669 #336 #336 #669;
	color: blue;
	background-color: #DEF; /**/
}

.navmenu {
	float:left ;
	width:6em;
	height:2.5em;
	border:1px solid maroon;
	background-color:#FFFFCC;
	padding:3px;
	margin:3px;
	font-size:8pt;
	font-weight:normal;
	text-align:center;
	vertical-align:center;
}

.news_item {
	clear: both;
	background-color: #FFE;
	border: 3px double #F66;
	padding: 6px 10px;
	margin: 10px;
	font-size: 110%;
	position: relative;
}
.news_item .high_emphasis {
	font-weight: bold;
	color: #900;
	font-style: italic;
	font-family: "Times New Roman",Times,serif;
	font-size: 120%;
	text-align: center;
	display: block;
	padding: 0;
	margin: 0;
}

@media print
{	
.news_item {
	margin: 25px 10px;
	border: 6px double #F66;
}

}

/*	O	*/
.overlay {
	border: 1px solid grey;
	padding: .5rem;
	border-radius: .5rem;
	box-shadow: .5rem .5rem .5rem #DEF;
	margin-bottom: .5rem;
	position: relative;
}
.overlay .infolink {
	display: block;
	text-align: right;
	margin-bottom: 0;
}
#homepage .overlay h3 {
	margin-top: 0;
	padding-top: 0;
}

/*	P	*/

.photodesc {
/*	float: left;
	width: 20em;
*/
	margin: 1em ;
}
img.portrait {
	width: 152px;
	height: 193px;
	border: none;
	margin: 0 1em 1em 0;
	float: left;
}
.publisher {
 	font-weight : bold;
 	padding : 5px;
}
.pubtitle {
 	font-weight : bold;
 	background-color : #d6d6be;
 	padding: 3px 5px 3px 5px;
	color : #990000;
}


/*	Q	*/

.quotemark {
	font-family: "Times New Roman", Times, serif;
	font-weight: bolder;
	font-size:150%;
	line-height:50%;
	color:990000;
}


/*	R	*/

#rightpanel {
	position: absolute;
	width: 9em;
	background-color: #FDE;
	top: 6em;
	left: 50%;
	margin: 0 0 0 21em;
	z-index: 0;
}
#rightpanel a, #rightpanel p {
	display: block;
	position: relative;
	padding: .6em;
	font-family: "Times New Roman", Times, serif;
	color: #666;
	font-size: 1.2em;
	font-style: italic;
	cursor: pointer;
}
#rightpanel a span,
#rightpanel p span {
	display: none;
}
#rightpanel a:hover {
	text-decoration: none;
}
#rightpanel p:hover {
	background: #FF6;
}

#rightpanel a:hover span,
#rightpanel p:hover span {
	display: block;
	position: absolute;
	left: -31em;
	top: 2em;
	z-index: 100;
	width: 30em;
	padding: .5em;
	background-color: #FFC;
	color: #336;
	cursor: default;
	border-top: 1px solid #669;
	border-left: 1px solid #669;
	border-right: 3px solid #99C;
	border-bottom: 3px solid #99C;
	text-decoration: none;
	font-weight: normal;
	font-size: .85em;
}


/*	S	*/

#scorebuttonblock {
	display: none;

}
#scorebuttonblock img {
	cursor: pointer;
	position: relative;
	left: 50%;
	margin-left: -38px;
	width: 70px;
	height: 100px;
	border-style: solid;
	border-color: #888 #99C #99C #888;
	border-width: 1px 4px 4px 1px;
}
#score_image {
	width: 586px;
	height: 826px;
	border: none;
	position: relative;
	left: 50%;
	margin-left: -293px;
	z-index: 250;
}
#scoreimageblock {
	display: none;
	cursor: pointer;
	background-color: #FFE;
	padding: 1em;
	border-left: 1px solid #666;
	border-top: 1px solid #666;
	border-right: 5px solid #CCC;
	border-bottom: 5px solid #CCC;
	width: 600px;
	height: auto;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -300px;
	top: 12em;
}
#scoreimageblock img {
	position: relative;
	left: 50%;
	margin-left: -300px;
}
#scoreimageblock p {
	text-align: center;
	color: #900;
	font-weight: bold;
	font-style: italic;
	font-family: "Times New Roman", Times, serif;
}
#series_overview ul {
	padding: 0 1em;
	margin: 0;
}
#series_overview li {
	clear: both;
	display: block;
	width: 100%;
	margin: 2em 0;
	min-height: 62px;
	padding: 0;
	list-style-type: none;
}
#series_overview a img {
	border-style: solid;
	border-color: #888 #99C #99C #888;
	border-width: 1px 3px 3px 1px;
	float: left;
	width: 52px;
	height: 72px;
	margin: 0 1em 1em 0;
/*
	display: block;
	position: relative;
	left: 50%;
	margin: 1em 0 1em -25px;
*/
}
#series_overview a.titlelink {
	text-decoration: none;
	font-weight: bold;
	display: block;
	width: 35em;
	float: left;
	margin: 0;
	outline: none;
}
#series_overview a.titlelink span {
	font-weight: normal;
	display: block;
	margin: 1em 0;
}
.source {
	margin-left: 4em;
	margin-right:4em;
	font-style: italic;
	margin-bottom: 1em;
	font-family: "Times New Roman", Times, serif;
}


/*	T	*/

.tinyline	{					/*	Used to make sure Firefox sizes containers as I expect	*/
	height: 1px;
	visibility: hidden;
	clear: both;
}
#topnav {
	position: absolute;
	top: 0;
	left: 50%;
	width: 59em;
	height: 6em;
	margin: 0 0 0 -30em;
	background-color: #DDF;
	padding-left: 1em;
}

#topnav h1, #topnav #sitename {
	border: none;
	text-align: right;
	background-color: transparent;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 1.7em;
	width: 50%;
	position: absolute;
	top: 1.6em;
	left: 50%;
	margin: 0 0 0 -1em;
}
#topnav #sitename {
	padding: 0;
	top: .3em;
	color: #666;
}