body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "Georgia", serif;
    background-color: #ddd;
    padding: 0;
    margin: 0;
}

.header {
    padding: 0 0 0 0;
}

.header .siteName {
    vertical-align: middle;
    color: #a01338;
    font-size: 32px;
    font-weight: 500;
    padding: 0 0 0 10px;
}

.header .mainLogo {
    vertical-align: middle;
    width: 50px;
}

.header .menuBar {
    color: white;
    background-color: #691c14;
    padding: 0 0 0 10px;
}

.header .menuBar a {
    color: white;
}

.submenuArea .area1 {
    display: inline-block;
}

.submenuArea .area2 {
    display: inline-block;
}

.layoutMainArea {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    max-width: 900px;
    background-color: #fff;
    /* padding: 10px 10px 10px 10px; */
    border-radius: 7px;
}

.article {
    padding: 0 0.2em 1ex 0.2em;
}

.siteFooter {
    color: white;
    background-color: #691c14;
    padding: 10px 0 150px 10%;
}

.languageSelectPanel {
    margin: 5px 10px 5px 10px;
}

/* FontSizePanel Component */
.fontSizePanel {
    margin: 5px 10px;
}

.FontSizePanel_button {
    margin-right: 10px;
    cursor: pointer;
    text-decoration: underline;
    color: #691c14;
    /* Match site color */
    font-weight: bold;
}

.FontSizePanel_button:hover {
    color: #a01338;
}

/* Font Size Levels for .article */
body.font-level-1 .article {
    font-size: 13px;
}

body.font-level-2 .article {
    font-size: 14px;
}

body.font-level-3 .article {
    font-size: 15px;
}

body.font-level-4 .article {
    font-size: 16px;
}

body.font-level-5 .article {
    font-size: 17px;
}

body.font-level-6 .article {
    font-size: 18px;
}

body.font-level-7 .article {
    font-size: 19px;
}

body.font-level-8 .article {
    font-size: 20px;
}

/* Default */
body.font-level-9 .article {
    font-size: 21px;
}

body.font-level-10 .article {
    font-size: 22px;
}

body.font-level-11 .article {
    font-size: 23px;
}

body.font-level-12 .article {
    font-size: 24px;
}

body.font-level-13 .article {
    font-size: 25px;
}

body.font-level-14 .article {
    font-size: 26px;
}

body.font-level-15 .article {
    font-size: 27px;
}

body.font-level-16 .article {
    font-size: 28px;
}

body.font-level-17 .article {
    font-size: 29px;
}

body.font-level-18 .article {
    font-size: 30px;
}

body.font-level-19 .article {
    font-size: 31px;
}

body.font-level-20 .article {
    font-size: 32px;
}

body.font-level-21 .article {
    font-size: 33px;
}


/* 1. BASE STYLES (Mobile-First)
  Default styles for older phones, small screens, 
  and browsers that don't support media queries.
*/
body {
    font-size: 100%; /* Respects user browser settings */
    line-height: 1.5;
}

/* 2. SMALL TO MEDIUM DEVICES (Tablets / Large Phones)
  Breakpoint: ~600px 
*/
@media only screen and (min-width: 37.5em) {
    .article {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/* 3. LARGE DEVICES (Laptops / Desktops)
  Breakpoint: ~1024px 
*/
@media only screen and (min-width: 64em) {
    .article {
        padding-left: 6%;
        padding-right: 6%;
    }
}

/* 4. EXTRA LARGE DEVICES (High-res monitors)
  Breakpoint: ~1440px 
*/
@media only screen and (min-width: 90em) {
    /* Specialized layout for very wide screens */
}

/* 5. SPECIAL CONSIDERATION: LOW-END DATA/PRINT
  Useful for regions with expensive data or for older devices.
*/
@media print, (prefers-reduced-data: reduce) {
    /*
    .heavy-animations, .background-video {
        display: none !important;
    }
    */
}