/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 
body{
    background-color: #eee;line-height: 1.166;	
    margin: 0px;padding: 0px;
    font-family: "Arial Unicode MS", Vernada, Arial, sans-serif;font-size: 14px;
    color: #000000;
    text-align:center;
}

a{color: #006699;text-decoration: none;}
a:link{	color: #006699;text-decoration: none;}
a:visited{color: #006699;text-decoration: none;}
a:hover{color: #006699;text-decoration: underline;}

h1, h2, h3, h4, h5{
 color: #A20;
 margin: 0px;
 padding: 0px;
}

h1{ font-size: 140%; }
h2{ font-size: 115%; color:#036;margin-top: 5px;}
h2 em{color:midnightblue;text-decoration:underline}
h3{ font-size: 110%; }
h4{ font-size: 105%; }
h5{ font-size: 100%; }

ul {list-style:square url("images/li.png");}
li {font-size:95%; margin-top: 8px}
.keywords {
    color:green; 
}
/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#page-wrapper{
    border-top:none;
    width:1000px;
    margin-left:auto;margin-right:auto;
    padding:0px;
}
#header{
    width: 1000px;
    height: 70px;
}

#logo {width: 240px;height: 56px; float:left; margin:10px 0px 5px 20px; }
#logo a, #logo a:link, #logo a:visited {display:block; }
#logo img { border: 0;opacity: 1;}
#logo a:hover img {opacity: 0.9;}
#social_links{
    text-align: right;
    width: 700px;
    padding-top:20px;
    float: right;
}


#top-nav {width: 1000px; float:left;}
#top-nav a{
    display: block;float:left;
    background: white; background: #f6f6f6;  color:#444; text-decoration: none;
    background: linear-gradient(to bottom, #eee 0%,#fff 100%); /* W3C */
    font-weight: bold; font-size: 110%;
    padding: 10px 15px;  margin:0px;  
    -moz-border-radius-bottom-right: 6px;
    border-bottom-right-radius: 6px;   
    -moz-border-radius-bottom-left: 6px;
    box-shadow: 0 1px 0px rgba(0,0,0,0.4);
    border-bottom-left-radius: 6px;   
    border-right: 1px solid #b6b6b6;
    
    position: relative;
}
#top-nav a:first-child{
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;    
}

#top-nav a:hover,#top-nav a.selected  {
    color: white;background: #A20;
    background: linear-gradient(to bottom, rgba(170,0,0,0.8) 0%,rgba(170,0,0,1) 100%); /* W3C */
}

#top-nav a span{
    display: block;position: absolute;
    background: #b92e2e;color:wheat;font-size: 10px;
    border-radius:5px;padding: 2px 4px;
    top:-5px;right: 0;
}

#main-content {
    clear:both;
    width: 1000px;
    background: rgba(255,255,255,0.9);
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;    
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-align: left;
}

#scroll-top{
    position:fixed; right:30px; bottom:-25px;
    padding: 20px; width: 50px; height: 50px;
    background: rgba(255,255,255,0.7); color:black;text-decoration: none;
    border:1px solid rgba(255,255,255,0.8);
    -webkit-border-radius: 13px;-moz-border-radius: 13px; border-radius: 10px;
    -webkit-box-shadow: -1px -2px 7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    -1px -2px 7px rgba(0, 0, 0, 0.5);
    box-shadow:         -1px -2px 7px rgba(0, 0, 0, 0.5);
    display:none;
}
#scroll-top:hover{background: white;color:black}

.main-column {width: 460px;padding:10px 20px;float:left;}
.left_column{width: 640px;float:left;padding-bottom: 10px;text-align:center;}
.right_column{width: 336px;float:right;margin-right: 20px;padding-top:25px}
    




