
body.display {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: black;

    color: white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    white-space: nowrap;
}

#displaymainpane {
    position: absolute;
    width: 100%;
    height: 100%;
}

#teleostbanner {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 4.5vmin;
    height: 7vmin;
    line-height: 7vmin;
    z-index: 1;
    display: none;
    background: linear-gradient(to bottom, hsl(0, 100%, 35%), hsl(0, 100%, 10%));
    /*font-family: var(--heading-font-family);*/
}

/* General look and feel that applies to all screens */
.headingbar {
    background-color: navy;
    font-family: var(--heading-font-family);
    border-top: 0.1vh solid gray;
    border-bottom: 0.1vh solid gray;
}

/* Placeholder */
div.placeholder {
    position: absolute;
    top: 45%;
    width: 100%;
    text-align: center;
    font-size: 5vmin;
}

.condensedtext {
    font-family: var(--condensed-font-family);
}

/* Technical difficulties slide, etc */
div.imageviewcontainer {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.imageviewimage {
    max-width: 100%;
    max-height: 100%;
}

/* Standings table */
table.teleoststandings {
    position: absolute;
    left: 5%;
    top: 5%;
    font-size: 4.2vmin;
    line-height: 6vmin;
    width: 90%;
    max-width: 90%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.teleoststandings tr {
    border-top: 0.1vh solid gray;
}

tr.teleoststandingsheadingrow {
}

table.teleoststandings th {
    font-family: var(--heading-font-family);
    padding-left: 0.25em;
    padding-right: 0.25em;
    font-weight: normal;
}

th.teleoststandingsheadingstring {
    text-align: left;
}

th.teleoststandingsheadingnumber {
    text-align: right;
}

table.teleoststandings td {
    padding-left: 0.25em;
    padding-right: 0.25em;
    border-top: 0.1vh solid gray;
    border-bottom: 0.1vh solid gray;
}

span.finalsform {
    font-size: 2.5vmin;
    line-height: 3vmin;
    font-family: var(--condensed-font-family);
    color: yellow;
}

tr.teleoststandingsevenrow {
    background-color: #000022;
}

tr.teleoststandingsoddrow {
    background-color: #000044;
}

tr.teleoststandingsqualified {
    background-color: #005500;
}

col.teleoststandingscolpos {
    color: yellow;
    width: 10%;
}

col.teleoststandingscolname {
    width: 54%;
}

col.teleoststandingscolplayed {
    color: cyan;
    width: 10%;
}

col.teleoststandingscolwins {
    color: cyan;
    width: 10%;
}

col.teleoststandingscolsecondary {
    color: cyan;
    width: 14%;
}

col.teleoststandingscolpoints {
    color: cyan;
    width: 14%;
}

colgroup.teleoststandingsonesecondary col.teleoststandingscolname {
    width: 42%;
}

colgroup.teleoststandingstwosecondaries col.teleoststandingscolname {
    width: 30%;
}

td.teleoststandingspos {
    color: yellow;
}

td.teleoststandingsnumbercol {
    color: cyan;
}

span.withdrawn {
    color: gray;
}

.teleostnumber {
    text-align: right;
}

div.videprintercontainer {
    position: absolute;
    background-color: #000040;
    /*background: linear-gradient(200deg, navy, black);*/
    left: 0%;
    width: 100%;
    height: 100%;
    /*border-bottom: 2px solid #004000;*/
    border-top: 0.75vh ridge silver;
    font-family: var(--videprinter-font-family);
    overflow: hidden;
}

div.videprintercontainervertical {
    border-top: none;
    overflow: wrap;
    font-family: var(--condensed-font-family);
    border-left: 0.5vw ridge silver;
}

table.teleostvideprinter {
    position: absolute;
    left: 5%;
    width: 90%;
    font-size: 4vmin;
    line-height: 5vmin;
    color: white;
}

table.teleostvideprintervertical {
    position: absolute;
    bottom: 3vh;
    font-size: 3.5vh;
    line-height: 4.5vh;
}

@keyframes videprinter_scroll_up {
    from { transform: translate(0, 0); }
    to { transform: translate(0, -6vh); } /* teleostvideprinter td height + padding */
}

@keyframes videprinter_scroll_up_small {
    from { transform: translate(0, 0); }
    to { transform: translate(0, -5vh); } /* teleostvideprinter td height + padding */
}

table.teleostvideprintertablescroll {
    animation: videprinter_scroll_up 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; /* once animated, stay on last frame until we change something */
    overflow: hidden;
    white-space: nowrap;
}

table.teleostvideprintervertical.teleostvideprintertablescroll {
    animation: videprinter_scroll_up_small 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; /* once animated, stay on last frame until we change something */
    overflow: hidden;
    white-space: nowrap;
}

table.teleostvideprinter td {
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    height: 5vh;
}

table.teleostvideprinter tr {
    height: 5vh;
}

table.teleostvideprintervertical td {
    padding-top: 0.25vh;
    padding-bottom: 0.25vh;
    height: 4.5vh;
}

table.teleostvideprintervertical tr {
    height: 4vh;
}

td.teleostvideprinterpreamble {
    width: 12vw;
    text-align: right;
    padding-right: 1vh;
}

td.teleostvideprinterentry {
    padding-left: 2vh;
    overflow: hidden;
}

@keyframes videprinter_animate_entry {
    from { width: 0; }
    to { width: 100%; }
}

div.videprinteranimatescoreline {
    animation: videprinter_animate_entry 1s steps(20);
    overflow: hidden;
    white-space: nowrap;
}

.videprinterroundandtable {
    color: orange;
    padding-right: 2vh;
}

.videprinterscore {
    color: white;
    padding-left: 2vh;
    padding-right: 2vh;
}

.videprinterplayer {
    color: white;
}

.teamdotleftplayer {
    padding-left: 1vmin;
}

.teamdotrightplayer {
    padding-right: 1vmin;
}

.videprintersuperseded {
    text-decoration: line-through;
    color: gray;
}

.videprintercomment {
    color: cyan;
}

.videprintercommentbullet {
    color: orange;
    padding-right: 0.5vw;
}

/* Team score: appears on various views */
.teamscore {
    font-size: 4vmin;
    padding-left: 2vmin;
    padding-right: 2vmin;
    margin-left: 1vmin;
    margin-right: 1vmin;
    width: 6vmin;
    text-align: center;
    font-family: var(--text-font-family);
    /*font-weight: bold;*/
    /*font-family: var(--heading-font-family);*/
    /*color: black;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;*/
}

.teamscoreleft {
    float: left;
}

.teamscoreright {
    float: right;
}

.teamscorelight {
    text-shadow: none;
    color: black;
}

/* Current round per-table results */

.roundresultsheading {
    position: absolute;
    top: 0vmin;
    left: 5%;
    height: 6vmin;
    line-height: 6vmin;
    width: 90%;
    overflow: hidden;
    border-collapse: collapse;
    font-size: 4.5vmin;
    padding-top: 0.5vmin;
    padding-bottom: 0.5vmin;
}

span.roundresultsdivision {
    position: absolute;
    height: 100%;
    left: 0;
    text-align: left;
    padding-left: 1vmin;
}

span.roundresultsround {
}

.roundresultsleftheading {
    position: absolute;
    left: 0%;
    width: 48%;
    text-align: right;
}

.roundresultsrightheading {
    position: absolute;
    left: 52%;
    text-align: left;
}

.roundresultscentreheading {
    position: absolute;
    text-align: center;
    left: 0%;
    width: 100%;
}

table.roundresults {
    position: absolute;
    font-size: 4vmin;
    top: 7vmin;
    left: 5%;
    width: 90%;
    max-width: 90%;
    border-collapse: collapse;
    table-layout: fixed;
}

col.roundresultscolp1 {
    width: 40%;
}

col.roundresultscolscore {
    width: 20%;
}

col.roundresultscolp2 {
    width: 40%;
}

table.roundresults tr {
    border-bottom: 0.1vh solid gray;
}

table.roundresults td {
    padding-left: 1vmin;
    padding-right: 1vmin;
    padding-top: 0.5vmin;
    padding-bottom: 0.5vmin;
    overflow: hidden;
}

td.roundresultsp1 {
    text-align: right;
}

td.roundresultsscore {
    text-align: center;
}

td.roundresultsp2 {
    text-align: left;
}

/* Fixtures view */
div.fixturescontainer {
    position: absolute;
    left: 0%;
    top: 5%;
    width: 100%;
    height: 100%;
}

.fixturesheading {
    height: 10%;
    margin-left: 5%;
    width: 90%;
}

.fixturesheadingtext {
    position: absolute;
    padding-top: 1.8vh;
    left: 14%;
    width: 86%;
    font-size: 5vmin;
}

div.fixturescontainernarrow .fixturesheading {
    height: 6.16vmin;
}

div.fixturescontainernarrow .fixturesheadingtext {
    padding-top: 0.85vh;
    font-size: 3.5vmin;
}

.fixturesheadingtextleft {
    position: absolute;
    left: 0%;
    text-align: left;
}

.fixturesheadinground {
    position: absolute;
    left: 0%;
    width: 94%;
    text-align: center;
}

.fixturesheadingteamscore {
    position: absolute;
    left: 0%;
    width: 94%;
    text-align: right;
}

table.fixtures {
    position: absolute;
    font-size: 4vmin;
    left: 5%;
    width: 90%;
    max-width: 90%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.fixturesnarrow {
    font-size: 2.5vmin;
}

table.fixtures tr {
    height: 6vmin;
    min-height: 6vmin;
}

table.fixturesnarrow tr {
    height: 4.2vmin;
    min-height: 4.2vmin;
}

tr.fixturesrowlastinblock {
    border-bottom: 0.1vh solid gray;
}

td.fixturestablenumbercell {
    width: 10%;
    border-bottom: 0.1vh solid gray;
    text-align: center;
}

.fixturestablenumber {
    font-family: var(--heading-font-family);
    border-radius: 2vmin;
    border: 0.1vh solid gray;
    background-color: navy;
}

td.fixturesp1 {
    text-align: right;
    width: 37.5%;
    overflow: hidden;
    padding-left: 1vmin;
}

td.fixturesscore {
    text-align: center;
    width: 15%;
}

td.fixturesp2 {
    text-align: left;
    width: 37.5%;
    overflow: hidden;
}

table.fixturesnarrow td.fixturesp1 {
    width: 35%;
}

table.fixturesnarrow td.fixturesscore {
    width: 20%;
}

table.fixturesnarrow td.fixturesp2 {
    width: 35%;
}


/* Name-to-table index */

div.viewheading {
    position: absolute;
    top: 5vh;
    left: 0%;
    width: 100%;
    height: 10vh;
    font-size: 6vmin;
    text-align: center;
}

div.viewheadingtext {
    position: relative;
    line-height: 10vh;
}

div.tabindexbigtable {
    position: absolute;
    top: 20%;
    left: 5%;
    height: 70%;
    width: 90vw;
    font-size: 3.8vmin;
}

div.tabindexcolumn {
    position: relative;
    float: left;
}

div.tabindexcolumnspace {
    position: relative;
    float: left;
}

table.tabindextable {
    position: relative;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.8vmin;
    table-layout: fixed;
}

table.tabindextable tr {
}

td.tabindexname {
    background-color: navy;
    text-align: left;
    width: 80%;
    overflow: hidden;
    padding-left: 1vmin;
}

td.tabindexnumber {
    background-color: blue;
    text-align: center;
    width: 15%;
    font-family: var(--heading-font-family);
}

/* Tuff luck */

table.teleostmaintable {
    position: absolute;
    left: 5%;
    top: 20%;
    font-size: 4.8vmin;
    width: 90%;
    max-width: 90%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.teleostmaintable th {
    padding-right: 2vw;
}

table.teleostmaintable tr {
    border-bottom: 0.1vh solid gray;
}

table.teleostmaintable td {
    padding-left: 2vw;
    padding-right: 2vw;
}

th.teleosttableheadingstring {
    text-align: left;
}

th.teleosttableheadingnumber {
    text-align: right;
}

table.teleostmaintable th {
    font-weight: normal;
}

col.teleosttuffluckcolpos {
    color: yellow;
    width: 8vw;
}

col.teleosttuffluckcolname {
    color: white;
    width: 60vw;
}

col.teleosttuffluckcoltuffness {
    color: cyan;
    width: 15vw;
}

td.teleosttablecellpos {
    color: yellow;
}

td.teleosttablecellname {
    overflow: hidden;
    color: white;
}

td.teleosttablecellnumber {
    color: cyan;
}

/* Overachievers */
col.teleostoverachieverscolpos {
    width: 8vw;
}

col.teleostoverachieverscolname {
    width: 50vw;
}

col.teleostoverachieverscolseed {
    width: 8vw;
}

col.teleostoverachieverscolrank {
    width: 8vw;
}

col.teleostoverachieverscoldiff {
    width: 8vw;
}

/* High scores view */

div.highscoresheading {
}

table.tableofgames {
    position: absolute;
    font-size: 4vmin;
    left: 5vw;
    top: 20vh;
    width: 90%;
    max-width: 90%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.tableofgames tr {
    border-top: 0.1vh solid gray;
    border-bottom: 0.1vh solid gray;
}

table.highscorestable td {
    padding: 1vmin;
}

col.highscorescolround {
    width: 10%;
}

col.highscorescolp1 {
    width: 35%;
}

col.highscorescolp2 {
    width: 35%;
}

col.highscorescolscore {
    width: 20%;
}

td.highscoresround {
    color: orange;
}

span.highlightscore {
    font-weight: bold;
    color: yellow;
}

/* Clock */
img.teleostclockhourhand {
    position: absolute;
    z-index: 1;
}

img.teleostclockminutehand {
    position: absolute;
    z-index: 2;
}

@keyframes welcomeBackgroundAnimate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

div.movingbackground {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, black, navy, black);
    background-size: 400% 400%;
    animation: welcomeBackgroundAnimate 20s ease infinite;
    z-index: -1;
}

div.welcomeheading {
    position: absolute;
    display: block;
    font-size: 5vmin;
    line-height: 10vmin;
    width: 100%;
    white-space: normal;
    text-align: center;
    font-weight: bold;
    font-variant-numeric: normal;
}

#welcomeheading1 {
    top: 33vh;
}

#welcomeheading2 {
    top: 43vh;
    font-size: 7vmin;
    line-height: 14vmin;
}

div.checkinblurb {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 90%;
    text-align: center;
    font-size: 2.5vmin;
}

#checkincount {
    position: absolute;
    bottom: 6%;
    left: 5%;
    text-align: left;
    font-size: 2.5vmin;
}

div.viewpagenumber {
    position: absolute;
    bottom: 6%;
    right: 5%;
    text-align: right;
    font-size: 2.5vmin;
}

div.checkinlist {
    position: absolute;
    top: 30%;
    left: 5%;
    width: 90vw;
}

table.checkintable {
    width: 100%;
    font-size: 3vmin;
    border-collapse: separate;
    border-spacing: 0.8vmin;
    table-layout: fixed;
}

table.checkintable td {
    background-color: navy;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

table.checkintable td.checkincolumnspace {
    background-color: transparent;
    width: 3vw;
}
