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;
}


/* ------------------------------------------------------------------
   ADMINISTRACIA: UZSI LAVY STLPEC

   Verejna stranka ma vlavo trojurovnove menu — sekcia, jej polozky a pod nimi
   rozbaleny zoznam, v ktorom stoja nazvy turnajov a roky — a 314px je na to
   siroke tak akurat. Administracia ma vlavo sedem jednoslovnych odkazov
   ("Novinky", "Clanky", "Kalendar"...) a vpravo tabulky: clenovia so siestimi
   stlpcami, vysledkova listina s deviatimi. Tam tych 314px nikto nepotrebuje
   a na druhej strane chybaju.

   220 + 19 + 741 namiesto 314 + 19 + 647; sirka stranky ostava 980. To 220
   vychadza z najsirsieho, co v tom stlpci stoji: hlavicka Ginkom ma
   "ADMINISTRACIA" 166px, anglicke "ADMINISTRATION" 178, plus 2x6px padding —
   teda ani jeden jazyk sa nezalomi.

   Iba nad 1020px. Pod breakpointom su oba stlpce na plnu sirku pod sebou
   (responsive.css) a sirka v pixeloch by tam nedavala zmysel.
   ------------------------------------------------------------------ */

@media (min-width: 1020px) {

    body.staff-page div#leftContainer {
        width: 220px;
    }

    body.staff-page div#rightContainer {
        width: 741px;
    }

    /* Ciary a rohy pod obsahom su PNG presne take siroke, ako stlpec, pod ktorym
       leza — 314 pre menu, 647 pre obsah. Roztiahnu sa na stlpec, rovnako ako to
       pod breakpointom robi responsive.css; je to jednopixelova nepravidelna
       linka, na ktorej zmenu mierky nevidno. */
    body.staff-page #leftContainer .submenuLine,
    body.staff-page #rightContainer h1,
    body.staff-page #rightContainer .parLine,
    body.staff-page .tournamentResultWrapper {
        width: auto;
        background-size: 100% 1px;
    }

    /* Rohy su naopak obrazky zarazene do rohu (menu vlavo hore, obsah vpravo
       hore) v prazdnom bloku — tym staci nova sirka bloku. */
    body.staff-page #leftContainer .submenuCorner,
    body.staff-page #rightContainer .parCorner {
        width: auto;
    }
}


.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;
}

/* "Novy clanok", "Novy clen", "Novy turnaj" — jediny sposob, ako sa v administracii
   nieco zaklada. Boli to a.textLink, teda tucne tmavosive pismo bez podciarknutia,
   co je presne to, ako v tomto designe vyzera nadpis: klub ich na strankach nenasiel
   a pytal sa, kade sa prida clanok. Teraz nesu ten isty cerveny gombik ako "Filtruj",
   lebo robia to iste — su to jediné dve veci na tej stranke, ktore nieco spustia. */
a.newButton,
a.newButton:link,
a.newButton:visited {
    display: inline-block;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background: #a5161c;
    border-radius: 4px;
    padding: 8px 18px;
    text-decoration: none;
    outline: none;
}

a.newButton:hover {
    color: #FFFFFF;
    background: #c0272d;
    text-decoration: none;
}

/* V kalendari stoja tri vedla seba. Flex s gap namiesto medzier v markupe: na
   uzkom displeji sa zalomia pod seba a ostane medzi nimi rovnaky odstup. */
.newButtonRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* Plus pred textom: v kalendari stoja tri vedla seba a bez neho je to rad
   rovnakych cervenych obdlznikov, ktore treba precitat, aby sa dali rozlisit. */
a.newButton:before {
    content: "+";
    font-weight: bold;
    padding-right: 7px;
}

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;
}

/* forms.css dava kazdemu <input> sirku 274px a obrazok na pozadi — bolo to pisane
   pre dve textove polia stareho verejneho webu. Checkbox aj radio to musia zhodit,
   inak je z prepinaca 274px siroky kruh a jeho popis skonci na druhom konci riadku. */
.adminForm input[type="checkbox"],
.adminForm input[type="radio"] {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    background: none;
}

.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;
}

/* "Pripni" / "Odopni" v riadku novinky. Robi to nieco, ale nie je to "Zmaz": dva
   rovnako cervene gombiky vedla seba hovoria, ze su rovnako vazne, a jeden z nich
   sa neda vratit. Preto biely s ramcekom — rovnako velky, o triedu tichsi. Vyska
   sedi so .smallButton: 3px padding + 1px ramcek. */
.quietButton {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #4C4C4C;
    background: #FFFFFF;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
}

.quietButton:hover {
    color: #a5161c;
    border-color: #a5161c;
}

/* Pripnuta novinka stoji v zozname prva bez ohladu na datum. Bez podkladu to
   vyzera ako tabulka zoradena nespravne; s nim je vidno, ze tam niekto tu jednu
   polozku dal. Hover ju prekryje, lebo ma vyssiu specificitu. */
tr.pinnedRow {
    background-color: #EDEDED;
}

.pinnedMark {
    font-weight: bold;
    color: #4C4C4C;
}

/* ------------------------------------------------------------------
   LISTA NAD TELOM CLANKU A NAHLAD POD NIM

   Gombiky su .quietButton, tie iste ako "Pripni" v zozname noviniek, a
   z rovnakeho dovodu: vkladaju znacku do textu, cize robia nieco, ale
   nie je to "Ulozit" ani "Zmazat". Cervene by tvrdili opak.

   Lista je flex s wrap, lebo jedenast gombikov sa do 741px stlpca na
   jeden riadok nezmesti a zalamovat sa maju po skupinach — text, odkazy,
   nahlad — nie kdekolvek. .editorGroup je ta medzera medzi skupinami:
   ciara, nie ikona, aby na nu nikto neklikal.
   ------------------------------------------------------------------ */

.editorTools {
    margin-bottom: 8px;
}

.editorHint {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 11px;
    color: #7F7F7F;
    padding-top: 2px;
}

.editorBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.editorGroup {
    width: 1px;
    height: 18px;
    background: #CCCCCC;
    margin: 0 4px;
}

/* Ramec je siroky cely stlpec, obsah v nom 647px — teda to, co vidi navstevnik.
   Ten rozdiel je zamerny: zvisly posuvnik ramca ma ujedat z volneho miesta, nie
   zo stlpca. Vyska je pevna, lebo ramec je sandboxovany bez allow-same-origin a
   odtialto sa nedá zmerat; scrolluje teda vnutri seba a pod breakpointom
   scrolluje aj panel, aby sa nehybala cela stranka. */
.editorPreview {
    margin-top: 10px;
    overflow-x: auto;
}

.editorPreviewLabel {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 11px;
    color: #7F7F7F;
    padding-bottom: 4px;
}

.editorFrame {
    width: 100%;
    min-width: 400px;
    height: 420px;
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background: #FFFFFF;
    display: block;
}

.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;
}