body
{
background-color: #fafafa;
padding: 10px 20px;
font-family: Helvetica,Arial,"MS Gothic",sans-serif;
margin: 0;
padding: 0;
}

a img	  { border: none; }
a	  { text-decoration: none; color: #55e; }
a:hover	  { text-decoration: underline; }
a:visited { color: #a5a; }

ul
{
list-style-type: none;
}

h1,h2,h3,h4,h5,h6
{
margin: 0;
}

p
{
text-align: justify;
margin: 0;
}


/* Universal */

.graphic
{
text-indent: -2000px;
overflow: hidden;
background-repeat: no-repeat;
background-position: top left;
}

input.text,textarea
{
border: 1px solid #bbb;
background-color: #f4f4f4;
padding: 1px 3px;
}

.pos
{
color: #3a3;
}

.neg
{
color: #c33;
}

.clickable
{
cursor: pointer;
}

img.loading
{
display: none;
}

a.external
{
padding-right: 26px;
background: url("../images/icons/external.gif") no-repeat right center;
}

a.external:visited
{
background: url("../images/icons/external_visited.gif") no-repeat right center;
}

/* Site Common */

div.tabs
{
border-bottom: 1px solid #b55;
padding-bottom: 2px;
}

div.tabs span
{
padding: 0 10px;
font-size: 0.8em;
letter-spacing -0.1em;
cursor: pointer;
color: #ccc;
font-weight: bold;
}

div.tabs span.active
{
border-bottom: 3px solid #666;
background-color: #fff;
border-color: #b55;
color: #b55;
}

div.tabs span:hover
{
color: #c66;
}


/* Layout */

div#left
{
float: left;
margin: 0 20px;
width: 300px;
}

div#right
{
margin: 20px 20px 20px 330px;
}

/* Top */


div#header h2 a
{
display: block;
width: 194px;
height: 56px;
text-indent: -2000px;
overflow: hidden;
background: url("../images/logos/logo.gif") no-repeat top left;
}

div#header h2
{
margin: 0;
}


div#header div#site_menu
{
text-align: center;
margin-bottom: 6px;
width: 312px;
margin: 0 0 10px -4px;
overflow: hidden;
}

#graphic_simple		{ background-image:url('../images/headers/simple.gif'); height: 40px; }
#graphic_usable		{ background-image:url('../images/headers/usable.gif'); height: 40px; }
#graphic_expandable	{ background-image:url('../images/headers/expandable.gif'); height: 40px; }

div#learn_more
{
width: 500px;
margin-top: 100px;
}

div#learn_more a
{
float: right;
margin-left: 10px;
margin-top: 10px;
}

div#site_menu embed
{
display: block;
margin: 0 auto;
}

div#header div#site_menu a
{
font-size: 0.9em;
font-family: Tahoma;
color: #555;
margin-right: 5px;
padding: 2px;
float: left;
}

div#header div#site_menu a.share 
{
height: 22px;
width: 22px;
padding: 0;
}

div#header div#site_menu a.share img
{
display: block;
}

div#header div#site_menu a:hover
{
text-decoration: none;
background-color: #fea;
}

div#header div#site_menu a.share:hover
{
background-color: transparent;
} 

div#header div#site_menu a span
{
color: #a33;
}

div#moving_panel 
{
  position: relative;
  clear: left;
}

div#panel
{
overflow: hidden;
padding: 5px;
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

div#content
{
min-width: 150px;
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
width: auto;
}

div.sub_content {
padding: 15px;
margin: 20px;
}

div#menu
{
padding:  0px 10px;
margin-bottom: 15px;
height: 26px;
overflow: hidden;
border: 1px solid #aaa;
-moz-border-radius: 30px;
-webkit-border-radius: 14px;
border-radius: 30px;
background: url("../images/bg/gray.gif") repeat-x top left;
}

div.loading ul
{
background: url("../images/icons/loading.gif") no-repeat left center;
}

div#menu ul 
{
margin: 0;
padding: 0 0 0 15px;
overflow: hidden;
}

div#menu ul li
{
padding: 0 6px;
float: left;
font-size: 12px;
font-weight: bold;
color: #669;
font-family: Tahoma, sans-serif;
line-height: 26px;
height: 26px;
cursor: pointer;
text-shadow: 0 1px 0 #fff;
}

div#menu ul li:hover
{
background-color: rgba(250,200,45,0.4);
}

div#menu ul li.active
{
color: #b00;
}

form#menu_search input 
{
float: left;
margin-top: 3px;
}

form#menu_search input.text
{
border: 1px solid #bbb;
padding: 1px 4px;
width: 60px;
color: #888;
}

form#menu_search input.submit
{
width: 19px;
height: 19px;
padding: 0;
margin: 3px 4px 0 4px;
border: none;
cursor: pointer;
background: url("../images/icons/search.gif") no-repeat center center;
}

div#menu img#menu_vocab
{
margin: 6px 0;
cursor: pointer;
}

div#menu img#menu_loading
{
vertical-align: -2px;
}

div#menu span#loading_text
{
margin: 4px;
font-size: 0.75em;
font-weight: bold;
color: #b33;
position: relative;
top: -2px;
}

div#copyright
{
text-align: center;
font-size: 0.7em;
color: #aaa;
}


/* The kanji list */


div#list
{
margin: 5px 0 2em 0;
}

ul#list
{
margin: 0;
padding: 10px;
overflow: hidden;
}

ul#list li
{
font-size: 2.7em;
font-family: "MS Gothic", "MS ゴシック", "Lucida Sans Unicode", sans-serif;
float: left;
text-align: center;
width: 70px;
height: 70px;
cursor: pointer;
color: #000;
background-color: #fff;
border: 2px solid #000;
margin: 2px;
line-height: 1.6em;
}

div#list ul#list li:hover,div#list ul#list li.active
{
border-color: #990000;
background-color: #fcc;
color: #990000;
}

ul#list li.clear
{
clear: left;
}

ul#list li.wide
{
width: 200px;
}

ul#list li.full
{
width: 50%;
clear: left;
text-align: left;
padding-left: 1em;
}

ul#list li.numeral
{
font-family: "Trebuchet MS", sans-serif;
color: #779;
text-align: left;
line-height: 110px;
overflow: hidden;
}

ul#list li.compound
{
font-size: 1.5em;
width: 180px;
height: 1.3em;
line-height: 1.3em;
border: 1px solid #707055;
background-color: #f0f0e8;
padding-left: 0.5em;
text-align: left;
}


ul#list li.strokes
{
font-family: "Trebuchet MS", sans-serif;
background-color: #fff;
color: #c70;
border-color: #fff;
overflow: hidden;
}

div#list ul#list li.strokes:hover
{
background-color: #fff;
color: #c70;
border-color: #fff;
cursor: default;
}

/* Vocab Buttons */

div#vocab_buttons
{
display: none;
margin: 12px 12px 0 12px;
}


/* Compound Info */

div#comp
{
display: none;
padding: 15px;
}

div#comp img#compound_vocab
{
margin-left: 8px;
float: right;
cursor: pointer;
}

div#comp div#compound_vocab_message
{
float: right;
margin-left: 8px;
font-size: 0.8em;
font-weight: bold;
margin-top: 0.4em;
}

div#comp h1,div#comp dt
{
cursor: default;
}

div#comp h1 span
{
cursor: pointer;
}

div#comp h1,div#comp h2
{
margin: 0;
}

div#comp h4
{
font-size: 0.8em;
line-height: 1em;
color: #b55;
border-bottom: 1px solid #b55;
overflow: hidden;
}

div#comp dd
{
margin: 0;
padding: 0 0 0.5em 2em;
}

div#comp dt
{
padding: 0.5em 0 0 0.5em;
}

div#comp dt.odd,div#comp dd.odd
{
background-color: #eee;
}

div.voting
{
color: #aaa;
font-size: 0.8em;
font-weight: bold;
}

div#comp dl div.voting
{
float: right;
}

div#comp dl div.voting img
{
vertical-align: -3px;
cursor: pointer;
float: right;
}

div#comp dl div.voting span
{
float: right;
margin: 0 0.5em;
text-align: right;
}


/* Translate */

form#compound_translation_form
{
margin-top: 0.3em;
}

div#compound_translation_message
{
font-size: 0.8em;
font-weight: bold;
font-color: #888;
}

form#compound_translation_form input
{
font-size: 1.05em;
font-family: Lucida Sans Unicode;
}

input#compound_translation_text
{
width: 50%;
border: 1px solid #888;
background: #eee;
padding: 0.1em 0.3em;
color: #666;
}



/* Add Example */

form#compound_addexample
{
margin-top: 60px;
}

form#compound_addexample h5
{
color: #557;
}

form#compound_addexample fieldset
{
text-align: left;
margin: 0;
padding: 10px;
background: url("../images/bg/blue.gif") repeat-x top left;
border: 1px solid #aac;
}

form#compound_addexample div.text
{
overflow: hidden;
height: 1.5em;
}

form#compound_addexample div.text input
{
width: 97%;
border: 1px solid #88a;
opacity: 0.6;
padding: 2px 4px;
}

div#compound_addexample_message
{
font-size: 0.8em;
font-weight: bold;
padding: 2px 4px;
}

form#compound_addexample label
{
float: left;
clear: left;
width: 6em;
color: #fff;
font-weight: bold;
font-size: 0.6em;
line-height: 2em;
}

form#compound_addexample label.double
{
line-height: 1em;
}

form#compound_addexample div.submit
{
text-align: right;
margin-top: 10px;
}

div#compound_voting
{
overflow: hidden;
height: 1.4em;
color: #aaa;
}

div#compound_voting div.box
{
display: inline;
border-bottom: 1px solid #fdd;
border-left: 1px solid #fdd;
border-right: 1px solid #fdd;
background-color: #fff6f6;
margin-bottom: 10px;
padding: 0 0.5em 2px 0.5em;
position: relative;
z-index: 100;
}

div#compound_voting h6
{
display: inline;
color: #daa;
}

div#compound_voting img
{
vertical-align: -4px;
}

div#compound_voting span#compound_vote_message
{
font-size: 0.8em;
font-weight: bold;
padding: 3px;
position: relative;
left: -160px;
}

div#compound_voting span#compound_vote_current
{
font-size: 0.8em;
font-weight: bold;
}

/* The kanji stage */


div#stage
{
overflow: hidden;
position: relative;
top: 0;
}

div#stage div#stage_message
{
text-align: center;
font-size: 0.8em;
font-weight: bold;
margin-top: 0.3em;
height: 1.4em;
}

div#stage_message div.daily
{
text-align: left;
color: #c83;
font-size: 1.25em;
font-family: Lucida Sans Unicode;
font-weight: normal;
letter-spacing: -0.06em;
padding-left: 0.3em;
}

div#stage table
{
width: 100%;
padding: 0 6px 6px 6px;
}

div#stage table th
{
text-align: left;
font-size: 0.7em;
color: #999;
width: 8em;
font-family: "Lucida Sans Unicode","Helvetica", "Arial", sans-serif;
font-weight: normal;
}

div#stage table td#stage_kanji_holder
{
text-align: center;
vertical-align: top;
}

div#stage table td span#stage_kanji
{
font-size: 5em;
height: 1.3em;
font-family: "MS Gothic", "MS ゴシック", "Lucida Sans Unicode", sans-serif;
cursor: default;
}

div#stage table td#stage_shiftjis
{
color: #bbb;
font-size: 0.8em;
text-transform: lowercase;
}

div#stage td#stage_meaning
{
padding: 3px 12px;
font-size: 0.9em;
}

div#stage ul#stage_compounds
{
margin: 6px 12px;
padding: 0;
}

div#stage ul#stage_compounds li
{
color: #333;
display: block;
float: left;
clear: left;
cursor: pointer;
padding: 0 2em 0.1em 0;
margin-bottom: 0.1em;
height: 1em;
overflow: hidden;
}

div#stage ul#stage_compounds li.hidden
{
display: none;
}

div#stage ul#stage_compounds li:hover
{
color: #800;
}

div#stage span#stage_more
{
display: none;
float: left;
clear: left;
margin: 0.5em 0 0 12px;
font-size: 0.8em;
color: #66c;
cursor: pointer;
}

div#stage span#stage_addcompound
{
cursor: pointer;
}


div#stage_voting
{
display: none;
float: right;
color: #aaa;
margin-top: 1em;
margin-bottom: 0.5em;
padding: 0 8px 8px 8px;
border: 1px solid #eee;
}

div#stage_voting h6
{
color: #ccc;
width: 40px;
margin: -9px 0 0 0;
cursor: help;
}


div#stage_voting div
{
font-size: 0.7em;
}

div#stage_voting img
{
vertical-align: text-bottom;
}

span#stage_vote_no
{
margin-left: 10px;
}

span#stage_vote_no,span#stage_vote_yes
{
cursor: pointer;
}

span#stage_vote_current
{
font-size: 1.2em;
font-weight: bold;
}

div#stage table .clickable
{
color: #b66;
}

span.okuri
{
color: #daa;
}

span.help,span.readingHelp
{
cursor: help;
}

span.help
{
border-bottom: 1px dotted #fcc;
}

/* The Contribute Stage */


div#contribute
{
display: none;
margin: 10px;
padding: 5px;
position: relative;
}

div#contribute div#contribute_message
{
text-align: center;
font-size: 0.8em;
font-weight: bold;
margin-bottom: 0.2em;
line-height: 1.6em;
}

div#contribute form
{
padding: 0.3em;
margin: 0;
}

div#contribute form p
{
font-size: 0.8em;
color: #aaa;
margin-bottom: 1em;
}

div#contribute a
{
color: #aae;
}

div#contribute form div
{
margin: 2px 0;
}

div#contribute form label
{
float: left;
font-size: 0.7em;
color: #aaa;
width: 80px;
font-family: "Lucida Sans Unicode","Helvetica", "Arial", sans-serif;
font-weight: normal;
}

div#contribute form div#contribute_larger
{
font-size: 4.5em;
margin: 0 0 10px 80px;
border: 2px dotted #eee;
width: 80px;
height: 80px;
text-align: center;
color: #900;
}

div#contribute form input.text,div#contribute form textarea
{
width: 150px;
}

div#contribute form textarea
{
font-family: "Lucida Sans Unicode","Helvetica", "Arial", sans-serif;
font-size: 0.7em;
}

div#contribute form input.submit
{
margin: 10px 0 0 80px;
}

img#contribute_loading,img#contribute_compound_loading
{
vertical-align: text-bottom;
margin-left: 5px;
}

form#contribute_compound_form
{
display: none;
}


/* The Vocab List Button */

img#stage_vocab
{
display: none;
float: right;
cursor: pointer;
}

/* The Roll Button */

img#stage_roll
{
float: right;
cursor: pointer;
}

img#stage_pin
{
float: right;
cursor: pointer;
}

/* Tabs */

ul#stage_tabs
{
margin: 0 30px;
float: left;
clear: left;
padding: 0;
overflow: hidden;
}

ul#stage_tabs li
{
float: left;
font-size: 0.8em;
color: #aaa;
height: 22px;
text-indent: -2000px;
overflow: hidden;
background-position: bottom center;
background-repeat: no-repeat;
cursor: pointer;
}

li#tabs_info_on		{ width: 58px; background-image: url("../images/tabs/info_on.gif"); }
li#tabs_info_off	{ width: 58px; background-image: url("../images/tabs/info_off.gif"); }

li#tabs_contribute_on 	{ width: 89px; background-image: url("../images/tabs/contribute_on.gif"); }
li#tabs_contribute_off	{ width: 89px; background-image: url("../images/tabs/contribute_off.gif"); }

li#tabs_chat_on		{ width: 65px; background-image: url("../images/tabs/chat_on.gif"); }
li#tabs_chat_off	{ width: 65px; background-image: url("../images/tabs/chat_off.gif"); }



/* Chat */


div#chat
{
display: none;
}

form#chat_login
{
margin: auto;
padding: 1em;
font-size: 0.8em;
width: 216px;
height: 140px;
padding-top: 60px;
}

input#chat_usersubmit
{
float: right;
border: none;
width: 44px;
height: 55px;
cursor: pointer;
background: url("../images/bg/login_submit.gif") no-repeat center center;
margin-left: -10px;
display: inline-block;
position: relative;
}

div#chat_userdiv
{
width: 176px;
height: 59px;
background: url("../images/bg/login.gif") no-repeat top left;
}

input#chat_username
{
position: relative;
top: 1.6em;
left: 0.6em;
width: 120px;
padding: 0px 4px;
border: 1px solid #aaa;
color: #aaa;
background-color: #fff;
font-size: 1.2em;
opacity: 0.8;
font-weight: bold;
font-family: Trebuchet MS;
}

div#chat_main
{
display: none;
margin: 35px 0;
}

div#chat_header
{
font-size: 0.7em;
color: #aaa;
margin-bottom: 0.2em;
}

span#chat_namespan
{
color: #888;
font-weight: bold;
}

span#chat_logout
{
color: #88f;
border-bottom: 1px dotted #88f;
font-size: 0.8em;
cursor: pointer;
margin-left: 0.5em;
}

div#chat_users
{
font-size: 0.7em;
color: #aaa;
float: right;
}

span#chat_userspan
{
color: #888;
font-weight: bold;
margin-right: 0.3em;
}

ul#chat_messages
{
overflow: auto;
margin: 0;
padding: 0;
height: 170px;
font-size: 0.75em;
border: 1px solid #aaa;
padding: 2px;
}

ul#chat_messages li
{
clear: left;
overflow: hidden;
background: url("../images/bullets/chat.png") no-repeat 1px 3px;
padding-left: 18px;
margin-bottom: 1px;
}

ul#chat_messages li.inactive span.name,ul#chat_messages li.inactive span.text
{
color: #ccc;
}

div#chat ul#chat_messages li#chat_messages_login
{
color: #ccc;
font-family: "Lucida Sans Unicode";
font-size: 0.75em;
border-bottom: 1px dotted #eee;
margin-bottom: 1em;
background: none;
padding-left: 2px;
}

ul#chat_messages li span.name
{
float: left;
font-size: 0.9em;
color: #666;
width: 60px;
overflow: hidden;
}

ul#chat_messages li span.text
{
display: block;
margin: 0 0 0 65px;
padding: 0 4px;
}

form#chat_form
{
margin: 0.2em 0;
}

form#chat_form input
{
float: left;
}

input#chat_message
{
height: 20px;
width: 206px;
padding: 2px 4px;
color: #955;
background-color: #f8f3f3;
border: 1px solid #caa;
font-size: 0.7em;
font-family: Trebuchet MS;
}

input#chat_submit
{
padding: 0;
margin-left: 5px;
width: 48px;
height: 26px;
background: url("../images/buttons/send_off.gif") no-repeat center center;
border: none;
cursor: pointer;
}

input#chat_submit:hover
{
background-image: url("../images/buttons/send_on.gif");
}

div#chat_usererror
{
color: #f88;
font-size: 0.85em;
font-weight: bold;
}


/* Tool Tips */

.tip-wrap {
display: none;
}

.tip
{
text-align: justify;
color: #eee;
border: 1px solid #000;
font-size: 0.7em;
font-weight: bold;
font-family: "Tahoma","Helvetica", "Arial", sans-serif;
background: #333;
opacity: 0.85;
padding: 1em;
width: 20em;
z-index: 999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.tip .click
{
margin-top: 1em;
font-style: italic;
font-size: 0.9em;
}

/* Other Pages */

hr
{
height: 2px;
color: #ccc;
background-color: #ccc;
border: none;
margin: 50px 0;
clear: both;
}

div#topics hr
{
margin: 5px 0;
}

div#content p
{
max-width: 500px;
margin-bottom: 0.4em;
}

h1#graphic_logo
{
position: relative;
width: auto;
height: 402px;
}

h1#graphic_logo img
{
  display: block;
}

h2
{
color: #555;
font-family: "Tahoma";
font-size: 1.2em;
margin: 3em 0 0.3em 0;
}

h3
{
font-family: "Lucida Sans Unicode";
letter-spacing: -0.1em;
font-weight: normal;
font-size: 1.0em;
margin: 1em 0 0 15px;
color: #b77;
border-bottom: 1px dotted #b77;
width: 495px;
}


div#top_overlay
{
margin: -130px 20px 20px 20px;
position: relative;
}

#share {
  padding-left: 12px;
  margin-bottom: 2px;
}

#share a {
  margin-right: 5px;
}

#no_results {
  margin: 20px;
}

.seo h2 {
}

.seo ul {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.seo ul li {
  font-size: 10px;
  float: left;
}

.seo h3 {
  float: left;
  border: none;
  font-size: 10px;
  margin: 0;
  width: auto;
}

.seo ul.radicals {
  float: left;
  margin: 0 10px 0 5px;
}

ul.levels li,
ul.readings li {
  margin-right: 5px;
}

div#topics
{
padding: 0.8em;
width: 10em;
border: 1px dotted #aaa;
float: right;
margin: 0 0 1em 1em;
}


div#topics ul
{
margin: 0;
padding: 0;
}

div#topics ul li
{
}

div#topics ul li a
{
display: block;
padding-left: 10px;
background: url("../images/bullets/bullet.gif") no-repeat 0px 6px;
}
div#topics ul li a:hover
{
background-image: url("../images/bullets/bullet_on.gif");
}

div#topics h4
{
color: #aaa;
font-family: Times New Roman;
text-transform: uppercase;
font-size: 0.8em;
margin-bottom: 0.3em;
}

div#topics li
{
font-size: 0.8em;
}

dl#faq
{
max-width: 40em;
font-size: 0.9em;
}

dl#faq dt
{
color: #555;
height: 24px;
font-family: "Tahoma";
font-weight: bold;
padding-left: 28px;
line-height: 2em;
margin-bottom: 0.5em;
background: url("../images/bullets/q.gif") no-repeat top left;
}

dl#faq dd
{
padding-left: 28px;
margin: 0 0 2em 0;
text-align: justify;
overflow: hidden;
}

div.transfer
{
width: 260px;
float: left;
margin-left: 10px;
}

div.transfer input
{
vertical-align: top;
height: 30px;
width: 86px;
text-align: left;
margin-right: 0.2em;
}

/* The about page */

div.area
{
width: 500px;
overflow: hidden;
}

span.hint
{
color: #b77;
font-weight: bold;
}

sup
{
font-weight: normal;
}


img.screenshot
{
float: right;
margin-left: 20px;
}

img.screenshot2
{
display: block;
border: 1px solid #ccc;
vertical-align: text-top;
}

img#lines
{
vertical-align: top;
}

table.info,ol.info
{
width: 500px;
font-size: 0.9em;
color: #666;
margin: 1em;
}

table.info td
{
padding: 0.3em 1em;
text-align: justify;
vertical-align: top;
}

table.info tr
{
background-color: #f6f6f6;
}

table.info tr.odd
{
background-color: #eaeaf6;
}


/* The Advertising Divs */

div#adsense_footer,div#adsense_left,div#ebay
{
overflow: hidden;
margin-top: 10px;
}

div#ebay
{
height: 80px;
}

div#ebay div.item
{
float: left;
width: 205px;
}

div#ebay div.item a.img
{
float: left;
margin-right: 10px;
}

div#ebay div.item img
{
width: 80px;
height: 80px;
}

div#ebay div.item a.title
{
display: block;
font-size: 0.8em;
height: 40px;
overflow: hidden;
}

div#ebay div.item div.price
{
font-size: 0.8em;
font-weight: bold;
}

div#ebay div.item div.time
{
font-size: 0.8em;
}

div#ebay div.item div.ending
{
color: #f00;
}