/* Scenario styles */

#scenarioFullscreen {    
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 1fr;
    width: 100%;
    height: 100%;
}

    #scenarioFullscreen h1 {
        font-size: 40pt;
    }

    #scenarioFullscreen header[role=banner] {
        -ms-grid-row: 1;
        -ms-grid-row-align: end;
        margin-bottom: 20px;
        margin-left: 30px; 
    }

    #scenarioFullscreen section[role=container] {
        -ms-grid-row: 2;
    }

        .win-listview {
            height: 100%;
        }

            #AppBarSample .win-listview .win-container {
                margin: 0;
                padding: 0 0 20px 0;
            }

            #AppBarSample .win-listview .win-item {
                margin: 0 20px 0 0;
                width: calc(100% - 20px);
            }

        /* Mail item template CSS */

        .mailItem {
            display: -ms-grid;
            -ms-grid-columns: 20px 1fr 60px;
            -ms-grid-rows: auto auto auto;
        }

            .mailItem h2 {
                line-height: 1.3;
            }

            .mailItem h5 {
                font-size: 12pt;
            }

            .mailItem .hitTarget {
                /* So it is stacked on top of other grid elements */
                position: relative;
                z-index: 1;
                -ms-grid-column: 1;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                width: 16px; 
                height: 100%;
                transition: background-color 250ms ease-out 250ms, visibility 0ms linear 500ms, transform cubic-bezier(0.17,0.79,0.215,1.0025) 250ms;
            }

                .mailItem .hitTarget:active {
                    transition: background-color ease-out 100ms; /* override transition style so the box fades in fast */
                    background-color: Highlight;
                }

                .mailItem .hitTarget:after {
                    display: block;
                    margin: 0 16px;
                    width: 16px;
                    height: 100%;
                    content: '';
                }

        .win-selectionmode .mailItem .hitTarget {
            transform: translateX(-41px); /* delayed 250ms by transition style */
            visibility: hidden;
        }

        .win-selectionmode .win-item {
            overflow: visible;
        }

        .author {
            white-space: nowrap;
            overflow: hidden;
        }

        .mailItem .authorRoot {
            -ms-grid-row: 1;
            -ms-grid-column: 2;
        }

        .mailItem .title {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            font-weight: 500;
            margin-top: -4px;
            white-space: nowrap;
            overflow: hidden;
        }

        .mailItem .previewText {
            -ms-grid-row: 3;
            -ms-grid-column: 2;
            margin-top: -4px;
            /* 255 * 0.6 = 153 */
            color: rgb(153,153,153);
            white-space: nowrap;
            overflow: hidden;
            font-weight: 300;
        }

        .mailItem .time {
            -ms-grid-row: 1;
            -ms-grid-column: 3;
            -ms-grid-row-align: end;
            -ms-grid-column-align: end;
            margin-bottom: 4px;
            font-weight: 300;
        }
