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

@font-face {
    font-family: 'myFont';
    src: url(fonts/Quivira.otf) ;
}

html { width: 100%; background-color: black; }
body { width: 100%; background-color: black; }     /* color outside the rectangle */
p.clear, span.clear { clear: both; }

#mainPage { position: absolute; font-size: 200%; margin-top: 1%; width: 100%;
            color: #68CCE0; text-align: center; }
.vanish { display: none; }
#title { color: #FFCC00; font-size: 150%; }
#updated { font-size: 60%; margin-top: 0.7%; }

#content { position: absolute; top: 99%; left: 1%; width: 100%; height: 100%;
    background-color: rgb(250, 250, 0); color: black;  /* bright yellow background + unlocked letter color */
    font-family: "Times New Roman", serif; -ms-touch-action: manipulation !important; }

    div #news { color: lightskyblue; text-align: left; margin-left: 3%; margin-right: 3% }
    #rotate { color: #E8D3D3; font-size: 70%; text-align: center }

    div #insideBorder { position: absolute; top: 1%; left: 4px; border: 0.2vw solid rgb(204,153,0) }
               
    div #owlgroup { position:absolute; left:.1%; top:2.2%; width:97%; height: 42%; }
        #qFocus { position: absolute; width: 44%; margin-top: 34%; margin-left: 4%; }
        #glass { position: relative; margin-top: -3.5%; left: 89%; width: 14%;}
        #qBox { position: relative; width: 70%; margin-top: 30%; }
        #qNum { position: relative; margin-top: -59%; margin-left: -18%;
            font-size: 80%; font-family: "Times New Roman", Georgia, serif; }
        #qBox:hover { cursor: pointer; }
        #qNum:hover { cursor: pointer; }
        #info { position: absolute; width: 42%; margin-left: -120%; margin-top: -31%; }
        #settings { position: absolute; width: 42%; margin-left: -73%; margin-top: -29%; }

        #ticker1 { position: absolute; margin-top: 0.7%; margin-left: 34.5%;
            font-family: myFont; background: white; background-position-x: 40%;
            height: 8%; text-align: left;
        }
        /*For Apple fonts see: http://www.alanwood.net/unicode/fonts_macosx.html*/
        #ticker2 { position: absolute; margin-top: 2.8%; margin-left: 34.5%;
            font-family: monospace, serif; background: white; background-position-x: 40%;
            height: 8%; text-align: left;
        }
.hint {}    /* removes two error messages in the html file */

.quoteArea { position: absolute; left: 8%; top: 20%;
            font-size: 118%; line-height: 1.16em; padding-left: 0.5%;
            -moz-user-select: none;  /* makes text so it doesn't get selected */
            -webkit-user-select: none; }
        /*p#quote span { float: left; }*/
p#quote span.quoteLetter:hover { cursor: pointer; }

.italics { font-style: italic; }        

div #bars { position: absolute; top: 58.5%; left: 4.7%; width: 97%; height: 20%; }
    div #bars > div { position: relative; float: left; width: 3.25%; height: 100%; 
             margin-left: 0.2%; }
        p.bar { position: absolute; width: 80%; height: 100px; top: 65%; margin-left: 9.2%;
            border: 1px solid black;
            transition: top .5s, height .5s;
            background: cornflowerblue url('img/slab4.png');
            background-size: contain;
        }
        p.bar:hover { cursor: pointer; }
        p.hammer { position: absolute; width: 86%; height: 3%; background-color: 
                darkslategrey; top: 66%; left: 9%; }
        p.stalk { position: absolute; width: 14%; height: 56%; background-color:
                darkslategray; top: 68%; left: 48% }
       
div #rows { font-family: Verdana, Geneva, sans-serif; }
    div #row1 { position: absolute; width: 97%; height: 12%;     /* these are the same */
            top: 72.8%; left: 3%; }        /* these are different */
        div #row1 > div { position: relative; float: left; width: 6.7%;
                    height: 100%; margin-left: 0.2%; }
            p.key { position: absolute; top: 0; left: 0; width: 100%; line-height: 1.7em;
                    background-image: url('img/keytop.png'); background-size: cover; height: 96%;
                    color: white; text-align: center; font-size: 111%; padding-left: 2%;
                        -moz-user-select: none;   /* makes keys so they don't get selected */
                        -webkit-user-select: none; 
            }
            p.keyFocus { background-image: url('img/greentop.png');}
            p.key:hover { cursor: pointer; }

    div #row2 { position: absolute; width: 97%; height: 12%;  
            top: 82%; left: 6.5%; }                              /* these are different */
        div #row2 > div { position: relative; float: left; width: 6.7%; 
                height: 100%; margin-left: 0.195%;  top:0; }     /* these are different */

