:root {
  --main-txt-color: black;
  --faint-text:  gray;
  /*  --main-bg-color: #c6eed6;   // needs to align with $bgc */
  --main-bg-color: #c6d6d6;
/* must be in hex to be manipulated by picstring()  #debebe; (light blue) */
  --main-heading-color: red;
  --main-padding: 2px;

  --win-color: #88FF88;    /* bg colour for wins in calendar, div lists and leaderboards (light-green) */
  --draw-color: yellow;    /* bg colour for draws in calendar and KO board elimination draws */
  --loss-color: #FF8888;   /* bg colour for losses in calendar, div lists and leaderboards (light-red) */
  --bar-color: black;      /* bg colour of KO bar */
  --tie-color: #33cc33;    /* bg tie-break colour in crosstable (darker green) */
  --replay-color: orange;  /* bg colour for KOfull draw required replay (orange) */
  --inel-color: lightgrey; /* bg colour for ineligible players (lightgrey) */
  --pdef-color: #bfbfbf;   /* bg colour for defaulted played game (darker-lightgrey) */
  
  --navtable-bg: white;
  --datecheck-bg: white;
  --table-bg: gray;
  --table-spacer: lightgrey; /* #AAAAAA; */
  --table-hspacer: black;
  /*--alt-bg:  #AFD8EA;      /*#ffe6e6;   alt bg (originally silver) */
  --alt-bg:  silver;
  --ext-bg: lightgrey;     /* external event background - silver */
  --table-wider-border: #ffcccc;  /* thicker border table for significantly overdue and date checks */
  
  --season-select-bg-current: white;
  --season-select-bg-other:  #EECCAA;  /* club login button + non-selected season bg, provisional result pale orange? */
  --button-login:  #EEEEEE;   /* dull-white? */
  --bg-non-current-panel: #EEEAAA;    /* less-bright than yellow */
}

.blacktext { color: black; font-family: arial; font-size: 16pt; text-align: center; font-weight: bold; }

