html, body, p, a, div, ul, li { 
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body, input, select, p {
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 11pt;
}
li {
font-size: 12pt;
}
img {
height: auto;
border: 0;
}
.page {
padding-top: 60px;
}
input[type="text"], input[type="password"], select, textarea {
width: 100%;
}
textarea {
height: 100%;
}
input[type="text"]:read-only, textarea:read-only {
background-color: #BDBDBD;
}
input[type="text"]:-moz-read-only, textarea:-moz-read-only { /* For Firefox */
    background-color: #BDBDBD;
}
a:visited {
color: #00E;
}

/* ------ NAV ------ */

.nav {
background-color: #315b54;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 12px 8px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
  background-color: #ddd;
  color: black;
}
.nav .menuicon {
  display: none;
}
.nav a:first-child {
padding-right: 40px;
}


.active {
  background-color: #f44;
  color: white;
}



@media (max-width:740px) {
.nav a:not(:first-child) {
display: none;
}
.nav a.menuicon {
float: right;
display: block;
padding: 12px 15px;
}
.nav.responsive {
position: relative;
}
.nav.responsive .menuicon {
position: absolute;
right: 0;
top: 0;
}
.nav.responsive a {
float: none;
display: block;
text-align: left;
}
}

/* ------ TABLE ------ */

.datatable {
width: 95%;
margin: auto;
table-layout: fixed;
border: 1px solid #999;
}
.datatable, .entrytable {
max-width: 900px;
}
.datatable td {
border: 1px solid #999;
margin: 0px;
padding: 5px 0px;
text-align: center;
vertical-align: middle;
overflow: hidden;
}

.datatable tr:first-child {
background-color: #EEE;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.datatable .left {
text-align: left;
padding: 5px 8px;
}

td.red, tr.red {
background-color: #DE2A2D;
}
td.yellow {
background-color: yellow;
}

.entrytable {
width: 70%;
margin-bottom: 20px;
}
.entrytable td {
padding: 3px;
font-size: 16px;
}
.entrytable td:first-child {
padding-left: 6px;
}
.colheading {
background-color: #EEE;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.icon {
height: 16px;
width: 16px;
vertical-align: middle;
}
h2 {
padding: 0;
margin: 0;

}

.nohead {
border-top: 0;
}
.nohead tr:first-child {
background-color: transparent;
}
.nohead tr td {
font-weight: normal;
text-transform: none;
}
.left {
text-align: left;
padding-left: 3px;
}

.content {
margin: auto;
width: 98%;
min-width: 900px;
/*max-width: 1000px;*/
}
.scroll {
width: 100%;
min-width: 750px;
height: 500px;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
input[type="radio"] {
margin: 0 2px 0 5px;
}
.fa-clock { color: chocolate; }
.fa-building { color: darkblue; }
.fa-gift { color: #D70025; --fa-primary-color: #0f0fa2; --fa-secondary-color: red; --fa-secondary-opacity: 0.8; }
.fa-tree, .fa-tree-christmas { color: #107E08; --fa-primary-color: red; --fa-secondary-color: #368d36; --fa-secondary-opacity: 1; }
.fa-check  { color: #4C4C4C; }
.fa-check-double { color: #107E08; }
.fa-trash { color: #D70025; }
.fa-volume-high { color: #D70025; --fa-primary-color: red; --fa-secondary-color: black; --fa-secondary-opacity: 0.3; }
.fa-print.red { color: red; }
.fa-print.green { color: green; }
.fa-user-minus { color: red; cursor: pointer; }
.fa-search { color: #8000ff; }
.fa-hand, .fa-hand-heart { color: #911eb4; }
.fa-scanner-gun { --fa-secondary-color: #ff8000; --fa-secondary-opacity: 1; cursor: pointer; }
.fa-sync-alt { color: blue; cursor: pointer; }

@media (max-width:600px) {
.datatable {
width: 99%;
}
.entrytable {
width: 95%;
}
}

@media print {
.nav {
display: none;
}
.page {
padding-top: 0;
}
}

/* Home */
.counter {
vertical-align: middle; 
margin: 2px;
}



/* Calendar */
.eventtab {
display: inline-block;
width: 70%;
vertical-align: top;
padding-bottom: 30px;
}
.calendartab {
display: inline-block;
position: absolute;
width: 30%;
left: 70%;
vertical-align: top;
padding-right: 10px;
}
.event {
font-size: 12pt;
line-height: 1.3em;
transition: all 500ms ease 0ms;
}
.calendar {
position: sticky;
top: 55px;
padding-top: 10px;
user-select: none;
}
.calendar > table {
width: 95%;
margin: auto;
}
.calendar > table tr:first-child {
font-size: 14pt;
text-transform: uppercase;
color: #FFF;
background-color: #0f7d36;
border: 1px solid #A3A3A3;
}
.calendar > table tr:first-child td:not(:nth-child(2)) {
font-size: 18pt;
}
.calendar > table tr {
cursor: pointer;
}
.calendar > table tr:nth-child(2) {
height: 30px;
color: #FFF;
background-color: #44BF54;
border: 1px solid #A3A3A3;
}
.calendar > table tr:not(first-child) {
height: 40px;
background-color: #E2E2E2;
}
.calendar > table tr td {
padding: 0;
width: 14%;
text-align: center;
border: 1px solid #A3A3A3;
font-weight: bold;
}
.calendar > table tr:first-child td, .calendar > table tr:nth-child(2) td {
border: 0;
}
.needqty {
width: 30px !important;
}
@media (max-width:800px) {
.eventtab, .calendartab {
width: 100%;
position: relative;
}
.calendartab {
left: auto;
display: block;
max-width: 400px;
height: inherit !important;
margin: auto;
padding-left: 10px;
}
}
/* Search */
.search {
padding: 10px;
padding-bottom: 5px;
}
.search, .search input {
font-size: 14pt;
}
.search input {
width: calc(100% - 30px) !important;
}
.search > div:first-child {
display: inline-block;
width: 80px;
}
.search > div:last-child {
display: inline-block;
width: calc(100% - 80px);
}
.volbuttons {
padding: 10px;
text-align: center;
}
.legend {
padding: 0px 10px;
}
.legend a {
display: inline-block;
margin: 0px 3px;
}
/* Events */
#events {
display: table;
width: 98%;
margin: auto;
}
#events > div {
display: table-row;
/*width: 98%;
box-sizing: border-box;
min-height: 100px;
margin: 10px;
padding-bottom: 5px;*/
}
#events > div > div {
display: table-cell;
border-bottom: 1px solid #C1C1C1;
}
#events > div > div:first-child {
width: 100px;
vertical-align: middle;
text-align: center;
}
@media (max-width:500px) {
#events > div > div:first-child {
width: 70px;
}
}
#events > div > div:last-child {
padding: 5px;
vertical-align: top;
}
/* Event Title */
#events > div > div:last-child > div:first-child {
font-size: 16pt;
color: #FF5246;
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
margin-top: 3px;
}
/* Event Date */
#events > div > div:last-child > div:nth-child(2) {
font-size: 11pt;
font-family: Merriweather, serif;
font-weight: 700;
}
/* Event Time */
#events > div > div:last-child > div:nth-child(2) > div {
display: inline-block;
}
/* Admin Info */
#events > div > div:last-child > div:nth-child(4) {
display: none;
}
/* Volunteers Static Page */
#events > div > div:last-child > div:nth-child(6) > span > label {
display: inline-block;
padding-right: 5px;
cursor: pointer;
}
/* Volunteers Static Page */
#events > div > div:last-child > div:nth-child(6) > span > a {
display: inline-block;
}
/* Volunteer Opportunities */
#events > div > div:last-child > div:nth-child(6) > div {
display: inline-block;
vertical-align: top;
width: 250px;
border: 1px solid #A3A3A3;
border-radius: 5px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
padding: 2px 5px;
margin: 5px;
} 
/* Volunteers */
#events > div > div:last-child > div:nth-child(6) > div > label {
display: inline-block;
padding-right: 5px;
}
/* Need Title */
#events > div > div:last-child > div:nth-child(6) > div > div:first-child {
display: inline-block;
font-size: 12pt;
font-weight: bold;
} /* Need Signup */
#events > div > div:last-child > div:nth-child(6) > div > div:nth-child(2) {
display: inline-block;
height: 1.25em;
line-height: 1.25;
vertical-align: top;
}

