* {
  box-sizing: border-box;
}

@font-face
{
	font-family: d-din;
	src: url(d-din.otf);
}


body {
	link : #ffffff;
	vlink : #ffffff;
	color : black;
  font-family: Arial, Helvetica, sans-serif;
	font-size : 12pt;
}

.header {
  	background-color: #cccccc;
  	text-align: left;
  	padding: 5px;
	height: 65px;
	background-image: url("https://images.michichan.com/plaid_strip_50.png");
}

.miniheader
{
	display: none;
}

@media screen and (max-width: 740px) 
{
	.header
	{
		display: none;
	}

	.miniheader
	{
		display: block;
  		background-color: #cccccc;
  		text-align: left;
  		padding: 5px;
		height: 40px;
		background-image: url("https://images.michichan.com/plaid_strip_50.png");
	}
}



/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon 
{
	display: none;
}


@media screen and (max-width: 740px) 
{
	.topnav a:not(:first-child) {display: none;}
  
	.topnav a.icon 
	{
    		float: right;
    		display: block;
  	}
}


@media screen and (max-width: 740px) 
{
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon 
	{
		position: absolute;
    		right: 0;
    		top: 0;
  	}
	.topnav.responsive a 
	{
		float: none;
    		display: block;
    		text-align: left;
	}
}

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}


/* Float four columns side by side */
.eventColumn {
  float: left;
  width: 280px;
  margin: 2px 2px;
}

.resultColumn {
  float: left;
  width: 280px;
  margin: 2px 2px;
}

.wireColumn {
  float: left;
  width: 190px;
  margin: 2px 2px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .eventColumn {
    width: 100%;
    display: block;
    margin: 2px 2px;
  }
}


@media screen and (max-width: 600px) {
.resultColumn {
  float: left;
  width: 100%;
  margin: 2px 2px;
}
}


/* Remove extra left and right margins, due to padding */
.row 
{
	margin: 0 0px;
	flex-wrap: wrap;
	display: inline-flex;
	align-content: stretch;
	justify-content: center;
	width: 100%
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}




/* Style the counter cards */
.eventCard {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  padding: 2px;
  margin: 1px 1px;
  text-align: center;
  height: 155px;
  border-width: 2px;
  border-color: #4f4f4f;
  border-style: solid;
  border-radius: 4px;
  background-color: #ffffff;
}

/* Style the counter cards */
@media screen and (max-width: 600px) {
.eventCard {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  padding: 2px;
  margin: 1px 1px;
  text-align: center;
  height: 155px;
  margin: 0px 0px 0px 0px;
  border-width: 1px;
  border-color: #cfcfcf;
  border-style: solid;
  border-radius: 0px;
  background-color: #ffffff;
}
}



.resultCard {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  padding: 2px;
  margin: 1px 1px;
  text-align: center;
  height: 140px;
  border-width: 1px;
  border-color: #afafaf;
  border-style: solid;
  border-radius: 4px;
  background-color: #ffffff;
}


/* Style the counter cards */
@media screen and (max-width: 600px) {
.resultCard {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  padding: 2px;
  margin: 0px 0px;
  text-align: center;
  height: 140px;
  border-width: 1px;
  border-color: #afafaf;
  border-style: solid;
  border-radius: 0px;
  background-color: #ffffff;
}
}

/* Michi-chan Sports Wire */

.wireCard {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  padding: 2px;
  margin: 1px 1px;
  text-align: center;
  height: 100px;
  border-width: 1px;
  border-color: #afafaf;
  border-style: solid;
  border-radius: 4px;
  background-color: #ffffff;
}


@media screen and (max-width: 600px) {
.wireCard {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  padding: 2px;
  margin: 0px 0px;
  text-align: center;
  height: 100px;
  border-width: 1px;
  border-color: #afafaf;
  border-style: solid;
  border-radius: 0px;
  background-color: #ffffff;
}
}




