engine/app/assets/stylesheets/locomotive/formtastic_changes.scss

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "helpers";

form.formtastic {

  fieldset {
    margin-bottom: 20px;

    @include border-bottom-radius(8px);
    @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
    background: #ebedf4;

    legend {
      display: block;
      width: 100%;

      padding: 5px 0px;

      @include border-top-radius(8px);
      @include background-image(linear-gradient(#ebedf4, #d7dbe7));

      span {
        padding-left: 20px;

        font-size: 13px;
        font-weight: bold;
        @include single-text-shadow(#fff, 1px, 1px, 1px);
      }

      em {
        display: inline-block;
        width: 9px;
        height: 6px;
        position: relative;
        top: 0px;
        left: 10px;
        background: transparent image-url("locomotive/form/folded-arrow-on.png") no-repeat 0 0px;
      }
    } // legend

    &.foldable {
      span {
        cursor: pointer;
      }

      &.folded legend span em {
        width: 6px;
        height: 9px;
        top: 0px;
        background-image: image-url("locomotive/form/folded-arrow-off.png");
      }
    } // .foldable

    ol {
      margin-bottom: 0px;
      padding: 0px;

      border-top: 1px solid #ccced7;

      > li.input {
        margin: 0;
        padding: 10px 20px 16px 20px;

        background: transparent image-url("locomotive/form/input-sep.png") repeat-x 0 bottom;

        &:last-child, &.last {
          background: none;
          margin-bottom: 0px;
        }

        label, .label {
          float: left;

          width: 160px;
          padding: 0px 0 0 0px;

          font-size: 13px;
          text-align: left;
          color: #585A69;
          @include single-text-shadow(#fff, 1px, 1px, 1px);
        }

        p.inline-hints {
          margin: 5px 0 0 160px;

          a {
            color: #1f82bc;
          }
          .code {
            background-color: #c8cad0;
            color: #5E5F64;
            @include single-text-shadow(rgba(255, 255, 255, 0.8), 0px, 1px, 1px);
          }
        } // p.inline-hints

        div.inline-errors {
          margin: 2px 0 0 160px;
          padding: 8px 0 0 0;

          background: transparent image-url("locomotive/form/error-arrow.png") no-repeat 17px 0;

          p {
            display: inline-block;
            width: auto;
            margin: 0px;
            padding: 3px 12px 4px 30px;

            background: #cd0f19 image-url("locomotive//form/icons/error.png") no-repeat 10px 6px;

            color: #fff !important;
            @include single-text-shadow(#000, 0px, 1px, 1px);
          }
        } // div.inline-errors

        &.string {
          label {
            padding-top: 2px;
          }

          input[type=text] {
            @include default-input-style;

            width: 700px;
          }

          &.highlighted {
            label {
              padding-top: 7px;
            }

            input[type=text] {
              font-size: 20px;
            }
          }

          &.em-inline-hints {
            p.inline-hints {
              color: #1F82BC !important;
            }
          }
        } // li.string

        &.code {

          textarea {
            @include default-input-style;

            width: 868px;
            height: 400px;
          }

          div.inline-errors, p.inline-hints {
            margin-left: 0px;
          }

          .more {
            text-align: right;
            width: auto;
            margin: 10px 0px 0 0;
            line-height: 0.6em;

            a {
              @include hover-link;
              color: #787A89;

              &.picture {
                padding-left: 23px;
                background: transparent image-url("locomotive/icons/asset_add.png") no-repeat left 1px;
              }
            }
          } // li.code

        }

      } // > li
    } //ol
  } // fieldset
}