/* 
Structure of main content.
Here we use the CSS-table layout.
*/
@media only screen and (min-device-width: 768px){
    body {
        margin:                             0;
        padding:                            0;
        font-size:                          small;
        font-family:                        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    /* Layout */
    #all-content {
        width:                              1180px;
        margin:                             0 auto;
        
        min-height:                         100vh;
        display:                            flex;
        flex-direction:                     column;
    }

    #all-content span.inline-icon {
        height:     1.5em;
        width:      1.5em;
        background-size:                1.5em;
        display:                        inline-block;
        background-repeat:              no-repeat;
    }

    #main {
        flex:                               1;
    }

    #left-side-bar {
        box-sizing:                         border-box;
        width:                              290px; 
    
        position:                           fixed;
        top:                                55px;
        padding-top:                        0px;
    }
    
    #right-content {
        box-sizing:                         border-box;
        width:                              1180px;
        padding-left:                       290px;
        padding-top:                        55px;
    }

    #full-width-content {
        box-sizing:                         border-box;
        width:                              1180px;
        padding-top:                        55px;
    }

    #narrow-content {
        box-sizing:                         border-box;
        width:                              890px;
        padding-top:                        55px;
        margin:                             0 auto;
    }

    /* Font */
    #main a{
        color:                              rgba(0, 149, 235, 0.842);
        text-decoration:                    underline;
    }
    #main a:hover{
        background-color:                  #eee;
        text-decoration:                    underline;
    }

    #main h1 {
        margin:                             15px 0px 10px 0px;
        font-size:                          1.85em;
        border-left:                        10px solid rgba(110, 18, 172, 0.616);
        border-bottom:                      2.5px solid rgba(110, 18, 172, 0.15);
        padding-left:                       10px;
        padding-bottom:                     5px;
    }
    #main h2 {
        margin:                             20px 0px 10px 0px;
        padding-left:                       10px;
        padding-bottom:                     5px;
        border-left:                        10px solid #5faaffe0;
        font-size:                          1.35em;
        border-bottom:                      2.5px solid #5faaff47;
        display:                            inline-block;
    }
    #main h3 {
        font-size:                          1.15em;
        margin:                             8px 0;
        padding-left:                       0.3em;
        border-left:                        10px solid #DDD;
        display:                            inline-block;
    }
    #main em {
        font-weight:                        bold;
        font-style:                         italic;
    }

    #main .sec-para {
        margin-bottom:                      12px;
    }
    
    #main .sec-para p {
        margin-bottom:                      5px;
    }
    
    /* TOC */
    #toc {
        margin-top:                         15px;
        margin-right:                       10px;
        padding-right:                      10px;
        border-right:                       1.5px solid #5faaff4d;
    }
    
    #toc .sub-page {
        margin-bottom:                      10px;
    }
    
    #toc .sub-page-name {
        background-color:                 rgba(110, 18, 172, 0.5);
        color:                              white;
        margin:                             5px 5px 5px 0;
        padding:                            5px 5px 5px 10px;
        font-size:                          1.1em;
        font-weight:                        bold;
    }
    
    #toc .sub-page-name:hover {
        background-color:                 rgba(110, 18, 172, 0.65);
    }
    
    #toc a{
        color:                            white;
        text-decoration:                    none;
        font-style:                         italic;
        text-shadow:                        none;
    }
    #toc a:hover{
        color:                            white;
        background-color:                 rgba(110, 18, 172, 0.5);
        text-decoration:                    none;
    }
    
    #toc .toc-l2-names {
        margin-left:                      8px;
    }
    
    #toc .toc-l2-name {
        margin:                          2px 0;
        color:                           rgba(110, 18, 172, 0.65);
    }
    
    #toc .toc-l2-name a {
        color:                           rgba(110, 18, 172, 0.65);
    }
    
    #toc .toc-l2-name a:hover {
        color:                            white;
        background-color:                 rgba(110, 18, 172, 0.65);
    }
    
    #toc .toc-l3-names {
        margin-left:                      8px;
        border-left:                      1px solid rgba(128, 128, 128, 0.623);
        padding-left:                     8px;
    }
    
    #toc .toc-l3-name {
        margin:                          2px 0;
        color:                           rgba(110, 18, 172, 0.65);
    }
    
    #toc .toc-l3-name a {
        color:                           rgba(110, 18, 172, 0.65);;
    }
    
    #toc .toc-l3-name a:hover {
        color:                            white;
        background-color:                  rgba(110, 18, 172, 0.65);;
    }

    /* left-side-bar items */
    #left-side-bar .left-side-bar-item {
        margin-right:                       15px;
        padding-right:                      10px;
        border-right:                       1.5px solid #5faaff4d;
        margin-top:                         15px;
    }

    #left-side-bar .no-border .left-side-bar-item {
        border-right:                       none;
    }

    #left-side-bar .left-side-bar-title {
        background-color:                   #5faaffe0;
        color:                              white;
        margin:                             5px 5px 5px 0;
        padding:                            5px 5px 5px 10px;
        font-size:                          1.1em;
        font-weight:                        bold;
    }

    #left-side-bar .left-side-bar-content ul {
        list-style: none;
        margin:                 8px 0;
        padding:                0;
    }
    #left-side-bar .left-side-bar-content li {
        margin:                 4px 0;
    }
    #left-side-bar .left-side-bar-content li::before {
        content: "";
        background-image: url("/static/home/image_site/icon/heart-blue.svg");
        background-size:                contain;
        background-repeat:              no-repeat;
        display:         inline-block;
        width:  1.0em;
        height: 1.0em;
        position: relative;
        top:           0.2rem;
        margin-right:  0.5rem;
    }
}


@media only screen and (max-device-width: 767px){
    body {
        margin:                             0;
        padding:                            0;
        font-size:                          medium;
        font-family:                        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    #main {
        width:                              100%;
        padding:                            0;
    }
    .main-cell {
        width:                              94vw;
        box-sizing:                         border-box;
        margin:                             3vw;
    }
    #aside {
        display:                            none;
    }

    #recent-activity {
        display:                            none;
    }

    #content a{
        color:                              rgba(0, 149, 235, 0.842);
        text-decoration:                    underline;
    }

    #content h1 {
        margin:                             20px 0px 20px 0px;    
        font-size:                          2.5em;
    }
    #content h2 {
        margin:                             15px 0px 15px 0px;
        padding-left:                       10px;
        padding-bottom:                     5px;
        border-left:                        0.7em solid rgba(38, 124, 204, 0.651);
        font-size:                          2.0em;
        border-bottom:                      1px solid #DDD;
    }
    #content h3 {
        font-size:                          1.75em;
        padding-left:                       0.3em;
        border-left:                        10px solid rgba(60, 2, 136, 0.541);
    }
    #content em {
        font-weight:                        bold;
        font-style:                         italic;
    }
}