/* ==================================================
   WIETFORUM.BE - SE:GAMER DARK
   Complete CSS
   Desktop + Tablet + Mobiel
   ================================================== */

/* =========================================
   BASIS
   ========================================= */

html, body {
    background: url("./images/bg.jpg") repeat #F9F9F9;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

.simple {
    min-height: 100%;
    padding: 0 5px;
}

h1 {
    font-family: "Oswald", Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 3em;
    margin: 0;
}

h1 span {
    color: #ff992c;
}

h2 {
    font-family: "Oswald", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    margin-top: 0;
}

h3 {
    color: #000000;
}

li.header dt,
li.header dd {
    font-family: "Oswald", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.2em;
}

.forumtitle,
.topictitle {
    font-family: "Oswald", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.2em;
}

.postlink,
.postlink:visited,
.postlink:hover {
    background: none;
    color: inherit;
    border: none;
}

.rules .postlink {
    border-bottom: 1px dotted;
}

.content,
.postbody h3 {
    font-family: Arial, Helvetica, sans-serif;
}

.postbody h3 {
    font-size: 1.2em;
}

.postbody .content {
    font-size: 1.2em;
}

.site_info {
    background: rgba(0,0,0,0.5);
    display: inline-block;
    overflow: hidden;
    padding: 10px 15px;
    margin: 45px 0;
}

.site_info p {
    margin: 0;
    padding-left: 16px;
}

#nav-breadcrumbs {
    margin: 15px 0;
}

.wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    border-radius: 15px;
}

.search-header {
    box-shadow: 0 0 10px #5b5b5b;
}

/* =========================================
   BANNER
   ========================================= */

.headerbar {
    height: 158px;
    min-height: 158px;
    box-sizing: border-box;
    background-color: #000000;
    background-image: url("https://wietforum.be/styles/SE_Gamer_Dark/theme/images/banner.jpg?v=20261009");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    border-radius: 7px 7px 0 0;
    padding: 0 30px;
    margin: 0;
}

.navbar {
    background-color: #dfdfdf;
}

.forabg,
.forumbg {
    background-color: #141414;
    background-image: url("./images/forumbg.gif?v=20261008");
    padding: 0;
}

li.header {
    padding-top: 5px;
}

.copyright a {
    color: #ff992c !important;
}

.navlinks {
    border-top: none;
}

li.row.reported {
    background-color: #ECD5D8 !important;
}

li.header dt,
li.header dd {
    padding: 6px 0 10px 0;
}

/* Ongewenste categorie-driehoekjes */
li.header dl.row-item dt {
    background: none;
}

.forumbg,
.forabg {
    margin-bottom: 15px;
}

/* Bestaand forumlogo behouden */
.site_logo {
    background-image: url("./images/site_logo.svg?v=20261008");
}

#nav-main > li > a,
#nav-footer > li > span > a,
#nav-footer > li > a,
#page-footer .navbar {
    color: #FFFFFF;
}

.navbar i {
    color: #ff992c;
}

.badge {
    background-color: #ff992c;
    top: 5px;
    opacity: 1;
}

.copyright span {
    color: #cccccc;
}

.search-header {
    margin-top: 79px;
}

li.row {
    border-top: none;
    padding: 5px 0;
}

li.header dl.row-item dt .list-inner {
    padding-left: 0;
    padding-right: 30px;
}

.action-bar {
    margin: 15px 0;
}

/* =========================================
   FORUMICONEN
   ========================================= */

.global_read { background-image: url("./images/icon_read.png?v=20261008"); }
.global_read_mine { background-image: url("./images/icon_read_mine.png?v=20261008"); }
.global_read_locked { background-image: url("./images/icon_read_locked.png?v=20261008"); }
.global_read_locked_mine { background-image: url("./images/icon_read_locked_mine.png?v=20261008"); }
.global_unread { background-image: url("./images/icon_unread.png?v=20261008"); }
.global_unread_mine { background-image: url("./images/icon_unread_mine.png?v=20261008"); }
.global_unread_locked { background-image: url("./images/icon_unread_locked.png?v=20261008"); }
.global_unread_locked_mine { background-image: url("./images/icon_unread_locked_mine.png?v=20261008"); }

