/*====================================================================================================================
//
//      enigma.css: Main css file
//
//      Copyright Michael F.C. Crick 2014-2023 All Rights Reserved
//
//*====================================================================================================================*/

html { width: 100%; background-color: white; }
body { width: 100%; background-color: white; }

#content { position: absolute; margin-left: 2%; height: 100%; top: -2%;
    background-color: white; color: black;
    font-family: 'Times New Roman', serif; -ms-touch-action: manipulation !important;
}
div #msgRect { position: absolute; border-radius: 5px; background: black; padding: 20px; opacity: 1;
    margin-top: 85%; margin-left: 4%; width: 400px; height: 18px; visibility: hidden; }
#msgText { margin-top: 0%; margin-left: -2%; text-align: center; color: white; font-size: 110%; }

.hint {}    /* removes two error messages in the html file */

div #lines { font-family: Verdana, Geneva, sans-serif; }

p.cellTop { position: absolute; top: -1%; margin-left: -71%; width: 400%; line-height: 1.6em;
    background-image: url('img/cell-blank.png'); background-size: cover; height: 96%;
    color: black; text-align: center; font-size: 189%; padding-left: 0%;
    -moz-user-select: none;   /* makes cells so they don't get selected */
    -webkit-user-select: none;
}
p.keyTop:hover { cursor: pointer; }

div #line1 { position: absolute; width: 130%; height: 17%; }
div #line1 > div { position: absolute; width: 2.74%;
    height: 115%; margin-left: 2%; top: 9%; visibility: hidden; }

div #line2 { position: absolute; width: 130%; height: 17%; }
div #line2 > div { position: absolute; width: 2.74%;
    height: 115%; margin-left: 2%; top: 0%; visibility: hidden; }

div #line3 { position: absolute; width: 130%; height: 17%; }
div #line3 > div { position: absolute; width: 2.74%;
    height: 115%; margin-left: 2%; top: -9%; visibility: hidden; }

div #line4 { position: absolute; width: 130%; height: 17%; }
div #line4 > div { position: absolute; width: 2.74%;
    height: 115%; margin-left: 2%; top: -18%; visibility: hidden; }

div #line5 { position: absolute; width: 130%; height: 17%; }
div #line5 > div { position: absolute; width: 2.74%;
    height: 115%; margin-left: 2%; top: -27%; visibility: hidden; }

div #line6 { position: absolute; width: 130%; height: 17%; }
div #line6 > div { position: absolute; width: 2.74%;
    height: 115%; margin-left: 2%; top: -36%; visibility: hidden; }

div #lives { font-size: 200%; color: red; text-align: left; }
div #life1 { position: absolute; left: 90%; top: 24%; }
div #life2 { position: absolute; left: 90%; top: 43%; }
div #life3 { position: absolute; left: 90%; top: 61.5%; }
div #life4 { position: absolute; left: 90%; top: 80%; }
div #life5 { position: absolute; left: 90%; top: 99%; }
div #life6 { position: absolute; left: 90%; top: 118%; }

/*div #msgText { position: absolute; width: 117%; height: 20%; text-align: left;*/
/*    top: 301%; left: 9%; }                              !* these are different *!*/

.quoteArea { position: absolute; left: 5%; top: 152%;
    font-size: 210%; line-height: 1.16em; padding-left: 0.5%; color: black;
    /*background-color: wheat;*/ font-family: "Times New Roman", Times, serif;
    -moz-user-select: none;  /* makes text so it doesn't get selected */
    -webkit-user-select: none; }
p#quoteArea span.quoteLetter:hover { cursor: pointer; }

.italics { font-style: italic; }
.open { background-color: GRAY; }

div #rows { font-family: Verdana, Geneva, sans-serif; }
        p.keyTop { position: absolute; top: -15%; left: -30%; width: 100%; line-height: 1.7em;
            background-image: url('img/keyblank.png'); background-size: cover; height: 96%;
            color: black; text-align: center; font-size: 157%; padding-left: 2%; padding-top: 27%;
            -moz-user-select: none;   /* makes keys so they don't get selected */
            -webkit-user-select: none;
        }
        p.keySwap { position: absolute; top: 29%; left: -33%; width: 219%; height: 96%;
            background-image: url('img/keywide2.png'); background-size: cover; background-color: wheat;
            color: black; text-align: center; font-size: 118%; padding-left: 2%; margin-top: 0%;
            padding-top: 30%;line-height: 2.2em;
            -moz-user-select: none;   /* makes keys so they don't get selected */
            -webkit-user-select: none;
            }

        div #row1 { position: absolute; width: 139.5%; height: 16%;     /* these are the same */
            top: 273%; left: 4%; }        /* these are different */
        div #row1 > div { position: relative; float: left; width: 6.7%;
            height: 140%; margin-left: 0.2%; }
        div #row2 { position: absolute; width: 139.5%; height: 16%;
            top: 246%; left: 11%; }                              /* these are different */
        div #row2 > div { position: relative; float: left; width: 6.7%;
            height: 140%; margin-left: 0.195%;  top:0; }     /* these are the same */
        div #row3 { position: absolute; width: 139.5%; height: 16%;
            top: 219%; left: 5.5%; }                              /* these are different */
        div #row3 > div { position: relative; float: left; width: 6.7%;
            height: 140%; margin-left: 0.195%;  top:0; }     /* these are the same */

