/* ---------------------------------------------------------------------------
   ORC režim seznamu lodí.

   Zapíná se třídou `gps-orc` na <html>, kterou nastaví GpsUserControls/GPS.ascx
   podle druhu vybrané etapy. BEZ TÉ TŘÍDY JE VÝSLEDEK PŘESNĚ DNEŠEK: buňky navíc
   jsou display:none. Vrácení zpět = neposlat třídu.

   Tři varianty podle toho, co se přepíná:
     .gps-orc-col   buňky tabulky navíc (th/td)      -> table-cell
     .gps-orc-only  obsah navíc uvnitř buňky (span)  -> inline
     .gps-orc-hide  obsah, který v ORC režimu mizí   -> none

   ŠÍŘKA PANELU: 290 px běžně, 320 px v ORC režimu.

   Pozor na to, že tabulka se šířce panelu NEPŘIZPŮSOBUJE — je v automatickém
   layoutu a měří se podle obsahu. Rozšíření panelu jí tedy místo nepřidá, jen
   posune pravý okraj; při pokusu s 370 px zůstala tabulka na 270 px a mezi ní
   a okrajem zelo sto pixelů prázdna. Smysl těch 30 px navíc je dát obsahu rezervu
   na delší jména a typy, ne tabulku natáhnout.

   Proměnná zároveň slouží jako úklid — šířka byla zadrátovaná na třech místech
   (#gpsData, .gps-list, margin-right u #map) a mohla se rozejít.
   --------------------------------------------------------------------------- */
:root {
    --gps-panel-w: 290px;
    --gps-etape-select-w: 175px;
    /* Výška bloku nad seznamem lodí (etapa, odpočet, přepínače, řazení, kategorie).
       Je pevná, protože seznam pod ním počítá calc(100% - tahle výška). */
    --gps-etape-h: 148px;
    /* Výška celého panelu na mobilu, kde je z něj spodní lišta. Drží spolu s ní
       i pozici tlačítka na sbalení. */
    --gps-panel-h: 175px;
    /* Výška boxu s detailem vybrané lodě. Seznam nad ním si ji odečítá, takže obě
       místa musí vycházet z téhle jedné hodnoty. */
    --gps-detail-h: 60px;
}

/* Bez kategorií se jejich řádek nevykreslí (už při jedné jediné — viz NoCategories
   v GPS.ascx.cs) a obsah skončí na 116 px místo 148. Bez tohohle zbyde nad seznamem
   32 px prázdna. */
html.gps-nocats { --gps-etape-h: 120px; }

/* ---------------------------------------------------------------------------
   Sbalení panelu (třída `gps-collapsed` na <html>, ukládá se do localStorage).

   Na desktopu je panel pravý sloupec, takže stačí srazit --gps-panel-w na nulu —
   odsazení mapy z té proměnné vychází, takže se roztáhne sama. Na mobilu je panel
   spodní lišta, tam se musí přepsat výška a odsazení mapy zvlášť.
   --------------------------------------------------------------------------- */
/* `:root` navíc je ZÁMĚR, ne překlep. Bez něj má tohle pravidlo stejnou specificitu
   jako `html.gps-orc { --gps-panel-w: 320px }` a rozhodovalo by pořadí v souboru —
   což se hned napoprvé obrátilo proti mně: gps-orc je v souboru níž, takže sbalení
   panel schovalo, ale mapa se neroztáhla. Takhle na pořadí nezáleží. */
html.gps-collapsed:root { --gps-panel-w: 0px; }
html.gps-collapsed div#gpsData { display: none; }

/* ---------------------------------------------------------------------------
   Skrytí hlavičky jachta.sk (třída `gps-nomenu`, taky v cookie).

   Je to totéž, co pod 960 px dělá @media samo — hlavička zmizí a #whole-map se
   posune na top: 0. Tady se to jen dá zapnout ručně i na širším okně, kde menu
   zabírá 50 px výšky mapy.
   --------------------------------------------------------------------------- */
