engine/app/assets/stylesheets/admin/formtastic_changes.css

/* -------------------------------------------------------------------------------------------------

Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

For example, to make the inline hint paragraphs a little darker in color than the standard #666:

form.formtastic fieldset ol li p.inline-hints { color:#333; }

--------------------------------------------------------------------------------------------------*/

form.formtastic legend {
  margin: 0;
  float: left;
  white-space: normal;
  position: relative;
}

form.formtastic legend span {
  display: block;
  width: 900px;
  height: 26px;
  background: transparent url(/images/admin/form/header.png) no-repeat 0 0px;
  color: #1e1f26;
  font-size: 0.7em;
  padding: 4px 0 0 20px;
  text-shadow: #fff 0px 1px;
}

form.formtastic legend span small {
  position: absolute;
  top: 7px;
  right: 20px;
  color: #787a89;
  font-size: 0.8em;
  font-weight: normal;
}

/* ___ enabling fold/unfold ___ */

form.formtastic fieldset.foldable legend span { cursor: pointer;  }

form.formtastic fieldset.foldable legend span em {
  display: inline-block;
  width: 9px;
  height: 6px;
  position: relative;
  top: 8px;
  left: 10px;
  background: transparent url(/images/admin/form/folded-arrow-on.png) no-repeat 0 0px;
}

form.formtastic fieldset.foldable.folded legend span { background-image: url(/images/admin/form/folded.png); }
form.formtastic fieldset.foldable.folded legend span em {
  width: 6px;
  height: 9px;
  top: 6px;
  background-image: url(/images/admin/form/folded-arrow-off.png);
}

form.formtastic fieldset.foldable ol {
  clear: both;
  width: 100%;
  overflow: hidden;
}

form.formtastic fieldset.foldable.folded ol { display: none; }

/* ___ inputs ___ */

form.formtastic fieldset.inputs { min-height: 30px; width: 100%; margin-bottom: 20px; }

form.formtastic fieldset.inputs ol {
  clear: both;
  margin: 30px 0 0 0;
  padding-top: 15px;
  padding-bottom: 5px;
  background: #ebedf4 url(/images/admin/form/footer.png) no-repeat 0 bottom;
  border-top: 1px solid #ccced7;
}

form.formtastic fieldset ol li { width: 100%; position: relative; margin-bottom: 0.8em; }

form.formtastic fieldset.inputs ol li {
  background: url("/images/admin/form/input-sep.png") repeat-x 0 bottom;
  margin-bottom: 0.7em;
  padding-bottom: 1em;
}

form.formtastic fieldset.inputs ol li.last { background: none; margin-bottom: 0.8em; padding-bottom: 0px; }

