/* ============================================================
   ChaoticChat Forum - unified theme
   Matches the main chaoticchat.com site exactly (same header,
   highlight bar, footer chrome). Single file.
   ============================================================ */

body {
    background-color: #060c19;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #e8eff4;
    margin: 0;
    padding: 0;
}
img { border: 0; }
a { color: #3a9fe0; }
a:hover { color: #44b2f1; }

.wrapper {
    width: 960px;
    margin: 0 auto;
}
.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 1%;
    line-height: 0;
    visibility: hidden;
}

/** Visually hides text for screen readers while keeping it out of the visual layout **/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.visually-hidden:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background-color: #09253a;
    color: #fff;
    display: inline-block;
    z-index: 2000;
}

/*------------------------------ HEADER ------------------------------*/
#header {
    background: #09253a url(images/bg-header.png) repeat-x center top;
    height: 50px;
    padding: 16px 0 0;
    text-align: right;
}
#logo {
    float: left;
    display: inline-block;
    margin-left: 10px;
}
#navigation {
    display: inline-block;
    height: 30px;
    list-style: none;
    margin: 0 10px;
    padding: 0;
}
#navigation li {
    float: left;
    margin: 0 12px;
}
#navigation li:first-child { margin-left: 0; }
#navigation li a {
    color: #efefef;
    line-height: 30px;
    padding: 0;
    text-decoration: none;
}
#navigation li a:hover,
#navigation li a:focus,
#navigation li.selected a {
    color: #44b2f1;
}
#navigation li a:focus {
    outline: 2px solid #44b2f1;
    outline-offset: 2px;
}

/*------------------------------ HIGHLIGHT BAR ------------------------------*/
.highlight {
    background: #171a1a url(images/ccheading.jpg) repeat-x left top;
    min-height: 82px;
    border-color: #000;
    border-style: solid none;
    border-width: 1px;
}
.highlight h1 {
    color: #fdfdfd;
    font-size: 34px;
    font-style: italic;
    line-height: 82px;
    width: 940px;
    margin: 0 auto;
    padding: 0 10px 0 30px;
    text-shadow: -3px 0 3px #121413;
}

/*------------------------------ CONTENTS WRAPPER ------------------------------*/
#contents {
    background: #060c19 url(images/cccontent.png) repeat-x center top;
    padding: 20px 0 0;
    overflow: hidden;
}
#contents .wrapper { padding-bottom: 20px; }

/* ---- Forum navbar ---- */
#forum-navbar {
    background: #09253a;
    border: 1px solid #14344d;
    border-radius: 3px;
    padding: 7px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #7890a1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#forum-navbar a { color: #e8eff4; text-decoration: none; }
#forum-navbar a:hover { color: #44b2f1; }
.nav-left { text-align: left; }
.nav-center { text-align: center; flex: 1; }
.nav-right { text-align: right; }

/* ---- Forum body ---- */
#forum-body { min-height: 400px; }

