/* Resets */

*   { margin: 0px; padding: 0px; border: 0px; }
body  { color: black; font-size: 14pt; line-height: 1.2em; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background: #e6e6fa url(cleatmarks.jpg) repeat; width: 100%; min-width: 800px; }

/* Elements */

h1  { color: maroon; font-style: italic; font-weight: bold; font-size: 24pt; line-height: 28pt; font-family: Verdana, Geneva, Swiss, sans-serif; text-decoration: underline overline; text-align: center; margin: 25px 3%; padding: 10px; background-color: #fffacd; background-color: rgba(255, 250, 205, 0.6) }
h2 { color: #8b0000; font-size: 20pt; line-height: 24pt; margin-bottom: 6pt; }
h3 { font-size: 16pt; margin-bottom: 4pt; }
a { color: maroon; text-decoration: none; }
a:hover { background-color: white; }
img { vertical-align: middle; }

/* Tables */

table { margin: auto; border-collapse: collapse; border: 5px solid gold; background-color: #fffacd; }
th, td { border: 2px solid maroon; padding: 5px 8px; }
td:not(.text-cell) { text-align: right; }
td.button-cell { text-align: center; color: green; font-weight: bold; padding: 10px 0px;}
td.button-cell:hover { background-color: gold; cursor: pointer; }

/* Messages */

.message { clear: both; background-color: #fffacd; background-color: rgba(255, 250, 205, 0.75); margin: 20px 10%; padding: 10px; border-radius: 20px; }
.centered { text-align: center; }

/* Header Bar */

header  { background-color: #7b0f0f; border-top: 4px ridge yellow; border-bottom: 5px ridge yellow; height: 140px }
header a:hover { background-color: #7b0f0f; }
#mainlogo { vertical-align: middle; margin-top: 22px; margin-left: 5%; border: 4px outset yellow; }
#ASAlogos { float: right; margin-right: 5% }
#USALogo {height: 110px; margin: 15px; }

/* Navigation Menu */

nav  { height: 76pt; color: maroon; background-color: #fffacd; border-bottom: 6px ridge yellow; position: relative }
nav ul { background-color: #fffacd; list-style-type: none; list-style-position: inside; clear: left; }
nav li { text-align: center; float: left }
nav a { padding: 5px }
nav a:hover { border: dotted 4px maroon }
.current { background-color: gold; }
#menuheads li { color: #b22222; font-variant: small-caps; font-weight: bold; font-size: 16pt; line-height: 32pt; letter-spacing: 0.2em; border-bottom: 2px solid maroon; margin-left: 1%; margin-right: 1%; }
#menudays li { font-size: 12pt; line-height: 14pt; padding: 5px 0px; }
#adminitems li { margin-top: 16pt; }
#adminitems li:first-of-type { margin-left: 1%; }

li.first-division { margin-left: 1%; }
li.after-gap { margin-left: 2%; }

/* Main Section */

section { margin: 25px; position: relative }
.pin { float: right }
#bulletinboard { background-color: #fffacd; float: left; margin: 0px 0px 20px 3%; padding: 5px; border: outset 4px yellow; width: 55% }

/* Side Menu */

#sidebar { background-color: #fffacd; float: left; margin: 0px 5px 20px 3%; border: outset 4px yellow; padding: 5px; width: 31% }
#sidebar img { width: 30px; height: 30px; margin-right: 5px; }
#sidebar h3 { margin-top: 6pt; }
#sidebar p { font-size: 12pt; }
h3#coming { font-style: italic; margin-top: 60px; }
.links-box { border: 1px solid maroon; border-radius: 10px; background-color: #ffffe0; margin: 10px 5px; padding: 5px 0px 5px 3px;}
.indented { margin-left: 10px; }
#umpires-logo-div { text-align: center; }
#umpires-logo-div #VarsityUmpiresLogo { width: 80%; max-width: 300px; height: auto; margin: 10px auto; }

/* Footer */

footer  { font-size: 12pt; text-align: center; clear: both; margin: 25px; }
footer p:first-child { font-size: 125%; }
footer p:last-child { border-top: 1px solid maroon; padding-top: 5px; }
#contact { background-color: #fffacd; padding: 10px; border: outset 4px yellow; }

/* Standings */

.division-table { width: 70%; max-width: 600px; }
.division-table td.text-cell { width: 50%; }

/* Team Pages */

.team-header, .team-schedule { background-color: #fffacd; padding: 10px; border: outset 4px yellow; }
.team-header { margin: 25px 35%; }
.team-header table, .team-schedule table { width: 100%; }
.team-header table td { width: 50%; }
.team-schedule { margin: 25px; }
.prev { float: left; margin: 10px 0px; }
.next { float: right; margin: 10px 13px; }

/* Schedules */

.schedule-table { width: 90%; max-width: 1200px; }
.schedule-table th { background-color: gold; }
.schedule-table td:not(.text-cell) { text-align: center; }
.teamnumber { font-size: 10pt; }

/* Admin Form Elements */

textarea { color: black; font-size: 14pt; line-height: 1.2em; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }
select { margin: 10px 10px; border: 1px solid maroon; font-size: 14pt; }
option { padding-right: 10px; font-size: 14pt; }
input[type="text"] { border: 1px solid black; padding: 2px; font-size: 14pt; }
input[type="checkbox"] { border: 1px solid black; }
input.short-field { width: 100px; }
input.long-field { width: 200px; }
.form-button { color: #08233e; font-size: 70%; padding: 10px; margin: 5px 10px; border: 1px solid #ffcc00; border-radius: 10px; border-bottom:1px solid #9f9f9f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); cursor: pointer; }
.enabled-button { background-color:rgb(255,204,0); }
.enabled-button:hover { background-color:rgba(255,204,0,0.5); }
.disabled-button { background-color: rgb(230,230,250); }
.left { float: left; }
.right { float: right; }
.hour-drop-down { text-align: right; }
.conference-cell { font-size: 150%; color: maroon; font-variant: small-caps; }
.conference-cell div { width: 40px; }
.division-cell { font-size: 125%; background-color: gold; }
#bb-form { background-color: #fffacd; margin-left: 5%; padding: 5px 5px 50px 5px; border: outset 4px yellow; width: 88% }
#bb-contents { border: 2px solid maroon; height: 200px; width: 90%; margin: 10px 5%; }
li.full-width  { width: 98% }
#daysheader { list-style-type: none; padding: 0; margin: 0; }
#daysheader li { display: inline-block; width: 25px; text-align: center; margin-right: 10px; }

/* Custom Checkboxes from www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.checklabel { display: inline-block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.checklabel input { position: absolute; opacity: 0; left: 6px; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: -7px; left: 0; height: 25px; width: 25px; border: 1px solid black; background-color: #eee; }
.checklabel:hover input ~ .checkmark { background-color: #ccc; }
.checklabel input:checked ~ .checkmark { background-color: #2196F3; }
.checkmark:after { content: ""; position: absolute; display: none; }
.checklabel input:checked ~ .checkmark:after { display: inline-block; }
.checklabel .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Schedule Result Popup */
.pencil { margin: 0px 5px; }
#popup { text-align: right; background-color: #66b2ff; display: none; z-index: 10; border: outset 4px yellow; padding: 5px; width: auto; white-space: nowrap; }
#vscore, #hscore { margin: 5px; width: 50px; text-align: center; font-weight: bold; font-size: 14pt; }

/* Add Game to Schedule Popup */
#gamepopup { position: fixed; top: 100px; left: 50px; }
#addgame  { background-color: #ccff99; margin: 25px 0px; padding: 10px; border: outset 4px green; }
#addgame select, #addgame select option, #dayOfWeek { font-size: 12pt; }
#addgame select { margin: 10px 0px; }
#dayOfWeek { background-color: white; padding: 2px 5px; border: 1px solid maroon;}