tr {
  --tr-dark: #010102;
  --tr-light: #1a0a2c;
}
/*
529 lines
themeroller colors
links ff6600 (orange)
button-normal  bg=440000, border f7931e
button-hover   bg=880000, border e7e3c1
button-pressed bg=ffa922, border ffa922

can override jqmobile here, or in e.g. index.htm

".detail .green" latter will override former based on which comes last in the css file

  --ccmint: #c1db9e;
  --ccforest: #006837;
  --ccbrown: #3b2012;
  --cctan: #F7E5CB;
*/
:root {
}
tr.tr0 { background: var(--tr-dark, #20120d); }
tr.tr1 { background: var(--tr-light, #362012); }

* {box-sizing:border-box;}

.ui-controlgroup.ui-mini, fieldset.ui-controlgroup.ui-mini {
  margin-top:-5px;
  margin-bottom:0px;
}
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: 0em 15px 0em 15px; }

.detail {
 padding-top:2px;
 color:white;
 font-size:10px;
 font-weight:normal;
}

/*  set up my palette in a more general way ?  */
.green { color:#0F0; }
.red { color:#F00; }
.white { color:white; }
.yellowgreen { color:#af0; }
.yellow { color:#f7ef1d; }
.bgwhite { background-color:white; }
td.ltgreen,div.ltgreen { color:#b2ffb2; }
td.ltred,div.ltred { color:#ffb2b2; }
td.tan,div.tan { color:#AA6; }
td.orange,div.orange { color:#F60; }
td.burly,div.burly { color:burlywood; }
td.almond,div.almond { color:blanchedalmond; }
td.chot,div.chot { color:#F35; }
td.ccold,div.ccold { color:#3CF; }
td.cWin,div.cWin { color:#0F0; }
td.cLose,div.cLose { color:#F00; }
td.pink,div.pink { color:hotpink; }
td.aqua,div.aqua { color:aqua; }
td.greybg { background-color:#444; }
td.sorted { background-color:#094520; }

td > a { color:inherit; }
div > a {  color:inherit; }

body {
 background:#000;
 color:#eee;
 margin:0px;
 font-family:Helvetica,Arial,sans-serif;
}
.logoimg {
  height:40px;
  alt:'Massey Ratings';
}
img.flagimg {
  height:20px;
  max-width:30px;    
  border-radius:15%;
  vertical-align:middle;
}
footer {
 margin:10px 0px 7px 10px;
}
a {
 text-decoration:none;
 color:#ff6600;
}
a:hover {text-decoration:underline}
.mopulldown {   /* maroon-orange pull-down menu */
 width:auto;
 background:#440000;
 color:#fff;
 border:1px solid #ff6600;
 border-radius:10px;
 padding:3px;
 margin-right:10px;
 cursor:pointer;
 font-family: Verdana, sans-serif;
 font-size:15px;
 font-weight:400;
 -webkit-appearance: none;  /*Removes default chrome and safari style*/
 -moz-appearance: none;  /*Removes default style Firefox*/
}
button.sidelinks, button.sidelinks2 {  /* on index.htm */
 width:90%;
 margin-top:5px;
 padding:7px;
 font-family: Helvetica, Arial, sans-serif;
 font-size:16px;
 font-weight:bold;
}
button.sidelinks2 {
  width:40%;
}
.mobutton {   /* maroon-orange button */
 width:auto;
 background:#440000;
 color:#fff;
 border:1px solid #ff6600;
 border-radius:10px;
 padding:7px;
 margin-right:3px;
 cursor:pointer;
 font-family: Verdana, sans-serif;
 font-size:15px;
 font-weight:400;
 -webkit-appearance: none;  /*Removes default chrome and safari style*/
 -moz-appearance: none;  /*Removes default style Firefox*/
}
button.fbbutton {   /* filter button */
 width:auto;
 background:#440000;
 color:#fff;
 border:2px solid #aaaaaa;
 padding:3px;
 margin-right:2px;
 font-family: Arial, sans-serif;
 font-size:15px;
 font-weight:600;
 cursor:pointer;
 -webkit-appearance: none; 
 -moz-appearance: none; 
}
button.fbbutton:focus {
  outline: 1px solid #fff;
  outline-offset: -3px;
}
button.fbbutton0 { border:2px solid #aaaaaa; }
button.fbbutton1 { border:2px solid #22ccff; }
button.fbbutton2 { border:2px solid #ff0000; }
button.fbbutton3 { border:2px solid #00ff00; }
span.ribbon {
  padding-left:15px;
  padding-right:15px;
  font-size:12px;
  font-family: Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}
span.ribbon > a {
  color:white;
}
.faqdiv {
  margin:5px 10px 10px 10px;
  width:90%;
  max-width:500px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.question {
 background:#440000;
 color:white;
 border:1px solid #ff6600;
 border-radius:10px;
 padding:10px 0px 10px 10px;
}
.answer {
  color:#ccc;
}
.stripe {
}
.headlogo {
 background-color:white;
 border-style:ridge;
 border-color:#AEDAB1;
 border-width:5px;
 min-width:100px;
 text-align:center;
 color:#003;
}
.headsponsor {
 text-align:center;
 padding:10px;
}
.headimg {
 max-height:120px;
 vertical-align:middle;
}
.headtd{
 padding-right: 5px;
}
.myhead {
 margin:5px 10px;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
}
.myhead a:link, .myhead a:visited { color:#ff6600; }
.ratehead a:link { color:#0088CC; }
.ratehead a:visited { color:#88ccff; }
.headslot:not(:empty) {
  margin-bottom:4px;
  padding: 4px; 
/*  padding: 5px 20px 5px 40px;  */
}
.fixedwidth {  font-family: Courier, monospace; }
/* field settings for mr table */
.fShort { /* dummy class for hiding cells */ }
.frank,.fwlt,.frankrec,.fpred,.fscore,.fqstat {
 text-align:right; 
 border-right:1px solid #555;
 padding-right: 5px;
 white-space: nowrap;
}
.frankleft {
 text-align:right; 
 border-left:1px solid #555;
 padding-right: 5px;
 white-space: nowrap;
}
.fflag {
 text-align:center;    
}
.flogo {
 text-align:center;    
}
img.logoDI {
 max-width:40px;
 max-height:40px;
}
.fteam,.fteamfull,.fconf {
 padding-left: 7px;
 white-space: nowrap;
}
.fteam {
/* border-left:1px solid #555; */
 border-right:1px solid #555;
}
.fconf,.fteamfull,.fteamright,.frborder {
 border-right:1px solid #555;
}
.fconf {
 text-align:center;
}
.fref {
 padding-left:3px;
 text-align:center;
}
.ftext {
 white-space:normal;
 padding-left: 7px;
}
.fevent {
 border-left:1px solid #555;
 padding-left: 7px;
}
.fhf {
 padding-left: 3px;
 border-left:1px solid #555;
}
.fresult {
 border-right:1px solid #555;
 text-align:center;
}
.flinks {
 border-right:1px solid #555;
 text-align:center;
}
.fbordertop {
 border-top:1px solid #555;
}
.flandlink {
 border-top:1px solid #555;
 text-align:center;
}
.fsport {
 border-top:1px solid #555;
 text-align:center;
}
.frowsort { 
 text-align:center;
}
.frowchart { 
}
.fdummy {
}
.nowrap { white-space: nowrap; }
tr.bodyrow { 
 /*
 https://fonts.google.com/    or  non-free e.g. https://www.fontsquirrel.com/fonts/acherus-grotesque
 'Lato','Source Sans Pro' also decent, maybe try a monospace for numeric fields like 'Recursive'
 line-height: 1.2;
 */
 font-family:'Radio Canada',Helvetica,Arial,sans-serif;
 font-size:14px;
 font-weight:bold;
}
tr.bodyrow > td { 
 padding-top:5px;
 padding-bottom:5px;
 border-bottom: 1px solid #888;
}
/* apply more readable font to td, but not th (open sans is used by datatel/colleague) */
td.fteam,td.ftext,td.fteamfull,td.fevent {
 font-family: 'Open Sans',Arial,sans-serif;
 font-weight: 600;
 line-height: 1.2;
}

canvas.dist { background-color:white; border: 2px solid gray; }
button.highlight{ background-color:#A00; color: #FFF; }

#rdate {
 font-size:12px;
 font-weight:bold;
 color:#ff9;
}
table.stats {
 background:#216;
 border-spacing: 15px 5px;
}
.leftpad {
 padding-left:10px;
}
.leftpad:empty {
  display: none; /* takes up no space when empty */
}
.teaminfo {
 font-size:12px;
 padding:3px;
}
.teaminfo a {
 color:#ddd;
}
a.parentlink.red { color:red;}
a.parentlink.white { color:white;}
a.parentlink:hover { color:red;}
.prevnext {
 width:40px;
 text-align:center;
}
.headrow {
 background:#fff;
 color:#333;
 font-family:"DejaVu Serif",Georgia,serif;
}
th.titleblock {
 vertical-align:top;
 border-left:1px solid #555;
 border-right:1px solid #555;
 border-bottom:1px solid #555;
}
th.blackblock {
 background:#000;
}
.headbase {
 font-weight:normal;
}
th.fulltitle {
 text-align:left;
 white-space: nowrap;    
}
.fulltitle > a {
 color:inherit;
}
.headcell {
 text-align:center;
 padding-top:5px;
 padding-bottom:5px;
 border-bottom: 1px solid #888;
 font-variant:small-caps;
 font-weight: 600;
/*text-shadow: 0.0em 0.05em black; */
}
tr.tailrow td {
 background:#fff;
 color:#333;
 font-family:"DejaVu Serif",Georgia,serif;
}
.hidden {  display:none; }
.visHidden { visibility:hidden; }

td.vatop { vertical-align:top; }
td.c { text-align:center; }
td.r { text-align:right; }
td.w5 {  width:5em; }

#navbuttonsdiv {
 display:grid;
 grid-template-columns: repeat(auto-fit,minmax(max-content,45px));
 grid-auto-rows: 30px;
 grid-gap: 8px 5px;
 max-width: 850px;  /* no more than 15 cols will appear */
}
#navbuttonsdiv button {
 background-color:#440000;
 color:#ff6600;
 border:2px solid #888888;
 font-family: Arial, sans-serif;
 font-size:15px;
 font-weight:600;
}
div.filterbuttons {
 display:grid;
 grid-template-columns: repeat(auto-fit,minmax(max-content,80px));
 grid-auto-rows: 30px;
 grid-gap: 8px 5px;
 max-width: 850px;  /* limits number of cols */
 margin-bottom: 10px;
}

/* implemented stickyHead,stickyCol May 2025 */

#SHCfullpagewrapper {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
    
#SHCverytop {
 position:sticky;
 left:0;
 width: 460px;
/*  background-color:brown;  */
/*  padding-left:10px; */
 display:inline-block;
}

#SHCtablebot {
 position:sticky;
 left:0;
 bottom:0;
/*  background-color:darkgreen;  */
 background-color:black;    /* needs this to not be transparent */
 z-index: 9;
}

#SHCverybot {
 position:sticky;
 left:0;
/*   background-color:brown;  */
 display:inline-block;
}
    
#SHCtabletop {
 position:sticky;
 left:0;
 top:0;
/*  background-color:darkgreen;  */
 background-color:black;    /* needs this to not be transparent */
 z-index: 9;
}

#SHCtable {
/* collapse causes <td>,<th> borders not to be sticky */
/* border-collapse:collapse; */
 border-collapse: separate;  
 border-spacing: 0px;
 /* width:100%;   explicit width now set by stamp.js  */
 table-layout: auto;
}

#SHCtable th, #SHCtable td {
 padding-left:5px;
 padding-right:5px;
 overflow-x:clip;   /* if too wide for table-layout:fixed */
}

#SHCtableflex {
 display: flex; /* flexbox container */
 flex-direction: row;
 flex-wrap:nowrap;
 min-height: 50vh; /* take up at least 1/2 viewport height */
 align-items: flex-start;
}

#SHCtableleft {
 margin-right: 10px; /* space between table and adright */
 flex-shrink: 0; /* Prevent the left content from shrinking */
 flex-grow: 0;
}

#SHCpw1 { min-height:140px; }  /* top playwire banner ad */
#SHCadright {
 position: sticky;
 top: 100px;  /* reset dynamically later */
 right: 0;
/*  background-color: darkred; */
 background-color: black; 
 padding: 5px;
 z-index:19;
 display:block;
}
/* hide right ad space; table expand to fill width  */
@media (max-width: 768px) {
  #SHCadright {  display:none; }
  #SHCtable {
    min-width:100vw;
    table-layout: fixed;   /* more efficient to render using explicit widths */
  }
  #SHCpw1 { min-height:90px; }
  .detail { white-space:normal; }
}
.SHCstickyhead {
 position: sticky;
 top: 100px;    /* reset dynamically later */
 background-color: inherit;
 z-index: 2;
}
td.SHCstickycol {
 position: sticky;
 left:-1px;  /* hack so that border isn't overlapped, can reset dynamically later */
/*  border-left:5px solid #000; */
 background-color: inherit; /* Inherit background from row */
 z-index: 1;
}
th.SHCstickycol {
 position: sticky;
 left:-1px;
 background-color: inherit;
 z-index: 3;
}