@font-face {
    font-family: 'casual';
    src: url('fonts/sf_cartoonist_hand_italic-webfont.eot');
    src: url('fonts/sf_cartoonist_hand_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sf_cartoonist_hand_italic-webfont.woff2') format('woff2'),
         url('fonts/sf_cartoonist_hand_italic-webfont.woff') format('woff'),
         url('fonts/sf_cartoonist_hand_italic-webfont.ttf') format('truetype'),
         url('fonts/sf_cartoonist_hand_italic-webfont.svg#sf_cartoonist_handitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'serif';
    src: url('fonts/charissil-r-webfont.eot');
    src: url('fonts/charissil-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/charissil-r-webfont.woff2') format('woff2'),
         url('fonts/charissil-r-webfont.woff') format('woff'),
         url('fonts/charissil-r-webfont.ttf') format('truetype'),
         url('fonts/charissil-r-webfont.svg#charis_silregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sans';
    src: url('fonts/lato-regular-webfont.eot');
    src: url('fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato-regular-webfont.woff') format('woff'),
         url('fonts/lato-regular-webfont.ttf') format('truetype'),
         url('fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'print';
    src: url('fonts/new_era_casual_italic2-webfont.eot');
    src: url('fonts/new_era_casual_italic2-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/new_era_casual_italic2-webfont.woff2') format('woff2'),
         url('fonts/new_era_casual_italic2-webfont.woff') format('woff'),
         url('fonts/new_era_casual_italic2-webfont.ttf') format('truetype'),
         url('fonts/new_era_casual_italic2-webfont.svg#new_era_casualitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { width:100%; height:100%; padding:1%; font-family:sans; overflow:hidden; }
            .clearBoth { clear:both; }
.hide { visibility: hidden; }
.no_display { display:none; }

.layout_tiny, .layout_BIG { position:relative; color:rgb(61,82,174); } 
    .layout_tiny img { vertical-align: top; }
    .layout_tiny div.logo_version { float:left; position:relative; width:25%; }
    .layout_tiny img.logo { float:left; width: 100%; } 
    .layout_tiny p.release { position:absolute; font-family:sans; font-size:45%; top:141%; left:96%; color:black; }
    .layout_tiny img.owl { float:left;width:9.237%; margin-left:1%; }
    .layout_tiny img.messageBox { float:left; width: 36.37%; }
    .layout_tiny p.message { position:absolute; top:24.5%; left:38.14%; width:32%; font-size:90%; 
        font-family:casual; font-style: italic; color: black }
    .layout_tiny ul.iconList { display:inline; }
    .layout_tiny ul.iconList li { float:left; margin-left:1.3%; text-align: center; }
        .layout_tiny ul.iconList li.ilHandicap { width:4.4%; margin-left:3%; }
        .layout_tiny ul.iconList li.ilOptions { width:5.8%; margin-top:0.2%; margin-left:1.6%; }
        .layout_tiny ul.iconList li.ilSupportIphone { width:5%; margin-top:0.2%; margin-left:1%; }
        .layout_tiny ul.iconList li.ilHelp { width:3.8%; } 
        .layout_tiny ul.iconList li a { text-decoration: none; color:inherit; }
        .layout_tiny ul.iconList li img { width:90%; }
        .layout_tiny ul.iconList li p {  margin-top:5px; font-size: 50%; }
        .layout_tiny .handicapNumber { position:absolute; font-size:90% !important; top:8%; left:75.7%; width:2.7%;
            z-index:100; color:black; font-family:serif; text-align: left; }
    .layout_tiny .pencilRed,.layout_tiny  .pencilGreen { position:absolute; left:20.94%; 
            width:43.48%; height:auto; top:88.1%; z-index:-1; }
    .layout_tiny .pencilRed { display:none; }

.layout_BIG { padding-left:2%; font-size:130%; }
    .layout_BIG div.logo_version { float:left; position:relative; width:23.5%; left: -2.2%; }
    .layout_BIG img.logo { float:left; width: 100%; } 
    .layout_BIG p.release { position:absolute; font-family:sans; font-size:28%; top:258%; left:118%; color:black; }
    .layout_BIG ul.iconList_inline { display:inline; }
        .layout_BIG ul.iconList_inline li { margin-top:0.6%; }
    .layout_BIG ul.iconList_clear { clear:both; }
        .layout_BIG ul.iconList_clear li { margin-top:-3%; }
    .layout_BIG ul.iconList li { float:left; text-align: center; }
        .layout_BIG ul.iconList li.ilSupportIphone { width:7%; margin-top:-0.6%; margin-left:-0.9%; }
        .layout_BIG ul.iconList li.ilOptions { width:7.3%; margin-left:-1.6%; margin-top: -1.3% }
        .layout_BIG ul.iconList li.ilHandicap { position:relative; width:5.7%; margin-left:1.7%; margin-top: -1.3%}
        .layout_BIG ul.iconList li.ilHelp { width:5.6%; margin-left:3%; margin-top: -1.3%; }
            .layout_BIG ul.iconList li#ilHelp img { margin-top:-50%; }
        .layout_BIG ul.iconList li a { text-decoration: none; color:inherit; }
        .layout_BIG ul.iconList li img { width:90%; }
        .layout_BIG ul.iconList li p { font-size: 45%; }
        .layout_BIG .handicapNumber { position:absolute; font-size:80% !important; top:41%; left:10%; width: 70%;
            z-index:100; color:black; font-family:serif; text-align: center; }
    .layout_BIG img.owl { float:left; width:9.5%; margin-left:7.3%; margin-top:-1.6%; }
    .layout_BIG img.messageBox { float:left; width: 60%; margin-top:-8%; }
    .layout_BIG p.message { position:absolute; top:07%; left:44%; width:50%; font-size:100%; color: black;
        font-family:casual; font-style: italic; }       /* top doesn't seem to make a change */
    .layout_BIG .pencilRed, .layout_BIG .pencilGreen { position:absolute; left:24.94%; width:30.98%; height:8%;
        top:95.1%; z-index:-1; }
    .layout_BIG .pencilRed { display:none; }      
.logo:hover, 
.owl:hover { cursor:pointer; }
.pencil:hover { cursor:pointer; }
.lastP { clear:both; position:relative; min-height:5em; }

.fontPrint { font-family: print; }          /* used for display on Options page */
.fontSerif { font-family: serif; margin-left: 7%; font-weight: bold }
.fontSans { font-family: sans; font-weight: bolder; }

div#menus { position:relative; top:-2.3%; z-index: 200; }   /* sets  top of menus*/
    div.select { position:relative; font-family: Arial; 
        height:2.2em; line-height:2.2em; overflow:hidden; }
    #optionsMenu { clear:both; float:left; }
                        .optionsMenu_layout_tiny { width:19%; font-size:64%; }
        .optionsMenu_layout_BIG { width:23%; font-size:78%; }
    #puzzleMenu { float:right; padding-left:1%; }
        .puzzleMenu_layout_tiny { width:26%; font-size:64%; }
        .puzzleMenu_layout_BIG { width:37%; font-size:78%; }

        .mainOption { position:relative; width:100%; height:2.2em; line-height:2.2em; color:black; }
            .background { position:absolute; top:0px; left:0px; 
                width:100%; height:100%; z-index:-1; }
            .subject {padding-left:3%; }
            .menuIconStart, .menuIconCheck { display:none; height:0.8em; width:auto; padding-left:3%; }
        .options { border:1px solid gray; }
            .option { background-color:white; line-height:1.3em; font-size:110%;
                    border:1px solid white; }
            .option:hover { background-color:rgb(218, 241, 255); border-color:rgb(0,157,255); }

    #handicapMenu {z-index:99; overflow: visible; top:-1em; left:20%;
            display:inline-block; width:8%; height:1.7em; font-size:70%;
            line-height:1.7em; padding:0;
    }
        #handicapMenu .mainOption {
            background-color: #dbebfc; height:1.7em; line-height:1.7em;
            border-radius:7px; border:1px solid gray;
        }
        #handicapMenu input {
            font-size:100%; background-color:#dbebfc; line-height:0.9em;
            width:50%; margin-left:14%; border:none; margin-top:0;
        }
            #handicapMenu .mainOption:hover input { background-color: #F4F4F4; }
            #handicapMenu .mainOption:hover { background-color: #F4F4F4; }
        #handicapMenu .mainOption img { display:inline; float:right; margin-top:17%; margin-right:10%;
            height:20%; width:auto; }
        #handicapMenu .options { display:none; position:absolute; top:100%; left:0.01%;
            width:100%; font-size:90%; z-index:400; }
        #handicapMenu .option { width:100%; line-height:1.1em; padding-left:10%; }