.announce_read { background-image: url("./images/icon_read.png?v=20261008"); }
.announce_read_mine { background-image: url("./images/icon_read_mine.png?v=20261008"); }
.announce_read_locked { background-image: url("./images/icon_read_locked.png?v=20261008"); }
.announce_read_locked_mine { background-image: url("./images/icon_read_locked_mine.png?v=20261008"); }
.announce_unread { background-image: url("./images/icon_unread.png?v=20261008"); }
.announce_unread_mine { background-image: url("./images/icon_unread_mine.png?v=20261008"); }
.announce_unread_locked { background-image: url("./images/icon_unread_locked.png?v=20261008"); }
.announce_unread_locked_mine { background-image: url("./images/icon_unread_locked_mine.png?v=20261008"); }

.forum_link { background-image: url("./images/icon_read.png?v=20261008"); }
.forum_read { background-image: url("./images/icon_read.png?v=20261008"); }
.forum_read_locked { background-image: url("./images/icon_read_locked.png?v=20261008"); }
.forum_read_subforum { background-image: url("./images/icon_read.png?v=20261008"); }
.forum_unread { background-image: url("./images/icon_unread.png?v=20261008"); }
.forum_unread_locked { background-image: url("./images/icon_unread_locked.png?v=20261008"); }
.forum_unread_subforum { background-image: url("./images/icon_unread.png?v=20261008"); }

.sticky_read { background-image: url("./images/icon_read.png?v=20261008"); }
.sticky_read_mine { background-image: url("./images/icon_read_mine.png?v=20261008"); }
.sticky_read_locked { background-image: url("./images/icon_read_locked.png?v=20261008"); }
.sticky_read_locked_mine { background-image: url("./images/icon_read_locked_mine.png?v=20261008"); }
.sticky_unread { background-image: url("./images/icon_unread.png?v=20261008"); }
.sticky_unread_mine { background-image: url("./images/icon_unread_mine.png?v=20261008"); }
.sticky_unread_locked { background-image: url("./images/icon_unread_locked.png?v=20261008"); }
.sticky_unread_locked_mine { background-image: url("./images/icon_unread_locked_mine.png?v=20261008"); }

.topic_moved { background-image: url("./images/icon_read.png?v=20261008"); }

.pm_read,
.topic_read { background-image: url("./images/icon_read.png?v=20261008"); }

.topic_read_mine { background-image: url("./images/icon_read_mine.png?v=20261008"); }
.topic_read_hot { background-image: url("./images/icon_read.png?v=20261008"); }
.topic_read_hot_mine { background-image: url("./images/icon_read_mine.png?v=20261008"); }
.topic_read_locked { background-image: url("./images/icon_read_locked.png?v=20261008"); }
.topic_read_locked_mine { background-image: url("./images/icon_read_locked_mine.png?v=20261008"); }

.pm_unread,
.topic_unread { background-image: url("./images/icon_unread.png?v=20261008"); }

.topic_unread_mine { background-image: url("./images/icon_unread_mine.png?v=20261008"); }
.topic_unread_hot { background-image: url("./images/icon_unread.png?v=20261008"); }
.topic_unread_hot_mine { background-image: url("./images/icon_unread_mine.png?v=20261008"); }
.topic_unread_locked { background-image: url("./images/icon_unread_locked.png?v=20261008"); }
.topic_unread_locked_mine { background-image: url("./images/icon_unread_locked_mine.png?v=20261008"); }

dl.row-item {
    background-size: 27px;
}

/* =========================================
   KLEUREN
   ========================================= */

a:link,
a:active,
a:visited,
.icon.icon-blue {
    color: #ff992c;
}

a:hover,
a:hover .icon.icon-blue {
    color: #ffa212;
}

.pagination li.active span,
.pagination li a:hover,
.global_unread:before,
.global_unread_mine:before,
.global_unread_locked:before,
.global_unread_locked_mine:before,
.announce_unread:before,
.announce_unread_mine:before,
.announce_unread_locked:before,
.announce_unread_locked_mine:before,
.forum_unread:before,
.forum_unread_locked:before,
.forum_unread_subforum:before,
.sticky_unread:before,
.sticky_unread_mine:before,
.sticky_unread_locked:before,
.sticky_unread_locked_mine:before,
.pm_unread:before,
.topic_unread:before,
.topic_unread_mine:before,
.topic_unread_hot:before,
.topic_unread_hot_mine:before,
.topic_unread_locked:before,
.topic_unread_locked_mine:before {
    background-color: #ff992c !important;
}

/* =========================================
   TABLET
   ========================================= */

