@import "./colors.css";

:root {
    --index-distance:       20px;
    --index-spacing:        calc( 0.5 * var( --index-distance ) );
    --content-min-height:   400px;
}

div.page-content {
    display:    block;
    position:   relative;
}

div.page-title {
    width:      calc( 75% - 2.0 * var( --index-distance ) );
    max-width:  calc( 75% - 2.0 * var( --index-distance ) );
    margin:     var( --index-distance ) 0px 0px 0px;
    padding:    0px;
}

h2.page-title {
    color:              var( --header-navi-background );
    /* text-transform:     uppercase;   */
    font-weight:        var( --font-weight-normal );
}

h2.section-head {
    font-size:          var( --font-normal );
    text-transform:     uppercase;
}

h3.section-head {
    position:           relative;
    font-family:        var( --common-font );
    font-size:          var( --font-normal );
    font-weight:        var( --weight-bold );
    color:              var( --nd2-color );
    /* color:              var( --header-navi-background ); */
    /* text-transform:     uppercase;   */
    padding-top:        var( --index-spacing );
}

div.action-command {
    width:          calc( 1.5 * var( --font-normal ) );
    text-align:     center;
    float:          right;
    /* padding-left:   calc( 0.5 * var( --common-space ) ); */
    /* font-size:      var( --font-normal );    */
    color:          var( --nd2-color );
    font-weight:    var( --weight-normal );
}

h2.section-head > div.action-command, h3.section-head > div.action-command {
    float:              right;
    padding-left:       calc( 0.5 * var( --common-space ) );
}

div.action-command > a > i {
    /* font-size:          var( --font-normal ); */
    color:              var( --nd2-color );
    font-weight:        var( --weight-normal );
}

div.section {
    background-color:       white;
    border-radius:          var( --index-distance );
    border:                 1px solid var( --common-background );
    padding:                calc( 0.1 * var( --index-distance ) ) calc( 1.5 * var( --index-distance ) ) calc( 1 * var( --index-distance ) );
    margin:                 var( --index-distance ) 0px 0px 0px;
    box-shadow:             0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    width:                  calc( 75% - 2.0 * var( --index-distance ) );
    max-width:              calc( 75% - 2.0 * var( --index-distance ) );
    min-height:             var( --content-min-height );
}

div.index-menu {
    position:   absolute;
    right:      0;
    top:        0;
    width:      calc( 25% - 0 * var( --index-distance ) );
    max-width:  calc( 25% - 0 * var( --index-distance ) );
    margin-right:   0px;
    height:     calc( 100% - var( --index-distance ) );
}

ul.index-menu {
    list-style-type:  none;
}

li.index-menu {
    position: relative;
    margin-left:    calc( -2.0 * var( --index-distance ) );
    margin-top:     calc( 0.7 * var( --font-normal ) );
    border-left:    var( --index-spacing ) solid var( --header-navi-background );
    padding:        0px 0px 0px var( --index-spacing );
}

a.index-menu {
    font-size:      var( --font-normal );
}