/*  color: #749a5f !important;*/

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* HCB STYLING. I HATE THIS SHIT */


.spoiler, .spoiler2{ 
  color: black; 
  background-color:black;
}

.spoiler:hover{
  color: white;
  }

.spoiler2:hover { 
  background-color:white; 
  }

#HCB_comment_box #HCB_comment_form_box {
  position: relative;
  left: 0;
  background-color: #facfcf;
  border: 1px solid #8c0000;
  padding: 10px;
  z-index: 20;
  margin-bottom: 50px;
  right: 0;
}

#HCB_comment_box #hcb_form {
  margin-bottom: 0;
}

#HCB_comment_box #hcb_form textarea, #HCB_comment_box #hcb_form #hcb_form_name {
  font-family: 'Trebuchet MS', sans-serif !important;
  font-weight: normal !important;
  color: #8c0000;
}

#hcb_form_name {
  border: 1px solid #8c0000 !important;
  border-radius: 0px !important;
}

#hcb_form_content {
  border: 1px solid #8c0000 !important;
  border-radius: 0px !important;
}

#hcb_submit {
  background-color: #fae4e4 !important;
  border: 1px solid #8c0000 !important;
  border-radius: 0px !important;
  font-family: 'Trebuchet MS', sans-serif !important;
  color: #8c0000 !important;
}

#HCB_comment_form_box .btn-secondary {
  background-color: #fae4e4 !important;
  border: 1px solid #8c0000 !important;
  border-radius: 0px !important;
  font-family: 'Trebuchet MS', sans-serif !important;
  color: #8c0000 !important;
}

#HCB_comment_box #hcb_form .home-desc {
  display: none !important;
}

#HCB_comment_box {
  font-family: 'Trebuchet MS', sans-serif !important;
  color: #8c0000;
}

#HCB_comment_box .hcb-comment-tb button {
  color: #749a5f !important;
}

html body div#HCB_comment_box div#comments_list div[id^="comment"].comment p.hcb-comment-tb button.hcb-like {
  display: none !important;
}

.likes {
  display: none !important;
}

#HCB_comment_box h3 {
  font-family: 'Trebuchet MS', sans-serif !important;
  color: #8c0000;
}

#HCB_comment_box #comments_list {
}

#HCB_comment_box .comment {
  background-color: #facfcf;
  padding: 5px 15px 15px 15px;
  border: 1px solid #8c0000;
}

#HCB_comment_box .comment img {
  max-width: 200px;
  height: auto;
}

#HCB_comment_box .comment [id^="replies"] {
  background-color: #fae4e4;
  margin: 10px 0 10px 0;
  padding: 2px 2px 2px 0;
  border: 0 solid black;
}

#HCB_comment_box [id^="replies"] .comment  {
  margin: 5px 0 5px 0 !important;
  background-color: transparent;
  border: 0 solid black;
}

#comments_list {
  padding-right: 0px !important;
}

/* Actual site styling starts here. */

body {
  margin: 0;
  padding: 0;
  background-color: #faf6f2;
  background-image: linear-gradient(#ffefe3 10%, white 40%);
  background-repeat: no-repeat;
  font-family: 'Trebuchet MS', sans-serif;
  color: #8c0000;
}

#page {
  width: 1000px;
  margin: 20px auto 20px auto;
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-attachment: fixed;
}

hr {
  border-top: 1px solid #8c0000;
  border-bottom: 0;
  margin: 30px 0 30px 0;
}

.dotted {
  margin-top: 20px; 
  margin-bottom: 20px; 
  border: 1px dashed #8c0000;
}

a:link {
  color: #749a5f;
  text-decoration: none;
}

a:visited {
  color: #4b812d;
  text-decoration: none;
}

a:hover {
  color: #749a5f;
  text-decoration: underline;
}

a:active {
  color: #749a5f;
  text-decoration: underline;
} 

dt {
  margin-top: 10px;
}

#catalog {
  position: relative;
}

#return_button {
  display: none;
}

#catalog_menu_wrapper {
  display: none;
  z-index: 999;
  position: absolute;
  
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 830px;
}

#catalog_header {
  background-color: #ffe0c6;
  margin: 0;
  padding: 15px;
  text-align: center;
}

#catalog_header h2 {
  margin: 0;
}

#catalog_menu_vanity {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
}

#catalog_menu {
  padding: 15px;
  margin-bottom: 10px;
  color: #8c0000;
  font-size: 12px;
  
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-auto-rows: 300px;
}

#catalog_menu .comment {
  margin: 10px;
  overflow-y: auto;
  
  background-color: #facfcf;
  border: 1px solid #8c0000;
  
  user-select: none;
}

#catalog_menu .comment blockquote {
  margin: 10px;
}

#catalog_menu .comment img {
  display: block;
  margin: auto auto 10px;
  border: 1px solid #8c0000;
  max-width: 140px;
  height: auto;
}

#catalog_menu [id^="replies"] .comment {
  background-color: #fae4e4;
}

