/***************
 * Basic elements
 ***************/
/* Body and main container */

html { font-size: 62.5%; }

body {
    position:absolute; left:10px; right: 10px;
    font-family: OpenSans, Arial, sans-serif;
    font-size: 1.8rem;
    /*font-size: 18px;*/
    color: #333;
}

@media (max-width: 1200px) {
    body { font-size: 1.7rem; }
}

@media (max-width: 768px) {
    body { font-size: 1.8rem; }
}

@supports (grid-area: auto) {
    body {
        display: grid;
        grid-template-columns: auto;
        grid-template-areas: "headerTop" "mainContent" "pageFooter";
    }
    .headerTop { grid-area: headerTop; }
    .mainContent { grid-area: mainContent;  height: 100%; }
    .pageFooter { grid-area: pageFooter; }
    @media only screen and (min-width: 1500px) {
        body {
            grid-template-columns: auto 50px;
            grid-template-areas: "headerTop empty" "mainContent empty" "pageFooter empty";
        }
        @media screen and (min-width: 1600px) {
            body { grid-template-columns: auto 100px; }
            @media screen and (min-width: 1700px) {
                body { grid-template-columns: 1600px auto; }
            }
        }
    }
}

a { color: #337ab7; text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }
a:not([href]) { color: inherit; text-decoration: none; }
a:not([href]):hover, a:not([href]):focus { color: inherit; text-decoration: none; }
a:not([href]):focus { outline: 0; }


h1,h2,h3,h4 {
    margin:0;
}

h1 { font-size: 3.7325rem; }
h2 { font-size: 3.1104rem; }
h3 { font-size: 2.592rem; }
h4 { font-size: 2.16rem; }

@media (max-width: 1200px) {
    h1 { font-size: 3.5251rem; }
    h2 { font-size: 2.9376rem; }
    h3 { font-size: 2.448rem; }
    h4 { font-size: 2.04rem; }
}

@media (max-width: 768px) {
    h1 { font-size: 3.3178rem; }
    h2 { font-size: 2.7648rem; }
    h3 { font-size: 2.304rem; }
    h4 { font-size: 1.92rem; }
}

p {
    text-indent: 20px;
}

/* Top header (intro, topMenu, banner) */

.topMenu {
    overflow: hidden;
    background-color: #333;
}

.topMenu a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topMenu a:hover {
    background-color: #ddd;
    color: black;
}

.topMenu a.active {
    background-color: #35B12E;
    color: white;
}

.topMenu .icon {
    display: none;
}

@media screen and (max-width: 768px) {
    .topMenu a:not(:first-child) {display: none;}
    .topMenu a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .topMenu.responsive {position: relative;}
    .topMenu.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topMenu.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* FOOTER */

/* Main layout (leftMenu, content и sidebar, )*/
@supports (grid-area: auto) {
    .mainGrid {
        display: grid;
        grid-gap: 30px;
    }
    @media only screen and (min-width: 900px) {
        .mainGrid {
            grid-template-columns: 35fr 45fr 45fr;
        }
        .box {
        }
        .a {
            grid-column: 1 ;
            grid-row: 1 / span 2;
        }
        .b {
            grid-column: 2;
            grid-row: 1;
        }
        .c {
            grid-column: 3;
            grid-row: 1;
        }
        .d {
            grid-column: 2;
            grid-row: 2;
        }
        .e {
            grid-column: 3;
            grid-row: 2;
        }
    }

    a.readMore {
        color: #222;
        text-decoration: none;
        user-select: none;
        background: #DBF3FE; /* фон кнопки */
        padding: .4rem 1.5rem; /* отступ от текста */
        outline: none; /* убирать контур в Mozilla */
    }
    a.readMore:hover { background: #B7E4FE; }
    a.readMore:active { background: #93D1FE; }
}

/* TABLE OF CONTENTS */

div#TOC {
    position: fixed;
    /*z-index: 4;*/
    top: 95px;
    right: 0;
    color: #666666;
    overflow-y:auto;
    height: 80%;
}

div#TOC a {
    display: list-item;
    color: #666666;
    margin-left: 26px;
    font-size: 90%;
    margin-top: 5px;
}

div#TOC a.indent {
    margin-left: 3em;
}

div#TOC a.extraindent {
    margin-left: 4em;
}

div#innertoc div {
    border:  1px solid #999999;
    border-width: 1px 0;
    padding: 10px 0;
    padding-bottom: 25px;
    background-color: #ffffff;
    display: none;
}

span#contentheader {
    cursor: pointer;
    float: right;
    font-size: 90%;
}