

// @import '../mixins.less';
@import 'lesshat.less';
@import 'sprites.less';
@import 'fonts.less';
@import 'ribbon_messages.less';
@import 'theme.less';
@import 'colors.less';

// Change this to the width of the sprites.png file (not the @2x version)
@sprite_image_width: 52px;

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

// Retina density screen support
.sprites() {
  background:url("/static/img/sprites.png") top left no-repeat;

  /* 1.5 dpr
  @media @highdpi {
    background-image: url("/static/img/sprites@2x.png");
    .background-size(@sprite_image_width auto);
  } */
}

@header_width: 990px;
@wrapper_width: 600px;
@form_width: 520px;
@progress_indicator_width: @form_width;
// The viewable area in which the forms slide through
@viewport_initial_width: 1000px;

*:focus {
  outline: @focus_color auto 5px;
}




.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

div.modaldialog div.spinner {
  padding: 20px;
  width: 100px;
  margin: 0 auto;

  &:before {
    content: "";
    background: url("/static/img/spinner16.gif") top left no-repeat;
    height: 16px;
    width: 16px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
  }
}

div.progress {

  // background-color: rgba(0, 0, 0, 0.08);
  padding: 10px;
  color: #000;
  width: @progress_indicator_width !important;

  ul {
    counter-reset: li;

    li {
      display: inline-block;
      margin-right: 2em;
      list-style: none;
      text-transform: uppercase;
      font-size: 0.9em;
      letter-spacing: 1px;
      .opacity(0.5);
      cursor: pointer;

      &.active {
        .opacity(1);

        &:before {
          background-color: darken(@color_actionable, 5%);
        }

      }

      &:before {
        content: counter(li);
        counter-increment: li;
        font-size: 1.2em;
        .medium-font;
        color: white;
        background-color: #A0A0A0;
        .border-radius(50%);
        margin-right: 8px;
        text-align: center;
        width: 30px;
        height: 30px;
        display: inline-block;
        vertical-align: middle;
        line-height: 30px;
      }
    }
  }
}

div.wrapper {
  width: @wrapper_width;
  margin: 0 auto;
  * {
    .box-sizing(border-box);
  }
}

#viewport {
  width: @viewport_initial_width;
  margin: 0 auto;
  overflow: hidden;
  .transform(scale(1));
  .transition-property(scale);
  .transition-duration(200ms);

  &.animating {
    .transform(scale(0.95));
  }
}

.page {
  margin-top:100px;
}

#ajax_wrapper {
  position: relative;
  list-style: none;
  width: @viewport_initial_width;
  left: 0;

  li.step {
    float: left;
    width: @viewport_initial_width;
  }

  div.step {

    &:nth-child(3) {
    }
  }
}

