*,
*::before,
*::after {
	box-sizing: border-box;
}


* {
	margin:0;
	}
	

body, html {background: #eee;}

.grid-container {
 display: grid;
 grid-gap: 0px 0px;
 grid-template-columns:8% 14% 31% 14% 31% 2%;
   border-collapse: collapse;
 background-color: #eee;
 padding: 0px;
}

.grid-item1 {
  background-color: #fdd;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
  font-size: 9px;
  text-align: center;
}

.grid-item2 {
  background-color: #ffff88;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
  font-size: 9px;
  text-align: center;
}

.grid-item3 {
  background-color: #ccc;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
  font-size: 9px;
  text-align: center;
}

.grid-item4 {
  background-color: #ffbbff;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
  font-size: 9px;
  text-align: center;
}

.grid-item5 {
  background-color: #bbffbb;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
  font-size: 9px;
  text-align: center;
}

.grid-item6 {
  background-color: #bbbbff;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
  font-size: 9px;
  text-align: center;
}

.grid-itemwin {
  background-color: green;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
}

.grid-itemlose {
  background-color: red;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
}

.grid-itemdraw {
  background-color: orange;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
}

.grid-itemwhite {
  background-color: white;
  border: 1px solid black;
  border-collapse: collapse; 
  padding: 3px;
}


a.blue:link 
{background: #fff; color: #00a; text-decoration: none; font-family: arial, helvetica; font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 120%; font-style: normal}
a.blue:visited 
{background: #fff; color: #00a; text-decoration: none; font-family: arial, helvetica; font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 120%; font-style: normal}
a.blue:hover 
{background: #fff; color: #a00; text-decoration: none; font-family: arial, helvetica; font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 120%; font-style: normal}
a.blue:active 
{background: #fff; color: #00a; text-decoration: none; font-family: arial, helvetica; font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 120%; font-style: normal}

a.trigram:link 
{background: #fff; color: #0000ff; text-decoration: none; font-family: arial, helvetica; font-weight: normal; font-size: 40px; line-height: 120%; font-style: normal}
a.trigram:visited 
{background: #fff; color: #0000ff; text-decoration: none; font-family: arial, helvetica; font-weight: normal; font-size: 40px; line-height: 120%; font-style: normal}
a.trigram:hover 
{background: #ccc; color: #000; text-decoration: none; font-family: arial, helvetica; font-weight: normal; font-size: 40px; line-height: 120%; font-style: normal}
a.trigram:active {background: #eee; color: #00bbff; text-decoration: none; font-family: arial, helvetica; font-weight: normal; font-size: 40px; line-height: 120%; font-style: normal}

h1 {font-family: "Arial black"; font-weight: bold;  font-size: clamp(1.2rem, 3.0vw, 4.0rem); line-height: 110%; color: #fff; text-align: center; font-style: normal; 
text-shadow: .1rem .1rem 9px #000;}

h2 {font-family: Arial, helvetica; font-weight: normal;  font-size: clamp(1.0rem, 2.8vw, 1.9rem); line-height: 130%; color: #000; text-align: center; font-style: normal}
h3 {font-family: Arial, helvetica; font-weight: normal; font-size: clamp(1.0rem, 2.4vw, 1.2rem); line-height: 140%; color: black; text-align: left; font-style: normal;}
h4 {font-family: Arial, helvetica; font-weight: normal; font-size: clamp(0.5rem, 1.0rem, 1.4rem); line-height: 110%; color: #555; text-align: center; font-style: normal;}
p {font-family: Arial, helvetica; text-align: left;  font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 140%; color: #000; font-style: normal; display: inline; text-decoration: none;}
p.mono {font-family: Times; text-align: left;  font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 140%; color: #000; font-style: normal; display: inline; text-decoration: none;}
p.serif {font-family: Georgia; text-align: left;  font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 140%; color: #000; font-style: normal; display: inline; text-decoration: none;}
p.subhead h2 {font-family: Arial, helvetica; font-weight: normal;  font-size: clamp(1.0rem, 2.8vw, 1.9rem); line-height: 130%; color: #000; text-align: left; font-style: normal}
p.date {font-family: Arial, helvetica; font-weight: normal; font-size: clamp(1.0rem, 1.2vw, 1.2rem); line-height: 140%; color: #000; text-align: center; font-style: normal;}
p.data {font-family: Arial, helvetica; font-weight: normal; font-size: clamp(0.6rem, 1.0rem, 1.2rem); line-height: 130%; color: #000; text-align: center; font-style: normal;}
p.bannerama {font-family: "Arial black"; font-weight: bold;  font-size: clamp(1.4rem, 4.0vw, 4.4rem); line-height: 110%; color: #ff0000; text-align: center; font-style: normal; text-shadow: 1px 1px 0px #000;}
hr {border:1px solid gray; margin: 2px;}

div.indent {text-indent: 10%; margin:4px}


ul {list-style-type: none; margin: 0; padding: 0; width: 98%; background-color: #c00; border: 3px solid white; transition: all 0.3s ease; }
li a {display: block; color: #000; padding: 10px 6px; font-family: Arial, helvetica, sans-serif; font-weight: normal; color: white; line-height: 140%; text-decoration:none}
li {text-align: center; border-bottom: 2px solid #fff;}
li:last-child {border-bottom: none;}
li a.active {background-color: #04AA6D; color: #fff;}
li a:hover:not(.active) {background-color: #ccc; color: black; font-size: 16px; transition: all 0.3s ease;}

.grid-containerx {
 display: grid;
 grid-gap: 0px 0px;
 grid-template-columns:10% 30% 10% 10% 10% 10% 10% 10%;
 background-color: transparent;
 padding: 0px;
}

.grid-even-columns 
{display: grid; gap: .5rem; background: gray; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0px}

@media (min-width: 38em) {.grid-even-columns {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 55em) {.grid-even-columns {grid-template-columns: repeat(3, 1fr);}}

.grid-bottom-links 
{display: grid; gap: .5rem; padding: .1rem;}

@media (min-width: 38em) {.grid-bottom-links {grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 55em) {.grid-bottom-links {grid-template-columns: repeat(4, 1fr);}}

.grid-two-columns {display: grid; gap: .1rem; padding: .3rem; margin-top:0px; margin-bottom:1rem}

.newthum {display: block; width: 100%; border:1px solid black; height: auto; padding:0px; margin:0px}

.footer {padding: .8em; text-align:center; background-color: white; border:1px solid gray; min-height:25px;}
.footer:hover {border-color: #333; background: #ccc;}

.badge {border: 8px solid white; padding: .4em; text-align:left; min-height:300px;}
.badge:hover {border-color:#ff0000;}

@media only screen and (max-width: 600px) {body {margin: 0px 6px;}}
@media only screen and (min-width: 1000px) {body {margin: 0px 30px;}}

p.subhead {font-family: Arial, helvetica; text-align: left;  font-size: clamp(1.0rem, 1.2vw, 1.9rem); line-height: 150%; font-style: normal; display: inline;}
div.subhead {text-decoration: underline orange; text-underline-offset: 6px; margin: 30px 20px 20px 20px} 
div.subsub {margin: 30px 20px 20px 20px} 

.banner {padding:2px 0px 6px 0px; width:98%; background:#f00; text-align:center; box-sizing: border-box; border: 3px solid #000; border-radius: 10px; margin: 0 auto; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); margin-bottom: 1rem}