h1
    {
	color: #000066; /* previously 0 black */
	
    }

h2 {
	color: #000066; /* dark blue */
	margin-top: 1em;
	margin-bottom: 1em;
	}

h3, h4, h5, h6 {
	color: #000066; /* dark blue, previously #555555 grey */
	margin-top: 1em;
	}

a:hover {color:#003399; text-decoration:underline;}

/*  
MS IE doesn't do padding or border in divs properly, it includes both their widths in the width of the content.
The next two tage,  div & html>body, are based on recommendation at http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml 
Aparently for most browsers, padding and border are added to width, but for IE width shd include any padding and border.
*/

div {
	clear: both;
    margin: 5%; /*  provides nice margin all round the division */    
	max-width: 90%;  /* This width line makes the float Right images work */
}
html>body div {
width: 90%;
font-size: 130%;
}


dd  {
    clear: both;
    margin: 1em 0 1em 2em; /* clockwise Ñ top, right, bottom, left */
    }


a   { /*   was color: #555555; */
    font-weight: bold;
    color: #0066cc;
    }
/* The above styles redefine html styles*/

/* The remaining styles are made-up names specific to my JE web site */


.dth { /* use in definition lists (dl) for a title (dl) like header styles */
    clear: both;
    font-weight: bold;
    color: #000066;
    margin: 2em 0 1em 0;
/*
    padding: 10px 0 5px 0px;    
*/
    }
    
.dtimportant { /* use for text title like the "important" style - was 0066c6 */
    font-weight: bold;
    color: #0066cc;
    }
    
.dt100 {  /* definition title of width 100px - may hold bigger image & text  */
    clear: both;
    width: 100px; /* doesn't affect the image width */
    float: left;
    clear: left;
    }
.dd100 { /* definition data - 100px before to leave room for the picture (dt) 
           and 20px below as line spacing  */ 
    /* Note it lines up vertically if dd is longer than dt but not vv. */
    clear: none;
    margin: 0 0 0 100px;
    padding: 0 0 20px 100px;
    }    
.dt80 {  /* definition title of width 80px - may hold image & text  */
    clear: both;
    width: 100px; /* doesn't affect the image width */
    float: left;
    clear: left;
    }
.dd80 { /* definition data - 80px before to leave room for the picture (dt) 
           and 20px below as line spacing  */ 
    /* why won't the dd's line up alongside their titles? */
    clear: none;
    margin: 0 0 0 80px;
    padding: 0 0 20px 80px;
    }


    
.footer {
    font-size: 80%;
    color: #777777; /* JE's lighter grey */
    }

.imgsmall { /* an image that will fit in a tblsmall table*/
    height:80px
    }
.imgintext { /* an image that will look OK inline with text*/
    height: 15px;
    border: 10px;
    }
    
/*  imgleft added so images will line up like a left-hand table column but it doesn't work because images are different proportions. 
The margin spaces start by specifying the top space and go clockwise ending with left margin, so imgleft uses the middle two, which are right & underneath  */

.imgleft400 {
    border: 0;
    float: left;
    height: 400px;
    margin: 0 20px 15px 0;
    }  

.imgleft300 {
    border: 0;
    float: left;
    height: 300px;
    margin: 0 20px 15px 0;
    }
.imgleft200 {
    border: 0;
    float: left;
    height: 200px;
    margin: 0 20px 15px 0;
    }  
.imgleft120 {
    border: 0;
    float: left; 
    height: 120px;
    margin: 0 20px 15px 0;
    }
.imgleft100 {
    border: 0;
    float: left; 
    height: 100px;
    margin: 0 20px 15px 0;
    }
.imgleft80 {
    border: 0;
    float: left; 
    height: 80px;
    margin: 0 20px 10px 0;
    }
.imgleft60 {
    border: 0;
    float: left;
    height: 60px;
    margin: 0 20px 10px 0;
    }
.imgleft50 {
    border: 0;
    float: left;
    height: 50px;
    margin: 0 20px 10px 0;    }
.imgleft40 {
    border: 0;
    float: left;
    height: 40px;
    margin: 0 20px 10px 0;
    }
.imgleft30 {
    border: 0;
    float: left;
    height: 30px;
    margin: 0px 20px 10px 0;
    }
.imgleft20 {
    border: 0;
    float: left;
    height: 20px;
    margin: 0 20px 10px 0;
    }
    
/* These imgright styles added October 2009.
   Margins specified, the last two, are for underneath and left */

.imgright500 {
    border: 0;
    float: right;
    height: 500px;
    margin: 0 0px 15px 15px;
    }  
.imgright300 {
    border: 0;
    float: right;
    height: 300px;
    margin: 0 0px 15px 15px;
    }  
.imgright200 {
    border: 0;
    float: right;
    height: 200px;
    margin: 0 0px 15px 15px;
    }
.imgright150 {
    border: 0;
    float: right;
    height: 150px;
    margin: 0 0px 15px 15px;
    }
.imgright100 {
    border: 0;
    float: right;
    height: 100px;
    margin: 0 0px 15px 15px;
    }
.imgright80 {
    border: 0;
    float: right;
    height: 80px;
    margin: 0 0px 15px 15px;
    }
.imgright60 {
    border: 0;
    float: right;
    height: 60px;
    margin: 0px 0px 15px 15px;
    }
.imgright40 {
    border: 0;
    float: right;
    height: 40px;
    margin: 0 0px 10px 10px;
    }   
.imgright30 {
    border: 0;
    float: right;
    height: 30px;
    margin: 0 0px 10px 10px;
    }
.imgright20 {
    border: 0;
    float: right;
    height: 20px;
    margin: 0 0px 10px 0;
    }
    
 .important {  /*  was color: #0066cc; */
    font-weight: bold;
    color: #990000;
    }
    
 .importantSCD { /* was color: #0067c6;  */
    font-weight: bold;
    color: #0067c6;
    }
   
.linkgrey {  /*use for the little, less important, links */
	font-weight: bold;
	color: #777777;
	}
.linkintext {
    font-weight: bold;
    color: #0066cc;
    }

 /* trying to set up a horizontal menu bar which can wrap around and looks OK */

.menu-bar {
	font-size: 125%;
	font-weight: bold;
	background-color: #dddddd;
	text-align: justified;
	}
.menu-item {
	background-color: #dddddd;
	}
.menu-item-here {
	background-color: #cccccc;
	}

.tblsmall {  /* table row whose cells may hold an image of height imgsmall & text below */
    height: 100px;
    border-collapse: collapse;
    }
.tdsmall { /* table cells (td) fixed width, centred, contents start at top */ 
    width: 150px;
    text-align: center;
    vertical-align: top;
    padding-left: 5px;
    }
    
.vspaced   /* for ul lists to have blank line between each entry */ 
	{
	margin-top: 1em;
	margin-right: 8em;
	line-height: 1em;
}