#new_site, #invite_step {


  div.form_bounds {
    background-color: #F5F5F5;
    border: 1px solid #ccc;
    /*.box-shadow(0 0 15px 0px rgba(0, 0, 0, 0.5));*/
    .border-radius(6px);
    overflow: hidden;
  }

  div.form_body {
    padding: 1.4em 2em 2em;
    position: relative;
  }

  div.form_buttons {
    margin-top: 2em;
  }


  h1 {
    .medium-font;
    text-align: center;
    color: @color_on_dark_text;
    background-color: @color_darker_bg_transparent;
    padding: 1em 0;
    /*.border-radius(6px 6px 0 0);*/
    border-bottom: 1px solid #D1D1D1;
    text-transform: uppercase;
    font-size: 1.1em;

  }


  form {
    margin: 1em auto;
    width: @form_width;

    input[type="text"], input[type="email"] {
      border: 2px solid  lighten(@color_border, 30%);
      display: block;
      padding: 8px;

      // color: @default_text_color;
      color: @entered_text_color;
      width: 100%;
      margin-bottom: 12px;
      font-size: 1.25em;
      .border-radius(3px);

      &:focus {
        border: 2px solid @color_border;
      }

      &.error {
        border: 2px solid lighten(@error_color, 30%);
      }

       outline: none;
    }

    #shortname {
      text-align: left;
      width: 140px;
      display: inline-block;
    }

    label {
      .medium-font;
      font-size: 1.55em;
      position: relative;
    }

    label.radio {
      cursor: pointer;
    }

    label.placeholder {
      padding: 11px;
      .light-font;
    }

    label[generated="true"], #subdomain-check {
      font-size: 1em;
      position: absolute;
      color: white;
      padding: 0 0 0 18px;
      .animation-iteration-count(1);
      .border-top-left-radius(5px);
      .border-bottom-left-radius(5px);
    }

    label[generated="true"] {
      background-color: @error_color;
    }

    label[generated="true"]:after, #subdomain-check:after {
      content: "";
      display: inline-block;
      .sprites;
      .sprite-error-tip-right;
      vertical-align: middle;
      position: relative;
      right: -14px;
    }

    #subdomain-check {
      padding-left: 10px;
      margin-left: 8px;
      color: white;

      &:after {
        // .opacity(0.2);
      }

      span {
        position: relative;
        top: 1px;

        &:before {
          .sprites;
          margin-right: 8px;
          content: "";
          display: inline-block;
          vertical-align: text-top;
        }
      }

      &.available {
        background-color: fadeout(@success_color, 5%);
        span {
          width: auto;
          height: auto;
          &:before {
            .sprite-green-tick-icon;
          }
        }
      }
      &.available:after {
        .sprite-success-tip-right;
      }

      &.unavailable {
        background-color: @error_color;
        span {
          width: auto;
          height: auto;
          &:before {
            .sprite-red-cross-icon;
          }
        }
      }
    }

    input[type="radio"] + label:hover {
    }

    input[type="radio"], input[type="checkbox"] {
      .opacity(0);
      cursor: pointer;
      outline:none;
    }

    input[type="radio"] + label, input[type="checkbox"] + label {
      padding-left: 0.8em;
      font-weight: 100;
      color: #707070;
      cursor: pointer;
    }

    input[type="radio"] + label:before,
    input[type="checkbox"] + label:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      .sprites;
      position: absolute;
      left: -16px;
      top: 3px;
    }

    input[type="checkbox"]:focus + label, input[type="radio"]:focus + label {
      outline: @focus_color auto 5px;
    }

    input[type="radio"] + label:before {
      .sprite-radiobutton;
    }

    input[type="checkbox"] + label:before {
      .sprite-checkbox;
      top: -4px;
    }

    input[type="radio"]:checked + label {
      font-weight: 200;
      color: #111111;
    }

    input[type="radio"]:checked + label:before {
      .sprite-radiobutton-checked;
    }

    input[type="checkbox"]:checked + label:before {
      .sprite-checkbox-checked;
    }

    span.domain {
      color: #777;
      .light-font;
      font-size: 1.5em;
      display: inline-block;
      vertical-align: middle;
      margin-left: 2px;
    }

    div.space_selection {
      margin-top: 1em;
      width: 100%;
      border: 1px solid @light_border_color;
      .border-radius(8px);
      padding: 1.3em 2em;
      box-shadow: 0 0 1px 1px #FFF;
      background-color: white;

      input {
        display: inline-block;
        float: left;
      }

      .radio_info {
        margin-left: 2em;
        color: #4D4D4D;
        margin-bottom: 2em;

        p {
          .light-font;
          font-size: 1em;
        }
        span.price {

        }
        a.modal {
          color: @muted_color;
          font-weight: 200;

          &:hover {
            color: black;
            text-decoration: none;
          }
        }
      }

      div.radio_info-last {
        margin-bottom: 0;
      }
    }
  }

  hr {
    margin: 3em 0 1em 0;
    border: none;
    border-top: 1px solid @light_border_color;
    height: 1px;
  }

}

button {
  cursor: pointer;
}

input {

}

