/* ============================================
   Modern Charcoal / Black Theme with Red Glow
   ============================================ */

body {
  margin: 0;
  padding: 0;
  background-color: #0d0d0d; /* Deep charcoal */
  background-image: url("images/bg.gif");
  background-size: cover;
  background-attachment: fixed;
  color: #f0f0f0;
  font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
  font-size: 12px;
}

/* General Text */
h1, h2, h3, p, td, th {
  color: #f5f5f5;
}

h1 {
  font-size: 21px;
  font-weight: normal;
  color: #ffffff;
  border-bottom: 2px solid #ff3b3b;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

h2 {
  font-size: 18px;
  color: #dddddd;
  border-left: 4px solid #ff3b3b;
  padding-left: 10px;
  margin: 10px 0;
}

h3 {
  font-size: 13px;
  color: #cccccc;
  margin: 6px 0;
}

p {
  margin: 6px 0;
}

/* Links */
a {
  color: #ff4444;
  text-decoration: none;
  transition: color 0.25s, text-shadow 0.25s;
}

a:hover {
  color: #ff6666;
  text-shadow: 0 0 8px #ff3b3b;
}

/* Tables and Layout Blocks */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.maintable,
.tableb,
.tableb_alternate,
.tablef,
.catrow,
.catrow_noalb,
.display_media,
.thumbnails,
.img_caption_table td,
.img_caption_table th,
.content-area {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #f5f5f5;
  padding: 8px;
}

.tableb_alternate {
  background-color: #202020;
}

.tableh1 {
  background-color: #2b2b2b;
  color: #ffffff;
  font-weight: bold;
  padding: 6px 10px;
  border-bottom: 2px solid #ff3b3b;
}

.tableh2 {
  background-color: #1f1f1f;
  color: #ffffff;
  padding: 6px 10px;
}

/* Form Elements */
.textinput,
.listbox,
.radio,
.checkbox {
  background-color: #222;
  border: 1px solid #444;
  color: #ffffff;
  padding: 4px 6px;
}

.button,
.buttonlist ul li a {
  background-color: #1b1b1b;
  border: 1px solid #444;
  color: #f5f5f5;
  font-size: 90%;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.button:hover,
.buttonlist ul li a:hover {
  border-color: #ff3b3b;
  color: #ff3b3b;
  text-shadow: 0 0 8px #ff3b3b;
  background-color: #2a2a2a;
}

/* Navigation */
.navmenu {
  background-color: #111;
  color: #fff;
  font-weight: bold;
  border: none;
}

.navmenu a {
  display: block;
  color: #ffffff;
  padding: 10px 14px;
  transition: all 0.2s ease-in-out;
}

.navmenu a:hover {
  background-color: #2a2a2a;
  color: #ff3b3b;
  text-shadow: 0 0 6px #ff3b3b;
}

/* Image Borders */
.image,
a .image {
  border: 1px solid #333;
  transition: all 0.2s ease-in-out;
}

a:hover .image {
  border-color: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b;
}

/* Thumbnail Info */
.thumb_title,
.thumb_caption,
.thumb_num_comments,
.album_stat {
  color: #cccccc;
  font-size: 85%;
  padding: 3px;
}

/* Footer */
.footer {
  background-color: #111;
  color: #999;
  text-align: center;
  font-size: 10px;
  padding: 12px;
}

.footer a {
  color: #ff3b3b;
}

.footer a:hover {
  color: #ff6666;
  text-shadow: 0 0 6px #ff3b3b;
}

/* Messages */
.cpg_message_info,
.cpg_message_success,
.cpg_message_warning,
.cpg_message_error {
  padding: 10px 15px;
  margin: 10px 0;
  border-left: 4px solid;
  background-color: #1f1f1f;
  color: #f0f0f0;
}

.cpg_message_info { border-color: #ff3b3b; }
.cpg_message_success { border-color: #00c853; }
.cpg_message_warning { border-color: #ffa000; }
.cpg_message_error { border-color: #ff3b3b; }

/* Admin / Utility */
.admin_menu {
  background-color: #151515;
  border: 1px solid #333;
  color: #ffffff;
  font-size: 90%;
  text-align: center;
}

.admin_menu a {
  color: #ffffff;
  padding: 4px 6px;
}

.admin_menu a:hover {
  color: #ff3b3b;
  text-shadow: 0 0 6px #ff3b3b;
}

/* Compact + Box sizing reset */
body, table {
  font-size: 11px;
}

* {
  box-sizing: border-box;
}

/* Optional: Add subtle gradient background for depth */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  opacity: 0.4;
  z-index: -1;
}

/* Remove big space between menu and gallery table */
.menu-block br {
  display: none !important;
}

.menu-block {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill any top margin/padding from the Coppermine main table */
.maintable,
.tableb,
.tableb_alternate,
#main,
#gallery,
table {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-spacing: 0 !important;
}

/* Optional: remove any leftover empty <p> or <div> Coppermine inserts */
.content-area > p:empty,
.content-area > div:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Make category and album titles larger, red, and bold */
.catlink a,
.alblink a {
  font-size: 1.3em !important;
  font-weight: 700 !important;
  color: #ff3b3b !important; /* bright red for visibility */
  text-transform: none !important;
}

/* Give them a subtle glow on hover to match your red hover theme */
.catlink a:hover,
.alblink a:hover {
  text-shadow: 0 0 6px #ff3b3b !important;
  color: #ff5b5b !important;
}

/* Make descriptive text smaller and softer */
.album_stat,
.thumb_caption,
.catrow,
.catrow_noalb {
  font-size: 0.9em !important;
  font-weight: 400 !important;
  color: #cccccc !important;
}


/* Mobile fix for extra space between menu and gallery */
@media (max-width: 768px) {
  .menu-block br {
    display: none !important;
  }

  .menu-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .content-area {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }

  /* Remove extra top margin/padding on Coppermine tables for mobile */
  .maintable,
  .tableb,
  .tableb_alternate,
  #gallery,
  table {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-spacing: 0 !important;
  }
}