body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0000A2;
background-color:#666666; }

.main-block {
    position:relative;
    max-width: 800px;
    text-align:center;
    margin-top: 0px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    background-color:white;   
    height:auto; }

.page-container {
	float:left;
	width:100%;
	height:auto;
	background:white;
	margin-top:0  }
	    
.main-body-right {
    float: right;
    width:85%;
    border-left:2px #CC0000 solid;
    padding: 0 8px 10px 8px;
    text-align: left;
    background-color:white; }
    
.header {
    width: 100%;
    height: auto;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    border-bottom: 2px #cc0000 solid}
    

/*LINK DEFINITIONS STYLES*/
  a:link    {color:#CC0000;background: transparent;text-decoration:none;}
  a:visited {color:#666699;background: transparent;text-decoration:none;}
  a:active  {color:#bb8800;background: transparent;text-decoration:none;}
  a:hover   {color:blue;background: transparent;text-decoration:none;}
     
/*HEADING STYLES*/ 
  h1, h2, h3 { font-family: Arial, Verdana, sans-serif; font-style: normal; font-weight: normal; text-align:center }
  h1  {
     color:#666666;
     font-size: 1.7em; 
     margin-top:30px;
     margin-bottom:10px;
}
       
  h2 {
     color:#666666;
     font-size: 1.4em;
     margin-top:30px;
     text-align: left;
}

  h3 {
     color:#666633;
     background: transparent;
     font-size: 12pt; 
     font-style: italic; 
     text-align: left;
     margin-top:10px;
}

p {color:#0000A2; text-align:left;font-size: 1em}


.m1wrap, .m2wrap { float:left;margin-top:4px;width:100%;background:white;overflow:hidden;
    position:relative;border-bottom: 2px red solid }     
.m1wrap { height: 40px; border-top: 2px red solid; }
.m2wrap { height:58px; background:#EAEAEA;color: gray;}

.arrowl, .arrowr { position:absolute;background:white;width:11px  }
.arrowl { left:0px }
.arrowr { right:0px }

.menubox, .menuboxS {
    width: 100%;
    height:74px  /* container for top menu */   ;
    background:navy /*#d9d8b4 */ ;
    overflow-x: auto;
    overflow-y:hidden; 
    white-space:nowrap;
    float:left;}
.menuboxS { background:#EAEAEA;border-bottom: navy 2px solid; padding-left:15px;padding-right:15px}  
.menubox a, .menuboxS a  {
	display: inline-block;
	vertical-align:middle;  /*worked for ipad */
	overflow:hidden;
	width:94px; /* otherwise doesn't fold to 2nd line */
   height:57px;
    white-space:normal;
    color:white;
    font-family:Tahoma,"Trebuchet MS",sans-serif;
    font-size:.9em;
    text-align:center;}
.menuboxS a { color:navy }
.menubox a:hover, .menuboxS a:hover { text-decoration:none }
a.hlt { background:#DFF2FF;color:navy }
.menuboxS a.hlt { border-left: navy 1px solid; border-right: navy 1px solid; padding-left:5px }
    
/*BOX STYLES*/

.w100 {width: 100%;}	
	
/*TEXT STYLES*/


.caption {
	font-size:.9em;
	font-style:normal;
	color:#808080;
	text-align:center;
}

.caption-left {
	font-size:.9em;
	font-style:normal;
	color:#666633;
	text-align:left;
}
	
.credit {
	color: #6a6402;
	background: transparent;
	font-size: small;
	font-weight: normal;
    font-style: italic;
	text-align: right;
}

.smaller-grey {
   color:#666699;
   background: transparent;
   font-size:80%;
   font-weight: normal; }
      
.abstract {
   color:#928F9E;
   background: transparent;
   font-size:80%;
   font-weight: normal;
   font-style: normal;
   text-align: left;
 }
       
.box-text {
   font-size:90%;
   color: #666633;
   background: transparent;
   text-align:left;	
} 

.mid-menu {font-size: .8em; text-align:center; margin-bottom: 0}

.edge {
    position:relative;
	margin-left:-16%;
	margin-right:10px;
	text-align:center;
	width:25%;
	float:left;
	background-color: white;
	padding-top:12px;
	}
	
.backcolor {
    background-color:#CCFF99;
    padding: 1%;
    margin-bottom:5px;
    border-top:2px #cc0000 solid;
    }
   
.pic-right {
    background: white;
	height:auto;
	padding:10px;
	border-bottom:2px #cc0000 solid;
    margin-left: 10px;
	float:right}

	
.notebox-blue {
    background:#eeeeff;
	width:60%;
	height:auto;
	padding:10px;
	padding-top:0px;
	border-top:2px #cc0000 solid;
    margin-left: 10px;
	float:right}	
	
.notebox-blue-left {
	font-family: Arial,Verdana,sans-serif;
    background:#eeeeff;
	width:60%;
	height:auto;
	padding:10px;
	padding-top:0px;
	border-top:2px #cc0000 solid;
    margin-right: 10px;
	float:left}
	
.notebox-blue-edge {
	float:left;
	border-top:2px #cc0000 solid;
	background-color: #eeeeff;
	text-align: left;
	width:50%;
	margin-left:-16%;
	margin-right:10px; margin-top:10px; margin-bottom:10px;
	padding:10px}
	
.notebox-green {
	font-family: Arial,Verdana,sans-serif;
    background:#ddffbb;
	width:50%;
	height:auto;
	padding:10px;
	padding-top:0px;
	border-top:2px #cc0000 solid;
    margin-left: 10px;
	float:right}

.notebox-green-edge {
	float:left;
	border-top:2px #cc0000 solid;
	background-color: #ddffbb;
	text-align: left;
	width:40%;
	margin-left:-16%;
	margin-right:10px; margin-top:10px; margin-bottom:10px;
	padding:10px	
}

.notebox-green-wide {
	float:none;
	border-top:2px #cc0000 solid;
	background-color: #ddffbb;
	text-align: left;
	width:80%;
	margin-left:auto; margin-right:auto;
	padding:10px	
}

.notebox-mustard-right {
    background-color: #EEFF99;
	width:60%;
	padding:10px;
	padding-top:0px;
	border-top:2px #cc0000 solid;
    margin-left: 10px;
	float:right;
}

.notebox-green-right {
    background-color: #ddffbb;
	width:60%;
	padding:10px;
	padding-top:0px;
	border-top:2px #cc0000 solid;
    margin-left: 10px;
	float:right;
}


.note-box-mustard-left {
	float:left;
	border-top:2px #cc0000 solid;
	background-color: #EEFF99;
	width:200px;
	margin-right:10px;
	padding:10px	
}

.notebox-mustard-edge {
	float:left;
	border-top:2px #cc0000 solid;
	background-color: #EEFF99;
	text-align: left;
	width:80%;
	margin-left:-16%;
	margin-right:10px;
	padding:10px	
}

.notebox-mustard-wide {
	float:none;
	border-top:2px #cc0000 solid;
	background-color: #EEFF99;
	text-align: left;
	width:80%;
	margin-left:auto; margin-right:auto;
	padding:10px	
}



/*TABLE STYLES*/

.border-collapse {
	border-collapse: collapse;
	border: 1px solid gray;
}


/*GOOGLE AD SPACES*/

.search-box {
   margin-top: 10px;
/*    margin-bottom: 15px; */
    height: 45px;
    width: 70%;
    text-align:center;
    margin-left:auto; margin-right:auto;
}	

.hide { display:block }

.resp-ad {width:90%; margin-bottom: 20px; background-color:#FFFFFF; margin-left: auto; margin-right:auto;border-top: 2px #CC0000 solid;}

.resp-ad-right {width:35%; float:right; background-color:#FFFFFF; margin-left: 2%;border-top: 2px #CC0000 solid; }

.resp-ad-edge {width:40%; float:left; background-color:#ffffff;margin-left:-16%;border-top: 2px #CC0000 solid;
	margin-bottom: 2px; text-align:center; margin-right:10px;}
	
.resp-ad-left {width:40%; float:left; background-color:#FFFFFF; margin-top: 2px; border-top: 2px #CC0000 solid;
	margin-bottom: 2px; text-align:center; margin-right:2%;}
    
.resp-link-ad-edge {position:relative; width: 35%; background-color:#FFFFFF; float:left; margin-left:-16%; margin-right:10px; padding-left:6px; border-top:2px #009900 solid;}

.resp-link-ad-right {position:relative; width: 35%; float:right; margin-left:4%; border-top:2px #009900 solid;}

.tower {width: 20%; float:right; margin-left:4px; padding: 6px; border-top: 2px #CC0000 solid;}

.panel {
 	position: relative;
	width: 70%;
	background-color:#ddddbb;
	padding-left:3%; padding-right:3%; padding-top:1px; padding-bottom:2%;
	border-top:2px #cc0000 solid;
	margin-bottom:12px;
	margin-left:-16%;
	float:left; margin-right:10px;
}   
   
#hlt {
	background-color:orange
}	
	
/*IMAGE STYLES*/

img  {border:none;}

/*COOKIES CODES*/

/* cookie law from https://www.creare.co.uk/js-eu-cookie-law-banner */

 #cookie-law {
   position:fixed;
   bottom:0px;
   width:100%;
   height: auto;
   color:gray;
   background:white;
   margin-left:0; margin-right:0; text-align:center;
   border-top:2px gray solid;
   z-index: 999;
    }
    
#cookie-law p {
   font-size:.7em;
   font-weight:normal;
   text-align:center;
   color:gray;
   margin-left:auto; margin-right:auto;
   padding:0;
} 

/* end cookie law from https://www.creare.co.uk/js-eu-cookie-law-banner */ 


/*Menu*/

#menu-wrap {/* height of boxes           */   
  margin-left:0px;
  padding-top:3px;
  font-size:14px;
  text-align:left;
  width:100%;
  background-color:navy}

/* the container which holds the menu.*/
#menu { margin-left:auto;margin-right:auto;width:360px; min-height: 3.0em;padding-left:20px; text-align:center; background:navy; }

#menu ul, #menu li {list-style:none; margin:0; padding:0; }

#menu ul li { float:left; height:auto; width:100px } /* width of top boxes */

#menu a { display:block; color:white; text-decoration:none; padding:2px 0px 2px 0px;}
#menu a.hlt { background:blue;}

#menu li ul a { padding:2px 2px 2px 2px; font-weight:normal; width:180px;}
#menu li ul li ul a { padding:2px 2px 2px 2px; font-weight:normal; width:140px;}

#menu li       { float:left;background:navy;}
#menu li li    { padding:0; width: 180px;background:navy}
#menu li li li {padding:0; width: 140px;background:navy}

#menu li ul { position:relative; display:none; width:140px; font-weight:normal; text-align:left; padding-top:8px;}

#menu li ul li ul {position:absolute; display:none; width:140px; margin-left:-100px; font-weight:lighter;  padding-top:0px; z-index:1000; height:60px  }
/* NB frig above - background:red - has been removed (odd red block on 2 entry side pop out). Neil 3rd April 2018 */
#menu li ul ul { margin:-30px 0 0 0px;width:100px} 


#menu a:hover {background:navy; color:red; display:block }
menu li:hover {background:navy; display:block }
menu li a:hover a { background:lime }
#menu li:hover ul ul         {left:-999em; display:block;right:-160px} 
#menu li:hover ul ul ul      {left:-999em; display:block;right:-160px}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul {left:auto; display:block}

#menu li#first-left { border-left:none; width:auto;}

#menu li#last-right { border-right:none;}

#menu a:focus, #menu a:hover {color:yellow;}/* colour of text when hovered */

#menu a:active {color:#000;}
#menu li:hover a.parent-link {color:#fff;}
#menu li li:hover a.child-link {color:#fff;}
#menu a.current {background-color: #001c26; color: #fff;}

/* JavaScript for menu, for IE6 */
#menu li.js-show a.parent-link {color:#fff;}
#menu li li.js-show a.child-link {color:#fff;}
#menu li.js-show ul {left:auto;}
#main-menu li.js-show li ul {left:-999em;}
#menu li li.js-show ul {left:auto;}
#menu li.js-show {background:#c51c26;}


   @media screen and (max-width: 520px) {
    .resp-ad { width:82%;}
    .tower { width:30%;}
    h1    { font-size: 1.5em; }
}

   @media screen and (max-width: 490px) {
   .resp-ad { width:70%;}
    .search-box { width: 90%}
    .hide { display:none }
    .main-body-right { width:94%; border: 0; float:none }
   
}

   @media screen and (max-width: 440px) {
   h1    { font-size: 1.3em; text-align:center; margin-left:auto; margin-right:auto; margin-top:20px; }
   h2    { font-size: 1.1em; }
   h3    { font-size: 1em; }
   h5    { font-size: 1em; }
   #menu a { font-size:.9em; padding:6px 4px 0px 4px }
   #menu li ul a { font-size:.9em;}   /*   #menu-wrap { width:420px;}  */
   p { font-size:1em}

   .box-text { font-size: .9em } 
   .main-block { width:100%; margin-top:0px;}	   
        
   .header { border: 0}      
   .resp-ad-edge { margin-left: 0;}
   .link-ad-edge { margin-left: 0;}
   .resp-ad-edge { float:none; margin-left:auto; margin-right:auto; width: 70%}
   .resp-ad-left { float:none; margin-left:auto; margin-right:auto; width: 80%}
   .resp-ad-right { float:none; margin-left:auto; margin-right:auto; width: 70%}
   .resp-link-ad-edge { float:left; margin-left:0; width: 40%}
   .resp-link-ad-right {width: 40%} 
   .edge { width: 35%;}
   .notebox-mustard-edge { float:none; margin-left:auto; margin-right:auto;}
   .notebox-mustard-right { float:none; margin-left:auto; margin-right:auto; width: 80%}
   .notebox-green-right { float:none; margin-left:auto; margin-right:auto; width: 80%}
   .notebox-blue { float:none; margin-left:auto; margin-right:auto; width: 80%}
   .notebox-green-edge { float:none; margin-left:auto; margin-right:auto; width: 80%}
   .notebox-blue-edge { float:none; margin-left:auto; margin-right:auto; width: 80%}
   .notebox-green { float:none; margin-left:auto; margin-right:auto;}
   .container { float:none; margin-left:auto; margin-right:auto;}
   .table { float:none; margin-left:auto; margin-right:auto;}
   .panel { width: 96%; margin-left: 0; margin-right: 5px;}
}