/* BFBI is designed to be just 860px wide.  On wide screens, such as a laptop,  "body" fills the screen left and right of this with a grey background. 
"div.overall" sets the pages as a maximum width of 860px with a white background. the colour red is a default which has the effect of highlighting text not properly formatted */

body {
 background-color: grey;
 text-align: left;
 font-family: "Times New Roman", Times, serif;
 font-size: 100%;
 padding: 0;
 margin-left:0;
 margin-right:0;
 margin-top:0px;
 border:0px  
}

div.overall{
 width:  100vw;
 max-width:860px; 
 height:auto; 
 background-color: white;
 border:0px; 
 margin:auto;
 color:red;
} 

/* div.firm sets the menu bar at the top as fixed at the top of the page */
div.firm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: midnightblue;
  width: 100%;
  max-width: 860px;
  margin: auto;
}

/* The next section of code is designed to suppor an earlier form of layout produced separtly for wide and narrow screens - still used in many pages */

.content-desktop {display: block;}
.content-mobile {display: none;}
.content-tablet {display: none;}
.images-desktop {display: block;} 

@media screen and (max-width: 500px) {
   .content-desktop {display: none;}
   .content-mobile {display: block;}
   .content-tablet {display: none;}
   .images-desktop {display: none;}
 }

@media screen and (min-width:501px) and (max-width:749px){
   .content-desktop {display: none;}
   .content-mobile {display: none;}
   .content-tablet {display: block;}
   .images-desktop {display: block;}
}



/* Thi section is for the header section fixed at the page top */
ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  overflow: hidden;
  background-color: midnightblue;
  font-family:Zurich Blk BT,Arial, Helvetica, sans-serif;
  width:100%;
  max-width:860px;
  font-size : 1.3em;
  }

li { float: left; 
     margin: 0px;
     padding: 0px;
     border: 0px; 
         }
 
li.c { float: center; 
     margin: 0px;
     padding: 0px;
     border: 0px;
     
         }
         
ul li a {
  color: white;
  text-decoration: none; /* optional: removes underline */
}

.li100 { Width:100px ;} 

.li150 { Width:150px ; }

.li170 { Width:170px ;margin: 0px;
  padding: 0px;
  border: 0px;}  
 
.li200 {  Width:200px ; } 
  
.li250 {  Width:250px ; }
 
.lineright {
float: left;
padding: 0;
background-color: blue;
color: maroon;
}

/* Headings in various sizes */

h1 {
  color: midnightblue;
  font-size : 2.5em;
  text-align: center;
  font-family:Zurich Blk BT,Arial, Helvetica, sans-serif;
  padding-top:17px;
}

h2 {
  color: midnightblue;
  font-size : 1.6em;
  text-align: center;
  font-family:Zurich Blk BT,Arial, Helvetica, sans-serif;
  margin-left: 50px;
  margin-right: 50px;
    } 
 
 h3 {
  color: midnightblue;
  font-size : 1.3em;
  text-align: center;
  font-family:Zurich Blk BT,Arial, Helvetica, sans-serif;
  margin-left: 50px;
  margin-right: 50px;
  }
  
h4 {
  color: midnightblue;
  font-size : 1.2em;
  text-align: center;
  font-family:Zurich Blk BT,Arial, Helvetica, sans-serif;
  }
  
h5{
  font-size: 1.15em;
  color: midnightblue;
  text-align: center;
  padding-top:0;
  padding-bottom:0;
  font-family:Zurich Blk BT,Arial, Helvetica, sans-serif;
}
 
 /* The next bit of code is intended to boost  rendering slightly when pages are viewed using Safari browser*/   
  html, body {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    font-size: 110%; }
    
 /* Paragraph variants */ 

  p {
    font-size: 1em;        /* base text = 16px equivalent */
	color: midnightblue;
    margin-left: 25px;
    margin-right: 35px;
  }

  p.big {
    font-size: 1.5em;      /* 24px equivalent */
    color: black;
    font-style: italic;
  }
  
  p.small {
    font-size: 0.75em;      /* 24px equivalent */
    color: green;
    font-style: italic;
  }

p.caption {
  font-size: 0.9em; color: crimson;
  font-style: italic;
  text-align: center;
  padding-top:0;
  margin-top:0;
}

 @media only screen and (min-width: 700px) {
p.caption {
  color: crimson;
  font-style: italic;
  
  text-align: center;
  padding-top:0;
  margin-top:0; } 
} 

.pinv{
  font-size: 1.15em;
  color: gainsboro;
  margin-left: 50px;
  margin-right: 50px;
}

.pf75 {
  font-size: 0.75em;
  color: maroon;
  margin-left: 50px;
  margin-right: 50px;
}

.p2em {
  font-size: 2.0em;
  color: maroon;
  margin-left: 5px;
  margin-right: 5px;
}

p.m50{font-size:1.15em; margin-left:50px; }

p.m75{font-size:1.15em; margin-left:75px; }
/*@media screen and (max-width: 500px) {
p.m50 {font-size: 1em; margin-left: 25px; margin-right: 25px;}
}*/

