/*  Less Framework 4
    http://lessframework.com
    by Joni Korpi
    License: http://opensource.org/licenses/mit-license.php */

/*      Default Layout: 992px.
        Gutters: 24px.
        Outer margins: 48px.
        Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

/* Center the form */
.responsive #login-div-content {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  width: 436px;
}

/* Define padding/margins for content elements */
.responsive #login-div-content .header-block .banner-header {
  padding: 20px;
  height: auto;
}

.responsive #login-div-content .form-info {
  padding: 20px;
  border-bottom: 1px solid #D8D8D8;
}

.responsive #login-div-content form {
  padding: 10px 0px;
  margin-bottom: 0px;
}

.responsive #login-div-content div.info-text {
  margin: 0px 20px 10px;
}

.responsive #login-div-content div.field-container {
  margin: 10px 20px;
  padding-bottom: 5px;
}

/* Add styles for error messages */
div.responsive #login-div-content div.form-content.form-error,
div.responsive #login-div-content div.ErrorMessage {
  margin-bottom: 0px;
}

div.responsive #login-div-content div.ErrorMessage span.field-error-indicator {
  height: 23px;
  width: 18px;
  background-image: url('../../images/page_error_icon.png');
  vertical-align: top;
  background-repeat: no-repeat;
  display: inline-block;
  zoom: 1;
}

div.responsive #login-div-content div.ErrorMessage span.field-error-text {
  display: inline-block;
  padding: 4px;
}

/* Wrap the input elements */
.responsive #login-div-content div.field-container div.form-content input[type="text"],
.responsive #login-div-content div.field-container div.form-content input[type="password"],
.responsive #login-div-content div.field-container div.form-content input[type="email"] {
  display: block;
  width: 100%;
}

/* Float the "forgot" links to the right */
.responsive #login-div-content div.field-container div.form-content .forgot-link {
  float: right;
}

.responsive #login-div-content div.field-container div.form-content #rememberMe {
  margin-left: 0px;
}

.responsive #login-div-content div.field-container.actions {
  margin: 10px 20px 0px;
  padding: 0px 0px 15px;
}

/* ********************************************************** */
/* Media Query Overrides                                      */
/* ********************************************************** */

/*      Tablet Layout: 768px.
        Gutters: 24px.
        Outer margins: 28px.
        Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

}

/*      Mobile Layout: 320px.
        Gutters: 24px.
        Outer margins: 34px.
        Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
  .responsive #login-div-content {
    width: 90%;
  }
}

/*      Wide Mobile Layout: 480px.
        Gutters: 24px.
        Outer margins: 22px.
        Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .responsive #login-div-content {
    width: 90%;
  }
}