@media only screen and (max-width: 920px) {

    body {
        padding-left: 5px;
        padding-right: 5px;
    }

    #wrap,
    .wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   MOBIEL - TOT 700 PX
   ========================================= */

@media only screen and (max-width: 700px) {

    html {
        overflow-x: clip;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 6px;
        box-sizing: border-box;
        overflow-x: clip;
    }

    /* Forum past automatisch op scherm */
    #wrap,
    .wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    #page-body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Banner correct in verhouding */
    .headerbar {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1400 / 158;
        margin: 0 !important;
        padding: 0;
        background-position: center center;
        background-size: 100% 100%;
        border-radius: 5px 5px 0 0;
    }

    /* Bestaand logo en iconen behouden */
    .site_logo {
        background-size: contain;
    }

    /* Mobiele navigatie */
    .navbar {
        max-width: 100%;
        box-sizing: border-box;
    }

    ul#nav-breadcrumbs {
        margin: 10px 0;
    }

    /* Welkomstblok compacter */
    #page-body h1 {
        font-size: 21px !important;
        line-height: 1.3 !important;
        overflow-wrap: break-word;
    }

    #page-body h2 {
        font-size: 19px !important;
        line-height: 1.35 !important;
    }

    #page-body .content {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Voorkom te brede inhoud */
    .content,
    .postbody,
    .postbody .content,
    .mchat-text,
    .mchat-message {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    .content img,
    .postbody img,
    .mchat-text img {
        max-width: 100%;
        height: auto;
    }

    /* Forumcategorieën */
    .forabg,
    .forumbg {
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 12px;
    }

    li.header dl.row-item dt .list-inner {
        padding-left: 0;
        padding-right: 8px;
    }

    /* Bestaande avatars in topics */
    .postprofile .avatar,
    .postprofile .avatar img,
    .postprofile .avatar-container,
    .postprofile .avatar-container img {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .postprofile .avatar img,
    .postprofile .avatar-container img {
        max-width: 48px !important;
        max-height: 48px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }

    /* mChat breedte */
    #mchat-main,
    #mchat-body,
    .mchat-message,
    .mchat-text {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Chattekst kleiner en leesbaarder */
    .mchat-message,
    .mchat-text {
        font-size: 13px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere;
    }

    /* Bestaande avatars in mChat */
    .mchat-avatar,
    .mchat-avatar img,
    .mchat-user-avatar,
    .mchat-user-avatar img {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mchat-avatar img,
    .mchat-user-avatar img {
        max-width: 36px !important;
        max-height: 36px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }

    /* mChat knoppen */
    #mchat-main button,
    #mchat-main .button {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* mChat invoerveld */
    #mchat-main textarea,
    #mchat-main input[type="text"],
    #mchat-body textarea,
    #mchat-body input[type="text"] {
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px;
    }

    /* Zoekveld */
    .search-header {
        max-width: 100%;
    }

    /* Actiebalk */
    .action-bar {
        margin: 10px 0;
    }
}

/* =========================================
   WIETFORUM.BE - VEILIGE MOBIELE FIXES
   Bestaande opmaak behouden
   ========================================= */

/* Afbeeldingen in berichten */
.postbody .content img,
.attach-image img {
    max-width: 100%;
    height: auto;
}

/* Video's binnen schermbreedte */
.postbody .content iframe,
.postbody .content video {
    max-width: 100%;
}

/* Codeblokken niet laten uitsteken */
.codebox {
    max-width: 100%;
    box-sizing: border-box;
}

.codebox pre {
    overflow-x: auto;
}

/* Tablet */
@media only screen and (max-width: 920px) {

    .headerbar {
        height: auto;
        min-height: 0;
        aspect-ratio: 1400 / 158;
        padding: 0;
    }
}

/* Mobiel */
@media only screen and (max-width: 700px) {

    .headerbar {
        aspect-ratio: 1400 / 158;
    }

    .content img,
    .postbody img {
        max-width: 100%;
        height: auto;
    }

    .mchat-text {
        overflow-wrap: anywhere;
    }
}

/* =========================================
   WIETFORUM.BE - MCHAT MOBIELE UITLIJNING
   Alleen voor schermen tot 700px
   ========================================= */

@media only screen and (max-width: 700px) {

    /* Chatcontainer */
    #mchat-main,
    #mchat-body {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Chatberichten */
    #mchat-main .mchat-message {
        position: relative;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    /* Actieknoppen op een eigen regel */
    #mchat-main .mchat-buttons,
    #mchat-main .mchat-message-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Berichtinhoud */
    #mchat-main .mchat-text {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* Chatinvoer */
    #mchat-main textarea {
        display: block;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }

    /* Afbeeldingen */
    #mchat-main img {
        max-width: 100%;
        height: auto;
    }
}