/*
    Landis+Gyr Green:   #7ab800 (Login, Next & Finish buttons)
                        #91d018 (Hover state for the above buttons)
                        #689d00 (Active state for the above buttons)
    Landis+Gyr Grey:    #4d4f53 (Grey bar behind Command Center Logo and Previous button)
                        #707175 (Hover state for the above buttons)
                        #363739 (Active state for the above buttons)
    Landis+Gyr Red:     #823c47 (Cancel button)
                        #9a545e (Hover state for the above buttons)
                        #6a373f (Active state for the above buttons)
    Text on white:      #333
*/

/*
    Small screen first design
*/
body {
    background-color: #fff;
    color: #4d4f53;
    font-family: Verdana, Geneva, Helvetica, sans-serif;
    line-height: 2;
    margin: 0;
}

img {
    border: 0;
}

br {
    display: none;
}

#ErrMsg {
    color: #a3090e;
    font-size: 8pt;
    font-style: italic;
}

#Branding {
    background: #7ab800 url(../images/CommandCenterLogo.png) no-repeat 50% 50%;
    font-weight: bold;
}

#SubBranding {
    background: url(../images/GridstreamLogo.png) no-repeat 50% 50%;
    height: 74px;
}

#LoginControls {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

#UserLabel,
#PasswordLabel {
    display: block;
    margin-top: 0.8em;
}

#LoginName,
#Password {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

#LoginButton {
    display: block;
    margin-bottom: 1.8em;
    margin-top: 1.8em;
}

    #LoginButton a:link,
    #LoginButton a:visited {
        background: #7ab800 url(../images/triangle-button.png) no-repeat 100% 100%;
        color: #fff;
        display: block;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

        #LoginButton a:hover {
            background-color: #91d018;
        }

        #LoginButton a:active {
            background-color: #689d00;
        }

#ConnectStringRow {
    color: #4d4f53;
    font-size: 8pt;
    line-height: normal;
    visibility: hidden;
}

@media (max-width: 1023px) { /* 767px */
    #LoginName,
    #Password {
        border: 1px solid #4d4f53;
        padding: 0.375em;
    }
}


/*
    Larger screen sizes can accomodate the full, original design
*/
@media (min-width: 1024px) { /* 768px */
    body {
        line-height: normal;
    }

    br {
        display: inline;
    }

    #ErrMsg {
        height: auto;
        left: 50%;
        margin-left: -338px;
        margin-top: -300px;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 677px;
        z-index: 200;
    }

    #Container {
        background: url(../images/CommandCenterLoginBkgnd.png) no-repeat 0 0;
        height: 512px;
        left: 50%;
        margin-left: -338px;
        margin-top: -256px;
        position: absolute;
        top: 50%;
        width: 677px;
        z-index: 100;
    }

    #LoginArea {
        background-color: #fff;
        height: 119px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -59px;
        position: absolute;
        text-align: left;
        top: 50%;
        width: 100%;
    }

    #Branding {
        background: #4d4f53 url(../images/CommandCenterLogo.png) no-repeat 50% 50%;
        height: 25px;
        line-height: 25px;
        position: absolute;
        width: 100%;
    }

    #SubBranding {
        background: url(../images/GridstreamLogo.png) no-repeat 50% 34px;
        height: 94px;
        left: 0;
        position: absolute;
        top: 25px;
        width: 265px;
    }

    #LoginControls {
        height: 94px;
        position: absolute;
        right: 0;
        top: 27px;
        width: 412px;
    }

    #UserLabel,
    #PasswordLabel {
        clear: left;
        float: left;
        font-size: 10pt;
        height: 21px;
        line-height: 21px;
        margin-top: 5px;
        min-width: 120px;
        padding-right: 6px;
        text-align: left;
    }

    #LoginName,
    #Password {
        box-sizing: initial;
        clear: none;
        float: left;
        font-size: 10pt;
        margin-top: 5px;
        width: 182px;
    }

    #LoginButton {
        clear: left;
        float: left;
        height: 22px;
        margin-top: 10px;
        min-width: 67px;
    }

        #LoginButton a:link,
        #LoginButton a:visited {
            font-size: 10pt;
            height: 22px;
            line-height: 20px;
            margin-left: 126px;
            min-width: 67px;
            padding: 0 6px;
        }

    #ConnectStringRow {
        clear: both;
        float: left;
        height: 20px;
        margin-top: 5px;
        text-align: center;
        visibility: hidden;
        width: 100%;
    }
}