/*************************************/
/* WebShow Style Sheet. V4 template. */
/*************************************/
/* Body for top level (index) window */
body {font:90%/1.2 Arial,Helvetica,sans-serif;background-color:#456d91;margin:0;color:#1e394a;}
#wrapper {text-align:left;max-width:1000px;top:0px;margin-left:auto;margin-right:auto;}
#main {position:relative;max-width: 1000px;background-color:#fff; /*#dedef8;*/ }

/*  This template makes banner a class, not an ID.  */
.banner {position:relative;color:#0377b3;} /* Set text colour over picture */
.banner img {width:100%;}   /* display:block stops space under image */

p.version {text-align:right; font-size:12px; color:#888; font-style:italic; margin:0px;}
.small {font-size:0.8em;}
h1, h2, h3 {text-align: center; }
	
/* TEXT OVER IMAGE: Must be positioned and responsive. Code to centre below works provided text <50% of width
  of the banner - so reduce font size as window narrows. (Never found solution for text occupying >50% width) 
 Using bottom and right means caption text is in right position if banner height is different.  */

.txt1 {position:absolute;top:10px;left:50%;transform:translate(-50%);font-size:4rem;}  /* Center Top */
.txt2 {position:absolute; right:20px; bottom:10px; color:#ccc; font-size:0.8em;}  /* Bottom right*/	
@media screen and (max-width: 925px) { .txt1 {font-size:3rem;} }
@media screen and (max-width: 690px) { .txt1 {font-size:2rem;} }

/*--- tried alternative styles, none of which achieved the deisred result.   ------
	.txt1 p {position:absolute; width: 100%;text-align: center; /*display:table-cell;vertical-align:middle;  }
	.txt1 {position:absolute;top:10px;width:100%;} 
	.txt1 p {display:block;text-align:centre; margin:0 auto; font-size:2rem;} /* Text in <p> */

/* THUMBNAILS on initial window. Now in flex containers for V4.  NB flex-grow expands boxes to width available. */
/* These settings work fine with a Thumbnail height of 150 pixels.  Adjust for other settings.   */
.flexcentre {display:flex;flex-wrap:wrap;justify-content:center;margin:0px;width:100%;gap:12px;} 
.flexbox {padding-bottom:6px;background-color:#fefefe;}
.flexbox img {display:block;margin:auto; } 
.flexbox p {text-align:center;margin:0px;font-size:80%; }

/* PICTURE WINDOW - shows single large picture. Picture is in #picdiv occupies entire viewport. Initially hidden */
#picdiv {position:fixed; top:0px; left:0px; width:800px; height:600px; background-color:#233; display:none; }
#picdiv img {border:0px none;width:100%;display:block;} 
#fig1 {position:absolute; top:0px; left:0px; margin:0px; }
#fig2 {position:absolute; top:0px; left:0px; margin:0px; }
#picdiv figcaption {color:#fff;font:italic 10pt sans-serif;padding:3px;text-align:center;}
#buttons {position:absolute; top:5px; left:10px; width:120px; height:18px;  }  /* navigation buttons */
#buttons img {display:inline;width:18px;}
#buttons a {display:inline-block;}
#msgdiv {position:absolute; top:200px; left:200px; width:340px; height:80px; background-color:#aaa;  }
p.msg {margin:10px 0px 12px 5px; font-size: 18px; font-weight:bold; }  /* Pop up first time pic shown */

/*end*/