/* CSS for BCRA pages. Copyright (c) 2015 David Gibson. No licence should be inferred. */

/*---------- MSIE defaults to border=1 for <A> elements --- 
  However cannot use A>IMG { border-width: 0; } to solve the problem, generally, because
  ">" is not understood unless there is a DOCTYPE and BCRA legacy pages do not have the 
  correct DOCTYPE. So, rather than strip off ALL borders of IMG tags, we must ensure 
  that tags have correct BORDER attributes or style settings.
  As the web site is revised, these inconsistencies must be cleared up.
*/


IMG.img_covers {	/* used in covers.html, covers.php */
  border: blue solid 1px; 
  width: 200px;  height: 283px; 
  margin: 8px; 
}

SPAN.latest_item {	/* used in covers.html, covers.php */
  position: absolute; 
  background-color: #00FF00; 
  color: black; 
}

SPAN.issue_number {	/* added 20-Jan-2024 in similar style to  SPAN.latest_item		*/
  position: absolute; 
  background-color: cyan; 
  color: black; 
}

IMG.supplement {		/* used in covers.html, covers.php */
  position: absolute; 
}

IMG.layman {			/* used in covers.html, covers.php */
  position: absolute; 
}

SPAN.download {		/* used in covers.html, covers.php */
  position: absolute; 
  background-color: mistyrose; 
  color: black; 
}        
        
SPAN.outOfPrint {	/* used in covers.html, covers.php */
  position: absolute; 
  background-color: orange; 
}

SPAN.shortTitle {	/* used in covers.html, covers.php */
  position: absolute; 
  margin-auto;
  background-color: white;
  opacity: 90%;
  color: black; 
}

SPAN.latest_item 	{ bottom: 100px;	left: 10px;	padding: 5px; 	margin: 5px; 	border-radius: 5px;	}
SPAN.issue_number 	{ bottom: 0;		left: 0px;	padding: 2px;	margin: 5px;  	border-radius: 5px;	}
IMG.supplement 		{ bottom: 4px; 		left: 110px; }	
IMG.layman 		{ bottom: 8px; 		left: 90px;	height: 13px; 	width: 13px;	}
SPAN.download 		{ bottom: 270px;	left: 0px;	padding: 5px; 	margin: 5px; 	border-radius: 5px;	}
SPAN.outOfPrint 	{ bottom: 100px; 	left: 10px;	padding: 5px; 	margin: 5px; 	border: black solid 1px;
												border-radius: 0.5vw; }
SPAN.shortTitle 	{ bottom: 20px; 	left: 15px;	width: 180px; 	padding: 3px;  	border: black solid 1px; }

/* added 09-Jun-2024
We adopt the position that, on smaller screens (e.g. phones), it is an inconvenience to have to do so much scolling
so, instead of the images being 200px wide, they are 19vw wide instead. Other measurements scaled accordingly.
Also we do not show latest_item, download, outOfPrint and shortTitle
*/

@media only screen and (max-width: 800px) {

IMG.img_covers {
  width: 19vw;  height: auto; 
  border: crimson solid 0.1vw; 
  margin: 0.8vw; 
}

/* px measurements are relative to image width of 200px which, now, is 20vw so, if 200px = 20vw, 1px is 0.1vw */

SPAN.latest_item	{ display: none;
			  bottom: 10vw;		left: 1vw;	padding: 0.5vw; margin: 0.5vw; 	border-radius: 0.5vw;	}
SPAN.issue_number 	{ bottom: 0vw;		left: 0vw;	padding: 0.2vw;	margin: 0.5vw;  border-radius: 0.5vw;	}
IMG.supplement 		{ bottom: 0.4vw;	left: 11vw; }	
IMG.layman 		{ bottom: 0.8vw;	left: 9vw;	height: 3vw; 	width: 3vw; /* larger than scale would have it */	}
SPAN.download 		{ display: none;
			  bottom: 27vw;		left: 0vw;	padding: 0.5vw; margin: 0.5vw; 	border-radius: 0.5vw;	}
SPAN.outOfPrint 	{ display: none;
			  bottom: 10vw; 	left: 1vw;	padding: 0.5vw; margin: 0.5vw; 	border: black solid 1px;
												border-radius: 0.5vw; }
SPAN.shortTitle 	{ display: none;
			  bottom: 2vw; 		left: 1.5vw;	width: 18vw; 	padding: 0.3vw;	border: black solid 0.1vw; }


} /* end of media definition */