/*Span for japanese to romaji*/
.hira {color:#094}
.kanj {color:#A20;cursor:default}
.kata {color:#06f}
.tooltip{color: black;
    background: white;
    padding:20px;
    font-size: 24px;
    max-width: 500px;
    -moz-box-shadow: 0px 0px 8px #aaa;
    -webkit-box-shadow: 0px 0px 8px #aaa;
    box-shadow: 0px 0px 8px #aaa;    
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #eee;
    background: #fff;
    color:#333;   
}
a.kanj {color:#A20;cursor:pointer;}

.furi{font-size:0.5em;color:#A20;margin: 2px;}


.convert_button {
    padding: 6px 20px;
    font-size:18px; font-weight: bold; text-align: center; cursor:pointer;
    background: #00a5f0;color: #fff;
    border-radius: 5px; border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, .2);
    height: 37px;
}
.convert_button:hover {
    background-color: #24bbff;
    -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
}


.search_box,textarea {
    margin: 0px 5px;
    padding:5px;font-size:18px;
    border: 1px solid rgba(0, 0, 0, .4);
    box-shadow: inset 0px 0px 5px 0px #aaa;
    outline: none;
}

.search_box:focus,textarea:focus {
   box-shadow: 0 0 5px rgba(81, 203, 238, 1);
   border: 1px solid rgba(81, 203, 238, 1);
}


#footer{
    width: 960px;
    padding:5px 10px 50px 10px;
    font-size: 12px; color:#333; text-align: center;
}

#bottom-links{
    text-align: center;
    margin:10px;
    padding:20px;
}
#bottom-links a{
    margin:5px 10px;
    color:cadetblue;
}



/* Fre cloud*/
a.freq_1 {font-size: 135%;color:#03a}
a.freq_2 {font-size: 125%;color:#14a}
a.freq_3 {font-size: 120%;color:#25a}
a.freq_3 {font-size: 115%;color:#36a}
a.freq_4 {font-size: 110%;color:#47a}
a.freq_5 {font-size: 105%;color:#58a}
a.freq_6 {font-size: 100%;color:#69a}
a.freq_7 {font-size: 95%;color:#7aa}
a.freq_8 {font-size: 90%;;color:#8af}

a.button-mini{
    border:1px solid gray;font-size: 90%;
    padding:2px;
    background: #fafafa;
    -moz-border-radius: 3px; border-radius: 3px;   
    -moz-box-shadow: 1px 1px 1px #888;-webkit-box-shadow: 12px 2px 2px #888;box-shadow:1px 1px 1px #888;    
    text-decoration: none;color: black;
}
a.button-mini img{
    border:0;margin-top: 2px;
    vertical-align:middle;
}

.j_listen{
    display: inline-block;cursor:pointer;
    width: 21px;height: 21px;
    background: url("images/buttons.png") no-repeat;
    opacity: 0.8;
}
.j_listen:hover{
    box-shadow: 0 0 5px #00a5f0;
    -moz-border-radius: 3px; border-radius: 3px;   
     opacity: 0.8;
}
.play{
    box-shadow: 0 0 5px #00a5f0;
    -moz-border-radius: 3px; border-radius: 3px;   
     opacity: 1;
}


/*---Dictionary style start---*/
ol#toc {
list-style: none; margin: 20px; padding: 0px; 
border-bottom: 7px solid #cef; height:26px;
}

ol#toc li {
    float: left;margin: 0px;
}
ol#toc li a {
    background: #ddd; padding: 6px 40px; color: #666; font-size: 130%;
    -moz-border-radius-topleft: 6px;border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;border-top-right-radius: 6px;
    margin-right: 1px;
    text-decoration: none;
    font-weight: bold;
}
ol#toc li a:hover {
    background:#cceeff; 
    color:#003671;
}    
ol#toc li a.active {
    background-color: #cef;
    color:#003671;font-weight: bold;
    border-bottom: 1px solid #cceeff;
}

.search_result{
    margin:10px 30px;
    font-size: 1.2em;
}
.examples{
    background:#eee;margin-top:5px;
    border: 1px #eee solid;
    padding: 10px;font-size: 1.1em;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border-left: #ddd 10px solid;
}
rt {color:#666; font-size:0.9em;}
.examples .eg_eng {margin-top:5px;color:#333}
.examples:hover {background:#ffe;border-color:#fa3} 
.highlight { background-color:#ff9}
.more {margin:4px;text-align: center;height:40px;}
.more a{
    display: block; margin: 10px auto; 
    width: 468px;padding: 10px;
    background: rgba(00,200,255,0.4);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset;
    text-shadow: 0 -1px rgba(0, 0, 0, .2);
    color:white;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.more a:hover{
    text-decoration: none;
}

.search_items {
    background:#fefefe;margin:5px auto;
    border: 1px #bbb solid;
    box-shadow: 0px 0px 8px #ccc; 
    padding:5px 5px 10px 5px;
}
.search_items:hover{
    border-color:#F27527;background:#ffe;
    box-shadow: 0px 0px 8px #faa; 
   }

.word_info{
    padding:5px;background:#fff;
    -moz-border-radius: 6px;border-radius: 6px;
    font-size: 120%;color:#666666;
}
.word_info p {float:right;font-size: 80%;margin-top:-5px;}
.word_info p a{color:#666}
.word_info p a:before{content: "‣ ";color:orange;}

.word_kana,.word_kanj {color:#F27527;}
.word_kana a {color:#06b;}
.word_kanj a {color:#600;}
.word_kana ruby{margin-left:5px;}
.word_kana rt{color:#060;font-size: 0.8em;}
.pos a{color:#666;font-style:italic;font-weight:normal}
.word_meanings ol {margin: 0px;padding-bottom: 5px;}
.word_meanings ol li {color:#88f;font-weight: bold; margin: 3px 0px 10px 0px;}
.word_meanings p {color:#333;font-weight: normal;margin:10px 0px 3px 0px;font-size: 105%}
.word_meanings p:before{content: "• ";margin-left: -12px;color: orange}
.word_meanings p span:first-child {color:#368;}
.gloss {color:#111;font-weight:normal;font-size: 105%;font-weight: bold}
.related {font-size: 90%; }
.related a{font-weight: normal; }
.related_words {font-size:105%;text-align:justify;width:85%;margin:20px auto 10px auto;}
#dict_notice{
       background: #aaa;
       font-size: 120%;margin:20px 30px;padding:10px;text-align: left;
       box-shadow: 0 0 5px rgba(255,0,0,0.4);
       background: rgba(255,255,200,0.4);
}

#dict_notice a {font-size: 120%; display: inline-block;margin: 0 4px;color:#0af;border-bottom: 3px solid gray;}
#dict_notice a:hover {text-decoration: none; color:#0bf;border-color: black;}
/*-Dictionary style: end-*/


/*-Kanji Style: start-*/
.no-kanji {margin:40px;font-size: 30px;}
.sub_menu {margin: 10px 25px 30px 25px;}
.sub_menu a, .sub_menu span {
    padding:0px 10px;margin: 1px;
    border-bottom: 3px solid #aaa;
    color: #666; font-size: 110%; font-weight: bold;text-decoration: none;
}
.sub_menu span,.sub_menu a:hover {
    color: #333; border-bottom-color:#68f;
}

.kanji_result { width: 600px;margin: auto;}
h1.result_header {margin: 10px 0px 20px 0px}
h1.result_header em {color:#25a}

.kanji_detail {
    background:#f3f3f3; margin-top:5px; border: 1px #eee solid;
    padding: 0px;font-size: 1.1em;
    box-shadow: 0px 0px 8px #aaa;    
    text-align: left;
}
.kanji_left{width: 100px;float: left;margin: 5px 0px 5px 5px;}
.kanji_left p {font-size: 90%;margin: 2px;color:gray}
.kanji_left p a{font-size: 110%;font-weight: bold}
.kanji_right {float:right;width: 480px; margin: 5px 5px 5px 0px;}
a.kanji_text {
    width: 100px;height: 100px; text-align: center;float:left;overflow:hidden;
    font-size: 60px;
    -moz-border-radius: 5px;border-radius: 5px;
    background: #eee;color:#555;text-decoration: none;margin: 0px;margin-bottom: 5px;
}
a.kanji_text:hover{    -moz-box-shadow: 0px 0px 8px #f88;
    -webkit-box-shadow: 0px 0px 8px #f88;
    box-shadow: 0px 0px 8px #f88;    
    font-family: Vernada, Arial, sans-serif;
}
a.kanji_text p {font-size:14px;color: green;margin: 2px;display: block}

.kanji_detail h3{color:#444;margin:0 0 4px 0;font-size: 90%;border-bottom: 1px solid #ddd}
.kanji_detail .left {width: 230px;float:left;color:#222;clear: left}
.kanji_detail .right {width: 230px;float:right;color:#222;clear: right}
.kanji_detail:hover{border:1px solid #F72;background:#fefefe}

.kanji_info,.kanji_meaning,.kanji_examples, .mnemonic  {
    margin: 0 0 15px 0; padding:2px;color:#666;
    -moz-border-radius: 5px;border-radius: 5px;clear: both;
}
.mnemonic {background: #fff}
.kanji_info {margin-top: 1px;font-size: 90%;}
.kanji_info span,.kanji_info a {
    color:#222;text-decoration: none;
    display:inline-block;
    background: #f8f8f8;padding:3px;margin:2px 0px;
    border:1px solid #eee;
    border-radius: 4px;
}
.kanji_info a {background: #fefefe; border-color: #ccf}
.kanji_info a:hover {background: #fff; border-color: #f00;}
.kanji_info b {color: darkblue;font-size: 110%}


.kanji_meaning{background: white;padding: 5px;}
.kanji_meaning div {clear: both}
.kanji_meaning p {margin: 5px 0;color:#008; font-weight: bold;font-size: 110%}
.kanji_meaning div.on_yomi,.kanji_meaning div.kun_yomi {   
        width: 185px;float:left;padding-left: 40px;
        margin-top: 10px;color:#F72;font-size: 120%;
}

.on_yomi {background:url("images/onyomi.png") no-repeat 0px 2px;}
.kun_yomi {background:url("images/kunyomi.png") no-repeat 0px 2px;margin-left: 10px;}
.kun_yomi span{color:green;margin: 0px 5px;display:inline-block;}
.on_yomi span{color:#910;margin: 0px 5px;display:inline-block}

.kanji_examples {margin-top: 10px} 
.kanji_examples span {font-style:italic;color:#383}

.kanji_strokes_order svg{margin:9px 0px 9px 9px;}

/*kanji of the day*/
#kanji_otd {text-align: center;}
#kanji_otd h2 {margin: 20px;font-size: 120%}
#kanji_otd p{font-weight: bold;font-size: 120%;color: darkblue  }
#kanji_otd a{
    display:block;
    font-size: 90px;font-family: serif;    
    background: #feffee;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.2) 100%); 
    color:#333;text-decoration: none;font-weight: bold;
    text-shadow: 0 1px 0 white, 0 -1px 0 black;
    height: 90px;width: 90px;margin: auto;
    border-radius: 20px;padding: 20px;
    box-shadow: 4px 4px 10px #666;
}
#kanji_otd a:hover{    
    background: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.1) 100%); 
}
#kanji_otd div
{
    text-align: left;
    margin-left: 70px;
}
#kanji_otd div.col_33 {
    float:left; 
    margin-left: 30px;
}
#kanji_otd div span{color:green;font-weight: bold}
/*Kanji Brief*/
.kanji_brief a {
    float:left;width: 52px;height: 52px;text-align: center;
    margin: 3px;padding: 4px;overflow:hidden;
    -moz-border-radius: 6px;border-radius: 6px; 
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;    
    font-size: 30px;color:#333;
    text-decoration: none;
    background: #ddd;color:#555;
    position:relative;overflow: visible;
}
.kanji_brief a:hover{background:#ffe}
.kanji_brief a p{font-size: 10px;margin:1px;color: green}
a.joujou {background: #fff;color:black}

#kanji_form,#dict_form {width: 580px;margin: 25px auto;}
#w {width: 450px;height: 25px;float: left;margin: 0;}
#kanji_form .convert_button, #dict_form .convert_button{width: 110px;float: right;margin: 0}

#kanji_form  p{display: block;clear: both;margin: 0;}
#k_options {
    border-top:1px solid #aaa;text-align: left;clear: both;
    background: #eee;
    text-align: center;
    margin-top: -10px;
    height: 0px;overflow: hidden;
}
#k_show_options{
   margin-top: 25px;
}
a#show_options,a#hide_options{
    background: white;
    margin: -10px auto 0 auto;
    width: 120px;display: inline-block;
    border:1px solid #eee;color:gray;
}
a#show_options:hover,a#hide_options:hover{
    background: #fefefe;text-decoration: none;color:black;
}
#k_options div{clear: both;margin:10px;text-align: left;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
#k_options h2 {color:#888;font-weight: bold;margin:5px 0px 3px 0px}
#k_options div a {
    background: #fefefe; width: auto;
    color:#666;
    padding: 4px 10px;
    border-radius: 4px;
    margin: -1px 4px 6px 4px;
    box-shadow: 2px 2px #ccc;
    display: block;float:left;        
}
#k_options div a:hover {
    margin: 0px 4px 5px 4px;
    box-shadow: 1px 1px #ccc;
    text-decoration: none;background: #ffe;color:green;
}
#k_options #radicals a {
    padding: 2px;margin:1px;
    border-radius: 2px;
}

/*--tooltips--*/

.k_tooltip { /* hide and position tooltip */
    position: absolute;bottom: 80px;left:-20px;
    padding:20px;width: 250px;
    background: #FFFFFF;
    background: linear-gradient(to bottom,#f8f8f8 0%,#fff 100%);
    -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
    border: orange solid 3px;
    box-shadow: 1px -1px 2px rgba(0,0,0,0.4);
    text-align: left;font-size:14px;font-weight: bold;color:#888;
    z-index: 2;
    display: none;
}
.k_tooltip:after {
content: '';position: absolute;
border-style: solid;border-width: 15px 15px 0;border-color: #FFFFFF transparent;
display: block;width: 0;z-index: 1;bottom: -15px;
left: 30px;
}
.k_tooltip:before {
content: ''; position: absolute;
border-style: solid;border-width: 17px 17px 0;border-color: orange transparent;
display: block; width: 0; z-index: 0; bottom: -20px;
left: 28px;
}

.k_tooltip b{color:darkblue;font-size:18px;}
.k_tooltip em{color:green;font-size:18px;font-style:normal}

.kanji_brief a:hover .k_tooltip { /* display tooltip on hover */
    display: block;
}

/*--stylesheet for multiple kanji radical selection--*/
    .kanji_mr_left {margin:0px;width: 590px;float:left;}
    .kanji_mr_right {margin:0px;margin-left: 5px;width: 355px;float:right;}
    #kanji_mr_select a,#kanji_mr_select div {
        display: block; float: left;
        width: 20px;height: 20px;padding: 2px;margin: 2px;
        font-family: Vernada, Arial, sans-serif; font-size: 18px;
        background: white;
        -moz-border-radius: 3px;border-radius: 3px; 
        -moz-box-shadow: 0px 0px 2px #888;
        -webkit-box-shadow: 0px 0px 2px #888;box-shadow: 0px 0px 2px #888;    
        font-weight: normal;
    }
    #kanji_mr_select a{
        background: #ddd;color:#555;text-decoration: none;
    }
    #kanji_mr_select a:hover{
        background: #fff;color:#a00;
    }
    
    #kanji_mr_select a.radical_selected{background:#ff6;color:#a00;}
    #kanji_mr_select a.radical_disabled{background:#aaa;color:#999;cursor:default}
    
    a.variant{background:#fdd;}
    
    .kanji_mr_result{background:#eee;height: 300px;}
    #kanji_mr_ads,#kanji_mr_result,#kanji_mr_intro{height: 300px;}
    #kanji_mr_intro div {padding: 60px 15px;}
    #kanji_mr_intro ul {text-align: left;margin:20px 10px;}
    
    #kanji_mr_result, #kanji_mr_ads {display: none}
    #kanji_mr_result a  {
        float:left;width: 55px;height: 55px;text-align: center;
        margin: 3px;padding: 4px;overflow:hidden;
        -moz-border-radius: 6px;border-radius: 6px; 
        -moz-box-shadow: 0px 0px 10px #888;
        -webkit-box-shadow: 0px 0px 10px #888;
        box-shadow: 0px 0px 10px #888;    
        font-size: 30px;color:#333;
        text-decoration: none;
        background: #ddd;color:#555;
        font-family: Vernada, Arial, sans-serif;
    }
    #kanji_mr_result a:hover{    -moz-box-shadow: 0px 0px 8px #f88;
        -webkit-box-shadow: 0px 0px 8px #f88;
        box-shadow: 0px 0px 8px #f88;    
    }
    #kanji_mr_result a p {font-size: 10px;margin:1px;color: green}
    #kanji_mr_result a.joujou {background: #fff;color:black}
    #kanji_mr_status{font-size: 105%;height: 25px;color:#666;font-weight: bold;}
    
    #kanji_mr_nav{height:40px;}
    #kanji_mr_nav a{
        display: inline-block;width: 30px;height: 23px;
        font-size: 130%;color:#353;padding: 2px;
        font-weight: bold;text-decoration: none;
        -moz-border-radius: 6px;border-radius: 6px; 
        border: 1px solid #eee;background: #f6f6f6;
    }
    #kanji_mr_nav a:hover{color:#00a;border: 1px solid #ccc;background: #eee;}
    #kanji_mr_nav span{
        display: inline-block; width: 100px;font-size: 150%;color:#333;padding: 3px;vertical-align: top;font-weight: bold;
    }
    #kanji_mr_nav a.disabled{color:#ccc;cursor: default;border-color: #fff;background: #fff;}
    #kanji_mr_nav a.disabled:hover{color:#ccc;border-color: #fff;background: #fff;}
/*-Kanji Style end-*/


/*          
---------some small markup------------
Tool tips
*/
.tooltip{font-size: 40px;}
div.right {float:right}
div.left {float:left}
div.hide{display: none}
div.small {font-size: 90%;}
div.smaller {font-size: 80%;}
div.large {font-size: 110%;}
div.larger {font-size: 120%;}
div.clear{clear:both}


@media screen
{
      p.test {font-family:verdana,sans-serif;font-size:14px;}
}