/**********************************************************/
/* Style sheet for Cambrian Centre Management system      */
/**********************************************************/
body  {
  font-family: Arial, Helvetica, sans-serif;
	background-color: #bad2e8;  /* Based on "Planets" palette http://www.colourlovers.com/palettes/new/all-time/meta?page=4 */
	margin:0px;        /* zero margin/padding of body element to account for differing browser defaults */
	padding:0px;
	text-align:center; /* Center container for IE 5. Then set text left aligned in #container selector */
}
#container { 
	width: 980px;  /* Designed for smartphones */
	background-color: #b3bfc9;  /* #b3bfc9  Was #EBEBEB */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* override "text-align: center" on body element */
}
#header { position:relative;  /* Make header relative to lock text in position */
	background-image:url(../images/cms-banner.jpg);
  /* background-repeat:no-repeat; */
  height:70px;	
	padding: 0px;  /* Padding matches the left alignment of elements in divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
#header .bannertxt {
	position:relative;
	top:20px; left:40px;
  margin:0;	
	font-size:28px;
	text-align: center;
  font-weight: bold;
	color: #00f; 
}
#sidebar {
	float: left; /* element is floated, so width must be given */
	width: 118px; /* actual width, in standards-compliant browsers, or standards mode in IE will include the padding and border in addition to the width */
	background-color: #b3bfc9; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 2px 0px 10px 4px;
 }

/* Create styles for a separator in the menu, with centered text---------*/
p.divider {text-align:center;border-bottom:2px solid #14547e;line-height:0.1em;margin:8px 0px 6px;}
p.divider span {font-weight:bold;font-size:0.8em;color:#14547e;background-color:#b3bfc9;padding:0 2px;} 
 
#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;}

#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;}


#mainContent { 
  position:relative;  /* To allow popup div to float with content. */
	float:right;
	width:834px;
	padding: 1px 10px 10px 10px; 
	background-color: #FFFFFF; 
} 


#popup {  /* Style for "Advanced search" Popup. */
	display: none;   /* don't show initially */
	position:absolute; left:300px; top:140px; 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; */
}	



#mailContent { 
  margin: 0 auto; /* center this div */
	width:860px; /* *BB: 240816 Make responsive? NO point, as CMS is not responsive. */
	padding: 2px 20px; 
	background-color: #FFFFFF; 
} 

#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; */
} 

/* 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 { 
  height: 20px;
	padding: 4px;  /* padding matches left alignment of elements in divs above it. */
	background-color: #b3bfc9; 	
	text-align:center;
	font-size:13px;
} 
#footer a  {color: #14547e }  /* Links like "login, register etc. */
#footer .version  {float:right;font-size:10px;color:#444; padding:0 5px;} /* version at bottom of footer */


.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* class for a div or break element; should be final element before close of a container that should fully contain a float */
	clear:both;height:0;font-size:1px;line-height:0px; }

img.floatright { 
    float: right; 
    margin: 10px; 
}

img.floatleft { 
    float: left; 
    margin: 30px; 
}

/*--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;}
.medium {font-size:10pt;}  /* Medium size text. */
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;}
.small {font-size:0.8em;}  
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 { 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: 20px 5px 2px 0px;font-size:14px;   }
#links hr { color:#14547e; background-color: #14547e; height: 1px; }


/* 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;}	


/*-----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; }


/* Class for text input */
.text1 {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 30px 0px;
	border: 0;
	padding:0px;
	}


/* Class for buttons */
.but1 {
	color : #ffffff;
	font-weight: bold;
	background-color: #006666;
	padding:6px;
	}
	
