body {
    background-color:#282828;
    color: #eee;                 /* was #ooo385 (invalid) — now explicit light text */
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #fbb;
}

a:hover, a:active {
    background-color: #a3dae5;
    color: #FFF
}

.globalPageTitle {
    font-family:Arial, sans-serif;
    font-weight: normal;
    margin-bottom:-7px;
    padding-bottom:0px;
    color:#FFF;
}

.globalPageSubtitle {
    font-family:brush script mt, cursive;
    margin-top:-7px;
    padding-top:0px;
    color:#FFF;
}

.body {
    margin: 0 auto;
    width: 80%;
    clear: both;
}

.mainheader img {
    width: 30%;
    height: auto;
    margin: 2% 0;
}

.mainheader nav {
    background-color: #3c3c3c;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainheader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainheader nav ul li {
    float: left;
    display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #FFF;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited{
    background-color: #22418A;
    text-shadow: none;
}

.mainheader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.globalEncapsulator {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
}

.articleSectionEncapsulator {
    width: 70%;
    float: left;
}

.fullArticleSectionEncapsulator {
    width: 100%;
    float: left;
}

.primaryArticleEncapsulator {
    background-color: #30415b;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
    color: #FFF
}

.articleTitle {
    color: #FFF
}

.articleTitleAlt {
    color: #0016ba
}

.articleSubtitle {
    font-style: italic;
    color: #FFF;
    font-size: 90%;
}

.sidebarAsideEncapsulator {
    width: 21%;
    float: left;
    background-color: #152135;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 2% 3%;
    color: #bfbdbd;
}

.mainfooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: #3c3c3c;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #FFF;
}

.mainfooter p {
    width: 92%;
    margin: 2% auto;
}

.centerHorizontally {
    margin: 0 auto;
    width: 50%;
}

.centerImage {
    max-width: 100%;
    max-height: 100%;
}

/*####################################################################################
########################### CODE SNIPPET FORMATTING ##################################
######################################################################################*/
pre {
    background: #171626;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #FFF;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

/*####################################################################################
############## ADDITIONS (new components; same dark palette as above) ################
######################################################################################*/

/* Status badges: honest content labeling */
.statusBadge{
    display:inline-block; font-size:72%; font-weight:bold; letter-spacing:.04em;
    text-transform:uppercase; padding:2px 8px; border-radius:5px;
    margin-right:6px; vertical-align:middle;
}
.statusBadge.confirmed{ background:#1f6f43; color:#FFF; }
.statusBadge.lab{       background:#8a5a00; color:#FFF; }
.statusBadge.draft{     background:#7a1f1f; color:#FFF; }

/* Metadata panel for projects/labs */
.metaPanel{
    background:#152135; border-left:3px solid #f36d33; border-radius:5px;
    padding:3% 5%; margin:2% 0; color:#bfbdbd;
}
.metaPanel dl{ margin:0; }
.metaPanel dt{ font-weight:bold; color:#FFF; margin-top:.6em; }
.metaPanel dd{ margin:0 0 .2em 0; }

/* Table of contents / related boxes */
.tocBox{
    background:#152135; border-radius:5px; padding:2% 4%; margin:2% 0; color:#bfbdbd;
}
.tocBox h3{ color:#FFF; margin:.4em 0; }
.tocBox ul{ margin:.3em 0; padding-left:1.3em; }

/* Update / correction notes */
.updateNote{
    background:#30415b; border-left:3px solid #a3dae5; border-radius:5px;
    padding:2% 4%; margin:2% 0; font-size:92%; color:#FFF;
}
.updateNote b{ color:#a3dae5; }

/* Section index cards */
.indexCard{
    background:#30415b; border-radius:5px; padding:3% 5%; margin-top:2%; color:#FFF;
}
.indexCard h2{ color:#FFF; margin-bottom:.1em; }
.indexCard .cardMeta{ color:#bfbdbd; font-size:88%; font-style:italic; }

/* Topic tags (server-rendered filter links) */
.topicTag{
    display:inline-block; font-size:80%; background:#22418A; color:#FFF;
    border-radius:5px; padding:1px 7px; margin:2px 3px 2px 0;
}
.topicTag:hover{ background:#a3dae5; color:#152135; }

/* Scope / authorization warning for lab content */
.scopeWarning{
    background:#7a1f1f; border-radius:5px; padding:2% 4%; margin:2% 0;
    color:#FFF; font-size:92%;
}

/* Inline definition/term callout */
.defBox{
    background:#152135; border-radius:5px; padding:2% 4%; margin:2% 0; color:#bfbdbd;
}
.defBox b{ color:#FFF; }


/* ---- Topic filter: a slim secondary nav, evenly spaced ---- */
.filterNav{
    background:#3c3c3c;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin:2% 0;                 /* equal top & bottom gap between encapsulators */
    padding:0 10px;
    overflow:hidden;
}
.filterNav .filterNavLabel{
    float:left;
    color:#bfbdbd;
    font-weight:bold;
    font-size:80%;               /* was 90% — less prominent */
    padding:7px 12px 7px 4px;    /* was 12px 14px — thinner */
}
.filterNav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.filterNav ul li{
    float:left;
    display:inline;
}
.filterNav ul li a{
    display:inline-block;
    color:#FFF;
    padding:7px 12px;            /* was 12px 16px — thinner bar */
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    font-size:85%;               /* slightly smaller than main nav */
}
.filterNav ul li a:hover,
.filterNav ul li.active a{
    background-color:#22418A;
    color:#FFF;
    text-shadow:none;
}

/*####################################################################################
######################### MOBILE DEVICE REFORMATTING #################################
######################################################################################*/
@media only screen and (min-width: 150px) and (max-width: 1150px)
{
    .body { width: 90%; font-size: 95%; }
    .mainheader img { width: 100%; }
    .mainheader nav { height: 240px; }          /* was 160px; taller for 5 nav items */
    .mainheader nav ul { padding-left: 0; }
    .mainheader nav ul li { width: 100%; text-align: center; }
    .mainheader nav a:link, .mainheader nav a:visited {
        padding: 10px 25px; height: 20px; display: block;
    }
    .articleSectionEncapsulator { width: 100%; float: left; margin-top: 2%; }
    .primaryArticleEncapsulator {
        background-color: #30415b; border-radius: 5px;
        -moz-border-radius: 5px; -webkit-border-radius: 5px;
        padding: 3% 5%; margin-top: 2%; margin-bottom: 4%;
    }
    .articleSubtitle { display: none; }
    .sidebarAsideEncapsulator {
        width: 94%; margin-left: 0; margin-top: 2%; margin-bottom: 2%;
        margin-right: 0; padding: 2% 3%;
    }


    /* Filter: label on its own line, topics wrap as compact pills */
    .filterNav { padding: 6px 8px; }
    .filterNav .filterNavLabel {
        float: none;
        display: block;
        padding: 4px 4px 6px 4px;
        text-align: left;
    }
    .filterNav ul { display: block; }
    .filterNav ul li {
        float: none;
        display: inline-block;   /* pills sit side by side and wrap */
        width: auto;             /* was 100% — stops the tall vertical stack */
        margin: 2px;
    }
    .filterNav ul li a {
        display: inline-block;
        padding: 6px 12px;
    }
}