body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #F5F5F5; 
	margin: 0px;
	padding: 0px;
}

#banner_image {
	margin-bottom: -13px; 
	margin-right: auto;
/*	margin-left: 20px;   */
	margin-left: auto;   
	text-align:center;
	}

#outer_table {
	width:750px; 
	padding: 10px;
	margin:0px auto 0px auto;
}



.column_left_right {
	vertical-align:top;

/*	background-image:url(../contents/0_images_template/057_linen_blue_tiled.gif)   */
	}

	
#outer_table .table_diary  {
	border: none; }	
	
#outer_table tr td .table_diary tr td {
	border-collapse: collapse;
	border-top: #FF0000 1px solid;  /* red, but not showing unless I make it 2px */
	border-left: none;
	border-right: none;
	width: 80%;
	
	/*    #FF0000   */
	}


.img_no_border {
	border:none;
	}

#index_table 
/* = table in index page */

{
	font-size: 100%;
	color: blue;
	border: red;
	margin-top: 0px;
	margin-left:0px;
	font-weight: 400;
	width: 100%;
	height:400px;  
	
}


.home_headings {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: white;
	display: block;
	background: #4682B4; /* steelblue */
	margin: 0px;
	padding: 0.2em;
}

p:first-child {
	margin-top: 0px;
}

td {
	font-size: 95%;
	line-height: 150%;
	color: blue;
	font-weight: 400;

}


p, h6 {
	font-size: 100%;
	line-height:150%;
	color: blue;
	font-weight: 400;
	
}

.tiny {
font-size: 70%;
}

.emphasis_right {
	font-size: 100%;
	font-weight: 600;
	color: #DC143C /*  crimson */;
	text-align:right;	
}

.emphasis_left {
	font-size: 100%;
	font-weight: 600;
	color: #DC143C /*  crimson */;
	text-align:left;	
}

.emphasis_center {
	font-size: 100%;
	font-weight: 600;
	color: #DC143C /*  crimson */;
	text-align:center;	
}

.emphasis_area {
/* colour light yellow */
	background-color:#FFFFCC;
	margin:5px;
	}
	
.emphasis_area_2 {
/* colour light pink */
	background-color:#FFCCFF;
	margin:5px;
	}	


h1	{
	font-family: Arial, sans-serif;
	text-align:center;
	line-height: 24px;	
}


h2, h3, h4, h5 {
	font-family: Arial, sans-serif;
	text-align:left;
	color:#CC0000; /* purple    */
}

h1 {
	font-size: 150%;
}

h2 {
	font-size: 130%;
}

h3 {
	font-size: 124%;
}



h4 {
	font-size: 120%;
}


h5 {
	font-size: 103%;
	color: #FF9900; /* orange */
}

h6 {
	text-decoration: underline;

}

h2, h3, h4, h5, h6 {
	margin-top:2em;
	margin-bottom:-0.2em;
}

#outer_table tr td .table_contents tr td {
	border: none; 
	}
	
#outer_table tr td .table_contents {
	border: none; 
	}	

.singleLineRow {
	border-bottom:solid 2px silver;
	border-top:0px;
	padding-left: 10px;
	
}

.img_left {
	text-align: left;
	margin: 2px 10px 2px 2px;
	border: none; 
	padding: 0px;
	float: left; 
}

.img_right {
	text-align: left;
	margin: 10px 0px 10px 10px;
	border: none; 
	padding: 0px;
	float: right; 
}

.img_center {

	margin-left: auto;
	margin-right: auto;
	padding: 0px;
}

.table_top_row {
	background: #B0C4DE; /*lightsteelblue;*/

}

.table_3_col
/* table of three colums */
{
	border: 1px solid green;
	border-collapse: collapse;
	background: white;
	margin-left:auto;
	margin-right:auto;
	width:100%
	} 

.rtcref p {
	font-family: Arial, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: 500;
	color: #000099;
}

.rtcref img {
	border:none;
	float: left;
	margin-right: 2em;
}




