/*  RESPONSIVE STYLE SHEET.  For BB "Web" Apps.  (August 2023)    */
/*  STYLES FOR THE BODY AND CONTAINERS    NB - inceasing the width to max of 1000 */
body {font:90%/1.2 Arial,Helvetica,sans-serif;margin:0 0 10px 0;
background-color:#c4d7c3;}  /* #fbf5e9 */
#container {margin:auto;width:auto;max-width:1000px;padding:0px 0px;background-color:#fff;}
#content {padding:0px 10px;clear:both; }
#header {width:100%;position:relative;}
#header img.fullw {width:100%;display:block;}  /* display:block stops space under the image */
#header div.txt {	position:absolute;top:6px;width:95%;text-align:right;color:#68F;font-size: 1.3em;}

#popup {  /* Style for "Advanced search" Popup. */
	display: none;   /* don't show initially */
	position:absolute; left:350px; top:150px; width:360px; 
	border:solid black 1px; padding: 0 10px 10px; background-color:#f0f0e0; 
	text-align: justify; font-size: 12px; 
}	

#close{display:block;float:right;margin-right:-10px;
    /* width:30px; height:29px; background:url(http://digitalsbykobke.com/images/close.png) no-repeat center center; */
}	

#search {display:block;float:right;font-size:0.9em;margin:0px 10px;}
/* border-bottom: 1px solid #cccccc; padding: 5px 0px 8px 10px; font-size:12px; color:#fff; } */
#search form { margin: 0px; padding: 0px;}
/* #search label { margin:0px; padding:0px; display:block; }   */

#admin { /* Used for Content for the admin functions */
	 margin: 0px 10px 10px 10px; 
	 padding: 10px; /* remember padding is the space inside the div box and margin is the space outside the div box */
	/*border: 1px solid #ffffff; */
} 

table.eform  {  /*  Used for the edit-user table. */
	background-color:#bad2e8;     /* sky blue = sets "cell border" colour, as cells have own background. */
  empty-cells:show; 
	margin:2px auto;
}
#editformdiv  td { background-color:#ffe; font-size:13px; padding-left:4px;}
#editformdiv .info  {font-size:11px; color:#777;text-align:center; margin:5px;}



/* This division is used for the description and comment */
#description { position: relative; }

#helpdiv { font-size:11pt; } /* Make font a little smaller in the help and release history.*/
#helpdiv h2 {margin-top:40px;margin-bottom:1px;}  
#helpdiv dl {width:100%;overflow:hidden;padding:0;margin:0; }
#helpdiv dt {float:left;width:15%;} /* adjust width; make sure total of both is 100% */
#helpdiv dd {float:left;width:85%;padding:0;margin:0 0 10px 0px;} /* " */

#footer {background-color:#3e603b;clear:both;text-align:center;font-size:90%;color:#fff;padding:6px 0px;}
#footer a {color:#fff;padding:0px 10px;}

#search {/* border-bottom: 1px solid #cccccc;*/ padding: 10px 0px 5px 0px; font-size:12px; color:#14547e; }
/* #memsearch {width:290px; margin: -5px 0px 6px 520px; border:1px solid #aaa; padding: 2px 0px 3px 8px; font-size:12px; color:#14547e;} */

/* div to hold search form */ 
#memsearch {display:block;float:right;width:240px; margin-bottom:4px;
     border:1px solid #aaa; padding: 2px 0px 3px 8px; font-size:12px; color:#14547e; z-index:1;}
		 
/*----Style to turn links into buttons with a border.---Used in reports.php  -----*/
/* Turn link into button that floats left. */
a.lnkbut {font-size:10pt;font-weight:bold;color:#14547e; 
  display:block;float:left;  /* So I can add more buttons on the same level */
	text-align:center; border:solid 1px #222; background:#ccc; 
	text-decoration:none;	padding:4px 10px; margin-right:16px; margin-bottom:6px; margin:0px 16px 6px 16px; }
	
/* Button: Make it look same as a lnkbut. Floats right */	
.but2 {font-family:Arial,Helvetica,sans-serif;color:#14547e;font-weight:bold;font-size:13px;display:block;float:right;   
	text-align:center; border:solid 1px #222; background:#ccc; 
	text-decoration:none;	padding:4px 10px; margin-right:30px;}	
	
