* {
  padding: 0;
  margin: 0;
}

body {
  color: #000;
  margin: 0px;
  padding: 0px;
  background-color: #fefefe;
  font-family: arial,verdana,sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}

h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
}

h3 {
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0;
}

p {
  margin: 12px 0;
}

img {
  border: 0;
}

a:link   {
  color: #06c;
  text-decoration: none;
}
a:visited  {
  color: #06c;
  text-decoration: none;
}
a:active  {
  color: #07f;
  text-decoration: none;
}
a:hover  {
  color: #07f;
  text-decoration: underline;
}

input[type=text],
input[type=submit],
input[type=button],
input[type=password],
select {
  font-family: arial,verdana,sans-serif;
  border:1px solid #b0bdcc;
  margin:1px 0;
}

textarea {
  font-family: arial,verdana,sans-serif;
  border:1px solid #b0bdcc;
  margin:0;
}

form {
  margin: 0;
}

/* main */
#wrap {
  width:836px;
  margin-left:auto;
  margin-right:auto;
/*  background: #e0e6f1 url('img/bg_sprites.gif') repeat-x 0 0; */
/*  background: #e0e6f1 url('img/wrap_bg.png') repeat-x bottom left; */
  background: #e0e6f1 url('img/wrap_bg2.png') repeat-y 0 0;
}
#left {
  float:left;
  width:188px;
  margin:5px;
  border: 1px solid #b0bdcc;
  background-color: #fefefe;
}
#middle {
  float:left;
  width:468px;
  margin-right:5px;
}
#right {
  float:left;
  width:160px;
  margin-top:5px;
}
#footer {
  clear:both;
  text-align:center;
  font-size: 10px;
  padding-bottom: 5px;
}

#logo {
  padding:10px;
  font-size:14px;
  font-weight: bold;
}
#logo_small {
  font-size:11px;
}

/* left menu */
#menu_items {
  text-indent: 5px;
  list-style-position: outside;
/*  list-style-image: url(arrow.gif); */
  list-style-type: none;
  padding: 6px;
  margin: 2px;
}
ul#menu_items li.menu_other {
  margin: 3px 0;
}
ul#menu_items li.menu_started a {
  color:#06c;
  font-weight:bold;
}
ul#menu_items li.menu_done a,
ul#menu_subitems li.submenu_done a {
  text-decoration:line-through;
  font-weight:normal;
  color:#06c;
}
ul#menu_subitems li.submenu_new a {
  color:#06c;
  font-weight:normal;
}

#menu_subitems {
  text-indent: 5px;
  list-style-position: outside;
/*  list-style-image: url(arrow.gif); */
  list-style-type: square;
  padding-left: 20px;
  margin: 2px;
}

#share {
  padding: 0 0 2px 12px;
  width: 188px;
}
#follow {
  padding: 0 0 12px 12px;
  width: 188px;
}

#left div.addthis_toolbox a {
  margin-bottom: 4px;
}


/* right */
#right div#language {
  padding: 3px 0;
}
#right div#language label {
  font-size: 11px;
}
#right div#language select {
  display: block;
  width: 100%;
  height: 22px;
  padding: 1px 0;
}
#right div#translation {
  font-size: 10px;
  text-align: center;
}

/* button */
input.btn {
  font-size: 11px;
  height:22px;
  background-color: #e0e6f1;
}

/* first page */

#first p:first-letter {
  font-size: 120%;
}
#first#screenshot {
  width: 468px;
  height: 320px;
}

/* typing */
#text {
  width: 454px;
  border: 2px solid #b0bdcc;
	padding: 5px;
  font-size: 18px;
  margin-bottom: 3px;
  font-family: 'Courier New', Courier, monospace;
  direction: ltr;
}
.small {
  font-size: 12px !important;
}

.done_ok {
  color: #999;
}

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

.current {
  color: #00f;
  border-bottom: 2px solid #00f;
}
.next {
  color: #000;
}

.done_txt_ok {
  color: #777;
}

.done_txt_bad {
  color: #a1f;
}

.current_txt {
  color: #000;
}
.next_txt {
  color: #000;
}

#type {
  width: 456px;
	height: 130px;
	padding: 5px;
  font-size: 18px;
  background: #fff url('img/type_bg.png') no-repeat bottom right;
  font-family: 'Courier New', Courier, monospace;
  direction: ltr;
}

#meter {
  border: 1px solid #b0bdcc;
	padding: 1px;
  width: 464px;
  margin: 3px 0;
  text-align: center;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;

  background-color: #0f0;
  background-image: url('img/graph.png');
  background-repeat: repeat-y;
  background-position: 0 0;
}

.top_stuff,
.middle_stuff {
  width: 468px;
  margin: 3px 0;
}

