H1 {font-family: Arial,sans-serif; font-size: 20pt; color: #FF0000; text-align: center}
H2 {font-family: Arial,sans-serif; font-size: 20pt; text-align: center}
H3 {font-family: Arial, sans-serif; font-size: 16pt}
H4 {font-family: Arial,sans-serif; font-size: 14pt}
H5 {font-family: Arial,sans-serif; font-size: 12pt}

DIV.newshead {font-family: Times New Roman, Arial,sans-serif; font-size: 26pt; color: #000000; text-align: center; background: #ffff00;}
DIV.largeheading {font-size:24pt; color:#003399 ; font-weight:bold;}
DIV.normalheading {color:#003399; font-size:12pt; font-family:Arial,Helvetica,sans-serif; font-weight:bold;}
DIV.neathead {color:#003399; font-size:12pt; font-family:Arial,Helvetica,sans-serif; font-weight:bold; float:left;}

/* divfooter to be phased out for small */
DIV.footer {font-family:Arial,Helvetica,sans-serif; font-size: 8pt; text-align: right; font-style:Italic}
DIV.normalitalic {font-family:Arial,Helvetica,sans-serif; font-size: 12pt; font-style: italic}
DIV.smallishitalic {font-family:Arial,Helvetica,sans-serif; font-size: 10pt; font-style: italic}
DIV.normal  {font-family:Arial,Helvetica,sans-serif; font-size: 12pt} /*is this used */
DIV.smallish {font-family:Arial,Helvetica,sans-serif; font-size: 10pt}
DIV.small {font-family:Arial,Helvetica,sans-serif; font-size: 8pt}
DIV.signature {font-family:Times New Roman,Arial,Helvetica,sans-serif;font-size:14pt; font-weight:bold; text-align: right; font-style: italic;}
div.centre {text-align: center;}

span.Small {font-family:Arial,Helvetica,sans-serif; font-size:8pt}
span.underline {text-decoration: underline;}
p        {font-family:Arial,Helvetica,sans-serif; font-size:12pt}

body {font-family: Arial, Hevetica, sans-serif}
/* dt {font-size:14pt;} */
dt {font-weight:bold;}

#award {background: #fffbff}
#books {background: #ffeebb}
#celebrants {background: #fff6f6}
#extension {background: #fff9ff}
#formal {background: #eeffff}
#index {background: #fcffff}
#letters {background: #ffffee}
#magazine {background: #eeffee}
#outreach {background: #ffffee}
#test {background: #fcffff}
#whyiam {background: #eeeeff}
/* #julia {background: #9999CC} */
/*is plain in use? */
#plain { position: absolute; top: 100px;}

/*  'blue'       99CCFF  */

#headmap {
    border: 0px;
}

.menuitem {
border: solid 1px #000000;
font-size: 16px;
padding: 5px;
margin: 0px;
float: left;
background: #ffffff;
text-align: center;
}

#leftheaddisplay {
	float: left;
	top: 3%;
	left: 2%;
	width: 45%;
	margin-left: 0px;
	background: #ffffff;
	text-align: center;
	color: #ffffff; 
        font-size: 14pt; 
        font-weight: bold
	
}
#lefthead {
	float: left;
	top: 3%;
	left: 2%;
	width: 40%;
	margin-left: 1px;
	padding: 5px;
	text-align: center;
	
}

#centrehead{
float:left;
	left: 50%;
	top: 3%;
	margin-left: 12px;
overflow: visible;
	width: 27%;
	padding: 5px;
	text-align: center;
	
}

#righthead {
	float: right;
	text-align: right;
	top: 3%;
	right: 3%;
	width: 20%;
	height: 130px;
	padding: 5px;
	margin-right: 3px;
}


div.widebuffer {
    height: 1px;
    overflow: hidden;
    width: 93%;
    clear: both;
}
.boxfloatleft {
         float: left;
         width: 40%;
         color: #666666;
}

.boxfloatright {
         float: right;
         width: 40%;
         color: #666666;
}


 #leftcol {
	float: left;
	top: 3%;
	left: 2%;
	width: 47%;
	margin-left: 0px;
	padding: 5px;
	text-align: left;	
}


 #rightcol {
	float: right;
	top: 3%;
	right: 3%;
	width: 47%;
	padding: 5px;
	margin-right: 0px;
}


#leftfooter {
	float: left;
	left: 3%;
	width: 33%;
	text-align: left;
	margin-top: 4px;
	margin-right: 1px;
	margin-left: 1px;
        font-size:10pt;
 }
 
#centrefooter {
    float: left;
	left: 35%;
	width: 30%;
	text-align: center;
	margin-top: 4px;
	margin-right: 1px;
	margin-left: 1px;
 }


#rightfooter {
	float: right;
	right: 3%;
	width: 34%;
	text-align: right;
	margin-top: 4px;
	margin-right: 1px;
	margin-left: 1px;
 }


blockquote {font-family:Arial,Helvetica,sans-serif; font-size: 11pt;
	border-left: 5px solid #ccc;
	margin-left: 1.5em;
	padding-left: 10px
 }
	
#right3col {
	float: right;
	top: 3%;
	right: 2%;
	width: 20%;
	margin-left: 0px;
	padding: 3px;
	text-align: left;
 }
.box {border: 1.5px solid #000000;
	padding: 4px;
	margin: 5px;
	text-align: center;}


/* all this table formatting to be either removed or moved to pages where used */
#labelcell {background: #99ccff; text-align: center; color: #ffffff; width: 40%; font-size: 14pt; font-weight: bold}
#cellleft {text-align: center; width: 40%}
#cellcentre {text-align: center; width: 30%}
#cellright {text-align: center; width: 15%}

#tablebot {width: 95%}
#cellbotleft {font-size: small; text-align: left}
#cellbotright {text-align: right; font-size: 8pt; font-style: italic}

.headtable {padding: 0; width: 100%}
.displaytable {border: 3px solid #9999cc; width: 98%; padding: 1px; text-align: center}

a {color: #0000ee}
a img {border: none}
a:visited {color: #551a8b}
a:hover {color: #dd0000}


#menu {
width: 12em; /* set width of menu */
background: #eee;
text-align:left;
} 

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #6688ff;
/* text-transform: uppercase;*/
}

#menu a {
color: #000;
/* background: #efefef;  or julia 9999cc*/
background: #99bbff;
/* text-decoration: none; */
}

#menu a:hover {
color: #00a;
background: #fff;
}
/*
The CSS above removes the padding/margin and bullets from all the lists, sets the width of the the entire menu and styles the links and heading to suit.
Positioning the Pop Outs
*/
#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}
/*
The position: relative; applied to the #menu li makes the <li> elements into containing blocks for the nested <ul> elements.

We only want to apply positioning to third level nested lists and deeper so the #menu ul ul ul targets that and the popout is positioned over to the right edge of their containing block (parent <li> element)

This now shows all the popouts in their correct position, remember to view with a non-IE browser.
Hiding and Revealing using :hover
*/
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}