@import url('/css/fonts.css');

/* Переменные для цетов, шрифтов и размеров */
:root{
    --headerbar-height: 90px;
    --menubar-height: 32px;
    --toparea-height: calc(var(--headerbar-height) + var(--menubar-height));
    
    --leftbar-background-color: #446161;/*#444161;*/
    --leftbar-width: 300px;
    --partner-background-color: #cccccc;
    --topbar-height: 110px;
    --menu-background-color: #272525;
    --header-background-color: #444161;/*#294089;*/
    --header-text-color: #ccccee;
    --pagebar-background-color: #eeeeee;
    --tableofcontents-hover-color: #dddddd;
    --art-figures-width: 320px;
    --h1-font: bold 22pt/32pt 'Noto Serif';/*sans-serif;*/
    --h2-font: bold 18pt/24pt 'Noto Serif';
    --h3-font: bold 16pt/20pt 'Noto Serif';
    --normal-font: normal 14pt/18pt 'Noto Serif';
    --medium-font: normal 12pt/14pt 'Noto Serif';
    --emph-font: italic var(--normal-font);
    --small-font: normal 10pt 'Noto Sans';
    --math-font: italic 17pt 'EB Garamond';
    --math-bold-font: bold 17pt 'EB Garamond';

    --body-background-color: #126272;
    --menu-select-background-color: #444141;/*126272;*/
    --menu-text-color: #dddddd;
    --menu-text-hover-color: #ffff99;
    --textfield-bacground-color: #eeeeee;
}

/* Общее оформление сраницы */
body {
    margin: 0;
    min-width: 974px;
}

.toparea {
    height: var(--toparea-height);
}

.logobar {
    width: var(--leftbar-width);
    height: var(--headerbar-height);
    background: var(--leftbar-background-color);
    position: relative;
    float: left;
}

.logo {
/*    position: absolute;
    top: 5px;
    left: 20px;*/
    margin:auto;
    display:block;
    margin-top:10px;
}

.headerbar {
    width: calc(100% - var(--leftbar-width));
    min-width: 674px;
    height: var(--headerbar-height);
    background: var(--header-background-color);
    position: relative;
    float: left;
}


.langbar {
    height: var(--menubar-height);
    padding-left: calc(var(--leftbar-width) - 64px);
    background: var(--menu-background-color);
    float: left;
    width: calc(100% - var(--leftbar-width) + 64px);
}



.bodyarea {
    height: auto;
    display: flex;
    min-height: calc(100vh - var(--toparea-height));
}

.leftbar {
    width: var(--leftbar-width);
    background: var(--leftbar-background-color);
/*    position: relative;
    float: left;
    bottom: 0;*/
    text-align: center;
/*    display: flex;
    flex-direction: column;
    justify-content: space-between;*/
}
.leftbar-top {
    position: relative;
    padding-top: 10px
}