html.gps-nomenu .menu-wrapper { display: none; }
html.gps-nomenu div#whole-map { top: 0; }

#gpsMenuToggle {
    position: absolute;
    z-index: 5;
    top: 0;
    right: var(--gps-panel-w);
    width: 56px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    background-color: #0f2849;
    border: 1px solid #fff;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    user-select: none;
    -webkit-user-select: none;
}

#gpsMenuToggle:hover { background-color: #1d4176; }

#gpsMenuToggle::before { content: "\2227"; }                      /* ∧ schovat menu */
html.gps-nomenu #gpsMenuToggle::before { content: "\2228"; }      /* ∨ vrátit menu */

/* Pod 960 px hlavičku skrývá @media samo, takže by tlačítko nemělo co dělat. */
@media (max-width: 959px) {
    #gpsMenuToggle { display: none; }
}

/* Tmavé a dost velké ZÁMĚRNĚ. První pokus byl bílý s tenkým černým rámečkem, 15×44 —
   splýval s bílým panelem i se světlou mapou a nikdo ho nenašel, i když fungoval. */
#gpsPanelToggle {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: var(--gps-panel-w);
    margin-top: -28px;
    width: 20px;
    height: 56px;
    line-height: 54px;
    text-align: center;
    cursor: pointer;
    background-color: #0f2849;
    /* Bílý okraj: tmavý jazýček splýval s tmavými místy mapy (moře, stíny pobřeží),
       takhle je ohraničený proti čemukoli pod ním. */
    border: 1px solid #fff;
    border-right: none;
    border-radius: 4px 0 0 4px;
    box-shadow: -1px 0 4px rgba(0, 0, 0, .35);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    user-select: none;
    -webkit-user-select: none;
}

#gpsPanelToggle:hover { background-color: #1d4176; }

#gpsPanelToggle::before { content: "\203A"; }                      /* › sbalit */
html.gps-collapsed #gpsPanelToggle::before { content: "\2039"; }   /* ‹ rozbalit */

@media (max-width: 700px) and (orientation: portrait) {
    /* Panel je spodní lišta vysoká --gps-panel-h, takže tlačítko sedí na JEJÍ horní
       hraně, ne na levé, a sbalení znamená vrátit mapě výšku. */
    html.gps-collapsed div#map {
        margin-bottom: 0;
        height: 100%;
    }

    #gpsPanelToggle {
        top: auto;
        margin-top: 0;
        right: auto;
        left: 50%;
        margin-left: -28px;
        bottom: var(--gps-panel-h);
        width: 56px;
        height: 20px;
        line-height: 18px;
        /* Jazýček tu visí na HORNÍ hraně spodní lišty, ne na levé hraně panelu jako na
           desktopu — okraj proto chybí dole, ne vpravo. */
        border: 1px solid #fff;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, .35);
    }

    html.gps-collapsed #gpsPanelToggle { bottom: 0; }

    #gpsPanelToggle::before { content: "\2228"; }                      /* ∨ sbalit */
    html.gps-collapsed #gpsPanelToggle::before { content: "\2227"; }   /* ∧ rozbalit */
}

html.gps-orc {
    --gps-panel-w: 340px;
    /* O řádek vyšší kvůli typu lodě a koeficientu v detailu. Platí i pro loď bez
       hendikepu — jednotná výška je lepší než box, který při přepínání lodí poskakuje. */
    --gps-detail-h: 80px;
    /* Panel je o 30 px širší, tak se o ně roztáhne i výběr etapy — dlouhý název
       ("Adr600 07.10 08:27 - 10.10 11:29") se do 175 px nevejde a ořízne se.

       Přes proměnnou, ne přes `html.gps-orc div.gps-etape select.etape`: takový
       selektor by měl vyšší specificitu než mobilní pravidlo v @media níž a přebil
       by i jeho 115 px. Takhle se mění jen hodnota a mobil si ji přepíše sám. */
    --gps-etape-select-w: 205px;
}

