/*
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
*/

/* styles */
/* Scenario 1 CSS Rules */
.s1-grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
}

.s1-column-1 {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    margin: 20px;
}

.s1-column-2 {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    margin: 20px;
}

.s1-column-3 {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    margin: 20px;
}

.s1-mybutton {
    font-weight: 300;
    padding: 4px 16px;
    text-align: center;
    text-decoration: none;
    width: auto;
    height: auto;
    background-color: #336699;
    color: #fff;
    text-transform: uppercase;
    border-radius: 10px;
}

    .s1-mybutton:hover {
        background-color: #FFFFFF;
        color: #336699;
        border: 1px solid #336699;
    }

@media (-ms-high-contrast) {
    .s1-hc {
        background-color: ButtonFace;
        color: ButtonText;
        border: 1px solid ButtonText;
    }

        .s1-hc:hover {
            background-color: Highlight;
            border-color: ButtonText;
            color: HighlightText;
        }

            .s1-hc:hover:active, .s1-hc:active {
                background-color: ButtonText;
                border-color: ButtonText;
                color: ButtonFace;
            }

        .s1-hc:disabled {
            background-color: ButtonFace;
            border-color: GrayText;
            color: GrayText;
        }
}