/* Kae.CSS Document
Yellow text on Blue Background is the Default Style 
Notes made from the following sources:

References: 
Stylin' with CSS by Charles Wyke-Smith
http://www.w3schools.com/css/default.asp
Text color: http://www.w3schools.com/css/tryit.asp?filename=trycss_color

LINK TO THE STYLE SHEET:
The following code must appear in the header of each page using an external CSS file

<link rel="stylesheet" type="text/css"
href="mystyle.css" />

Cascading refers to the order of priority:
A spec written inside a tag has highest priority, then 
specs can be placed in the header of a page:

<style type="text/css">
.size{font-size:100%} 
</style>

An external CSS file is preferable and is used as the final default.
Image gallery-see W3schools  http://www.w3schools.com/css/css_image_gallery.asp

COLORS
W3C has 16 color names that will validate with a CSS validator. There are 150 others.
aqua, black, blue, fuchsia, gray, green, lime, maroon, 
navy, olive, purple, red, silver, teal, white, and yellow
Decimal Colors: RGB(255,255,255) or rgb(100%,0%,0%)
DARKER CYAN #99DDFF
LIGHT  CYAN #CCFFFF
cyan        #99ccff
mauve       #ccccff

Paragraphs with text justified (on both sides):  
p{text-align:justify}
p.small {line-height: 90%}
p.big {line-height: 200%}

FONTS
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thickest {font-weight: 900}
p {font: italic small-caps 900 12px arial}
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
h1 {font-size-adjust: 0.50}
h2 {font-size-adjust: 0.40}
p {font-size-adjust: 0.60}
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
direction: rtl     LIKE RIGHT JUSTIFIED 
- puts text on right side of element going Right-To-Left

CHARACTER WIDTH AND HEIGH
2em: if an element is displayed with a font of 12 pt, then '2em' is 24 pt.
1ex: one ex is the x-height of a font (x-height is usually about half the font-size)
indent:  p {text-indent: 1cm}
First letter Captal or first line bold etc, Hyperlink specs : see CSS Psedo element

TABLE PADDING: 
Padding, and border dimensions are ADDED to the width of a box or table!
But margin is inside the original box dimensions.
(But old versions of IE 5 and before, did not increase the size of the object.)
Margin adds to the sides and top and bottom of the text.
If four dimensions are given they are in the clockwise order top, right, bottom, left.
If two dimensions are given they represent (top and bottom) then (left and right).
If one dimension is given it applies to all sizes I think.

BORDER
border: medium double rgb(250,0,255)
border-style: solid; (or groove ridge double etc)
border-width: 5px
table {border-color: red}
When setting margins or borders the numbers refer to the sides of the box
starting at top and working around clockwise: top right bottom left
p.margin {margin: 2cm 4cm 3cm 4cm} define the space around elements

Creating a SCROLL BOX with elevator!
	div.scroll
		{
		background-color:#00FFFF;
		width:150px;
		height:150px;
		overflow: scroll
		}
		
POSITIONING TEXT:
	h2.pos_right
		{
		position:relative;
		left:20px
		}
	h2.pos_abs
		{
		position:absolute;
		left:100px;	top:150px
		}
LAYERS:
Place an image behind text:http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2 
z determines the priority of layers, zero is default, negative is behind (applied to the image)
	z-index:-1

OLD TABLES IN HTML - now replaced is CSS
table.notebox { width="540" border="1" cell padding="0" align="center" cellspacing="0" }
table.notetable {width="520" border="0" cell padding="10" align="center" cellspacing="10" }
td.notetext {  align="justify" valign="center" }

table.refbox {width="540" border="1" cell padding="0" valign="center" cellspacing="0" }
table.reftable { width="520" border="0" cell padding="10" valign="center" cellspacing="10" }
td.reftext { align="justify" valign="center" }

table.custompopbox {width="540" border="1" cell padding="0" align="center" cellspacing="0"}
table.custompop {width="540" border="0" cell padding="20" align="center" cellspacing="20" }
td.custompoptext { align="justify" valign="center" }

table.webbox {width="540" border="1" cell padding="0" align="center" cellspacing="0" }
table.webtable {width="540" border="0" cell padding="20" align="center" cellspacing="20" }
td.webtext { align="justify" valign="center" }

table.backhomebox {width="540" border="1" cell padding="10" align="center" cellspacing="0"}
td.backhometext { align="justify" valign="center" }


														BODY
*/
body 
	{ 
	background-color:#597497; 
	color:#FFFFFF; /* rely on the default text color in BODY yellow*/
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-weight:100;
	font-size:100%; 
	font-style:normal;
	font-variant:normal;
	letter-spacing:0.10em; 
	word-spacing:0.15em;
	line-height:1.8
	}
		
