﻿@font-face {
    font-family: 'Corpid';
    src: url("../fonts/corpid/corpidc1-regular-webfont.eot");
    src: url("../fonts/corpid/corpidc1-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/corpid/corpidc1-regular-webfont.woff") format("woff"), url("../fonts/corpid/corpidc1-regular-webfont.ttf") format("truetype"), url("../fonts/corpid/corpidc1-regular-webfont.svg#corpid_c1_regularregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Corpid';
    src: url("../fonts/corpid/corpidc1-bold-webfont.eot");
    src: url("../fonts/corpid/corpidc1-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/corpid/corpidc1-bold-webfont.woff") format("woff"), url("../fonts/corpid/corpidc1-bold-webfont.ttf") format("truetype"), url("../fonts/corpid/corpidc1-bold-webfont.svg#corpid_c1bold") format("svg");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Corpid';
    src: url("../fonts/corpid/corpidc1-heavy-webfont.eot");
    src: url("../fonts/corpid/corpidc1-heavy-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/corpid/corpidc1-heavy-webfont.woff") format("woff"), url("../fonts/corpid/corpidc1-heavy-webfont.ttf") format("truetype"), url("../fonts/corpid/corpidc1-heavy-webfont.svg#corpid_c1heavy") format("svg");
    font-weight: 800;
    font-style: normal;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

.clearfix, #login-form {
    zoom: 1;
}

    .clearfix:before, #login-form:before, .clearfix:after, #login-form:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }

    .clearfix:after, #login-form:after {
        clear: both;
    }

html, body {
    overflow: hidden;
}

body {
    background-color: #f2f2f2;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #232323;
    font-family: 'Corpid', Helvetica, Arial, sans-serif;
}

.right {
    float: right;
}

