* {
  box-sizing:border-box;
}

body { 
        font-family: "Franklin Gothic", "Franklin Gothic Medium", Verdana, Arial, sans-serif; 
        font-size: 10pt; 
        color: #484848; 
} 
 
/* unvisited link */
a:link {
  color: black;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: black;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: gray;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: gray;
  text-decoration: underline;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  z-index: 100;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 6px 10px;
  text-decoration: none;
  font-size: 14px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #2E4C90;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 14px;
  border: none;
  outline: none;
  color: white;
  padding: 6px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 6px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:not(:first-child) {
    float: none;
    display: block;
    text-align: right;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown-content a {
    float: none;
    display: block;
    text-align: right;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: right;
  }
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  margin-top:15px; 
  border: dotted #B7B7B7; 
  border-width: 0px 0px 1px 0px; 
  background-color: #FFFFFF;   
  font-family: inherit;
  font-size:14pt;                 /* was 12pt */
  font-weight:bold; 
  color: #000000;
  cursor: pointer;
  padding: 3px 3px 3px 3px;
  width: 100%;
  text-align: left;
  outline: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
  background-color: #F0F0F0;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0px;
  display: none;
  overflow: hidden;
  background-color: #FFFFFF;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: dotted #B7B7B7;
  border-width: 0px 1px 1px 0px;
  border-right: solid #ffffff;
  background-color: #ffffff;
}

/* Style the buttons inside the tab */
.tab button {
  margin-top:15px; 
  border: none; 
  background-color: #FFFFFF;   
  font-family: inherit;
  font-size:14pt;                 /* was 12pt */
  font-weight:bold; 
  color: #000000;
  cursor: pointer;
  padding: 3px 25px 3px 3px;
  text-align: left;
  outline: none;
  float: left;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #F0F0F0;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 4px 0px;
  border: 0px solid #B7B7B7;
  border-top: none;
}

.dividerBox {margin: 0 auto; overflow: none;     
        margin-top:15px; 
        border: dotted #B7B7B7; 
        border-width: 0px 0px 1px 0px; 
        background-color: #CCCCCC;   
        font-size:14pt;                 /* was 14pt */
        font-weight:bold; 
        color: #2E4C90;}     
 
.dividerBox2 {margin: 0 auto; overflow: none;     
        margin-top:15px; 
        border: dotted #B7B7B7; 
        border-width: 0px 0px 1px 0px; 
        background-color: #F4F4F4;   
        font-size:14pt;                 /* was 14pt */
        font-weight:bold; 
        color: #2E4C90;}     
 
.sectionBox {margin: 0 auto; overflow: none;     
        margin-top:15px; 
        border: dotted #B7B7B7; 
        border-width: 0px 0px 1px 0px; 
        background-color: #FFFFFF;   
        font-size:14pt;                 /* was 12pt */
        font-weight:bold; 
        color: #000000;}     
 
.contentBox {margin: 0 auto; overflow: none;   
        margin-top:4px; 
        padding-bottom:4px; 
        border: solid #FFFFFF;          /* was #CCCCCC */ 
        border-width: 0px 0px 3px 0px;  /* was 0px 0px 3px 0px */  
        background-color: #FFFFFF;} 
  
.wrapper2 {
  max-width: 1000px;
  margin: auto;
  background: white;
  padding: 10px;
} 
 
.full {
  background-color:#FFFFFF;
  padding:3px;
  float:left;
  width:100%; /* The width is 100%, by default */
}

.left {
  background-color:#FFFFFF;
  padding:3px;
  float:left;
  width:0%; /* The width is 10%, by default - was 10%*/
}

.main {
  background-color:#FFFFFF;
  padding: 3px 30px 3px 3px;
  float:left;
  width:65%; /* The width is 50%, by default - was 55%*/
}

.right {
  background-color:#FFFFFF;
  padding:3px;
  float:left;
  width:35%; /* The width is 40%, by default - was 35%*/
}

.lefthalf {
  background-color:#FFFFFF;
  padding:3px;
  float:left;
  width:50%;
}

.righthalf {
  background-color:#FFFFFF;
  padding:3px;
  float:left;
  width:50%;
}

.fullS {
  background-color:#FFFFFF;
  padding:3px;
  width:100%; /* The width is 100%, by default */
}

.leftS {
  background-color:#FFFFFF;
  padding:3px;
  width:0%; /* The width is 10%, by default - was 10%*/
}

.mainS {
  background-color:#FFFFFF;
  padding: 3px 30px 3px 3px;
  width:65%; /* The width is 50%, by default - was 55%*/
}

.rightS {
  background-color:#FFFFFF;
  padding:3px;
  width:35%; /* The width is 40%, by default - was 35%*/
}

.lefthalfS {
  background-color:#FFFFFF;
  padding:3px;
  width:50%;
}

.righthalfS {
  background-color:#FFFFFF;
  padding:3px;
  width:50%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 0px 30px 0px 0px;
}

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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    padding: 3px;
  }
  .tab button {
    width: 100%;
    padding: 3px;
  }
  .main {
    padding: 3px;
  }
}

/* Responsive layout - makes the elements stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .lefthalf {
    width: 100%;
    padding: 3px;
  }
  .righthalf {
    width: 100%;
    padding: 3px;
  }
}

.schedule {position: relative; margin: 0 auto; height: 580px; visibility: visible !important; overflow: auto; 
        border: 2px solid #CCCCCC; 
        border-width: 0px 0px 0px 0px; 
        background-color: #FFFFFF;} 
 
tr.top td {border: solid #F0F0F0; 
        border-width: 1px 0px 0px 0px;} 
  
tr.tableHdr td {color:#000000;
        font-weight: bold; 
        border: solid #F0F0F0; 
        border-width: 0px 0px 0px 0px;} 
 
tr.tableHdrOld td {color:#000000;
        font-weight: bold; 
        background-color:#F0F0F0;} 
 
tr.alt td {border: solid #F0F0F0; 
        border-width: 1px 0px 0px 0px;} 
  
tr.section {
  font-size: large;
  font-weight: bold;
  background-color:#F0F0F0;
}

tr.date {
  font-size: large;
  font-weight: bold;
}

tr.time{
  font-size: small;
  font-weight: bold;
}

tr.time td {
  border: solid #F0F0F0;
  border-width: 1px 0px 0px 0px;
}

tr.timeBox{
  font-size: medium;
  font-weight: bold;
}

tr.game td.scorel {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
  font-size: large;
  font-weight: bold;
}

tr.game td.scorer {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 15px;
  font-size: large;
  font-weight: bold;
}

tr.top td.score {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
  font-size: large;
  font-weight: bold;
}

td.team{
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: medium;
  font-weight: bold;
}

td.refs{
  padding-left: 0px;
  font-size: smaller;
  font-weight: bold;
  color: grey;
}

tr.cat {
  font-size: large;
  font-weight: bold;
  color:yellow;
  background-color:#333;}

tr.cat td {
  border: solid red;
  border-width: 3px 0px 0px 0px;}

tr.subcat {
  font-size: medium;
  font-weight: bold;
  color:white;
  background-color: #555;}

tr.detail {
  font-weight: bold;
  color:black;
  background-color: #ddd;}

tr.detail td:hover {
  background-color: #b1b1b1;
  color: white;}

tr.item {
  font-size: large;
  font-weight: bold;
  color:yellow;
  background-color:#333;
}

tr.item td {
  border: solid red;
  border-width: 3px 0px 0px 0px;}

tr.item td.desc {
  padding-top: 30px;
}

tr.item td.size {
  padding-top: 30px;
  font-size: small
}

tr.detailHdr{
  font-size: medium;
  font-weight: bold;
}

tr.detailItem{
  font-size: small;
  font-weight: bold;
  color: grey;
}

table.stats {
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

table.stats th {
    cursor: pointer;
}

table.stats th, table.stats td {
    text-align: left;
    padding: 6px;
}

table.stats tr:nth-child(even) {
    background-color: #f2f2f2
}

table.archive tr td {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 15px;
}

tr.altmenu {
  font-weight: bold;
  color:white;
  background-color: #333;}

tr.altmenu td:hover {
  background-color: #555;}

tr.altmenu a {
  color: white;}

img {
  max-width:100%;
  height:auto;
}

img.jersey {
   width:16px;   /* was 20 */
   height:20px;   /* was 24 */
}   

img.logo {
   width:84px; 
   height:42px;  
}   

span {
  background-color:yellow;
}

hr {
  color:03;
  width:100%;
}

#myInput {
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #2E4C90;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right, .right50, .left50 {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}