#new_site, #invite_step, .modaldialog {
  button[name="back"], button[name="next"], button[name="finish"], button[name="cancel"] {

    &:before, &:after {
      .transition-duration(500ms);
      .transition-property(opacity);
      content: "";
      display: inline-block;
      vertical-align: text-top;
    }



  }

  button[name="back"] {
    &:before {
      .sprites;
      .sprite-left-arrow;
      margin-right: 8px;
      .opacity(0.5);
    }
    &:after {
      content: "Back";
    }
  }

  button[name="next"], button[name="finish"], button[name="save"] {
    float: right;
    position: relative;

    &:before {
      .opacity(1);
    }

    &:after {
      .sprites;
      .sprite-right-arrow;
      margin-left: 8px;
      margin-top:2px;
    }
  }

  button[name="next"] {
    &:before {
      content: "Next";
    }
  }

  button[name="finish"] {
    &:before {
      content: "Finish";
    }
  }

  button[name="save"] {
    &:before {
      content: "Save";
    }
  }

  button[name="cancel"] {
    &:before {
      content: "Cancel";
    }
  }

  button[name="reset"] {
    &:before {
      content: "Reset to default";
    }
  }

  button.loading {
    background-color: #E2E2E2;
    .box-shadow(none);
    border-color: #E2E2E2;

    &:before {
      content: "";
    }
    &:after {
      background: url("/static/img/spinner16.gif") top left no-repeat;
      width: 16px;
      height: 16px;
      display: inline-block;
      content: '';
    }
  }

  .muted-button, .primary-button, .destructive-button {
    padding: 0.75em 2em;
    border: none;
    font-size:18px;

    color: white;
    text-align:center;

}

  .primary-button {
    background-color: @color_actionable;
    .heavy-font;
    color: #fff;
  }

  .primary-button:hover, .primary-button-hover {

    background-color:@color_actionable_hover
  }

  .primary-button:active, .primary-button-active,
  .muted-button:active, .muted-button-active, .destructive-button:active {
    .transition-duration(0);
    .box-shadow(inset 0 0 7px rgba(0,0,0,0.6));
  }

  .destructive-button {
    background-color: darken(@error_color, 8%);
    border-color: darken(@error_color, 10%);
    color: white;

    &:hover {
      background-color: darken(@error_color, 3%);
    }
  }

  .muted-button {
    background-color: @muted_color;
    border-color: darken(@muted_color, 5%);
    color: darken(@muted_color, 30%);

    &:hover {
      background-color: lighten(@muted_color, 5%);
    }
  }
}


#invite_step {
  #mailing-list-invite_placeholder {
    padding: 8px;
  }

  div.wrapper {
    hr {
      margin: 1.8em 0;
    }

    ol {
      list-style: none;
      counter-reset: li;
      position: relative;
      li {
        margin-bottom: 1em;

        &:before {
          content: counter(li) + ".";
          counter-increment: li;
          font-size: 1.6em;
          .light-font;
          color: #D6D6D6;
          padding-top: 6px;
          display: inline-block;
          float: left;
          min-width: 1.3em;
        }

        input.email-invite {
          // margin-left: 1.5em;
          width: 90%;
        }

      }
    }

    form {
      @clipboard_button_width: 42px;

      margin-top: 1em;

      input.copy-text {
        margin-bottom: 0;
      }

      button.clipboard {
        .border-radius(0);
        float: right;
        width: @clipboard_button_width;
        height: 2.8em;
        padding: 0;
        position: absolute;
        right: (@clipboard_button_width - 10);
        z-index: 1;

        span {
          .sprites;
          .sprite-clipboard-icon;
          display: inline-block;
        }
      }
    }

    div.allow-all {
      background-color: #EEEEEE;
      border: 1px solid #D9D9D9;
      .border-radius(6px);
      padding: 12px 14px;
      position: relative;
      width: 97%;

      label {
        font-size: 1em;
        .medium-font;
      }

      p.google-domain {
        margin-top: 1em;
        .light-font;
        font-size: 0.8em;
        width: auto;
        color: #737373;
        line-height: 2em;

        &:before {
          content: "";
          .sprites;
          .sprite-google-account-badge;
          display: inline-block;
          margin-right: 6px;
          vertical-align: middle;
        }
      }
    }

    span.help-icon {
      .sprites;
      .sprite-help-icon;
      position: absolute;
      right: -2em;
      top: 0;
      .opacity(0.5);
      .transition-duration(250ms);
      .transition-property(opacity);
      cursor: pointer;

      &:hover {
        .opacity(1);
      }
    }

    div.welcome-email-field {
      overflow: hidden;

      hr {
        border-top: 1px solid @light_border_color;
        border-bottom: 1px solid whiteSmoke;
        margin: 0.8em 0;
        height: 1px;
      }

      label {
        .light-font;
        font-size: 0.9em;
        color: #737373;
        padding-bottom: 7px;
        display: block;
      }

      input[type="email"] {
        font-size: 1em;
        padding: 5px;
        width: 78%;
      }

      button.preview {
        font-size: 0.8em;
        padding: 0.6em 1em;
        float: right;
      }
    }
  }
}