p.keyDown { top: 4% }
        
p.keyFocus { 
    background-image: url('img/greentop.png');
}

.locked { color: slategray; }        /* locked letter color */
p.locked { color: darkgray; }          /* locked key color */

.letter1 { color: firebrick; }      /* first letter color */
p.letter1 { color: salmon; }        /* first key color */

.letter2 { color: lightseagreen; }    /* first letter color */
p.letter2 { color: lightblue; }        /* first key color */

 
#menus { position: absolute; top: 2.7%; left: 1.5%; width: 24%; }
/* PUZZLE menu */
#puzzleMenu { position: absolute; display: block; width: 41%; }
/* PUZZLE menu label */
#quoteChosen { position: absolute; margin-top: 1.0%; left: 1%; width: 130%;
    height: 0; line-height: 170%; margin-left: -8%; padding-top: 0.5%; color: black;
    /* if you don't set the height to 0% the click goes to quoteChosen when it shouldn't'*/
    font-size: 70%;  font-family: "Times New Roman", Georgia, serif;
    -moz-user-select: none;  /* makes text so it doesn't get selected'*/
    -webkit-user-select: none; }
    /*div #quoteChosen .puzzleMenuText { margin-left: -4%; line-height: 1.7em; }*/
    /*div .puzzleMenuText { color: black }*/
    div #quoteChosen:hover { cursor: pointer; }
#down1 { position: absolute; display: block; width: 4.4%; right: 2%; margin-top: -8.5%; }


#puzzleDrop { 
    display: block; position: relative;
    padding: 8%; width: 290%;
    cursor: pointer;
    font-weight: normal;
    border: .3vw solid darkSlateGray; color: black;
    border-bottom: .5vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));      
    border-radius: 5%; line-height: 120%; text-align: center; 
    /*-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
    /*-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
    /*box-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
    /*-webkit-transition: all 0.15s linear;*/
    /*-moz-transition: all 0.15s linear;*/
    /*-o-transition: all 0.15s linear;*/
    /*transition: all 0.15s linear;*/
    -moz-user-select: none;         /* makes text so it doesn't get selected'*/
    -webkit-user-select: none;
    font-family: "Times New Roman", Georgia, serif;
    font-size: 73%;
}

#puzzleDrop:hover { color: #898989; }

#puzzleDrop.open {
    color: black;
    border: 0.4vw solid darkSlateGray; color: gray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));}

#puzzleDrop ul { 
    position: absolute; top: 133%; width: 101%;
    left: -2px;  /* move content -3px because of container left border */
    display:none; background: #fff;
    color: gray;
    border: 0.2vw darkslategray;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

#puzzleDrop ul li { font-size: 0.9em;
border: 0.2vw solid darkslategray;
}

#puzzleDrop ul li a { 
    text-decoration: none; display: block; color:  darkslategray; padding: 2.9% 1%;
}

.bluish {   
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230)); }
.greenish {   
    background-image: -webkit-linear-gradient(top, white, rgb(200, 255, 190));
    background-image: -moz-linear-gradient(top, white, rgb(200, 255, 190));
    background-image: -ms-linear-gradient(top, white, rgb(200, 255, 190));
    background-image: -o-linear-gradient(top, white, rgb(200, 255, 190));
    background-image: linear-gradient(bottom, white, rgb(200, 255, 190)); }
.bisque {   
    background-image: -webkit-linear-gradient(top, white, bisque);
    background-image: -moz-linear-gradient(top, white, bisque);
    background-image: -ms-linear-gradient(top, white, bisque);
    background-image: -o-linear-gradient(top, white, bisque);
    background-image: linear-gradient(bottom, white, bisque); }

#puzzleDrop ul li a:hover {  background: white; }  

/*highlight chosen item*/
#puzzleDrop ul li a.chosen { background: white; color: black; border-color: green; }

/* OPTIONS menu */
#optionsMenu { position: absolute; display: block; width: 19%; left: 326%; margin-top: 28%;  font-size: 110%; }
#optionsDrop {
    display: block;
    width: 315%;
}
#optionsDrop:hover { background: #dff9f4; }
#optionsDrop.open {
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}
#optionsDrop ul {
    position: absolute; top: 25%; margin-left: 6%; width: 326%;
    left: -6%;  /* move content -6px because of container left border */
    display: none; background: #fff;
    color: gray;
    border: 0.2vw darkslategray;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/*#optionsDrop ul li { font-size: 0.9em; }*/