.wrap_puzzle { 
    clear:both; position:relative; top:-2.1%; /* sets top of puzzle area (both layouts) */
    width:100%; border:2px solid black; overflow:hidden; height: 80%; }
    /*.wrap_puzzle_BIG { height:58%; }        !* not clear what this does*!*/
    /*.wrap_puzzle_tiny { height:65%; }*/
    .wrap_puzzle_crickler { background-color: rgb(228,236,255); }
    .wrap_puzzle_option { background-color: rgb(250,250,250); }
    .blueTransScreen { position:absolute; top:0px; left:0px; width:100%; height:100%;
            display:none; background-image:url('img/blue_dot.png'); z-index:150; }

.puzzle { 
    display:none; position:relative; width:100%; overflow-x:hidden; background-color: rgb(228,236,255); }
    .puzzle_layout_BIG { font-size:100%; }       /* this changes the question font size */
    .puzzle_layout_tiny {font-size:100%; }
    .blueScreen { display:none; }

    #blueScreen1 {position:fixed; z-index:300; top:0px; left:0px; width:100%; height:100%;
        background-color:rgb(219, 235, 252); color: rgb(62,83,175); text-align:center; font-size:110%; }
        #blueScreen1 h2 { margin-top:5%; font-size:140%; padding-bottom:1em; }
        #blueScreen1 .loading { position:relative; width:25%; left:37.5%; padding:0;line-height:0em; }
        #blueScreen1 .loading img {display: none; width:100%; height:auto; } 
        #blueScreen1 .progressBarBack, #blueScreen1 .progressBar { 
            display:none; position:absolute; top:92.8%; height:7.2%; left:5%; width:88.1%; 
            z-index:-2; 
        }
        #blueScreen1 .progressBarBack { background-color: #FFCC33; }
        #blueScreen1 .progressBar { width:0%; background-color: red; }
        #blueScreen1 .progressText { display:block; font-size:80%; }

    h2 { background-color: rgb(219, 235, 252); color: rgb(62,83,175); font-size:114%; font-weight:bold;
         padding-top:2%; padding-left:3%; }
    h4 { background-color: rgb(219, 235, 252); color: rgb(62,83,175); font-size:65%; line-height:2em;
         padding-left:3%; padding-bottom:1%; }
    .clue {            /* this is the main area with the clues in it */
        position:relative; background-color: rgb(228,236,255); color:black; 
        line-height:1.3em; padding-bottom:0.6%;
    }
    .clue_lastInGroup { padding-bottom: 0.4%; }
    .answer_2_lines { min-height:3.1em; }
    .markClue { background-color: white; }           /* color of selected clue */
    .petHandle { display:none; position:absolute; left:78%; top:20px; color:gray; 
        z-index: 100; font-size:60%; }
        /* now use qElement rather than question to distinguish it from string */ 
        .clue span, .number, .qElement { display:inline-block; vertical-align: top; }
        .number, .qElement { margin-top:0.3%; }
        .number:hover { cursor:pointer; }
        .number { position:relative; margin-left:2%; padding:0.2%; 
            color:white; width:2.8%; text-align:center; 
        } 
            .number span { position:relative; width:100%; display: inline-block; 
               font-size:68%; line-height:1.4em; text-align:center; }
            .number img { position:absolute; top:0; left:0; width:100%; height:auto; }


        .qElement { position:relative; display:inline-block; width:55%; padding-right:1%; padding-left:1%;
            line-height:1.1em; font-family:sans; }
            .qElement_layout_tiny { font-size:77%; }
            .qElement_layout_BIG { font-size:87%; }       /* sets question font size */
        .forLinesLength { position:fixed; font-family:sans; 
                    top:100%; width:48%; background:white; left:6.7%; }
            .forLinesLength_tiny { font-size:75%; }       /* sets width of LHS */
            .forLinesLength_BIG { font-size:83%; }
            .forLinesLength span { position:relative; } 

        .htmlLink { float:right; color:rgb(45,45,45); font-family: sans;
            font-size:75%; font-style:italic; margin-right:9%; }

        .tilesWrap { position:absolute; top:0.3em; left:57% }     /* left controls where answers start ??? */
            .tilesWrap_layout_tiny { width:47%; left: 59% } 
            .tilesWrap_layout_BIG { width:38%; left: 61% }

        .tile {position:relative; box-sizing:border-box; text-align:center;
            line-height:1.2em; height: 1.4em; 
            border: 4px solid black; border-right-width: 0px; 
        }
            .tile_layout_tiny { width:8%; }
            .tile_layout_BIG { width:7.6%; }          /* appears to have no effect */
            .tile:hover { cursor:pointer; }
            .lastTile { border-right: 4px solid black; }
            .tildeTile { background-color: transparent; }
            .locked { color:rgb(0,0,100); background-color: rgb(228,236,255); }
            .unlocked { color: gray; }
            .yellowTile { background-color: rgb(255,255,174) !important; } 
            .haveGroup { background-color: rgb(228,236,255); }
            .noGroup { background-color: white; }
            span.markGroup { background-color: rgb(255,149,149) !important; }
            .tileSpace { background-color:gray; }
            .tile .typeSymbol { 
                display:none; position:absolute; left:32%; 
                top:10%;                            /* appears to have no effect */
                font-size:66%; color:#989898;
                font-family: "sans";
                text-transform: lowercase;
            }


    .cursor {position:absolute; padding-left:15%; height:100%; background-color:red; 
        top:0px; left:0px; z-index:100;
    }