.leftbar-top > a > img {
    margin-top: 10px;
    padding: 5px;
    width: 200px;
    background: var(--partner-background-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid black;
}

.footbar {
    width: var(--leftbar-width);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #888888;
    padding-bottom: 20px;
}


/*.topbar {
    position: absolute;
    top: 0;
    left: var(--leftbar-width);
    height: var(--topbar-height);
    background: var(--header-background-color);
    width: calc(100% - var(--leftbar-width));
}
*/

.pagebar {
/*    margin-left: var(--leftbar-width);*/
/*    position: relative;
    float: left;*/
    left: var(--leftbar-width);
    top: calc(var(--topbar-height) + var(--menubar-height));
    bottom: 0;
    width: var(--leftbar-width);
    background: var(--pagebar-background-color);
    width: calc(100% - var(--leftbar-width));
    min-width: 674px;
/*    min-height: calc(100vh - var(--toparea-height));*/
}



/*================================*/
/* Оформление «шапки страницы» */
.page-head {
    height: 80px;
    padding:10px 15px;
    margin:auto;
    width: calc(100% - 30px);
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.title {
    text-shadow: 1px 1px 1px #8800ff;
    font-size: 22px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding:10px 15px;
}


.subtitle {
    font-size: 14pt;
    font-weight: normal;
    color: var(--header-text-color);
    text-align: center;
}


/*================================*/

/* Оформление строки поиска */
.search {
    width: var(--leftbar-width);
}

/*================================*/

/* Оформление меню */
.menu {
    list-style: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14pt;
    display:contents;
}
ul.menu {
    width: calc(var(--leftbar-width) - 80px);
    margin: auto;
    padding: auto;
    list-style: none;
    position: absolute;
}
ul.menu > li {
    float: bottom;
    position: relative;
/*    margin-left: 16px;*/
    font-weight: bold;
}
ul.menu > li > a {
    display: block;
    padding: 5px 50px 5px 50px;
    color: var(--menu-text-color);
    text-decoration: none;
/*    border-left: 1px solid var(--menu-background-color);*/
}
ul.submenu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width:200px;
    padding: 3px;
    list-style: none;
    background: var(--menu-background-color);
    font-size: 12pt;
    font-weight: normal;
}
ul.submenu > li > a {
    display: block;
    padding: 3px;
    text-decoration: none;
    color: var(--menu-text-color);
}
ul.submenu > li > a:hover {
    color: white;
    background: var(--menu-select-background-color);
    color: var(--menu-text-hover-color);
/*    border-radius: 3px 3px 3px 3px;
*/}
/*ul.menu > li:hover > ul.submenu {
    display: block;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    border-radius: 0 5px 5px 5px;
    background: var(--menu-background-color);
    border-left: 1px solid var(--menu-text-hover-color);
    border-bottom: 1px solid var(--menu-text-hover-color);
box-shadow: -2px 2px;
}*/
ul.menu > li:hover > a {
    width: calc(var(--leftbar-width) - 140px);
    margin: auto;
    text-decoration: none;
    border-radius: 10px 10px 10px 10px;
    position: relative;
/*    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    box-shadow: -2px 0 black;*/
    background: var(--menu-background-color);
/*    border-left: 1px solid var(--menu-text-hover-color);*/
    color: var(--menu-text-hover-color);
}/*
ul.menu > li:hover::after {
    content: '';
    background: var(--menu-background-color);
    z-index: 1;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 32px; bottom: 0;
    left: 0; right: 0;
    border-left: 1px solid var(--menu-text-hover-color);
    box-shadow: -2px 0;
    border-radius: 0 0 5px 5px;
}/*
.imgmenu{
    float: left;
    margin-top: 7px;
}

/*================================*/

/* Оформление области основного текста */
.page-body {
    margin:0px;
    background: var(--textfield-bacground-color);
    font: var(--normal-font);
    padding: 20px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

h1{
    padding: 10px;
    font: var(--h1-font);
/*    font-size: 24pt;
    font-weight: bold;*/
    text-align: center;
}

h2{
    font: var(--h2-font);
    text-align: center;
}

h3{
    font: var(--h3-font);
    text-align: left;
}

td {
    padding: 5px;
    vertical-align: top;
}

li {
    padding-top: 5pt;
    padding-bottom: 4pt;
}

a {
    color: #1111aa;
    text-decoration: none;
}

a:hover {
    color: #993333;
    text-decoration: underline;
}

m {
    font: var(--math-font);
}
mb {
    font: var(--math-bold-font);
}

.contents > table {
    width:100%;
}

.contents > table > tbody > tr:hover {
    background: var(--tableofcontents-hover-color);
}

/*================================*/
/* Оформление спдержания выпуска */
.info-line {
    display:block;
    text-align: right;
    display: block;
    margin: 20px;
}

.contents {
    margin: auto;
    text-align:left;
    font-size: 14pt;
    padding: 10px;
    padding-left: 0px;
    max-width: 1200px;
}

.contents td {
    padding-top: 15px;
    padding-right: 10px;
    vertical-align: top;
}

.contents a{
    color: blue;
    text-decoration: none;
}
.contents a:hover {
    color: #993333;
    text-decoration: none;
}