.gps-orc-col,
.gps-orc-only { display: none; }

html.gps-orc .gps-orc-col { display: table-cell; }
html.gps-orc .gps-orc-only { display: inline; }
html.gps-orc .gps-orc-hide { display: none; }

/* Buňky seznamu mají padding 0 (viz div.gps-list table td níž). Šesti sloupcům to
   nevadilo, sedmý se ale dotýkal názvu lodě — "BenedikovičElan46" slité dohromady.
   Odsazení je schválně jen na tomhle sloupci, aby se zbytek tabulky nehnul. */
html.gps-orc .gps-orc-col {
    padding-left: 6px;
    white-space: nowrap;
}

/* Tabulka nemá šířku, takže se v automatickém layoutu smrskne na šířku obsahu a
   rozšíření panelu jí nic nepřidá — jen vedle ní vznikne prázdno. Tohle ji donutí
   panel vyplnit a místo navíc se rozdělí mezi sloupce.
   Schválně jen v ORC režimu: `table.gps-listHand` používá i administrace, a bez
   téhle třídy musí zůstat všechno přesně jako dosud. */
html.gps-orc div.gps-list table.gps-listHand {
    width: 100%;
}

/* Na telefonu má panel vlastní šířku (viz @media níž) a sloupec navíc by ho rozbil. */
@media (max-width: 700px) and (orientation: portrait) {
    html.gps-orc .gps-orc-col { display: none; }
}

div#whole-map {
    position: absolute;
    color: #0f2849;
    display: block;
    top: 50px;
    width: 100%;
    height: 100%;
}

div#gpsData {
    width: var(--gps-panel-w);
    border-left: 1px solid black;
    float: right;
    height: calc(100% - 50px);
    background-color: white;
}

/* Hlavička jachta.sk zmizí celá, jakmile se do ní nevejde menu.
   Téma přepíná na hamburger pod 960 px (viz @media v Design.css), takže od téhle šířky
   z celého řádku zbude logo a tři čárky. Na trackovací stránce je to ovládací prvek,
   který nikam nevede, a bere 50 px výšky, kterých je na telefonu škoda.

   Ruší se proto i to odsazení, o které se mapa o těch 50 px posouvala dolů - bez toho by
   po hlavičce zbyl prázdný pruh a nic by se nevyhrálo.

   Blok musí zůstat PŘED portrait dotazem níž: `div#gpsData` je v obou stejně specifický,
   takže rozhoduje pořadí v souboru a portrait má mít poslední slovo (dole ukotvený panel
   s pevnou výškou).

   Tenhle soubor si přidává jen veřejný GPS control (GPS.ascx.cs), administrace jede
   na GpsAdmin.css - tam se tedy nic nemění. */
@media (max-width: 959px) {
    .menu-wrapper {
        display: none;
    }

    div#whole-map {
        top: 0;
    }

    div#gpsData {
        height: 100%;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    div#gpsData {
        width: 100%;
        position: absolute;
        border-top: 1px solid black;
        float: left;
        bottom: 0;
        height: var(--gps-panel-h);
    }
}
div.gps-etape {
    padding-top: 5px;
    font-weight: 700;
    color: black;
    width: var(--gps-panel-w);
    height: var(--gps-etape-h);
    float: left;
}