#optionsDrop ul li a {
    text-decoration: none; display: block; color: darkslategray; padding: 4% 1%;
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}
#optionsDrop ul li a:hover { background: white; }
/* highlight chosen item */
#optionsDrop ul li a.chosen { background: white; color: black; border-color: green; }


/* INFO menu */
#infoMenu { position: absolute; display: block; width: 19%; left: 326%; margin-top: 28%; font-size: 77%; }

#infoDrop {
    display: block;
    width: 315%;
}

#infoDrop:hover { background: #dff9f4; }

#infoDrop.open {
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}

/*noinspection ALL*/
#infoDrop ul {
    position: absolute; top: 25%; margin-left: 6%; width: 326%;
    left: -6%;  /* move content -6px because of container left border */
    display: none; background: #fff;
    color: gray;
    /*border: 0.2vw darkslategray;*/
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/*#infoDrop ul li { font-size: 0.9em; }*/

#infoDrop ul li a {
    text-decoration: none; display: block; color: darkslategray; padding: 4% 1%;
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}
#infoDrop ul li a:hover { background: white; }
/* highlight chosen item */
#infoDrop ul li a.chosen { background: white; color: black; border-color: green; }


/* SPY menu */
#spyMenu { position: absolute; display: block; width: 19%; left: 326%; margin-top: 28%; font-size: 70%; }
/*#down2 { width: 9%; margin-left: 20%; margin-bottom: 1.5%; }*/

#spyDrop {
    display: block;
    width: 315%;
}

#spyDrop:hover { background: #dff9f4; }

#spyDrop.open {
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}

#spyDrop ul {
    position: absolute; top: 25%; margin-left: 6%; width: 326%;
    left: -6%;  /* move content -6px because of container left border */
    display: none; background: #fff;
    color: gray;
    border: 0.2vw darkslategray;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/*#spyDrop ul li { font-size: 0.9em; }*/

#spyDrop ul li a {
    text-decoration: none; display: block; color: darkslategray; padding: 4% 1%;
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}
#spyDrop ul li a:hover { background: white; }
/* highlight chosen item */
#spyDrop ul li a.chosen { background: white; color: black; border-color: green; }



/* SHARE menu */
#shareMenu { position: absolute; display: block; width: 19%; left: 326%; margin-top: 28%; font-size: 70%; }
/*#down2 { width: 9%; margin-left: 20%; margin-bottom: 1.5%; }*/

#shareDrop {
    display: block;
    width: 315%;
}

#shareDrop:hover { background: #dff9f4; }

#shareDrop.open {
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}

#shareDrop ul {
    position: absolute; top: 25%; margin-left: 6%; width: 326%;
    left: -6%;  /* move content -6px because of container left border */
    display: none; background: #fff;
    color: gray;
    border: 0.2vw darkslategray;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/*#shareDrop ul li { font-size: 0.9em; }*/

#shareDrop ul li a {
    text-decoration: none; display: block; color: gray; padding: 4% 1%;
    border: 0.2vw solid darkSlateGray;
    background-image: -webkit-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -moz-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -ms-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: -o-linear-gradient(top, white, rgb(180, 220, 230));
    background-image: linear-gradient(bottom, white, rgb(180, 220, 230));
}
#shareDrop ul li a:hover { background: white; }
/* highlight chosen item */
#shareDrop ul li a.chosen { background: white; color: black; border-color: green; }

#shareIcon { width: 13%; margin-left: 35%; margin-bottom: -7%; padding: -2% 0;}

#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#ticker1 { position: absolute; margin-top: 1.0%; margin-left: 34.5%; font-size: 56%;*/
/*    font-family:  monospace, serif; background: white; background-position-x: 40%; width: 20%;*/

#dailyUpdate {color: white; }
div #bottomStuff { position:absolute; margin-top: 57%; margin-left: 1.5%;
                   font-size: 58%; color: whitesmoke; text-align: left; }

.blueText { color: #CCFFFF; }
.redText { color: #E3AAAA; font-size: 95% }

/*#myCanvas { position: relative; left: 0%; height: 40%; width: 95%;*/
/*    border: 2px solid lightgray;*/
/*}*/

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