app/soc/content/less/gci/elements/forms.less

@formBlockBackground: #b6dcf7;
@formLabelColor: #0f649d;

// Color to surround a UI element that has focus
@color_focus: #5b9dd9;

#form {
  .clearfix;
}

.block-form {
  background: @color_grey url(@image_block_form_bg) 0 0 repeat-x;
  border: 1px solid #b4b4b4;
  padding: 13px 20px;
}

.block-form-title {
  margin-bottom: 15px;

  .title {
    color: #c53926;
    font-family: 'Oswald', sans-serif;
    font-size: 38px;
    line-height: 40px;
    text-transform: uppercase;
  }

  .req {
    color: #d5620e;
    font-size: 10px;
    font-style: italic;
    font-weight: bold;
    line-height: 13px;
    padding-left: 15px;
    vertical-align: top;
  }
}

form {
  fieldset {
    margin-bottom: 15px;
    position: relative;
    padding: 0;
    border: 0;

    legend {
      display: block;
      float: left;
      height: 36px;
      position: relative;
      width: 100%;

      span {
        color: @formLabelColor;
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        font-size: 25px;
        font-weight: bold;
        left: 2px;
        line-height: 32px;
        position: absolute;
        top: 0;
      }
    }
  }
}

.form-row {
  /*Default form row styles*/
  color: #666;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: 13px;
  line-height: 15px;
  margin-bottom: 15px;
  width: 100%;

  &:last-child {
    margin-bottom: 0;
  }

  .add-field-link {
    clear: both;
    display: block;
    padding: 4px 0 0 4px;

    a {
      color: #238bd2;
    }
  }

  label {
    &.form-label {
      /*Default form label*/
      color: @formLabelColor;
      display: block;
      font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
      font-size: 18px;
      line-height: 22px;
      padding: 0 0 0 2px;

      em {
        /*Required asterisk*/
        color: #d5620e;
        font-family: Arial, "Helvetica Neue", "Liberation Sans", FreeSans, sans-serif;
        font-size: 12px;
        font-style: italic;
        font-weight: bold;
        vertical-align: top;
      }
    }
  }

  .note {
    /*Default form note*/
    color: #d5620e;
    display: block;
    font-size: 12px;
    padding-left: 2px;
    line-height: normal;
  }

  .text-input {
    background: #f6f6f6;
    border: 1px solid #d2d2d2;
    .lh-box-shadow(2px 2px 5px rgba(0, 0, 0, .09) inset);
    font-size: 13px;
  }

  input[type=text] {
    .text-input;
    height: 28px;
    line-height: 28px;
    padding: 0;
    text-indent: 5px;
    width: 100%;
  }

  input[type=text]:focus,
  textarea:focus {
    border-color: @color_focus;
    box-shadow: 0 0 5px @color_focus;
    outline: none !important;
  }

  textarea {
    .text-input;
    .lh-box-sizing(border-box);
    line-height: 20px;
    padding: 8px;
    width: 100%;
  }

  .selector.focus {
    box-shadow: 0 0 5px @color_focus;
    outline: solid 1px @color_focus;
  }

}


.form-checkbox {
  .form-checkbox-item .checker {
    margin-right: 0;
  }

  margin: 2px;
}

.form-radio .form-radio-item label {
  vertical-align: middle;
}

.form-checkbox .form-checkbox-item,
.form-radio .form-radio-item {
  display: block;
  margin: 5px 0;
}

.form-checkbox label,
.form-radio label {
  cursor: pointer;
}

.form-row.error {
  /*Row with error*/

  .form-row-error-msg {
    color: #ff0000;
    font-family: Arial, "Helvetica Neue", "Liberation Sans", FreeSans, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding-left: 10px;
  }

  input[type=text] {
    background: #fce6e6;
    border: 1px solid #ff0000;
    .lh-box-shadow(2px 2px 5px rgba(255, 0, 0, .16) inset);
  }

  .text-core .text-wrap .text-tags .text-tag .text-button {
    background: #c8c8c8;
  }
}

.form-row-buttons {
  clear: both;
  margin-top: 10px;

  input.button {
    background-position: 90% 50%;

    &:first-child {
      margin-right: 20px;
    }
  }
}

div.tos {
  border: 2px solid #D2D2D2;
  height: 250px;
  margin-bottom: 10px;
  overflow: auto;
  padding: 10px;
  clear: both;
}