div.gps-etape select.etape {
    width: var(--gps-etape-select-w);
}


    div.gps-list {
        font-size: 12px;
        color: #fff;
        width: var(--gps-panel-w);
        height: calc(100% - var(--gps-etape-h));
        overflow: auto;
        min-height: 50px;
        padding: 0px;
        display: block;
    }

    @media (max-width: 700px) and (orientation: portrait) {
        div.gps-list {
            height: 100%;
            width: calc(100% - 215px);
            float: left;
        }
    }

    div.showDetailList {
        /* Dřív magických 208 px = výška bloku nad seznamem + 60 na otevřený detail lodě.
           Teď obojí z proměnných, takže se to nemůže rozejít, když se některá změní. */
        height: calc(100% - var(--gps-etape-h) - var(--gps-detail-h));
    }

    @media (max-width: 700px) and (orientation: portrait) {
        div.showDetailList {
            height: 100%;
        }
    }

    div.gps-list table {
        font-size: 11px;
        width: 270px;
        text-align: center;
        line-height: 10px;
        border: none;
        margin: 0;
        margin-bottom: -54px;
    }


    div#map {
        /* Kotva pro přehrávač záznamu (#overMap). Ten je roztažený přes celou šířku
           a bez téhle kotvy by se měřil od #whole-map, tedy i pod panel se seznamem lodí. */
        position: relative;
        margin-right: var(--gps-panel-w);
        margin-top: 0px;
        height: 100%;
    }

    @media (max-width: 700px) and (orientation: portrait) {
        div#map {
            margin-bottom: 150px;
            margin-right: 0px;
            margin-top: 0px;
            height: calc(100% - 125px);
        }
    }

    div#gps-mr {
        height: 100%;
    }

        div#gps-mr div.menu {
            height: 30px;
            float: left;
            width: 100%;
            overflow: hidden;
        }

    div#map-title {
        height: 28px;
        width: 100%;
        padding-top: 1px;
        text-align: center;
    }

        div#map-title h1 {
            font-size: 16px;
            margin-right: 30%;
            line-height: 28px;
            margin: 0px;
        }

    div#map-canvas {
        width: 100%;
        /* ZÁMĚRNĚ 100 %, ne calc(100% - výška lišty). Lišta se záložkami (div.menu)
           je plovoucí, takže plátno začíná na STEJNÉ výšce jako ona a lišta mu horních
           ~30 px překrývá — odečítat ji podruhé znamená nechat tentýž kus prostoru
           prázdný dole.

           Dřív se odečítalo natvrdo 80 px, přestože lišta měří 30: zbývalo 50 px bílé.
           Nad 960 px to bylo skoro schované, protože #whole-map má top: 50px a zároveň
           height: 100%, takže 50 px přetéká pod okraj okna. Jakmile se ale pod 960 px
           přepne top na nulu (viz @media výš, hlavička jachta.sk tam mizí), vyleze ta
           mezera celá a mapa vypadá, že odskočila nahoru. */
        height: 100%;
    }

    /* Na mobilu to ale neplatí: tam lišta plovoucí NENÍ v překryvu a plátno začíná
       až POD ní (ověřeno — na desktopu má plátno stejný `top` jako lišta, na mobilu
       o 30 px nižší). Těch 80 px je tu navíc potřeba i proto, že #map je o 50 px vyšší
       než prostor nad spodní lištou. Se 100 % plátno přes lištu přeteče a zakryje
       seznam lodí. */
    @media (max-width: 700px) and (orientation: portrait) {
        div#map-canvas {
            height: calc(100% - 80px);
        }
    }

    div#gps-mr ul {
        margin: 0;
        padding: 1px;
        width: 453px;
    }

        div#gps-mr ul li {
            display: block;
            width: 150px;
            height: 28px;
            float: left;
            padding: 2px;
            text-align: center;
            font-weight: bold;
            line-height: 25px;
            cursor: pointer
        }

            div#gps-mr ul li.act, div#gps-mr ul li.sel {
                color: white;
                background-color: #0f2849;
                line-height: 24px;
                border: 1px solid #0f2849;
            }


    /* -------------------------------------------------------------------------
       Přehrávač záznamu. Vykresluje se JEN u skončené etapy (phTime.Visible
       v GPS.ascx.cs), u běžící by neměl co přehrávat.

       Je to jeden box přes celou šířku mapy: nahoře ovládání a čas, pod ním osa
       se značkami. Kotví se k #map, ne k #whole-map — #whole-map sahá i pod panel
       se seznamem lodí, takže roztažený box by mu vlezl pod něj. Odsazení panelu
       drží margin-right u #map, takže se box srovná i po jeho sbalení.
       ------------------------------------------------------------------------- */
    div#whole-map div#overMap {
        position: absolute;
        top: 40px;
        left: 20px;
        right: 20px;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        z-index: 1000;
        padding: 8px 14px 14px;
        border-radius: 8px;
        /* Poloprůhledné POZADÍ, ne opacity na celém boxu: opacity zesvětlí i text
           a ovládání, a ty mají nad světlou mapou zůstat čitelné. Proto taky stín
           a rozmazání podkladu — bílé písmo samo o sobě na moři zaniká. */
        background-color: rgba(15, 40, 73, .55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    }

        /* Přehrávač do načtení mapy: zašedlý a bez kurzoru ruky. Třídu sundá
           setReplayEnabled(true) na konci initMap; obsluhy se do té doby vrací hned. */
        div#whole-map div#overMap.notready {
            opacity: .35
        }

            div#whole-map div#overMap.notready div.gps-instr,
            div#whole-map div#overMap.notready div#gps-timeline {
                cursor: default
            }

        /* Horní řádek boxu. Dřív stála tlačítka na float: right, takže pořadí
           v markupu bylo obrácené proti tomu, co je vidět; s flexem je pořadí
           v markupu rovnou to výsledné. */
        div#whole-map div#overMap div.gps-replay-bar {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        div#whole-map div#overMap div.gps-instr {
            flex: none;
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-size: 28px;
            line-height: 32px
        }

            div#whole-map div#overMap div.gps-instr span {
                font-size: 14px
            }

        /* Rychlost přehrávání: dvě tlačítka a mezi nimi hodnota.
           Dřív to bylo jedno tlačítko, které po devítce přeteklo na jedničku —
           ze šestky se proto zpomalovalo čtyřmi kliky dokola. Hodnota je teď
           samostatný prvek, protože se jen vypisuje a neklika se na ni. */
        div#whole-map div#overMap div.speed-down,
        div#whole-map div#overMap div.speed-up {
            width: 22px;
            font-size: 26px;
            text-align: center;
            opacity: .9;
            user-select: none;
            -webkit-user-select: none;
        }

            /* Doraz rozsahu. Zašedlé tlačítko má říct „dál to nejde" — bez toho
               vypadá nereagující klik jako porucha přehrávače. */
            div#whole-map div#overMap div.speed-down.off,
            div#whole-map div#overMap div.speed-up.off {
                opacity: .25;
                cursor: default;
            }

        div#whole-map div#overMap div.gps-speed-value {
            flex: none;
            min-width: 34px;
            text-align: center;
            font-size: 28px;
            line-height: 32px;
            opacity: .9;
        }

            div#whole-map div#overMap div.gps-speed-value span {
                font-size: 14px;
            }

        div#whole-map div#overMap div.play {
            background-image: url(Images/icon-play-32.png)
        }

        div#whole-map div#overMap div.pause {
            background-image: url(Images/icon-pause-32.png)
        }

        div#whole-map div#overMap div.start {
            background-image: url(Images/icon-skip-backward-32.png)
        }

        div#whole-map div#overMap div.end {
            background-image: url(Images/icon-skip-forward-32.png)
        }

        div#whole-map div#overMap div#gps-currentTime {
            flex: none;
            width: 200px;
            margin-left: 10px
        }

        /* Osa je POSLEDNÍ v řádku a bere si zbytek šířky.
           ŠÍŘKA UŽ NENÍ PEVNÁ. Dřív tu bylo width: 180px a progressMove/progressClick
           z toho počítaly procenta jako (e.pageX - offset.left) / 1.8 — těch 180 px
           zadrátovaných v javascriptu. Teď se dělí skutečnou šířkou osy
           (timelinePercent v gps-map.js), takže se šířka smí měnit. Výška musí zůstat
           stejná i u #gps-progress, jinak výplň nezakryje celou dráhu. */
        div#whole-map div#overMap div#gps-timeline {
            position: relative;
            flex: 1;
            min-width: 0;
            height: 8px;
            border: 1px solid #fff;
            cursor: pointer
        }

        div#whole-map div#overMap div#gps-progress {
            height: 8px;
            width: 0;
            background-color: #fff
        }

        /* Čas pod kurzorem. Visí POD OSOU u kurzoru, ne v řádku: v řádku by ho JS
           musel přepínat display a buď by se při najetí na osu ostatní prvky posunuly,
           nebo by pro něj musela být trvale vyhrazená mezera. Takhle nestojí nic a
           překryje popisky značek, které jsou na stejné lince. Polohu (left) mu
           dosazuje progressMove v gps-map.js, proto je tu jen bez posunu doleva. */
        div#whole-map div#overMap div#gps-progressTime {
            position: absolute;
            top: 13px;
            display: none;
            transform: translateX(-50%);
            padding: 0 4px;
            border-radius: 3px;
            background-color: rgba(15, 40, 73, .85);
            font-size: 12px;
            font-weight: 400;
            white-space: nowrap;
            pointer-events: none
        }

        /* Značky na ose. Dosazuje je buildTimelineTicks() v gps-map.js podle délky
           etapy. pointer-events: none je nutné — bez toho by značka pod kurzorem
           spolkla kliknutí určené ose a přeskočení času by na ní nefungovalo. */
        div#whole-map div#overMap div.gps-tick {
            position: absolute;
            top: -4px;
            width: 0;
            height: 16px;
            border-left: 1px solid rgba(255, 255, 255, .85);
            pointer-events: none
        }

            div#whole-map div#overMap div.gps-tick span {
                position: absolute;
                top: 15px;
                left: 0;
                transform: translateX(-50%);
                font-size: 11px;
                font-weight: 400;
                white-space: nowrap;
                text-shadow: 0 0 3px #000
            }

    /* Na telefonu se osa do řádku nevejde — na 375 px by jí po tlačítkách a času
       zbylo kolem osmdesáti pixelů a popisky značek by se slily. Tam tedy zalomí pod
       řádek, jako to měl box původně všude. */
    @media (max-width: 700px) and (orientation: portrait) {
        div#whole-map div#overMap {
            left: 8px;
            right: 8px;
            font-size: 16px;
            padding: 6px 10px 22px;
        }

        div#whole-map div#overMap div.gps-replay-bar {
            flex-wrap: wrap;
        }

        div#whole-map div#overMap div#gps-currentTime {
            width: auto;
            font-size: 13px;
            margin-left: 6px;
        }

        div#whole-map div#overMap div#gps-timeline {
            flex-basis: 100%;
            margin-top: 6px;
        }
    }

    div#map-finish-result, div#map-result {
        clear: left;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        font-size: 12px;
        height: calc(100% - 104px);
        overflow-y: auto;
        background-color: white;
    }

        div#map-finish-result div {
            float: left;
            width: 50%;
        }

            div#map-finish-result div table {
                width: 90%;
            }

        div#map-finish-result h3, div#map-result h3 {
            margin-top: 10px;
        }

        div#map-finish-result td, div#map-result td {
            padding: 5px;
            text-align: center;
        }

        div#map-finish-result tr:nth-child(odd), div#map-result tr:nth-child(odd) {
            background-color: #f7f7f7;
        }

        div#map-finish-result th, div#map-result th {
            padding: 3px;
            text-align: center;
        }

        div#map-finish-result label, div#map-result label {
            margin: 0px;
        }


    div.gps-detail {
        border-top: 1px solid black;
        width: 100%;
        display: none;
        color: black;
        padding-bottom: 10px;
        /* Pevná výška — seznam nad ním počítá calc(100% - … - tahle výška), viz
           div.showDetailList. V ORC režimu je o řádek vyšší kvůli typu a koeficientu. */
        height: var(--gps-detail-h);
        font-weight: bold;
    }

    div.showDetail div.gps-detail {
        display: block;
    }

    @media (max-width: 700px) and (orientation: portrait) {
        div.showDetail div.gps-detail {
            display: none;
        }
    }

    div .gps-detail img {
        filter: brightness(0%);
        height: 20px;
    }

    div .gps-detail h3 {
        width: 150px;
        display: inline-block;
        font-size: 16px;
        margin-left: 10px;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    div.gps-detail a.close {
        display: inline-block;
        float: right;
        margin-right: 15px;
        margin-top: 5px
    }

    div.gps-detail table {
        width: 100%;
        margin: 0px;
        border: 0;
    }

        div.gps-detail table tr {
            height: 22px;
            padding: 0px;
        }

        div.gps-detail table th {
            height: 22px;
            line-height: 22px;
            padding: 0px;
            border: 0;
        }

        div.gps-detail table img {
            height: 20px;
            display: inline-block;
            vertical-align: middle;
        }

        div.gps-detail table span {
            display: inline-block;
            vertical-align: middle;
        }

    div.gps-list table td, div.gps-list table th {
        padding: 0px;
    }

        div.gps-list table th.lock {
            text-align: left;
            padding-left: 7px;
        }

    table.gps-listHand tr {
        cursor: pointer;
        border: none;
    }

    div.gps-list table th {
        line-height: 13px;
        color: #2a2c2c;
        border: none;
    }

    div.gps-list table td {
        height: 17px;
        border: none;
    }

    div.gps-list td div {
        width: 12px;
        height: 14px;
        display: block;
        float: left;
        margin: 2px 0 0 0;
    }

    /* Zaškrtávátko a barevný čtvereček v prvním sloupci jsou OBA float:left, takže
       stojí vedle sebe a potřebují na řádku:

           6 (margin-left zaškrtávátka) + 14 (zaškrtávátko)
         + 3 (margin-right)             + 12 (čtvereček)   =  35 px

       Jakmile se buňka zúží pod to, druhý float se zalomí POD první a řádek seznamu
       je dvakrát vyšší (36 px místo 20).

       A je to začarovaný kruh: po zalomení klesne přirozená šířka buňky na 23 px,
       takže se sama od sebe nikdy nerozšíří zpátky. Na mobilu, kde se tabulka do
       panelu nevejde a prohlížeč sloupce stlačuje, to nastávalo pokaždé.

       Minimální šířka ten cyklus přetne. Na desktopu je buňka stejně 50 px (viz
       <col width="50">), takže se tam nemění nic. */
    div.gps-list table td:first-child,
    div.gps-list table th:first-child {
        min-width: 36px;
    }

    /* Sloupec Cieľ se v automatickém layoutu smrskl na 29 px podle aktuálních hodnot
       (lodě stojí na startu, takže tam svítí "0.004"). V závodě tam ale bude "587.412",
       což je 40 px — a číslo by se ořízlo nebo nalepilo na okraj panelu.
       Minimum proto vychází z nejdelší reálné hodnoty, ne z té, co je zrovna vidět. */
    html.gps-orc div.gps-list table td:last-child,
    html.gps-orc div.gps-list table th:last-child {
        min-width: 42px;
        padding-right: 5px;
    }

    /* Typ lodě a koeficient pod jménem v detailu. Odsazení zleva sedí na margin-left
       nadpisu se jménem (10 px), aby řádky lícovaly. */
    div.gps-detail div.gps-detail-orc {
        font-size: 12px;
        font-weight: normal;
        color: #000;
        margin: -4px 0 4px 10px;
    }

    div.gps-list td input {
        width: 12px;
        height: 14px;
        display: block;
        float: left;
        margin: 2px 0 4px 0;
        margin-left: 6px;
        margin-right: 3px;
        border: 1px solid #0f2849;
    }

    div#whole-map div.gps-list tr.gps-black, div#whole-map div.gps-list tr.gps-black a {
        color: black
    }

    div#whole-map div.gps-list tr.gps-mediumblue, div#whole-map div.gps-list tr.gps-mediumblue a {
        color: mediumblue;
    }

    div#whole-map div.gps-list tr.gps-green, div#whole-map div.gps-list tr.gps-green a {
        color: green;
    }

    div#whole-map div.gps-list table tr.over, div#whole-map div.gps-list table tr.selected {
        background-color: #c6d7ee;
    }

    div.gps-etape label {
        margin-left: 13px;
        font-size: 13px;
    }

    div.gps-etape input {
        margin-left: 10px;
        margin-top: 0px;
        margin-right: 0px;
        width: 13px;
        height: 14px;
        color: black;
        border: 1px solid #0f2849;
    }

    div.gps-etape select {
        min-width: 50px;
        width: 150px;
        margin-left: 14px;
        margin-top: 4px;
        margin-right: 3px;
        margin-bottom: 5px;
        padding: 2px;
        display: inline-block;
        font-size: 13px;
        border: 1px solid #0f2849;
        -webkit-appearance: menulist;
    }

    .gps-etape h3 {
        display: inline;
        float: left;
        margin: 3px 5px 3px 14px;
        font-size: 18px;
    }

    div#whole-map div.gps-etape div#countdown {
        font-size: 25px;
        width: 100%;
        text-align: center;
        font-family: Courier New
    }

    .loader {
        z-index: 2000;
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        margin: auto;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 80px;
        height: 80px;
        -webkit-animation: 1s linear infinite spin;
        animation: 1s linear infinite spin
    }