.screenOption {color:black; background-color: rgb(250,250,250); overflow:hidden; }
.screenOption .wholeScreen { width:100%; height:auto; }
.screenOption p, .screenOption h2, .screenOption h4, .screenOption span {
    background-color: rgb(250,250,250); font-size:70%;
}
.screenOption h2 { text-align:center; padding-top:2em; padding-bottom:1em;
    color:black; font-size:120%; }
.screenOption h4 { text-align:center; padding-top:1em;
    color:black; font-size:105%; }
.screenOption p {margin-top:1em; line-height:1.1em; margin-left:10%; max-width:80%; }
.screenOption img[src="img/signature.png"] {margin-top:1em; margin-left:10%; width:30%; }
.screenOption img.help { height:3em; width:auto; vertical-align: middle; padding-left:10%; }
.screenOption img.help_2_lines { position:absolute; height:6em; vertical-align: top; }
.screenOption[ioption="1"] p, .screenOption[ioption="1"] span {
    font-size:80%; margin-top:0px; padding-bottom:1em;
}
.screenOption[ioption="1"] select { font-size:100%; width:200%; }
/*.screenOption[ioption="1"] select option {line-height:2em; }*/
.screenOption[ioption="1"] input { font-size:100%; }
.screenOption[ioption="1"] .petScreen { display:inline-block; line-height:2em; }