.nab-button-default, #login-form .nab-button-action,
.nab-button-action {
    display: block;
    float: left;
    margin: 0 3px;
    padding: 6px 8px;
    width: auto;
}

    .nab-button-default:first-child, #login-form .nab-button-action:first-child, .nab-button-default:only-child, #login-form .nab-button-action:only-child,
    .nab-button-action:first-child,
    .nab-button-action:only-child {
        margin-left: 0;
    }

    .nab-button-default:last-child, #login-form .nab-button-action:last-child, .nab-button-default:only-child, #login-form .nab-button-action:only-child,
    .nab-button-action:last-child,
    .nab-button-action:only-child {
        margin-right: 0;
    }

    .nab-button-default span, #login-form .nab-button-action span,
    .nab-button-action span {
        display: block;
        margin: 0;
        padding: 0;
        position: relative;
        width: auto;
    }

    .nab-button-default, #login-form .nab-button-action,
    .nab-button-default:active,
    #login-form .nab-button-action:active,
    .nab-button-action:active,
    .nab-button-default.disabled,
    #login-form .disabled.nab-button-action,
    .nab-button-default.disabled:hover,
    .nab-button-default.disabled:focus,
    .nab-button-default.disabled:active,
    .nab-button-default[disabled],
    #login-form [disabled].nab-button-action,
    .nab-button-default[disabled]:hover,
    .nab-button-default[disabled]:focus,
    .nab-button-default[disabled]:active,
    .nab-button-action,
    .nab-button-action.disabled,
    .nab-button-action.disabled:hover,
    .nab-button-action.disabled:focus,
    .nab-button-action.disabled:active,
    .nab-button-action[disabled],
    .nab-button-action[disabled]:hover,
    .nab-button-action[disabled]:focus,
    .nab-button-action[disabled]:active {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
        cursor: default;
        font-family: 'Corpid', 'Helvetica', 'Sans-serif';
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

        .nab-button-default:focus, #login-form .nab-button-action:focus,
        .nab-button-default:focus:active,
        #login-form .nab-button-action:focus:active,
        .nab-button-action:focus:active,
        .nab-button-default.disabled:focus,
        #login-form .disabled.nab-button-action:focus,
        .nab-button-default[disabled]:focus,
        #login-form [disabled].nab-button-action:focus,
        .nab-button-action:focus,
        .nab-button-action.disabled:focus,
        .nab-button-action[disabled]:focus {
            outline: none;
        }

            .nab-button-default:hover, #login-form .nab-button-action:hover, .nab-button-default:focus, #login-form .nab-button-action:focus,
            .nab-button-default:hover:active,
            #login-form .nab-button-action:hover:active,
            .nab-button-action:hover:active,
            .nab-button-default:focus:active,
            #login-form .nab-button-action:focus:active,
            .nab-button-action:focus:active,
            .nab-button-default.disabled:hover,
            #login-form .disabled.nab-button-action:hover,
            .nab-button-default[disabled]:hover,
            #login-form [disabled].nab-button-action:hover,
            .nab-button-default.disabled:focus,
            #login-form .disabled.nab-button-action:focus,
            .nab-button-default[disabled]:focus,
            #login-form [disabled].nab-button-action:focus,
            .nab-button-action:hover,
            .nab-button-action:focus,
            .nab-button-action.disabled:hover,
            .nab-button-action[disabled]:hover,
            .nab-button-action.disabled:focus,
            .nab-button-action[disabled]:focus {
                cursor: pointer;
                text-decoration: none;
            }

        .nab-button-default:active, #login-form .nab-button-action:active, .nab-button-action:active {
            background-color: #3b3b3b;
            background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3b3b3b), color-stop(100%, #4e4e4e));
            background: -webkit-linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            background: -moz-linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            background: -o-linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            background: linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            border-bottom: 1px solid #828282;
            border-left: none;
            border-right: none;
            border-top: 1px solid #191919;
            -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
            -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
            color: white;
        }

        .nab-button-default:hover:not(:active):active, #login-form .nab-button-action:hover:not(:active):active, .nab-button-action:hover:not(:active):active {
            background-color: #3b3b3b;
            background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3b3b3b), color-stop(100%, #4e4e4e));
            background: -webkit-linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            background: -moz-linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            background: -o-linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            background: linear-gradient(top, #3b3b3b 0%, #4e4e4e 100%);
            border-bottom: 1px solid #828282;
            border-left: none;
            border-right: none;
            border-top: 1px solid #191919;
            -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
            -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset;
            color: white;
        }

        .nab-button-default:hover:not(:active), #login-form .nab-button-action:hover:not(:active), .nab-button-default:focus, #login-form .nab-button-action:focus {
            background: #E9E9E9;
            border-bottom: 1px solid #E9E9E9;
            border-left: none;
            border-right: none;
            border-top: 1px solid rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            color: #333333;
        }

.nab-button-default, #login-form .nab-button-action {
    background: #D3D3D3;
    border-bottom: 1px solid #D3D3D3;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333333;
}

    .nab-button-default.disabled, #login-form .disabled.nab-button-action, .nab-button-default.disabled:hover, .nab-button-default.disabled:focus, .nab-button-default.disabled:active, .nab-button-default[disabled], #login-form [disabled].nab-button-action, .nab-button-default[disabled]:hover, .nab-button-default[disabled]:focus, .nab-button-default[disabled]:active {
        background: #BEBEBE;
        border-bottom: 1px solid #BEBEBE;
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        color: #333333;
    }

        .nab-button-default.disabled:hover, #login-form .disabled.nab-button-action:hover, .nab-button-default[disabled]:hover, #login-form [disabled].nab-button-action:hover, .nab-button-default.disabled:focus, #login-form .disabled.nab-button-action:focus, .nab-button-default[disabled]:focus, #login-form [disabled].nab-button-action:focus, .nab-button-default.disabled:active, #login-form .disabled.nab-button-action:active, .nab-button-default[disabled]:active, #login-form [disabled].nab-button-action:active {
            background: #BEBEBE;
            color: #333333;
            cursor: not-allowed;
        }

        .nab-button-default.disabled, #login-form .disabled.nab-button-action, .nab-button-default.disabled:hover, #login-form .disabled.nab-button-action:hover, .nab-button-default.disabled:focus, #login-form .disabled.nab-button-action:focus, .nab-button-default.disabled:active, #login-form .disabled.nab-button-action:active, .nab-button-default[disabled], #login-form [disabled].nab-button-action, .nab-button-default[disabled]:hover, #login-form [disabled].nab-button-action:hover, .nab-button-default[disabled]:focus, #login-form [disabled].nab-button-action:focus, .nab-button-default[disabled]:active, #login-form [disabled].nab-button-action:active {
            border-top: 1px solid rgba(0, 0, 0, 0.2);
        }

    .nab-button-default:after, #login-form .nab-button-action:after {
        background-repeat: no-repeat;
        content: '';
        display: none;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

