/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */
/* Modified */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,big,em,img,
	small,strike,strong,sub,sup,b,u,i,center,dl,dt,dd,ol,ul,li,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
	aside,figure,figcaption,footer,header,menu,nav,output,section,summary,time,audio,
	video{margin:0;padding:0;border:0;vertical-align:baseline;}
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,
	section{display:block;}
	body{line-height:1.3;}
	ol,ul{list-style:none;}
	table{border-collapse:collapse;border-spacing:0;}
	body{-webkit-text-size-adjust:none;
	font-size:16px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; }


/* End Resets */
/* The wrapper div should be wrapped around the page content and be at least 100% page height for the iPad, iPhone and iPod Touch */
html, body {min-height:100%;  height:100% !important;   padding:0; margin:0; overflow-x:hidden; background: #FFFFFF;
	font:normal 100%/120% 'texgyreadventorregular', arial, sans-serif; color:#115511; line-height:150%;}

.wrapper {height:100%; left:0; top:0; position:relative; min-width:320px; background:#F8F8F8;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s;
}

.leagueucldiv {
	width: 100%;
}

.leagueucldiv fieldset{
	display: inline-block;min-height: 4em;
}
.reportprintedon {display:none;}
.datacaption, .postscript,.datacaption-nobreak {font-style: italic;font-size: 85%; line-height:150%;}
.datacaption {margin-top: 0.5em; margin-bottom: 0.2em; display:block;}
span.datacaption a, span.datacaption a:visited,span.datacaption-nobreak a, span.datacaption-nobreak a:visited{ margin: 0;}
.datacaption-nobreak {display:inline-block;}
.clearme {clear:both;}
.postscript { display:inline-block;padding-left:2em;}
label {cursor:pointer;display: inline-block;  vertical-align: middle; margin: 0;padding: 0;}

input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i],select ,radio {
    padding: .2em;        
	margin: 0 5em 0 1em;
	overflow: hidden;
	width: 100%;
    max-width: 15em;
	font:normal 100%/120% 'texgyreadventorregular', arial, sans-serif;
}
input[type="number" i] {
    padding: .2em;        
	margin: 0 1em 0 1em;
	overflow: hidden;
	width: 100%;
    max-width: 15em;
	font:normal 100%/120% 'texgyreadventorregular', arial, sans-serif;
}
input[type="file" i] {
    align-items: baseline;
    color: inherit;
    text-align: start;    
	font:normal 100%/120% 'texgyreadventorregular', arial, sans-serif;
}
input[type="number"] {
    width: 6em;
    text-align: right;
}
 
input.widertext {width: 30em;max-width: 50em;}

#datatablecontent table tr td input[type="text"] {width: 90%;margin: 0.5em 0; border-width:0; background:inherit;}
#datatablecontent table tr td input[type="text"].borderon {border: 1px solid #abb1b2;}
#datatablecontent table tr td input.withborder {border-width: 2px; border-style: inset; border-color: initial; border-image: initial;  }

.photoblock {display: inline-block; padding-top: 1em;float:left;}
.photoblockatton {display: inline-block; float:left;border: 1em solid #008000;margin:1em;}
.photoblockattoff {display: inline-block; float:left;border: 1em solid #ffff00;margin:1em;}
.photoblockattoff img, .photoblockatton img { margin: auto;  display: block;}
.photoblocktext { text-align: center; font-weight:bold; color: #000;}

.is-invisible { opacity: 0;}
.subscription-details {  transition: opacity 1s;}

.table-responsive{
    width:100%;
    height:100%;
    overflow:auto;
}
textarea {width:80%;
	font:normal 100%/180% 'texgyreadventorregular', arial, sans-serif;
	padding: .2em;        
	margin: 0 1em 0 1em;}

input[type="date" i], input[type="datetime-local" i], input[type="month" i], input[type="time" i], input[type="week" i] {
    align-items: center;
    display: -webkit-inline-flex;
    font-family: inherit;
    -webkit-padding-start: .2em;
    overflow: hidden;
    padding: 0 0 0 .2em;    
}
input.dateTxt , input.timeTxt{
    margin-left: .9em;    
	font-family: inherit;
	font-size: 100%;
}
input.timeTxt{
    width:8em;
}

/* we have our own date/time selector for historical reasons so we need to make it look nice */
.datepick {display: inline-block; margin:0 1em; white-space: nowrap;}
.datepick select {
	margin: 0 1em 0 0;
	padding: 0;
	display: inline-block;
	width:8em;
}
select.attendance{
   margin: 0 0 0 0;
   width: 75%; min-width: 75%;max-width: 75%;
}
.regselect {min-width:15em;margin: 0 0 0 .2em;}
.regprice {width:6em;}
.regqty { margin: 0 0 0 1em;}

span.datepick input {
    width: 3.5em;
    margin-right: .2em;
}
span.datepick input.shortnumber {width: 2em;}
/* File drag and drop */

#drop_zone {
    background: #f4f4f4; /* Matching slim-file-hopper */
}
#drop_zone:hover {
    background: #885588;
}
#drop_zone p {
    padding:3.5em 3em;
}

/* MESSAGES */

/* The alert message box */
#chalertmessageouter {z-index: 600;
	position: fixed;
    left: 50%;
    top: 25%;    
	display: none;
	}

#chalertmessage {
    padding: 20px;
    background-color: #F3755B;
    border-radius: 5px;
    color: #FFFFFF;
    border:  #5f9EA0 2px solid;
    margin-bottom: 15px;
    /* font-size: 120%; */
    display: none;
    position: relative;
    left: -50%;
}
#chalertmessage a.btn {padding:0 1em;}

#chalertmessage p {min-width: 12em; max-width: 20em; text-align: center;}

.CHJSButtons {
	position: relative;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    text-align: center;
	}

.CHJSButtons .btn {
  display: inline-block;   margin-left:auto; margin-right:auto;
  font-weight:  normal;
}

.CHJSButtons .btn:first-of-type {
   text-align: center; margin-left:auto; margin-right:auto;
   min-width: 51%; font-weight:  bold;
}
.CHJSButtons a.btn, a:visited.btn{
    margin-left:auto;
    margin-right:auto;
}

/* The close button */
.closebtn {
    margin-left: 15px;    
	margin-top: -1em;
    color: #FFFFFF;
    font-weight: bold;
    float: right;
    font-size: 200%;
    line-height: 200%;
    cursor: pointer;
    transition: 0.3s;    
	display:inline-block; float:right;
}

    
/* When moving the mouse over the close button */
.closebtn:hover {
    color: #000;
}

.chalertext {
	display: inline-block; /* set this one to show by default */
	margin: 0;padding:0;
}

.chartdiv {min-height: 15em;}
#chart_EmailStatus.chartdiv {width: 100%; height: 100%;margin-left:auto;margin-right:auto;}

select {-webkit-appearance: menulist-button; width:auto; margin-bottom:1em;max-width:15em;}/* if left unset this causes overlows on the x direction */


