html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: url("/assets/design/menu-background-116bd9ae29779bd7dd707a8ce203c297.jpg") no-repeat center top;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 13px;
    /*color: #7F7F7F;*/
    color: #555555;
}

div#leftContainer {
    float: left;
    width: 314px;
}

div#rightContainer {
    float: right;
    width: 647px;
}


.calendarEventWrapper {
    background: url("/assets/design/content-line-b723a55d75943ab712b6967c3a93b020.png") bottom no-repeat;
    margin-top: -4px;
    padding-bottom: 8px;
    line-height: 1.3;
}

.tournamentResultWrapper {
    background: url("/assets/design/content-line-b723a55d75943ab712b6967c3a93b020.png") bottom no-repeat;
    padding-bottom: 6px;
    margin-bottom: 12px;
}


table.layoutTable {
    margin-top: 16px;
}

table.layoutTable.tdWithHover tr:hover {
    background-color: #D7D7D7;
}

table.layoutTable tr.tableHeader {
    background-color: #D7D7D7;
}

table.layoutTable td {
    text-align: center;
}

table.layoutTable tr td:first-child {
    text-align: left;
    padding-left: 6px;
}


/* ------------------------------------------------------------------
   HOME PAGE

   The Grails app shipped a second stylesheet for the home page. It was a
   copy of this one differing in exactly two rules — the body background
   carries the hero, and the header reserves room for it — so those two
   are scoped to body.home-page here and the copy is gone.
   ------------------------------------------------------------------ */

body.home-page {
    background: url("/assets/design/menu-background-with-header-d563362f8764682039ef2a95dffaef19.jpg") no-repeat center top;
}

body.home-page div#menuContainer {
    margin-bottom: 470px;
}

/* The home page mirrors the subpages: news in the wide column, coming events
   in the narrow one — but the wide column is on the left here. */
body.home-page div#rightContainer {
    float: left;
    margin: 0 19px 30px 0;
    padding: 0;
}

body.home-page div#homeSideContainer {
    float: left;
    width: 314px;
}


/* CALENDAR STYLES */

#calendarContainer {
}

.homePageSectionHeader {
    font-family: Ginko, Georgia, "URW Bookman L", serif;
    font-size: 1.65em;
    color: #4C4C4C;
    padding: 20px 0 4px 16px;
}

#comingEvents {
    background: url("/assets/design/content-line-b723a55d75943ab712b6967c3a93b020.png") top no-repeat;
    margin-bottom: 12px;
}

#calendar {
    background: url("/assets/design/calendar-e40e1548d41c586f28d61ccd8eb46825.jpg") no-repeat center top;
    width: 314px;
    height: 258px;
    float: left;
    position: relative;
    margin-bottom: 40px;
}

#calendarTitle {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    padding-top: 1px;
    text-align: center;
}

.calendarDay {
    font-family: Ginko, Georgia, "URW Bookman L", serif;
    font-size: 1.65em;
    color: #4C4C4C;
    position: absolute;
    text-align: center;
    padding-top: 4px;
    width: 44px;
    height: 32px;
}

.calendarDayWithEvent {
    color: #CC0000;
}

.calendarDayGray {
    color: #7F7F7F;
}

.calendarToday {
    color: #000000;
}


/* NEWS SECTION STYLES */

.homeNewsSection {
    background: url("/assets/design/content-line-b723a55d75943ab712b6967c3a93b020.png") top no-repeat;
}

.homeNewsSection h2 {
    padding-top: 12px !important;
}

.homeNewsSection p {
    padding-top: 6px !important;
}

.homeNewsDate {
    font-family: Ginko, Georgia, "URW Bookman L", serif;
    color: #4C4C4C;
    text-align: center;
    float: left;
    width: 75px;
    height: 99px;
    background: url("/assets/design/corner-top-right-df30b42cf6a1210a97709b2e1f042c10.png") top right no-repeat;
}

.homeNewsTextPanel {
    width:564px;
    margin-left:6px;
    float:left;
    text-align: justify;
}

.homeNewsDay {
    font-size: 30px;
    margin-top: 10px;
}

.homeNewsMonth {
    font-size: 15px;
}

.homeNewsSummaryPanel {
    background: url('/assets/design/content-pages-bc158ea6f20db59b58ee43f933afc68d.png') top no-repeat;
    padding: 12px 6px 0 12px;
}


/* RESULTS SECTION STYLES */

.homeResultDate {
    font-family: Ginko, Georgia, "URW Bookman L", serif;
    color: #4C4C4C;
    text-align: left;
    font-size: 14px;
    padding: 12px 6px 0 0;
}

