﻿* { 
    margin: 0px; border: 0px; padding: 0px; outline: 0px;
    vertical-align: baseline;
}
html { background-color: #fff; font-size: 100%;  }
body { 
    color: rgb(48, 46, 47); font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 0.85em; 
}
ul { list-style: none; }
select { font-size: 1.0em; }
option { padding: 0 0 0 10px;  }

.wrap { width: 1024px; margin-left: auto; margin-right: auto; }
.left { float: left; }
.right { float: right; }
.center { margin: 0 auto 0 auto; }
.clearer { clear: both; }
.val-msg { color: red; }
.hidden { display: none !important; }
.label { font-weight: bold; color: #666; }

input[type="button"], input[type="submit"] { 
    width: 90px; height: 30px; line-height: 30px; padding: 0 10px 0 10px; 
    text-decoration: none; text-align: center;
    background-color: #eee; border: 1px solid #ccc; color: #666;
}
input[type="submit"]:hover, input[type="button"]:hover {
     cursor: pointer; background-color: #ddd; border: 1px solid #ccc; color: #000; 
}


/* Kanji Detail 
----------------------------------------------------------*/

#kanji-detail-window { display: none; width: 500px; padding: 0px; border: 1px solid #566F4F; }
#kanji-detail-top {  }
#kanji { 
    float: left; height: 170px; line-height: 170px; width: 160px; text-align: center; 
    font-size: 90px; font-family: Arial, sans-serif; color: #fff; 
    background-color: #566F4F; border-bottom: 1px solid #566F4F;
}
#kanji-info { float: left; height: 170px; width: 340px; background-color: #CFEDC7; border-bottom: 1px solid #adcba5; }
#kanji-info table { width: 310px; margin: 10px 0 0 15px;  }
#kanji-info td { font-size: 12px; padding-bottom: 5px; line-height: 15px; }
#kanji-info .label { font-weight: bold; color: #555; width: 80px; }
#kanji-detail-bottom { padding: 15px; min-height: 150px; }
#examples-header { height: 15px; line-height: 15px; font-size: 13px; font-weight: bold; color: #555; }
#examples { font-size: 12px; }
#examples td { padding-bottom: 5px; line-height: 20px; }
#examples .kana { padding-right: 15px; white-space: nowrap; }
#kanji-detail-window input { float: right; margin: 0 15px 15px 0; }


/* Modal 
----------------------------------------------------------*/

#overlay  {
    position: fixed; left: 0px; top: 0px; width:100%; height:100%; z-index: 1000; 
    background-color: #8C8C8E; display: none;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:.5;
}
div.modal-window  {
    display: none; position: absolute; left: 80px; top: 50px; z-index:1001; background-color: #fff;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}
div.modal-window h1 { 
    height: 40px; line-height: 40px; padding: 0 0 0 15px; margin: 0 !important; 
    background-color: #F5F6F7; color: #666 !important; font-size: 14px !important; border-bottom: 1px solid #E5E5E5; 
    -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px; border-top-right-radius: 5px; 
}
div.modal-window input, select { margin-bottom: 20px; border: 1px solid #ddd; } 
div.modal-window select { width: 200px; padding: 5px; }
div.modal-window input[type="checkbox"] { margin: 0 5px 0 0; vertical-align: middle; }
div.modal-window input[type="button"], div.modal-window input[type="submit"] { 
    display: inline-block; float: right; margin: 0 15px 15px 0; 
}