/* 
														LINKS
Colors for Links (to URLs etc) like LINK, ALINK, VLINK 
Must be in the order given below ??
It appears that these have to be the same for all pages and backgrounds
Try the noline example
/*white=#ffffff*/
/*mauve=#E1B1F7*/
/*pink =#ff5555*/
/*green=#00FF00
{color:red}
*/

a:link 		{color:#FFFFFF} /*white=#ffffff*/
a:active 	{color:#CCCCCC} /*grey*/
a:visited 	{color:#99CCFF} /*pale blue=#66CCFF*/
a:hover		{color:#ff5555} /*pink=#ff5555*/

a.noline    		{text-decoration: none} /*for lists of links without underline*/
a.noline:link 		{color:#0000FF; text-decoration:none} /*white*/
a.noline:active 	{color:#FF0000; text-decoration:none} /* RED */
a.noline:visited 	{color:#E1B1F7; text-decoration:none} /*mauve*/
a.noline:hover		{color:#FF5555; text-decoration:none} /*pink*/

/*												PRINTER
SWITCHES TO BLACK & WHITE FOR PRINTERS 
*/ 
@media print
{
	body
		{
		background-color:#ffffff; 
		color:#000000; 
		font-weight:100; 
		letter-spacing:0.10em; 
		word-spacing:0.15em; 
		font-size:12pt;
		line-height:1.5
		}
}
/*												VOICE
/*This sets the voice for speach synthesizers */
h1, h2, h3, h4, p
{
voice-family: female;
richness: 80;
cue-before: url("beep.au")
}


/*												GENERAL FONTS 
Font size for special applications. e.g. Used as <tr class .smalltext >
*/
.normaltext	{font-size:100%} 
.smalltext	{font-size:75%}
.largetext	{font-size:120%}
.gold 		{color:#FFFF00}
.lightgold 	{color:#FFFFAA}
.white		{color:#FFFFFF}
.black		{color:#000000}

/*
.largestrongtext
	{
	font-weight:900; 
	line-height: 200%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:180%
	}
.largestrongcentertext
	{
	text-align:center;
	font-weight:900; 
	line-height: 200%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:180%
	}
.hugestrongcentertext
	{
	text-align:center;
	font-weight:900; 
	line-height: 200%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:250%;
	}
*/
	
	
/*												TITLES
*/
.maintitle
	{
	/*rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:center;
	font-weight:600; 
	line-height: 140%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:140%;
	}
.pagetitle
	{
	align:center; 
	valign:center;
	text-align:center;
	font-weight:400; 
	line-height: 120%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:140%;
	}

.homelink
	{
	align:center; 
	valign:center;
	text-align:center;
	font-weight:400; 
	line-height: 120%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:140%;
	}
/*												SEARCH BOX
It appears that INPUT specs cannot be set in CSS eg
form.search
	{
	action:results.php;
	method:get;
	name:mainform;
	id:mainform;
	}
input.search
	{
	type:text;
	name:query;
	size:60;
	maximum-length:100;
	}
*/
td.searchbox
	{
	width:100%;
	height:30px;
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:600; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.0;
	font-size:140%;	
	}
.searchboxsubtitle
	{
	align:center; 
	valign:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:80; 
	letter-spacing:0.15em; 
	word-spacing:0.20em; 
	line-height:1.0;
	font-size:60%;	
	}
.goldkeytitle
	{
	align:center; 
	valign:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:120 ; 
	letter-spacing:0.15em; 
	word-spacing:0.20em; 
	line-height:1.0;
	font-size:120%;	
	}
.goldkeytinycaps 	
	{
	color:#EEEE66;
	font-size:80%; 
	font-variant:small-caps; 
	align:left;
	text-align:center;
	font-family: sans-serif;
	font-weight:200; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	}
.helptipstinycaps 	
	{
	color:#EEEE66;
	font-size:80%; 
	font-variant:small-caps; 
	align:left;
	text-align:center;
	font-family: sans-serif;
	font-weight:200; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	}

/*												QUERY DISPLAY BOX
	old border-color:#4499FF
*/
table.querybox
	{
	width:600px; 
	border-style:outset; 
	border-color:#0000BB;
	border-width:8px; 
	background-color:#99CCFF; 
	margin:10px; 
	padding:10px;
	align:center; 
	text-align:center; 	
	valign:center; 
	color:#597497;
	font-size:80%; 
	}
.showQuery 
	{	
	color:#597497;  \\Black or Blue are better than gold on light blue background
	align:center; 
	valign:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.3;
	font-size:100%;
	}
.queryerrortext
	{
	color:#FF5555;
	text-align:center;
	font-weight:400; 
	line-height: 130%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:100%
	}
/*												RESULTS
*/
tr.topline  
	{
	text-align:center; 
	background-color:#4499FF; 
	color:#000000;
	font-size:80%;
	}
tr.results
	{
	text-align:center; 
	background-color:#99CCFF; 
	color:#000000;
	font-size:80%;
	}
tr.highlight
	{
	text-align:center; 
	background-color:#55CCFF; 
	color:#000000;
	font-size:60%; 
	font-weight:bold;
	}

table.searchresults 
	{
	padding:3; 
	align:center
	}
td.searchresults 
	{
	font-size:100%; 
	align:center
	}
.foundresults 
	{
	font-size:120%; 
	font-weight:300; 
	align:center;
	background-color:#2222FF;
	}
.numberfound
	{
	text-align:center;
	font-weight:600; 
	line-height: 200%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:120%;
	}
.notfound
	{
	text-align:center;
	font-weight:300; 
	line-height: 120%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:150%;
	}

/*												BOX BORDER
Popup Tables such as NOTES are made using two nested tables  
The outer table just creates a box or border 
*/
table.boxborder 
	{ 
	width:90%; 
	border-style:outset; 
	border-color:#336697;
	border-width:4px; 
	margin: 10px; 
	padding:10px; 
	align:center; 
	valign:center; 
	background-color:#597497 
	}
table.textblock 
	{
	width:100%; 
	border-style:none;
	margin: 0px; 
	padding: 5px; 
	align:justify; 
	valign:center 
	}
table.dataentry
	{
	width:100%; 
	border-style:none;
	border-color:#336697;
	border-width:4px; 
	margin: 0px; 
	padding:5px; 
	align:center; 
	valign:center;
	background-color:#597497 
	}
.justdata 
	{ 
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	margin: 0px; 
	padding:5px; 
	text-align:justify;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.3;
	font-size:100%;
	}
.leftdata 
	{ 
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:left; 
	valign:center;
	margin: 0px; 
	padding:5px; 
	text-align:left;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.3;
	font-size:100%;
	}
td.bookIDdata 
	{ 
	/* color:#FFFFFF; rely on the default text color in BODY */
	width:100px; 
	align:left; 
	valign:top;
	margin: 0px; 
	padding:10px; 
	text-align:left;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.3;
	font-size:100%;
	}
	
.commentheading 
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:left; 
	valign:center;
	text-align:left;
	font-family: sans-serif;
	font-weight:600; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.2;
	font-size:120%;	
	}

.whitetext
	{
	color:#ffffff;
	}
	
.comments
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	text-align:justify;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:100%;
	}

.displaybooklist /* black on white so it can be copied to TextEdit */
	{
	color:#000000;
	background-color:#FFFFFF;
	text-align:left;
	font-family: sans-serif;
	font-weight:200; 
	letter-spacing:0.10em; 
	word-spacing:0.12em; 
	line-height:1.2;
	font-size:80%;	
	}

table.displaybooklisttextblock
	{
	color:#000000;
	background-color:#FFFFFF;
	width:100%; 
	border-style:none;
	margin: 0px; 
	padding: 5px; 
	align:justify; 
	valign:center 
	}
	
/*												POPUP - PHOTOS
border-color:#F1D11D; solid groove ridge inset outset double
*/
table.phototable 
	{ 
	width:50%; 
	border-style:double; 
	border-color:#80623E;
	border-width:10px; 
	margin:10px; 
	padding: 30px 30px; 
	align:center; 
	valign:center; 
	color:#000000;
	background-color:#CCCCCC;
	}
td.photomatting  
	{
	background-color:#FFFFE9;
	color:#000000;
	margin: 10px; 
	padding:40px; 
	}
table.captiontable 
	{
	width:50%; 
	border-style:none; 
	border-/* color:#FFFFFF; rely on the default text color in BODY */
	border-width:10px; 
	margin:0px; 
	padding: 0px; 
	align:justify; 
	valign:center; 
	background-color:#597497; 
	}
td.captiontext
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:justify;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:100%;
	}
		
	
/*												NOTES
*/
.justnotes 
	{ 
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:justify;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.3;
	font-size:100%;
	}
.notesheading 
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:600; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:120%	
	}
.notesIDheading 
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:left;
	font-family: sans-serif;
	font-weight:400; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:120%	
	}
/*												REFERENCES
*/
.referencesheading 
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center; 
	valign:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:600; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:120%;	
	}
.referencetext
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	text-align:justify;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:100%;
	}
span.referencenumber
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	font-weight:900; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	}
span.refcomments
	{
	text-align:justify;
	font-family: sans-serif;
	font-size:100%;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	}

/*												  BACK HOME
for laying out the Back and Home Links
table.backhometextblock goes inside the boxborder
*/
table.backhometextblock 
	{ 
	width:100%; 
	border-style:none; 
	margin:0; 
	padding:10px; 
	align:center; 
	valign:center; 
	background-color:#597497;
	}
.backhometext
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	align:center;
	text-align:center;
	font-weight:600; 
	line-height: 150%;
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:100%
	}
.tinycaps 	
	{
	color:#EEEE66;
	font-size:80%; 
	font-variant:small-caps; 
	align:center;
	text-align:center;
	font-family: sans-serif;
	font-weight:200; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	}
/*													HELP
*/
.helpheadings
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	text-align:left;
	font-family: sans-serif;
	font-weight:400; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	font-size:130%;
	line-height:2;
	}
.notestext
	{
	/* color:#FFFFFF; rely on the default text color in BODY */
	text-align:justify;
	font-family: sans-serif;
	font-weight:300; 
	letter-spacing:0.10em; 
	word-spacing:0.15em; 
	line-height:1.5;
	font-size:100%;
	}
/*
SiteSearch Google									GOOGLE
--Original colors
google_color_border = "6699CC" 
google_color_bg = "003366";
*/
table.googlebox 
	{ 
	z-index:1;
	width:728px; 
	border-style:outset; 
	border-color:#6699CC;
	border-width:3px; 
	margin:0; 
	padding: 0px 0px; 
	align:center; 
	valign:center; 
	background-color:#003366;
	}
table.googletextblock 
	{
	z-index:1;
	width:710px; 
	border-style:none;
	padding: 0px 0px; 
	align:center; 
	valign:center;
	background-color:#003366;
	}
table.googleboxtopleft 
	{ 
	z-index:1;
	position:absolute;
	left:10px;	
	top:10px;
	width:120px; 
	height:240;
	border-style:outset; 
	border-color:#6699CC;
	border-width:3px; 
	margin:0; 
	padding: 0px 0px; 
	align:left; 
	valign:center; 
	background-color:#003366;
	}
table.googleboxtopright 
	{ 
	z-index: 1;
	position:absolute;
	right:10px;	
	top:10px;
	width:120px; 
	height:240;
	border-style:outset; 
	border-color:#6699CC;
	border-width:3px; 
	margin:0; 
	padding: 0px 0px; 
	align:right; 
	valign:center; 
	background-color:#003366;
	}