/* layout containers */

.site-container { background-color: #f6f6f3; background-image: url("images/layout/body-warm.jpg"); }
.main-container { max-width: 1050px; background-color: white; }
.content-container { display: flow-root; margin: 0 var(--content-margin); }
.header-banner, .footer-banner { flex: 0 0 auto; }

/* aside */

.side-column { width: 38%; float: right; margin: 0 0 0 3.2%; }
.column-flow-view { display: none; }
.column-grid-view { display: block; }


/* side breakpoint */

@media (max-width: 920px) {
    .column-grid-view { display: none; }
    .column-flow-view { display: block; }
}


/* article */

.article-container {}

@media (max-width: 520px) {
    .article-container h1, .article-container h2 { margin-left: 2px; }
    .content-container { margin: 0 var(--content-margin-mobile); }
}

/* button link */

.button-link-menu { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: var(--nav-menu-gap); }
.button-link-bar { display: flex; flex-flow: row wrap; justify-content: flex-start; margin: var(--box-margin-large) 0; }

@media (max-width: 560px) {
    .button-link-bar { justify-content: center; }
}

.nav-button { padding: 7px 22px 9px;  border-radius: 3px; text-decoration: none; text-align: center; background-color: var(--button-color); color: white; white-space: nowrap; background-repeat: no-repeat; }
.nav-button:hover { background-color: var(--button-color-hover); }
.nav-button.selected { background-color: var(--button-color-selected); }
.nav-button.selected:hover { background-color: var(--button-color-selected-hover); }

.icon-next { background-image: url("images/icons/common/next-white.png"); }
.icon-next-black { background-image: url("images/icons/common/next-black.png"); }
.back-button, .back-icon { background-image: url("images/icons/common/back-white.png"); }
.back-button-black { background-image: url("images/icons/common/back-black.png"); }
.icon-next, .icon-next-black { padding-right: 38px; background-position: right center; }
.back-button, .back-button-black { padding-left: 32px; background-position: left center; }