@font-face
{
	font-family: d-din;
	src: url(https://images.michichan.com/fonts/d-din.otf);
}


BODY  {
	/* margin-top : 1.5em; */
	link : #ffffff;
	vlink : #ffffff;
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 12pt;
}


.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

td.date
{
	font-family: d-din, Arial, verdana, helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	right: 6px;
	top: 2px;
}

td.dateWire
{
	font-family: d-din, Arial, verdana, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	right: 6px;
	top: 2px;
}


td.discipline
{
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 14px;
	right: 5px;
	top: 2px;
}


td.time
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 16px;
	text-align: left;
}

TD.watch
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 16px;
}

TD.series
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 14px;
	height: 17px;
}

TD.grid
{
	height: 1px;
}

TD.teamimage
{
	height: 39;
	width: 37;
}

TD.teamname
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 16px;
	font-weight: bold;
}
TD.teamnameWire
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 12px;
	font-weight: bold;
}

TD.tournImage
{
	height: 63;
	width: 37;
}

TD.tournName
{
	height: 63;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 16px;
	font-weight: bold;
	text-align: center;
}


.teamcity
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 12px;
}

TD.streamer
{
	height: 24px;
}

TD.channel
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 16px;
	height: 24px;
}


TD.gamestat
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 16px;
}

TD.score
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 20px;
	font-weight: bold;
}

.trickPlay
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 15px;
	font-weight: bold;
}

TD.location
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 14px;
}

.venue
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 12px;
}

TD.resultLine
{
	color : black;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 12px;
}


.subject
{
	background-color: #6f6f6f;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 20px;
	color: #dfdfdf;
	height: 24px;
	width: 100%;
	margin: 4px 0px;
	padding: 0px 3px;
	border-radius: 4px;
}

.specialPage
{
	background-color: #efefef;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 17px;
	color: #222222;
	height: auto;
	width: 100%;
	text-align: center;
	margin: 4px 0px;
	padding: 0px 3px;
	border-width: 1px;
	border-style: solid;
	border-color: #cfcfcf;
	border-radius: 4px;
}

.special20
{
	font-size: 20px;
}

.special19
{
	font-size: 19px;
}

.special18
{
	font-size: 18px;
}

.special16
{
	font-size: 16px;
}

.special15
{
	font-size: 15px;
}

.special14
{
	font-size: 14px;
}

.special12
{
	font-size: 12px;
}

.special10
{
	font-size: 10px;
}

.replayLink
{
	margin-top: 20px;
	padding-right: 0px;
	margin-left: 4px;
	padding-bottom: 0px;
}


.noevents
{
	background-color: #ffffff;
	font-family : d-din, Arial, verdana, helvetica, sans-serif;
	font-size : 20px;
	color: #000000;
	height: 24px;
	width: 100%;
	margin: 4px 0px;
	padding: 0px 3px;
	border-radius: 4px;
	border-color: #3f3f3f;
	border-width: 1px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  font-size : 14px;
   font-family : d-din, Arial, verdana, helvetica, sans-serif;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

#team1image
{
	top: 21px;
	left: 0px;
	height: 30px;
	width: 30px;
}

.borderBadge {
  background-color: white;
  color: black;
  font-size: 10px;
  font-weight: bold;
  padding: 6px 6px;
  text-align: center;
  border-radius: 5px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}



.redBadge {
  background-color: #Af0000;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 3px;
  text-align: center;
  border-radius: 5px;
}

.redResultBadge {
  background-color: #Af0000;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 3px;
  text-align: center;
  border-radius: 5px;
}

.greenBadge {
  background-color: #007f00;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 3px;
  text-align: center;
  border-radius: 5px;
}

.greenFinal {
  background-color: #005f00;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  text-align: center;
  border-radius: 5px;
}

.yellowBadge {
  background-color: #00ffff;
  color: black;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 3px;
  text-align: center;
  border-radius: 5px;
}

.blueBadge {
  background-color: #00007f;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 6px 6px;
  text-align: center;
  border-radius: 5px;
}


.grayBadge {
  /* position: absolute; */
  background-color: #e7e7e7;
  color: black;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 2px;
  text-align: center;
  border-radius: 5px;
}