.nab-button-action {
    background-color: #d2d2d2;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d2d2d2), color-stop(100%, #828282));
    background: -webkit-linear-gradient(top, #d2d2d2 0%, #828282 100%);
    background: -moz-linear-gradient(top, #d2d2d2 0%, #828282 100%);
    background: -o-linear-gradient(top, #d2d2d2 0%, #828282 100%);
    background: linear-gradient(top, #d2d2d2 0%, #828282 100%);
    border-bottom: 1px solid #828282;
    border-left: none;
    border-right: none;
    border-top: 1px solid #eaeaea;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333333;
}

    .nab-button-action:hover:not(:active), .nab-button-action:focus {
        background-color: #d2d2d2;
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d2d2d2));
        background: -webkit-linear-gradient(top, #ffffff 0%, #d2d2d2 100%);
        background: -moz-linear-gradient(top, #ffffff 0%, #d2d2d2 100%);
        background: -o-linear-gradient(top, #ffffff 0%, #d2d2d2 100%);
        background: linear-gradient(top, #ffffff 0%, #d2d2d2 100%);
        border-top-color: #eaeaea;
        color: #333333;
    }

    .nab-button-action.disabled, .nab-button-action.disabled:hover, .nab-button-action.disabled:focus, .nab-button-action.disabled:active, .nab-button-action[disabled], .nab-button-action[disabled]:hover, .nab-button-action[disabled]:focus, .nab-button-action[disabled]:active {
        background: gainsboro;
        border-bottom: 1px solid gainsboro;
        border-left: none;
        border-right: none;
        border-top: 1px solid #f7f7f7;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        color: #b9b9b9;
    }

        .nab-button-action.disabled:hover, .nab-button-action[disabled]:hover, .nab-button-action.disabled:focus, .nab-button-action[disabled]:focus, .nab-button-action.disabled:active, .nab-button-action[disabled]:active {
            background: gainsboro;
            color: #b9b9b9;
            cursor: not-allowed;
        }

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    background-color: #141414;
    line-height: normal;
}

body {
    color: white;
    font-family: 'Corpid', Helvetica, sans-serif;
    font-size: 100%;
    font-weight: normal;
    position: relative;
}

a {
    color: white;
    text-decoration: none !important;
}

    a:hover {
        text-decoration: underline !important;
    }

#container {
    background: white url('/images/login/bg_banner.jpg') no-repeat top left;
    height: 700px;
    margin: 0;
    padding: 24px;
    position: relative;
}

    #container:before {
        background: transparent url('/images/login/globe.png') no-repeat top right;
        background-image: url('images/login/globe.png');
        content: '';
        display: block;
        height: 553px;
        position: absolute;
        width: 553px;
        top: 24px;
        right: 24px;
    }

#logo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    font-weight: bold;
    height: 65px;
    position: relative;
    margin: -24px 0 20px 0;
    width: 95px;
    padding: 46px 0 10px 49px;
    text-decoration: none;
}

    #logo:hover {
        text-decoration: none;
    }

    #logo:before {
        background: transparent url('/images/login/nab-logo.png') no-repeat top left;
        -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.6);
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.6);
        content: '';
        display: block;
        height: 65px;
        left: 0;
        position: absolute;
        top: 0;
        width: 44px;
    }

