/*  Layout CSS
    Sample Layout HTML
    .l-container>(.l-hd+.l-bd+.l-ft)
*/

/* Z-index Manager */
.l-hd      { position: relative; z-index: 2; }
.l-bd      { position: relative; z-index: 1; }
.l-ft      { position: relative; z-index: 0; }

.l-sidebar { position: relative; z-index: 10; }
.l-main    { position: relative; z-index: 1;  }

.modal-open .l-hd,
.modal-open .l-bd,
.modal-open .l-ft { z-index: auto; }

/* Layout class name start with l- */

.l-container {
    /* 總高至少要 減 頭 再減 尾  */
    /*min-height: calc(100% - 153px - 265px);*/
    height: inherit;
    position: relative;
}

.l-hd {
    border-bottom: 1px solid #EEEEEE;
}
.l-bd {
    min-height: calc(100% - 152px - 205px );

    /* menu 的高度 */
    /*min-height: 750px;*/
}
.l-bd-s {
    min-height: calc(100% - 105px);
}

.l-container div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.l-container > div:not(:last-child){
    /* temp */
    /*margin-bottom: 5px;*/
}
.l-container .wrap {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.l-sidebar {
    width: 240px;
    position: relative;
}
.l-main {
    width: auto;
    overflow: hidden;

    /* =temp */
    /*background-color: #AAF2FC;*/
    position: relative;
}
.l-ft {
}

/* global css */
.wrap { position: relative; overflow: visible; }
.wrap:not(:last-of-type) { padding-bottom: 12px; }


/*  Media query setting */
@media screen and (max-device-width: 1200px) {
    html, body {
        min-width: 1200px;
    }
    .l-container {
        width: 1220px;
        padding-right: 10px;
        padding-left: 10px;
    }
    body .l-ft {
        width: 1210px;
        margin-left: -10px;
        margin-right: -10px;
    }
    body .footer .wrap {
        padding-left: 10px;
        padding-right: 10px;
        margin: 0;
    }
}

@media screen and (max-device-width: 736px) {
    html, body {
        min-width: 0;
    }
    .l-container {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
    }
    body .l-ft {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

/*=======*/
body .l-hd,
body .l-bd,
body .l-ft {
    position: static;
    z-index: auto;
}


body .l-sidebar { z-index: auto; }
body .l-main    { z-index: auto;  }