.homeResultTextPanel {
    padding: 6px 6px 10px 6px;
    margin: 0;
    text-align: justify;
    font-family: Verdana,Geneva,"DejaVu Sans",sans-serif;
    /*color: #7F7F7F;*/
    color: #555555;
}


/* LINKS */

a.hpLinkBold {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-weight: bold;
    color: #4C4C4C;
    text-decoration: none;
}
a.hpLinkBold:link {
    color: #4C4C4C;
    text-decoration: none;
    outline: none;
}
a.hpLinkBold:visited {
    color: #4C4C4C;
    text-decoration: none;
}
a.hpLinkBold:hover {
    color: #CC0000;
    text-decoration: none;
}
a.hpLinkBold:active {
    color: #4C4C4C;
    text-decoration: none;
    outline: none;
}


a.hpRedLink {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: #990000;
    text-decoration: none;
}
a.hpRedLink:link {
    color: #990000;
    text-decoration: none;
    outline: none;
}
a.hpRedLink:visited {
    color: #990000;
    text-decoration: none;
}
a.hpRedLink:hover {
    color: #990000;
    text-decoration: underline;
}
a.hpRedLink:active {
    color: #990000;
    text-decoration: underline;
    outline: none;
}


a.hpTextLink {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-weight: normal;
    color: #4C4C4C;
    text-decoration: none;
}
a.hpTextLink:link {
    color: #4C4C4C;
    text-decoration: none;
    outline: none;
}
a.hpTextLink:visited {
    color: #4C4C4C;
    text-decoration: none;
}
a.hpTextLink:hover {
    color: #CC0000;
    text-decoration: none;
}
a.hpTextLink:active {
    color: #4C4C4C;
    text-decoration: none;
    outline: none;
}


/* Turned on by responsive.css below the breakpoint, and off by default so a
   desktop never lays it out. */
#menuToggle {
    display: none;
}

/* Nine columns of results have hard-coded widths and no business shrinking.
   Above the breakpoint the box is wide enough that this never engages. */
.table-scroll {
    max-width: 100%;
}


/* ------------------------------------------------------------------
   COOKIE NOTICE

   Lifted verbatim from the inline <style> the Grails app repeated on every
   page. Same class names, same rules — see fragments/cookies.html for why the
   bar is a notice and not a consent gate.
   ------------------------------------------------------------------ */

