@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_italic-webfont.eot');
    src: url('fonts/new_era_casual_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/new_era_casual_italic-webfont.woff2') format('woff2'),
         url('fonts/new_era_casual_italic-webfont.woff') format('woff'),
         url('fonts/new_era_casual_italic-webfont.ttf') format('truetype'),
         url('fonts/new_era_casual_italic-webfont.svg#new_era_casualitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'antonio';
    src: url('fonts/antonio-bold.eot');
    src: url('fonts/antonio-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/antonio-bold.woff2') format('woff2'),
         url('fonts/antonio-bold.woff') format('woff'),
         url('fonts/antonio-bold.ttf') format('truetype'),
         url('fonts/antonio-bold.svg#sf_cartoonist_handitalic') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'gentium_basicregular';
    src: url('fonts/genbasr-webfont.eot');
    src: url('fonts/genbasr-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/genbasr-webfont.woff2') format('woff2'),
         url('fonts/genbasr-webfont.woff') format('woff'),
         url('fonts/genbasr-webfont.ttf') format('truetype'),
         url('fonts/genbasr-webfont.svg#gentium_basicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{ font-family: "Arial"; }
.word_tile, .tileLetter{  font-family: "serif";}
.title{ font-family: 'gentium_basicregular';  }
.button{  font-family: "serif";}

html{  width:100%; height:100%;}
body{ 
    position:relative;
    overflow:hidden; /*background-color: rgb(90,140,107);  */
    font-size: 2vmin; width:100%; height: 100%; 
    -ms-touch-action: manipulation !important;
    z-index:0;
}

body .game_wrapper *{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.clear{ clear:both; line-height:1em;}
.out_of_screen{
    position:fixed; top:1000%;
}
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; }

.hideFromBossWin{
    display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000; 
    background-color:white;
}
.hideFromBossWin .mask{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000; }
.hideFromBossWin iframe{
     position:absolute; top:4em; left:0; width:100%;  z-index:-1000;height:97%;
}
.hideFromBossWin  .back_from_iframe{ 
    position:fixed; height:auto; padding-top: 1em; padding-bottom: 1em; width:100%; 
    background-color: white; color:black; top:0; left:0;
    border-bottom: 2px solid black; border-top: 1px solid black;
    z-index:1000; text-align: center; font-weight: bold;
}
/******************************************************************************************************/

.info{ 
    display:none; 
    position:fixed; top:0; bottom:3em; left:75%; height:auto; background:white; color:black; 
    width:25%; overflow-y:scroll; padding-top: 1em; 
    z-index:199; border-left:1px solid blue;
}
    .test_btns{
        display:none; position:fixed; bottom:0; left:75%; z-index:999; background-color: white; border:1px solid black;
        height:3em;font-size:80%;
    }
    .info .text{  font-size:80%; }
    .info .test{
        display:inline-block; width:100px; 
        font-size:10px;
    }
    .test_clear{ left:10px; }
    .test_scr_move{ left:110px; }
    .input_letters{ left:210px;}
    .test_times{ display:none;}


.img_background_bottom_layer{
    position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
}
.top_layer_wrapper{
    position:absolute; top:6.4em; bottom:9%; width:100%; left:0;
}
.top_layer_wrapper_intro{
    top: 2em; bottom:0;
}

.img_background_top_layer{
    position:absolute; top:0; left:0; z-index:0;
    width:100%; height:auto;
}

.screenIntro{
    position:absolute; width:100%; height:65vw;  
    top:18vw; left:0;
    font-size:200%;
}

.homepage_info{
    font-size:2.4vw; 
}

@media screen and (min-aspect-ratio: 773/541){
    .img_background_top_layer{
        height:100%;  width:auto; top:0; 
        left:50%;  
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }    
    .screenIntro{
        height:100%;  width:143vh;
        top:20%; 
        left:50%;  
        -ms-transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
    .homepage_info{
        font-size:3.5vh;
    }
}


    .screenIntro .introTitle{ position:absolute; left:15%; top: -1%;
                    width:75%; height:auto; }

    .screenIntro .facebookLoading{
                position:absolute; display:none; top:44%; height:8%; width:auto; left:46%;
    }
    .screenIntro .facebookSignIn{ 
                    position:absolute; display:none; top:44%;  width:40%; height:auto; left:30%;
                }
    
     .screenIntro .facebookSignIn:hover{ cursor:pointer; }

    .screenIntro .goPlay{
            position:absolute; top:47%; left:8%; width:80%;
            line-height: 1.8em; text-align:center;
    }
   
    .screenIntro #playerName{
                    /*display:inline-block;*/
                    /*left: 10em;*/
                    text-indent:6%; font-size: 1.5em;
                    border:4px solid #232323; border-radius: 0.3em; 
                    background-color: #6d84b4; color:white; 
                    height:100%; max-width:40%; line-height: 1.3em;
    }

    .screenIntro .playButton{
                    display: inline-block;
                    /*position:absolute; top:44%; left: 67%;  */
                    width:22%; height:100%; line-height: 2em;
                    border-radius: 0.3em;
                    background-color:maroon; color:white;
                    text-align: center;
                    font-weight:bold; font-family: sans-serif;
                    border:4px solid #232323; overflow:hidden;
                    vertical-align: bottom;
                }
    .screenIntro .playButton span{ z-index:10;}     
    .screenIntro .playButton:hover{ cursor: pointer; }




.wh_info{ display:none; position: fixed; top:0; left:90%; width:10%; z-index:500; background-color: white; color: black;}

/*without these lines input-field does not accept characters on iphone*/
input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
} 
/******************************************************************************************************/
.game_wrapper{
    position:absolute; width:100%; height:100%; top:0; left:0; z-index:-1;
}
    .game_with_info{ width:75%; left:0;}
.game_part{
    display:none; 
    position:absolute; height:auto;  bottom:0;  top:0; left:0; right:0; max-width:98%; 
    margin:0; margin-top:8em; 
}
    
    .leftWindowPart{
        position:absolute; top:0; left:0; width:52%;  height:auto; 
    }
            .title{       /* set message font size here */
                position:absolute;
                top:2%; font-size:172%; height:10%; width:95%; left:3%;
                text-align: center; font-weight:bold; color:rgb(255, 204, 204);
                z-index:200;
            }
            .grid{ 
                position:absolute; width:88%; left:6%; z-index:200; 
            }
            
            .buttons{  /*div for score and button NEW GAME. under FREE TILES */
                position:absolute;  width:100%; bottom:5%; left:0;
            }
                
                .gridFlash{
                    position:absolute; width:100%; height:100%; left:0; top:0;
                    background: rgba(255,255,255, .5); border-radius: 5%;
                }
                .score{
                    /*here to move score left and right*/
                    min-height:2em; max-height:2em; margin-left:-0.5em;
                    text-align: center; max-width:46%; 
                    font-size:1.8em;  line-height: 2em; 
                    font-weight:bold; color:rgb(255, 204, 204);
                }
                 
                .time{
                    display:none;
                    position:absolute; top:0; left:2%; line-height: 3em; 
                    font-size: 100%;  color:rgb(255, 204, 204);
                }
                .button{   /* "NEW GAME"  "END WORD?" "RESUME?"*/
                    display:block; position:absolute;  top:0; left:47%;
                    padding-left:2%; padding-right:2%; padding-bottom:1.5%;
                    line-height:2.5em; font-size:150%; font-weight:bold;
                    /*set button width here*/
                    border-radius:0.5em; width:50%; text-align: center;
                }

                    .endWord, .continueGame{  display:none; }
                    .newGame span, .endWord span{ white-space: nowrap; }
                    
                    .fixed_window_button{ 
                        position:relative; display:inline-block; text-decoration:none; 
                        font-size:1.2em; line-height:1.8em; height:1.8em; width:auto; 
                        padding-left:1.4em; padding-right:1.4em;
                        color:#333333; text-align:center; border-radius:0.35em;
                    }
                    .button_skin{  
                        overflow:hidden; box-sizing:border-box; box-shadow: 2px 2px 6px black; 
                        
                    }  /*jims #A0B0B0 ide u js - B8BBBD border:2px solid #B8BBBD;*/
                    .button_skin:hover{ cursor: pointer; }
                    .button_skin span{ position:relative; z-index:10;}
                    .button_skin img{ display:none; position:absolute; width:100%; height:100%; top:0; left:0;}
                    .button_skin img.normalSkin{ display:block; }
                    .button_skin:hover img.normalSkin /*, 
                    .button_skin:active img.normalSkin*/
                    { display:none; }
                    .button_skin:hover img.overSkin{ display:block; cursor: pointer; }
                    /*.button_skin:active img.overSkin{ display:none; }
                    .button_skin:active img.downSkin{ display:block; }
                    */
                    .button_skin_disabled{ color:gray; }
                    .button_skin_disabled:hover{ cursor:auto; }
                    .button_skin_disabled:hover img.normalSkin{ display:block; }
                    .button_skin_disabled:hover img.overSkin{ display:none; cursor: auto; }
                    .button_skin_disabled:active img.downSkin{ display:none; }
                    .split_buttons .fixed_window_button{ margin-left:1%;}
                    .split_buttons .fixed_window_button:first{ margin-left:-1%;}
/******************************************************************************************************/
          
            .tile{  position:absolute; box-sizing: border-box; }
                    .grid[data-size="3x3"] .tile{  width:32%; height:32%;}
                    .grid[data-size="4x4"] .tile{  width:24%; height:25%;}
                .tile .tileLetter:hover{ cursor: pointer; }
                .tile .tile_bck{ width:100%; height:100%; }
                .tile .tileLetter{ 
                    /*line-height:; font-size:;  must be set through js 
                    jims left is 2.25  - 6.25 */
                    position:absolute; /*top:0; left:6.25%; width:93.75%; height:100%; */ 
                    text-align: center; z-index:100; /*color:#330000;*/
                }
                /*.tile .tileLetterWhite{ color: white; }
                 .tile .tileLetterWhiteEnd{ color: #F8D878; }  jims #F8D878  - 787878*/


                .grid[data-size="3x3"] .tile[data-line="0"]{ top:2%;}
                .grid[data-size="3x3"] .tile[data-line="1"]{ top:34%;}
                .grid[data-size="3x3"] .tile[data-line="2"]{ top:66%;}
                .grid[data-size="3x3"] .tile[data-col="0"]{ left:2%;}
                .grid[data-size="3x3"] .tile[data-col="1"]{ left:34%;}
                .grid[data-size="3x3"] .tile[data-col="2"]{ left:66%; }

                .grid[data-size="4x4"] .tile[data-line="0"]{ top:0%;}
                .grid[data-size="4x4"] .tile[data-line="1"]{ top:25%;}
                .grid[data-size="4x4"] .tile[data-line="2"]{ top:50%;}
                .grid[data-size="4x4"] .tile[data-line="3"]{ top:75%;}
                .grid[data-size="4x4"] .tile[data-col="0"]{ left:2%;}
                .grid[data-size="4x4"] .tile[data-col="1"]{ left:26%;}
                .grid[data-size="4x4"] .tile[data-col="2"]{ left:50%; }
                .grid[data-size="4x4"] .tile[data-col="3"]{ left:74%; }
            
                .grid .tableEndGameMsg{
                    position:absolute; display:none; width:100%; height:100%; top:0; left:0;
                    text-align: center; font-size: 200%; box-sizing: border-box; 
                    z-index:1000; color:white;
                }
                    .grid .tableEndGameMsg img{position:absolute; width:100%; height:100%; top:0; left:0; z-index:-1;}

                .back_from_iframe a{ display: inline;}
                .back_from_iframe:hover{ cursor:pointer; }
                .back_from_iframe span:first-child { float:left; }
/******************************************************************************************************/
    .trayWrapper{ 
        display: block; position:absolute; height:auto;  bottom:0;  top:0; left:53%; right:0;
        margin:0; /* margin-left:53%;     margin-bottom:1%;*/
        z-index:200; 
    }
    .tray{
        position:absolute; top:0; left:0; width:100%; height:100%;
    }   
        .hide_tray{ top: -1000%; left :-1000%; }

                .mobWordLine{   display:none;   }
                .mobOpenTrayBtn{  display:none;  }
    
                .tray .img_background{ position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; }
                .tray .wtContent{  
                    position:absolute; left:0; top:0; width:100%;  height:100%; 
                    /*box-sizing:border-box; padding-top:2.066%;  padding-bottom:1.066%; 
                    padding-left:2.288%; padding-right:2.268%;*/
                }

                .forRemoveLine{  
                    position: absolute; width:93%; left:3%; top:0; height:100%;
                    background-color: rgb(222,58,18); display:none;
                }
                .removeLetter{ background-color: rgb(222,58,18); }

                .words_line{
                    position:absolute; width:100%; margin:0; padding:0;   height:13.40206%; /*height:13.40206%;  12.5188%;*/
                    
                }
                   
                    .words_line_height_7[data-iline="6"]{ top: 3.1%; }
                    .words_line_height_7[data-iline="5"]{ top: 16.50206%; }
                    .words_line_height_7[data-iline="4"]{ top: 29.90412%; }
                    .words_line_height_7[data-iline="3"]{ top: 43.30618%; }
                    .words_line_height_7[data-iline="2"]{ top: 56.70824%; }
                    .words_line_height_7[data-iline="1"]{ top: 70.1103%; }
                    .words_line_height_7[data-iline="0"]{ top: 83.51236%; }
                    .words_line_height_7{  height: 13.40206%; }
                    .words_line_height_10{ height: 9.3814385%;   }
                    .words_line_height_10[data-iline="9"]{ top: 3.1%; }
                    .words_line_height_10[data-iline="8"]{ top: 12.48143%; }
                    .words_line_height_10[data-iline="7"]{ top: 21.86288%; }
                    .words_line_height_10[data-iline="6"]{ top: 31.24432%; }
                    .words_line_height_10[data-iline="5"]{ top: 40.62575%; }
                    .words_line_height_10[data-iline="4"]{ top: 50.00719%; }
                    .words_line_height_10[data-iline="3"]{ top: 59.38863%; }
                    .words_line_height_10[data-iline="2"]{ top: 68.77007%; }
                    .words_line_height_10[data-iline="1"]{ top: 78.15151%; }
                    .words_line_height_10[data-iline="0"]{ top: 87.533%; }

                    
                    .word_tile{
                        position:absolute; margin:0; padding:0; top:0; 
                        height:100%;  width:13%;  overflow: hidden;  
                    }
                    .word_tile:hover{cursor: pointer;}
                        .word_tile[data-itile="0"]{ left: 4%;}
                        .word_tile[data-itile="1"]{ left: 17%;}
                        .word_tile[data-itile="2"]{ left: 30%;}
                        .word_tile[data-itile="3"]{ left: 43%;}
                        .word_tile[data-itile="4"]{ left: 56%;}
                        .word_tile[data-itile="5"]{ left: 69%;}
                        .word_tile[data-itile="6"]{ left: 82%;}
                


                        .word_tile img.empty_tile{ width:100%; height:100%; }
                        .word_tile img.tile_bck_opp{ 
                            position: absolute; top:0; left:0; width:100%; height:100%; 
                            display:none;
                        }
                        .word_tile .x2{ position: absolute; top:0%; left:10%; width:90%; 
                            height:100%; text-align: center;  color: rgb(51,0,0);
                        }
                            .tray[data-owner="CPU"] .word_tile .x2{ display:none;}

                        .word_tile div.letter_tile{
                            position: absolute; top:0; left:0; width:100%; height:100%; 
                        }
                            .word_tile img.tile_bck{ width:100%; height:100%; }
                            .word_tile img:hover{ cursor: pointer; }
                            .word_tile p.letter{ 
                                position:absolute; top:0;  text-align: center; width:93.75%; height:100%; 
                                z-index:101; color:rgb(51,0,0);
                            }
                            .showWhiteLetters p.letter{ color:white; }
                .trayArrow{ 
                    display:none;
                    position:absolute; left:-1%; top:10%; width:auto; height:4%; z-index:250; 
                }
/******************************************************************************************************/
            .fixedTop {
                position:fixed; top:0; left:0; width:100%; height:4em; 
                font-size:150%; z-index:202;
            }   
                .fixedTop_with_info{ width:75%; left:0;}

                .fixedTop .menuNavButton{
                    display:none; position:absolute; top:0; left:0; width:1.5em; height:1.5em;
                }
                .menuNavButton:hover{  cursor:pointer; }
                .fixedTop .mainTitle{
                    line-height: 2em; max-height:2em; overflow:hidden; 
                    background-color: rgb(255, 255, 217); color:rgb(102, 102, 170);
                    font-weight:bold; border-bottom:2px solid #EFEFEF;
                    text-align:center;
                }
                .fixedTop .mainMenu_intro{ 
                    display:none; 
                    position:relative; width:100%; height:2em;
                    line-height: 2em; max-height:2em; background-color: white; 
                    -webkit-box-shadow: 0px 8px 5px -3px rgba(0,0,0,0.75);
                    -moz-box-shadow: 0px 8px 5px -3px rgba(0,0,0,0.75);
                    box-shadow: 0px 8px 5px -3px rgba(0,0,0,0.75);
                    
                } 
                .fixedTop .mainMenu{
                    line-height: 2em; max-height:2em;
                }
                    .fixedTop .mainMenu li{
                        color:black; background-color: white; text-align:left; padding-left:2%;
                    }
                    .fixedTop .mainMenu li:hover{
                        background-color: rgb(204, 204, 255); cursor:pointer;
                    }
                    .fixedTop .mainMenu > li{ 
                        float:left; position:relative; padding-right:4%;
                    }
                    .fixedTop .mainMenu > li.last_li{ 
                            float:none; overflow:hidden;  text-align: center; max-height:2em;
                    }
                        .menuHandicap{ color: rgb(170, 102, 102); }
                    /*
                    .fixedTop .mainMenu > li:hover .submenu{
                        display:inline;
                    }*/
                    .fixedTop .mainMenu .submenu{
                        display:none; position:absolute; top:100%; left:0;
                        line-height: 1.5em; white-space:nowrap; 
                    }
                        .fixedTop .mainMenu  .submenu li{
                            display:block; padding-left:4px; padding-right:20px; 
                        }
                        .fixedTop .mainMenu  .submenu li.disabled{
                            color:gray;
                        }
                        .fixedTop .mainMenu  .submenu li .submenuCheckbox{
                            width:auto; height:1em; margin-top:0.25em; padding-right: 5px;
                        }
                        .fixedTop .mainMenu  .submenu li.noCheckbox .submenuCheckbox{ 
                            visibility: hidden;
                        }
                        .fixedTop .mainMenu  .webmenu li.noCheckbox .submenuCheckbox{ 
                            display:none;
                        }
                        .webmenu a{ text-decoration: none; color:black;}
                        .fixedTop .mainMenu  .webmenu li{
                            padding-left: 1em; padding-top:0.2em; padding-bottom:0.1em; padding-right: 2em;
                        }

                    .fixedTop .mainMenu .submenuActive{
                        display:inline;
                    }

                
                .fixedTop .mainMenu .playMenuTitle{ display:none;}
                
/******************************************************************************************************/
/*  all extra windows for settings (handicap, game ...) have class fixed_window */
            .fixed_window{
                display:none; z-index:500;
                position: fixed; top:0; left:0; width:100%; height:100%; 
                background: url('img/dot_white_transparent.png'); 
                
            }
                .fixed_window .content{
                    position:relative; 
                    margin:auto auto;
                    width:70%;  
                    color:rgb(244,204,154);     /* sets color of text in boxes */
                    border:2px solid gray; border-radius: 4%;
                    background: url('img/DarkerGround.png') no-repeat;
                    background-size: 100% 100%; overflow:hidden;
                    font-size: 120%; 
                }
                .fixed_window .content .bckg{   
                    display:none; position:absolute; width:100%; height:100%; top:0; left:0; z-index:-1;
                }
                .fixed_window .content h3{
                    background-color: rgb(255,204,0); color:black; text-align: center;
                    line-height: 1.5em; font-size:90%; font-weight: bold;
                }
                .fixed_window .content h3 img.close_window{ 
                    float:right; margin-right:2%; 
                    height:1em; width:auto; margin-top:0.25em;
                }
                .fixed_window .content h3 img.help_button{
                    float:left; margin-left:10px; 
                    height:1em; width:auto; margin-top:0.5em;
                }
                    .fixed_window .content h3 img.close_window:hover,
                    .fixed_window .content h3 img.help_button:hover{
                        cursor:pointer;
                    }
                *[data-alert]{ cursor: pointer;}
                .fixed_window .alert{
                    position:absolute; display:none; z-index:10; width:50%; left:40%; height:60%; top:10%;
                    max-height:80%;
                }
                    .fixed_window .alert_handicap{left:50%; width:45%; height:50%; z-index:351;}
                    .fixed_window .alert img{ width:100%; height:100%;}
                    .fixed_window .alert h5{ position:absolute; top:8%; width:100%; text-align: center; left:0; 
                        font-size:230%; color:black;
                    }
                    .fixed_window .alert p{ position:absolute; top:36%; width:80%; left:10%;
                        font-size:140%; color:black; text-align:center;
                    }
                    .fixed_window .alert_handicap p.alertMsg_smaller{font-size:90%; top:22%; }

                .fixed_window .content .setting_group{
                    border:2px solid rgb(153,153,255); border-radius:10px; 
                    color:rgb(255,204,0); margin-top:1em;
                    width:90%; margin-left:5%;
                }
                     .fixed_window .content .group_title{
                        line-height: 2em; text-align: left; margin-left: 20px; 
                        margin-top:0; /*background-color:rgb(118,31,42);*/
                        font-size: 110%;
                     }    
                     .fixed_window .content .setting_group p{
                        line-height: 1.2em;
                        margin-bottom:0.5em; 
                        margin-left:3%; margin-right:3%;
                     }
                     .fixed_window .content .setting_group .with_margin_left{
                        margin-left: 5%;
                     }
                    .fixed_window .easyZapButton, .fixed_window .wordZapButton{  }
                .fixed_window input.firstToWin{
                    width:3em; font-size: 100%;
                }

                .fixed_window_footer{
                    text-align:center; line-height:3em; padding-top:0.6em;
                }
                    .fixed_window button{ width:80px; line-height:1em; height:1.4em; font-size:100%;}

           /*.settings_window .content{ font-size: 181%; }
            .handicap_window .content{ font-size: 144%; }
            .language_window .content{ font-size: 181%; }
            .help_window .content{ font-size: 191%; }
            .keyhelp_window .content{ font-size: 185%; }
            .up_window .content{ font-size: 176%; }
            .about_window .content{ font-size: 192%; }
            */
            .matchType_window .content{ font-size: 192%; }
            .display_window .content{ font-size: 188%; }
                
/****************** HANDICAP, HELP, UP and ABOUT ********************************************************/

                .fixed_window_hasTopBotom .content .top_part{
                    border-bottom: 2px solid gray;
                    padding-left:5%; padding-right:5%;
                }
                .fixed_window_hasTopBotom .content .bottom_part{
                    padding-left:5%; padding-right:5%; padding-bottom:1em;
                    text-align: center; 
                }
                .fixed_window_hasTopBotom .content p{
                    line-height:1.4em; padding-bottom:1em; padding-top: 1em;
                }
                .fixed_window_hasTopBotom .content .with_big_margin_left{
                    margin-left: 10%;
                }
                .fixed_window_hasTopBotom .content .with_big_margin_right{
                    margin-right: 10%;
                }
                .fixed_window_hasTopBotom .content .handicap_info{text-align:center; }
                    .fixed_window_hasTopBotom .content .handicap_info .beginner_info{ float:left; }
                    .fixed_window_hasTopBotom .content .handicap_info .expert_info{ float:right; }
                .fixed_window_hasTopBotom .handicap{
                    width:3em; font-size:100%; 
                }
                .fixed_window_hasTopBotom .save_handicap_window{
                    float:right; /*width:70px; line-height:2em; */
                }
                .up_window h1{   font-size:160%; text-align:center;   }
                .up_window h2{   font-size:100%; text-align:center;   }
                .up_window h4{   font-size:130%; text-align:center;   }
                .about_window h1{   font-size:160%; text-align:center;   }
                .about_window h2{   font-size:100%; text-align:center;   }
                .about_window h4{   font-size:130%; text-align:center;   }
                .fixed_window_hasTopBotom .content .about_info{text-align:center; }
                    .fixed_window_hasTopBotom .content .left_info { float:left; margin-left:20%; }
                    .fixed_window_hasTopBotom .content .right_info { float:right;margin-right:20%;  }
                a.keyboard_shortcuts{
                    color:rgb(255,204,0); text-decoration: underline;
                }
                .about_window a.programmer_link{ text-decoration: none; color:inherit; }
                .about_window a.programmer_link:hover{ text-decoration: underline; }
                .keyhelp_window .content .bckg{
                    position:relative; 
                }
                .keyhelp_window .bckg_key{
                    width:100%;
                }
                .fixed_window .key_shortcut{ font-size:80%;}
                 .fixed_window .key_shortcut .key{ font-weight:bold; }
                 .fixed_window .key_shortcut td{ padding-left:5%; padding-top:0.5em; padding-bottom:0.5em;} 
                 .fixed_window .key_shortcut tr{ line-height:1em;  }
                input.handicap{ width:3%;}
                .fixed_window_hasTopBotom .content p.red_bar{
                    position:relative; float:right; 
                    height:0.6em;  margin-top: 0.5em; 
                    width:50%; background-color: red; padding:0; margin-bottom: 1em;
                }
                .handicap_scroll_over{
                    display:none; position:absolute; left:0; top:0; width:100%; height: 100%;
                    background-image: url('img/dot_gray_transparent.png'); z-index:110;
                }
                .handicap_scroll_disable_scroll{
                    display: block;
                }

                .homepage_info{ top:1em; margin:auto; }
                .homepage_info p{ text-align: center; padding:10px; }
                .home-page{ height:10em; width:auto;  }
                .home-page-icon{ height:1.8em; width:auto; text-align: center; vertical-align: middle }
                .plus-icon{ height:6em; width:auto; vertical-align: middle }
                .add-icon{ height:1.4em; width:auto; margin: auto; vertical-align: middle }
                .iPhone-icon{ height:2.9em; horiz-align: center; vertical-align: middle }
                .homepage_info .content{ height:auto;}
/****************** checkbox radio *****************************************************************/
        .disabled-options{ /* color:gray;*/}
        span[data-type="checkbox"], span[data-type="radio"]{
            display:inline-block; height:1.45em; width:1.45em; line-height:1.25em; vertical-align: bottom;
            background: url('img/OnOffButton0001.png') no-repeat;
            background-size:100% 100%;
        }
        span[data-type="checkbox"]:hover, span[data-type="radio"]:hover{ cursor: pointer;}
        span[data-type="checkbox"][data-state="checked"], span[data-type="radio"][data-state="checked"]{
            background: url('img/OnOffButton0002.png') no-repeat;
            background-size:100% 100%;
        }
        span[data-type="checkbox"][data-state="disabled"], span[data-type="radio"][data-state="disabled"]{
            background: url('img/OnOffButton0003.png') no-repeat;
            background-size:100% 100%;
        }
        span[data-type="checkbox"][data-state="disabled-checked"], span[data-type="radio"][data-state="disabled-checked"]{
            background: url('img/OnOffButton0004.png') no-repeat;
            background-size:100% 100%;
        }
        .littleTable{ height:2.2em; width:auto; vertical-align: bottom; }
        .littleTable4x4{ height:2.5em;}
        .littleTable:hover{ cursor: pointer;}


  

        .scrollbarH{ 
            clear:both;
            position:relative; width:100%;  height:1em; overflow:hidden; 
            outline:1px solid rgb(88,95,99); z-index:250; 
        }
                .scrollbarH .scroll_arrow{ 
                        position:absolute; width:2%; height:100%; left:0; top:0;
                        border:1px solid rgb(88,95,99); box-sizing:border-box;
                }
                    .scrollbarH .scroll_arrow:hover{ border:1px solid rgb(85,167,218); }
                    .scrollbarH #scroll_arrow_left{ left:0; }
                    .scrollbarH #scroll_arrow_right{ left:98%; }
                    .scrollbarH .scroll_arrow img{ position:absolute; width:30%; height:auto; top:30%; left:35%;}

                .scrollbarH .wrap_hand{  
                        position:absolute; width:96%; height:100%; left:2%; top:0;  
                        box-sizing:border-box; border-top:1px solid rgb(88,95,99); 

                }
                    .scrollbarH .hand{ 
                            position:absolute; background-color:blue; border-radius:30%; border:1px solid black; 
                            height:100%; width:5%; top:-30%; left:0; z-index:100; 
                     }
                     .scrollbarH .hand:hover{ border:1px solid rgb(85,167,218); }
                     .scrollbarH .hand img{ position:absolute; left:25%; height:30%; width:50%; top:50%; }
            .noselect {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .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 );
                
            }
           


@media (max-width:540px), (max-height:540px){
    .screenIntro #playerName{ border:2px solid #232323;     }

    .screenIntro .playButton{ border:2px solid #232323;  }

    .button_skin{  border-radius:2px; box-shadow: 1px 1px 3px black; }
    .button{font-size:120%;}
    .fixedTop .mainMenu_intro{ 
        height:2.5em;   line-height: 2.5em; max-height:2.5em; 
    }
   .fixedTop .mainMenu{
        line-height: 2.5em;
        max-height: 2.5em;
   } 
   .fixedTop .mainMenu .submenu {
        line-height: 2.5em;
    }
    .fixed_window input.firstToWin{
        width:5em; 
    }
    .hideFromBossWin  .back_from_iframe{ font-size: 150%; }

    .span[data-type="checkbox"], span[data-type="radio"]{
            display:inline-block; height:1.9em; width:1.9em; line-height:1.9em; vertical-align: bottom;
    }
}