@import url("https://fonts.googleapis.com/css?family=Kanit:300,400,500,500i,600%7CRoboto:400,500,600,700,800,900");
@import url(//fonts.googleapis.com/css?family=Archivo+Narrow:400,500,600,700);


.banner {
	width: 98%;
	height: 63px;
	padding-left: 2%;
	padding-top: 8px;
	position: relative;
	background-image: url(/images/bg/scoreboard-faded.png);
	background-color: #2A637C;
	/*background-color: rgba(42,99,124,0.9);*/
	box-shadow: -2px 3px 2px rgba(0,0,0,0.5);
	margin-top: 10px;
	margin-bottom: 18px;
}
.banner h1 {
	font-family: 'Oswald',sans-serif;
	font-size: 47px;
	line-height: 1em;
	color: white;
	text-shadow: 2px 2px 2px #000;
	margin: 0 0 2px 0;
	border-bottom: none;
	padding: 0;
	background-color: transparent;
	letter-spacing: 2px;
}
.banner p {
	font-family: 'Oswald',sans-serif;
	font-size: 28px;
	text-align: center;
	color: white;
	text-shadow: 2px 2px 1px #000;
	margin: 2px 0 0 0;
	background-color: transparent;
	position: absolute;
	top: 3px;
	right: 0;
}
.banner img { vertical-align: middle; }

.confGroup {
	border: 1px solid #ccc;
	background: #d5dce0;
	clear: both;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
#content .confGroup h2 {
	font: bold 16px verdana;
	color: white;
	background: #005 url(/images/design/scoreboard-header-bg.gif) repeat-x;
	height: 20px;
	padding: 2px;
	margin: 2px;
	width: 100%;
}
.confGroup #arrow {
	height: 22px;
	width: 26px;
	position: absolute;
	top: 4px;
	right: 17px;
	z-index: 2;
	cursor: pointer;
}
.confGroup div.open   { background: transparent url(/images/design/arrow-up.png) no-repeat; }
.confGroup div.closed { background: transparent url(/images/design/arrow-down.png) no-repeat; }


.game {
	width: 47%;
	/*float: left;
	height: 230px;*/
	overflow: hidden;
	/*background: #e8ecee;*/
	background: white;
	margin: 10px 1%;
	border: 1px solid #999;
	padding: 2px 0.25%;
}