p.keyDown { top: 4% }

#puzNum { position: absolute; margin-top: 1.5%; left: 51%; visibility: visible;
    font-family: serif; font-weight: bold; font-size: 140%; text-align: left; }
#Quotle { position: absolute; margin-top: 0%; left: 21%; visibility: hidden;
    font-family: serif; font-weight: bold; font-size: 190%; text-align: left; }
#heart { color: red; font-size: 74%; }
#version { visibility: hidden; }

#burger { position: absolute; margin-top: 1.5%; left: 3%; width: 6.5%; }
#burgerTip { position: absolute; margin-top: 0%; left: 1%; width: 27%; font-weight: bold; opacity: 0.01}
#burgerTip:hover { opacity: 1}

#howtoIcon { position: absolute; display: block; width: 7%; left: 74%; margin-top: 0.5%; visibility: hidden; }
#howToTip { position: absolute; margin-top: 0%; left: 70%; width: 27%; font-weight: bold; opacity: .01}
#howToTip:hover { opacity: 1}

#statsIcon { position: absolute; display: block; width: 7%; left: 83%; margin-top: 1%; visibility: hidden; }
#statsTip { position: absolute; margin-top: 0%; left: 80%; width: 27%; font-weight: bold; opacity: .01}
#statsTip:hover { opacity: 1}

#settingsIcon { position: absolute; display: block; width: 7%; left: 91%; margin-top: 0.3%; visibility: hidden; }
#settingsTip { position: absolute; margin-top: 0%; left: 88%; width: 27%; font-weight: bold; opacity: .01}
#settingsTip:hover { opacity: 1}

#moreGames { position: absolute; display: block; width: 86%; left: 8%; margin-top: 11%; visibility: hidden; }
#howtoplay { position: absolute; margin-top: 12%; left: -2%; width: 102%; visibility: visible;}
#settings { position: absolute; display: block; width: 92%; left: 3%; margin-top: 11%; visibility: hidden; }
#hardOn { position: absolute; display: block; width: 7%; left: 82%; margin-top: 22.8%; }
#hardOff { position: absolute; display: block; width: 7%; left: 82%; margin-top: 22.8%; }
#premiumOn { position: absolute; display: block; width: 7%; left: 82%; margin-top: 33.8%; }
#premiumOff { position: absolute; display: block; width: 7%; left: 82%; margin-top: 33.8%; }

#quotleTips { position: absolute; display: block; width: 106%; left: -2%; margin-top: 10%; visibility: hidden;  }

#statBack { position: absolute; width: 100%; left: 0%; margin-top: 2%; height: 100%; }

#topHalf { position: absolute; display: block; width: 7%; left: 10%; margin-top: 7.5%;  height: 20%;
    font-family: Verdana, Geneva, sans-serif; font-size: 90%}

#statX { position: absolute; width: 183%; left: 860%; margin-top: -100%;
    font-family: Verdana, Geneva, sans-serif; font-size: 200%; line-height: 120%; }
#statHide {position: absolute; display: block; left: -4%; margin-top: -127%; width: 40%; height: 20%;
    font-size: 120%; font-weight: bold; text-align: center; }

#statName {position: absolute; display: block; left: 259%; margin-top: -94%; width: 150%;
    font-size: 115%; font-weight: bold; text-align: center; }

#statPlayedText { position: absolute; display: block; left: -45%; margin-top: 15%; width: 150%;
    font-size: 135%; }
#statPlayed { position: absolute; display: block; left: 152%; margin-top: -2%; width: 150%;
    font-size: 195%; line-height: 120%; }

#stats { margin-top: 17%; text-align: center; font-weight: normal; }
#statSolved {position: absolute; display: block; left: 5%; margin-top: 86%; width: 150%;
    font-size: 135%; font-weight: 500; text-align: left; color: green; }

#statLabels21 {position: absolute; display: block; left: 364%; margin-top: 15%; width: 150%;
    font-size: 120%; line-height: 95%; }
#statLabels22 {position: absolute; display: block; left: 535%; margin-top: 13%; width: 150%;
    font-size: 70%; line-height: 95%; }
#statLabels23 {position: absolute; display: block; left: 687%; margin-top: 13%; width: 150%;
    font-size: 70%; line-height: 95%; }
