travis-web/assets/styles/forms.scss

@import "compass";

.pro {
  form.subscription-form {
    display: inline-block;
    width: 900px;

    h2 {
      margin-bottom: 13px;
    }
    h3 {
      margin: 24px 0 0 0;
    }
    p {
      line-height: 160%;
      font-size: 16px;
      color: #666;
    }
    ul {
      list-style-type: disc;
      margin-left: 20px;

      li {
        margin: 0;
      }
    }
    ul.footnotes {
      margin: 36px 60px 0 85px;
      list-style-type: none;
    }
    sup.required {
      color: #c00;
      font-size: 15px;
    }
    .message {
      float: left;
      display: none;
      padding-left: 24px;
      background: url(/images/spinner.gif) no-repeat left center;
      color: #999;
    }
    .note {
      font-size: 12px;
      color: #666;
      width: 840px;
    }

    & > div {
      display: inline-block;
      height: 1%;
    }

    fieldset + p {
      clear: both;
    }

    fieldset {
      padding: 0;
      border: 0;
      margin: 12px 36px 0 0;

      &:nth-child(odd) {
        margin-right: 0;
      }
      &.wide {
        margin: 0;
      }

      legend {
        padding-bottom: 10px;
        color: #666;
        font-size: 16px;
        font-weight: bold;
      }

      .input {
        position: relative;
        height: 20px;
        margin-bottom: 11px;
      }

      label {
        float: left;
        clear: both;
        width: 100px;
        margin-right: 14px;
        padding-top: 5px;
        line-height: 20px;
        text-align: right;
        font-size: 14px;
        text-shadow: 2px 2px 0px #fff;
        color: #666;

        &.required:after {
          content: '*';
          top: 17px;
          right: -10px;
          padding-left: 3px;
          color: #c00;
        }
      }
      input, textarea, select {
        float: left;
        font-family: "Helvetica Neue", Helvetica, Arial;
      }
      input, textarea {
        border: 1px solid #ddd;
        font-size: 13px;
        @include border-radius(1px);
      }
      input {
        margin-top: 4px;
        height: 20px;
        width: 270px;
        padding-left: 5px;
      }
      textarea {
        margin-top: 8px;
        height: 20px;
        width: 270px;
      }
      &.wide textarea {
        width: 740px;
      }
      select {
        font-size: 14px;
        margin-top: 5px;
        height: 20px;
      }
      .boolean {
        input {
          margin: 8px 8px 0 86px;
          width: auto;
          clear: left;
        }
        label {
          clear: none;
          width: auto;
          margin-top: 8px;
          line-height: 16px;
          text-align: left;
          font-size: 12px;
        }
      }
      .country select {
        width: 275px;
      }
      .hint {
        display: none;
      }
      p {
        float: left;
        width: 740px;
        margin: 0 0 2px 0;
        line-height: 41px;
        font-size: 13px;
        color: #666;
      }
    }

    #comment fieldset {
      margin-top: 12px;
    }

    .actions {
      display: block;
      clear: both;
      height: 40px;
      line-height: 60px;

      input, a {
        display: block;
        float: left;
        width: 184px;
        height: 40px;
        margin: 10px 20px 0 0px;
        margin-left: 115px;
        border: 0;
        text-align: center;
        line-height: 37px;
        font-size: 20px;
        text-decoration: none;
        color: white;
        text-shadow: 2px 2px 0 #666;
        cursor: hand;
        @include border-radius(6px);
        background-color: #19A509;
        @include background-image(linear-gradient(#3f9c33 0%, #348629 100%));
        &:hover {
          @include background-image(linear-gradient(#1CBE0A 0%, #158F07 100%));
        }
        &[disabled] {
          @include background-image(linear-gradient(#ddd 0%, #ccc 100%));
          color: #f6f6f6;
          text-shadow: 2px 2px 0 #aaa;
        }
      }
    }
    .error, div.error > input {
      border-color: #c00;
    }
    .tipsy {
      margin-left: 20px;
    }
  }
}