p.m100{font-size:1.15em; margin-left:100px; }

p.m125{font-size:1.15em; margin-left:125px; }
/*@media screen and (max-width: 500px) {
p.m50 {font-size: 1em; margin-left: 25px; margin-right: 25px;}*/

p.m150{font-size:1.15em; margin-left:150px; }

p.m175{font-size:1.15em; margin-left:175px; }
/*@media screen and (max-width: 500px) {
p.m50 {font-size: 1em; margin-left: 25px; margin-right: 25px;}*/


p.m75black{font-size:1.15em; margin-left:75px; margin-right:75px; color:black;}
@media screen and (max-width: 500px) {
p.m75 {font-size: 1em; margin-left: 40px; margin-right: 40px; color:black;}
}

p.green{color:green;}
p.50{color:green;}
p.g50 {color:green;margin-left:50px;}
/* .text-box {
  border: 1px solid black;
  padding: 10px;
  color:red;
} */



a.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a.dropdown {
  display: inline-block;
}

a.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: maroon;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

a.menu {
  color:white
}

.p80 {
  font-size: 1.15em;
  color: maroon;
  margin-left: 80px;
  margin-right: 80px;
}

@media screen and (max-width: 500px) {
.p80 {font-size: 0.85em; color: maroon; margin-left: 20px; margin-right: 20px;}
}
 
.pr10 {
  font-size: 1.0em;
  color: maroon;
  margin-left: 50px;
  margin-right: 10px;
}

.pr100 {
  font-size: 1.15em;
  color: maroon;
  margin-left: 50px;
  margin-right: 100px;
}



@media screen and (max-width: 500px) {
.pnote {   font-size: 0.75em;  color: blue;  margin-left: 20px;  margin-right: 20px;}
}

.PC {
text-align: center;
color: crimson; 
font-size: 0.9em;
font-style: italic;
}

@media only screen and (min-width: 700px) {
.PC {
text-align: center;
color: crimson; 
font-size: 1.1em;
font-style: italic;
}
}



.captionV {
  color: crimson;
  font-style: italic;
  font-size: 1em;
  text-align: left;
  padding-top:0;
  margin-top:0;
  justify-content: left;
}

@media screen and (min-width: 520px) {
.captionV {
  margin-left: 7%;
  margin-right: 12%;}
}

@media screen and (min-width: 650px) {
.captionV {
  margin-left: 10%;
  margin-right: 15%;}
} 


@media screen and (min-width: 750px) {
.captionV {
  margin-left: 15%;
  margin-right: 20%;}
}


.tab50 {
text-align: left 0px;
width: 760px; 
height: ;
margin-left:auto; 
margin-right: auto;
border: 0 ;
cellpadding: 0;
cellspacing: 0;
font-size: 1.15em;
text-color: maroon;
color: maroon; 
}
.table td{
width: 380px;
}
.textwrapR {  
float: right;
margin-left: 10px;
margin-right: 25px;
margin-top: 0px;
margin-bottom:5px;
display:
}

.textwrapL { 
clear: right;
float: left;
margin-left: 25px;
margin-right: 10px;
margin-top: 0px;
margin-bottom:5px;
}


.text-box {
  border: 2px solid #4CAF50;
  padding: 3px;
  margin: 3px auto;
  width: 90%;
  font-family: Arial, sans-serif;
  font-size: 0.75em;
  background-color: #f9f9f9;
}

.text-boxS {
  float: right;
  border: 2px solid #4CAF50;
  padding: 3px;
  margin: 3px auto;
  width: 300px;
  font-family: Arial, sans-serif;
  font-size: 0.75em;
  background-color: #f9f9f9;
}

.text-boxN {
align: center;
  border: 2px solid #4CAF50;
  padding: 3px;
  margin: 3px auto;
  width: 90%;
  font-family: Arial, sans-serif;
  font-size: 0.75em;
  background-color: #f9f9f9;
}

p.tablet {font-size:1.15em; margin-left:10px; margin-right:10px;}

.highlight {
    background-color: #fff2ac;
    background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
}

p.menubar {
 background-color:maroon; 
 border:0px;  
 padding:0px; 
 margin:0px;
 color: white;
}

p.quote {
  font-size: 1.15em;
  margin-left: 50px;
  margin-right: 50px;
  font-style:italic;
}

@media screen and (max-width: 500px) {
p.quote {font-size: 1em;  margin-left: 25px;
  margin-right: 25px;   font-style:italic;}
}

p.footnote {
  font-size: 0.8em;
  margin-left: 50px;
  margin-right: 50px;
  
}

a.foot{
  color: maroon; 
  font-weight:bold;
  position: relative;
  display: inline-block;
  border-bottom:  /*1px dotted black; If you want dots under the hoverable text */
} 
  
span.foot {
  color: red; 
  font-weight:bold;
  position: relative;
  display: inline-block;
  border-bottom:  /*1px dotted black; If you want dots under the hoverable text */
} 
sup.foot {
  color: red; 
  font-weight:bold;
  position: relative;
  display: inline-block;
  border-bottom:  /*1px dotted black; If you want dots under the hoverable text */
}