﻿.Main-Feature {

}

    .Main-Feature > div {
        width: 100%;
        padding: 0px 8px 16px 8px;
    }

/*  LAYOUT FORMAT:  ROWxCOLUMN  */
.Layout-Banner-1x1 {
    width: 100%;
    height: 240px;
    padding-bottom: 10px;
}

    .Layout-Banner-1x1 > table {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border-collapse: collapse;
        border: none;
    }

        .Layout-Banner-1x1 > table > tbody > tr > td {
            padding: 0px 6px 0px 6px;
        }

            .Layout-Banner-1x1 > table > tbody > tr > td > div {
                width: 100%;
                height: 100%;
                background-color: #fff;
                vertical-align: middle;
                text-align: center;
                position: relative;
                overflow: hidden;
            }

/*  ===================================================================================== */
.Layout-Header-1-Row {
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border: none;
}

    .Layout-Header-1-Row > tbody > tr:first-child > td {
        padding: 16px 18px;
    }

    .Layout-Header-1-Row > tbody > tr:last-child > td {
        height: 100%;
        padding: 0px 20px 50px 20px;
    }

/*  ===================================================================================== */
.Layout-Grid-1xN {
    display: table;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .Layout-Grid-1xN > div {
        position: relative;
        display: table;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

        .Layout-Grid-1xN > div > div {
            position: absolute;
            width: 100%;
            height: 100%;
        }

            .Layout-Grid-1xN > div > div > div {
                display: inline-block;
                max-width: 210px;
                width:100%;
                height: 100%;
                padding-right: 10px;
            }


    /* --------------------------------------------------------------------------------- */
.Main-Feature-Items table {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border:none;
    border-collapse: collapse;
    border-spacing: 0;
}

.Main-Feature-Items tr:first-child td {
    text-align: center;
}

.Main-Feature-Items tr:not(:first-child) td {
    height: 30px;
    line-height: 30px;
}

    .Main-Feature-Items tr:not(:first-child) td > div {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

        .Main-Feature-Items tr:not(:first-child) td > div > span {
            position: absolute;
        }

.Main-Feature-Items tr:nth-child(2) > td {
    padding-top: 12px;
}

    .Main-Feature-Items tr:nth-child(2) > td span {
        padding: 6px 8px;
    }

.Main-Feature-Items img {
    max-width: 190px;
    max-height: 190px;
}


/*  ===================================================================================== 
    ITEM GRID
    ===================================================================================== */
.Layout-Grid-Dynamic {
    width: 100%;
    text-align: left;
}

    .Layout-Grid-Dynamic > div {
        display: table;
        width: 100%;
    }

        .Layout-Grid-Dynamic > div > div {
            display: inline-block;
            padding: 8px 10px 8px 8px;
        }

            .Layout-Grid-Dynamic > div > div > div {
                width: 210px;
                height: 300px;
                padding: 10px 14px 30px 14px;
                background-color: #FFF;
                box-shadow: #ccc 1px 1px;
            }

    /*  -----------------------------------------------------------------------------------
        ITEM LAYOUT
        ---------------------------------------------------------------------------------- */
    .Layout-Grid-Dynamic table {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border-collapse: collapse;
        border: none;
    }

    .Layout-Grid-Dynamic tr:first-child td {
        text-align: center;
    }

    .Layout-Grid-Dynamic tr:not(:first-child) {
        height: 32px;
        line-height: 32px;
    }

    .Layout-Grid-Dynamic tr:nth-child(2) td > div {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0px;
        overflow: hidden;
        vertical-align: top;
    }

    .Layout-Grid-Dynamic tr:nth-child(2) span {
        position: absolute;
    }

    .Layout-Grid-Dynamic tr:not(:first-child) span {
        white-space: nowrap;
    }

    .Layout-Grid-Dynamic tr:last-child td > div {
        display: table;
        width: 100%;
    }

        .Layout-Grid-Dynamic tr:last-child td > div > div {
            display: table-cell;
        }

            .Layout-Grid-Dynamic tr:last-child td > div > div:first-child {
                text-align: left;
                vertical-align:top;
            }

            .Layout-Grid-Dynamic tr:last-child td > div > div:last-child {
                text-align: right;
            }

    .Layout-Grid-Dynamic img {
        max-width: 200px;
        max-height: 200px;
    }
