/*@import url(/MeritPortal/assets/stylesheets/normalize.min.css);*/
@import url(/MeritPortal/assets/stylesheets/normalize.css);
@import url(/MeritPortal/assets/stylesheets/reset.min.css);

body {
    background: #BFBCB8;
    height: auto !important;
}

h2 {
    font-size: medium;
    margin-bottom: 0px;
}

h3 {
    font-size: small;
}

hr {
    color: #C0C0C0;
}

.hide {
    display: none;
}

#logon h1, #logon_success h1 {
    background: #7F7F7F;
    background-size: 35px;
    color: #fff;
    font-size: 140%;
    font-weight: 300;
    padding: 10px 0 10px 0px;
    text-align: center;
    margin-bottom: 20px;
}

a {
    color: #2b5797;
}

.textbox {
    border-style: dotted;
    border-width: 1px;
    border-color: gray;
}

.clearlink {
    text-decoration: none;
    font-weight: bold;
    color: red;
}

#mainpage {
    width: 770px;
    padding: 20px;
}

.borderdiv {
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    padding: 10px;
}

.rowred {
    background-color: Red;
}

.ErrorMessage {
    color: red!important;
    font-size: 100%;
}

.InfoMessage {
    color: Black;
}

#logon, #logon_success {
    background: #FAFAFA;
    text-align: left;
    margin: 10px auto 0 auto;
    padding-bottom: 10px;
    width: 415px;
    border-style: solid;
}

#logon table {
    width: 100%;
    margin: 0;
    padding: 0;
}

#logon table td {
    margin: 0 auto;
}

#logon table td.un {
    padding: 20px 0 0 0;
}

#lost_credentials {
    margin: 0 20px;
}

#lost_credentials a {
    margin: 20px 0;
    font-weight: bold;
    font-size: 12px;
}

#cmdLogin:hover:enabled, #cmdLostPassword:hover:enabled, #cmdLostUsername:hover:enabled, #cmdActivate:hover:enabled, #cmdLogin:hover:enabled, .cmdShowLost:hover:enabled { background: #313133; }

#cmdLogin:disabled, #cmdLostPassword:disabled, #cmdLostUsername:disabled, #cmdActivate:disabled, #cmdLogin:disabled, .cmdShowLost:disabled { opacity: 0.2; }

#lost_credentials a {
    margin: 20px 0;
    font-weight: bold;
    font-size: 12px;
}

.lost_credentials #lblPasswordMessage, #lblUsernameMessage {
        color:red;
}

.lost_credentials #UsernameButton {
    padding-top: 5px;
}

#cmdLostPassword, #cmdLostUsername, #cmdActivate, #cmdLogin, #cmdResendExpiredLink, .cmdShowLost {
    background: none repeat scroll 0 0 #7F7F7F;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    padding: 4%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    width: 100%;
    border-radius: 10px;
}

#status {
    margin: 20px 20px 0 20px;
}

#txtUserID, #txtUserName, #txtPassword, #password1, #password2, #txtPasswordEmail, #txtUserNameEmail, #txtDOB, #ctrlEmailValidate_txtEmailCode {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ccc;
    color: #555;
    font-family: 'Open Sans', sans-serif;
    font-size: 95%;
    margin-bottom: 4%;
    padding: 4% 4% 4% 13%;
    width: 100%;
}

#password2, #password1, #cmdActivate, #txtDOB {
    margin-top: 10px;
}

#ctl00_txtCaptcha, #txtCaptcha {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ccc;
    color: #555;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 0%;
    padding: 4% 4% 4% 4%;
    width: 100%;
}

#txtUserID:focus, #txtPassword:focus, #password1:focus, #password2:focus, #txtDOB:focus {
    border: 1px solid #444;
}

.error {
    border: 1px solid #F00!important;
}

#logon p, #logon_success p {
    margin: 5px 20px 20px 20px;
    font-size: 12px;
}

#logon table p {
    margin: 20px 0;
    text-align: left;
}

#logon h2, #logon h3 {
    font-weight: normal;
    font-size: medium;
    margin: 20px 20px 5px 20px;
}

#logon table h2, #logon table h3 {
    margin: 0;
}

#logon h4 {
    font-weight: normal;
    margin-bottom: 20px;
}

#tempCaptcha {
    margin: 0 20px;
}

#tempCaptcha p {
    margin: 20px 0;
}

/* desktop breakpoint */

@media screen and (min-width: 767px) {
    #logon, #logon_success {
        max-width: 415px!important;
    }
    #txtUserName {
        background: url(/MeritPortal/assets/elements/user3.png) no-repeat scroll 10px 8px #fff;
    }
    #txtUserID {
        background: url(/MeritPortal/assets/elements/user3.png) no-repeat scroll 10px 8px #fff;
    }
    #txtPassword, #password1, #password2 {
        background: url(/MeritPortal/assets/elements/key.png) no-repeat scroll 10px 8px #fff;
    }
    #txtPasswordEmail {
        background: url(/MeritPortal/assets/elements/mail4.png) no-repeat scroll 10px 8px #fff;
    }
    #txtUserNameEmail {
        background: url(/MeritPortal/assets/elements/mail4.png) no-repeat scroll 10px 8px #fff;
    }
    #txtDOB {
        background: url(/MeritPortal/assets/elements/calendar2.png) no-repeat scroll 10px 8px #fff;
    }
    #lost_credentials {
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    #logon, #logon_success {
        max-width: 90%!important;
    }
    #txtUserName {
        background: url(/MeritPortal/assets/elements/user3.png) no-repeat scroll 10px 8px #fff;
        background-size: 24px;
    }
    #txtUserID {
        background: url(/MeritPortal/assets/elements/user3.png) no-repeat scroll 10px 8px #fff;
        background-size: 24px;
    }
    #txtPassword, #txtPassword1, #txtPassword2 {
        background: url(/MeritPortal/assets/elements/key.png) no-repeat scroll 10px 8px #fff;
        background-size: 24px;
    }
    #txtPasswordEmail {
        background: url(/MeritPortal/assets/elements/mail4.png) no-repeat scroll 10px 8px #fff;
        background-size: 24px;
    }
    #txtUserNameEmail {
        background: url(/MeritPortal/assets/elements/mail4.png) no-repeat scroll 10px 8px #fff;
        background-size: 24px;
    }
    #txtDOB {
        background: url(/MeritPortal/assets/elements/calendar2.png) no-repeat scroll 10px 8px #fff;
        background-size: 24px;
    }
    #lost_credentials {
        text-align: center;
    }

}

#lblStatus {
    font-size: 12px;
    color: #444;
}

#CaptchaForm {
    text-align: left;
    margin: 0 20px 20px 20px;
    font-size: 12px;
}

#imgCaptcha {
    margin: 10px 0;
}

#ctl00_lblMessage {
    margin: 10px 0;
    display: block;
}

.names {
    text-align: left!important;
}

#lblUserName {
    margin-bottom: 20px;
}

.control-label {
    display: inline-block !important;
    text-align: left;
    float: left;
    margin-left: 4%;
}

#litActivationText {
    text-align: Left!important;
    padding-bottom: 10px;
}

/*
    Changes to the login page.
*/
#status2 {
    /*
        ID was re-used, so split this off to use its own (shoudlnt use 2 elements with same ID).
    */
    margin: 20px 20px 0 20px;
}
#login_notice{
    border: 1px solid black;
    margin: 0 auto;
    padding: 5px;
    text-align: justify;
    border-radius: 2px 2px 2px 2px;
}
#lbl_login_notice {
    color: red;
    font-size: 12px;
}