.gameinfo select {
width: inherit;
}



/* Tags */
#events > div > div:last-child > div:last-child {
margin-bottom: 3px;
}
.tags > span {
border: 1px solid;
border-radius: 2px;
margin-right: 5px;
padding: 1px 3px;
cursor: pointer;
display: inline-block;
line-height: 1em;
}
/* Needs Tag */
.tags > label {
margin-right: 7px;
cursor: pointer;
display: inline-block;
line-height: 1em;
}
.year {
border-radius: 2px;
padding: 0px 3px;
margin-right: 3px;
color: #FFF;
background-color: #FF5E53;
}
.list.tags > span:hover, .tags > .on {
color: #FFF;
}
.tag {
color: #000;
border-color: #000;
}
.tag:hover {
border-color: #000 !important;
background-color: #000;
}
.differentmonth {
color: #949494;
}
.today {
background-color: #2B9CE5;
}
.hasevent {
color: #434343;
background-color: #e6194B; /*2B9CE5;*/
}
.hasgame {
background-color: #3cb44b;
}
.differentmonth.hasevent {
color: #C9C9C9;
}
.differentmonth.hasgame {
color: #C9C9C9;
}
.today.hasevent {
background: linear-gradient(135deg,#2B9CE5 0%,#2B9CE5 50%,#000000 50%,#e6194B 50%,#e6194B 100%);
}
.today.hasgame {
background: linear-gradient(135deg,#2B9CE5 0%,#2B9CE5 50%,#000000 50%,#3cb44b 50%,#3cb44b 100%);
}
.hover {
background-color: #f58231;
}
.legendcal {
width: 100px !important;
margin: 0 !important;
}
.legendcal td {
padding: 2px 5px !important;
border: 1px solid #eee;
}
.button {
width: 40%;
margin-top: inherit;
text-align: center;
}
.small.button {
width: auto;
padding: 0px 8px;
margin-top: inherit;
font-size: 11pt;
}
.gray { color: gray; }

#calendar, .legendcal {
border-collapse: collapse;
border-spacing: 0;
}