a.lnkbut:hover, .but2:hover { color:#fff; background-color:#14547e; }			 

#login { 
	margin: 0 0 0 156px;  /* this goes above maincontent */
	color: #384550;
	padding: 2px 1px 1px 0px; /* remember padding is the space inside the div box and margin is the space outside the div box */
	font-size: 12px; 
} 

#login p.loginlinks {margin:0px 20px 0px 0px; text-align:right;}
#login a  {color: #14547e }  /* Links like "login, register etc. */
#login .lbut {margin-left:20px; } /* For the links */ 

/* Header styles  */
h1,h2,h3 {font-weight: bold;color:#14547e;font-family:Arial, Helvetica, sans-serif;}
h1 {font-size: 22pt; text-align:center; margin: 10px;}
h3 {margin-bottom:8px;}

/* FLEXBOX FOR BACKUP TABLE AND EMAIL CONTACT BUTTONS: Uses justify-content option. Used for link buttons that are neatly laid out */
div.flexcentre {display:flex;flex-wrap:wrap;justify-content:center;}
div.flexcentre .butsmall { background-color:#ccc; border: 1px solid #222; padding:4px 8px;margin:6px 20px;}
div.flexcentre .linkbut { font-size:10pt;font-weight:bold;color:#14547e;border:solid 1px #222;
   background:#ccc;text-decoration:none;padding:4px 10px;margin-right:16px;margin-bottom:6px; }
div.flexcentre .linkbut:hover { color:#fff; background-color:#14547e;}	

/* Box with border to hold buttons. */
div.butbox {border:solid #446 1px;max-width:660px;margin:auto;background-color:#f4faff;}
div.butbox span {text-align:center;display:block;margin:2px;}

/*--MESSAGES:--*/
.msg {font-weight:bold; color:#44f; }
.error {font-weight:bold; color:#C00;}
.red {font-weight:bold; color:#f00;}
.txt10 {font-size:10pt;}
.ctr {text-align:center;}
span.hdr {font-weight:bold;font-size:14pt;color:#14547e;margin:0px 30px 0px 90px;}
p.error {font-weight:bold; color:#C00;}
p.tiny {	font-size:9pt;}
p.small {font-size:9pt;}
p.compact {MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;}
p.updated {font-size:10px;color:#888;text-align:right;margin:0px;}

#msgbox { 
	padding: 2px; 
	color:#f00; background-color: #ffffa0; 	
	margin-bottom:10px;
	text-align:center;
	font-size:15px;
	border: 1px solid #000;
} 

#sidebar ul { margin:0px;padding:0px;list-style-type:none;}
#catLinks { border-bottom: 1px solid #cccccc; margin:0px; padding:0px; position:relative;font-size:16px;}
#catLinks a {color:#14547e;text-decoration:none;border-top:1px solid #cccccc;padding:3px 0px 3px 5px; display:block;font-weight: bold;}
#catLinks a:hover { color:#fff; background-color:#14547e; }

#links table {font-size:0.9em;background-color:#efe;text-align:center;border-collapse:collapse;margin:auto;}
#links td,th,caption {padding:4px 4px;border:1px solid #66a;}
#links th {background-color:#ddd;}

#links { color:#14547e;margin:0px; padding:0px; position:relative; font-size:14px;}
#links a {color:#14547e;text-decoration:none;padding:0px 0px 0px 0px; display:block;}
#links a:hover { color:#fff; background-color:#14547e; }
#links h3 { margin: 16px 5px 2px 0px;font-size:14px;   }
#links hr { color:#14547e; background-color: #14547e; height: 1px; }

/*--- Styles for main Membership table (used in script contacts.php) ---*/
/* The button1 div should not affect the page layout - it is either there or not! */
/* #memcontrol { position:relative;	}  /* DIV memcontrol is relative position to lock button1 inside it. */

#memcontrol .button1 { 
   position:absolute; 
	 top:5px; left:10px; 
	 width: 150px;  
	 background-color:#ccc; /* #b3bfc9; */
	 border: 1px solid #222;
	 text-align:center;
}
#memcontrol .button1 a {font-weight:bold; color:#14547e; text-decoration:none; padding:0px; display:block; }
#memcontrol .button1 a:hover { color:#fff; background-color:#14547e; }
#memcontrol .button2  { position:absolute; top:5px; font-size:70%; left:400px; width:100px; color:#158; text-decoration:none;padding:0px; display:block; }

/* Styles for the "member table" - actually used in several places. Centres the table, stripes rows. */
.memtable {font-size:10pt;}  /* Tables go in this DIV. Then use descendent selectors. */
.memtable table {margin:auto;empty-cells:show;border-collapse:collapse; border:1px solid #000; }
.memtable th {background-color:#ccc;font-size:13px; border:1px solid #000;padding:2px;}
.memtable td {font-size:12px;border:1px solid #000;padding:2px;}
.memtable a  {color: #149 }  /* colour of the email links */
.memtable tr {background-color: #ffffe8; }      /* Zebra striping */
.memtable tr:nth-of-type(odd) {background-color: #fffff8; }  /* Zebra striping */



/*-----BUTTON CLASSES-------*/
input.emp {  /* Emphasised submit button */
  background-color: #ff8;
  color: #800;
  font-weight: bold;
  font-size: 120%;
	margin:0px 40px 10px 12px;
}

input.norm { margin-left:24px; }



.small {font-size:0.8em;}
.red {color:#f00;}
.req {color:#f00;font-weight:bold;} /* Required field */
.ctr {text-align:center;}
p.note {font-size:0.8em;color:#026095;margin:2px 0px 0px 0px;} /* Palette - navy */

h1 { text-align:center;}
ul.notes {list-style-type:none;margin:5px;padding:0px;} 
ul.conds {margin:0px 5px;padding:5px;} 

p.box1 {font-size:15px; color:#1a2780;/* #37a;*/ margin:5px;} 
p.updated {text-align:right;font-size:0.7em;color:#555; margin:2px 5px 0px 0px;}
p.links {font-size:0.9em;margin:3px 0px 0px;text-align:center;}
p.notes {font-size:1.1rem;font-weight:bold;margin:24px 0px 0px 0px;}

/* STYLES FOR IMAGES */
.imgrvs p,.imgrs p,.imgrm p,.imglm p,p.caption {font-family: Verdana,Arial,sans-serif; font-size:0.8em; color:#0040E8; margin:3px; text-align:center;}

/* V.small image (150 px wide) floated right. No media query.  */
.imgrvs {float:right; margin: 6px 0px 0px 10px; padding:0px;}
.imgrvs img {width:150px;}

@media screen and (min-width:500px) { 

/* Small image (350 px wide max) floated right  */
.imgrs {float:right; margin: 6px 0px 0px 10px; padding:0px;}
.imgrs img {width:350px;}

/* Medium image (450 px wide) floated right  */
.imgrm {float:right; margin: 6px 0px 0px 10px; padding:0px;}
.imgrm img {width:450px;}

/* Medium image (450 px wide) floated left  */
.imglm {float:left; margin: 6px 10px 0px 0px; padding:0px;}
.imglm img {width:450px;}

/* Large image (used for plans. */
.imgcl {width:100%; margin:0; Padding:0; margin:auto;} /* Image - centre - large. */
	
}

@media screen and (max-width:499px) { 
/* Image resized to fill width. */
.imgrs {margin: 10px 0px 0px 0px;}
.imgrs img {width:100%;}
}
@media screen and (max-width:550px) { 
.imgrm {margin: 10px 0px 0px 0px;}
.imgrm img {width:100%;}
}

@media screen and (max-width:680px) {
.imgcl img {width:100%;} 
}

/* STYLES FOR NAV BAR */
#nav ul {list-style: none; padding:0; 
    margin:0; /* *BB Remove space between header and nav. */
	 }
#nav a, #nav a:hover {text-decoration: none;}

#nav {position: static;	margin:0;	width: 100%; }

#nav > a {display:none;}  /* Child selector: Selects any <a> which is a CHILD of #nav */
#nav li {position:relative;}

#nav li a {
	color: #fff;
	display: block;
}
#nav li a:active {background-color:#070 !important;}

#nav span:after { /* Add triangle using border */
	width:0; height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #eee;  /* Colour of triangle */
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
}

/* LEVEL 1 */
#nav > ul {
	height: 2.6em; /* 60 */
	background-color:#3e603b; /* [orig #c55240;] Not a49900 */
}

#nav > ul > li {	
	width:16.67%;  /* 6 elements = 16.67% - for browsers that don't support calc */
	width:calc(100%/6);
	height:100%;
	float:left;
}

#nav > ul > li > a {
	height: 100%;
	font-size: 1.3em; /* 24 */
	line-height: 2.0em; /* 60 (24) */
	text-align: center;   /* This centres the Level 1 menu text. */
}
#nav > ul > li:not( :last-child ) > a {
	border-right: 2px solid #666; /* [1px ] */
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
	background-color: #2e502b; /* slightly darker on hover [#b54230] */
}
/* second level */

#nav li ul {
	background-color: #3e603b;  /* Original [c55240] [#444] */
	display: none;
	position: absolute;
	top: 100%;
}
#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul {
	left: -1px;
}
#nav li ul a {
	font-size: 1.1em; /* 20 */
	border-top: 1px solid #3e603b; /* [#333;] */
	padding: 0.8em; /* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
	background-color:#2e502b;    /* Prev b54230 /* [#333;] */
}

/* Styles for flex boxes. */
.flexcentre {display:flex;flex-wrap:wrap;justify-content:center;margin:0px;width:100%;}
.flexcentre .butsmall {background-color:#ccc;border:1px solid #222;padding:4px 8px;margin:6px 0px;}
.flexbox {background-color:#f8dda6;margin:5px;border:2px solid #277568;width:28%;border-radius:10px;
          padding:5px 10px;  } /* Modify box for flex example. */ 
h2.flexbox {margin:2px;}					

/*------- Style for new adaptive form.  August 2023. Adapted from Havards. ----------*/
 /* Form styles: Used to have max-width:800px; Used to say width:96%; Better without. */
 form.fm1 fieldset {border:2px solid #888;padding:6px 12px;border-radius:5px;}
 form.fm1 div {float:left;width:235px;padding:0 0 5px 0px;min-height:45px;}
 form.fm1 div.w1 {width:180px;}
 form.fm1 label {font-size:0.8em;color:#567;}
 form.fm1 input[type="text"]  {width:94%;}
 form.fm1 input[type=text].w1 {width:60%;}  /* Narrow input box (c. 50% of double cell) */
 form.fm1 input[type=text].w2 {width:25%;}  /* Very narrow input box  */
 form.fm1 textarea {font-family:Verdana;font-size:13px;width:94%;height:5em;}  /* Fill 95% of container.  About 5 lines */
 form.fm1 .small {font-size:0.8em;} 
 form.fm1 .box {display:block;border:1px solid #888;float:left;padding:2px 10px;}  /* Used to box in the categories. */
 form.fm1 .check {width:auto;padding:0px;padding-right:14px;}
 form.fm1 input.big {width:25px;height:25px;}  /* For larger checkboxes */

.clearfloat {clear:both;}
.subbutton { /*background-color:#ff8; */ 
   display:block;margin:10px auto;width:160px;font-size:1.2rem;}
	 
	 
/* DIV TO LIST LOG FILES IN MONOSPACED FONT. Lines flow with indent. Each line must be in a paragraph. */
.monospace {
  font-family:Consolas,monospace;
	font-size:0.9em;	
	margin-left:3em;
	text-indent:-3em; }

.monospace p {margin:0;} 
	 


/*****************************************************************/
/* RULES IF SCREEN < 640 pixels wide                             */
/*****************************************************************/
 @media only screen and ( max-width: 34em ) /* 500  30em = 464px */ {
html {
	font-size: 80%; /* 12 */
}

body {background-image:none; background-color:#fff; margin:0; }
p.updated {display:none;}


#nav {
	position: relative;
	top: auto;
	left: auto;
}
#nav > a {
	width: 3.125em; /* 50 */
	height: 3.125em; /* 50 */
	text-align: left;
	text-indent: -9999px;
	background-color: #333;
	position: relative;
}
#nav > a:before, #nav > a:after {
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
}
#nav > a:after {
	top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
	display: block;
}

/* first level */

#nav > ul {
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}
#nav:target > ul {
	display: block;
}
#nav > ul > li {
	width: 100%;
	float: none;
}
#nav > ul > li > a {
	height: auto;
	text-align: left;
	padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
	border-right: none;
	border-bottom: 1px solid #444;
}
/* second level */

#nav li ul {
	position: static;
	padding: 1.25em; /* 20 */
	padding-top: 0;
}
}


/*-------Rules for printing - hide anything with class noprint.-------------*/
@media print {    
  .no-print, .no-print *  { display: none !important; }
}