#suggestion {
  background: url('img/hands.png') no-repeat scroll center center;
  text-align:center;
  border: 1px solid #b0bdcc;
  width: 466px;
  height: 100px;
  margin: 3px 0;
  position: relative;
}
#finger_shift,
#finger {
  background: url('img/finger.png') no-repeat scroll center center;
  width: 20px;
  height: 20px;
  position: absolute;
  display: none;
}




.navigation {
  clear: both;
  width: 468px;
  font-weight: bold;
  font-size: 18px;
}

#hint_prev {
  padding-top: 10px;
  float: left;
}
#hint_next,
#hint_type {
  padding-top: 10px;
  float: right;
}

#skip_hint {
  margin-top:15px;
  text-align:center;
  font-size: 16px;
  font-weight: bold;
}




#debug {
  clear: both;
}


#footer div#links {
  font-size: 11px;
}


/* user */
.user_error {
  color: #f00;
}
.input_error {
  color: #f00;
  font-weight: bold;
}
.user_bad {
  color: #f00;
}

.user {
  margin:2px 12px;
}

.user label {
  width:80px;
  display:inline-block;
  line-height:22px;
  font-size:11px;
}
.login_input {
  width:74px;
  padding:2px;
}

.login_button {
  width:80px;
}

.login_forgot {
  font-size: 10px;
  text-align:center;
}


/* faq */
#faq_questions {
  border: 1px solid #b0bdcc;
  background-color: #fefefe;
	padding: 5px 5px 5px 25px;
  width: 436px;
  margin: 0px;
}
#faq_answers {
	padding: 5px 5px 5px 25px;
  width: 452px;
  margin: 0px;
}
#faq_answers li div a:hover{
  color:#000;
  text-decoration:none;
}
.faq_question {
  font-style:italic;
  font-weight: bold;
}

/* speed test */

#stories_select {
  width:468px;
}


/* games */

div#games div.game_thumb {
  float: left;
  width: 234px;
  text-align: center;
  margin-bottom: 6px;
}
div#games div.game_thumb img {
  margin-top: 3px;
  width: 230px;
  height: 190px;
}

#game_board {
  position: relative;
  width: 466px;
  height: 350px;
  border: 1px solid #b0bdcc;
  text-align: center;
  overflow: hidden;
  background-color: #f9f9f9;
}

#game_border {
  border: 1px solid #b0bdcc;
  width: 464px;
  height: 348px;
}

#game_console {
  text-align: center;
  padding: 5px;
  border: 1px solid #b0bdcc;
}

#game_console input {
  margin: 1px 8px;
  font-weight: bold;
  height: auto;
  font-size: 12px;
}
#game_console input.btn {
  padding: 1px 3px;
}

#game_console span#game_score,
#game_console span#game_lives,
#game_console span#game_time {
  font-weight: bold;  
}

div#game_board div.game_block {
  border: 2px solid #b0bdcc;
  width: 24px;
  height: 24px;
  background-color: #fff;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  position: absolute;
}
div#game_board div.game_box {
  border: 2px solid #b0bdcc;
  width: auto;
  height: 24px;
  background-color: #fff;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  position: absolute;
  padding: 0 4px;
}
div#game_board div.game_brick {
  border: 1px solid #b0bdcc;
  width: 27px;
  height: 26px;
  background-color: #fff;
  font-size: 22px;
  font-family: 'Courier New', Courier, monospace;
  display: block;
  float: left;
  padding-top: 1px;
}
div#game_board div.game_position {
  background-color: #b0bdcc;
}
div#game_board div.game_way {
  background-color: #00ff00;
}
div#game_board div.game_goal {
  background-color: #DCFF54;
}
#width_test {
  border-width: 2px;
  width: auto;
  position: absolute;
  visibility: hidden;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  padding: 0 4px;
}
#game_input {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  padding: 2px;
  text-align: left;
  border-bottom: 1px solid #b0bdcc;
}

#game_caption {
  margin-top: 165px;
  font-size: 14px;
  font-weight: bold;
}


/* resource list */

#list h2 {
  margin: 10px 0 2px 0;
}

#list table {
  border-collapse:collapse;
  width: 100%;
}
#list table,
#list th,
#list td {
  border: 1px solid #b0bdcc;
}
#list th {
  text-align: left;
  font-weight: bold;
}
#list th.soft_size,
#list td.soft_size {
  text-align: center;
}
#list th.soft_os,
#list td.soft_os {
  width: 25px;
  text-align: center;
}
#list td.soft_os img {
  width: 18px;
  width: 16px;
}
#list th.site_ico,
#list td.site_ico {
  text-align: center;
}
#list td.site_ico img {
  width: 18px;
  width: 16px;
}

#list div#add_resource {
  padding: 10px 0;
}

