@import "client/common.scss";

#checkoutSignInScreen {

  .content-holder {

    margin-top:40px;
    color:$ColorTextTypical;

    &.signed-in {
      .left-side, .right-side {
        display:none;
      }
    }
    &.not-signed-in {
      .already-signed-in {
        display:none;
      }
    }
  }
  .already-signed-in {
    text-align:center;
  }

  a.forgot-password {
    position:absolute;
    top:0;
    left:0;
    font-size:10px;
  }

  .signin-submit {
    margin-right:2px;
  }


  .signup-later-prompt {
    margin:30px 0 30px 0;
    text-align:center;
  }

  .signin-prompt {
    float:right;
    text-align:left;
    margin:30px 0 15px 0;
    width:60%;
    max-width:300px;
    @include border_box_sizing;

    span {
      text-align:left;
    }
  }

  p {
    font-size:14px;
    line-height:125%;
  }

  label {
    display:inline-block;
    width:80px;
    text-align:left;
  }

  .login-error {

    div.actions {
      margin-top:10px;
    }

    .field {
      background-color: #330000;
      border: 1px solid #990000;
      padding:8px;

    }
  }

  .field {
    display:inline;
    @include border_box_sizing;
  }

  .login-error-msg {
    display:none;
    margin-top:10px;
    text-align:center;
    color:#F00;
    font-size:11px;
    width:60%;
    max-width:300px;
    @include border_box_sizing;
    float:right;
    margin-bottom:10px;
  }


  .login-error .login-error-msg {
    display:block;
  }

  h3
  {
    color:$ColorTextHighlight;
    text-align:center;
  }

  input {
    width:60%;
    max-width:300px;
    @include border_box_sizing;
  }

  input[name="email"] {
    margin-bottom:13px;
  }

  .btnNext {
    margin:0 auto;
  }

  .left-side {
    float:left;
    width:50%;
    @include border_box_sizing;
    border-width:0 1px 0 0;
    border-color:white;
    border-style:solid;
    text-align:right;
    padding: 0 50px;
    margin-bottom:20px;

    .actions {
      width:60%;
      max-width:300px;
      @include border_box_sizing;
      position:relative;
      float:right;
    }
  }

  .left-side-content {
    @include border_box_sizing;
    width:100%;
  }

  .right-side {
    float:left;
    width:50%;
    @include border_box_sizing;
    padding: 0 50px;

    .actions {
      width:100%;
      text-align:center;
    }
  }

  .facebook-prompt {
    margin:40px 0 10px 0;
    float:right;
    text-align:left;
    width:249px;
    @include border_box_sizing;
  }
}