/*
   * Front pages of CartoDB
   * - Login, 404, 500, 403, 422, 500, html5, no_javascript,...
   */

@import "compass/css3/images";
@import "../old_common/mixins";
@import "../old_common/fonts";
@import "../old_common/buttons";
@import "../old_common/vars";
@import "../old_common/common-sprite";
@import "../front/front-sprite";

// Styles for static pages like 404, 500, HTML5,...

html {
  width: 100%;
  height: 100%;
}

body {
  @include background(image-url("layout/grey-carto.jpg") repeat 0 0);
  min-width: 600px;

  /* SECTIONS */
  section {
    position: relative;
    width: 960px;
    margin: 0 auto;
    border-radius: 3px;
    background: WHITE;

    /* skeleton of a section */
    div.header {
      padding: 40px;
      border-bottom: 1px solid #E5E5E5;
    }

    div.footer {
      padding: 40px;
      border-top: 1px solid #E5E5E5;
    }

    div.content {
      display: block;
      position: relative;
      padding: 40px;

      /* content options */
      &.overflow {
        overflow: hidden;
      }

      &.no_padding {
        width: 960px;
        padding: 0;
      }

      &.less_padding {
        padding-top: 25px;
        padding-bottom: 25px;
        overflow: hidden;
      }
    }

    /* sessions flat section */
    &.sessions {
      position: relative;
      width: 392px;
      margin: 100px auto 50px;
    }

    /* add shadow to the section */
    &.shadow {
      border: 1px solid #E7E7E7;
      box-shadow: rgba(#000, 0.1) 0 0 3px 3px;

      &.top {
        box-shadow: rgba(#000, 0.06) 0 -1px 3px 3px;
      }

      &.bottom {
        box-shadow: rgba(#000, 0.06) 0 1px 3px 3px;
      }
    }

    /* border radius only in the top */
    &.top {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* border radius only in the bottom */
    &.bottom {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    /* grey top line */
    &.border {
      border-top: 1px solid  rgba(#000, 0.15);
    }

    div.med {
      width: 62%;
    }
  }

  /* SESSIONS FORM */
  section.sessions {
    div.browsers {
      margin: 30px 0 0 100px;
      font-size: 0;
      letter-spacing: -4px;

      a {
        display: inline-block;
        margin: 0 35px 0 0;
        padding: 0;
        letter-spacing: 0;
        vertical-align: top;
        vertical-align: middle;

        img {
          margin: 0 !important;
        }
      }
    }

    form {
      div.field {
        display: inline-block;
        position: relative;
        width: 100%;

        &.short {
          width: 312px;
          margin-right: 25px;
          margin-left: 25px;
          padding: 15px 0 0 40px;
        }

        &.border {
          border-top: 1px solid #E5E5E5;
        }
      }

      p {
        display: inline-block;
        vertical-align: top;
      }

      label {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 16px;
        color: #CCC;
        font: normal 15px $text-fonts;
        font-style: italic;
        user-select: none;

        &:hover {
          cursor: text;
        }
      }

      input[type="text"],
      input[type="password"],
      input[type="email"] {
        z-index: 10;
        width: 280px;
        height: auto;
        margin: 0;
        padding: 11px 15px;
        border: 1px solid #CCC;
        border-radius: 3px;
        background: none;
        color: #333;
        font: normal 15px $text-fonts;
        line-height: normal;

        &:focus {
          border-color: #999;
          outline: none;
          box-shadow: rgba(#000, 0.1) 0 0 2px 2px;
        }

        &.error {
          width: 255px;
          padding-right: 40px;
          border-color: #F08A84;
          color: #E95850;

          &:focus {
            border-color: #D17671;
          }
        }
      }

      /* Errors */
      div.field_with_errors {
        display: inline-block;
        width: auto;
        vertical-align: top;

        input[type="text"],
        input[type="password"],
        input[type="email"] {
          width: 255px;
          padding-right: 40px;
          border-color: #F08A84;
          color: #E95850;

          &:focus {
            border-color: #D17671;
          }
        }
      }

      div.field_error {
        @include text-indent();
        @include common-sprite(field_error);
        position: absolute;
        z-index: 5;
        top: 7px;
        right: 7px;
        width: 26px;
        height: 27px;

        &:hover {
          cursor: pointer;
        }
      }
    }

    // Longer than large :)
    &.longer {
      width: 562px;

      img.alone {
        margin: 50px 0 0 125px;
      }
    }
  }

  /* FOOTER */
  footer {
    width: 100%;
    min-width: 960px;
    height: 18px;
    padding: 38px 0 40px;
    border-top: 1px solid #E5E5E5;
    background: WHITE;

    div.wrap {
      overflow: visible;
    }

    span.cartodb {
      position: absolute;
      z-index: 10;
      top: -112px;
      left: -10px;
      width: 84px;
      height: 105px;
    }

    div.left {
      height: 19px;

      p {
        vertical-align: middle;
      }
    }

    &.short {
      width: 124px;
      min-width: 124px;
      height: 42px;
      margin: 0 auto 30px;
      padding: 0;
      border: none;
      background: none;

      a.cartodb {
        @include text-indent();
        @include front-sprite(cartodb_opacity);
        display: block;
        width: 124px;
        height: 42px;
      }
    }
  }

  /* NEW VERSION */
  &.new_version {
    @include background(linear-gradient(#519FD9, #1E5496));
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #377CB9;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#519FD9', endColorstr='#1E5496');

    div.bkg {
      @include background(image-url("layout/relief.png") repeat 0 0);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    header {
      position: relative;
      width: 480px;
      height: 42px;
      margin: 0 auto;
      padding: 40px 0;
      border: none;
      background: none;
      box-shadow: none;

      &::before {
        display: none;
        background: none;
      }

      h1 {
        margin: 0;

        a {
          @include text-indent();
          @include front-sprite(cartodb_dark);
          display: block;
          width: 124px;
          height: 42px;
        }
      }
    }

    section {
      width: 505px;
      margin-top: 0;
      background: image-url('layout/cartodb20.png') no-repeat right 0 white;

      .content {
        padding-right: 190px;

        h2 {
          font-size: 34px;
          line-height: 36px;
        }

        p {
          line-height: 19px;
        }
      }
    }// For IE7-8-9
  }
}