html {
    width: 100%;
    height: 100%;
    margin: 0;
    margin: 0;
    overflow-y: hide;
}
body {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin: 0px;
    margin: 0px;
    overflow-y: hide;
}
.page {
    display: grid;
    grid-template-areas:
        'head head head head'
        'menu main main main'
        'menu main main main'
        'menu main main main'
        'foot foot foot foot';
    grid-template-columns: 25% 75%;
    grid-template-rows: 15% 65% 10%;

    width: 65%;
    min-height: 100%;
    max-height:100%;
    
    margin-left: auto;
    margin-right: auto;
    overflow-y: hide;
    
    font-size:105%;
    font-weight:100;
    background-color: #e0e0e0;
    font-family: serif;
    font-weight: light;
}



.header {
    grid-area:head;
    text-align: center;
    margin-top: 1em;
}
.header .title {
    margin-top: 0.4em;

    font-size: 300%;
    font: monospace;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-style: bolder;
    font-variant: small-caps;
}
.header .title img {
    vertical-align: middle;
    margin-bottom: 0.3em;
    height: 1em;
    margin-left: 0.15em;
    margin-right: 0.15em;
}
.header .subtitle {
    width: 100%;
    text-align: center;
    font-style: italic;
    margin-top: 0.5em;
    margin-bottom: 1em;
}



.menu {
    grid-area: menu;
    vertical-align: top;
    width: 90%;
    min-height: 100%;
    max-height:100%;
    overflow-y: hide;
    margin: 1em;
}

.file, .link, .cite, .menu, .manualblock {
    background-color: #d0d0d0;
}
a { color: #1A4AC4; text-decoration: none; }
a:hover { color: #1D54DE; }
img { max-width: 100%; }

.menu .item {
    display: block;
    margin-left: 1em;
    margin-right: 1em;
    border-bottom:1px solid;
}
.menu .subitem {
    display: block;
    margin-left: 3em;
    margin-right: 1em;
    border-bottom:1px solid;
}



.main {
    grid-area: main;
    width:100%;
    min-height: 100%;
    max-height:100%;
    overflow-y: scroll;
    margin: 1em;
}
.footer {
    grid-area: foot;

    text-align:center;
    margin-top:2em;
    float: bottom;
}





.legacy {
    font-weight:bold;
    font-size:120%;
    margin:0.7em;
}
.authorblock {
    display:inline-block;
    width:45%;
    vertical-align:middle;
    margin:1em;
    margin:0px;
}
.homeblock {
    margin: 1em;
}
.highlight {
    margin: 1em;
    background-color: #d0d0d0;
    margin: 1em;
}
.highlight .caption {
    background-color: #348CFF;
    color: #ffffff;
    width: 100%;
    font-size: 130%;
    font-weight: bold;
}
.highlight .caption a { color: #ffffff; text-decoration: underline; }


.manualblock {
    margin-bottom: 1em;
    margin: 0.7em;
}
.manualblock .caption {
    font-size: 130%;
    display: block;
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 4px;
}
.manualblock .caption a { text-decoration: underline; }


.latex {
    margin-left: 2px;
    margin-right: 2px;
}
.shell {
    display: block;
    font-family:monospace;
    color: #B2B2B2;
    background-color: #000000;
    font-weight:bold;
    margin:0.3em;
}




.file {
    margin-bottom: 1em;
    margin: 0.7em;
}
.file .name {
    font-size: 130%;
    display: inline;
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 4px;
}
.file .size {
    display: inline;
    float: right;
    text-align: right;
    width: 7em;
}
.file .description {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1.5em;
}




.link {
    margin-bottom: 1em;
    margin: 0.7em;
}
.link .caption {
    font-size: 130%;
    display: inline;
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 4px;
}
.link .description {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1.5em;
}




.cite {
    display:block;
    font-size: 120%;
    width: 90%;
    margin: 1em;
    margin: 1em;
    font-style: italic;
}
.cite .source {
    display:block;
    text-align:right;
    font-size: 90%;
    font-weight: bold;
    width:100%;
    margin: 0.3em;
}