.screenOption[ioption="2"] input { font-size:100%; }

span.warning { color:red; padding-left:20%; }
.screenOption[ioption="2"] p.warning { margin-top:-1em; }
.screenOption[ioption="2"] span.warning { padding-left:0%; font-size:90%; }
.fixed_width_10 { display:inline-block; width:10%; }
.fixed_width_20 { display:inline-block; width:20%; }

.winwin {
    display:none;
    position:absolute;
    border:3px solid black;
    padding:2%;
    width: 50%; left:40%;
    top:25%;
    background-color:white;
    z-index:300;
    font-size: 80%;
}
    /*.winwin textarea { color:gray; font-style: italic; font-size:100%; width:100%; }*/
    .winowl { float:left; width:25%; margin-left:2%; margin-right:5%; }
    .winwin p { color:black; line-height:1.0em; }
    .winwin p.blue { color:blue; }
    .winwin span.winButton { display:inline-block; line-height:2em;
        padding-left:2%; padding-right:2%; border:2px solid blue; margin-left:2%; margin-right: 2%;}
        .winwin span.winButtonEnable { color:blue; border-color: blue; }
        .winwin span.winButtonEnable:hover { cursor:pointer; color:white; background-color: blue; }
        .winwin span.winButtonDisable { color:gray; border-color: gray; }
        .winwin span.winButtonDisable:hover {}

    .solved { display:none; position:absolute; z-index:299; top:20%; left:10%; width:25%; height:auto; }