#catalog_menu div[id^="comment"].comment p.hcb-comment-tb {
  display: none !important;
}

.covering-panel {
  top: -20px;
  display: none;
  background-color: rgba(0,0,0, 0.6);  
  height: 110vh;
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 30;
}

#header #header_wrapper {
  background-color: #ffe0c6;
  border: 1px solid #8c0000;
  padding: 10px 20px 10px 20px;
  margin-bottom: 10px;
  color: #8c0000;
}

#header a:link {
  color: #8c0000;
  text-decoration: none;
}

#header a:visited {
  color: #8c0000;
  text-decoration: none;
}

#header a:hover {
  color: #8c0000;
  text-decoration: underline;
}

#header a:active {
  color: #8c0000;
  text-decoration: underline;
}

#header h1{
  margin: 0;
}

/* 3 COLUMN LAYOUT */

.grid-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.sidebar-left {
  width: 20%;
}

.main-center {
  width: 58%;
}

.sidebar-right {
  width: 22%;
}

/* ORIGINAL INFO PANEL */

#info {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
  margin-bottom: 10px;
  width: auto;
  font-size: 14px;
}

#info #info_header {
  background-color: #ffe0c6;
  margin: 0;
  padding: 15px;
  text-align: center;
}

#info #info_header h2 {
  margin: 0;
}

#info #info_content {
  padding: 15px;
}

/* NEWS PANEL */

#news_vanity_wrapper {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
  margin-bottom: 10px;
  width: auto;
  font-size: 14px;

  height: 100%;
  max-height: 700px;

  display: flex;
  flex-direction: column;
}

#news #news_header {
  background-color: #ffe0c6;
  margin: 0;
  padding: 15px;
}

#news #news_header h2{
  margin: 0;
}

#news #changelog {
  padding: 0 15px 15px 15px;
  overflow-y: auto;
  flex-grow: 1;
}

#news #changelog .update-date{
  text-decoration: underline;
  color: #8c0000;
}

#news #changelog .update-body{
  font-size: 14px;
  margin-left: 10px;
  margin-right: 5px;
}

/* CLOCK */

.clock-container {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
  text-align: center;
  color: #8c0000;
  font-family: 'Trebuchet MS', sans-serif;
}

.clock-container::before {
  content: "Clock";
  display: block;
  background-color: #ffe0c6;
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #8c0000;
}

#date-display {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 10px;
}

#time-display {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}

#footer {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#theme {
  max-width: 40px;
}

.indent {
  text-indent: 10px;
}

.greentext {
  color: #749a5f !important;
}

.thread_link:link {
  color: #8c0000;
  text-decoration: none;
}

.thread_link:visited {
  color: #8c0000;
  text-decoration: none;
}

.thread_link:hover {
  color: #8c0000;
  text-decoration: underline;
}

.thread_link:active {
  color: #8c0000;
  text-decoration: underline;
}
.clock-container {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
  padding: 10px;
  text-align: center;
  font-family: 'Trebuchet MS', sans-serif;
  color: #8c0000;
}

.clock-container::before {
  content: "Clock";
  display: block;
  background-color: #ffe0c6;
  padding: 8px;
  margin: -10px -10px 10px -10px;
  font-weight: bold;
}

#date-display {
  font-size: 14px;
  margin-bottom: 6px;
}

#time-display {
  font-size: 26px;
  font-weight: bold;
}
#top-banner img {
    border: 1px solid #800000;
    box-sizing: border-box;
}
/* nuke logo border completely */
#header img,
#header a,
#header h1,
#header h1 a,
#header h1 img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.stats-box {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
  margin-bottom: 10px;
  font-size: 14px;
  color: #8c0000;
  font-family: 'Trebuchet MS', sans-serif;
}

.stats-header {
  background-color: #ffe0c6;
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

.stats-content {
  padding: 12px;
}

.stat-cell {
  padding: 6px 0;
  border-bottom: 1px dotted #8c0000;
}

.stat-cell:last-child {
  border-bottom: none;
}
.popular-box {
  background-color: #efffff;
  border: 1px solid #5899a9;
  margin-top: 10px;
  font-family: 'Trebuchet MS', sans-serif;
}

.popular-header {
  background-color: #5899a9;
  color: #ffffff;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.popular-content {
  padding: 15px;
  color: #000000;
}

/* POPULAR THREADS GRID: 4 columns x 2 rows */
#c-threads.popular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 5px;
}

