@import url("reset.css");
@import url("font.css");

/* BEGIN */
html {
    position: relative;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: 100%;
}

body {
    background-color: #303B45;
    background-image: url("login-background-lowres.jpg");
    background-repeat: no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    color: lightgray;
    font-size: 0.91em;
    padding-bottom: 75px;
}

header {
    background-color: #363737;
    left: 0;
    line-height: 2em;
    padding: 0 1%;
    text-align: center;
    top: 0;
    width: 98%;
}

    header img {
        margin-top: 10px;
        max-height: 50px;
    }

footer {
    background-color: #363737;
    bottom: 0;
    line-height: 2em;
    padding: 1em 1%;
    position: absolute;
    text-align: center;
    width: 98%;
}

    footer p {
        margin: 0;
        padding: 0;
    }

main {
    -webkit-border-radius: 1em;
       -moz-border-radius: 1em;
            border-radius: 1em;
    margin: 10px auto;
    text-align: center;
    width: 28em;
}

    main h1 {
        color: #29416B;
        font-size: 1.1em;
        text-align: center;
        padding: 1em 2em;
    }

    main p {
        color: #29416B;
        font-size: 1.1em;
        line-height: 1.8em;
        padding: 0 2em 2em;
    }

    main .logo {
        background-color: #2773BD !important;
        -moz-background-size: cover;
             background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-border-top-left-radius: 1em;
           -moz-border-radius-topleft: 1em;
                border-top-left-radius: 1em;
        -webkit-border-top-right-radius: 1em;
           -moz-border-radius-topright: 1em;
                border-top-right-radius: 1em;
        display: block;
        width: 100%;
    }

    main a,
    main input[type=submit] {
        background-color: #2773BD;
        border: 0;
        -webkit-border-bottom-left-radius: 1em;
           -moz-border-radius-bottomleft: 1em;
                border-bottom-left-radius: 1em;
        -webkit-border-bottom-right-radius: 1em;
           -moz-border-radius-bottomright: 1em;
                border-bottom-right-radius: 1em;
        color: whitesmoke;
        cursor: pointer;
        display: block;
        height: 4em;
        line-height: 4em;
        text-align: center;
        text-decoration: none;
        width: 100%;
        font-size: 1em;
    }

.login-header {
    background-color: #363737;
    color: #FFF;
    font-size: 1em;
    padding: 1em;
    margin: 0;
}

/* Input with Label */
label {
    background: #ffffff;
    border: 0;
    border-bottom: thin solid #eeeeee;
    display: block;
    font-size: 1.2em;
    height: 4.5em;
    line-height: 4.5em;
    text-align: left;
}

    label::before {
        content: "";
        display: block;
        float: left;
        height: 100%;
        width: 20%;
    }

    label input,
    label select {
        border: 0;
        padding: 2%;
        width: 65%;
        font-size: 1.1em;
    }
/* Custom Images for labels */
/* RG: Change these to sprites */
.LoginUserName::before {
    background: url("in-user.png") center center no-repeat;
}

.LoginUserName:hover.LoginUserName::before {
    background-image: url("ac-user.png");
}

.LoginPassword::before {
    background: url("in-pw.png") center center no-repeat;
}

.LoginPassword:hover.LoginPassword::before {
    background-image: url("ac-pw.png");
}

.LoginDatasource::before {
    background: url("in-data.png") center center no-repeat;
}

.LoginDatasource:hover.LoginDatasource::before {
    background-image: url("ac-data.png");
}

.LoginForgetPWLink {
    background: none;
    display: inline;
    font-size: 1.2em;
}

#capcha {
    background: #ffffff;
}

.PasswordTips {
    background: #ffffff;
    color: #000000;
}

    .PasswordTips h2 {
        font-size: 1.3em;
        padding: 4px 0;
    }

    .PasswordTips ul li {
        list-style-position: inside;
        margin-left: 1em;
        text-align: left;
    }
/* Notifications */
.alert {
    background: #ffffff;
    border-bottom: thin solid #eeeeee;
    display: block;
    font-weight: bold;
    padding: 1em;
    text-align: center;
}

.alert-error {
    color: #cc0000;
}

.alert-warning {
    color: #f0ad4e;
}

.alert-success {
    color: #4B8967;
}

/* Languages */
ul.languages {
    margin: 0;
    padding: 0;
}

.languages li {
    display: inline;
    font-weight: bold;
}

.languages a {
    color: whitesmoke;
    cursor: pointer;
    text-decoration: none;
}

span.nowrap {
    display: inline-block;
    white-space: nowrap;
}

.languages .sp {
    margin: 0 1px;
}

@media screen and (min-width: 480px) {
    .col-left {
        float: left;
    }

    .col-right {
        float: right;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-image: url("login-background.jpg");
    }

    header {
        height: 4em;
        line-height: 4em;
        text-align: right;
    }

        header img {
            float: left;
        }

    main {
        margin-top: 6em;
    }
}

@media screen and (max-device-width: 480px) {
    .divLoginPanel {
        top: 7em;
        margin-bottom: 8em;
    }

    .divLoginUserName, .divLoginPassword, .divLoginDataSource {
        line-height: 3em;
    }

    .divLoginForgetPW {
        top: 0;
    }

    .login-page-footer-left {
        width: 100%;
        text-align: center;
        word-wrap: normal;
        margin: 0;
    }

    .login-page-footer-right {
        width: 100%;
        text-align: center;
    }

    #header-right #header-left {
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-device-width: 320px) {
    #divLoginWall {
        background-image: url("login-background-lowres.jpg") !important;
    }

    #header {
        line-height: 2.5em;
        height: 2.5em;
        text-align: center !important;
    }

    #footer {
        line-height: 2.5em;
        height: 2.5em;
    }

    .divLoginPanel {
        top: 7em;
        margin-bottom: 8em;
    }

    .divLoginPassword, .divLoginDataSource {
        line-height: 3em;
    }

    .login-page-footer {
        line-height: 1.2em;
    }

    .divLoginForgetPW {
        top: 0;
    }

    .login-page-footer-left {
        width: 100%;
        text-align: center;
        word-wrap: normal;
    }

    .login-page-footer-right {
        width: 100%;
        text-align: center;
    }
}

/* Utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

html[dir=rtl] label {
    text-align: right;
}

    html[dir=rtl] label::before {
        float: right;
    }

@media screen and (min-width: 480px) {
    html[dir=rtl] .col-right {
        float: left;
    }

    html[dir=rtl] .col-left {
        float: right;
    }
}

@media screen and (min-width: 768px) {
    html[dir=rtl] header {
        text-align: left;
    }

        html[dir=rtl] header img {
            float: right;
        }
}