Template:Main Page/styles.css

.mp-topbanner {
    width: 100%;
    background: var(--background-color-base);
    margin-top: 1.2em;
}

.mp-nav-box {
    width: 100%;
    border: 1px solid var(--border-color-ui-widget);
    border-right-width: 4px;
    border-bottom-width: 4px;
    color: var(--color-text-main);
    background-color: var(--background-color-article);
    vertical-align: top;
}

.mp-date-row {
    width: 100%;
    margin: 16px 0 18px;
    font-size: 100%;
    line-height: 130%;
    color: var(--color-text-main);
    text-align: center;
}

.mp-blue-box {
    width: 100%;
    background: var(--bg-mainpage-blue);
    border: 2px solid var(--border-mainpage-blue);
    height: 100%;
}

.mp-blue-box-wide {
    width: 100%;
    background: var(--bg-mainpage-blue);
    border: 2px solid var(--border-mainpage-blue);
    margin: 1.5em 0 0;
}

.mp-purple-box {
    width: 100%;
    background: var(--bg-mainpage-purple);
    border: 2px solid var(--border-mainpage-purple);
    margin: 1.5em 0 0;
}

.mp-help-box {
    width: 100%;
    border: 1px solid var(--border-color-ui-widget);
    border-right-width: 4px;
    border-bottom-width: 4px;
    color: var(--color-text-main);
    background-color: var(--background-color-article);
    height: 100%;
}

/* Main Page Blue Box Headers & Subheaders */
.mp-blue-box .portal-box-header,
.mp-blue-box-wide .portal-box-header {
    background: var(--bg-mainpage-blue-header) !important;
    border-bottom: 1px solid var(--border-mainpage-blue) !important;
    color: var(--color-text-main) !important;
}

.mp-blue-box .portal-box-content,
.mp-blue-box-wide .portal-box-content {
    background: var(--bg-mainpage-blue-accent) !important;
    border-bottom: 1px solid var(--border-mainpage-blue) !important;
    color: var(--color-base) !important;
}

/* Main Page Purple Box Header & Subheader */
.mp-purple-box .portal-box-header {
    background: var(--bg-mainpage-purple-header) !important;
    border-bottom: 1px solid var(--border-mainpage-purple) !important;
    color: var(--color-text-main) !important;
}

.mp-purple-box .portal-box-content {
    background: var(--bg-mainpage-purple-accent) !important;
    border-bottom: 1px solid var(--border-mainpage-purple) !important;
    color: var(--color-base) !important;
}

/* Override inline black text & h2 background inside Portal headers */
.portal-box-header h2,
.portal-box-header span {
    background: transparent !important;
    color: var(--color-text-main) !important;
}

.mp-footer {
    margin-top: 1.5em;
    border: 2px solid var(--border-mainpage-blue, #B8C7D9);
    background-color: var(--bg-mainpage-blue, #f2f6ff);
    padding: 1em;
    text-align: center;
}