@media (max-width: 700px) and (orientation: portrait) {
    div .gps-etape {
        width: 215px;
        /* Výška se tu NEODVOZUJE z --gps-etape-h: seznam lodí stojí VEDLE bloku
           (float: left), ne pod ním, takže ho nic nenutí mít pevnou výšku — a kdyby ji
           měl, obsah, který se do 215 px nevejde, by z něj vylezl. */
        height: auto;
    }

    /* Dvojice "Posúvať mapu" a "Zobraziť stopu" potřebovaly 238 px, blok má 215 —
       druhý popisek se proto lámal uprostřed ("Zobraziť" / "stopu") a zaškrtávátko
       zůstalo osamocené pod ním. Stažením odsazení a písma se obojí vejde na řádek;
       nowrap navíc zaručí, že se popisek nerozlomí ani kdyby místo přece jen došlo —
       přeskočí celý. */
    div.gps-etape label {
        margin-left: 4px;
        font-size: 11px;
        white-space: nowrap;
    }

    div.gps-etape input {
        margin-left: 4px;
    }

        div.gps-etape select {
            width: 90px;
        }

            div.gps-etape select.etape {
                width: 115px;
            }
}
table.total-results span.skip {
    text-decoration: line-through;
    color: gray
}
table.login {
    margin: 0px auto;
    margin-top: 30px;
}
    table.login input {
        margin-left: 10px;
        margin-top: 0px;
        margin-right: 0px;
        height: 14px;
        color: black;
        border: 1px solid #0f2849;
    }

    table.login td {
        border: 0px;
    }
        table.login td a {
            border: 1px solid #0f2849;
            padding: 3px;
        }


/* Popisek rychlosti pod lodi (gps-map.js, trida na MarkerLabel).
   Mapa je satelitni, takze bily text potrebuje obrys - jinak zmizi na svetle hladine
   i na pene. MarkerLabel neumi stroke, kresli se proto stinem na vsechny strany. */
.gps-speed-label {
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000;
    white-space: nowrap;
    pointer-events: none;
}