/*
    Login styles
*/

#login {
    width: 100%;
    height: auto;
    max-width: 600px;
    margin: 10% -300px;
    padding: 30px 40px;
    background: #f4f4f4; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjRmNGY0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(60deg,  #f4f4f4 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f4f4f4), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
    -moz-box-shadow: -5px 5px 15px -8px #000;
    -webkit-box-shadow: -5px 5px 15px -8px #000;
    box-shadow: -5px 5px 15px -8px #000;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: 2px solid #fff;
    left: 50%;
    position: absolute;
    }
            
    #login .login-form {
        padding: 12px 10px;
        }
        
        #login .login-form .field {
            padding: 10px 0px;
            width: 100%;
            height: auto;
            position: relative
            }
            
            #login .login-form .field:after {
                content: "";
                display: block;
                overflow: hidden;
                clear: both;
            }
            
            #login .login-form .field label{
                float: left;
                display: inline-block;
                color: #202528;
                font-size: 16px;
                font-weight: 300;
                line-height: 38px;
            }
            
            #login .login-form .field .input-background{
                float: right;
                display: inline-block;
                background:url(/Content/images/input-bg-large.png) center center;
                width: 338px;
                height:38px;
                }
                
                #login .login-form .field .input-background input{
                    border: none;
                    padding: 0px 5px;
                    background: none;
                    width: 100%;
                    height: 38px;
                    line-height: 38px;
                    text-align: right;
                    outline: none;
                }
                
                #login .login-form .forgot-pass {
                    margin: 0px;
                    text-align: right;
                    }
                    
                    #login .login-form .forgot-pass a{
                        font-size: 12px;
                    }
    
/*
    Page styles
*/

.page-background {
    width: 100%;
    height: auto;
    margin: 2% auto 0 auto;
    padding: 30px 40px;
    background: #f4f4f4; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjRmNGY0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(60deg,  #f4f4f4 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#f4f4f4), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(60deg,  #f4f4f4 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
    -moz-box-shadow: -5px 5px 15px -8px #000;
    -webkit-box-shadow: -5px 5px 15px -8px #000;
    box-shadow: -5px 5px 15px -8px #000;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: 2px solid #fff;
    }
    
    section#content {
        padding: 0px 20px;
    }
    
    section#content:after {
        content: "";
        display: block;
        overflow: hidden;
        clear: both;
    }
    
    section#content .button {
        float: right;
        display: inline-block;
        margin: 15px 0px;
        font-weight: 300;
        font-size: 14px;
    }


/*
    Media Queries
*/

@media screen and (min-width: 0px) and (max-width: 640px) { 
    
    .page-background {
        padding: 30px 10px;
    }
}

@media screen and (min-width: 0px) and (max-width: 600px) { 
    #login {
        margin: 10% 0px;
        left: 0;
    }
}

@media screen and (min-width: 0px) and (max-width: 530px) { 
    
    #login .login-form .field label {
        float: none;
        display: block;
        line-height: 26px;
    }
    
    #login .login-form .field .input-background {
        float: none;
        display: block;
        width: 100%;
        background: #f3f3f3; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZWRlZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #f3f3f3 0%, #dedede 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f3f3f3 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f3f3f3 0%,#dedede 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f3f3f3 0%,#dedede 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #f3f3f3 0%,#dedede 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#dedede',GradientType=0 ); /* IE6-8 */
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
    }
    
    #login .login-form .field .input-background input{
        background: #ffffff; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWYxZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-8 */
        width: 99.3%;
        height: 35px;
        line-height: 35px;
        margin: 2px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    
    #login .login-form .forgot-pass {
        text-align: left;
    }
    
    section#content {
        padding: 0px 10px;
    }
}

@media screen and (min-width: 0px) and (max-width: 470px) { 
    
    #login {
        padding: 30px 30px;
    }
    
    section#content .button {
        font-size: 12px;
    }
    
}