.c-thread {
  background-color: #faf6f2;
  border: 1px solid #8c0000;
  padding: 8px;
  text-align: center;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.c-board {
  color: #010864;
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 0.78em;
}

.c-thumb {
  border: 1px solid #8c0000;
  margin-bottom: 5px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.c-teaser {
  color: #000000;
  font-size: 0.82em;
  line-height: 1.4;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
}

.c-teaser b {
  color: #010864;
}

@media (max-width: 900px) {
  #c-threads.popular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #c-threads.popular-grid {
    grid-template-columns: 1fr;
  }
}
.grid-layout {
  align-items: flex-start !important;
}

.sidebar-left,
.main-center,
.sidebar-right {
  box-sizing: border-box;
}

.text-center {
  text-align: center;
  width: 100%;
  margin: 10px 0;
}

/* RECENT IMAGES BOX - GREEN THEME */
.recent-images-box {
  background-color: #faf6f2;
  border: 1px solid #749a5f;
  margin-top: 15px;
  font-family: Trebuchet MS, sans-serif;
}
.recent-images-header {
  background-color: #749a5f;
  color: #ffffff;
  padding: 8px;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
}
.recent-images-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #efffef;
}
.recent-thumb {
  max-width: 100%;
  height: auto;
  border: 1px solid #749a5f;
}

/* LATEST POSTS BOX - BLUE THEME */
.latest-posts-box {
  background-color: #efffff;
  border: 1px solid #5899a9;
  margin-top: 15px;
  font-family: Trebuchet MS, sans-serif;
}
.latest-posts-header {
  background-color: #5899a9;
  color: #ffffff;
  padding: 8px;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.latest-posts-header .options-link {
  font-size: 10px;
  font-weight: normal;
  cursor: pointer;
}
.latest-posts-content {
  padding: 5px;
}
.latest-post-item {
  font-size: 11px;
  padding: 2px 5px;
  border-bottom: 1px dotted #5899a9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.latest-post-item:last-child {
  border-bottom: none;
}
.latest-post-item .post-link {
  color: #004a99;
  text-decoration: none;
}
.latest-post-item .post-link:hover {
  text-decoration: underline;
}
.latest-post-item .post-board {
  font-weight: bold;
  color: #5899a9;
}


/* MAIN INFO TABS — CLASSIC CONNECTED TAB TREATMENT */
#info {
  --tab-accent: #8c0000;
  --tab-strip: #ffe0c6;
  --tab-content: #faf6f2;
  --tab-text: #8c0000;
  --tab-hover: #f4cfb6;
  background-color: var(--tab-content);
  border: 1px solid var(--tab-accent);
  color: #8c0000;
  margin-bottom: 10px;
  width: auto;
  font-size: 14px;
}

#info .tab-bar {
  display: flex;
  align-items: flex-end;
  list-style: none;
  margin: 0;
  padding: 0 0 0 6px;
  background-color: var(--tab-strip);
  border-bottom: 1px solid var(--tab-accent);
}

#info .tab-bar li {
  display: block;
  margin: 0 0 -1px 0;
  padding: 0;
  border-right: 1px solid var(--tab-accent);
}

#info .tab-bar li:first-child {
  border-left: 1px solid var(--tab-accent);
}

#info .tab-bar li a {
  display: block;
  min-width: 68px;
  padding: 9px 17px 8px;
  color: var(--tab-text);
  font-size: 17px;
  font-weight: normal;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: none !important;
}

#info .tab-bar li:not(.active) a:hover {
  background-color: var(--tab-hover);
  color: var(--tab-text);
  text-decoration: none;
}

#info .tab-bar li.active {
  position: relative;
  z-index: 1;
  background-color: var(--tab-content);
  border-top: 1px solid var(--tab-accent);
}

#info .tab-bar li.active a {
  padding-top: 8px;
  color: #000000;
  font-weight: bold;
}

#info .tab-pane {
  background-color: var(--tab-content);
}

#info.theme-peach {
  --tab-accent: #8c0000;
  --tab-strip: #ffe0c6;
  --tab-content: #faf6f2;
  --tab-text: #8c0000;
  --tab-hover: #f4cfb6;
}

#info.theme-green {
  --tab-accent: #749a5f;
  --tab-strip: #749a5f;
  --tab-content: #efffef;
  --tab-text: #ffffff;
  --tab-hover: #5f864c;
  background-color: #efffef;
  border-color: #749a5f;
}

#info.theme-blue {
  --tab-accent: #5899a9;
  --tab-strip: #5899a9;
  --tab-content: #efffff;
  --tab-text: #ffffff;
  --tab-hover: #478694;
  background-color: #efffff;
  border-color: #5899a9;
}

#info.theme-green #info_content,
#info.theme-blue #info_content {
  color: #000000;
}

#info.theme-green #info_content a {
  color: #356f38;
}

#info.theme-blue #info_content a {
  color: #004a99;
}

@media (max-width: 600px) {
  #info .tab-bar {
    padding-left: 0;
  }

  #info .tab-bar li a {
    min-width: 0;
    padding: 8px 11px 7px;
    font-size: 15px;
  }
  transition: none !important;
}

/* FAQ EMOTE STYLING */
#info img[src*="emotes"], #info .postform img {
  border: none !important;
}

/* FAQ SECTION HEADERS */
#info h4 {
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
  color: #000000;
  margin-top: 18px;
  margin-bottom: 12px;
}