.inline-input-row {
  > * {
    display: inline-block;
  }
}

/* @group Task creation */
.form-row-task-completion-time,
.form-row-task-difficulty,
.form-row-task-assigned-mentor {
    float: left;
}

.form-row-task-completion-time {
  margin-right: 20px;
  width: 220px;

  .form-row-task-completion-time-inner {
    background: @formBlockBackground url(@image_block_stopwatch_sm) 5px 5px no-repeat;
    font-size: 18px;
    padding: 10px 0 10px 50px;
  }

  input[type=text] {
      width: 30px;
  }
}

.form-row-task-difficulty {
  margin-right: 20px;
  width: 165px;
}

.form-row-task-difficulty-inner {
  background: @formBlockBackground url(@image_cog_grey_sm) 5px 5px no-repeat;
  padding: 10px 0 10px 50px;
}

.form-row-task-assigned-mentor {
    width: 215px;
}

.form-row-task-assigned-mentor-inner {
  background: @formBlockBackground;
  padding: 10px;
  width: 215px;
}
/* @end */

/* @group Conversation creation */

.form-row-conversation-recipients {
  background: @formBlockBackground;
  padding: 5px;

  .form-label {
    font-size: 14px !important;
  }

  hr {
    background: lighten(@formBlockBackground, 10%);
    border: none;
    margin: 5px auto;
  }
}

.form-row-message_content {
  &.error {
    .mceLayout {
      border: solid 1px #ff0000;
    }
  }

  .form-row-error-msg {
    margin-left: 0;

    .errorlist {
      margin-bottom: 2px;
      padding-left: 0;

      li {
        list-style: none;
        margin-left: 0;
      }
    }
  }
}

/* @end */

/* @group TextExt */

.text-core {
  position: relative;

  .text-wrap {
    .form-row.text-input;

    .text-dropdown {
      background: #ffffff;
      border: 1px solid #9daccc;
      .lh-box-sizing(border-box);
      display: none;
      max-height: 100px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 1px;
      position: absolute;
      width: 100%;
      z-index: 3;

      .text-list {
        .text-suggestion {
          cursor: pointer;
          padding: 3px 5px;

          em {
            font-style: normal;
            text-decoration: underline;
          }

          &.text-selected {
            background: #6d84b4;
            color: #ffffff;
          }
        }
      }

      &.text-position-above {
        margin-bottom: 1px;
      }

      &.text-position-below {
        margin-top: 1px;
      }
    }

    .text-tags {
      .lh-box-sizing(border-box);
      cursor: text;
      height: 100%;
      padding: 3px 35px 3px 3px;
      position: absolute;
      width: 100%;

      .text-tag {
        float: left;

        .text-button {
          background: #d8d8d8;
          .lh-border-radius(2px);
          .lh-box-sizing(border-box);
          color: #000000;
          cursor: pointer;
          float: left;
          font-family: Arial, "Helvetica Neue", "Liberation Sans", FreeSans, sans-serif;
          height: 20px;
          margin: 1px 3px 2px 1px;
          padding: 2px 20px 0px 3px;
          position: relative;

          a.text-remove {
            background: #bababa;
            .lh-border-radius(100%);
            .lh-box-shadow(0 0 2px #a0a0a0 inner);
            bottom: 5px;
            color: #5a5a5a;
            display: block;
            height: 11px;
            position: absolute;
            right: 4px;
            width: 11px;

            &:before {
              bottom: 4px;
              content: 'x';
              font: 9px verdana, sans-serif;
              left: 3px;
              position: relative;
            }

            &:hover {
              background: #a8a8a8;
            }
          }
        }
      }

      &.text-tags-on-top {
        z-index: 2;
      }
    }

    textarea, input {
      background: none;
      border: none;
      .lh-border-radius(0);
      .lh-box-shadow(none);
      .lh-box-sizing(border-box);
      height: auto;
      line-height: 21px !important;
      margin: 0;
      margin-left: -1px;
      overflow: hidden;
      padding: 3px 5px 3px 5px;
      position: absolute;
      width: 100%;
      resize: none;
      white-space: nowrap;
      z-index: 0;
    }
  }
}

.form-below-header {
  color: #666;
  margin-bottom: 10px;
  padding-left: 2px;
}

/* @end */