@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
/*******************************************************************************
                          Color Theme:

*******************************************************************************/

/**************************************
              Browser Resets
**************************************/
html, body,
header, nav, main, footer,
section, article, aside, div,
h1, h2, h3, h4, h5, h6,
p, a,
ol, ul, dl, li,
table, caption, thead, tbody, tr, th, td,
form, fieldset, legend, input, textarea, label,
figure, figcaption, img {
    padding: 0;
    margin: 0;
}


/************************************************
                  Global Styles
************************************************/
html {
    height: 100%;
    font-size: 62.5%;
    font-family: 'Lato', sans-serif;
    background: #fbfbfb;
}

body {
    position: relative;
    padding-bottom: 8rem;
    min-height: 100%
}

html, body,
header, nav, main, footer,
section, article, aside, div,
h1, h2, h3, h4, h5, h6,
p, a,
ol, ul, dl, li,
table, caption, thead, tbody, tr, th, td,
form, fieldset, legend, input, textarea, label,
figure, figcaption, img {
    box-sizing: border-box;
}

/**************************************
              Typography
**************************************/
h1 {
}

h2 {
    font-size: 2.2rem;
    color: #595a5c;
}

h3 {
    font-weight: normal;
}

p, a, span, li, label, input {
    font-size: 1.6rem;
    color: #595a5c;
}

p {
    line-height: 142%;
    margin-top: 0.6rem;
}

/************************************************
                  Header Styles
************************************************/
header {
    padding: 1.5rem;
    /*border-bottom: 2px solid #eee;*/
    box-shadow: 0px 1px 11px 1px #ddd;
    background: #fff;
}

/************************************************
               Navigation Styles
************************************************/

/************************************************
               Page Content Styles
************************************************/
main {
    padding: 3% 10% 5% 10%;
}

/**************************************
           Image Styles
**************************************/
img#University_Logo {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}

img#Empower_Logo {
    display: block;
    width: 145px;
    margin: 0 auto 1rem auto;
}

    img#Empower_Logo:hover {
        cursor: pointer;
    }

/**************************************
            List Styles
**************************************/

/**************************************
            Link Styles
**************************************/

/**************************************
            Form Styles
**************************************/
#login_welcome {
    margin: 0 0 25px 0;
    border: 0px solid red;   
}

.errorMessage {
    color: red;
    font-size: 1.6rem;
    padding: 5px 0 5px 0;
    text-align: center;
}

#pnlImpersonateLogin {
    width: 100%;
    margin: 1.0rem auto;
    max-width: 500px;
}

    #pnlImpersonateLogin label {
        display: block;
        width: 100%;
        margin-bottom: 0.2em;
    }

    #pnlImpersonateLogin input {
        width: 100%;
        height: 1.8em;
        border: 1px solid #bbb;
        border-radius: 3px;
        padding-left: 0.5em;
        padding-right: 0.5em;
        margin-top: 0.1rem;
        margin-bottom: 1.0rem;
    }

    #pnlImpersonateLogin #btnLogin {
        width: 80%;
        height: 2.2em;
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
        color: #444;
        border: 1px solid #aaa;
        border-radius: 7px;
        margin: 1.0rem auto 1.0rem auto;
        cursor: pointer;
        background: #eee;
        padding: 0 0 0px 0;
        transition: all linear 0.15s;
        vertical-align: middle;
    }

    #pnlImpersonateLogin #btnLogin:hover {
        color: #000;
    }

    #pnlImpersonateLogin a#Login_help_link {
        display: block;
        width: 80%;
        margin: 0 auto;
        text-decoration: none;
        text-align: center;
        font-style: italic;
        color: #3e6176;
    }

.formContainer {
    background: #ffffff;
    /*border: 1px solid #333333;
    border-radius: 0px;*/
    border: 1px solid #bbb;
    border-radius: 3px !important;
    font-size: 11pt;
    /*font-family: sans-serif;*/
    text-align: left;
}

    .formContainer input, select {
        font-size: 11pt;
        border: 1px solid #bbb;
        border-radius: 3px;
    }

.formHeader {
    background: #343434;
    color: #fff;
    font-size: 18px;
    text-align: left;
    padding: 5px 0 5px 20px;
    width: auto;
    display: block;
    border-bottom: 1px solid #bbb;
}

.button {
    border: 1px solid #bbb;
    border-radius: 3px;
    color: #595a5c;
    padding: 10px 20px 10px 20px;
    font-weight: bold;
    font-size: 11pt;
    cursor: pointer;
    transition: all linear 0.15s;
    width: 150px;
    background: #eee;
}

    .button:hover {
        color: #000;
        /*border: 1px solid #000;*/
    }

/************************************************
                  Footer Styles
************************************************/
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 2px solid #ddd;
    padding: 1rem;
    background: #fff;
}

    footer p#copyright {
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
        margin: 0 auto;
    }

/************************************************
                 Media Queries
************************************************/
@media screen and (min-width: 480px) {
    /*section#login_welcome,
    #pnlImpersonateLogin label,
    #pnlImpersonateLogin input {
        width: 80%;
        margin-left: 10%;
        text-align: left;
    }*/

    #pnlImpersonateLogin #btnLogin {
        /*width: 60%;
        border-radius: 5px;*/
        text-align: center;
    }
}

@media screen and (min-width: 640px) {
    /*section#login_welcome,
    #pnlImpersonateLogin label,
    #pnlImpersonateLogin input {
        width: 60%;
        margin-left: 20%;
        text-align: left;
    }*/

    #pnlImpersonateLogin #btnLogin {
        /*width: 50%;*/
        text-align: center;
    }
}

@media screen and (min-width: 960px) {
    /*section#login_welcome,
    div#ContentPlaceHolder1_pnlImpersonateLogin label,
    div#ContentPlaceHolder1_pnlImpersonateLogin input {
        display: block;
        width: 380px;
        margin-left: auto;
        margin-right: auto;
    }*/

    #pnlImpersonateLogin #btnLogin {
        display: block;
        text-align: center;
        /*width: 250px;
        margin-left: auto;
        margin-right: auto;*/
    }
}