/* Catalog page, desktop and mobile; written for this site. Colours are main.css's role tokens, so the
   Vantablack style reaches the catalog too. */
#content{margin:0 auto}
#ctrl{margin:0 auto;text-align:center;font-size:9pt;color:var(--text)}
#info{text-align:center;margin:4px 0 8px}
#info>span{margin:0 2px}
#filtered-label,#hidden-label,#search-label,#filtered-label-bottom,#hidden-label-bottom,#search-label-bottom{display:none;color:var(--omitted-ink)}
#settings{display:inline-block;margin:4px 0}
#settings .ctrl-wrap,#settings .btn-wrap,.navLinks .btn-wrap{margin:0 4px;display:inline-block}
#settings select{font-size:9pt}
#ctrl .button,#info .button,.navLinksBottom .button{cursor:pointer;color:var(--link)}
#ctrl .navLinks .button,.navLinksBottom .button{display:none}
#qf-box{width:140px;font-size:9pt;padding:1px 3px;margin-left:4px}
#qf-clear{margin-left:4px;cursor:pointer}
.clear{clear:both}
#threads{text-align:center;margin:0 auto;padding:0 5px;display:flex;flex-wrap:wrap;justify-content:center}
#threads .thread{display:inline-block;vertical-align:top;word-wrap:break-word;overflow:hidden;margin:0 2px 5px;padding:5px 0 3px;position:relative;width:165px;max-height:320px;text-align:center}
#threads.large .thread{width:270px;max-height:410px}
#threads .thread a{color:var(--link)}
#threads .thumb{display:inline-block;border:1px solid var(--card-edge);max-width:150px;max-height:150px;box-sizing:content-box;box-shadow:0 0 5px rgba(0,0,0,.25)}
#threads.large .thumb{max-width:250px;max-height:250px}
#threads .thumb.pinned{border-color:var(--brick)}
#threads .thumb.nofile,#threads .thumb.imgdel{width:150px;height:150px}
#threads .meta{font-size:11px;line-height:8px;margin-top:2px;cursor:help;color:var(--omitted-ink)}
#threads .meta b{color:var(--text);font-weight:bold}
#threads .meta .postMenuBtn{cursor:pointer;font-size:10px;color:var(--link);text-decoration:none}
#threads .meta .newReplies{color:var(--omitted-ink)}
#threads .meta .newReplies.hasNew{color:var(--brick);font-weight:bold}
#threads .thumb.hl{border-width:3px;border-style:solid;margin:-2px}
#threads .error{flex:1 1 100%;font-size:14pt;font-weight:bold;color:var(--omitted-ink);padding:30px 0}
#threads .twLeaf{position:absolute;top:8px;left:8px;z-index:2;cursor:pointer;line-height:0;padding:3px;border-radius:3px;background:rgba(255,255,255,.82);color:#34345C;box-shadow:0 0 3px rgba(0,0,0,.3);opacity:.85}
#threads .twLeaf:hover,#threads .twLeaf.watched{opacity:1}
#threads .thread:not(:hover) .twLeaf:not(.watched){opacity:.55}
#backdrop.hidden{display:none}
#filtered-label-bottom,#hidden-label-bottom,#search-label-bottom{text-align:center;margin:2px 0}
#post-menu{z-index:9001}
#post-preview .post-page{float:right;margin-left:10px;color:var(--omitted-ink)}
#post-preview .post-capcode{color:var(--purple)}
#threads .teaser{display:block;padding:0 15px;font-size:x-small;line-height:1.35;margin-top:2px;overflow:hidden;text-align:center;color:var(--text)}
#threads.noteaser .teaser{display:none}
#threads .teaser b{color:var(--subject-ink)}
#threads .threadIcons{position:absolute;top:8px;right:8px}
#threads .threadIcons span{display:inline-block;width:16px;height:16px;margin-left:2px;background:no-repeat center/16px 16px}
#threads .stickyIcon{background-image:url(../img/sticky.png)}
#threads .closedIcon{background-image:url(../img/closed.png)}
#threads .modIcon{background-image:url(../img/modicon.png)}
#threads .adminIcon{background-image:url(../img/adminicon.png)}
#post-preview{position:absolute;max-width:320px;background:var(--card);border:1px solid var(--card-edge);border-right-width:2px;border-bottom-width:2px;padding:4px 8px;font-size:9pt;z-index:9001;text-align:left}
#post-preview .post-subject{color:var(--subject-ink);font-weight:bold}
#post-preview .post-author{color:var(--name-ink);font-weight:bold}
#post-preview .post-ago{color:var(--omitted-ink)}
#post-preview .post-last{color:var(--omitted-ink);margin-top:3px}
#post-preview .post-teaser{margin:4px 0}
.navLinksBottom{display:block;text-align:center;margin:4px 0}
#backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:9000}
@media only screen and (max-width:480px){
#ctrl .navLinks .button,.navLinksBottom .button{display:inline-block}
#info{margin-top:6px}
#settings{display:block}
#settings .ctrl-wrap{display:block;margin:4px 0}
#togglePostForm{text-align:center;margin:10px 0}
#threads .thread{width:110px;max-height:260px}
#threads.large .thread{width:160px}
#threads .thumb{max-width:100px;max-height:100px}
#threads.large .thumb{max-width:150px;max-height:150px}
#threads .teaser{padding:0 4px;max-height:60px}
#post-preview{display:none}
#threads .twLeaf{top:4px;left:4px;padding:8px}
#threads .twLeaf svg{width:16px;height:16px}
#threads .meta .postMenuBtn{padding:8px 6px;margin:-8px 0}
#post-menu li{padding:11px 22px 11px 14px;font-size:13px}
#qf-box{width:60vw;max-width:220px;font-size:16px}
#qf-clear{display:inline-block;padding:6px 10px}
#info>span{display:inline-block;margin:3px 2px}
}