body {background-color: #200542;
		font-size: 100%;
}
#cont_container { /* container for whole page */
	max-width: 1000px;
	min-width: 320px;
	position: relative;
   width:95%;
   margin: 0 auto;
   color: #CCCCCC; /* sets font colour */
   background: #333333;
   margin-top: 25px;
	}
.rh-img { /* gives appropriate scaling of right-hand images */
	width: 100%;
	min-width: 75px;
	height: auto;
	}	
.hdr-img { /* makes headers scaleable */
	width: 100%;
	height: auto;
}
#hdr-1 {
	max-width: 100%; /* background-color is set on the web page according to the liturgical season */
	}	
.hdr-2 {
	background-color: #333333; /*masks any excess space along the bottom of the container below the contained image*/
	max-width: 100%;
	}
nav {float:left; /* floats nav column to left
                    widths may need adjustment after navigation 'buttons' inserted */
	max-width: 20%;
	min-width: 20%;
	}
article {float: right; /* floats page content right - may need adjustment after nav adjustment */
	max-width: 75%;
	}
/*.clearfix:before, .clearfix:after { clearfix ensures that footer is always at bottom of screen 
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1; this seems to be a necessary kludge for IE6. may be used in simplified version below
} */
.clearfix {
	overflow: auto;
	} /* this simplified clearfix seems to do what's needed AND VALIDATES! */

h1, h2 { /* font-size delegated to media detection CSS at end */
	color: #eeeeee; font-family: arial, sans-serif; /*font-size: 18pt;*/ line-height:0.1rem
	}

p { /* font-size delegated to media detection CSS at end */
	color: #CCCCCC; font-family: arial, sans-serif; line-height:1.4em
	}
/* css to manage the navigation list */
nav { 
	font-size:0.75em; width:90%; margin: 0 auto 0 auto; padding-top: 15px;
	}
nav ul { 
	margin:0px; padding:0px; 
	width: 100%
	}
nav li { list-style: none; 
	word-wrap: break-word; 
	text-align: center;
	font-family: arial; font-size: 10pt;
	}
ul.top-level { 
	background:#b60;
	}
ul.top-level li {
 	padding-top: 5px;
 	padding-bottom: 5px;
 	border-bottom: #fff solid;
 	border-top: #fff solid;
 	border-width: 1px;
	}
nav a {
	 color: #fff;
	 cursor: pointer;
	 display: block;
	 height: auto;
	 text-decoration: none;
	 width:100%;
	 }
 nav a:hover{
 	text-decoration:underline;
	}
 nav li:hover {
 	background: #f90;
 	position: relative;
	}
p a:link {
	 color:#f90;	
	}	
	
p a:hover {
	 color: #6282A1;
	}	
table td {  /* 06_10_15 This is for the main structural table. Others may need an id spec to avoid problems */
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 0px;
	vertical-align: top; /* supersedes 'valign' attribute in html <td> tag*/ 
	}
.whoswho_table {border-collapse: collapse;
    
  }
.whoswho_td { 
border: 1px solid #000;
    padding: 10px;
font-family: arial; line-height:1.3em;
}
.whoswho_th { 
border: 1px solid #000;
    padding: 10px;
font-family: arial; line-height:1.3em;
}
.diary_table {border-collapse: collapse}  /* diary_td, td.sec, td.pri and td.last govern data tables on web pages*/
.diary_td { 
border: 1px solid #000;
font-family: arial; line-height:1.3em;
}
td.sec{
	border-bottom: none;
	border-top: none;
	border-left: black solid 1px;
	border-right: black solid 1px;
	padding: 5px;
	font-family: arial; line-height: 1.3em;
}
td.pri{
	border-bottom: none;
	border-top: black solid 1px;
	border-left: black solid 1px;
	border-right: black solid 1px;
	padding: 5px;
	font-family: arial; line-height: 1.3em;
}
td.last{
	border-bottom: none;
	border-top: black solid 1px;
	border-left: none;
	border-right: none;
	padding: 5px;
	font-family: arial; line-height: 1.3em;
}

.pat_tbl {
	color: #CCCCCC; font-family: arial, sans-serif; line-height:1.3em
}

.caption {font-family: arial, sans-serif;}		

/* media detection follows to set fonts for various screen sizes */	

@media only screen and (min-width: 20em) {  /* small phone devices */
h1 {font-size: 3.0vw;}
h2 {font-size: 2.1vw;}
p {font-size: 0.7rem;}
.caption {font-size: 0.6rem;}
/* This ad diary_table, diary_td, td.sec, td.pri and td.last govern tables on web pages*/
.diary_td { 
font-size: 0.7em;
	}
td.sec{
	font-size: 0.6em;
	}
td.pri{
	font-size: 0.6em;
}
td.last{
	font-size: 0.6em;
	}
.whoswho_td{font-size: 0.5em;}
.whoswho_th{font-size: 0.6em}
.pat_tbl {
	font-size: 0.6em;
}
} 

@media only screen and (min-width: 30em) {  /* tablet devices */
h1 {font-size: 3.1vw;}
h2 {font-size: 2.2vw;}
p { font-size: 0.8rem;}
.caption {font-size: 0.7rem;}
/* This ad diary_table, diary_td, td.sec, td.pri and td.last govern tables on web pages*/
.diary_td { 
	font-size: 0.9em;
	}
td.sec{
	font-size: 0.7em;
	}
td.pri{
	font-size: 0.7em;
	}
td.last{
	font-size: 0.7em;
	}
.whoswho_td{font-size: 0.7em;}
.whoswho_th{font-size: 0.7em;}
.pat_tbl {
	font-size: 0.7em;
}
} 
@media only screen and (min-width: 48em) {  /* ?-top screens */
h1 {font-size: 3.2vw;}
h2 {font-size: 2.4vw;}
p { font-size: 1.0rem;}
.caption {font-size: 0.8rem;}
/* This ad diary_table, diary_td, td.sec, td.pri and td.last govern tables on web pages*/
.diary_td { 
	font-size: 1.0em;
	}
td.sec{
	font-size: 0.9em;
	}
td.pri{
	font-size: 0.9em;
	}
td.last{
	font-size: 0.9em;
	}
.whoswho_td{font-size: 0.9em}
.whoswho_th{font-size: 1.0em}
.pat_tbl {
	font-size: 0.9em;
}
}