/* ============================================================
   BeloHorizonte.com Stylesheet
   ============================================================ */

/* ============================================================
   BASE STYLES
   ============================================================ */

body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #fff;
    color: #000;
    margin: 0;
    padding: 10px;
    overflow-x: hidden;
}

input {
    font-size: 10px;
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 17px;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
    color: #000;
    text-decoration: none;
    word-wrap: break-word;
}

a:visited {
    color: #333;
}

a:hover,
a:active {
    color: #000080;
    text-decoration: underline;
}

/* ============================================================
   TABLES - Base Configuration
   ============================================================ */

table {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    table-layout: auto;
    margin: 0;
}

table table {
    width: 100% !important;
}

/* ============================================================
   TABLES - HTML5 Compatible Classes
   ============================================================ */

.table-main-content {
    border: 0;
    padding: 0;
    border-spacing: 4px;
    width: 100%;
    margin: 0 auto 0 auto;
}

.table-standard {
    border: 0;
    padding: 0;
    border-spacing: 4px;
    width: 100%;
    margin: 0;
}

.table-bordered {
    border: 1px dashed #808080;
    padding: 0;
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
    margin: 0;
}

.table-bordered td {
    border: 1px dashed #808080;
    padding: 4px;
    word-wrap: break-word;
}

.table-data {
    border: 1px dashed #000;
    padding: 0;
    border-spacing: 0;
    width: 100%;
    margin: 0;
}

.table-topmenu {
    border: 0;
    padding: 0;
    border-spacing: 2px;
    width: 100%;
    margin: 0 auto 0 auto;
}

.table-topmenu td {
    vertical-align: top;
    text-align: center;
    padding: 2px;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.fixed-col {
    width: 130px;
}

.flex-col {
    width: auto;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.nav-menu {
    text-align: center;
    margin: 0 0 10px 0;
}

.nav-menu table {
    margin: 0 auto;
}

.nav-menu a {
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-size: 14px;
}

/* ============================================================
   HEADER & FOOTER
   ============================================================ */

.header {
    text-align: center;
    margin: 10px 0;
}

.header h1 {
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    color: #000080;
    font-size: 36px;
    margin: 10px 0;
}

.footer {
    text-align: center;
    margin: 10px 0 0 0;
    padding: 0;
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.footer-links {
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    color: #000080;
    font-size: 16px;
    margin: 0 0 10px 0;
}

.footer-text {
    text-align: center;
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
}

/* ============================================================
   BACKGROUND COLORS
   ============================================================ */

.bg-green {
    background-color: #D0F0D0;
}

.bg-light-gray {
    background-color: #F0F0F0;
}

.bg-light-blue {
    background-color: #D0D0F0;
}

.bg-light-red {
    background-color: #F0D0D0;
}

.bg-light-yellow {
    background-color: #F0F0D0;
}

.bg-gray {
    background-color: #CCCCCC;
}

.bg-silver {
    background-color: #C0C0C0;
}

.bg-white {
    background-color: #FFFFFF;
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */

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

.text-center table {
    margin-left: auto;
    margin-right: auto;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-navy {
    color: #000080;
}

.small-text {
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* ============================================================
   TITLE STYLES
   ============================================================ */

.site-title {
    font-family: 'Times New Roman', Times, serif;
    color: #000080;
    font-size: 28px;
    font-weight: bold;
    padding: 6px 12px;
    line-height: 1.3;
}

.section-title {
    font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
    color: #000080;
    font-size: 18px;
    font-weight: bold;
}

/* ============================================================
   TABLE CELL UTILITIES
   ============================================================ */

.width-50 {
    width: 50%;
}

.width-100 {
    width: 100%;
}

.width-120 {
    width: auto;
    min-width: 80px;
}

.width-130 {
    width: auto;
    min-width: 100px;
}

.width-180 {
    width: auto;
    min-width: 120px;
}

.width-200 {
    width: auto;
    min-width: 120px;
}

.width-400 {
    width: auto;
}

.width-600 {
    width: 100%;
    max-width: 600px;
}

.valign-top {
    vertical-align: top;
}

.valign-middle {
    vertical-align: middle;
}

.cell-header {
    background-color: #CCCCCC;
    text-align: center;
    vertical-align: top;
    padding: 8px 4px;
}

.cell-data {
    background-color: #CCCCCC;
    vertical-align: top;
    text-align: center;
    padding: 8px 4px;
}

.cell-data-blue {
    background-color: #D0D0F0;
    vertical-align: top;
    text-align: center;
    padding: 8px 4px;
}

/* ============================================================
   BANNERS
   ============================================================ */

.banner-center {
    text-align: center;
    margin: 10px 0;
}

/* ============================================================
   RESPONSIVE DESIGN - Mobile & Tablets
   ============================================================ */

/* Tablets and small desktops */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }

    .site-title {
        font-size: 24px;
    }

    .table-main-content {
        width: 100%;
        padding: 2px;
        border-spacing: 2px;
    }

    .width-50 {
        width: 100%;
        display: block;
    }

    .table-main-content tr {
        display: block;
    }

    .table-main-content td {
        display: block;
        width: 100% !important;
    }

    .fixed-col,
    .flex-col {
        width: 100% !important;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

/* Mobile phones in portrait */
@media (max-width: 320px) {
    body {
        padding: 5px;
        font-size: 14px;
    }

    .content-section {
        padding: 8px 4px;
    }

    .site-title {
        font-size: 20px;
        padding: 4px 8px;
    }

    .section-title {
        font-size: 16px;
    }

    .header h1,
    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }

    hr {
        margin: 10px 0;
    }

    /* Make all tables stack vertically */
    table {
        width: 100% !important;
        display: block;
    }

    table tbody,
    table tr {
        display: block;
        width: 100%;
    }

    table td,
    table th {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        padding: 8px 4px;
    }

    /* Data tables for content */
    .table-bordered td,
    .table-data td,
    .cell-header,
    .cell-data,
    .cell-data-blue {
        min-width: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Navigation and small tables */
    .nav-menu table,
    .nav-menu table tr,
    .nav-menu table td {
        display: table;
        width: auto;
    }

    /* Fixed and flex columns stack */
    .fixed-col,
    .flex-col,
    .width-50,
    .width-120,
    .width-130,
    .width-180,
    .width-200,
    .width-400 {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Lists spacing */
    ul {
        padding-left: 10px;
        margin: 10px 0;
    }

    li {
        margin: 6px 0;
        line-height: 1.5;
    }

    /* Links should wrap */
    a {
        word-break: break-word;
        hyphens: auto;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Small text adjustments */
    .small-text {
        font-size: 11px;
    }

    /* Footer adjustments */
    .footer,
    .footer-text {
        font-size: 11px;
        padding: 10px 5px;
    }

    .footer-links {
        font-size: 14px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    body {
        padding: 3px;
        font-size: 13px;
    }

    .site-title {
        font-size: 18px;
    }

    h1 {
        font-size: 18px;
    }

    h2 {
        font-size: 16px;
    }

    .section-title {
        font-size: 14px;
    }

    .small-text {
        font-size: 10px;
    }
}