body{margin: 0;padding: 0;color: #333;position: relative;padding-bottom: 80px;}
a{text-decoration: none;color: #333;}
.nav{line-height: 66px;background-color: #ffa657;box-shadow: 0 5px 4px #ccc;padding-left: 20px;}
.nav a{color: #000;font-size: 20px;}
.nav a span{font-style: italic;margin-left: 6px;font-size: 12px;color: #000;text-shadow: 2px 2px 2px #fff;}
.containner{width:980px;margin: 0 auto;padding:20px;}
.containner div.artdiv{margin: 20px 0;}
.containner .row{display: flex;}
.containner .row .box{flex: 1;border:1px solid #f3f3f3;padding: 6px;}

h1{font-size: 24px;line-height: 40px;}
h2{font-size: 18px;line-height: 30px;}
blockquote{margin: 20px 0;padding: 10px;background-color: #ecf4e3; box-shadow: 10px 10px 10px #f3f3f3;border: 1px solid #a2af84;color: #999;font-family: 'fangsong';font-size: 18px}
blockquote a{color: #900;font-size: 14px;text-decoration: underline;font-family: 'Microsoft YaHei'}
ul, li{list-style: none;margin: 0;padding: 0;}
ul>li{line-height: 30px;position: relative;padding-left: 16px;}
ul>li::after{content: '';position: absolute;width: 4px;height:4px;background-color: #333;left: 0;top: 13px}
ul>li a:hover{color: #f90;text-decoration: underline;}
ul>li span{margin-left: 20px;font-size: 12px;color:#999;font-style: italic;}

table.ascii{width: 100%; border-collapse: collapse;font-size: 12px}
table.ascii th, table.ascii td{border: 1px solid #999;text-align: center;padding:4px 0;}
table.ascii thead tr{background-color: #008c8c;color: #fff;}
table.ascii tbody tr:nth-child(odd){background-color: #eee;}
table.ascii tbody tr:hover{background-color: #ffc;}
table.ascii tbody tr td:first-child{color: #f40;}
table.ascii tfoot tr td{text-align: right;padding-right: 20px;}

/*unicode Page*/
.codearea{width: 60%;height: 400px;border:1px solid #f3f3f3;padding: 10px;line-height: 24px;}
.codearea:focus{border:1px solid #f3f3f3;outline: none;}

.foot{position: absolute;bottom: 0;width: 100%;font-size: 14px; line-height: 60px;background-color: #000;text-align: center;}
.foot a{color: #fff;}