#tooltip {
  width: 20em;
}

.modaldialog-2 {
  @table_width: 685px;

  background-color: #EDEDED;
  font-family: nova, Arial, san-serif;
  font-weight: 100;

  p {
    font-size: 1.2em;
    text-align: center;
  }

  &, h1 {
    .border-radius(5px);
  }

  h1 {
    .border-bottom-left-radius(0);
    .border-bottom-right-radius(0);
    background: url('/static/img/egg_shell_texture.png');
    padding: 1.3em;
    font-weight: 100;
    color: #626262;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1em;

    span.modal_close {
      float: right;
      .sprites;
      .sprite-modal_close_icon;
      position: relative;
      top: -0.4em;
      right: -0.4em;
      cursor: pointer;
      .opacity(0.6);
      .transition-duration(100ms);
      z-index: 1;
      &:hover {
        .opacity(1);
      }
    }
  }

  .title_line {
    margin-top: 3em;
    line-height: 0.5;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.8em;
  }
  .title_line span {
    display: inline-block;
    position: relative;
  }
  .title_line span:before,
  .title_line span:after {
    content: "";
    position: absolute;
    height: 1px;
    border-top: 1px solid @light_border_color;
    top: 2px;
    width: 23em;
  }
  .title_line span:before {
    right: 100%;
    margin-right: 15px;
  }
  .title_line span:after {
    left: 100%;
    margin-left: 15px;
  }
  .emphasis {
    font-weight: 300;
  }

  table {
    width: 685px;
    margin: 1em auto;
    background-color: white;
    padding: 7px 0;
    outline: 1px solid #DBDBDB;
    border-collapse: collapse;
    border-spacing: 0 0;

    thead {
      position: relative;
    }

    th {

      text-align: center;
      border: 7px solid white;
      border-bottom: none;
      position: relative;

      h3 {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: black;
        font-weight: 200;
        text-align: center;
        font-size: 1em;
        padding: 1em 0 0.6em 0;
      }

      p.trial {
        color: white;
        font-weight: 100;
        font-size: 0.9em;
        padding: 6px 0 12px 0;
      }

      span.cost {
        color: white;
        text-transform: uppercase;
        font-size: 1.6em;
        font-weight: 100;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3);

      }
      span.free {
        padding-top: 0.5em;
        display: inline-block;
      }

      span.currency {
        font-size: 0.8em;
        display: inline-block;
        vertical-align: top;
        padding-top: 4px;
        padding-right: 1px;
      }

      span.figure {
        font-size: 1.7em;
        font-weight: 200;
      }

      span.metric {
        font-size: 0.6em;
        letter-spacing: 1px;
        padding-left: 4px;
      }

    }

    th:not(:last-child) {
      &:after {
        content: " ";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: -4px;
        bottom: 0;
        border-right: 1px solid @light_border_color;
      }
    }


    tr {
      td {
        padding: 0.9em;
        // border-right: 1px solid @light_border_color;
        text-align: center;
        width: 33%;
        border-right: 1px solid @light_border_color;
        border-bottom: 1px solid @light_border_color;

        span.num_users {
          font-weight: 300;
        }
      }
      td:last-child {
        border-right: none;
      }
    }

    tr:first-child td {
      border-top: none;
    }

    tr:last-child {
      td {
        border-top: 3px double @light_border_color;
        border-bottom: none;
        text-transform: uppercase;
        font-weight: 300;
        font-size: 0.8em;
        padding: 14px 0;

        a {
          .border-radius(16px);

          color: white;
          padding: 6px 11px;
          font-size: 0.8em;
        }
      }
    }
  }

  p.footnote {
    margin-top: 1.2em;
    text-align: center;
    color: #868686;
    font-weight: 100;
  }

}

body > header {
  display:none;
}

#welcome_email_modal {
  p {
    margin-bottom: 14px;
    text-align: left;
  }
  input[type=text], textarea {
    padding: 6px;
    width: 470px;
    display: block;
    font-size: 1em;
  }

  textarea {
    margin-top: 14px;
    min-height: 11em;
    width: 486px;
  }

  div.form_buttons {
    padding: 20px;
    padding-top: 0;
  }
}

.ac_results {
  width: 406px !important;
}

.ac_results li {
  font-size: 18px !important;
  line-height: 24px !important;
}
