/* musechan — yotsuba B. the authentic 4chan experience. */

* { box-sizing: border-box; }

body {
  background: #FFFFEE linear-gradient(#FED6AF, #FFFFEE 200px) no-repeat;
  color: #800000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  margin: 0;
  padding: 0 0 40px 0;
}

a { color: #0000EE; text-decoration: none; }
a:hover { color: #DD0000; }

hr { border: none; border-top: 1px solid #D9BFB7; clear: both; }

/* ---- board nav (top + bottom) ---- */
.boardNav {
  font-size: 9pt;
  padding: 3px 6px;
  color: #89A;
  overflow: hidden;
}
.boardNav .boardList { margin-right: 4px; }
.boardNav .navRight { float: right; }
#boardNavBottom { margin-top: 10px; border-top: 1px solid #D9BFB7; padding-top: 4px; }

/* ---- header ---- */
header.boardHead { text-align: center; margin: 10px 0 20px; }
.boardBanner {
  font-family: Tahoma, sans-serif;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: -2px;
  color: #800000;
  margin-bottom: 4px;
}
.boardBanner .muse { color: #0000EE; }
.boardBanner a { color: #800000; }
.logoClover { vertical-align: middle; margin: 0 6px 4px 0; }
.homeLogo { font-size: 60px; letter-spacing: -4px; margin: 14px 0 8px; }
.homeLogo .logoClover { width: 96px; height: 108px; margin-right: 12px; }
.boardTitle {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: -2px;
  color: #800000;
  font-family: Tahoma, sans-serif;
}
.boardSubtitle { font-size: 10px; }
hr.abovePostForm { width: 90%; }
hr.belowPostForm { width: 90%; }

/* ---- post form (classic 4chan table), hidden behind the toggle link ---- */
#togglePostFormLink {
  text-align: center;
  font-size: 16pt;
  font-weight: bold;
  margin: 12px 0;
}
.js .postForm { display: none; }
.js .postForm.shown { display: block; }
html:not(.js) #togglePostFormLink { display: none; }
.postForm {
  margin: 0 auto;
  max-width: 720px;
}
.postForm table { margin: 0 auto; border-collapse: collapse; }
.postForm td {
  padding: 1px 4px;
  font-size: 10pt;
  font-weight: bold;
  color: #800000;
  background: #EEAA88;
  border: 1px solid #800000;
}
.postForm td:first-child {
  background: #EEAA88;
  text-align: left;
}
.postForm td:last-child { background: #F0E0D6; text-align: left; font-weight: normal; }
.postForm input[type="text"],
.postForm input[type="password"],
.postForm textarea {
  font-size: 10pt;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #AAA;
  padding: 2px 4px;
  width: 100%;
}
.postForm input[type="submit"] { font-size: 10pt; }
.postForm .rules { font-size: 9pt; text-align: center; margin-top: 6px; }
.postForm h3, .formTitle {
  text-align: center;
  font-size: 12pt;
  color: #800000;
  margin: 8px 0;
}

/* ---- threads ---- */
.thread { margin: 12px 8px; }
.thread + hr { margin: 20px 0; }
.navLinks { font-size: 10pt; margin: 4px 8px; }
.threadStats { float: right; }
.threadStats span { cursor: help; }

/* ---- posts ---- */
.postContainer { margin: 4px 0; }
.opContainer::after { content: ""; display: block; clear: both; }
.replyContainer { overflow: visible; }
.sideArrows {
  float: left;
  color: #E0BFB7;
  margin: 2px 4px 0 2px;
  font-size: 10pt;
}
.post {
  background: #F0E0D6;
  border: 1px solid #D9BFB7;
  border-left: none;
  border-top: none;
  display: table;
  padding: 2px;
  margin: 0;
  min-width: 300px;
}
.post.highlight, .post:target {
  background: #F0C0B0;
  border-color: #D99F91;
}
#quote-preview {
  position: fixed;
  z-index: 10;
  display: table;
  border: 1px solid #D99F91;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  pointer-events: none;
  max-width: 60vw;
}
#quote-preview.op { background: #F0E0D6; padding: 4px; }
.post.op {
  background: transparent;
  border: none;
  display: block;
  padding: 2px 0;
}
.postinfo { font-size: 10pt; }
.postinfo .subject { color: #CC1105; font-weight: bold; }
.postinfo .name { color: #117743; font-weight: bold; }
.postinfo .trip { color: #117743; }
.postinfo .datetime, .postinfo .postno { color: #800000; }
.postinfo .postno a { color: #800000; }
.postinfo .postno a:hover { color: #DD0000; }
.postinfo .replylink a { color: #0000EE; }
.backlinks { font-size: 0.8em; }
.backlinks a.quotelink { color: #DD0000; text-decoration: underline; margin-right: 3px; }
.postinfo .sage { color: #0000EE; font-weight: bold; }
.fileinfo { font-size: 9pt; color: #800000; margin: 2px 0; }
.fileinfo a { color: #0000EE; }
.filethumb { float: left; margin: 4px 12px 4px 0; }
.filethumb img { max-width: 250px; max-height: 250px; border: none; }
.comment {
  color: #800000;
  font-size: 10pt;
  margin: 12px 20px 12px 8px;
  word-wrap: break-word;
  overflow: hidden;
}
.comment .quote, .greentext { color: #789922; }
.comment a { color: #0000EE; text-decoration: underline; }
.comment a.quotelink { color: #DD0000; text-decoration: underline; }
.comment a.quotelink:hover { color: #DD0000; }
.op .comment { margin-left: 4px; }

/* ---- board index bits ---- */
.boardlisthead { display: none; }
.cataloglink { text-align: center; font-size: 10pt; margin: 8px 0; }
.omitted { color: #707070; font-size: 9pt; margin: 4px 0 4px 20px; }
.counts { color: #707070; font-size: 9pt; }
.stickyflag, .lockflag, .blim { font-size: 9pt; }
.blim { color: #CC1105; font-weight: bold; }

/* ---- catalog ---- */
.catgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px;
}
.cell {
  width: 160px;
  text-align: center;
  font-size: 9pt;
}
.cell img { max-width: 150px; max-height: 150px; }
.cellsubj { font-weight: bold; }
.notext {
  width: 150px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: #F0E0D6; border: 1px solid #D9BFB7; color: #800000;
}

/* ---- blotter ---- */
.blotter {
  max-width: 720px;
  margin: 8px auto;
  background: #F0E0D6;
  border: 1px solid #D9BFB7;
  padding: 6px 12px;
  font-size: 9pt;
}
.blotter h3 {
  color: #CC1105;
  font-size: 11pt;
  margin: 2px 0 4px;
  text-align: center;
}
.blotter ul { margin: 4px 0; padding-left: 20px; }
.blotter li { margin: 2px 0; }

/* ---- board banner image ---- */
.boardBannerImg { margin-bottom: 8px; }
.boardBannerImg img { border: 1px solid #800000; }

/* ---- (You) highlight ---- */
.post.you { border: 2px solid #CC1105 !important; }

/* ---- home: 4chan front page boxes ---- */
.homewrap { max-width: 900px; margin: 0 auto; padding: 10px; }
.box-outer { border: 1px solid #800000; margin: 0 0 12px; background: #FFFFFF; }
.boxbar { background: #FCA; border-bottom: 1px solid #800000; padding: 3px 8px; }
.boxbar h2 { margin: 0; font-size: 10pt; color: #800000; }
.boxcontent { padding: 6px 10px; font-size: 10pt; overflow: hidden; }
.boxcontent p { margin: 6px 0; }
.boards .boxcontent { display: flex; flex-wrap: wrap; gap: 0 12px; }
.boardcol { flex: 1 1 130px; }
.boardcol h3 { font-size: 10pt; color: #800000; text-decoration: underline; margin: 6px 0 4px; }
.boardcol ul { list-style: none; margin: 0 0 8px; padding: 0; }
.boardcol li { margin: 1px 0; }
.popgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.popcell { width: 190px; text-align: center; font-size: 9pt; }
.popboard { font-weight: bold; font-size: 10pt; color: #800000; margin-bottom: 4px; }
.popcell img { max-width: 150px; max-height: 150px; }
.popteaser { text-align: left; margin-top: 4px; word-wrap: break-word; }
.stats { text-align: center; }
.stats b { margin-left: 12px; }
.homewrap .blotter { max-width: none; margin: 0 0 12px; }

/* ---- misc ---- */
.errbox { text-align: center; margin: 40px auto; max-width: 500px; }
.errbox h2 { color: #CC1105; }
.notice {
  background: #F0E0D6;
  border: 1px solid #D9BFB7;
  padding: 6px 10px;
  margin: 8px auto;
  max-width: 720px;
  text-align: center;
  font-size: 10pt;
}
.deleteform {
  max-width: 720px;
  margin: 16px auto;
  font-size: 10pt;
  text-align: center;
}
.deleteform h3 { font-size: 11pt; color: #800000; }
.deleteform input { font-size: 10pt; margin: 0 2px; }

footer.sitefoot {
  text-align: center;
  font-size: 9pt;
  color: #800000;
  margin-top: 30px;
  padding: 10px;
}

/* mobile: don't be awful */
@media (max-width: 700px) {
  .filethumb img { max-width: 125px; max-height: 125px; }
  .post { min-width: 0; display: block; }
  .boardBanner, .boardTitle { font-size: 22px; }
}