html { display:flex; background-color:#112; color:#bbb; font-family:Verdana,Arial,sans-serif; }
body { flex:1; max-width: 60em; margin:1em auto; padding:1em; background-color:#223; }
ul { display:flex; flex-direction:row; flex-wrap:wrap; margin:0; padding:0; border-top:1px solid #666; }
ul.mark { background-color:#202048; }
li { /* flex:1; */ list-style-type:none; width:7em; overflow:hidden; text-overflow:ellipsis; border-radius:0.5em; }
li.topics { font-weight:bold; color:#a6a; cursor:pointer; }
li a { display:block; color:#aaa; padding:0.5em 1em; text-decoration:none; overflow:hidden; text-overflow:ellipsis; }
li a:hover { background-color:#111; }
ul > ul { position:absolute; display:none; z-index:5; background-color:#444; padding:1em; }
ul > ul.show { display:block; }
ul > ul > li { width:auto; }
span { margin-right:1em; }
span.big { font-size:1.5em; }