.ok_cancel {
    border:3px solid rgb(89,96,100);
    color: rgb(40,40,40);
    border-radius:17px;
    font-size:80%;
    margin-top:-0.4%;
    line-height:1.8em;
    text-align:center; 
    display:inline-block;
    width:15%;
}
    .ok_cancel:hover { border:2px solid rgb(85,167,218); } 
    .add_right { margin-right:10%; }
    .add_left { margin-left:10%; }

.checkbox { 
    display:inline;
    position:relative;
    outline:2px solid rgb(89,96,100);
    width:4%;
    margin-left:2%;
}
    .checkbox:hover { outline:2px solid rgb(85,167,218); cursor:pointer; } 
    .add_left_5 { margin-left:5%; }

.radiobutton { 
    display:inline;
    position:relative;
    border:2px solid rgb(89,96,100); border-radius: 50%;
    width:2.5%;
    margin-left:2%;
}
.radiobutton:hover { border:2px solid rgb(85,167,218); } 

.backcolor_up {
    background-color: rgb(254,254,254); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(254,254,254)), to(rgb(235,235,235)) );
    background-image: -webkit-linear-gradient(top, rgb(254,254,254), rgb(235,235,235));
    background-image: -moz-linear-gradient(top, rgb(254,254,254), rgb(235,235,235));
    background-image: -ms-linear-gradient(top, rgb(254,254,254), rgb(235,235,235));
    background-image: -o-linear-gradient(top, rgb(254,254,254), rgb(235,235,235));
/*    background-image: linear-gradient(to bottom, rgb(254,254,254), rgb(235,235,235));*/
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FEFEFE, endColorstr=#EBEBEB );

}
.backcolor_down {
    background-color: rgb(222,241,253); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(222,241,253)), to(rgb(157,216,254)));
    background-image: -webkit-linear-gradient(top, rgb(222,241,253), rgb(157,216,254) );
    background-image: -moz-linear-gradient(top, rgb(222,241,253), rgb(157,216,254) );
    background-image: -ms-linear-gradient(top, rgb(222,241,253), rgb(157,216,254) );
    background-image: -o-linear-gradient(top, rgb(222,241,253), rgb(157,216,254) );
/*    background-image: linear-gradient(to bottom, rgb(222,241,253), rgb(157,216,254) );*/
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DEF1FD, endColorstr=#9DD8FE );
}
.backcolor_scrollbar {
    background-color: rgb(154,159,160); 
    background-image: -webkit-gradient(linear, left top, right top, from(rgb(154,159,160)), to(rgb(226,226,226)) );
    background-image: -webkit-linear-gradient(right, rgb(154,159,160), rgb(226,226,226));
    background-image: -moz-linear-gradient(right, rgb(154,159,160), rgb(226,226,226));
    background-image: -ms-linear-gradient(right, rgb(154,159,160), rgb(226,226,226));
    background-image: -o-linear-gradient(right, rgb(154,159,160), rgb(226,226,226));
/*    background-image: linear-gradient(to right, rgb(154,159,160), rgb(226,226,226));*/
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#9A9FA0, endColorstr=#E2E2E2 );

}

