/* VillagePost - deliberately plain. */
body { margin: 0; padding: 0 10px; background: #fff; color: #222; font: 14px/1.4 Arial, Helvetica, sans-serif; }
a { color: #00c; text-decoration: none; }
a:visited { color: #551a8b; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: normal; margin: .6em 0 .3em; }
h2 { font-size: 1.4em; }
h4 { font-size: 1em; font-weight: bold; margin: 1em 0 .2em; }
.dim, a.dim, a.dim:visited { color: #777; }
.small { font-size: 12px; }
.center { text-align: center; }
.big { font-size: 1.15em; }
.err { color: #b00; margin: .3em 0; }
.new { color: #c00; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { margin: 2px 0; }
ul.rows { padding-left: 18px; }
ul.rows li { margin: 6px 0; }
form.inline { display: inline; margin: 0; }

/* top bar */
#top { padding: 6px 0; border-bottom: 1px solid #ccc; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
#top .logo { font-size: 18px; color: #800080; font-weight: bold; }
#top .nav { margin-left: auto; }
#top .topsearch input { font-size: 12px; }
#main { max-width: 1150px; margin: 0 auto; padding: 4px 0 20px; }
#foot { border-top: 1px solid #ccc; padding: 8px 0 20px; text-align: center; font-size: 12px; color: #777; }
.flash { background: #ffc; border: 1px solid #dd9; padding: 5px 8px; margin: 8px 0; }

/* buttons that look like links (and plain buttons) */
button, .btn { font: inherit; font-size: 13px; padding: 2px 10px; border: 1px solid #999; background: #eee; color: #222; cursor: pointer; border-radius: 2px; }
a.btn, a.btn:visited { color: #222; display: inline-block; }
.btn.primary, button.primary { background: #ddeeff; border-color: #79a; }
button.linkbtn { border: 0; background: none; padding: 0; color: #00c; font-size: inherit; }
button.linkbtn:hover { text-decoration: underline; }
button.danger { background: #fdd; border-color: #c66; }
.heart { color: #b03; }
button.heart.on { color: #e00; font-weight: bold; }

/* front page: craigslist 3-column */
.home { display: grid; grid-template-columns: 190px 1fr 210px; gap: 18px; }
.sitename { color: #800080; font-size: 24px; text-align: center; margin: 8px 0 0; }
.postlinks { margin: 12px 0; text-align: center; }
.postlinks li { margin: 5px 0; }
.side-search input { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
h3.sect { background: #eee; border: 1px solid #ddd; padding: 2px 6px; font-size: 14px; font-weight: bold; margin: 10px 0 6px; }
.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; }
.cat h4 { border-bottom: 1px solid #ddd; margin-top: 8px; text-align: center; }
.cat li { font-size: 13px; }
.cat a.more { font-size: 12px; }
.cols2 { columns: 2; column-gap: 8px; }
.rcol h4, .lcol h4 { text-align: center; border-bottom: 1px solid #ddd; }

/* calendar */
table.cal { border-collapse: collapse; width: 100%; table-layout: fixed; margin: 6px 0; }
table.cal caption { padding: 4px; font-weight: bold; }
table.cal th { background: #eee; font-weight: normal; font-size: 12px; border: 1px solid #ccc; }
table.cal td { border: 1px solid #ccc; vertical-align: top; height: 80px; padding: 2px; font-size: 11px; overflow: hidden; }
table.cal td.pad { background: #f7f7f7; }
table.cal td.today { background: #ffffe0; }
table.cal td.sel { outline: 2px solid #79a; outline-offset: -2px; }
table.cal .day { font-weight: bold; font-size: 12px; }
table.cal .ev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.cal.small td { height: auto; text-align: center; padding: 1px; }
table.cal.small td.has .day { background: #ddeeff; padding: 0 2px; }
table.cal.small .day { font-weight: normal; }

/* page / profile header */
.pagehead { border-bottom: 1px solid #ccc; padding-bottom: 8px; margin-bottom: 4px; }
.pagehead h2 { margin-bottom: 2px; }
.desc { margin: 8px 0; max-width: 750px; }
.actions { margin-top: 6px; font-size: 13px; }
.twocol { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.twocol.market { grid-template-columns: 190px 1fr; }
.side .topics li { margin-bottom: 6px; }

/* posts, comments, replies */
.post { border-bottom: 1px dotted #ccc; padding: 8px 0; }
.post .meta { font-size: 13px; }
.post .body { margin: 4px 0; white-space: normal; overflow-wrap: anywhere; }
.post .actions { font-size: 12px; color: #777; margin-top: 4px; }
.post.unread { background: #fffbe6; }
.post.topic-op { border: 1px solid #ddd; background: #fafafa; padding: 8px 10px; }
.post.reply { padding-left: 10px; }
.shared { border-left: 3px solid #ccd; padding: 3px 8px; margin: 5px 0; background: #f6f6fb; font-size: 13px; }
.comment { padding: 6px 0 6px 12px; border-left: 2px solid #eee; margin: 4px 0; font-size: 13px; }
.postbox { margin: 8px 0 12px; }
.postbox textarea { width: 100%; box-sizing: border-box; font: inherit; }
.pager { margin: 12px 0; }

/* forms */
.box { border: 1px solid #ccc; background: #fafafa; padding: 10px 14px; margin: 8px 0; max-width: 620px; }
.box.detail { max-width: 780px; background: #fff; }
.form label { display: block; margin: 8px 0; font-size: 13px; color: #444; }
.form input:not([type=checkbox]):not([type=file]), .form select, .form textarea { font: inherit; padding: 3px; border: 1px solid #aaa; max-width: 100%; box-sizing: border-box; }
.form textarea { width: 100%; }
.form fieldset { border: 1px solid #ddd; margin: 10px 0; }

/* tables */
table.list { border-collapse: collapse; width: 100%; font-size: 13px; }
table.list th { text-align: left; background: #eee; border-bottom: 1px solid #ccc; padding: 3px 6px; font-weight: normal; }
table.list td { border-bottom: 1px dotted #ddd; padding: 4px 6px; }
table.facts th { text-align: right; color: #777; font-weight: normal; padding-right: 10px; vertical-align: top; }

/* marketplace */
h4.day { background: #eee; padding: 2px 6px; font-weight: bold; text-align: left; border: 0; }
.listings li { padding: 3px 0; }
.when { color: #777; font-size: 12px; display: inline-block; min-width: 48px; }
.price { color: #080; }
.pic { color: #fff; background: #888; font-size: 10px; padding: 0 3px; border-radius: 2px; }
.sold { color: #c00; }
.listing-img { max-width: 100%; max-height: 500px; border: 1px solid #ccc; }
a.cur { font-weight: bold; color: #222; }
.searchbar { margin: 8px 0; }

/* small screens */
@media (max-width: 860px) {
  .home, .twocol, .twocol.market { grid-template-columns: 1fr; }
  .catgrid { grid-template-columns: repeat(2, 1fr); }
  #top .nav { margin-left: 0; width: 100%; }
  table.cal td { height: 48px; }
  table.cal .ev { display: none; }
  table.cal td.has .day { background: #ddeeff; }
}
@media (max-width: 860px) { .home .ccol { order: -1; } }

/* accounts, legal, admin */
.form label.check { color: #222; }
.form label.check input { margin-right: 4px; }
.legal { max-width: 760px; }
.legal h3 { font-weight: bold; font-size: 15px; margin-top: 1.2em; }
.legal li { margin: 4px 0; }
.badge { font-size: 10px; padding: 0 4px; border-radius: 2px; vertical-align: middle; font-weight: normal; color: #fff; background: #888; }
.badge.admin { background: #800080; }
.badge.mod { background: #2a6e2a; }
.badge.st-suspended { background: #c80; }
.badge.st-banned { background: #b00; }
.badge.st-pending { background: #999; }
a.report, a.report:visited { color: #999; }
.adminlink, .adminlink:visited { color: #800080; font-weight: bold; }
.adminnav { background: #f3eef6; border: 1px solid #dcd0e4; padding: 5px 8px; margin: 8px 0; font-size: 13px; }
.adminnav b { color: #800080; }
.nowrap { white-space: nowrap; }
.inline-form { margin: 6px 0; }
.form.inline-form button { margin-left: 4px; }
table.list.stats td:nth-child(odd) { color: #555; }
table.list.content td { vertical-align: top; }
.report-item .notes { color: #555; margin: 4px 0; padding-left: 8px; border-left: 2px solid #eee; }