/*!

    This XWord Info CSS file (c) 2010-2024 by Jim Horne.
    All rights reserved.

*/

/*
    Styles for acrostic.aspx
*/

body {
    font-size: 11pt;
}

h2 {
    margin: 0;
    font-size: 14pt;
    margin-bottom: 30px;
}

.toppanel {
    max-width: 1200px;
}

    .toppanel p {
        font-size: 12pt;
        max-width: initial;
    }

    .toppanel a {
        font-weight: bold;
        white-space: nowrap;
    }

.conphoto {
    float: right;
    margin: 4px 0 4px 30px;
}

.photo {
    float: left;
    margin: 0 8px;
}

.error {
    border: 2px solid red;
    color: maroon;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #eee;
    text-align: center;
    padding: 10px;
    background-color: #fee;
    clear: both;
    border-radius: 8px;
    margin: 20px 0;
    display: none;
    max-width: 1200px;
}

.admin {
    color: darkblue;
    font-weight: bold;
}

.blogLink {
    margin-top: 30px;
}

    .blogLink a {
        color: var(--xRed);
        font-weight:bold;
    }

#RevealBut {
    padding: 2px 6px;
    float: right;
    margin-top: 6px;
    margin-right: 20px;
}

#SolLink {
    display: none;
}

.notepad {
    padding: 5px 8px;
}

.notepad2 { 
    margin-top: 20px;
    display: inline-block;
    font-size: 11pt;
}

#Clue {
    font-size: 18px;
    margin: 20px 0 8px 6px;
}

.clueinit { /* set in JS */
    font-weight: bold;
    font-size: 20px;
}

.PuzTable div.num, #ClueGrid div.num {
    font-size: min(1vw, 14px);
    padding: 1px 2px 0 2px;
    color: gray;
    height: initial;
}

#ClueGrid div.num {
    text-decoration-line: overline;
}

.PuzTable {
    margin: 0;
    border: 1px solid black;
}

    .PuzTable td {
        width: min(3.5vw, 45px);
        height: min(3.5vw, 45px);
    }
    
    .PuzTable .nlet {
        float: right;
    }

    .PuzTable div.letter {
        font-size: min(1.7vw, 21px);
        height: initial;
        margin-top: 2px;
    }

#GridWrap {
    margin-top: 4px;
}

#GridWrap, #ClueWrap, #TitleWrap {
    padding: 3px;
    display: inline-block;
}

#TitleWrap {
    border: 3px solid transparent;
    padding-bottom: 0;
    margin-top: 4px
}

#ClueCon { /* ClueWrap plus congrats */
    width: 100%;
    max-width: 1200px;
}

#ClueTable div.num {
    padding-left: 3px;
}

#Congrats {
    display: none;
    padding: 10px 0;
    margin: 0 3px 0 0;
    font-size: 16px;
    width: 350px;
    border: 2px solid #404040;
    text-align: center;
    float: right;
}

#TitleTable div.num {
    padding-right: 4px;
    text-align: right;
}

#ClearBox {
    display: none;
}

#Quotes {
    max-width: 1200px;
}

#Quote, #FullQuote {
    display: none;
    overflow: hidden;
    margin-bottom: 16px;
    font-size: 11pt;
    margin-right: 3px;
}

#FullQuote {
    background-color: #f8f8f8;
}

#FullQuote p {
    margin-bottom: 1px;
    max-width: initial;
}

.copy {
    font-style: normal;
}

    div.copy a {
        color: inherit;
    }

.iPad {
    border: 1px solid #f00;
    background-color: #fbb;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    padding: 12px 6px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.PuzTable td.wrong {
    background-color: #d02020;
}

    .PuzTable td.wrong div.letter {
        color: #fff;
    }

.PuzTable .right {
    background-color: #dfd;
}

.new {
    font-weight: bold;
    color: firebrick;
}

.twarn {
    font-size: 15px;
    background-color: #ffbbbb;
    margin-top: 20px;
    margin-bottom: 20px;
}

td.select {
    background-color: #fc3
}

td.hover {
    background-color: #6cf
}

table.inFocus {
    background-color: #fff
}

table.outFocus {
    background-color: var(--xDarken)
}

div.inFocus {
    border: 3px solid #800000
}

div.outFocus {
    border: 3px solid transparent
}

#cellar {
    max-width: 728px;
}

/* ClueGrid classes */

#ClueGrid {
    margin: 20px 6px 30px 6px;
    max-width: 1200px;
    font-size: 11pt;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(9, auto);     /* This gets reset by  fillClueGrid() in Acrostic.ts */
    column-gap: 10px;
    row-gap: 10px;
    align-items: start;
    overflow-x: auto;
}

.clueItem {
    display: grid;
    column-gap: 12px;
    grid-template-columns: auto 1fr;
    row-gap: 2px;
}

.clueLetter {
    grid-row: span 2;
    font-weight: bold;
    font-size: 14px;
    color: firebrick;
}

.clueDiv {
    margin-top: 1px;
}

/* clueGrid answers*/

.ansDiv {
    color: #153e7e;
    display: flex;
    column-gap: 5px;
    text-align: center;
}

/* tooltip classes */

.ttLetter {
    font-weight: bold;
    grid-area: letter;
    color: firebrick;
}

.ttClue {
    grid-area: clue;
    white-space: nowrap;
}

.ttAns {
    grid-area: ans;
    letter-spacing: 8px;
    white-space: nowrap;
}

    .ttAns .hlet {
        border: 1px solid #b0b0b0;
        background-color: #ffffff;
        padding: 0 0 0 6px;
        margin-right: 5px;
    }

.ttAcr {
    max-width: initial;
    background-color: #ffeb80;
    padding: 6px 10px 8px 10px;
}

    .ttAcr .ui-tooltip-content {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas: "letter clue" "letter ans";
        column-gap: 15px;
        row-gap: 6px;
    }

@media (max-width: 800px) {

    #ClueGrid {
        font-size: 10pt;
    }

    .toppanel p {
        font-size: 10pt;
    }

    .notepad {
        font-size: 10pt;
    }

    #Congrats {
        padding:0 6px; 
        font-size: 10pt;
        width: initial;
        border: 1px solid #404040;
    }
}