:root {
    --index-distance:       20px;
    --index-spacing:        calc( 0.5 * var( --index-distance ) );

    /* colors */
    --p1-color:  hsl(196, 78%, 61%);
    --p2-color:  hsl(217, 15%, 83%);
    --p3-color:  hsl(165, 58%, 65%);
    --p4-color:  hsl(103, 79%, 65%);
    --p5-color:  hsl(43, 100%, 65%);
    --p6-color:  hsl(354, 81%, 63%);
    --p7-color:  hsl(300, 37%, 63%);
    --d1-color:  hsl(196, 68%, 54%);
    --d2-color:  hsl(215, 14%, 70%);
    --d3-color:  hsl(165, 55%, 60%);
    --d4-color:  hsl(103, 68%, 58%);
    --d5-color:  hsl(39, 97%, 52%);
    --d6-color:  hsl(354, 67%, 56%);
    --d7-color:  hsl(300, 37%, 56%);
    --l1-color:  hsl(196, 78%, 81%);
    --l2-color:  hsl(214, 16%, 92%);
    --l3-color:  hsl(165, 58%, 75%);
    --l4-color:  hsl(103, 79%, 85%);
    --l5-color:  hsl(43, 100%, 82%);
    --l6-color:  hsl(354, 81%, 83%);
    --l7-color:  hsl(300, 37%, 83%);
    --dd1-color: hsl(196, 11%, 30%);

    --ll2-color: hsl(209, 0%,  91%);
    --lp2-color: hsl(209, 0%,  81%);
    --ld2-color: hsl(209, 0%,  71%);
    --dl2-color: hsl(213, 13%, 60%);
    --dp2-color: hsl(212, 12%, 45%);
    --dd2-color: hsl(211, 11%, 30%);

    --ll3-color: hsl(165, 75%, 95%);
    --lp3-color: hsl(165, 75%, 90%);
    --ld3-color: hsl(165, 75%, 85%);
    --dl3-color: hsl(165, 50%, 55%);
    --dp3-color: hsl(165, 45%, 50%);
    --dd3-color: hsl(165, 45%, 45%);
}

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( --d2-color );
    /* color:              var( --header-navi-background ); */
    /* text-transform:     uppercase;   */
    padding-top:        var( --index-spacing );
}

div.edit-section {
    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( --d2-color );
    font-weight:    var( --weight-normal );
}

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

div.edit-section > a > i {
    font-size:          var( --font-normal );
    color:              var( --d2-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:             180px;
}

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 );
    text-align:     left;
}

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

li.index-menu[data-color='l1']  { border-color:   var( --l1-color ); }
li.index-menu[data-color='l2']  { border-color:   var( --l2-color ); }
li.index-menu[data-color='l3']  { border-color:   var( --l3-color ); }
li.index-menu[data-color='l4']  { border-color:   var( --l4-color ); }
li.index-menu[data-color='l5']  { border-color:   var( --l5-color ); }
li.index-menu[data-color='l6']  { border-color:   var( --l6-color ); }
li.index-menu[data-color='l7']  { border-color:   var( --l7-color ); }

li.index-menu[data-color='p1']  { border-color:   var( --p1-color ); }
li.index-menu[data-color='p2']  { border-color:   var( --p2-color ); }
li.index-menu[data-color='p3']  { border-color:   var( --p3-color ); }
li.index-menu[data-color='p4']  { border-color:   var( --p4-color ); }
li.index-menu[data-color='p5']  { border-color:   var( --p5-color ); }
li.index-menu[data-color='p6']  { border-color:   var( --p6-color ); }
li.index-menu[data-color='p7']  { border-color:   var( --p7-color ); }

li.index-menu[data-color='d1']  { border-color:   var( --d1-color ); }
li.index-menu[data-color='d2']  { border-color:   var( --d2-color ); }
li.index-menu[data-color='d3']  { border-color:   var( --d3-color ); }
li.index-menu[data-color='d4']  { border-color:   var( --d4-color ); }
li.index-menu[data-color='d5']  { border-color:   var( --d5-color ); }
li.index-menu[data-color='d6']  { border-color:   var( --d6-color ); }
li.index-menu[data-color='d7']  { border-color:   var( --d7-color ); }

li.index-menu[data-color='dd1'] { border-color:   var( --dd1-color ); }

li.index-menu[data-color='dl2'] { border-color:   var( --dl2-color ); }
li.index-menu[data-color='dp2'] { border-color:   var( --dp2-color ); }
li.index-menu[data-color='dd2'] { border-color:   var( --dd2-color ); }
li.index-menu[data-color='ll2'] { border-color:   var( --ll2-color ); }
li.index-menu[data-color='lp2'] { border-color:   var( --lp2-color ); }
li.index-menu[data-color='ld2'] { border-color:   var( --ld2-color ); }

li.index-menu[data-color='dl3'] { border-color:   var( --dl3-color ); }
li.index-menu[data-color='dp3'] { border-color:   var( --dp3-color ); }
li.index-menu[data-color='dd3'] { border-color:   var( --dd3-color ); }
li.index-menu[data-color='ll3'] { border-color:   var( --ll3-color ); }
li.index-menu[data-color='lp3'] { border-color:   var( --lp3-color ); }
li.index-menu[data-color='ld3'] { border-color:   var( --ld3-color ); }