/* 
Murray and Osgood: This comment applies to the style given immediately BELOW:

The old selector was as follows:
.table_3_col tr td 
The result was unsatisfactory. The table columns were not of equal width 
as intended.

Osgood suggested a fix, which actually worked, namely specifying a context 
for this selector, thus:
#outer_table .table_3_col tr td
This is what you see below, and therefore the table now looks as intendedL: i.e. equal columns.

However, I am not happy with this "solution".  The fact that "it works" is neither here nor there.
The table in question has been marked as class=".table_3_col". Therefore the browser should 
recognise it as such even if I do not declare specifically that it is 
"inside a table called #outer_table".

This is quite different from what did elsewhere in this stylesheet, where I correctly 
created a style
#outer_table tr td table { ...  } 
which therefore applies to any table other than the
outer table.  In that case I had to specify a context in order to make clear to the browser 
that the style rule in question does NOT apply to the outer table.

Can Murray or someone else please say:
1	Why Osgood's solution is valid.
2	If it is NOT valid (even though it works), what would be the correct solution of my problem.

Thanks, Adrian

  */

#outer_table .table_3_col tr td 
/* for cells in 3-column tables   */
{
	font-size:80%;
	border: 1px solid green;    
	vertical-align: top;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0em;
	padding-bottom: 0em;
	width: 33.3%;
	}




#outer_table tr td table {
	width:90%;
/* 	border:1px solid blue;  */
	margin-left:auto;
	margin-right:auto;	
	margin-top:1em;
	border-collapse:collapse;	
	}

#outer_table tr td table td {
	width:50%; 
	padding-left: 0.5em;
	vertical-align:top;
	}

#outer_table tr td .table_invisible {
	width: 100%;
	border: none;  
	border-collapse:collapse;

}	
	
#outer_table tr td .table_invisible tr td {
   	border: none; 
	
	}

#outer_table tr td .table_invisible_with_horizontals {
	width: 100%;
	border: none;  
	border-collapse:collapse;

}	
	
#outer_table tr td .table_invisible_with_horizontals tr td {
   	border: none; 
	border-bottom:  1px solid red;

	}



#outer_table tr td .table_invisible_with_horizontals_mono {
	width: 100%;
	border: none;  
	border-collapse:collapse;

}	
	
#outer_table tr td .table_invisible_with_horizontals_mono tr td {
   	border: none; 
	border-bottom:  1px solid red;
	font-family:"Courier New", Courier, mono;
	font-size: 14px;
	font-weight:400;
	}	
	
	
	
	
#outer_table .hanging_indent p {
	text-indent: -40px;
	padding-left: 40px;	
	}

.previous_next {
	width:300px;
	height:20px; 
	border:none;
	margin-left:auto;
	margin-right:auto;   
}


.up_arrow {
	border: none;
	width:18px;
	height:15px;
}

.table_jumplinks {
	border: 7px solid #009900;
	width:100%;
}

.table_jumplinks td p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	vertical-align: top;
	padding: 0.4em;	
	margin: 0px;
}	
	
.table_jumplinks a {
	text-decoration: none;
	color: #0000ff;
}

#outer_table .enumeration {
	border: none;
	/*this is a dummy instruction, 
	just to put something after this class definition 
	needed for other purposes*/
    margin-top:16px;
	}


#outer_table table.enumeration  {
	border: none;
	}
	
#outer_table table.enumeration  td {
	border:none;
	}	

.long_quote {
	margin-left: 30px;
	font-size: 95%;
	}
	
	
.tabulation_monospace {
	font-family:"Courier New", Courier, mono;
	font-size: 14px;
	font-weight:600;
	color:#999999;
	background-color:#FFFFCC; /* light yellow */	
}

.tabulation_monospace_colourless {
	font-family:"Courier New", Courier, mono;
	font-size: 14px;
	font-weight:400;
	background-color: #FFFFFF;  /* white */	
}


.gentium {
	font-family:Gentium;
	font-size:14px;
	color:#0000FF;
	}
	
.trim {
	list-style-type:lower-latin;
	}


	
#outer_table .table_box_right {
	width: 40%;
	border: 1px solid blue;
	margin-left:200px;
	padding: 10px;
	}
	
#outer_table .table_box_right tr td {
	border-left:none;
	border-collapse: collapse;
	border: none;
	background-color:#FFFFCC;  /* pale yellow  */
	}
.superscript {
	vertical-align:super; /* superscript */
}

.idioms_enumeration {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0000FF;
	margin-top: -40px;
	margin-bottom: 20px;
	margin-left: 390px;
	}