:root {
    --entry-font-size-ratio: 25;
    --entry-line-height-ratio: 15;
    --key-font-size-ratio: 11.5;
    --position-font-size-ratio: 60;
    --position-font-offset-ratio: -300;
    --clue-arrow-ratio: 15;
    --key-size: calc(var(--screenwidth) / var(--key-font-size-ratio));
    --key-font-size: calc(var(--screenwidth) / (var(--key-font-size-ratio) + 2));
    --key-spacing-ratio: 100;
    --current-ad: url("/static/crossword/images/ads/ad_1.jpg");
    --ideas-height: 40px;
    --required-star-width: 23px;
}
*:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

body {
    font-family: soleil,Helvetica,Arial,sans-serif;
    margin: 0px;
}

select, option {
    font-size: 18px;
}

#mobileheader {
    width: 97%;
    max-width: 800px;
    margin: 10px auto;
}
@media (min-width: 601px) {
    #brandimage {
        height: 60px;
    }
}
@media (max-width: 600px) {
    #brandimage {
        height: 30px;
    }
}
#hamburger {
    position: relative;
}

#hamburgermenu {
    position: absolute;
    z-index: 5;
    top: 0px;
    left: 0px;
    display: none;
    border: 1px solid gray;
    border-radius: 4px;
    border-top-left-radius: 0px;
    background-color: #FFFFFF;
    width: clamp(100px, calc(var(--screenwidth) * 0.9), 400px);
}

#hamburgeroverlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 4;
    cursor: pointer;
    display: none;
}

.hamburgerentry {
    font-size: 16px;
    margin: 5px 10px;
    padding: 15px 0px 10px;
    font-weight: bold;
}

.hamburgerentry:not(hr + .pageentry) {
    border-top: 1px solid #dddddd;
}

.hamburgerentry.pageentry{
    background-image: url('/static/crossword/images/transdot.png');
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 40px;
}

#hamburgermenu hr {
    border: 2px solid darkgray;
}

.hamburgerentry.check {
    background-image: url('/static/crossword/images/greencheck.png');
}

.hamburgerentry.reveal {
    background-image: url('/static/crossword/images/eyeball.png');
}

.hamburgerentry.clear {
    background-image: url('/static/crossword/images/redx.png');
}

#pagecontent {
    text-align: center;
    /*height: calc( var( --pagecontent-height ) - 5px);*/
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 800px;
    width: 97%;
    margin: auto;
}
.pagetitle {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    margin: auto;
    width: 95%;
}
.header {
    font-weight: bold;
    font-size: 18px;
}

.instructions {
    font-size: 15px;
    font-weight: bold;
    width: 90%;
    padding: 5px;
    margin: auto;
}
.buttonlabel {
    font-size: 14px;
    font-weight: bold;
    width: 90%;
    margin: 5px auto;
}
.inputwrapper {
    text-align: left;
    margin: 10px auto 5px;
    font-weight: bold;
    width: 100%;
}
.inputwrapper input, .inputwrapper textarea {
    width: 100%;
    margin: auto;
    font-size: 25px;
    box-sizing: border-box;
}

.inputlabel {
    width: 100%; 
    display: block; 
    margin: 20px 0px 0px; 
    text-align: left; 
    font-weight: bold;
    font-size: 22px;
}

.navbutton {
    height: 40px;
    font-size: 23px;
    font-weight: bold;
    cursor: pointer;
    margin: 10px;
}

.navbutton.twoline {
    height: auto;
}

.navbutton.smalltext {
    font-size: 19px;
    width: 150px;
}

.mainimage {
    max-width: 95%;
    max-height: 250px;
    padding-top: 10px;
}

.stallimage {
    width: 80px;
    margin: 0px auto;
}

.inputlabel.required, .inputlabel.notrequired {
    padding-left: var(--required-star-width);
    width: calc(100% - var(--required-star-width)) !important; 
}

.inputlabel.required {
    background-image: url('/static/crossword/images/redstar.png');
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: left;
}

.trimenu {
    width: 95%;
    max-width: 550px;
    margin: 20px auto;
}

.trimenu-item.active {
    background-color: #cccccc;
    font-weight: bold;
}
.trimenu-item {
    display: inline-block;
    width: calc(33.33% - 15px);
    padding: 5px;
    border-radius: 6px;
    vertical-align: middle;
    font-size: min( 19px, calc( var( --screenwidth ) / 30 ));
    border: 1px solid black;
}

.bulletlabel {
    font-weight: bold;
    text-decoration: underline;
    margin: 10px 0px;
}

.bulletlist,.bulletlabel {
    font-size: 16px;
    text-align: left;
}

.bulletlist {
    margin: 10px auto;
    width: 90%;
    background-color: #DDDDDD; 
    border: 1px solid black; 
    border-radius: 4px;
}
.bullet {
    font-weight: bold;
    padding-left: 10px;
}
.blocktext {
    text-align: left;
}