.game p { font: 11px verdana; margin: 4px; padding: 0; }
.game table { border: 0; width: 100%; margin: 0; }
.game table img { height: 30px; width: 30px; }
.game a, .game td a { text-decoration: none; color: #0069aa; }
.game a:hover, .game td a:hover { text-decoration: none; color: #339bff; }
.game p.meta { font-size: 10px; line-height: 1.5 }
.game p.live { text-align: center; background: #eed; padding: 4px; }

#mainscore td, #LBstatus p { font-size: 18px; font-weight: bold; }
#mainscore td.gamestatus, #LBstatus p.gamestatus { font-size: 12px; font-weight: normal; }

#linescore { border-bottom: 2px solid black; margin: 4px 0; }
#linescore tr.header td { background: #dedec6; border-top: 2px solid black; color: #222; font-weight: bold; }

.game img[src="/images/design/help2.gif"] { vertical-align: text-bottom; height: 15px; width: 12px; }

p.date { font: bold 18px Arial; margin: 6px 0; }



.gameinfo  { clear: both; margin-top: 10px; }
.gameinfo table { border: 0; width: 98%; border-spacing: 0 1px; }
.gameinfo td { font-size: 12px; }
.gameinfo tr.pheader td { background: #dedec6; color: #222; font-weight: bold; }
.gameinfo tr.vis td { background: #eed;}
.gameinfo tr.home td { background: #eee; }


#LBplays { margin: 10px auto; width: 98%; }
#LBplays ul { list-style-type: none; overflow: hidden; margin: 0; padding: 0; }
#LBplays li { cursor: pointer; padding: 2px; border: 1px solid #555; float: left; width: 80px; border-left: 0; margin: 0; }
#LBplays li:first-child { border-left: 1px solid #555; }
#LBplays li.off { background: #dedec6; color: black; }
#LBplays li.on { background: #900; color: white;  border-bottom: 0; }
#LBplays .period { display: none; border: 1px solid #555; padding: 3px; margin-top: -1px; }
#LBplays #LBper1 { display: block; }
#LBplays p { font-size: 12px; margin: 1px; border-bottom: 1px solid #ddd; }
#LBplays p.header { color: white; background: black; font-size: 13px; padding: 3px; margin-bottom: 3px; }

#refresh a.refNotPicked { color: blue; text-decoration: underline; }
#refresh a.refPicked { color: black; text-decoration: none; cursor: text; }

.notes { overflow: hidden; }
.notes p { float: left; margin-left: 25px; margin-top: 2px; margin-bottom: 2px; font-size: 9px; }
.notes p:first-child { margin-left: 0; }

.railAd { margin-top: 100px; }
.railAd:first-child { margin-top: 0; }
.railAd div { margin: 0 auto; }

.stdDrop { width: 82px; }
select { background: white; font-weight: normal; font-size: 10px; }
button { font-size: 15px; padding: 4px; }




#content.LB { width: 98%; padding: 0 1%; background: #000; color: #fff; }
.LB h1 { text-align: center; font: 12px caption, sans-serif; background-color: #222; color: white; padding: 3px 0; margin: 0; display: none; }

#LBstatus { font-family: 'Source Sans Pro'; font-weight: 600; font-size: 22px; text-align: center; position: relative; height: 60px; margin-top: 10px; }
#LBstatus > div { float: left; width: 50%; height: 100%; display: flex; align-items: center; border-radius: 0 10px 0 0; }
#LBstatus > div:first-child { flex-direction: row-reverse; border-radius: 10px 0 0 0; }
#LBstatus > div > div { margin: 0 0.5em; }
#LBstatus > div.data { 
	position: absolute; 
	width: 120px; 
	color: white; 
	background: black; 
	left: 50%; 
	top: 78%; 
	margin-left: -60px; 
	line-height: 1em; 
	font: bold 15px Courier; 
	display: block;
	padding: 4px;
	height: 16px;
	border-radius: 5px;
}
#LBstatus img { height: 30px; width: 30px; }
#LBstatus .score { font-size: 45px; font-weight: 900; }

#LBlatest { background: #444; padding: 15px 6px 6px; text-align: center; }
#LBlatest > p { margin: 0; }

#LBcontrols { background: #333; padding: 6px; text-align: center; color: #999; text-transform: uppercase; margin-bottom: 15px; }
#LBcontrols > p { font-size: 10px; margin: 0; }
#LBcontrols a { display: inline-block; margin: 0 0.5em; }
.LB #refresh a.refNotPicked { color: #aaa; text-decoration: underline; }
.LB #refresh a.refPicked { color: #ccc; text-decoration: none; cursor: text; }

#LBlinewrap { overflow: hidden; width: 100%; margin: 0 auto; }
#LBlinescore, #LBshots { margin: 0 10px; float: left; width: 46%; border: 0; }
#LBlinescore td, #LBshots td { font-size: 13px; }
#LBlinescore tr.header td, #LBshots tr.header td { background: #dedec6; color: #222; font-weight: bold; }
#LBlinescore td, #LBshots td { background: #eed; }


#content.box > div { margin-bottom: 30px; border: 1px solid #ddd; }
#content.box > div#meta { border: none; margin-left: auto; margin-right: auto;  }

.box div#linescore { display: flex; justify-content: space-between; border: none; flex-wrap: wrap; }
.box div#linescore > div { width: 32%; min-width: 220px; flex: 1; border: 1px solid #ddd; margin-right: 5px; }

.box div#playersums { overflow: hidden; border: none; display: flex; justify-content: space-between; flex-wrap: wrap; }
.box div.playersum { border: 1px solid #ddd; width: 48%; min-width: 345px; flex: 1; }
.box div.playersum:first-child { margin-right: 5px; }
.box table { width: 100%; }
.box #shootout {margin-top: 0; }

.box #meta { display: flex; flex-wrap: wrap; max-width: 600px; justify-content: center; }
.box #meta > div { text-align: center; width: 100% }
.box #meta > div.team { text-align: center; width: auto; padding: 0 15px; }
.box #meta img.logo { height: 140px; margin: 10px; max-width: 240px; }
.box #meta h2 { margin-top: 0; margin-bottom: 3px;     font-size: 70px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.box #meta h4 { margin-top: 0; margin-bottom: 3px;     font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 14px;
}
.box #meta p { margin: 3px 0 5px; }

.box #scoring img { width: 50px; height: auto; }
.box #scoring tr.vscore td, #penalties tr.vscore td { background: #e9e1d6; }
.box #scoring tr.hscore td, #penalties tr.hscore td { background: #d7e4ea; }

#content.box #linechart { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border: 0; }
.box #linechart h3 { color: #fff; background: #333; margin: 0; padding: 5px; font-size: 18px; font-weight: bold; }
.box #linechart h4 { color: #000; background: #f1e7d5; margin: 0; padding: 5px; text-align: center; font-size: 18px; font-weight: bold; }
.box #linechart > div { border: 1px solid #ddd; }
.box #linechart > div > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; justify-items: center; }
.box #linechart > div > div.d { grid-template-columns: 1fr 1fr; }
.box #linechart > div > div > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 3px;}

@media screen and (max-width: 1023px) {
	#content.box #linechart { display: block; }
}


@media screen and (max-width: 1080px) /*and (min-width: 641px)*/ {
	.banner p { font-size: 1.8em; }
	.banner img { width: 30%; }
}
@media screen and (max-width: 800px) {
	.game { width: 97%; width: calc(97.5% - 2px); float: none; height: auto; }
}
@media screen and (max-width: 640px) {
	.banner { height: auto; }
	.banner img { display: block; width: auto; }
	.banner p { text-align: left; }
	#mainscore td, #LBstatus p { font-size: 14px; }
	.railAd { margin-top: 10px; }
	#content .comment p { color: white; font-size: 1px; }
	#content .comment p a { color: white; font-size: 12px; color: #113377; }
	#content .comment img { display: block; height: 12px; }

	.box #meta img.logo { height: 100px; margin: 10px; max-width: 140px; }
	
	.box div.playersum:first-child { margin-right: 0; }

}

.boxheader {
	color: black;
	font: bold 10pt tahoma,helvetica,sans-serif;
	padding: 2pt;
	border-bottom: 1pt solid black;
	border-right: 2pt solid black;
	margin: 0;
}

.topstories {
	color: black;
	font: bold 10pt tahoma,helvetica,sans-serif;
	padding: 2pt;
	border-bottom: 1pt solid black;
	border-right: 2pt solid black;
	margin: 0 210px 0 0;
}

.boxcontent { padding: 2pt; }
.boxcontent p { margin-bottom: 0; }
.boxcontent ul { margin-top: 0; }

.boxcontent h5 {
	font: small-caps bold 10pt verdana, arial, helvetica, sans-serif;
	color: #500;
	margin: 5px 0 0 0;
}

.boxcontent li {
	padding: 1pt;
	margin-left: -13pt;
	font: 9pt verdana, arial, helvetica, sans-serif;
}

.bnheadline {
	font: bold 20pt verdana, arial, helvetica, sans-serif;
	margin: 0;
}

.bnlogo, .bnaction { float: right; margin: 0 0 3pt 3pt; }
.bnheadshot { float: left; margin: 0 3pt 3pt 0; }
.bnfull { margin: 0 auto 0 auto; }
.bnaction img, .bnfull img, .bnheadshot img { border: 1pt solid black }

#hli .caption {
	font: bold 8pt arial, helvetica, sans-serif;
	color: #555;
	text-align: left;
}

#hli .credit {
	font: bold 7pt verdana,arial, helvetic, sans-serif;
	color: #000;
	text-align: right;
}

img.teaser {
	border: 1pt solid black;
	float: left;
	width: 80px;
	margin-right: 2pt;
}

img.teaserlogo {
	border: 0;
	float: left;
	width: 80px;
	margin-right: 2pt;
}

.breakoutbox {
	border: 1pt solid black;
	float: right;
	width: 200px;
	margin: 0 2pt 4pt 4pt;
}

.infobox {
	padding: 6pt;
	border: 1pt solid black;
	margin: 0 0 10pt 0;
}


/* INLINE TEXT STYLINGS */
.highlight    { font-weight: bold; color: #903; background: #fff; }
.alert        { color: #f00; background: #ffc; }
.payattention { color: #00f; background: #fff; }

.infoheader {
	font: bold 12pt tahoma,helvetica,sans-serif;
	color: #700;
	margin: 2pt 0 2pt 0;
}

img.logo { border: 0; }
img.smallheadshot {
	float: left;
	width: 75px;
	height: 101px;
	border: 1pt solid black;
	margin-right: 3pt;
	margin-bottom: 3pt;
}

.separator { clear: both; }
.sepleft { clear: left; }

.splitmessage {	border-bottom: 1pt solid black; }
.smalltable   { margin: auto; }
.smalltablesplit {
	border-bottom: 1pt solid black;
	margin: auto;
	padding-bottom: 8pt;
}
.bump { margin-left: 25pt; }

#recaplogos {
	float: right;
	width: 100pt;
	text-align: center;	
}

#conflid {
	height: 32px;
	background: #300 url(/images/banners/lid-bg.gif);
}

.button2 { display: none; }

/* STAT TABLES */

tr.stats-header td, tr.stats-header th {
	font-size: 18px;
	font-weight: bold;
	padding: 1pt;
}

tr.stats-row0 td {
	font-size: 18px;
	font-weight: normal;
	padding: 1pt;
}

tr.stats-row1 td {
	font-size: 18px;
	font-weight: normal;
	padding: 1pt
}

tr.stats-section td {
	font-size: 18px;
	font-weight: bold;
	padding: 1pt;
}


/* Box */

 
.box #meta img.logo { max-height: 200px; }


#content .ContextBar {
	text-align: center;
	background: #ddd;
	color: #333;
	/*height: 34px;
	height: 50px;*/
	box-sizing: border-box;
	margin-left: 0;
	margin-bottom: 30px;
	/*overflow: hidden;*/
	box-shadow: 0 4px 9px rgba(0,0,0,0.3);
	position: relative;
	display: flex;
	/*justify-content: center;*/
	font-family: 'Roboto';
	font-size: 16px;
}
.ContextBar * { box-sizing: border-box; }
/* use the new font */
.ContextBar > li { 
	background: transparent; 
	border-left: 1px dotted #bbb; 
	margin: 0; 
	position: relative; 
	max-width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ContextBar > li:first-child { border-left: none; }
.ContextBar > li:hover, .ContextBar > li.current { background: #003478; color: #fff; }
.ContextBar > li > a { 
	display: block; 
	height: 100%; 
	padding: 10px 20px; 
	background: inherit; 
	color: #003478; 
	text-decoration: none; 
	position: relative;
	font-weight: bold;
}
.ContextBar > li > a:hover { color: inherit; }
.ContextBar > li.hasmore > a { padding: 10px 23px 10px 10px; cursor: pointer; }
.ContextBar > li.hasmore > a:after { 
	content: "\25BC";  /* different glyph here? */
	position: absolute;
	right: 8px;
	top: calc(50% - 12px);
	font-size: 0.9em;
}
.ContextBar > li.hasmore:hover > a:after {
	content: "\25B2";
}
.ContextBar > li.condensed { display: none; }
.ContextBar > li > div {
	/*display: none;  doesn't work with transitions */
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	max-height: 300px;
	/* this works if done relative to UL, but if relative to LI, it will only go as wide as the LI unless you explicity set 
	min-width: 300px;
	max-width: 550px;
	*/
	width: 500px;
	border: 18px solid #444;
	background: #444;
	color: white;
	padding: 0 7px;
	text-align: left;
	overflow-y: auto;
	font-size: 14px;
	z-index: 999;
	transition: all 0s 0.5s;
}
#content .ContextBar > li:hover > div { /*display: block;*/ visibility: visible; }
#content .ContextBar > li > div a { background: inherit; color: inherit; font-weight: normal; }
#content .ContextBar div li.current > a { color: #a5bfb5; text-decoration: none; }
#content .ContextBar > li > div a:hover { color: #ccc; }
#content .ContextBar > li > div ul { margin-left: 20px; }
#content .ContextBar > li > div li { margin: 0 0 6px 0; }
#content .ContextBar > li > div ul.linear li { display: inline-block; margin-right: 20px; }
#content .ContextBar > li > div p { margin: 0 0 3px; padding: 0; font-size: 15px; line-height: 18px; color: #bee0c4; }

#content .ContextBar > li.teamlist > div { width: 300px; }
#content .ContextBar > li.teamlist > div ul { margin: 0 0 8px; }
#content .ContextBar > li.teamlist > div li { margin: 0; padding: 0; list-style-type: none; }
#content .ContextBar > li.teamlist > div li a { display: block; padding: 3px 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#content .ContextBar > li.teamlist > div li a:hover { background: #777; }



	#content .ContextBar { flex-wrap: wrap; }
	.ContextBar > li { max-width: none; }
	.ContextBar > li.condensed { display: flex; }
	.ContextBar > li.index { width: 100%; border-bottom: 1px dotted #bbb; order: -1; /* this insures a 'index' is always on top in mobile, even if not first in the settings */ }
	.ContextBar > li.full { display: none; }
	.ContextBar > li > div { border: 0; padding: 16px 3%; width: 200%; z-index: 10; box-shadow: 2px 13px 35px -4px #000; }
	.ContextBar > li.index > div { width: 100%; }
	#content .ContextBar > li.teamlist > div { width: 200% }
	#content .ContextBar > li.teamlist ul { display: flex; flex-wrap: wrap; }
	.ContextBar > li.teamlist li { width: 24%; }
	.ContextBar > li > div li { padding-top: 10px; font-size: 1.2em; }
	#content .ContextBar > li > div p { padding-top: 8px; border-top: 1px solid #555; }
	#content .ContextBar > li > div p:first-child { padding-top: 0; border-top: none; }



/* ********************* TABLES ************************ */

.stickywrap, .stickyscroll { width: 100%; overflow-x: auto; }
.stickyscroll { height: 20px; }
.stickyscroll > div { height: 100%; }

td.label { text-align: right; }

thead th { text-align: left; }
tr.stats-header td, tr.stats-header th, thead td, thead th { background: #e9e1d6; color: #000; font-weight: bold; padding: 4px 2px; }
tr.stats-header td a, tr.stats-header th a, thead td a, thead th a { background: #f1e7d5; color: #000; text-decoration: underline; }
tr.stats-header td a:hover, tr.stats-header th a:hover, thead td a:hover, thead th a:hover { background: #ff9; }
tr.stats-section td { background: #333; color: #fff; font-weight: bold; padding: 5px 5px; }
tr.stats-section td a, tr.stats-section th a             { color: #eef; }
tr.stats-section td a:hover, tr.stats-section th a:hover { color: #ff9; }

table.data { min-width: 60%; }
table.data td, table.data th { text-align: right; }
table.data td.left, table.data th.left { text-align: left; float: none; }
table.data td.center, table.data th.center { text-align: center; }
table.data.notstats td, table.data.notstats th { text-align: left; }
table.data.notstats td.center, table.data.notstats th.center { text-align: center; }
table.data.notstats td.right, table.data.notstats th.right { text-align: right; }
table.data td:nth-child(1), table.data th:nth-child(1) { text-align: left; }
table.data.hasrank td:nth-child(2), table.data.hasrank th:nth-child(2) { text-align: left; }
table.data td:nth-child(1).right, table.data th:nth-child(1).right { text-align: right; }
 

 
table.data tfoot td { background-color: #555; color: #eee; }
table.data tr.stats-header td, table.data tr.stats-header th { background: #ffcc80; white-space: nowrap; }
table.data tr.stats-header:nth-child(odd) td, table.data tr.stats-header:nth-child(even) td { background: #ffcc80; }
table.data.roster img { width: 21px; }
table.data.pw tr.made td, table.data.pw tr.notuc.made td { background-color: #c0ceea; }
table.data.pw tr.notuc td { background: #fedbd6; }

table.sortable thead th { cursor: pointer; text-align: right; }
table.sortable thead th.tablesorter-headerAsc, table.sortable thead th.tablesorter-headerDesc { background-color: #ddaa80; }
table.sortable thead th.tablesorter-header > div:before { padding-right: 4px; font-size: 1.2em; display: inline-block; line-height: 1em; }
table.sortable thead th.tablesorter-headerAsc > div:before { content: '\2191'; }
table.sortable thead th.tablesorter-headerDesc > div:before { content: '\2193'; }

#content table.data tr.sked-header td { background: #ddd; color: #000; font-weight: bold; padding: 4px 2px; border-top: 1px solid black; }
#content table.data tr.stats-section td { background: #333; color: #fff; font-size: 18px; }
#content table.data tr.stats-section td a, #content table.data tr.stats-section:hover td a { background: transparent; }
#content table.data tr.empty td { background: #fff; font-size: 2px; }
#content table.roster td { white-space: nowrap; }

td.result, span.result { font-weight: bold; }
td.result.W, span.result.W { color: green; }
td.result.L, span.result.L { color: orange; }
td.check:before { content: '\2713'; font-weight: bold; font-size: 1.2em; line-height: 1em; }

table.activeOnly tbody tr { display: none; }
table.activeOnly tbody tr.active { display: table-row; }


/* NCAA Results Pages */
tr.rnd td { background: #eee; font-weight: bold; }
tr.seriesresult td { border-bottom: 1px solid #ddd; font-style: italic; text-align: center; }
tr.ff td { text-align: center; font-weight: bold; padding: 6px 0; background: #900; color: #fff;  }



#content h2 {
    font-size: 22px;
    color: #111111;
    padding: 0 14px 14px 14px;
    font-family: 'Roboto';
    font-weight: 600;
	text-align: center;
} 


.section_1 h4 {
    color: #111111;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 0px;
}


#linescore td, th {
    padding: 5px;
	border: 1px solid #ddd;
}

#scoring td, th {
    padding: 5px;

}


#penalties td, th {
    padding: 5px;

}


#goalies td, th {
    padding: 5px;

}


#playersums td, th {
    padding: 5px;
	border: 1px solid #ddd;
}


.box a {
    text-decoration: underline;
}

.box a:hover {
    color: #4285f4;
}


/* gray background factbox -- "bio" class gets you white bg and faded border */
.factbox { border: 1px solid #aaa; padding: 10px; background: #eee; overflow: hidden; border-radius: 5px; }
.factbox h2 { margin: 2px; padding: 3px; }
.factbox td { background-color: transparent; }
.factbox p { margin: 5px 0 0 0; }
.factbox.bio { background: white; margin-bottom: 15px; border: 1px solid #ddd; display: flex; align-items: center; }
.factbox .image       { float: left;  margin: 0 10px 0 0; width: 180px; }
.factbox .image.right { float: right; margin: 0 0 0 10px; }
.factbox h4 {
	font: 15px 'Roboto Condensed';
    margin: -10px -10px 8px;
    color: white;
    padding: 2px 2px 2px 10px;
    text-shadow: 1px 1px 1px #000;
    background: #555;
    background-image: -webkit-gradient(linear, center top, center bottom, to(#666), from(#000));
    background-image: -webkit-linear-gradient(center top , #666, #000);
    background-image: -moz-linear-gradient(center top , #666, #000);
    background-image: linear-gradient(center top , #666, #000);
}



/* ********************* GRIDS ********************** */

/* ... large div boxes, full width, with headers
   almanac/index.php (uses alt)
   almanac/tournaments-index.php
   reports/conf-index.php
   reports/season-index.php  */
.gridindex > div { border: 1px solid #ddd; margin-bottom: 10px; }
.gridindex > div > div { padding: 10px; }
#content .gridindex h2 { margin: 0; padding: 5px; background: #009; color: white; }
.gridindex h3 { margin: -10px -10px 10px; padding: 5px; background: #ddd; }
.gridindex li { margin-bottom: 8px; font-size: 1.1em; }
.gridindex ul.linear li { display: inline-block; margin-right: 8px; }
/* alt uses a grid ... similar to flexgrid, but uses the headers above - so gives a different look than flexgrid */
@media screen and (min-width: 1160px) {
	.gridindex.alt {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
		grid-column-gap: 10px;
	}
	.gridindex.alt li {
		background-color: rgba(200,200,200,0.2);
		list-style-type: none;
		padding: 8px;
		margin-left: 0;
		border-top: 1px dotted #ccc;
		border-bottom: 1px dotted #ccc;
	}
	.gridindex.alt li a { text-decoration: none; }
}


/* ... boxes meant to 'float' next to each other, no headers
   reports/conf-index 
   news/index.php
   stats/recordbook.php  (with tables inside it - what's the difference between this and table_grid?)
   users/
   women/index.php      */
.flexgrid { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); }
.flexgrid h3 { margin-bottom: 3px; }
.flexgrid > div > table { width: 100%; }
.flexgrid > div > p { margin: 5px 0; width: 100%; }
.flexgrid > div > div { text-align: center; }
.flexgrid img { height: 100px; max-width: 100%; }
.flexgrid li { margin-bottom: 8px; }
.flexgrid.articles li {
    margin-bottom: 8px;
    background: #eef;
    list-style-type: none;
    margin-left: 0;
    padding: 8px;
    border: 1px dotted #aac;
}
/* ... shaded backgrounds and borders
   reports/conf-report.php
*/
.flexgrid.results > div { background: #eef; padding: 10px; border: 1px dotted #aac; }
.flexgrid.results h2 { margin-top: 0; }

.flexgrid.alt { display: flex; justify-content: space-between; }
.flexgrid.alt > div { margin-left: 1%; min-width: 250px; flex: 1; }
.flexgrid.alt > div:first-child { margin-left: 0 }
.flexgrid.alt img { height: auto; }
/*
   reports/ncaa/NCAAresults.php
   reports/ncaa/NCAAresults-team.php
*/
.factbox.flexgrid { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
.factbox.flexgrid > div.full { grid-column-start: 1; grid-column-end: end; }
.factbox.flexgrid .factbox_image { float: none; margin: 0; text-align: center; }
.factbox.flexgrid .factbox_image img { max-width: 210px; }


/* ... tabular data ... e.g. player bio / arena bio */
.gridinfo {
	display: grid;
	grid-template-columns: max-content 1fr max-content 2fr;
	grid-row-gap: 8px;
    grid-column-gap: 20px;
}
.factbox.bio .gridinfo { grid-template-columns: max-content 1fr; grid-column-gap: 30px; }
.gridinfo > div:nth-child(odd) { font-weight: bold; }

#content h1 {
    font-size: 50px;
    color: #111111;
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    font-weight: 700;
	padding-bottom: 20px;
}

#content td, #content th { font-size: 18px; padding: 6px 5px; }

 
table.full { width: calc(100% - 2px); }
.comment table { margin-left: 0; margin-right: 0; }
tr.empty:first-child { display: none; }

#teamrankings { width: 98%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
#teamrankings table { width: 48%; height: 200px; /* with flexbox, height practically acts as min-height, because flexbox default is to 'stretch' - height: auto doesn't work though */ }

.flexcontainer { width: 98%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.flexcontainer table { margin: 0 0 10px; width: 47.5%; }

#content .light td { font-size: 11px; }

 
td.mobile, th.mobile { display: none; }

ul#searchresults li { padding-bottom: 15px; }


table.metrics td, table.metrics th { font-family: Arial; text-align: center; }
table.metrics tbody td { border-bottom: 1px solid #ccc; white-space: nowrap; }
table.metrics thead td { font-weight: bold; }
#content table.metrics thead tr.stats-section td { font-weight: bold; font-size: 1.2em; text-align: left; }
table.metrics thead tr.headerrow th, table.metrics tbody tr.headerrow td { border-bottom: 1px solid #000; cursor: pointer; font-weight: bold; text-align: center; }
table.metrics .headerrow td.name { background-color: #f1e7d5; }
table.metrics tfoot td { border-top: 1px solid #000; }

table.metrics .tot { background-color: #ddd; }
table.metrics .tot.tsa { background-color: #ccc; }
table.metrics .pr3, table.metrics .evs { background-color: #dde; }
table.metrics .pr3.tsa, table.metrics .evs.tsa { background-color: #ccd; }
table.metrics .ppl { background-color: #edd; }
table.metrics .ppl.tsa { background-color: #dcc; }
table.metrics .cls { background-color: #ded; }
table.metrics .cls.tsa { background-color: #cdc; }
table.metrics .name { text-align: left; }

table.metrics tbody tr:hover td { background: #c7dcc9; }
table.metrics tbody tr:hover .tot.tsa { background-color: #c7dcc9; }
table.metrics tbody tr:hover .pr3.tsa, table.metrics tbody tr:hover .evs.tsa { background-color: #c7dcc9; }
table.metrics tbody tr:hover .ppl.tsa { background-color: #c7dcc9; }
table.metrics tbody tr:hover .cls.tsa { background-color: #c7dcc9; }


div.widetableWrap { width: 100%; overflow-x: auto; }


.pwc { background: black; width: 340px; z-index: 25; padding-left: 10px; /* text-align: right; */ }
.pwc a, .pwc a:hover { color: #99f; text-decoration: none; font-size: 1.2em; display: block; padding: 4px; }
.pwc th { color: white; text-align: center; }


#submenu { margin-top: 0; padding: 7px; background: #894305; color: white; font: 11px 'Trebuchet MS'; overflow: hidden; }
#submenu p { margin: 2px 0; }
#submenu a { color: #e1c4a9; }
#submenu a:hover { color: #f4e1d0; }


#widget_liveScoreboard p.lsbFooter { text-align: center; }
#widget_liveScoreboard #lsbWrapper { padding: 2px 0; }
#widget_liveScoreboard table td { padding: 0; height: 15px }
#widget_liveScoreboard + .navstrip { margin-top: 8px; }

p.ratingInvalid {
	padding: 30px 20px;
	background: #dbb0b0;
	font-weight: bold;
	border: 1px solid #ac7f7f;
	margin: 15px 30px;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #333;
}

@media screen and (max-width: 1080px) {
	#teamrankings table { width: 100%; float: none; height: auto; margin-left: 0; }
}

@media screen and (max-width: 800px) {
	td.mobile, th.mobile { display: table-cell; }
	#submenu > p { font-size: 1.2em; }
	#content ul.linklist { margin-left: 0; }
	ul.linklist li { margin: 0 10px; }
	#content table.schedule td { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
	#content table.schedule td.lomobile { max-width: 12px; text-overflow: clip; }
	#content table.schedule td.lomobile a { color: transparent; }
	#content table.schedule td.lomobile a:before { background-color: #137; color: #fff; padding: 0 1px; }
	#content table.schedule td.lomobile.m a:before { content: "M"; }
	#content table.schedule td.lomobile.b a:before { content: "B"; }
	#content table.schedule td.lomobile.c a:before { content: "C"; }
	#content table.schedule td.lomobile.t a:before { content: "T"; }
}

@media screen and (max-width: 400px) {
	/*#content table.schedule td { max-width: 54px; }*/
}

table.data  {
    background-color: white;
	width: 100%;
}


table.data a {
	text-decoration: underline;
}

.factbox table {
	border: 1px solid #333;
}

table.data tfoot td {
    background-color: #555;
    color: #fff;
    font-weight: bold;
}


@media (max-width: 410px) {
.factbox.bio .gridinfo {
    grid-column-gap: 6px;
}
}