/* 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:#eff4f9;
}
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:196px;
  border:1px solid #b0bdcc;
  padding:2px;
  background-color:#c2ffc9;
  background-image:url('img/graph.png');
  background-repeat:repeat-y;
  background-position:0 0;
}
ul.graph li div.percent {
  float:left;
  text-align:right;
  padding: 2px;
  width:40px;
}

#complete {
  text-align: center;
  padding-top: 10px;
  font-size: 14px;
  font-weight: bold;
}

/* donate */

#paypal {
  text-align: center;
}

/* comments */

#comments input[type=text] {
  width: 300px;
  font-size: 12px;
}
#comments textarea {
  width: 300px;
  height: 150px;
  font-size: 12px;
}
#comments input[type=submit] {
  width: 100px;
  font-size: 12px;
}







.clr {
  clear:both;
}




/* keyboard */
div.kb {
  overflow: auto;
  clear: both;
  margin: 3px 14px 0 14px;
  padding: 0;
  font-size: 10pt;
  font-family: arial,san-serif;
  width: 440px;
}

div.kb div {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
     
  background-color: #fff;
  line-height: 25px;
  border: 1px solid #777;
  margin: 1px;
  color: #444;
  text-decoration: none;
  display: block;
  text-align: center;
  outline: none;
}

div.kb div.sep { clear: both; border: 0px;}

div.kb div#key_tilde { float: left; width: 25px; }
div.kb div#key_1 { float: left; width: 25px; }
div.kb div#key_2 { float: left; width: 25px; }
div.kb div#key_3 { float: left; width: 25px; }
div.kb div#key_4 { float: left; width: 25px; }
div.kb div#key_5 { float: left; width: 25px; }
div.kb div#key_6 { float: left; width: 25px; }
div.kb div#key_7 { float: left; width: 25px; }
div.kb div#key_8 { float: left; width: 25px; }
div.kb div#key_9 { float: left; width: 25px; }
div.kb div#key_0 { float: left; width: 25px; }
div.kb div#key_minus { float: left; width: 25px; }
div.kb div#key_equal { float: left; width: 25px; }
div.kb div#key_back { float: left; width: 59px; }

div.kb div#key_tab { float: left; width: 42px; }
div.kb div#key_q { float: left; width: 25px; }
div.kb div#key_w { float: left; width: 25px; }
div.kb div#key_e { float: left; width: 25px; }
div.kb div#key_r { float: left; width: 25px; }
div.kb div#key_t { float: left; width: 25px; }
div.kb div#key_y { float: left; width: 25px; }
div.kb div#key_u { float: left; width: 25px; }
div.kb div#key_i { float: left; width: 25px; }
div.kb div#key_o { float: left; width: 25px; }
div.kb div#key_p { float: left; width: 25px; }
div.kb div#key_lft_square { float: left; width: 25px; }
div.kb div#key_rgt_square { float: left; width: 25px; }
div.kb div#key_backslash { float: left; width: 42px; }

div.kb div#key_caps { float: left; width: 49px; }
div.kb div#key_a { float: left; width: 25px; }
div.kb div#key_s { float: left; width: 25px; }
div.kb div#key_d { float: left; width: 25px; }
div.kb div#key_f { float: left; width: 25px; }
div.kb div#key_g { float: left; width: 25px; }
div.kb div#key_h { float: left; width: 25px; }
div.kb div#key_j { float: left; width: 25px; }
div.kb div#key_k { float: left; width: 25px; }
div.kb div#key_l { float: left; width: 25px; }
div.kb div#key_semicolon { float: left; width: 25px; }
div.kb div#key_apostrophe { float: left; width: 25px; }
div.kb div#key_enter { float: left; width: 64px; }

div.kb div#key_lft_shift { float: left; width: 64px; }
div.kb div#key_z { float: left; width: 25px; }
div.kb div#key_x { float: left; width: 25px; }
div.kb div#key_c { float: left; width: 25px; }
div.kb div#key_v { float: left; width: 25px; }
div.kb div#key_b { float: left; width: 25px; }
div.kb div#key_n { float: left; width: 25px; }
div.kb div#key_m { float: left; width: 25px; }
div.kb div#key_comma { float: left; width: 25px; }
div.kb div#key_dot { float: left; width: 25px; }
div.kb div#key_slash { float: left; width: 25px; }
div.kb div#key_rgt_shift { float: left; width: 78px; }

div.kb div#key_lft_ctrl { float: left; width: 42px; }
div.kb div#key_lft_alt { float: left; width: 35px; margin-left: 39px; }
div.kb div#key_space { float: left; width: 159px; }
div.kb div#key_rgt_alt { float: left; width: 35px; }
div.kb div#key_rgt_ctrl { float: left; width: 42px; margin-left: 70px; }