H4.sequence { 		/* used on page titles - mapping the page sequence */
  font-size: 14pt; 
  font-weight: normal;
  margin: 0.5em 0 0.5em 5px;
}

/*---------- banner across top of all pages ------------------- */

TABLE.header {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  padding: 0;
  background-color: #CCFFCC;
  font-size: 9pt;
  color: black;
}

  /* MSIE test 
  border: red solid 3px;
  margin: 0; */

TD.header {
  border-top: lime solid 2px;
  padding: 5px 5px 3px 5px; 
  text-align: left; 
  vertical-align: bottom;
  white-space: nowrap;	/* so header copes with narrow screens a bit better. 
  			   NB the central column in the header table now occupies two
  			   rows, one right-aligned and one left aligned */
}

TD.header2 {
  padding: 0;
  background-color: #EEEEFF; 
  border-top: lime solid 2px;
  /* border-bottom: lime solid 1px; */
}

TABLE.header INPUT {
  vertical-align: bottom;
}

/* ---------- tooltip display ------------------------------ */

SPAN.tooltip {
  background-color: #FFFFDD;
  border: darkOrange solid 1px;
  box-shadow: 5px 5px 5px grey;
  max-width: 50%;
  text-align: left;
  font-family: sans-serif;
  font-size: 9pt;
  color: black;
  padding: 1px 5px 1px 5px;
  position: fixed;		/* See notes in tooltip, regarding positioning problems */
  z-index: 1;			/* So elements lie on top of menu, which is
  				   TABLE.menu TD { position: relative; }. This might be
  				   because 'relative' starts a new 'Stacking Context'
  				   but ??? */
}


/* ---------- pop-up menu items ---------------------------- */

/* MSIE without a Doctype (legacy BCRA pages) wont do this, because we cannot separate
   the borders. I wrote some alternative code (now in header-archive.css) but that
   looks awful on screens that need to wrap the table cell contents, so stick with what
   we've got. */
   
/* TABLE ITEMS NO LONGER USED (?)   */
   
TABLE.menu {
  border-collapse: separate;
  border-spacing: 5px 10px;
}

TABLE.menu TD {
  padding: 8px;
  border: navy solid 1px;
  border-radius: 6px;
  background-color: navy;
  font-size: 11pt;
  align: center;
}

TABLE.menu TD {
  position: relative;  	/* this is the parent element to UL.menuList, and is NOT positioned STATIC
 			   therefore it allows UL to position relative to this element */
}

TABLE.menu A {
  color: white;
  font-weight: bold;
  text-decoration: none;  /* i.e. no underline */
}

TABLE.menu A:hover {
  text-decoration: none;  /* i.e. no underline */
  background-color: blue;
}


/* LIST ITEMS FOR MENU BUTTONS */ 

UL.menuList {
  list-style-type: none;
  position: absolute;
  top: 30px;
  display: none;	  /* this is toggled by JS */
  z-index: 10;
  padding: 5px 5px;
  white-space: nowrap;
  background-color: grey;
  left: 0;
  right: auto;
  opacity: 0.9;		  /* over-ridden by JS fading routines  */
  filter: alpha(opacity=90);	/* for IE 8 */
}
		/* There is a problem with the LI elements. Until the whole BCRA site is 
		reorganised, the index.css style sheet has to be loaded AFTER this style sheet,
		and so LI styles are being superseded. Work-around is to modify style definitions
		in index.css */

UL.menuList LI {
  background-color: transparent;
  padding: 5px;
}


UL.menuList LI A {
  font-size: 11pt;
  color: white;
  font-weight: normal;
  padding: 3px 6px;
  border-radius: 5px;

}

UL.menuList LI A.firstListItem {
  font-size: 12pt;
  color: #FFFFDD;
  font-weight: bold;
}
  

UL.menuList LI A:hover {
  text-decoration: underline;
}

/* currently not used */
DIV.searchBox {
  border: 5px white solid; 
  box-shadow: 6px 6px 12px grey;
  padding: 10px; 
  background-color: #EEEEEE; 
  width: 300px;
  display: none;
  position: absolute;
  right: 0;
  top: 40;
  z-index: 10;
  text-align: left;
  overflow: visible;
}


/* ---------- new-style Page Header and Menu buttons ---------------------------------------------- */


DIV#banner {
  /* border: red solid 1px;  /* ##### */
  margin-bottom: 0px; 
  background-color: #BBFFBB; 
  font-size: 9pt; 
  border-top: lime solid 2px; 
  padding: 2px 10px 0 5px; 
  text-align: left; 
  vertical-align: bottom; 
}