.scrollbar { display:block; position:absolute; width:2%; left:98%; top:0px; height:100%;
       overflow:hidden; outline:1px solid rgb(88,95,99); z-index:250; }
    .scrollbar .scroll_arrow { position:absolute; width:100%; height:5%; left:0px; 
                border:1px solid rgb(88,95,99); }
        .scrollbar .scroll_arrow:hover { border:1px solid rgb(85,167,218); }
        .scrollbar #scroll_arrow_up { top:0px; }
        .scrollbar #scroll_arrow_down { top:95%; }
        .scrollbar .scroll_arrow img { position:absolute; width:30%; height:auto; top:30%; left:35%; }
    .scrollbar .wrap_hand {position:absolute; width:100%; height:90%; left:0px; top:5%; 
         }
        .scrollbar .hand { position:absolute; background-color:blue; border-radius:8px; border:1px solid black; 
                width:150%; height:50%; top:0px; left:-55%; z-index:100;
         }
         .scrollbar .hand:hover { border:1px solid rgb(85,167,218); }
         .scrollbar .hand img { position:absolute; left:50%; width:25%; top:48%; height:auto; }
 .noselect {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     /*user-select: none;*/
 }

.wrap_footer { position:fixed; width:98%; left:11%; background: none;  }
    .wrapFooterNoScroll { height:1.4em; bottom:-11.4%; }
    .wrapFooterWithScroll { height:2.4em; bottom:-5.1% }
    .wrapFooterNoScroll .scrollbarH { display:none; }
    .wrapFooterWithScroll .scrollbarH { display:block; }

.footer { display:none; position:absolute; background: none; height: 200%; }
            /*left below adjusts ok-cancel left-right*/
    .footer_okcancel { left:-10%; width:100%; text-align:center; }
    .footerNumber { position:absolute; top:1.3em; height:12.8em; overflow:hidden; margin-left: -10%;
            color:white; font-size: 60%; background: none;
    }
    .footerNumber span { position:relative; width:100%; display: inline-block; 
        padding-top:0%; text-align:center; }
    .footerNumber img { position:absolute;
        left:0px; width:100%; height:auto; }

.footerNumber img {
    top:0px;
}

.footerNumber:hover { cursor: pointer; }


.scrollbarH { display:block; position:absolute; width:100%; left:-10%; top:60%; height:30%;
       overflow:hidden; outline:1px solid rgb(88,95,99); z-index:250; }
    .scrollbarH .scroll_arrow { position:absolute; width:1%; height:100%; left:0px; 
                border:1px solid rgb(88,95,99); }
        .scrollbarH .scroll_arrow:hover { border:1px solid rgb(85,167,218); }
        .scrollbarH #scroll_arrow_left { left:0px; }
        .scrollbarH #scroll_arrow_right { left:99%; }
        .scrollbarH .scroll_arrow img { position:absolute; width:30%; height:auto; top:30%; left:35%; }
    .scrollbarH .wrap_hand {position:absolute; width:98%; height:100%; left:1%; top:0px; 
         }
        .scrollbarH .hand { position:absolute; background-color:blue; border-radius:8px; border:1px solid black; 
                height:150%; width:50%; top:-60%; left:0px; z-index:100;
         }
         .scrollbarH .hand:hover { border:1px solid rgb(85,167,218); }
         .scrollbarH .hand img { position:absolute; left:47%; height:30%; width:auto; top:50%; }

audio span#error { position:fixed; top:0%; height:1.5em; z-index:1000; background-color:red; color:white; 
    left:40%; width:20%; font-size:10px; }