fieldset {margin-top:1em;background:#DFF0F2;margin-left:0;margin-right:0;margin-inline-start: 0;     margin-inline-end: 0;}
.fit {width: fit-content;}
.palegrey {background:inherit; width:100%;}
legend { padding: 0 .5em 0 .5em; font-weight: bold;}

fieldset.floating {
	margin-top:1em;background: #DFF0F2; display:inline-block; width:auto;max-width:90%;float:left;font-size:90%;
	min-width: 17em;margin-right:1em;
}
fieldset.floating legend {float: left; }

fieldset.deliveryfee {
	margin:0 0 1em 0; background:#f4f4f4;font-size:90%;
}
input[type=checkbox]:not(x),
input[type=radio]:not(x){
  height: 2em;
  width: 2em;  
 padding:0; margin-bottom: 0;  margin-left: 1.5em; vertical-align: middle;
}
input[type="radio"]:disabled:not(x){
	opacity:0.75;
}

.centreforlargedevice {text-align: center;} /* this is set to left for a phone - for the grades display */
/* We want to keep checkbox and texttogether */
.checkboxlist, .linklist {display:inline-block;padding-right:2em;white-space: nowrap;}
.checkboxlist label {padding:0;white-space: pre-wrap;} // for session bookings on the chalendar, and pre-wrap for everything
.checkboxlist a, .linklist a {white-space: normal;} /* this was pre-line for some reason that will no doubt turn up */

/*.checkboxlist:first-of-type input[type=radio] {  margin-left: 0px;}*/
.deep {padding-bottom:1em;display: block;} /* add to checkboxlist if more space required */
.boxattop {} /* add to checkboxlist if checkbox to be at top not in middle */
.boxattop input[type=checkbox]:not(x), input[type=radio]:not(x) {vertical-align: top;}

/* allow text to wrap */
.wrapme, label.wrapme {white-space: pre-line;}
fieldset .stackedlist {border-bottom: #000 1px solid;}


.buttonblock {}

.mandatorytext { display:inline-block;position:relative;background:#D8F6CE; }
.mandinput  {background:#D8F6CE; }

.purchaselist {background: tranparent; margin-top:1em;}
span.purchaseextra {display=inline-block; font-size:150%; padding-left:0em;font-weight:bold;}
.purchaselist span {display: inline-block; padding-left: 0.5em;}
.purchaselistforchalendar span {display: block; }



.purchaselist span.purchaseheader  {font-weight:bold; font-size:100%;}
.purchaselist span.opener {font-size:100%;width:100%;cursor: pointer;}

progress {display:none; padding: .5em; margin-bottom:2em;width:100%;}
span.progressspan {display:none; }
/* table defaults */

td {display: table-cell; padding: .2em 1em; border: #000 1px solid;font-size: 90%; vertical-align: middle;}
td.nowrap {white-space: nowrap;}
td.centreme {text-align: center;    vertical-align: middle;}
.highlight1,td.highlight1, tr.highlight1 {background: #FFCE30;}
.highlight2,td.highlight2, tr.highlight2 {background: #f4f4f4;}
.highlight3 {background: #000; color: #FFFFFF;}
.highlight4 {background: #ffff00;}
.highlight5 {background: #FFFFFF;}
.highlight6 {background: #DEDEDE;}

/* some table cell classes */
.rightalign {text-align: right;}
.nopadding { padding: 0;}

th {padding: .2em 1em; border: #000 1px solid;}

.tableReportOption td, .tableReportOption th {border-width:0; vertical-align: top; font-size: 100%;}
.tablePage td, .tablePage th {border-width:0; vertical-align: top;}
.tablePage td:first-child {font-size: 85%;}
.firstright td:first-child  {text-align:right; width:20%;}
.firstright tr  {border-bottom: bisque solid 1px;}

.tableEntry td, .tablePage th {border-width:0; vertical-align: top;padding-bottom:1em;}
.tableEntry td:first-child {text-align: right;}


.register, .register tr, .register th, .register td {border-width:0;}
table.tablePageFloat{width:100%;}

.dataentrytable tr:nth-child(even) {background:  #FFFFFF;}
.dataentrytable tr:nth-child(odd) {background:  #f4f4f4;}
.dataentrytable table tr:nth-child(odd) {background:  inherit;} 
.dataentrytable table tr:nth-child(even) {background:  inherit;}
.dataentrytable  tr, .dataentrytable  td, .dataentrytable  th {border-width:0;}
.dataentrytable table, .dataentrytable table tr, .dataentrytable table td {border-width:0;}

.tablePageFloat th {font-size: 85%;}
.tablePageFloat tr:nth-child(even) {background:  #FFFFFF;}
.tablePageFloat table tr:nth-child(odd) {background:  #c2c2d6;}
.tablePageView,table.innerpagearea {width:100%;}
.tablePageView tr:nth-child(even) {background: #FFFFFF;}
.tablePageView table tr:nth-child(odd) {background:  #c2c2d6;}
.tablePageView tr.hiddenrow,.tablePageView td.hiddenrow   {display:none;}
.tablePageView tr.showrow {display:table-row;}
.tablePageView td.showrow   {display:table-cell;}
.tablePageFloat th,.tablePageView th {background:  #ffe0b3 font-size: 75%;padding: 0.2em;}

/* Copied from UF tables */
  table.innerpagearea {border-collapse: collapse;}
  table.innerpagearea  tr       { display: table-row; }
  table.innerpagearea 	 tr th {display: table-cell;}    
  table.innerpagearea 	 thead    { display: table-header-group ;}
  table.innerpagearea 	 tbody    { display: table-row-group; }
  table.innerpagearea 	 tfoot    { display: table-footer-group;}
  table.innerpagearea 	 col      { display: table-column; }

  table.innerpagearea tr td,  table.innerpagearea tr th   { display: table-cell; padding: 0.5em;}
  table.innerpagearea 	 caption  { display: table-caption; }
  table.innerpagearea 	 td:before {  content: '';	padding-right:0; width:0;}
  table.innerpagearea 	 td {vertical-align: top;}
  table.innerpagearea ol , table.innerpagearea ul {padding-left:1.5em;margin-left:1.5em;}

  table.innerpagearea th {background:  #ffe0b3; font-size: 75%;padding: 0.2em;}
  table.innerpagearea tr td.rightalign {text-align: right;} /* THis will turn off in small screen mode */

/* older stuff here */

.pinkbackground {background: #ffe6ff;}
.content {width:90%; margin:0 auto; background:#F8F8F8; padding:50px 10px;; color:#333333;}

.content input.shrinktext {width:300px;}

.content ol{	list-style-type: decimal;}
.content ul{	list-style: disc;}
.content ol , .content ul {padding-left:1em;padding-left:1em;margin-left:2em;}


h1 {display:block; padding:0px 0 0 0; margin:0; font-size:120% ; color:#115511;}
.content span.hdrnote { font-size:120%; color:#008000;}

h2 {padding:0.5em 0; margin:0; font-style:italic;font-weight:bold; font-size: 100%;color:#333333;}
h3 {padding:0.5em 1em ; margin:0; font-style:italic;font-weight:normal; font-size: 100%;color:#FFFFFF;
       width:100%;box-sizing: border-box;
        /*background-image: linear-gradient(to right,#666666, #F8F8F8); */
        background: #666666;box-sizing: border-box;
        }
h4 {padding:0.5em 0; margin:0; font-style:italic;  color:#ff751a; font-size:100%;}
.rowlikeh3  {background: #666666;color:#FFFFFF;}
form h3 {width:auto;background: transparent;color:inherit;font-style:italic;}
/* Becuase we have a dark h3 colour ... */
h3 > form > span > label {color: #FFFFFF;}

.content img.banner {width:100%;}
.content p.h1style {padding:0px 0 0 0; margin:0; font-size: 120% ;color:#115511;font-weight: bold;}

.windcaveclass {display: flex;  justify-content: left;  align-items: center;  height: 100px; font-style: italic;
            font-size: 75%; line-height:1.2em;}

.showlinktext {color: #143D66;background:#99CDFF;}
.content a, .content a:visited {color: #143D66;
	text-decoration:none;
	background:#99CDFF;
	border-bottom: 2px solid  #99CDFF;
	padding:0px 10px;
	margin:3px 3px;
	border-radius: 2px;
	display: inline-block;
	/*border-collapse: separate;*/
}
/* inline-table with border-collapse: separate; works better for links in tables than inline-block and seems OK for links outside tables,
ah but not in Safari */
.content  a:hover {color: #FF6600;background:#F8F8F8;  }
/* do not put a border bottom on there or it screws up the CKEditor menu */

.content  a.plainlink,.content a.plainlink:visited,.content a.plainlink:hover
 {background:transparent;border:0px;} 
.content  a.plainlinkleft,.content a.plainlinkleft:visited,.content a.plainlinkleft:hover
 {float: left;background:transparent;border:0px;}

a.underlinelink,a.underlinelink:visited,a.underlinelink:hover,
.content a.underlinelink,.content a.underlinelink:visited,.content a.underlinelink:hover {background:transparent;border:0px;text-decoration:underline;}

a.disabled { pointer-events: none; cursor: default;}

a.transparent {background: transparent;border-bottom: none;}

.content .tableTeamList {	width:100%;	 		border: 2px solid #000; 		text-align:center;
    		margin-top: 6px; 	 			 	}   
.content .tableTeamList th {font-weight: bold;	 	border: 2px solid #000; 	padding-left: 6px;
			padding-right: 2px;	padding-top: 5px; 	padding-bottom: 5px;  	text-align:center;	 		} 	
.content .tableTeamList tr {	min-height: 2em;padding-top: 5px; 	padding-bottom: 5px;     	}
.content .tableTeamList td { 		vertical-align: top;  		border: 2px solid #000; 		padding-left: 6px;  		padding-right: 6px;
    		padding-top: 5px; padding-bottom: 5px;    		  	text-align:left; 	}
.content .tableTeamList td.thin {width:7em;	}

.content .visibleDiv{
    top: 150px;
    right: 10px;    
	position: fixed;
}

#processingoverlay {/* for hiding screen while processing */
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.A4page {padding-top:10mm; position:relative; width: 210mm; height: 270mm; text-align: center;page-break-after: always; page-break-inside: avoid;
	font: normal 10pt Tahoma, Verdana, Arial, Helvetica, sans-serif;}


form {display:inline-block; padding:0;width:auto; margin:0; color:#115511;
	/*background:#DFF0F2*/
	-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */}

.hiddenform {display:inline-block; background:transparent;padding:0;border:none;color:#000;width:100%;}
.hiddenformflex {display:inline-block; background:transparent;padding:0;border:none;color:#000;}
.emailform {width: 100%;}
form div.condensed-select {	background:#b4b3b3;padding:20px 20px;margin-top:10px;}
img {border: 0px;}

p {font-size: 100%; padding: 0;padding-bottom: 0.5em;}

strong { font-weight:bold;  color:inherit;}
strongred { font-weight:bold; color:#ff0000;}
verysmall { font-size: 85% ;line-height: 1em;}
em {  color:#333333;}
small  { font-size:85%;line-height: 1.5em; }
small em { font-size:85%; color:#333333;line-height: 1.5em}



/* traffic light colors */
.tlred { background: #FF4D4D;}
.tlorange { background: #ff751a;}
.tlgreen { background: #008000;}

.textonbaseonbase {color:#; background:#ffffff; }
.textareawidth, textarea.textareawidth  {width: 30em;max-width: 50em;}/* keep same as input.widertext*/
.regtextarea {} /* used on reg screen needs to set it's own width */
textarea.fcktextareawidth {width:100%;}
/*Grid transparent two column flexi for I can help screen */
.helpoutergrid {
  display: grid;
  grid-template-columns: 25% 65% ;
  padding: 0;
  grid-gap: 0.5em; box-sizing: border-box;
  background-color: transparent; /*these two properties should give collapsing borders */
}

/*Grid two column flexi rows for home page dashboard  */
.outergrid {
  display: grid;
  grid-template-columns: 50% 49.5% ;
  padding: 0;
  grid-gap: 0.5em; box-sizing: border-box;
  background-color: transparent; /*these two properties should give collapsing borders */
}
.innergrid {
  display: grid;
  grid-template-columns: 100% ;
  padding: 0;
  grid-gap: 0.5em;
  background-color: transparent;
}

/*Grid two column fixed rows */
.grid-container {
  display: grid;
  grid-template-columns: 50% 49.5% ;
  padding: 0.5em;
  grid-gap: 0.5em;
  background-color: #; /*these two properties should give collapsing borders */
}
.grid-item {
  padding: 1em; margin: 0;
  text-align: center;
  background: #DEDEDE;
}
.transparent {background: transparent;border-bottom: none;padding:0;}
.nocentre {text-align: inherit;}
.grid-item-header{
    font-weight:bold; color: #000; display: inline-block; font-style: normal;
}
/*.grid-item-preamble {font-style: italic;background: hotpink;}
.grid-item-body {font-style: italic;}  */

.tableDash {margin-left:auto;margin-right:auto;}
.tableDash td {text-align:left;}
/* Grid layout for product page */
 #productgrid {

    display: grid;
    grid-template-rows: 1;
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, auto);
    grid-template-areas:
        "item1 item2 item3";
}

 #item1 {
    grid-area: item1;
    justify-self: end;     /* Aligns to the right */
    align-self: start;     /* Aligns to the top   */

}

#item2 {
    grid-area: item2;
    justify-self: start;  /* Aligns to the left    */
    align-self: start;      /* Aligns to the top  */

}

.productcontainer {
    grid-column-start: 1;
    background: hotpink;
    border-radius: 10px;
    padding: 1em;
}
/* End Grid */

.classlikep {position:relative;float:left; padding:0; margin:0; color:#115511;display: inline-block; }
.showerror {position:relative;float:left; padding:0; margin:0;; color:#ff0000;display: inline-block; }
.classbigred {padding:0; margin:0; font-size: 140%; color:#ff0000;display: inline-block; }
.chnotext{ font-style:italic; color:#ff751a;font-size:90%;}
.chnotext strong {font-weight:bold; color: #FF6600;}
.chnotehdr{ font-style:italic; color:#ff751a; font-weight:bold;font-size:90%;}
.menulike {background:#; color:#;padding:0 0.5em 0 0.5em;}
.pagemenulike { color: #666666; border-bottom: 1px solid  #FF6600;		background:#F8F8F8; }

/* Buttons */
.btn, .btndate, .btntop, .btnlarge, .btnoprint, button, input[type="submit"] {
  -webkit-appearance: none;
}

.btn, .btndate, .btntop, .btnlarge,  .btnoprint, button,
input[type="submit"]{
  background-color: #0033cc;
  border:   1px solid #0033cc;  /*have this to allow for our orange when focussed */
  border-radius: 5px;
  color: #FFFFFF;
  padding: 0.5em 1em;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  white-space: normal;
}


 #loginButton, form > input[type="submit"] {margin-left: 1em;}
.btn:hover, .btndate:hover, .btntop:hover, .btnlarge:hover,  .btnoprint:hover,
input[type="submit"]:hover  {
	background: #0077cc; outline: none;   box-shadow: none;  border:  1px solid #0033cc;
}
.btn:active, .btndate:active, .btntop:active, .btnlarge:active,  .btnoprint:active,
input[type="submit"]:active  {
      background: #0077cc;
}
.btn:focus, .btndate:focus, .btntop:focus, .btnlarge:focus,  .btnoprint:focus,
input[type="submit"]:focus  {
      background: #0077cc;    outline: none;   box-shadow: none;  border:  1px solid #FF6600;
  border-radius: 5px;
}

input[disabled].btn, input[disabled].btndate, input[disabled].btntop, input[disabled].btnlarge,input[disabled].btnoprint {
	    background: lightgray;
    font-weight: normal;
    border: 1px solid #b4b3b3;
    color: #8096B6;
    border-radius: 0;
}
/* CHart buttons */
.chartbtn, .input.chartbtn,input[type="submit"].chartbtn {
    text-decoration:none;
	background:#99CDFF;
    border: 0;
    font-family: inherit;
    padding: 2px 10px;
    font-size: 90%;
	border-bottom: 2px solid  #99CDFF;
	margin:3px 3px;
	border-radius: 2px;
	display: inline-block;
    color: #143D66;
}

.chartbtn:hover, .input.chartbtn:hover {
     background: #FFC299;
}

/* New wrap styles using flex */

.boxbtn, .input.boxbtn {
    background: #FF9900;
    padding: 1em;
    cursor:pointer;
	color:#FFFFFF;
	font-family:Arial;
    font-size:120%;
}
.boxbtn:hover, .input.boxbtn:hover {
     background: #FFC299;
}
.btn-group  {
  display: flex;
  flex-wrap: wrap;
}

.special, .boxbtn {
  flex: 1
}
.noleftmargin {margin-left: 0;}
/* End buttons*/


#bannerwrap p, #htmlheader p {padding:0px 0 0 0; margin:0; text-align:center;}
#htmlheader a:hover {background: transparent;text-decoration: none;}
#chHeaderRight { float: right;top:24px;text-align:right;width:395px;  padding-right: 1em;  background: transparent;}

#smalldeviceheader {display:none;padding: 0.5em; min-height: 2.2em;}
.oldnotice { color: #8096B6;}

#optforms,#optforms form  {	background:#F8F8F8; margin-top: 0px;  padding-top:0px;	margin-bottom: 0px; text-align:left;  }
#optforms p {float:left; position:relative;display: inline-block;-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;}
#optforms hr {  color:#000;   	width: 90%;     	text-align: left;     	}
    	
hr {padding:0; margin:0; border-top: 0px solid #888888;} /* Hiding it 28/08/20 */
hr.style-one {
	width: 90%;
    border: 0; /* Hiding it 28/08/20 */
    height: 0px;
    padding-top:0;
    margin-top: 0;
    background: #888888;
}
hr.style-two {
	width: 100%;
    border: 0;
    height: 0px;   /* Hiding it 28/08/20 */
    padding-top: 0;
    margin-top: 0;
    background: #888888;
}

/*date dropdown  */

#ui-datepicker-div {background: #CCAADD;}
.ui-datepicker {background: #CCAADD;
    width: 30em;  
    height: auto;  
    margin: 5px auto 0; padding:5px;     
    color:#333333;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  }
.ui-datepicker a {    text-decoration: none;  }
.ui-datepicker table {  background: #CCAADD; width: 100%; }
 
.ui-datepicker-prev, .ui-datepicker-next {  
    display: inline-block;      width: 30px;      height: 30px;      text-align: center;      cursor: pointer;  }  
.ui-datepicker-prev {     float: left;  }
.ui-datepicker-title {   text-align: center;  font-weight:bold;  color:#333333;}
.ui-datepicker-next {     float: right;      background-position: center 0px; }  
.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;  font-weight: bold;  text-align: center;  width: 30px;  height: 30px; line-height: 30px; color: #666666; }

.ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #b4b3b3;
}  
.ui-datepicker-calendar .ui-state-hover {     background: #FFFFFF;  }
.ui-datepicker-calendar .ui-state-active {     background: #5f9EA0;  color: #DFF0F2;}
/* end  trying to get the date dropdown sorted */

.copyright {font-size:85%; color:#333333;
	float: right;	margin-right: 10px;	top:24px; 	text-align:right;	}


/* For CKEDITOR */
.editorcell { color:#333333;max-width:500em;}
.editorcell a, .editorcell a:visited, .editorcell a:hover {border-bottom: 0;background:transparent;}

.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders {
    overflow: auto;
}

cke_combo_text cke_combo_inlinelabel{ width:30em !important; }
cke_combopanel{ width:30em !important; }
cke_combo{ width:30em !important; }
.cke_panel
{
    height: 400px !important;
    width: 180px !important;
}

/* End CKEditor */

.hideonphone {}/* do nothing but in media statement we will hide */
.hideforclass {display:none;}
.showforclass {display:inline-block;}
.reversehideforclass {display:inline-block;}
.reverseshowforclass {display:none;}

.helpinfo {background:#F8F8F8;padding:0px 20px; color:#333333;font-family: arial;}
.helpinfo ul {
	list-style-type: disc;list-style-position: inside;padding-left:2em; padding-bottom:1em;
}
.helpinfo h1 {padding: 1em 0 1em 0;
}
.helpinfo ol {
    list-style-type: decimal;list-style-position: inside;padding-left:2em; padding-bottom:1em;
}

.helpinfo a.small-link, .helpinfo a.small-link:visited, .helpinfo a.small-link:hover,
 {background:transparent;border:0px;color:#000;text-decoration:none;}

.helpwarning {background:#F8F8F8;padding:0px 20px; color:#ff0000;}
.helpinfo h2 {background:#FF6600;padding:20px;margin:0px;}
.helpinfo .getto {display:inline-block;background:#c2c2d6;font-style: italic;margin:0px;padding:2px;}


.helpinfo a, .helpinfo a:visited {color: #143D66; 
	text-decoration:none; background:#99CDFF;  border-bottom: 2px solid  #99CDFF; padding:0px 10px; margin:3px 3px;   border-radius: 2px;
				display: inline-block;	}
.helpinfo a:hover {color: #FF6600;background:#F8F8F8;border-bottom: 2px solid #FF6600;   }
.helpinfo .endsection {font:inherit; color:#000;}
.helpinfo table,
.helpinfo table tbody tr td,
.helpinfo table tbody tr th  {border:1px;padding:2px 10px;border-color:#000;border-style:solid;}

.awesomplete ul {
	list-style-type: none;padding-left:0.5em;
}
.autoheight {height:auto;}
#reporttablecontent {width:100%;    height:;    overflow:auto; flex: 1; }
#reporttablecontent .h3pagebreak {page-break-before: always; padding:2px 0 0 0; margin:0; font-style:italic; ; color:#000;}
	
#reporttablecontent .table_large {font-size:120%;	}
/*#reporttablecontent .odd { 	background: #f4f4f4;}

#reporttablecontent .even {	background: #b4b3b3;	}*/
		
#reporttablecontent .selrow {background: #CCAADD;	}
#reporttablecontent .sortedminus { 	color: #885588;	}
#reporttablecontent .sortedplus { 	color: #885588;		}

#reporttablecontent .sortedsmall {	font-size:90%;	}

#reporttablecontent .sortedlarge {font-size:120%; }
#reporttablecontent .table_small {font-size:75%;	}
#reporttablecontent .table_medium {font-size:90%;  }
#reporttablecontent .table_enclosed {font-size:90%;	}

#navtablecontent {	margin-top: 5px; }
#navtablecontent table {
		border-spacing: 1px;	border-width: 1px;	border-style: solid;	padding: 2px 4px; border-color: #666666;}

#navtablecontent td {border-width: 1px;	border-style: solid;	padding-left: 4px;padding-right: 0px; 	vertical-align: top; 
		background: #f4f4f4; 	padding: 2px 4px; 		border-color: #666666;    overflow: visible;	}

#commonreportoptions { 	width: 100%;	height: auto;}
#reportoptions { width: 100%;	height: auto;}

#regprogress {margin-top:6px;display: inline-block;}


#regprogress table { border-style: solid;  border-width: 0;border-spacing: 0;}
#regprogress table  a,#regprogress table td{   border-width: 0; margin:0;padding:0;}
.tablePageTwoColList{ border-width: 1px; border-style: solid;  padding:0; margin:0; ; color:#333333;}

table.noborders, table.noborders td  {   border-width: 0; margin:0;padding:0;}

.tableCrumb {padding: 25px 0px 5px 0px; margin:0;  color:#333333; background-size: contain;}
.tableCrumb td {padding:0; margin:0; border:0; ; color:#333333; background-size: contain;min-width:20px;}

#indentedcontent { padding-left: 50px;   width: 95%;}

.namewithlinks {display:block;   margin:0px 2px; border-bottom:1px #000 solid;padding:0.5em;}
.namewithlinkscol1 {display:inline-block;  width:14em; }
#chHeader { 	width: 100%;	height: auto;	min-height: 13px;	margin-bottom: 5px;display:inline-block;clear:both;}


#menulistcontent {	margin-bottom: 1em; margin-left: 0;  	width: 90%;	margin-top: 10px;	height: auto;	 color:#333333;}
#menulistcontent ul {list-style-image: url(css/bulletpoint.gif);	list-style-type: circle;	width: auto; display:inline-block;	}

#menulistcontent li {	margin-left: 2em;	}

#menulistcontent li a ,#menulistcontent li a:visited {	display: block;	padding:  0px 5px 0px 0.5em;
	border-top:0px;border-right:0px;border-left:0px;	border-bottom: 2px solid #DEDEDE; border-radius: 0px;
	color: #666666; text-decoration: none;		background:#F8F8F8; line-height:2em; 	}
#menulistcontent li a:hover ,#menulistcontent li a:active {	border-bottom: 2px solid #FF6600; }



ul.breadcrumb {
	list-style: none; list-style-image: none; list-style-type: none; 
	overflow: hidden;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 0.2em;
}
.breadcrumb li {
	float: left; 
	font-size:70%;
}
.breadcrumb li a, .breadcrumb li a:visited {
	color: #FFFFFF;
	text-decoration: none; 
	padding: .2em 1em .2em 4em;
	background: #333333 ;
	position: relative; 
	display: block;
	   margin: 0;
   /*	margin-right: -0.2em;  */
	float: left;
	border:0;
}

.breadcrumb li a:after {
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 1.4em solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 1.4em solid transparent;
	border-left: 1em solid  #333333;
	position: absolute;
	top: 50%;
	margin-top: -1.35em; margin-left: -0.1em; 
	left: 100%;
	z-index: 2; 
}

.breadcrumb li a:before {
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 1.4em solid transparent;       
	border-bottom: 1.4em solid transparent;
	border-left: 1em solid white;
	position: absolute;
	top: 50%;
	margin-top: -1.35em; 
	margin-left: .1em;
	left: 100%;
	z-index: 1; 
}

.breadcrumb li:first-child a {
	padding-left: 2em;
}


.breadcrumb li:nth-child(2) a       { background: #666666; }
.breadcrumb li:nth-child(2) a:after ,.breadcrumb li:nth-child(2) a:hover:after { border-left-color: #666666; }
.breadcrumb li:nth-child(3) a       { background:        #888888 ; }
.breadcrumb li:nth-child(3) a:after,.breadcrumb li:nth-child(3) a:hover:after { border-left-color: #888888 ; }
.breadcrumb li:nth-child(4) a       { background:        #b4b3b3 ; }
.breadcrumb li:nth-child(4) a:after,.breadcrumb li:nth-child(4) a:hover:after { border-left-color: #b4b3b3 ; }
.breadcrumb li:nth-child(5) a       { background:        #f4f4f4  ; }
.breadcrumb li:nth-child(5) a:after,.breadcrumb li:nth-child(5) a:hover:after { border-left-color: #f4f4f4  ; }
/*.breadcrumb li:last-child a {
	background: transparent !important;
	color: #000;
	pointer-events: none;
	cursor: default;
}*/

.breadcrumb li a:hover { color: orange; text-decoration: underline; border:0;}


  
.showemail,.showemail p {margin:0px;  border: none;  FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #000;}/* set this like the old clubhub*/
.showemail a,.showemail a:hover,.showemail a:visited,.showemail a:active,
.showemail p a,.showemail p a:hover,.showemail p a:visited,.showemail p a:active {
	text-decoration: underline;background:transparent; color:blue;	border:0px;padding:0px;
	FONT-SIZE: inherit;FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.showemail ol li,.showemail ul li  {FONT-SIZE: inherit;FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.showemail table th,.showemail table td {border:0;}

.broadcast .tableBanner { clear:both;
	table-layout: fixed; 		background: #ffffff;  		color: #;  		border-width: 1px;
    		border-style: solid;     		border-color: #000;   	}
.broadcast .tableBanner p {   ;color: #; }

.warning {; color:#ff0000;clear:both;}

.showuclresult {font-size:120%;}

span.clickable_span{	cursor: pointer;	text-decoration: none;	padding-top: 2px;border-bottom: 2px solid #DEDEDE;	font-size: 75%;}
span.clickable_span:hover {	border-bottom-color: #ffffff; }
span.menunotes {font:italic 90% 'texgyreadventorregular', arial, sans-serif;clear:both;padding-top:0px;margin-top:0px;padding-left:10px;}
span.daysandtimes {font:italic 90% 'texgyreadventorregular', arial, sans-serif;clear:both;padding-top:0px;margin-top:0px;padding-left:10px;}


/*The following copyright notice is for the responsive menu only - 24/6/2014
=================================================================== --*/
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-two.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.trigger {display:none;width:40px; height:40px; position:fixed; left:0px; top:5px; background:#; color:#FFFFFF; border-radius:0 5px 5px 0;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s;
}
.trigger label {padding:0; display:none; width:40px; height:40px; position:absolute; left:0; top:0; background:url(css/menu-iconwhite.png) no-repeat center center; cursor:pointer;z-index:102;}  
.trigger label span {position:absolute; left:-9999px;}

input.submenus,
input#toggle {position:absolute; display:none;}
.menuHolder {width:100%; position:relative; float:right; background:#; color:#; z-index:400;}
.menu {

/* float:right;  commented out by SK Aug 2014 to centre the menu */
width: 998px; /* This width must be greater than or equal to the menu's width. Must update when a new item is added */
margin-left: auto;
margin-right: auto; 

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}
.menu {background:#; color:#;}
.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

.menu li {display:block; position:relative;}

.menu ul ul {position:absolute; left:-9999px; top:50px; padding:10px 0; z-index:0; border-radius:0 0 5px 5px; background:#; color:#;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.menu ul ul ul {left:100%; top:auto; margin-top:-35px; border-radius:5px;}
.menu ul li.left > ul {left:auto; right:0; top:50px;}
.menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-35px;}

.menu > ul {margin:0 auto;}
.menu > ul > li {float:left; position:relative;}

.menu ul {background:#1F1F24;}

.menu a {display:block;   ;line-height:200%; background:#;
	color:#; text-decoration:none; padding:0 40px 0 20px; position:relative; z-index:99;}
.menu > ul > li > a {line-height:3.5em;}/* Top menu */

.menu > ul > li > label {display:block; position:relative; width:100%; margin-top:-50px; height:50px; background: url(css/trans.gif); z-index:101;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul ul > li > label {display:block; position:relative; margin-top:-25px; width:100%; height:25px; background: url(css/trans.gif)); z-index:101;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul li.back {display:none;}

.menu li:hover > label {width:0;}
.menu li.left ul a {text-align:right; padding:0 20px 0 40px;}

.menu li:hover > a,
.menu ul li:hover > a {background:#; color:#; text-decoration:underline;}

.menu a:visited  {background:#; color:#;text-decoration:none;}
.menu a.gonowhere, .menu a.gonowhere:visited, .menu a.gonowhere:hover  {
	cursor: default; text-decoration: none; margin-left:1em;font-style: italic;background:#; color:#;}



.menu ul li a.hassub { background: url(css/arrow-down.png) no-repeat right center;}
.menu li ul li a.hassub { background: url(css/arrow-right.png) no-repeat right center;}
.menu li.left ul li a.hassub {background: url(css/arrow-left.png) no-repeat left center;}
.menu ul li:hover > a.hassub {background:#; color:#; text-decoration:underline;}
.menu li.left ul li:hover > a.hassub {background:#; color:#;  text-decoration:underline;}

.menu > ul {*display:inline;}

.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:-9999px; right:auto; opacity:0;}

.menu ul li:hover > ul {left:0; opacity:1;}
.menu ul ul li:hover > ul {left:100%; opacity:1;}
.menu ul li.left:hover > ul {left:auto; right:0; opacity:1;}
.menu ul li.left ul li:hover > ul {left:auto; right:100%; opacity:1;}

.menu ul li.home {width:90px;}


/*---------------------------------------------------------------------------------*/
.chalendarform { }

.chalendarcontainer { display:block; white-space: nowrap;padding: 20px 20px;  background:transparent; color:#;overflow:hidden; max-width: 96%; min-width:30em;
font-size:120%; color:#333333;}
.chalendarcontainerlined { display:block; white-space: nowrap; overflow:hidden; border: 1px solid  #000;width:450px;}

.chalendardays { display:inline-block; padding:0px; float:left; position:relative; background:transparent; color:#; width:20%;}
.chalendardays ul {margin:0; padding:0; list-style:none;  }
.chalendardays li {display:block; width:7em; text-align:right; width:100%; color: #000; margin 0 1px;border 0 1px; height:30px; border-top: 1px solid #000;  padding-right:1em;}

.chalendarmonth { padding:0px; float:left; position:relative; background:transparent; color:#; width:60px;}
.chalendarmonthright { padding:0px; float:left; position:relative; background:transparent; color:#; width:90px;}
.chalendarmonth ul, .chalendarmonthright ul {margin:0; padding:0; list-style:none;  }
.chalendarmonth li  {display:block;  text-align:right; color: #000; margin 0px 1px ;border 0px 1px ; height:30px; border-top: 1px solid #000;padding-right:15px; }
.chalendarmonthright li  {display:block;  text-align:right; color: #000; margin 0px 1px ;border 0px 1px ; height:30px; border-top: 1px solid #000; padding-right:45px; }

.chalendarmonth ul li.heading, .chalendarmonthright ul li.heading {background:#b4b3b3;padding:4px 4px 0px 4px;}

.monthcalendar {float:left;    position:relative;    left:5%;margin-top:20px;}
.chalendarcontainerlined .chalendarmonth ul li {padding:4px 10px 0px 4px;}
.chalendarmonth ul li.nobooknoavail{background:#DEDEDE;padding:4px 10px 0px 4px;}
.chalendarmonthright ul li.nobooknoavail {background:#DEDEDE;padding:4px 35px 0px 4px;}
.chalendarmonth ul li.hasavail, .chalendarmonthright ul li.hasavail {background:aquamarine;padding:4px 10px 0px 4px;}
.chalendarmonthright ul li.hasavail {padding:4px 35px 0px 5px;}

.chalendarmonth ul li.hasbook, .chalendarmonthright ul li.hasbook {background:#FFC299;}
.chalendarmonthright ul li.hasbook {padding:4px 25px 0px 4px;}
.chalendarmonth ul li.hasbook a,.chalendarmonthright ul li.hasbook a { margin:0px ;	text-decoration:none; background:#FFC299; }

.chalendarmonthright ul li.heading a, .chalendarmonth ul li.heading a,
.chalendarmonthright ul li.heading a:visited, .chalendarmonth ul li.heading a:visited,
.chalendarmonthright ul li.heading a:hover, .chalendarmonth ul li.heading a:hover {font:inherit;background:transparent;border:0px;padding:0px;margin:0px; margin-bottom:20px;}
.chalendarmonthright ul li.heading a:hover, .chalendarmonth ul li.heading a:hover {color:orange;cursor:pointer;}

.chrpad {padding-right:20px;}

.chalendar {  float:left; position:relative; background:transparent; color:#;width: 80%;  margin:0; padding:0;
	overflow-x:auto;overflow-y:hidden;display:inline-block;white-space: nowrap; }
.chalendar ul{margin:0; padding:0; list-style:none; white-space:nowrap; }
.chalendar li {display:inline-block; width:100px; text-align:center; width:100%; color: #000; margin 0 1px;border 0 1px; height:30px; border-top: 1px solid #000; ;}
.chalendar ul li.wider {width:200px;}
.chalendar ul li.left {background:pink;}
.chalendar ul li.full {background:#ffff00; }
.chalendar ul li.emptyish{background:#99bb99;}
.chalendar ul li.bookable,
.chalendar ul li.bookable a,
.chalendar ul li.bookable a:visited{background:#99bb99;text-decoration:none;width:110px;}
.chalendar ul li.bookable a:hover{background:#FF9900;}
.chalendar ul li.empty {background:#B2F0E0; width:110px;}
.chalendar ul li.today {background:#FF6600; }
.chalendar label.disabledlabel {color:#8096B6;}
.chalendar label.disabledlabelperson {color:#ffff00;}
/*----------------------------------------------------------------------------------*/
/* this is for our alpha search for long lists */
.radio-set input[type="radio"] {
    display:none;
}

.radio-set label {
    display:inline-block;
    background-color:#b4b3b3;
    padding:4px 11px;
    font-family:Lucida Console, Courier;
    font-size:100%;
}

.radio-set input[type="radio"]:checked + label {
    background-color:#b4b3b3;
}

/* for centred inline blocks  */
.floatcontainer  {
	margin-left:auto;
	margin-right:auto;
	display: inline-block;
	text-align:center;}

.floatbox {
	float: left;
	padding: 1em;
	overflow: hidden;
	min-width: 10em;
}
.floatbox .floatbox {margin-left:0;}


/* for narrow screens, tablets and smartphones */

@media only screen and (max-width: 1000px) {
.helpinfo {font-size:200%;line-height:1.5; overflow-x:hide;padding-right:1em;}
.helpinfo small {font-size:150%;line-height:2.0; }
.content {width:95%; padding: 0px 10px 50px 10px;}

.content a, .content a:visited { margin:10px 2px;   }

.broadcast {margin-left:50px;}
.warning {margin-left:50px;}

.content input.shrinktext {width:150px;}

.copyright {display:none;}
/*#menulistcontent li {	margin-bottom: 1em;	margin-left: 0;}
#menulistcontent ul {list-style-image: none;	list-style-type: none;	width: auto; display:inline-block;	}
#menulistcontent li a, #menulistcontent li a:visited, #menulistcontent li  a:hover,#menulistcontent li  a:active  {
   		color: #143D66;
		text-decoration:none; background:#99CDFF;  border-bottom: 2px solid  #99CDFF; 
		padding:0px 10px; margin:3px 3px;   border-radius: 2px;	display: inline-block;	
		-moz-border-radius:6px;
	-webkit-border-radius:6px;}
#menulistcontent li  a:hover,#menulistcontent li  a:active {color: #FF6600;background:#99CDFF;border: 1px solid #FF6600;   }
*/
/* New wrap styles using flex */

#menulistcontent  {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
#menulistcontent ul {  list-style:none;display: flex;  flex-wrap: wrap; margin-left:0; margin-top: 1em;margin-bottom: 1em;
 /*border:1px solid #5f9EA0; border-top: 1px solid #5f9EA0 ;*/ background: #99CDFF; padding-left:0;	;border-collapse:collapse;
 font-size: 90%;}
#menulistcontent li,#menulistcontent li a {  flex: 1;  margin:0;   background: #99CDFF;padding-left:0;}

#menulistcontent li a,#menulistcontent li a:visited {width: 100%; border-bottom: none;background: transparent;}
#menulistcontent li  { padding-bottom: 0.5em; padding-right: 1em; padding-left: 1em; padding-top: 0.5em; border: 1px solid #FFFFFF;border-collapse:collapse;}
#menulistcontent li a:hover { color: #FFFFFF; border-bottom: none;}
#regprogress {margin-top:-50px;margin-bottom:40px;margin-left:40px;visibility: hidden;}

.menuHolder {position:fixed; left:-280px; width:280px; top:0; bottom:0; height:auto; overflow-x:hidden; background:#;
-webkit-transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
transition: left 0.5s;
}
.helpoutergrid {
  grid-template-columns: 48% 48% ;
}
#bannerwrap{display:none;} 
#htmlheader{display:none;} 
#chHeaderRight{display:none;}
#smalldeviceheader {display:block; text-align:center;  ; color:#;
	background:#ffffff;}

#smalldeviceheader a, #smalldeviceheader a:visited { color:#; background:#ffffff;text-decoration:none;}
#smalldeviceheader a:hover { color:#ffffff; background:#;}
#datatablecontent {width:100%;}
#datatablecontent table tr:nth-child(even) {background:  #FFFFFF;}
#datatablecontent table tr:nth-child(odd) {background:  #f4f4f4;}

.content h1 {padding-top: 0.2em;}
pre {overflow-x:scroll;white-space: pre;}
progress {display:block;}
span.progressspan {display:block; }
input.widertext {width: 20em;max-width: 50em;}

input.borderon {border: 1px solid #41d6ea;}

.outergrid { grid-template-columns: 100% ;}

.menu {width:260px; text-align:center; position:absolute; z-index:101; background:#; left:0; top:0; border-right:1px solid #888888;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
-webkit-transition:0.5s;
-o-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
}
fieldset.floating {
    width:90%;
}
.trigger, .trigger label {display:block;} 
.menu ul {margin:0; padding:0; width:260px; list-style:none; white-space:nowrap; text-align:left; border-radius:0; background:#; border-right:1px solid #888888;}

.menu li {display:block; position:static; width:260px; height:50px; border-top:1px solid #; border-bottom:1px solid #888888;}
.menu ul li.back {display:block;}

.menu ul ul {position:absolute; left:280px; top:-5000px; padding:0; z-index:0; opacity:1; background:#;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}

.menu ul ul ul {left:300px; top:-5000px; margin-top:0; opacity:1;}


.menu ul li.left > ul {left:280px; right:auto; top:-5000px;}
.menu ul li.left ul li > ul {left:280px; right:auto; top:-5000px; margin-top:0;}

.menu > ul {margin:0;}
.menu > ul > li {float:left; position:static;}

.menu ul {background:#;}

.menu a {display:block; font-size: 120%;line-height:150%; #; border-radius:0 5px 5px 0; text-decoration:none; padding:0 0 0 20px; margin-right:50px; position:relative; z-index:101; background:transparent;}
.menu > ul > li > a {line-height:50px;}
.menu > ul > li > label,
.menu ul ul > li > label {display:block; position:relative; margin-top:-46px; margin-right:4px; width:40px; height:40px; border:1px solid #; border-radius:4px; float:right; background: #b4b3b3 url(css/arrow-right.png) no-repeat center center; z-index:101; cursor:pointer;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

.menu li:hover > label {width:40px;}
.menu li.left ul a {text-align:left; padding:0 40px 0 20px;}



.menu ul li:hover > a {color:#; background:#; text-decoration:none;}
.menu ul li a:hover,
.menu ul li a.hassub:hover {color:#; background:#; text-decoration:underline;}

.menu ul li a.hassub,
.menu li.left ul li a.hassub,
.menu li ul li a.hassub {background:none;}

.menu ul li.back label {display:block; width:40px; height:40px; margin-top:4px; border-radius:4px; float:right; background: #99bb99 url(css/arrow-left.png) no-repeat center center; z-index:200; cursor:pointer;}
.menu ul li.back span {display:block; height:18px;  ; #; width:180px; padding:5px 0 0 20px; white-space:normal; float:left; }

.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:280px; top:-5000px; right:auto; opacity:1;}


.menu ul li:hover > ul,
.menu ul ul li:hover > ul,
.menu ul li.left:hover > ul,
.menu ul li.left ul li:hover > ul {left:280px; right:auto; opacity:1;}

.menu ul li:hover > a.hassub,
.menu li.left ul li:hover > a.hassub {background:none; #;background:#;  text-decoration:none;}
.menu ul li a.hassub:hover,
.menu ul ul li a.hassub:hover,
.menu li.left ul li a.hassub:hover {color:#; background:#; }
.menu ul li.home {width:inherit;}

/* define our submenu triggers*/
#submenu1:checked ~ .menu #p1,
#submenu2:checked ~ .menu #p2,
#submenu3:checked ~ .menu #p3,
#submenu4:checked ~ .menu #p4,
#submenu5:checked ~ .menu #p5,
#submenu6:checked ~ .menu #p6,
#submenu7:checked ~ .menu #p7,
#submenu8:checked ~ .menu #p8,
#submenu9:checked ~ .menu #p9,
#submenu10:checked ~ .menu #p10,
#submenu11:checked ~ .menu #p11 {top:0;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

#submenu1:checked ~ .menu,
#submenu2:checked ~ .menu,
#submenu3:checked ~ .menu,
#submenu4:checked ~ .menu,
#submenu5:checked ~ .menu,
#submenu6:checked ~ .menu {left:-280px;}


#toggle:checked ~ .wrapper {left:280px;} 
#toggle:checked ~ .wrapper .menuHolder {left:0;} 
#toggle:checked ~ .wrapper .trigger {left:280px;} 

.hideonphone {display:none;}
input[type="number"] {
    width: 4em;
}
.textareawidth, textarea.textareawidth  {width: 100%;max-width: 100%;}/* keep same as input.widertext but on phone can't be more than 100%*/
 table.innerpagearea tr td.rightalign {text-align: left;}   
}
/* Just for grid popping on home screen */
@media only screen and (max-width: 800px) {
   .grid-container {
  display: grid;
  grid-template-columns: 99% ;
  padding: 10px;
}
}
/* for  smartphones */
@media only screen and (max-width: 700px) {
.centreforlargedevice {text-align: left;} /* this is set to left for a phone - for the grades display */
body {-webkit-text-size-adjust: 100%;} /* stop size readjustmnet on dropdowns */
#regprogress {display:none;}
#regprogress + hr {display:none;}
.chalendar {  width: 50%;   }

li.hideonsmalldevice {display: none;}
.smalltabletop {background: hotpink;}
.datepick select {margin:0;}
/* From UpFront idea */
 table.innerpagearea  td:before {
    content: attr(data-label);
    white-space: pre;
    float: left;
    font-weight: bold;    
    width:10em;    
	color: #000;
  }  
   table.innerpagearea  tr th {display:none;}  
   table.innerpagearea tr th {background:  #DEDEDE;padding: 0.5em 2em; color:  ; text-align: left;}
   table.innerpagearea tr td {display:block ;padding: 0.5em 2em; color: #000;}
   table.innerpagearea  tr:nth-child(odd) {background: gray;}      

}

/* PRINTING */
@media print {
	html, body { padding:0; margin:0; overflow: visible; background:#FFFFFF;  width: 210mm;
		font: normal 10pt Tahoma, Verdana, Arial, Helvetica, sans-serif;  float: none; overflow: visible;}
	.content {font: normal 10pt Tahoma, Verdana, Arial, Helvetica, sans-serif; overflow: visible;height:80%;}
	.menu {display:none;}
    .reportprintedon {display:block;padding-top:2em; text-align:right;}
	.A4page {page-break-after: always; page-break-inside: avoid;}
	.content .tableTeamList { border: 2px solid #000; text-align:center;	margin-top: 6px;table-layout: fixed;}
	.content .tableTeamList tr { min-height: 2em; padding-top: 5px;  padding-bottom: 5px;  }
	.content .tableTeamList th {font-weight: bold; 	border: 2px solid #000; padding 5px 2px 5px 6px;	text-align:center;	}
	.content .tableTeamList td {vertical-align: top;  padding: 5px 6px 5px 6px; border: 2px solid #000;  	text-align:left; 	}
	.content .tableTeamList td.thin {width:7em; }
    .content:after {  content: ''; }
	#chHeaderRight {display:none;}
	#printtips {display:none;}
	.copyright {display:none;}
	/*input.btnoprint {display:none;} don't ever print buttons */
	input.btn, input.btndate, input.btntop, input.btnlarge, input.btnoprint {display:none;}
    .content .noprint {display:none;} 
}

/*QR CODE TEST*/
.qrcode-text-btn {
  display: none;
}
@media only screen and (max-device-width:750px) {
	.qrcode-text-btn {
	  display: inline-block;
	  height: 2em;
	  width: 2em;  
	  background: url(qr_icon.svg) 50% 50% no-repeat;
	  cursor: pointer;
	}
	
	.qrcode-text-btn > input[type=file] {
	  position: absolute;
	  overflow: hidden;
	  width: 1px;
	  height: 1px;
	  opacity: 0;
	}
	.qrcode-text {
	  padding-right: 1.7em;
	  margin-right: 0;
	  vertical-align: middle;  
	
	}
	
	.qrcode-text + .qrcode-text-btn {
	  width: 1.7em;
	  margin-left: -1.7em;
	  vertical-align: middle;  
	}
}