form.formtastic fieldset ol li label { text-align: left; padding: 0.4em 2em 0 20px; font-size: 0.8em; width: 15%; color: #585a69; text-shadow: #fff 0px 1px; }

form.formtastic fieldset ol li.string input,
form.formtastic fieldset ol li.password input,
form.formtastic fieldset ol li.numeric input,
form.formtastic fieldset ol li.text textarea,
form.formtastic fieldset ol li code textarea,
form.formtastic fieldset ol li input[type=password] {
  padding: 4px 5px;
  font-size: 0.9em;
  font-weight: bold;
  width: 700px;
  color: #17171b;
  background: white url(/images/admin/form/field.png) repeat-x 0 0;
  border: 1px solid #d1d6e6;
  -webkit-box-shadow: #f1f1f1 0px 1px;
  -moz-box-shadow: #f1f1f1 0px 1px;
  box-shadow: #f1f1f1 0px 1px;
}

form.formtastic fieldset ol li.string.highlighted input {
  font-size: 1.1em;
  width: 696px;
  padding: 6px 7px;
}

form.formtastic fieldset ol li.text textarea.html {
  height: 300px;
  width: 46%;
}

form.formtastic fieldset ol li.date input {
  width: 80px;
}

form.formtastic fieldset ol li p.inline-hints {  margin-left: 20%; }
form.formtastic fieldset ol li p.inline-hints a { color: #1f82bc; }
form.formtastic fieldset ol li p.inline-hints .code { background-color: #c8cad0; color: #5E5F64; text-shadow: rgba(255, 255, 255, 0.8) 0px 1px; }

form.formtastic fieldset ol li code { display: block; border: 1px solid #d1d6e6; margin: 10px 20px 0 20px; }
form.formtastic fieldset ol li code.nude textarea {
  width: 870px;
  border: 0px;
}

form.formtastic fieldset ol li select { font-size: 0.9em; position: relative; top: 2px; color: #787a89; }

form.formtastic fieldset ol li.multiple select { width: 45%; }

form.formtastic fieldset ol li div.inline-errors {
  background: transparent url(/images/admin/form/error-arrow.png) no-repeat 17px 0;
  margin: 2px 0 0 20%;
  padding: 8px 0 0 0;
}

form.formtastic fieldset ol li div.inline-errors p {
  display: inline-block;
  width: auto;
  margin: 0px;
  padding: 3px 12px 4px 30px;
  color: #fff !important;
  text-shadow: #000 0px 1px;
  font-size: 0.9em;
  padding-left: 30px;
  background: #cd0f19 url(/images/admin/form/icons/error.png) no-repeat 10px 6px;
}

form.formtastic fieldset ol li.code label { display: none; }

form.formtastic fieldset ol li.code div.inline-errors {
  margin-left: 20px;
}

form.formtastic fieldset ol li.small-code code { margin: 0px; display: inline-block; width: 75%; }

form.formtastic fieldset ol .more { text-align: right; width: auto; margin: 10px 20px 0 0; line-height: 0.6em; }
form.formtastic fieldset ol .more a { text-decoration: none; color: #787A89; font-size: 0.7em; }
form.formtastic fieldset ol .more a:hover { text-decoration: underline; }

form.formtastic fieldset ol .more a.picture {
  padding-left: 23px;
  background: transparent url(/images/admin/icons/asset_add.png) no-repeat left 1px;
}

form.formtastic fieldset li.full .inline-errors, form.formtastic fieldset li.full .inline-hints {
  margin-left: 20px;
}

/* ___ pages ___ */

form.formtastic fieldset ol li.path em {
  font-size: 0.8em;
}

form.formtastic fieldset ol li.path input {
  background: transparent;
  padding: 4px 4px 2px 4px;
  border: none;
  color: #787a89;
  border-bottom: 1px solid #b5b7c4;
  width: 30%;
}

form.formtastic fieldset ol li.path.error input {
  border: none !important;
  border-bottom: 2px solid #ff092c !important;
}

/* ___ sites ___ */

form.formtastic fieldset ol li.item {
  position: relative;
  background: transparent url(/images/admin/form/item.png) no-repeat 0 0;
  height: 25px;
  width: 861px;
  margin: 0px 0px 10px 20px;
  padding: 3px 10px;
}

form.formtastic fieldset ol li.item strong {
  font-size: 0.9em;
  font-weight: bold;
  color: #17171d;
}

form.formtastic fieldset ol li.item strong a {
  color: #17171d;
  text-decoration: none;
}

form.formtastic fieldset ol li.item strong a:hover { text-decoration: underline; }

form.formtastic fieldset ol li.item em {
  margin-left: 10px;
  font-size: 0.7em;
  color: #757575;
}

form.formtastic fieldset ol li em.editable {
  display: inline-block;
  position: relative;
  top: -1px;
  color: #8b8d9a;
  font-size: 0.9em;
  font-style: italic;
  margin-left: 3px;
  border: 1px solid transparent;
  padding: 2px 5px;
  height: 18px;
  line-height: 16px;
}

form.formtastic fieldset ol li em.editable:hover {
  background: #fffbe5;
  border: 1px dotted #efe4a5;
  cursor: pointer;
  color: #17171D;
  font-weight: bold;
}

form.formtastic fieldset ol li.item span.actions {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 50px;
  height: 16px;
  text-align:right;
}

/* ___ editable-list (content type fields and validations) ___ */

form.formtastic fieldset.editable-list ol { padding-left: 20px; padding-right: 20px; width: 880px; }

form.formtastic fieldset.editable-list ol li { margin-left: 0px !important; }

form.formtastic fieldset.editable-list ol li span.handle {
  cursor: move;
  position: relative;
  top: 1px;
}

form.formtastic fieldset.editable-list ol li.added span.actions a.remove {
  display: inline;
}

form.formtastic fieldset.editable-list ol li.added span.actions button {
  display: none;
}

form.formtastic fieldset.editable-list ol li.added select {
  display: none;
  position: relative;
  top: -1px;
}

form.formtastic fieldset.editable-list ol li.added select,
form.formtastic fieldset.editable-list ol li.added em {
  width: 150px;
}

form.formtastic fieldset.editable-list ol li.added input {
  position: relative;
  top: -1px;
  background: transparent;
  border: 1px solid transparent;
  padding: 1px 5px 2px 5px;
  color: #17171D;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
}

form.formtastic fieldset.editable-list ol li.added input.domain {
  width: 250px;
}

form.formtastic fieldset.editable-list ol li.added input:hover {
  background: #fffbe5;
  border: 1px dotted #efe4a5;
  cursor: pointer;
}

form.formtastic fieldset.editable-list ol li.added input:focus {
  font-size: 0.9em;
  font-weight: normal;
  color: #787a89;
  background: white url(/images/admin/form/field.png) repeat-x 0 0;
  border: 1px solid #d1d6e6;
}

form.formtastic fieldset.editable-list ol li.added .inline-errors {
  position: relative;
  top: -1px;
  padding: 2px 3px;
  background: #FFE5E5;
  color: #CE2525;
  font-size: 0.8em;
}

form.formtastic fieldset.editable-list ol li.template {
  height: 42px;
  background-image: url(/images/admin/form/big_item.png);
  padding-top: 10px;
}

form.formtastic fieldset.editable-list ol li.template em {
  display: none;
}

form.formtastic fieldset.editable-list ol li.template input[type=text] {
  display: inline;
  margin-left: 10px;
  padding: 4px;
  font-size: 0.9em;
  width: 180px;
  color: #787a89;
  background: white url(/images/admin/form/field.png) repeat-x 0 0;
  border: 1px solid #a6a8b8;
  position: relative;
  top: 1px;
}

form.formtastic fieldset.editable-list ol li.template select {
  display: inline;
  top: -1px;
}

form.formtastic fieldset.editable-list ol li.template span.handle {
  display: none;
}

form.formtastic fieldset.editable-list ol li.template span.actions {
  width: auto;
  top: 10px;
}

form.formtastic fieldset.editable-list ol li.template span.actions a.edit {
  display: none;
}

form.formtastic fieldset.editable-list ol li.template span.actions a.remove {
  display: none;
}

form.formtastic fieldset.editable-list ol li.template span.actions button {
  display: inline;
}

form.formtastic fieldset.editable-list ol li.template span.actions button span {
  font-size: 0.8em;
}

/* ___ custom fields: inherits from editable-list ___ */

form.formtastic fieldset.fields input[type=checkbox] {
  margin: 0 0 0 20px;
  width: 20px;
}

form.formtastic fieldset.fields label {
  display: inline;
  float: none;
  padding: 0px;
  font-weight: normal;
  color: #8B8D9A;
}

form.formtastic fieldset.fields li.required label {
  font-weight: bold;
}

/* ___ editable-list (content type validations) ___ */

form.formtastic fieldset.validations ol li.added em.key {
  display: inline-block;
  position: relative;
  top: -1px;
  padding: 1px 5px 2px 5px;
  color: #17171D;
  font-size: 0.9em;
  font-weight: bold;
  font-style: normal;
  margin-left: 5px;
  width: 180px;
}

/* ___ content instance / editable elements___ */

form.formtastic fieldset ol li.file p.remove {
  margin: 5px 0 0 20%;
}

form.formtastic fieldset ol li.file p.remove a {
  text-decoration: none;
  color: #333;
}

form.formtastic fieldset ol li.file p.remove a:hover { text-decoration: underline; }

form.formtastic fieldset ol li.has-many p {
  font-style: italic;
  margin-bottom: 5px;
}

form.formtastic fieldset ol li.has-many ul {
  width: 736px;
  margin-left: 20%;
}

form.formtastic fieldset ol li.has-many ul li.item {
  background: transparent url(/images/admin/form/item-popup.png) no-repeat 0 0;
  width: 413px;
  margin: 0 0 10px 0;
}

form.formtastic fieldset ol li.has-many ul li.item strong {
  font-size: 0.9em;
  font-weight: bold;
  color: #17171d;
  position: relative;
  top: -1px;
  left: 10px;
}

form.formtastic fieldset ol li.has-many ul li.item span.handle {
  cursor: move;
  position: relative;
  top: 1px;
}

form.formtastic fieldset ol li.has-many ul li.added span.actions a.remove {
  display: inline;
}

form.formtastic fieldset ol li.has-many ul li.added span.actions button {
  display: none;
}

form.formtastic fieldset ol li.has-many ul li.sep {
  border-top: 1px solid #ccc;
  height: 2px;
  padding: 0px;
  margin: 5px 0 7px;
  width: 433px;
  background: none;
}

form.formtastic fieldset ol li.has-many ul li.template {}

form.formtastic fieldset ol li.has-many ul li.template select {
  display: inline;
  top: -1px;
}

form.formtastic fieldset ol li.has-many ul li.template span.handle {
  display: none;
}

form.formtastic fieldset ol li.has-many ul li.template span.actions {
  width: auto;
  top: 0px;
}

form.formtastic fieldset ol li.has-many ul li.template span.actions a.edit,
form.formtastic fieldset ol li.has-many ul li.template span.actions a.remove {
  display: none;
}

form.formtastic fieldset ol li.has-many ul li.template span.actions button {
  display: inline;
  position: relative;
  top: 1px;
  right: 3px;
}

form.formtastic fieldset ol li.has-many ul li.template span.actions button span {
  font-size: 0.8em;
}

/* ___ my account ___ */

form.formtastic fieldset.language li.full span {
  display: inline-block;
  width: 180px;
  margin: 0 15px;
  font-size: 1em;
  font-weight: bold;
}

form.formtastic fieldset.language li.full span label {
  float: none;
  display: inline;
  width: auto;
  margin: 0px;
  padding: 0px;
}

form.formtastic fieldset.language li.full span img {
  position: relative;
  top: 6px;
}

form.formtastic fieldset.language li.full span input {
  margin-right: 2px;
}

/* ___ membership ___ */

form.formtastic fieldset.email li.full input {
  margin-left: 20px;
}

form.formtastic fieldset.memberships ol li .role {
  position: absolute;
  top: 2px;
  right: 30px;
  width: 170px;
  text-align: left;
}

form.formtastic fieldset.memberships ol li .role em {
  display: inline-block;
  position: relative;
  top: -1px;
  color: #757575;
  font-size: 0.8em;
  padding: 2px 5px 2px 17px;
  height: 18px;
  line-height: 16px;
  margin-left: 0px;
}

form.formtastic fieldset.memberships ol li .role em.locked {
  background: transparent url(/images/admin/icons/membership_lock.png) no-repeat 1px 3px;
}

form.formtastic fieldset.memberships ol li .role em.editable {
  background: transparent url(/images/admin/icons/membership_edit.png) no-repeat left 3px;
}

form.formtastic fieldset.memberships ol li .role em.editable { font-style: normal; font-size: 0.8em; }
form.formtastic fieldset.memberships ol li .role em.editable:hover { color: #000; font-style: normal; background: #fffbe5; padding-left: 5px; }

form.formtastic fieldset.memberships ol li select {
  position: relative;
  top: -1px;
}

/* ___ theme assets ___ */

.selector {
  position: relative;
}

.selector span.alt {
  position: absolute;
  top: 7px;
  right: 20px;
  color: #787a89;
  font-size: 0.7em;
  text-decoration: none;
  cursor: pointer;
  padding-left: 20px;
  background: transparent url(/images/admin/icons/asset_switch.png) no-repeat left 2px;
}

.selector span.alt:hover { text-decoration: underline; }


form.formtastic fieldset.file li.full input {
  margin-left: 20px;
}

form.formtastic fieldset.file li.full p.inline-errors { display: block !important; }


form.formtastic fieldset.preview { position: relative; }

form.formtastic fieldset.preview li { text-align: center; position: static; }

form.formtastic fieldset.preview li .image {
  width: 870px;
  margin: 10px 20px 0px 20px;
  border: 4px solid white;
  background: transparent url(/images/admin/list/empty.png) repeat 0 0;
  overflow: hidden;
}

form.formtastic fieldset.preview li .inside {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

form.formtastic fieldset.preview li img { }


/* ___ main error message ___ */

div.form-errors p {
  background: #FFE5E5;
  color: #CE2525;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  margin: 0px;
  text-align: center;
}

div.formError {
  position: relative;
  top: -2px;
  display: inline;
  background: #CE2525 url(/images/admin/left_arrow_red.png) no-repeat 0px center;
  color: white;
  font-size: 12px;
  font-weight: normal;
  padding: 3px 10px 3px 20px;
  margin-left: 10px;
}

div.fieldWithErrors { display: inline; }