body{margin:0;background:#e8e6df;color:#333;font:13px/1.5 Verdana,Geneva,sans-serif;}
#wrap{max-width:800px;margin:20px auto;background:#fff;border:1px solid #ccc;}
site-header,site-nav,site-sidebar,site-footer{display:contents;}
#banner{background:#5b7a99;color:#fff;padding:18px 20px;border-bottom:4px solid #3f5b76;}
#banner h1{margin:0;font:22px Georgia,serif;font-weight:normal;}
#banner p{margin:4px 0 0;font-size:11px;color:#dbe6f0;font-style:italic;}
#nav{background:#f0efe8;border-bottom:1px solid #ccc;padding:6px 20px;font-size:11px;}
#nav a{color:#5b7a99;text-decoration:none;margin-right:14px;}
#nav a:hover{text-decoration:underline;}
#nav a.active{color:#333;font-weight:bold;text-decoration:underline;}
#body{display:flex;}
#main{flex:1;padding:18px 20px;min-width:0;}
#side{width:200px;padding:18px 16px;border-left:1px solid #ddd;background:#fafaf7;}
.post{border-bottom:1px dashed #ccc;padding-bottom:14px;margin-bottom:16px;}
.post h2{font:16px Georgia,serif;margin:0 0 2px;color:#3f5b76;}
.meta{font-size:10px;color:#999;margin-bottom:8px;}
.post p{margin:0 0 8px;}
.post .footer{font-size:10px;color:#aaa;}
.box{margin-bottom:20px;}
.box h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#5b7a99;border-bottom:1px solid #ddd;padding-bottom:4px;margin:0 0 8px;}
.avatar{width:70px;height:70px;background:#d8dee5;border:1px solid #ccc;margin-bottom:8px;}
.box ul{list-style:none;margin:0;padding:0;}
.box li{margin-bottom:5px;}
.box a{color:#5b7a99;text-decoration:none;}
.box a:hover{text-decoration:underline;}
#counter{font-size:10px;color:#999;margin-top:10px;}
#foot{text-align:center;font-size:10px;color:#999;padding:12px;border-top:1px solid #ddd;}
@media(max-width:600px){#body{flex-direction:column;}#side{width:auto;border-left:none;border-top:1px solid #ddd;}}