/* common */

body { background-color: #f6f6f3; margin: 0;  background-position: center center;  background-repeat: repeat;  font-family: var(--base-font-family); font-size: var(--text-font-size); }

.site-container { max-width: 1050px; background-color: white; margin: 0 auto; padding-top: 1px; }
.main {  padding: 0 2.8%; margin-bottom: var(--text-margin); min-height: 650px; /* fix, better on .aside-main, but this works not ;) */ display: flow-root; /* fix short articles */}

.aside { width: 38%; float: right; margin: 0 0 0 3.2%; }

.article { min-height: 180px; }
.article p, .article ul, .article h2, .article h3 {  max-width:  var(--text-max-width);  }
.article p.slim-text { max-width: var(--slim-text-max-width);}

@media (max-width: 520px)
{
    .article h1, .article h2 { margin-left: 2px;  }
    .main {  padding: 0 1.8%; }
}

    /* common */

.button { padding: 8px 30px 10px;  border-radius: 3px; text-decoration: none; text-align: center; background-color: var(--button-color); color: white;}
.button:hover {  background-color: var(--button-color-hover);}
.button-link { padding-right: 45px; padding-left: 22px; background-image: url("images/icons/next-white.png");  background-repeat: no-repeat; background-position: right center;}

.main-menu { display: flex; flex-flow: wrap row; align-items: flex-end; gap: var(--menu-gap); }
.main-menu a { flex-grow: 1;}
.main-menu .button { padding-left: 12px;  padding-right: 12px; color: white;}

.main-menu-container { margin-left: 12px; margin-right: 12px; }
.top-menu-container nav { align-items: flex-start;}
.top-menu-container { margin-top: 11px;}
.bottom-menu-container nav { align-items: flex-end;}
.bottom-menu-container { margin-bottom: 11px;}

.toggle-menu-button { z-index: 0; padding: 10px 12px 12px; margin-bottom: var(--menu-gap); cursor: pointer; }
.toggle-menu-button:hover { background-color: var(--button-color);}
.toggle-menu-button-opened , .toggle-menu-button-opened:hover /* fix */ { background-color: var(--button-selected);}
.opened-caption { display: none;}
.toggle-menu-button-opened .opened-caption { display: initial;}
.toggle-menu-button-opened .closed-caption { display: none;}
.toggle-icon { float: right;  margin-top: 0; width: 22px; height: 22px; background-position: center top 0;  background-repeat: no-repeat;  background-image: url("images/icons/rolldown-toggle-menu.png");}
.toggle-menu-button-opened .toggle-icon { background-position-y: -50px;}


    /* common - override */

.main-menu .selected {  background-color: var(--button-selected);}
.main-menu .selected:hover {  background-color: var(--button-selected-hover); }

.scrollup-button, .scrolldown-button { background-position: right center;  background-repeat: no-repeat; }
.scrollup-button { background-image: url("images/icons/scrollup-white.png");}
.scrolldown-button { background-image: url("images/icons/scrolldown-white.png");}
.icon-right { padding-right: 14px;}


@media (max-width: 650px)
{
    .main-menu-container { margin-left: 9px; margin-right: 9px; }
    .top-menu-container { margin-top: 8px;}
    .bottom-menu-container { margin-bottom: 8px;}
    .main-menu { gap: 6px; }
    .main-menu { flex-direction: column; gap: 4px; }
    .main-menu .button {  width: 100%; }

}

@media (max-width: 570px)
{
    .main { min-height: 300px;}
    .article { min-height: auto;}
    .main-menu-container { margin-left: 8px; margin-right: 8px; }
    .top-menu-container { margin-top: 7px;}
    .bottom-menu-container { margin-bottom: 7px;}
    .main-menu { gap: 5px; }
}

/*@media (max-width: 560px)*/
/*{*/
/*    .lang-menu { right: 10px; top: 10px; gap: 9px;}*/
/*    .lang-button { padding: 7px 20px 9px 28px;}*/
/*}*/

/*@media (max-width: 420px)*/
/*{*/
/*    .main-menu { flex-direction: column; gap: 4px; }*/
/*    .main-menu .button {  width: 100%; }*/
/*}*/