body {
    font-feature-settings: "dlig";
    background-color: #f4f4f4;
}

#contenthost {
    height: 100%;
    width: 100%;
}

.fragment {
    /* Define a grid with rows for the top colored bar, a banner, empty list message UI, and a main area. 
       The coloured bar banner lives in the first row. The banner spans the first two rows, and holds the 
       fixed position Search UI. The "empty list" mesage UI is contained in the 3rd row. By default, the
       main area (which contains the list of items) spans all four rows. When the app is snapped, the main 
       area moves to be contained only inside the last row. */
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 150px auto auto 1fr;
   
    height: 100%;
    width: 100%;

    /* Most elements above this fragment are transparent, allowing this color to show through. */
    background-color: #f4f4f4;
}

/* In Categories view, the area for the list shown beneath the banner is positioned higher than in other views. */
.fragmentGridCategoriesView {
    -ms-grid-rows: 145px auto auto 1fr;
}

#pageTopBarContainer {
    -ms-grid-row: 1;
    -ms-grid-column: 1;

    display: -ms-grid;
    -ms-grid-columns: 100%;
    -ms-grid-rows: 10px 70px;

    height: 100%;
    width: 100%;
}

    #pageTopBar {
        -ms-grid-row: 1;
        -ms-grid-column: 1;

        background-color: #CD0059;
    }

    .fragment header[role=banner] {
        display: -ms-flexbox;
        -ms-flex-direction: column;
        -ms-flex-align: start;

        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-row-span: 2;
        /* The banner has a higher z-order than the main area, in order for the Search UI to remain fixed
                as the list scrolls beneath it. */
        z-index: 2;
        position: relative;
        height: auto;
        pointer-events: none;
    }

    /* The title area shows the app name in all cases other than a non-snapped non-empty list showing. */
    .fragment header[role=banner] #titlearea {
        width:auto;
        /* max-width = app width - title's left margin (120px) - search box button(button[32px] + padding[4px] + right margin[130px])*/
        max-width: calc(100% - 286px);

        /* Don't use Auto for height here, as that would include the margin and so the element
           would lie on top of another element. That would prevent the other element from being
           hit-testable for screen readers. */
        height: 30px; 
        font-size: 16pt;
        font-weight: bold;
        margin-top: 66px;
        margin-left: 120px;
        line-height: 30px;

        /* Do not set the color of this element here. Doing so would override the colors
           used in the transition classes below. */

        pointer-events: visiblePainted; /* Default */
    }

        .fragment header[role=banner] #titlearea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 0px;
            margin-right: 120px;
        }

        /* Bold app title doesn't look good in 16pt Microsoft YaHei UI font so for these Chinese
            locales show the app title with the normal font weight. */
        .fragment header[role=banner] #titlearea:-ms-lang(zh-CN, zh-Hans, zh-SG) {
            font-weight: normal;
        }

    /* App title color */
    .titleareaColorDefault, .titleareaColorTransitionDefault {
        color: #CD0059;
    }

    /* App title color when a colored group header lies behind it. */
    .titleareaColorTransitionScrolledList {
        color: #ffffff;
    }

    .fragment header[role=banner] #subtitle {
        margin-left: 120px;        
        pointer-events: visiblePainted; /* Default */
        /* max width = app width - the left and right margin where the text shouldn't flow into */
        max-width: calc(100% - 250px);
    }

    /* In grid-layout Categories view, the subtitle is higher on the screen than it is in other views. */
    .subtitleCategoriesView {
        margin-top: 18px;
    }

    .subtitleDefault {
        margin-top: 40px;
    }

    .fragment header[role=banner] #subtitle:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
        margin-left: 0px;
        margin-right: 120px;
    }

    /* By default the main area spans both rows, and so top of it lies beneath the banner in the z-order. */
    .fragment section[role=main] {
        -ms-grid-row: 3;
        -ms-grid-column: 1;

        height: 100%;
        width: 100%;
    }

@media (min-width: 320px) and (max-width: 579px) {

    .fragment {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 80px auto auto 1fr;
    }

    .fragment header[role=banner] #titlearea {
        margin-top: 36px;
        margin-left: 18px;
        /* max-width = app width - title's left margin (18px) - search box button(button[32px] + padding[4px] + right margin[25px])*/
        max-width: calc(100% - 79px);
        color: #ffffff;
    }

        .fragment header[role=banner] #titlearea:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 0px;
            margin-right: 18px;
        }

        .fragment header[role=banner] #subtitle {
            margin-left: 18px;
            /* max width = app width - the left and right margin where the text shouldn't flow into */
            max-width: calc(100% - 53px);
        }

        .fragment header[role=banner] #subtitle:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
            margin-left: 0px;
            margin-right: 18px;
        }

    /* When snapped, the list contained in the main area moves below (in the y) the banner containing the app name. */
    .fragment section[role=main] {
        -ms-grid-row: 4;
        -ms-grid-row-span: 1;
    }

    #pageTopBar {
        -ms-grid-row-span: 2;
    }

    .subtitleCategoriesView {
        margin-top: 40px;
    }
}