/* typing */
#preview_area{font-size:28px;min-height:23px;padding:30px 5px;letter-spacing:2px}
#preview_area.small,#type_area.small{font-size:1em;padding:1em .5em;height:auto}
.dir_rtl{direction:rtl}
.dir_ltr{direction:ltr}
.text_type{font-family:"Courier New", Courier, monospace}
.text_hint{font-family:"Ubuntu", Arial, Helvetica, sans-serif}

.done_ok{color:#999}
.done_bad{color:#f9f;border-bottom:2px solid #f9f}

.current{color:#FF7F50;border-bottom:2px solid #FF7F50}
.next{color:#ffffff}

.done_txt_ok{color:#777} 
.done_txt_bad{color:#ff9b7b}
.current_txt{color:#CDDC39}
.next_txt{color:#fff}

#type_area{height:80px;padding:5px;font-size:28px;background-color:#fff;font-family:"Courier New", Courier, monospace;overflow:auto;letter-spacing:2px; color:#000}

#scoreboard{ font-size:.9em; line-height:1.6em;background: #ff7f50;}

.score_top{font-size:1.2em; font-weight:600;}

.blanc{background-color:#999}
.suggestion{margin:3px 0;position:relative}
#suggestion{height:auto}
#suggestion_num{height:202px}
.hand{/*float:left;margin:60px 9px 0 9px;position:relative;text-align:center;*/width:90px;height:90px;display:inline-block}
#hand_left{background:url("img/hand-left-fotor1.png") no-repeat scroll top center;width:90px;height:90px}
#hand_right{background:url("img/hand-right-fotor1.png") no-repeat scroll top center;width:90px;height:90px}
#ungli_0,#ungli_1,#ungli_2,#ungli_3,#ungli_4{width:16px;height:16px;padding:0;box-sizing:border-box;background:#ffffff;border-radius:50%;position:absolute;display:none}
.hand.lg{width:94px;height:94px}
.hand.lg #hand_left,.hand.lg #hand_right{background-size:cover;width:94px;height:94px}
#ungli_0.lg,#ungli_1.lg,#ungli_2.lg,#ungli_3.lg,#ungli_4.lg{width:15px;height:15px}

#typing_info a{background-color:#fff;border:1px solid #b0bdcc;margin:0 6px;font-weight:bold;text-align:center;padding:5px 10px;border-radius:8px;display:block}

#debug{clear:both}

/* speed test */

select#stories_select{width:728px;padding:2px 2px}

/* result */
ul.graph{width:350px;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;padding:0;list-style-type:none}
ul.graph li{margin-bottom:3px;padding:2px;background-color:#f5fcfc}
ul.graph li div.speed{text-align:center;padding:2px;font-weight:bold}
ul.graph li div.letter{float:left;text-align:right;padding:2px 10px 2px 2px;width:80px}
ul.graph li div.result{float:left;font-weight:bold;width:188px;border:1px solid #b0bdcc;padding:2px 6px;background-color:#c2ffc9;background-image:url("img/graph.png");background-repeat:repeat-y;background-position:0 0;border-radius:5px}
ul.graph li div.percent{float:left;text-align:right;padding:2px;width:40px}

#complete{text-align:center;padding-top:10px;font-size:16px;font-weight:bold;line-height:24px}
#speedtest_title{text-align:center}
#speedtest_result{text-align:center;padding-top:4px;font-size:24px;font-weight:bold}

/* keyboard */
div.keyboard{overflow:auto;margin:0 auto;padding:0;font-size:12pt;font-family:Arial, Helvetica, sans-serif;/* float:left */}
div.keyboard.darktheme div.key{background:#222;color:#fff}

div.keyboard div.key{border-radius:5px;position:relative;background-color:#fff;line-height:60px;border:1px solid #777;margin:3px;color:#444;text-decoration:none;display:block;text-align:center;outline:none;/*float:left;*/width:50px;height:60px;box-shadow:#E2E2E2 3px 3px 3px}

div.keyboard div.key_dbl{line-height:21px;font-size:11pt}
div.keyboard div.key_dbl div.key_up{margin-top:3px;padding-left:4px;text-align:left}
div.keyboard div.key_dbl div.key_down{padding-right:4px;text-align:right}
div.keyboard div#key_202 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_203 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_204 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_302 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_303 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_304 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_403 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_404 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_405 {
    background: #e3e7ff;
    border-color: #babfd8;
    color: #444;
}
div.keyboard div#key_205 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_206 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_207 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_305 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_306 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_307 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_406 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_407 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_408 {
    background: #FCC6BB;
    border-color: #FAA18F;
}
div.keyboard div#key_208 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_209 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_210 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_308 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_309 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_310 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_409 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_410 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_411 {
    background: #BEEEF9;
    border-color: #94E3F4;
}
div.keyboard div#key_211 {
    background: #fff8da;
    border-color: #dccd90;
}
div.keyboard div#key_212 {
    background: #fff8da;
    border-color: #dccd90;
}
div.keyboard div#key_213 {
    background: #fff8da;
    border-color: #dccd90;
}
div.keyboard div#key_311 {
    background: #fff8da;
    border-color: #dccd90;
}
div.keyboard div#key_312 {
    background: #fff8da;
    border-color: #dccd90;
}
div.keyboard div#key_412 {
    background: #fff8da;
    border-color: #dccd90;
}
div.keyboard div#key_214 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_201 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_301 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_401 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_501 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_503 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_504 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_505 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_508 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_313 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_413 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_101 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_102 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_103 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_104 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_105 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_106 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_107 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_108 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_109 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_110 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_111 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_112 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_113 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
div.keyboard div#key_114 {
    background: #F3F2F2;
    border-color: #DCDBDB;
}
/*
div.keyboard div.sep{clear:both; border:0px}
*/

div.keyboard div.key_back{width:103px}
div.keyboard div.key_back_short{width:32px}
div.keyboard div.key_tab{width:80px}
div.keyboard div.key_backslash_rgt{width:73px}

div.keyboard div.key_enter_down{border-bottom-right-radius:0;width:50px}
div.keyboard div.key_enter_down_middle{display:none}
div.keyboard div.key_enter_down_bottom{border-radius:0 0 5px 5px;position:absolute;top:30px;left:11px;width:38px;height:34px;border:1px solid #777;border-top:0;background-color:#fff}

div.keyboard div.key_enter_up{border-radius:5px 5px 0 0;
width:50px}
div.keyboard div.key_enter_up_middle{position:absolute;top:30px;left:-1px;width:50px;height:4px;border-left:1px solid #777;border-right:1px solid #777;background-color:#fff}
div.keyboard div.key_enter_up_bottom{border-radius:5px 0 5px 5px;
position:absolute;top:33px;left:-23px;width:72px;height:30px;border:1px solid #777;background-color:#fff}

div.keyboard div.key_caps{width:103px}
div.keyboard div.key_enter{width:106px}

div.keyboard div.key_shift_lft{width:74px;clear:left}
div.keyboard div.key_shift_lft_long{width:130px;clear:left}

div.keyboard div.key_shift_rgt{width:135px}

div.keyboard div.key_ctrl_lft{width:46px}
div.keyboard div.key_alt_lft{width:53px;margin-left:143px}
div.keyboard div.key_space{width:328px}
div.keyboard div.key_alt_rgt{width:49px}
div.keyboard div.key_ctrl_rgt{width:86px;margin-left:108px}

/* numeric keyboard */
div.num_keybord{overflow:auto;margin:3px 150px 0 100px;padding:0;font-size:14pt;font-family:Arial, Helvetica, sans-serif;width:250px;float:left}
div.num_keybord.darktheme div.key{background:#222;color:#fff}

div.num_keybord div.key{border-radius:5px;position:relative;background-color:#fff;line-height:56px;border:1px solid #777;margin:3px;color:#444;text-decoration:none;display:block;text-align:center;outline:none;float:left;width:56px;height:56px;box-shadow:#5a40b2 3px 3px 3px}

div.num_keybord div.key_numlock{line-height:14pt;padding-top:5px}

div.num_keybord div.key_6{margin-right:55px}
div.num_keybord div.key_0{width:117px}

div.num_keybord div.key_vertical div{border-radius:5px;position:absolute;top:0px;left:-1px;width:56px;height:117px;border:1px solid #777;border-top:0;background-color:#fff;box-shadow:#5a40b2 3px 3px 3px}
span#js_error{margin-left:5px;color:#f00}
div#hints{font-size:1em}

/* ================= Desktop/Laptop below 1280px  ================= */
@media only screen and (max-width:1359px){
.keyboard_fix{ width:963px;}
div.keyboard div.key{width:60px}
div.keyboard div.key_back{width:93px}
div.keyboard{width:966px}
div.keyboard div.key_tab{width:93px}
div.keyboard div.key_caps{width:108px}
div.keyboard div.key_enter{width:112px}
div.keyboard div.key_enter{width:112px}
div.keyboard div.key_shift_lft_long{width:123px}
div.keyboard div.key_shift_rgt{width:166px}
div.keyboard div.key_ctrl_lft{width:93px}
div.keyboard div.key_alt_lft{margin-left:81px}
div.keyboard div.key_space{width:394px}
div.keyboard div.key_ctrl_rgt{margin-left:189px}
}
@media only screen and (min-width:1358px){
.keyboard_fix{ width: 1168px;margin: 0px auto;}
.keyboard_fix div.keyboard { width: 1171px; }
.keyboard_fix div.keyboard div.key{width:75px;height:70px;line-height:70px;}
.keyboard_fix div.keyboard div.key_dbl {line-height: 31px;font-size: 14pt;}
.keyboard_fix div.keyboard div.key_back{width:112px}
.keyboard_fix div.keyboard div.key_tab{width:112px}
.keyboard_fix div.keyboard div.key_caps{width:127px}
.keyboard_fix div.keyboard div.key_enter{width:141px}
.keyboard_fix div.keyboard div.key_shift_lft_long{width:142px}
.keyboard_fix div.keyboard div.key_shift_rgt{width:206px}
.keyboard_fix div.keyboard div.key_ctrl_lft{width:112px}
.keyboard_fix div.keyboard div.key_alt_lft{margin-left:90px}
.keyboard_fix div.keyboard div.key_space{width:490px}
.keyboard_fix div.keyboard div.key_ctrl_rgt{margin-left:229px}
}
@media only screen and (min-width:1358px){
.lesson_keyboard div.keyboard { width: 1130px; }
.lesson_keyboard div.keyboard div.key{width:70px;height:70px;line-height:70px;}
.lesson_keyboard div.keyboard div.key_dbl {line-height: 31px;font-size: 14pt;}
.lesson_keyboard div.keyboard div.key_back{width:122px}
.lesson_keyboard div.keyboard div.key_tab{width:122px}
.lesson_keyboard div.keyboard div.key_caps{width:127px}
.lesson_keyboard div.keyboard div.key_enter{width:141px}
.lesson_keyboard div.keyboard div.key_shift_lft_long{width:142px}
.lesson_keyboard div.keyboard div.key_shift_rgt{width:202px}
.lesson_keyboard div.keyboard div.key_ctrl_lft{width:112px}
.lesson_keyboard div.keyboard div.key_alt_lft{margin-left:90px}
.lesson_keyboard div.keyboard div.key_space{width:490px}
.lesson_keyboard div.keyboard div.key_ctrl_rgt{margin-left:190px}
}

/* ================= Tablet (Portrait) 768px - 959px ================= */
@media only screen and (max-width: 991px) {
/* numeric keyboard */
div.num_keybord{ margin:3px 150px 0 45px;}
.keyboard_fix{ width:705px;}
.keyboard_fix div.keyboard{ float:none;width:705px; margin:auto;}
.keyboard_fix div.keyboard div.key{width:42px; margin:2px}
.keyboard_fix div.keyboard div.key_back{width:102px}
.keyboard_fix div.keyboard div.key_backslash_rgt{width:62px}
.keyboard_fix div.keyboard div.key_tab{width:80px}
.keyboard_fix div.keyboard div.key_caps{width:96px}
.keyboard_fix div.keyboard div.key_enter{ width:93px;}
.keyboard_fix div.keyboard div.key_shift_lft_long{width:136px}
.keyboard_fix div.keyboard div.key_shift_rgt{width:99px}
.keyboard_fix div.keyboard div.key_ctrl_lft{ width:78px;}
.keyboard_fix div.keyboard div.key_alt_lft{margin-left:90px}
.keyboard_fix div.keyboard div.key_space{width:296px}
.keyboard_fix div.keyboard div.key_alt_rgt{ width:60px;}
.keyboard_fix div.keyboard div.key_ctrl_rgt{ width:55px; margin-left:64px}

/* ================= lesson_keyboard ================= */

.lesson_keyboard{ width:705px;}
.lesson_keyboard div.keyboard{ float:none;width:705px; margin:auto;}
.lesson_keyboard div.keyboard div.key{width:42px; margin:2px}
.lesson_keyboard div.keyboard div.key_back{width:102px}
.lesson_keyboard div.keyboard div.key_backslash_rgt{width:62px}
.lesson_keyboard div.keyboard div.key_tab{width:80px}
.lesson_keyboard div.keyboard div.key_caps{width:96px}
.lesson_keyboard div.keyboard div.key_enter{ width:93px;}
.lesson_keyboard div.keyboard div.key_shift_lft_long{width:136px}
.lesson_keyboard div.keyboard div.key_shift_rgt{width:99px}
.lesson_keyboard div.keyboard div.key_ctrl_lft{ width:78px;}
.lesson_keyboard div.keyboard div.key_alt_lft{margin-left:90px}
.lesson_keyboard div.keyboard div.key_space{width:296px}
.lesson_keyboard div.keyboard div.key_alt_rgt{ width:60px;}
.lesson_keyboard div.keyboard div.key_ctrl_rgt{ width:55px; margin-left:64px}
}


/* ================= Mobile (Landscape) 480px - 767px ================= */
@media only screen and (max-width:767px) {
.keyboard_fix{ width:612px;}
.keyboard_fix div.keyboard{ float:none;width:612px; margin:auto;}
.keyboard_fix div.keyboard div.key{width:37px; margin:2px}
.keyboard_fix div.keyboard div.key_back{width:75px}
.keyboard_fix div.keyboard div.key_backslash_rgt{width:62px}
.keyboard_fix div.keyboard div.key_tab{width:50px}
.keyboard_fix div.keyboard div.key_caps{width:60px}
.keyboard_fix div.keyboard div.key_enter{ width:93px;}
.keyboard_fix div.keyboard div.key_shift_lft_long{width:95px}
.keyboard_fix div.keyboard div.key_shift_rgt{width:99px}
.keyboard_fix div.keyboard div.key_ctrl_lft{ width:60px;}
.keyboard_fix div.keyboard div.key_alt_lft{margin-left:78px}
.keyboard_fix div.keyboard div.key_space{width:283px}
.keyboard_fix div.keyboard div.key_alt_rgt{ width:55px;}
.keyboard_fix div.keyboard div.key_ctrl_rgt{ width:53px; margin-left:30px}

/* ================= lesson_keyboard ================= */

.lesson_keyboard{ width:612px;}
.lesson_keyboard div.keyboard{ float:none;width:612px; margin:auto;}
.lesson_keyboard div.keyboard div.key{width:37px; margin:2px}
.lesson_keyboard div.keyboard div.key_back{width:75px}
.lesson_keyboard div.keyboard div.key_backslash_rgt{width:62px}
.lesson_keyboard div.keyboard div.key_tab{width:50px}
.lesson_keyboard div.keyboard div.key_caps{width:60px}
.lesson_keyboard div.keyboard div.key_enter{ width:93px;}
.lesson_keyboard div.keyboard div.key_shift_lft_long{width:95px}
.lesson_keyboard div.keyboard div.key_shift_rgt{width:99px}
.lesson_keyboard div.keyboard div.key_ctrl_lft{ width:60px;}
.lesson_keyboard div.keyboard div.key_alt_lft{margin-left:78px}
.lesson_keyboard div.keyboard div.key_space{width:283px}
.lesson_keyboard div.keyboard div.key_alt_rgt{ width:55px;}
.lesson_keyboard div.keyboard div.key_ctrl_rgt{ width:53px; margin-left:30px}
}


/* ================= Mobile (Portrait) below 480px  ================= */
@media only screen and (max-width:479px) {
/* numeric keyboard */
#scoreboard{ font-size:.8em;}
.keyboard_fix{ width:320px;}.keyboard_fix div.keyboard{ width:320px;}
.keyboard_fix div.keyboard div.key{width:19px; height:37px; line-height:37px; margin:1px; font-size:.75em;}
.keyboard_fix div.keyboard div.key_back{width:45px}
.keyboard_fix div.keyboard div.key_backslash_rgt{width:30px}
.keyboard_fix div.keyboard div.key_tab{width:34px}
.keyboard_fix div.keyboard div.key_caps{width:34px}
.keyboard_fix div.keyboard div.key_enter{ width:51px;}
.keyboard_fix div.keyboard div.key_shift_lft_long{width:55px}
.keyboard_fix div.keyboard div.key_shift_rgt{width:51px}
.keyboard_fix div.keyboard div.key_ctrl_lft{ width:56px;}
.keyboard_fix div.keyboard div.key_alt_lft{margin-left:0; width:40px;}
.keyboard_fix div.keyboard div.key_space{width:124px}
.keyboard_fix div.keyboard div.key_alt_rgt{ width:42px;}
.keyboard_fix div.keyboard div.key_ctrl_rgt{ width:50px; margin:0}
.keyboard_fix div.keyboard div.key_dbl div.key_up{ margin:0; padding:0; text-align:center;}
.keyboard_fix div.keyboard div.key_dbl div.key_down{ padding:0; text-align:center;}
.keyboard_fix div.keyboard div.key_dbl{ line-height:18px;}
#preview_area{ font-size:17px;}

/* ================= lesson_keyboard ================= */

.lesson_keyboard{ width:320px;}.lesson_keyboard div.keyboard{ width:320px;}
.lesson_keyboard div.keyboard div.key{width:19px; height:37px; line-height:37px; margin:1px; font-size:.75em;}
.lesson_keyboard div.keyboard div.key_back{width:45px}
.lesson_keyboard div.keyboard div.key_backslash_rgt{width:30px}
.lesson_keyboard div.keyboard div.key_tab{width:34px}
.lesson_keyboard div.keyboard div.key_caps{width:34px}
.lesson_keyboard div.keyboard div.key_enter{ width:51px;}
.lesson_keyboard div.keyboard div.key_shift_lft_long{width:55px}
.lesson_keyboard div.keyboard div.key_shift_rgt{width:51px}
.lesson_keyboard div.keyboard div.key_ctrl_lft{ width:56px;}
.lesson_keyboard div.keyboard div.key_alt_lft{margin-left:0; width:40px;}
.lesson_keyboard div.keyboard div.key_space{width:124px}
.lesson_keyboard div.keyboard div.key_alt_rgt{ width:42px;}
.lesson_keyboard div.keyboard div.key_ctrl_rgt{ width:50px; margin:0}
.lesson_keyboard div.keyboard div.key_dbl div.key_up{ margin:0; padding:0; text-align:center;}
.lesson_keyboard div.keyboard div.key_dbl div.key_down{ padding:0; text-align:center;}
.lesson_keyboard div.keyboard div.key_dbl{ line-height:18px;}

.hand {width: 32px;height: 32px;}
#hand_right {float: right;}
}