body	{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }

H1	{ font-size: 16pt;  color: #333399; }
H2	{ font-size: 14pt;  color: #333399; }

DT	{ font-size: 9pt;  font-weight: bold; }
DT.book	{ font-size: larger;  font-weight: bold; }

A.pdf	{ font-weight: normal; }

TABLE.reports   { font-size: 9pt;			}

DD.biblio	{ font-size: 9pt;			}
DD.summary	{ font-size: 9pt;  font-weight: bold;	}
DD.abstract	{ font-size: 9pt; 			}
DD.more		{ font-size: 9pt; 			}

P.smallprint	{ font-size: 7pt; 			}
P.smaller	{ font-size: 9pt;			}
UL.smaller	{ font-size: 9pt;			}

FONT.sub	{ vertical-align: text-bottom; font-size: smaller; }
FONT.sup	{ vertical-align: text-top;    font-size: smaller; }

TD.blue 	{ border-top: 5px #333399 solid;  background-color: #FFFFFF;    }
TD.blueshade	{ border-top: 5px #333399 solid;  background-color: #CCFFFF;	
		  border-left: 2px #333399 solid;  				}

TD.bluebox	{ border-top:  1px blue solid;  border-bottom: 1px blue solid; 
		  border-left: 1px blue solid;  border-right:  1px blue solid;
		  background-color: #EEFFEE;					}

/* ================================================================= 08-May-2020 layout change for phones */


DIV.bluebox { 
  border: blue solid 1px;
  background-color: #EEFFEE;
  padding: 5px;
  margin: 10px 0;
  float: right;
}

P.actions {
  margin: 0 0 20px 0;
  padding-left: 20px;
}


/* ============================= Sidebar ============== Was in Table; now done with DIVs. Handles phones. */

 
/* The sidebar is transparent, to let the colour of the underlying maintext show through. 
   This is because a coloured box would not extend the full height of the main text, unless
   we do a calculation based on the height of the main text. The maintext has to have width auto
   to prevent a blue bar on the right; so we either have to limit the width of the underlying DL
   or add an extra DIV specifically to control the width. this is DIV.restrictWidth
*/

DIV.navIcons SPAN IMG {
  vertical-align: middle;
  width: 24px;
  height: 16px;
  padding: 2px 10px;
  border: none;
}

DIV.anchorSidebar {
  position: relative;			/* to anchor the left sidebar*/
  background-color: #EEFFEE; /*lightCyan;		/* to shade the sidebar */
  border-top: 3px solid #333399; /*blue; */
  border-bottom: 1px solid #333399; /*blue; */
}

DIV.sidebar {
  box-sizing: border-box;		/* move this to "all items" later in development */
  position: absolute;
  width: 233px; 
  padding: 10px; 
  top: 0;
  left: 0;
  background-color: transparent;	/* to let DIV.anchorSidebar's colour show through */
}

DIV.navIcons {
  margin-top: 10px;
}

DIV.navIcons SPAN {			/* format the icons */
  display: block;
}

/* ============================= Main Text ============ Was in Table; now done with DIVs. Handles phones. */


DIV.mainText {
  box-sizing: border-box;		/* move this to all items later in development */
  max-width: auto; 			/* was 900px, but moved that to DL or DIV.restrictWidth definition below. */
  border-left: 3px solid #333399; /*blue; */
  padding: 10px 10px 10px 30px; 
  margin-left: 233px; 
  background-color: white;		/* to prevent DIV.anchorSidebar from showing through */
}

H2.listingTitle {
  font-size: 2em;
}

/* DL { max-width: 770px; } */

DIV.restrictWidth {
  max-width: 770px; 
}


/* =============================== VARIATIONS FOR PHONES ================================================ */


@media only screen and (max-width: 800px)
{
  DIV.navIcons SPAN {
    /* display: inline-block;			### not sure whether to do this or not */
    white-space: nowrap;
    padding-right: 20px;
  }

  DIV.anchorSidebar {
    position: relative;                 /* to anchor the left sidebar*/
    border-top: none;
    background-color: white;		/* because we dont want to apply colour to full screen width via DIV.anchorSidebar */
  }
  
  DIV.sidebar {
    display: block;
    position: static;
    margin: auto;
    border: 1px solid #333399; /*blue; */
    padding: 10px; 
    margin-bottom: 20px;
    background-color: #EEFFEE; /*lightCyan;	/* apply color here instead of via DIV.anchorSidebar */
  }
  
  DIV.mainText {
    border-top: none; 
    border-left: none; 
    padding: 10px; 
    margin: 0px; 
  }
  
  DIV.maybeHide {
    display: none;
  }
}

/* =============================== Additional central-blue-outline-box info on contents pages ======= */

DIV.biblio_rubric {
  text-align: left; 
  max-width: 700px; 
  border: 1px blue solid;
  padding: 5px;
  background-color: #EEFFEE;
}

P.biblio_rubric {
  margin: 5px; 
  padding: 0px;
}


/* =============================== Additional formatting  added 1-Mar-2022 ================== */

.highlighter {
  background-color: yellow;
}