.stucookie {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: #2b2b2b; color: #e8e8e8;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 12px; line-height: 1.6;
    padding: 14px 20px;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .35);
    border-top: 3px solid #a5161c;
}
.stucookie.stucookie-open { display: block }
.stucookie-in {
    max-width: 1000px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.stucookie-text { flex: 1 1 420px; margin: 0; text-align: left }
.stucookie a { color: #ff9a9a; text-decoration: underline }
.stucookie a:hover { color: #fff }
.stucookie-ok {
    flex: 0 0 auto;
    background: #a5161c; color: #fff !important; border: 0; cursor: pointer;
    padding: 8px 22px; font-size: 12px; font-weight: bold;
    border-radius: 4px; letter-spacing: .04em;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
}
.stucookie-ok:hover { background: #c0272d }

@media (max-width: 600px) {
    .stucookie { padding: 12px 14px }
    .stucookie-in { gap: 10px }
    .stucookie-ok { width: 100% }
}


/* ------------------------------------------------------------------
   SUBMIT BUTTONS THE OLD APP DID NOT HAVE

   The calendar filter and the judoka search both worked by JavaScript alone:
   tick a box, wait 1.5s, an AJAX call replaced the panel. With JavaScript off
   neither was usable at all. Both now sit in a real form with a real button.

   With JavaScript on, site.js still submits the filter after the same pause,
   so the button is redundant and hides itself — which is also what keeps the
   filter row looking exactly like the original.
   ------------------------------------------------------------------ */

.filterSubmit {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background: #a5161c;
    border: 0;
    border-radius: 4px;
    padding: 8px 18px;
    margin-left: 10px;
    cursor: pointer;
}

.filterSubmit:hover {
    background: #c0272d;
}

body.js form.filterForm .filterSubmit {
    display: none;
}


/* Keyboard-only escape hatch past the two menus. Off-screen until focused, so
   it changes nothing about how the page looks. */
.skipLink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: #a5161c;
    color: #FFFFFF;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 13px;
    padding: 10px 16px;
    text-decoration: none;
}

.skipLink:focus {
    left: 0;
}


/* The filter's labels. The Grails page put this padding in a style attribute on a
   <span>; here it is a class, because an inline style cannot be overridden by the
   media query that has to grow these into thumb-sized targets. */
.filterLabel {
    padding: 0 4px 0 0;
    vertical-align: top;
}


/* ------------------------------------------------------------------
   ADMIN FORMS

   forms.css dresses every input in a 274px background image, which was
   right for the two-field forms the old public site had and wrong for
   everything the admin needs: a field styled that way looks 274px wide
   however wide it really is, so a headline box appears to end a third
   of the way across the column.

   Inside .adminForm the fields are plain bordered boxes that take the
   width they are given. Scoped rather than global so the public site's
   forms keep the design they were drawn for.
   ------------------------------------------------------------------ */

.adminForm input[type="text"],
.adminForm input[type="search"],
.adminForm input[type="password"],
.adminForm input[type="email"],
.adminForm input[type="tel"],
.adminForm input[type="number"],
.adminForm input[type="datetime-local"],
.adminForm input[type="date"],
.adminForm textarea,
.adminForm select {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 13px;
    color: #333333;
    background: none;
    border: 1px solid #999999;
    border-radius: 3px;
    padding: 7px;
    width: 100%;
    max-width: 640px;
    height: auto;
    box-sizing: border-box;
}

.adminForm input[type="number"],
.adminForm input[type="datetime-local"],
.adminForm input[type="date"] {
    max-width: 240px;
}

.adminForm textarea {
    line-height: 1.5;
    resize: vertical;
}

.adminForm input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
}

.adminForm label {
    display: inline-block;
    padding-bottom: 4px;
}

.adminForm .field {
    margin-bottom: 14px;
}

/* .filterSubmit carries a left margin for sitting beside the calendar's check-boxes;
   at the foot of a form it is the first thing on its line. */
.adminForm .filterSubmit {
    margin-left: 0;
    margin-top: 6px;
}

/* The same button, made smaller so it does not dominate a table row or the line an
   attachment sits on. Below the breakpoint responsive.css gives it its size back —
   a 4px-padded button is a 21px target, and a thumb needs more than that. */

.filterSubmit.smallButton {
    margin-left: 0;
    margin-top: 0;
    padding: 4px 10px;
}

.fieldError,
.adminForm .fieldError {
    color: #990000;
    padding-top: 4px;
}

/* The negative margin exists to pull a results table up under a hint. In a
   form it pulls the next field onto the hint's own text. */
.adminForm .hintWrapper {
    margin-bottom: 0;
}

/* The category picker: 57 check-boxes, laid out in columns so a coach can find
   "MU13" by looking rather than by reading. Fixed-width cells keep the columns
   aligned; below the breakpoint responsive.css lets them fall to one per line. */

.adminForm .checkGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    max-width: 640px;
    margin-top: 2px;
}

.adminForm .checkGrid label {
    display: inline-block;
    width: 145px;
    padding: 3px 0;
    font-weight: normal;
    cursor: pointer;
}

/* People's names do not fit in a category-sized cell — "Štefanovský Miloš" wraps and
   drags its row out of line with the others. Three wider columns instead of four. */

.adminForm .checkGrid.wide label {
    width: 205px;
}

.adminForm .checkGrid input[type="checkbox"] {
    margin-right: 5px;
}

/* A file input dressed like the other fields would fight the browser's own
   button, so it is left alone and only given room. */

.adminForm input[type="file"] {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 12px;
    max-width: 100%;
}

/* One attached PDF: its name, a link to it, and the button that takes it off. */

.adminForm .attachment {
    margin: 4px 0 10px 0;
}

.adminForm .attachment .filename {
    font-size: 12px;
    color: #555555;
}

/* The second line of a row in the admin's lists: what the entry is, under what it
   is called, instead of two more columns the 647px content column has no room for. */

.rowDetail {
    font-size: 11px;
    color: #555555;
    padding-top: 2px;
}


/* A row of small fields — a weight, a count, wins, losses, a place. Stacking those
   one per line the way the rest of the admin does would make one line of a tournament
   PDF eight screens tall; side by side it is the shape of the sheet being copied. */

.adminForm .fieldRow {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    max-width: 640px;
}

.adminForm .fieldRow .field {
    margin-bottom: 12px;
}

.adminForm .fieldRow input[type="number"],
.adminForm .fieldRow input[type="tel"],
.adminForm .fieldRow input[type="text"] {
    width: 84px;
}

.adminForm .fieldRow .wide input[type="tel"],
.adminForm .fieldRow .wide input[type="text"] {
    width: 200px;
}

/* The line that was just saved, wherever the sheet's own ordering put it. Result
   sheets are shown by placing, not by the order they were typed, so without this a
   coach entering a fifth place has to hunt for what they just entered. */

tr.rowJustSaved td {
    background: #f3e3e4;
}

/* The roster form is folded away: it is the rarest thing on the page and the most
   consequential, and a coach reaches for it only after the name search has failed. */

.adminForm summary {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #a5161c;
    cursor: pointer;
    padding: 4px 0;
}