/* ---- Action bar ---- */
.action-bar {
    background: #09253a;
    border: 1px solid #14344d;
    border-radius: 3px;
    padding: 7px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #7890a1;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Category block ---- */
.forabg {
    background: #0b1a2c;
    border: 1px solid #14344d;
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}
.cat-header {
    background: #09253a;
    border-bottom: 1px solid #14344d;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}
.cat-title {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #e8eff4;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}
.cat-col {
    min-width: 80px;
    text-align: center;
    font-size: 11px;
    color: #7890a1;
    text-transform: uppercase;
}
.cat-col.last { min-width: 180px; text-align: right; }

/* ---- Forum listing block ---- */
.forumbg {
    background: #0b1a2c;
    border: 1px solid #14344d;
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

/* ---- Forum / topic rows ---- */
.forum-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #0d1f33;
    border-bottom: 1px solid #14344d;
}
.forum-row:last-child { border-bottom: none; }
.forum-row:hover { background: #12283f; }

.forum-icon {
    width: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.dot-unread { width:9px; height:9px; border-radius:50%; background:#44b2f1; display:inline-block; }
.dot-read   { width:9px; height:9px; border-radius:50%; background:#2a4159; display:inline-block; }

.forum-info { flex: 1; min-width: 0; }
a.forum-name {
    display: block;
    font-weight: bold;
    color: #e8eff4;
    font-size: 13px;
    margin-bottom: 3px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
a.forum-name:hover { color: #44b2f1; }
.forum-desc { display: block; color: #7890a1; font-size: 11px; }
.forum-mod  { display: block; color: #7DDE7D; font-size: 11px; margin-top: 2px; }

.forum-col {
    min-width: 80px;
    text-align: center;
    color: #a9bdc9;
    font-size: 12px;
    flex-shrink: 0;
}
.forum-col dfn { display:block; font-style:normal; font-size:10px; color:#5c7186; }
.forum-col.last { min-width:180px; text-align:right; font-size:11px; color:#7890a1; line-height:1.5; }
.forum-col.last a { color: #3a9fe0; text-decoration: none; }

/* ---- Topic list ---- */
.topic-header {
    background: #09253a;
    border-bottom: 1px solid #14344d;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #7890a1;
    text-transform: uppercase;
}
.topic-title-col { flex: 1; }
.topic-col { min-width: 80px; text-align: center; }
.topic-col.last { min-width: 180px; text-align: right; }
.topic-row { align-items: flex-start; }

/* ---- Posts ---- */
.post-wrap {
    display: flex;
    border-bottom: 1px solid #14344d;
    background: #0b1826;
    margin-bottom: 1px;
}
.post-wrap:last-child { border-bottom: none; }

.post-author {
    width: 150px;
    flex-shrink: 0;
    background: #0d1f33;
    border-right: 1px solid #14344d;
    padding: 14px 12px;
    text-align: center;
}
.author-name {
    display: block;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 5px;
    word-break: break-all;
    font-family: Arial, Helvetica, sans-serif;
}
.author-role { display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; }

.post-body { flex: 1; padding: 12px 14px; }
.post-meta {
    font-size: 11px;
    color: #5c7186;
    margin-bottom: 10px;
    border-bottom: 1px solid #14344d;
    padding-bottom: 7px;
}
.post-meta a { color:#5c7186; font-size:11px; text-decoration:none; }
.post-meta a:hover { color: #44b2f1; }
.permalink { float: right; }
.post-content { color:#e8eff4; font-size:13px; line-height:1.65; font-family:Verdana,Arial,sans-serif; }

/* ---- Post images ---- */
.post-images { margin-top: 10px; }
.post-img { max-width:400px; max-height:300px; border:1px solid #14344d; border-radius:3px; margin:4px; cursor:pointer; }

/* ---- Reply / post forms ---- */
.reply-box {
    background: #0b1a2c;
    border: 1px solid #14344d;
    border-radius: 4px;
    padding: 16px;
    margin-top: 12px;
}
.reply-box h3 {
    color: #e8eff4;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}
.post-form-wrap {
    background: #0b1a2c;
    border: 1px solid #14344d;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 10px;
}
.post-form-wrap h2 {
    color: #e8eff4;
    font-size: 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #14344d;
    padding-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.form-row { margin-bottom: 12px; }
.form-row label {
    display: block;
    color: #a9bdc9;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.post-input {
    width: 100%;
    background: #060c19;
    border: 1px solid #2a4159;
    color: #e8eff4;
    padding: 8px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    border-radius: 3px;
}
.post-input:focus { border-color:#44b2f1; outline:none; }
.post-textarea {
    width: 100%;
    background: #060c19;
    border: 1px solid #2a4159;
    color: #e8eff4;
    padding: 8px 10px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    border-radius: 3px;
    resize: vertical;
}
.post-textarea:focus { border-color:#44b2f1; outline:none; }

/* ---- Login form ---- */
.login-wrap {
    background: #0b1a2c;
    border: 1px solid #14344d;
    border-radius: 4px;
    padding: 24px;
    max-width: 420px;
    margin: 20px auto;
}
.login-wrap h2 {
    color: #e8eff4;
    font-size: 16px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}
.login-form { margin-top: 16px; }

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    background: #14344d;
    border: 1px solid #2a4159;
    color: #e8eff4;
    padding: 6px 16px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
.btn:hover { background:#1a4160; border-color:#44b2f1; color:#ffffff; text-decoration:none; }
.btn-sm {
    display: inline-block;
    background: #0b1a2c;
    border: 1px solid #14344d;
    color: #a9bdc9;
    padding: 3px 9px;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
}
.btn-sm:hover { background:#12283f; color:#ffffff; text-decoration:none; }
.btn-danger { border-color:#660000; color:#FF6666; }
.btn-danger:hover { background:#330000; border-color:#990000; color:#FF4444; }
input[type="submit"].btn { border: 1px solid #2a4159; }

/* ---- Badges ---- */
.badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
}
.badge.sticky { background:#1a2a1a; border:1px solid #2a4a2a; color:#7DDE7D; }
.badge.locked { background:#2a1a1a; border:1px solid #4a2a2a; color:#FF6666; }

/* ---- Stat blocks ---- */
.stat-block {
    background: #0b1a2c;
    border: 1px solid #14344d;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.stat-block h3 {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #e8eff4;
    border-bottom: 1px solid #14344d;
    padding-bottom: 5px;
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}
.stat-block p { color:#a9bdc9; font-size:12px; line-height:1.7; font-family:Arial,Helvetica,sans-serif; }
.stat-block a { color:#3a9fe0; text-decoration:none; }

/* ---- Info / error boxes ---- */
.infobox {
    background: #0b1a2c;
    border: 1px solid #2a4159;
    border-radius: 3px;
    padding: 12px 16px;
    margin-bottom: 10px;
    color: #a9bdc9;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}
.infobox.error { background:#1a0a0a; border-color:#660000; color:#FF6666; }

/* ---- Pagination ---- */
.pagination { display:flex; gap:4px; padding:10px 0; align-items:center; }
.page-link {
    display: inline-block;
    background: #0b1a2c;
    border: 1px solid #14344d;
    color: #a9bdc9;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 12px;
    text-decoration: none;
}
.page-link:hover { background:#12283f; color:#ffffff; text-decoration:none; }
.page-current {
    display: inline-block;
    background: #14344d;
    border: 1px solid #2a4159;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 12px;
}

/* ---- Admin panel ---- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.admin-table th {
    background: #09253a;
    color: #e8eff4;
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid #14344d;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
.admin-table td { padding:7px 10px; border-bottom:1px solid #14344d; color:#a9bdc9; background:#0d1f33; }
.admin-table tr:hover td { background:#12283f; }

/* ---- Utility ---- */
.muted { color:#5c7186; font-family:Arial,Helvetica,sans-serif; }
.muted a { color:#7890a1; }

/* ---- Profile / avatar ---- */
.avatar-img { border-radius:3px; border:1px solid #14344d; }
.signature { border-top:1px solid #14344d; margin-top:10px; padding-top:8px; font-size:11px; color:#5c7186; }

/*------------------------------ FOOTER ------------------------------*/
#footer {
    background-color: #09253a;
    border-top: 1px solid #09253a;
}
#footer .body {
    background: #09253a url(images/ccfooter.jpg) no-repeat center top;
    min-height: 136px;
    padding: 36px 0;
    overflow: hidden;
}
#footer p {
    color: #7890a1;
    font-size: 12px;
    line-height: 24px;
    margin: 0;
    padding: 0 0 6px;
}
#links {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    list-style: none;
    width: auto;
    float: none;
    margin: 0 0 24px;
    padding: 0;
}
#links li { float: none; margin: 0; background: none; padding: 0; }
.social-link {
    display: block;
    text-align: center;
    color: #7890a1;
    font-size: 12px;
    line-height: 24px;
    text-decoration: none;
}
.social-link:hover,
.social-link:focus { color: #e8eff4; }
#newsletter {
    float: none;
    width: 100%;
    margin: 0;
}