* {
    box-sizing: border-box;
}

/* Create 2 equal columns for the Teams display
   also used for the summer league fixtures display */ 
.twoColumn {
    float:left;
    width: 50%;
    padding:10px 30px 30px 30px;
}

/* Create 3 equal columns for the Players displays */
.threeColumn {
    float: left;
    width: 33%;
    padding: 0px 15px 0px 15px;
    vertical-align: top;
}

/* Create 4 equal columns for the handicaps printout display
.fourColumn {
    float:left;
    width:25%;
    padding:20px;
}*/

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

[class*="col-"] {
    float: left;
    padding: 5px;
}
html {
    font-family: "Verdana", sans-serif;
}
body{
    font-size:15px;
}
h2, h3, h4 {
    color:#80002a;
    margin-top: 5px;
    margin-bottom: 5px;
}
.notice{
    font-size:15px;
    border:1px solid black;
    padding: 10px;
}
.header {
    background-color:#80002a;
    color:#ffffff;
    text-align:center;
    padding:15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #0099cc;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #33b5e5;
    box-shadow: 5px 5px 5px grey;
}
.menuButtonLine {
    width: 20px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
}
.heading {
    font-size:14pt;
    color:#0000dd;
    font-weight:bold;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
.aside {
    background-color: #ddeeff;
    padding: 15px;
    color: #000000;
    text-align: center;
    font-size: 14px;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.footer {
    background-color: #80002a;
    color: #ffffff;
    text-align: center;
    font-size: 18px;
    padding: 1px;
}
img {
    max-width: 100%;
    height: auto;
}
div.fixed {
    position: fixed;
    top: 0;
    width: 98%;
    background-color: #80002a;
}
.button {
    background-color: #0099cc;
    color: white;
    width: 39px;
    border: none;
}

/*===================================================================*/
/* BREAKPOINTS */
/* Mobiles (any class that has col- in it) */
[class*="col-"] {
    width: 100%;
}

@media only screen and (max-width:599px) {
    .image {display:none;}
    .menu-bar {display:block;}
    .menu {display:none;}
    .twoColumn {width:100%}
    .threeColumn {width: 100%;}
/*    .hcapsColumn {width:100%;}*/
}

/* Tablets: */
@media only screen and (min-width: 600px) and (max-width:767px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 18%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 64%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    .image {display:none;}
    .menu-bar {display:block;}
    .menu {display:none;}
    .twoColumn {width:50%}
    .threeColumn {width:50%}
/*    .hcapsColumn {width:50%;}*/
}

/* Desktop and laptop: */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 18%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 64%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .image {display:inline;}
    .menu-bar {display:none;}
    .menu {display:block;}
    .twoColumn {width:50%}
    .threeColumn {width:33%}
}
/*===================================================================*/
/* DROPDOWN BUTTONS */

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #33b5e5;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    background-color: #0099cc;
    color: white;
    padding: 7px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #33b5e5;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content
   container when the user clicks on the dropdown button) */
.show {display:block;}