/* Base Styles */
body {
    margin: 18px;
    background-color: #F1F1F1;
    font-family: Arial, sans-serif;
}

a { color: #6D6D6D; text-decoration: underline; font-size: 10px; font-family: Arial; }
a:link { color: #6D6D6D; text-decoration: underline; }
a:hover { color: #AAAAAA; text-decoration: underline; }
a:active { color: #AAAAAA; text-decoration: underline; }

/* Wrapper for centering and max-width */
.main-wrapper {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Header Styles */
.header-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.logo-container {
    flex: 0 0 200px;
}

.logo-img {
    width: 200px;
    height: 100px;
}

.title-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.brand-name {
    text-align: center;
}

/* Back to Arial, sans-serif */
.cid1 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #D7D7D7;
}
.cid2 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #FFB4B4;
}

/* Navigation & Buttons */
.nav-container {
    width: 100%;
    height: 18px;
    display: flex;
    align-items: center;
    background: url(../images/design/btn_bg.gif) left repeat-x;
}

.btn_left { flex: 0 0 14px; height: 18px; background: url(../images/design/btn_left.gif) right no-repeat; }
.btn_bg { height: 18px; display: flex; align-items: center; padding: 0 5px; }
.btn_right { flex: 0 0 14px; height: 18px; background: url(../images/design/btn_right.gif) left no-repeat; }

.btn_divider { font-family: Arial; font-size: 10px; font-weight: bold; color: #989898; margin: 0 5px; }
.btn_lang { font-family: Arial; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #989898; text-decoration: none; }
.btn_lang_active { font-family: Arial; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #FF6D6D; text-decoration: none; }

.flex-spacer {
    flex-grow: 1;
}

.menu1 { font-family: Arial; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #989898; text-decoration: none; }
.menu1_active { font-family: Arial; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #FF6D6D; text-decoration: none; }

/* Content Area */
.content-area {
    display: flex;
    gap: 20px;
}

.main-column {
    flex: 7;
}

.side-column {
    flex: 3;
    min-width: 250px;
    display: flex;
    flex-direction: column;
}

.text { font-family: Arial; font-size: 12px; color: #9A9A9A; text-decoration: none; text-align: justify; line-height: 1.5; }
.text_preamble { font-family: Arial; font-size: 12px; font-weight: bold; color: #9A9A9A; text-align: justify; padding: 8px; flex: 1; }

/* Preamble Box */
.preamble-box {
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    align-self: center;
}

.preamble-top, .preamble-bottom {
    display: flex;
    height: 6px;
    width: 100%;
}

.preamble-content {
    display: flex;
    width: 100%;
}

.border-top { flex: 1; background: url(../images/design/bord2.gif) bottom left repeat-x; }
.border-bottom { flex: 1; background: url(../images/design/bord6.gif) left top repeat-x; }
.border-left { flex: 0 0 6px; background: url(../images/design/bord8.gif) left top repeat-y; }
.border-right { flex: 0 0 6px; background: url(../images/design/bord4.gif) left top repeat-y; }

.corner-tl, .corner-tr, .corner-bl, .corner-br {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    display: block;
}

/* Footer */
.footer-section {
    padding: 15px 0 0 15px;
}

.copyright { font-family: Arial; font-size: 10px; font-weight: bold; color: #ADADAD; }
.copyright_link { color: #FF8484; text-decoration: none; }
.copyright_link:hover { color: #FF5B5B; }

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .header-section {
        flex-direction: column;
        text-align: center;
    }

    .content-area {
        flex-direction: column;
        gap: 30px;
    }

    .side-column {
        order: 1;
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .main-column {
        order: 2;
        width: 100%;
        flex: none;
    }

    .nav-container {
        height: auto;
        flex-wrap: wrap;
        padding: 5px 0;
    }

    .logo-container {
        flex: 0 0 auto;
    }
}