.message {
    background-color: #232323;
    border: 1px solid white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
    display: block;
    font-size: .75em;
    font-weight: 800;
    padding: 6px;
    width: auto;
}

    .message.warning {
        background-image: url('/images/login/icon-warning.png');
        background-position: 6px 6px;
        background-repeat: no-repeat;
        padding-left: 30px;
    }

    .message.success {
        background-image: url('/images/login/icon-deal-done-tick.png');
        background-position: 6px 6px;
        background-repeat: no-repeat;
        padding-left: 30px;
    }

    .message p {
        line-height: 1.2em;
    }

#login-form {
    position: relative;
    margin-left: 15px;
    width: 253px;
    float: left;
}

#error-page {
    position: relative;
    margin-left: 15px;
    width: 253px;
    float: left;
}

#login-form .nab-button-action {
    color: #333333;
    float: right;
    line-height: 13px;
}

#login-form input {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    height: 26px;
    line-height: 24px \9;
}

    #login-form input.error {
        border-color: transparent;
    }

#login-form .message {
    position: absolute;
    right: 0;
    top: 100px;
    width: 222px;
}

    #login-form .message .close-message-button {
        height: 22px;
        line-height: 9px;
        margin: 0;
        min-width: 24px;
        position: absolute;
        padding: 0;
        right: 5px;
        top: 5px;
        width: 24px;
    }

        #login-form .message .close-message-button span {
            background: transparent url('/images/CloseX-White.png') no-repeat center center;
            display: block;
            height: 19px;
            left: 0;
            position: absolute;
            text-indent: -9999px;
            top: 0;
            width: 24px;
        }

    #login-form .message .contact-info {
        display: none;
        margin-top: .500em;
    }

        #login-form .message .contact-info p,
        #login-form .message .contact-info li {
            margin-bottom: .625em;
        }

            #login-form .message .contact-info li:only-child, #login-form .message .contact-info li:last-child {
                margin-bottom: 0;
            }

            #login-form .message .contact-info li:before {
                background-color: transparent;
                background-position: center center;
                background-repeat: no-repeat;
                content: '';
                display: block;
                float: left;
                margin-right: 10px;
                width: 16px;
            }

            #login-form .message .contact-info li.email:before {
                background-image: url('/images/login/icon-email.png');
                height: 14px;
            }

            #login-form .message .contact-info li.phone:before {
                background-image: url('/images/login/icon-phone.png');
                height: 22px;
            }

    #login-form .message.redirect-message {
        top: 50px;
        margin-top: 60px;
    }

    #login-form .message.forgot-message {
        top: 40px;
        margin-top: 40px;
    }

    #login-form .message.change-message {
        top: 80px;
        margin-top: 60px;
    }

    #login-form .message.error-message {
        top: 30px;
        margin-top: 60px;
    }

    #login-form .message.locked {
        color: red;
    }

#email-error,
#newPassword-error,
#newPswd-error,
#username-error {
    width: 340px;
    text-indent: 0px !important;
    margin-left: 10px;
    margin-top: -25px;
}

#oldPswd-error,
#oldPassword-error,
#password-error {
    width: 340px;
    text-indent: 0px !important;
    margin-left: 10px;
    margin-top: -25px;
}

#confirmNewPswd-error,
#confirmNewPassword-error {
    width: 340px;
    text-indent: 0px !important;
    margin-left: 10px;
    margin-top: -25px;
}

#login-form .message.locked .contact-info {
    display: block;
}

#login-form .message.forgot-password {
    top: 170px;
}

    #login-form .message.forgot-password .contact-info {
        display: block;
    }

        #login-form .message.forgot-password .contact-info .email {
            font-weight: normal;
        }