/* Turn a link (eg to the help file) into a button.	*/
a.linkbut {	font-size:0.8rem;color:#fff;text-align:center;border:solid 1px #000; 
		        background-color:#358; text-decoration:none; padding:1px 8px; margin-top:4px;	}
a.linkbut:hover {background-color:#eef;color:#000;}	
/* Classes for a submit button in a form, to make it look exactly like the above link button. */
.reset {float:right;margin:2px 0px 0px 0px;color:#fff;background:#358;border:solid 1px #000;padding:1px 8px;}
.reset:hover {background-color:#eef;color:#000;cursor:pointer;}
	
/* Class for input box on small form */
input.small {height:14px}	

/*--- 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; }


/*--Modified memtable as a class, as used in LibDem apps.  Better. Convert the contact list? ----*/
/* Styles for the "member table" - actually used in several places. Centres the table, stripes rows. */
.memtable {font-size:9pt;}  /* Tables go in this DIV. Then use descendent selectors. */
/* Set font size: 7.5pt=10px (smallest rec.) 9pt=12px. 13px = 10pt; 16px = 12 pt = 1em. */
.memtable table {margin:auto;empty-cells:show;border-collapse:collapse; border:1px solid #000; }
.memtable th {background-color:#ccc;border:1px solid #000;padding:2px;}
.memtable td {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 */
.memtable input[type="checkbox"] {margin-top:1px;}  /* Checkbox increases table row height. */


/*--- Styles for the table in the gym-booking.php script.  Originally used memcontrol.---*/
table.gymlist {font-size:12px;margin:auto;background-color:#ffd;border-collapse:collapse; }	
table.gymlist td, table.gymlist tr {border:1px solid black;padding:0px 4px;}  /* Top/bottom Left/right */
table.gymlist th {background-color:#ccc;padding-left:6px; }
table.gymlist a {color:#149;}  /* colour of email links */
table.gymlist input[type=submit] {padding-left:2px;padding-right:2px;}
table.gymlist tr:nth-of-type(odd) {background:#ffe; }  /* Zebra striping */

 
/*--- Styles for Membership edit form (also used by other forms)---*/
#editformdiv { /* Put everything in a div so we can use descendent selectors */
  font-size: 10pt;  }  /* Set font size: 13px = 10pt; 16px = 12 pt. */

table.eform  { 
	background-color:#bad2e8; /* controls the cell border colour, as cells have own background. */
  empty-cells:show;        
  }
#editformdiv  textarea { font-family: Verdana; font-size: 13px;}
#editformdiv  td { background-color:#ffe; font-size:13px; padding-left:4px;}
/* #editformdiv .updated  {font-size:10px; color:#888;text-align:right;margin:0px 44px 0px 0px;} */
#editformdiv .info  {font-size:11px; color:#777;text-align:center; margin:5px;}
#editformdiv input[type=text] {width:97%}
#editformdiv input[type=text].n {width:50%} /* Narrow input box */
#editformdiv input[type=text].n2 {width:20%} /* Very narrow input box */
#editformdiv textarea {width:98%;height:6em;} /* Text area fills most of table cell / 4 lines */

.setform { border: 1px solid #000;
          background-color:#bad2e8;
					padding:6px;
}

/* Classes used for the links/button below the edit form */
.llinks {  /* Float next/previous buttons on left */
  font-size: 13px;
  float: left; 
  margin: 0px 0px 0px 50px; 
}
.subbutton { width:80px; margin-left: auto; margin-right: auto; }

/* Scrollbox for long lists */
.scrollbox {
width: 100%;
font-size:13px;
height: 600px;
padding: 4px 6px;
border: 1px solid #000;
margin: 10px auto;
overflow: auto;
box-sizing: border-box;
}

/* 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;} 

.code {font-family:"Courier New",monospace; } 
	

/* STYLES FOR ASSET LIST  */
/* memcontrol is working well, but as it uses an ID I can only have one. Experiment with a second, in a class */
#butdiv { position:relative; width:160px; float:right;margin-top:-20px;	}  /* relative pos->lock button1 inside.*/ 

#butdiv .button1 { 
  position:absolute;
 	font-size:0.8em;
	width: 150px;  
	background-color:#ccc; 
	border: 1px solid #222;
	text-align:center;
}
#butdiv .button1 a { color:#14547e; text-decoration:none; padding:0px; display:block; }
#butdiv .button1 a:hover { color:#fff; background-color:#14547e;}

/*----Style to turn links into buttons with a border.---Used in reports.php  -----*/ 
a.lnkbut {font-size:10pt;color:#000;display:block;float:left;width:80px;text-align:center;
  border:solid 1px #000;background-color:#ddd;text-decoration:none;padding:1px;margin:0px 20px;  }
a.lnkbut:hover {background-color:#eee;color:#000;}