body {background-color: var(--main-bg-color);  color: var(--main-txt-color); }
a{ text-decoration:none; }
a:link { color: blue }
a:visited { color: purple }
a:active { color: fuchsia }
/*a: { text-decoration: none }*/
b  { font-weight: bold;}
h0 {font-family: arial; font-size: 12pt; font-weight: bold; color: var(--main-heading-color)}  /* section headings */
h1 {font-family: arial; font-size: 14pt; font-style: italic; color: var(--main-heading-color)}
h2 {font-family: arial; font-size: 10pt; color: var(--main-txt-color)}
h3 {font-family: arial; font-size: 8pt;  color: var(--main-txt-color)}
h4 {font-family: arial; font-size: 30pt; color: #a8a0a0}
input.med_check {height: 30px; width: 30px;}

.boldoption { font-family: arial; font-size: 16pt; font-weight: bold; } /* not yet supported in select option*/

printf { color: var(--main-txt-color); }

ul {list-style-image: url('../gifs/wp.gif')}
ul.bp {list-style-image: url('../gifs/bp.gif')}

#btnclog { font-size: 14pt; background: var(--button-login); width: 180px; } /* button for club logins */

/*#btnleag { font-size: 12pt; background: var(--alt-bg); }*/
#btnleag { font-size: 14pt; background: var(--button-login);  width: 180px;}     /* button for league admin logins */

#forum { position: relative; text-align: right; font-family: arial; font-size: 16pt; font-style: italic; font-weight: bold; }

#submit1
{ font-size: 12pt; font-weight: bold; color: blue  }

/* styles not yet supported in select options */
#opt1
{ background: var(--season-select-bg-current); color: #ffffff; font-size:16px; font-weight: bold;}

#opt2
{ background: var(--season-select-bg-other); color: #ffff00; font-size:14px;}

#opt3
{ background: var(--season-select-bg-other); color: var(--main-txt-color); font-size:18px;}

#p12
{ display: block;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 4px;
  margin-right: 4px;
}

#title
{ position: relative; text-align: center; font-family: arial; font-size: 20pt; 
  font-style: italic; font-weight: bold; color: var(--table-bg);
}

/* table, td, th { border: 3px solid black;} */
/* background colour needs tr/td to define it? */

#table1   /* div/club/team navigation (near full width) panels */
{table-layout: fixed; width: 90%; background: white; white-space: nowrap;
 font-weight: bold; border: 2px solid white; padding:  var(--main-padding);
}

#table1a   /* div/club/team navigation (near full width) panels */
{table-layout: fixed; width: 60%; background: white; white-space: nowrap;
 font-weight: bold; border: 2px solid white; padding:  var(--main-padding);
}

#table2   /* (non-current season panel) */
{table-layout: fixed; text-align: center; width: 60%; background: var(--bg-non-current-panel);
 color: var(--main-heading-color); font-weight: bold; font-style: italic;
 white-space: nowrap;  border: 0px solid white; padding: var(--main-padding); 
}

#table3  /* latest/login/club + notice panel */
{table-layout: fixed; text-align: center;  background: var(--season-select-bg-current);
 color: var(--main-txt-color); border: 4px; border-spacing: 5px; padding: var(--main-padding);
}

#table4  /* due-pending panel for latest team scores with thick multitexture border */
{table-layout: fixed; text-align: center;  background: var(--table-bg);
 color: var(--main-txt-color);  padding: var(--main-padding);
  border-top: 10px solid #c0e0e6;
  border-left: 10px solid #c0d0e6;
  border-right: 10px solid #c0d0e6;
  border-bottom: 10px solid var(--alt-bg);
}

#table4a  /* login panel with thick multitexture border, no inter-cell border */
{table-layout: fixed; text-align: center;  background: var(--main-bg-color);
 color: var(--main-txt-color);  padding: var(--main-padding);
  border-top: 10px solid #c0e0e6;
  border-left: 10px solid #c0d0e6;
  border-right: 10px solid #c0d0e6;
  border-bottom: 10px solid var(--alt-bg);
}

#table5  /* formal dispute, alt-background table */
{table-layout: fixed; text-align: center;  color: var(--main-txt-color);
 border: 6px;  padding: var(--main-padding);
}

#table6  /* thicker border table for significantly overdue */
{table-layout: fixed; text-align: center;  background: var(--table-bg);
 color: var(--main-txt-color); padding: var(--main-padding);
   border-top: 10px solid pink;
  border-left: 10px solid hotpink;
  border-right: 10px solid hotpink;
  border-bottom: 10px solid crimson;
}

#table7  /* bordered table for login roles */
{table-layout: fixed; text-align: center;  background: var(--alt-bg); 
 border-collapse: separate; border-color: black; border-width: thick;
 color: var(--main-txt-color); border: 2px solid black;  border-spacing: 5px; padding: var(--main-padding);
}

#table8  /* bordered table for login roles */
{table-layout: fixed; text-align: center;  background: var(--table-wider-border);   border-collapse: separate; border-color: black; border-width: thick;
 color: var(--main-txt-color); border: 5px solid black;  border-spacing: 5px; padding: var(--main-padding);
}


#td1 
{font-family: arial; font-size: 12pt; text-align: center; white-space: normal;
 border: 2px solid black; color: var(--main-txt-color); padding: 2px;
}
 
 #td1_left
{font-family: arial; font-size: 12pt; text-align: left; white-space: normal;
 border: 1px solid var(--table-bg); color: var(--main-txt-color); background: var(--navtable-bg); }

/*
 th {font-size: 12pt; border: 3px; background: var(--main-bg-color); color: var(--main-txt-color); }
 */
th.wrdq {font-style: word-wrap: break-word; width: 230px;}

#tdw  /* normal white background table */
{font-family: arial; font-size: 12pt; text-align: center; white-space: normal;
  border: 1px solid var(--table-bg); background: white; 
 color: var(--main-txt-color); padding: 2px;
}

#td1n  /* normal light background table */
{font-family: arial; font-size: 12pt; text-align: center; white-space: normal;
  border: 1px solid var(--table-bg); background: var(--navtable-bg); 
 color: var(--main-txt-color); padding: 2px;
}

#td1s /* normal light background table. smaller font */
{font-family: arial; font-size: 10pt; text-align: center; white-space: normal;
  border: 1px solid var(--table-bg); background: var(--navtable-bg); 
 color: var(--main-txt-color); padding: 2px;
}

#td1l /* normal light background table. larger font */
{font-family: arial; font-size: 16pt; text-align: center; white-space: normal;
  border: 3px solid var(--table-bg); background: var(--navtable-bg); 
 color: var(--main-txt-color); padding: 8px;
}

#td2   /* table field heading text */
{background: var(--main-bg-color); color: var(--main-txt-color);  border: 2px;
 font-family: arial; font-size: 10pt; font-weight: lighter; text-align: left;
}

#td_spacer /* thick line type spacer in table col */
{ background: var(--table-spacer); width: 1; }

#td_hspacer /* thick line type spacer in table row */
{ background: var(--table-hspacer); height: 5; }

#tdinel /* field showing ineligible player (lightgrey) */
{ background: var(--inel-color); color: var(--faint-text); }

#tdpdef /* field showing ineligible player (lightgrey) */
{ background: var(--pdef-color); color: var(--faint-text); }

#tr1   /* std table text */
{background: var(--main-bg-color); color: var(--main-txt-color); font-weight: bold; }

#trx   /* table text for other/ext event*/
{background: var(--ext-bg); color: var(--main-txt-color); font-weight: bold; }

#trwb   /* table text for other/ext event*/
{background: white; color: var(--main-txt-color); font-weight: bold;  border: 4px; }

#trc0 /* day 0 due-pending row  */
{ background: var(--main-bg-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trc1 /* day 1 due-pending row  */
{ background: var(--main-bg-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trc2 /* day 2 due-pending row  */
{ background: pink; color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trc3 /* day 3 due-pending row  */
{ background: hotpink; color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trc4 /* day 4 due-pending row  */
{ background: deeppink; color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trc5 /* day 5 due-pending row  */
{ background: crimson; color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trc6 /* day 6+ due-pending row  */
{ background: red; color: var(--main-txt-color); font-weight: bold; border: 4px; }



#trwin   /* std table text */
{background: var(--win-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trtie   /* std table text */
{background: var(--tie-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trbar   /* bar in table, eg KO */
{background: var(--bar-color); height: 5px; }

#trdraw   /* std table text */
{background: var(--draw-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trreplay   /* std table text */
{background: var(--replay-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }

#trloss   /* std table text */
{background: var(--loss-color); color: var(--main-txt-color); font-weight: bold; border: 4px; }



#tr1n   /* nav table, white background */
{background: var(--datecheck-bg); color: var(--main-txt-color); font-weight: bold; border: 2px; }

#tr1h    /* larger table text with background for some column heading*/
{background: var(--main-bg-color); color: var(--main-txt-color); font-weight: bold; border: 2px; 
 text-align: center; font-family: arial; font-size: 16pt; 
}

#tr1halt    /* larger table text and alternative background, for div and leaderboard column heading*/
{background: var(--alt-bg); color: var(--main-txt-color); font-weight: bold; 
 border: 4px; border-color:  solid black; text-align: center; font-family: arial; font-size: 16pt; 
}

tr {font-size: 12pt; background: var(--main-bg-color); color: var(--main-txt-color); }
tr.nonecf {color: #555555; font-style: italic; background-color: #d0d6d6;} tr.italic {color: #555555; font-style: italic;}
/* tr.italic {color: #555555; font-style: italic;} */
tr.std {font-size: 14pt;}
tr.small{font-size: 12pt;}
th.center {font-weight: bold;}

/*input.search { width:2em;  height:2em;}*/

/*table.lg {background-color: #D3D3D3; border: 6; font-size: 13px; text-align: center;}
.feed {
  margin-left: 3px;
  padding: 0 0 0 20px;
  background: url("../images/feed_icon_14x14.png") no-repeat 0 50%;
} 
*/
/*</STYLE>*/