/*top top numbers*/
#statWinsScore { position: absolute; display: block; left: 327%; margin-top: 66%; width: 150%;
    font-size: 195%; text-align: right; }
#statWinsPC { position: absolute; display: block; left: 477%; margin-top: 79%; width: 150%;
    font-size: 125%; text-align: left; }
#statCurrent { position: absolute; display: block; left: 535%; margin-top: 67%; width: 150%;
    font-size: 195%; }
#statMax { position: absolute; display: block; left: 682%; margin-top: 67%; width: 150%;
    font-size: 195%; }
/*bottom row numbers*/
#statVictory {position: absolute; display: block; left: 5%; margin-top: 155%; width: 350%;
    font-size: 135%; font-weight: 500; text-align: left; color: darkred; }

#statVictoryScore {position: absolute; display: block; left:328%; margin-top: 142%; width: 150%;
    font-size: 195%; text-align: right; }
#statVictoryPC {position: absolute; display: block; left:477%; margin-top: 157%; width: 150%;
    font-size: 125%; text-align: left; }
#statCurrent2 {position: absolute; display: block; left: 535%; margin-top: 142%; width: 150%;
    font-size: 195%; }
#statMax2 {position: absolute; display: block; left: 682%; margin-top: 142%; width: 150%;
    font-size: 195%; }

.middle { top: 59%; }
#statGD {position: absolute; display: block; left: 0%; margin-top: 29%;
    font-size: 100%; font-weight: bold; text-align: left; line-height: 145%; width: 990% }
#score1 { position: absolute; left: -59%; margin-top:85%;
    font-size: 110%; font-weight: bold; text-align: left; line-height: 159%; width: 190% }
#chart { left: 140%; margin-top: 330%; }
#bar1 { y: 0; }
#bar2 { y: 25; }
#bar3 { y: 50; }
#bar4 { y: 75; }
#bar5 { y: 100; }
#bar6 { y: 125; }

#statGlyphs {position: absolute; display: block; left: 225%; margin-top: -5%;
    font-size: 79%; text-align: left; line-height: 145%; width: 90% }

.botHalf { top: 205%; }

#bestStart {position: absolute; display: block; left: -56%; margin-top: -200%; width: 950%;
    font-size: 90%; line-height: 140%; font-weight: bold; text-align: left; }

#qTips {position: absolute; display: block; left: 636%; margin-top: -160%;
    width: 270%; height: 20%;
}

#statNext {position: absolute; display: block; left: -56%; margin-top: -90%; width: 750%;
    font-size: 95%; line-height: 140%; font-weight: bold; text-align: left; }

#statKudos {position: absolute; display: block; left: 550%; margin-top: -520%; width: 400%;
    transform: rotate(-25deg);
    font-size: 120%; line-height: 110%; font-weight: bold; text-align: center;}

#statTime {position: absolute; display: block; left: 129%; margin-top: 202%; width: 350%;
    font-size: 65%; line-height: 140%; font-style: italic; text-align: center;}

#StatButtons {position: absolute; display: block; width: 441%; left: 181%; margin-top: 420%; }
#clipboard {position: absolute; display: block; width: 109%; left: 56%; margin-top: -98%; }
#cricklers {position: absolute; display: block; width: 107%; left:-58%; margin-top: -95%; }

#statistics {position: absolute; display: block; width: 124%; height: 375%; left: 3%; margin-top: 9.5%;
    opacity: 1; }
/*#statLabel {position: absolute; display: block; left: 98%; margin-top: -90%; color: black; width: 99%;*/
/*    font-size: 125%; font-weight: bold; font-color: green; text-align: left; font-family: Verdana, Geneva, sans-serif; }*/

/*#shareicon {position: absolute; display: block; width: 12%; left: 140%; margin-top: -92%; line-height: 140%; }*/

/*#shareicons {position: absolute; display: block; left: 3%; margin-top: -114%;; opacity: 0.5}*/
/*#statstat {position: absolute; display: block; left: 4%; margin-top: 138%; color: black;*/
/*    font-size: 66%; font-weight: bold; width: 70%; text-align: left; }*/
/*#clipboard {position: absolute; display: inline; width: 19.5%; left: 100.3%; margin-top: 130%; line-height: 140%; }*/
/*#clipboardLit {position: relative; display: inline; width: 19.3%; left: 60%; margin-top: 130%; line-height: 140%; }*/


#tell { margin-top: -18.3%; }

#version { position: absolute; text-align: center; top: 93.8%; left: 5%; width: 90%; height: 3.5%;
    font-style: italic; font-size: 55%; color: goldenrod; }

p#quoteArea { position: relative; }
p#quoteArea span { float: left; }
p#quoteArea span.quoteLetter:hover { cursor: pointer; }