DIV#bannerText {
  font: small-caps 2em serif;
  margin: 2px 0 5px 5px;
}

DIV.bannerCell {
  /* border: red solid 1px;  /* ##### */
  display: inline-block;
  vertical-align: bottom;
  width: auto;
  background-color: #E0FFE0; 
  padding: 5px;
  margin: 0 10px 10px 0;
}

SPAN.mainMenuIcon {			/* added 05-May-2020  */
  float: right;
  padding: 6px 8px 8px 8px;
  margin:24px 15px 0px 0px;
  border: navy solid 1px;
  border-radius: 6px;
  background-color: navy;
  color: white;
  font-size: 16pt;
  cursor: pointer;
}

DIV#menuButtonBG {
  background-color: white; /* #CCFFCC; */
  margin-bottom: 10px;
}

DIV.menuButton {
  display: inline-block;
  vertical-align: top;
  width: auto;
  margin: 10px 2px 0px 2px;
  padding: 8px;
  border: navy solid 1px;
  border-radius: 6px;
  background-color: navy;
  font-size: 11pt;
  align: center;
  position: relative;  	/* this is the parent element to UL.menuList, and is NOT positioned STATIC
 			   therefore it allows UL to position relative to this element */
}

DIV.menuButton A {
  color: white;
  font-weight: bold;
  text-decoration: none;  /* i.e. no underline */
}

DIV.menuButton A:hover {
  text-decoration: none;  /* i.e. no underline */
  /* background-color: blue; removed 23-Sep-2022 due to a customer confusing this with a hyperlink */
}

/* ---------- new-style info list on home page - doesnt use a table ---------------- */


DIV.wasTable {
  background-color: #EEFFEE;
  padding: 20px 10px 0px 10px;
  margin-bottom: 20px;
  /*   border: yellow solid 1px; */
}

UL.info_list {
  list-style-image: url(graphics/info-w16.png);
  list-style-position: outside;
  margin: 0px;
  /*   border: green solid 1px; */
}

UL.info_list LI {
  padding: 0px 0px 10px 0px;
  margin-left: -15px;
  /*   border: red solid 1px; */
}



/* -------------------------------- columns ---------------------------------- */

/* attempts to put text into columns

The BCRA news items are laid out in a table, using CSS elements named as pseudocells. That is, 
we do not actually use multiple <TD>s but we format the text as if it were in cells. To force
a new column, I inserted a </TD><TD> string via PHP, depending on the query string. That was fine
for testing, but for live use, it needs JavaScript. JS reads the body width and decides whether
to document.write a table cell boundary. Obviously that is not dynamic, and it is difficult to 
make it so.  BUT CSS code is emerging. So try... */


/* specify five columns of minimum width 350px; */

DIV.multiColumns {
  -webkit-columns: 	350px 5; /* Chrome, Safari, Opera */
  -moz-columns: 	350px 5; /* Firefox */
  columns: 		350px 5;
  margin: 0 20px;
}

/* dont break inside the original "pseudo-cells"  */

.keepTogether {
  -webkit-column-break-inside:	avoid; /* Chrome, Safari, Opera */
  page-break-inside: 		avoid; /* Firefox */
  break-inside: 		avoid; /* IE 10+ */
}

/* --------------------------------- changes to BODY in 2020 ----------------- */


DIV.wasTableNowSetMaxWidth {		/* changes to quickly remove some tables to provide better access on phones */
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: honeydew;
}


/* --------------------------------- superscript and subscript 2020 ----------------- */

/* realised 28-aug-2020 that the styles were not being picked up from biblio database files */

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

/* style for online supplement */

.supplement {
  /*
  font-style: italic; 
  font-weight: bold; 
  text-decoration: underline; 
  color:green;
  */
}

/* --------------------------------- cregj biblio comments 24-feb-2022 ----------------- */

/* the formatting we can apply is limited, because comment spans are inside DD tags 
   and because a final full-stop is appended to the text. Thus the only way to senibly put a space
   before a comment is to format a <p> tag to appear before the comment
*/

span.comment {
  font-weight: normal; 
  color: green;
  font-style: italic;
}

p.comment {
  /* background-color: yellow; */
  margin: 0;
  line-height: 0.5em;
}

/* --------------------------------- cks biblio, added 24-Dec-2023 ----------------- */

span.fileNote {
  font-weight: normal; 
  color: chocolate;
  font-style: italic;
}