#login-form .caption {
    font-weight: normal;
}

#login-form #forgot-password {
    clear: both;
    display: block;
    float: right;
    font-size: .75em;
    font-weight: normal;
    margin-top: 25px;
    text-align: right;
}

#login-form #register-user {
    clear: both;
    display: block;
    float: left;
    font-size: .75em;
    font-weight: normal;
    margin-top: 10px;
    text-align: right;
}

@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #container {
        background-image: url('/images/login/bg_banner@x2.jpg');
        background-size: 1220px 350px;
    }

        #container:before {
            background-image: url('/images/login/globe@2x.png');
            background-size: 553px 553px;
        }

    #logo:before {
        background-image: url('/images/login/nab-logo@2x.png');
        background-size: 44px 65px;
    }

    #login-form .message .contact-info li.email:before {
        background-image: url('/images/login/icon-email@2x.png');
        background-size: 16px 16px;
    }

    #login-form .message .contact-info li.phone:before {
        background-image: url('/images/login/icon-phone@2x.png');
        background-size: 16px 16px;
    }

    .close-message-button span {
        background-image: url('/images/CloseX-White@2x.png');
        background-size: 10px 11px;
    }
}

@media screen and (max-width: 930px) {
    #container:before {
        display: none;
    }
}

.nab-layout-manager-tall-narrow #login-form {
    margin: 0 auto;
}

@media screen and (max-width: 550px) {
    #login-form {
        margin: 0 auto;
    }
}

input, textarea, select, a, button {
    outline: none;
    font: inherit;
}

input {
    background-color: white;
    border: 1px solid transparent;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: black;
    font-size: 12px;
    font-weight: normal;
    height: 22px;
    padding: 0 4px;
    overflow: visible;
    vertical-align: middle;
    line-height: 20px \9;
}

    input:focus {
        background-color: white;
        border-color: #61aee1;
        color: black;
        outline-width: 0;
        outline: none;
    }

    input[disabled], input.disabled {
        background-color: #e6e6e6;
        border-color: #b9b9b9;
        color: #7d7d7d;
    }

    input::-ms-clear {
        display: none;
    }

.auth-form fieldset {
    margin-bottom: 12px;
}

    .auth-form fieldset legend {
        font-weight: bold;
        padding: 0 0 10px 30px;
    }

    .auth-form fieldset ul > li {
        margin: 0 0 10px 0;
    }

.auth-form input {
    width: 222px;
}

.auth-form label {
    float: left;
    height: 25px;
    margin: 2px 5px 0 0;
    text-indent: -9999px;
    width: 25px;
}

    .auth-form label.input-username-label {
        background-image: url('/images/input-user-icon.png');
    }

    .auth-form label.input-password-label {
        background-image: url('/images/input-password-icon.png');
    }

.auth-form button {
    height: 27px;
    margin: 0;
    min-width: 70px;
}

@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .auth-form label {
        background-size: 25px 25px;
    }

        .auth-form label.input-username-label {
            background-image: url('/images/input-user-icon@2x.png');
        }

        .auth-form label.input-password-label {
            background-image: url('/images/input-password-icon@2x.png');
        }
}

.error-box .message {
    width: 360px !important;
    top: 30px !important;
    left: 0 !important;
}

#logout-text {
    margin: 160px;
    font-size: 25px;
}

#logout-url {
    clear: both;
    float: left;
    margin-left: 15px;
}

#password-policy {
    margin-top: 50px;
    margin-left: 650px;
    border: 1px solid;
    width: 360px;
    padding: 10px;
}

    #password-policy ul {
        list-style: disc inside;
    }

#return-login {
    margin-left: 450px;
}

.capsLockOn {
    background-image: url('/images/login/capslock.gif');
    background-repeat: no-repeat;
    background-position: right;
    background-position-x: 98%;
}
