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

It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

This stylesheet forms part of the Formtastic Rails Plugin
(c) 2008-2011 Justin French

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

/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just .formtastic
--------------------------------------------------------------------------------------------------*/
.formtastic,
.formtastic ul,
.formtastic ol,
.formtastic li,
.formtastic fieldset,
.formtastic legend,
.formtastic input,
.formtastic button,
.formtastic textarea,
.formtastic select,
.formtastic p {
  margin:0;
  padding:0;
}

.formtastic fieldset {
  border:0;
}

.formtastic em,
.formtastic strong {
  font-style:normal;
  font-weight:normal;
}

.formtastic ol,
.formtastic ul {
  list-style:none;
}

.formtastic abbr,
.formtastic acronym {
  border:0;
  font-variant:normal;
}

.formtastic input,
.formtastic button,
.formtastic textarea {
  font-family:sans-serif;
  font-size:inherit;
  font-weight:inherit;
}

.formtastic input,
.formtastic textarea,
.formtastic select {
  font-size:100%;
}

.formtastic legend {
  white-space:normal;
  color:#000;
}


/* SEMANTIC ERRORS
--------------------------------------------------------------------------------------------------*/
.formtastic .errors {
  color:#cc0000;
  margin:0.5em 0 1.5em 25%;
  list-style:square;
}

.formtastic .errors li {
  padding:0;
  border:none;
  display:list-item;
}


/* BUTTONS & ACTIONS
--------------------------------------------------------------------------------------------------*/
.formtastic .buttons, 
.formtastic .actions {
  overflow:hidden; /* clear containing floats */
  padding-left:25%;
}

.formtastic .button, 
.formtastic .action {
  float:left;
  padding-right:0.5em;
}

.formtastic .button_action button {
  padding:3px 8px;
}

.formtastic .link_action a {
  display:block;
  padding:3px 0;
}


/* INPUTS
--------------------------------------------------------------------------------------------------*/
.formtastic .inputs {
  overflow:hidden; /* clear containing floats */
}

.formtastic .input {
  overflow:hidden; /* clear containing floats */
  padding:0.5em 0; /* padding and negative margin juggling is for Firefox */
  margin-top:-0.5em;
  margin-bottom:1em;
}


/* LEFT ALIGNED LABELS
--------------------------------------------------------------------------------------------------*/
.formtastic .input .label {
  display:block;
  width:25%;
  float:left;
  padding-top:.2em;
}

.formtastic .fragments .label,
.formtastic .choices .label {
  position:absolute;
  width:95%;
  left:0px;
}

.formtastic .fragments .label label,
.formtastic .choices .label label {
  position:absolute;
}

/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
.formtastic .choices {
  position:relative;
}

.formtastic .choices-group {
  float:left;
  width:74%;
  margin:0;
  padding:0 0 0 25%;
}

.formtastic .choice {
  padding:0;
  border:0;
}


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
.formtastic .input .inline-hints {
  color:#666;
  margin:0.5em 0 0 25%;
}


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
.formtastic .inline-errors {
  color:#cc0000;
  margin:0.5em 0 0 25%;
}

.formtastic .errors {
  color:#cc0000;
  margin:0.5em 0 0 25%;
  list-style:square;
}

.formtastic .errors li {
  padding:0;
  border:none;
  display:list-item;
}


/* STRING, NUMERIC, PASSWORD, EMAIL, URL, PHONE, SEARCH (ETC) OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .stringish input {
  width:72%;
}

.formtastic .stringish input[size],
.formtastic .stringish input[max] {
  width:auto;
  max-width:72%;
}


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .text textarea {
  width:72%;
}

.formtastic .text textarea[cols] {
  width:auto;
  max-width:72%;
}


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .hidden {
  display:none;
}


/* BOOLEAN LABELS
--------------------------------------------------------------------------------------------------*/
.formtastic .boolean label {
  margin-left:25%;
  display:block;
}


/* CHOICE GROUPS
--------------------------------------------------------------------------------------------------*/
.formtastic .choices-group {
  margin-bottom:-0.5em;
}

.formtastic .choice {
  margin:0.1em 0 0.5em 0;
}

.formtastic .choice label {
  float:none;
  width:100%;
  line-height:100%;
  padding-top:0;
  margin-bottom:0.6em;
}


/* ADJUSTMENTS FOR INPUTS INSIDE LABELS (boolean input, radio input, check_boxes input)
--------------------------------------------------------------------------------------------------*/
.formtastic .choice label input,
.formtastic .boolean label input {
  margin:0 0.3em 0 0.1em;
  line-height:100%;
}


/* FRAGMENTED INPUTS (DATE/TIME/DATETIME)
--------------------------------------------------------------------------------------------------*/
.formtastic .fragments {
  position:relative;
}

.formtastic .fragments-group {
  float:left;
  width:74%;
  margin:0;
  padding:0 0 0 25%;
}

.formtastic .fragment {
  float:left;
  width:auto;
  margin:0 .3em 0 0;
  padding:0;
  border:0;
}

.formtastic .fragment label {
  display:none;
}

.formtastic .fragment label input {
  display:inline;
  margin:0;
  padding:0;
}

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

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; }

HINT:
The following style may be *conditionally* included for improved support on older versions of IE(<8)
form.formtastic fieldset ol li fieldset legend { margin-left: -6px;}

--------------------------------------------------------------------------------------------------*/
.formtastic, .formtastic ul, .formtastic ol, .formtastic li, .formtastic fieldset, .formtastic legend, .formtastic input, .formtastic button, .formtastic textarea, .formtastic select, .formtastic p {
  margin: 2px;
  padding: 2px;
}

form.formtastic ol, form.formtastic ul {
  padding: 0px;
}

form.formtastic div.errors {
  border: 2px solid red;
  padding: 8px;
  margin: 20px 0px;
  background-color: #f0f0f0;
}

form.formtastic ul.errors {
  list-style: disc outside none;
  margin-left: 32px;
}

form.formtastic fieldset.inputs {
  border: #DDD 1px solid;
  padding: 10px;
}

form.formtastic .input {
  margin: 2px 0px;
  padding: 1px;
}

form.formtastic .input .label {
  display: inline-block;
  margin-right: 16px;
  width: 150px;
  text-align: right;
}

form.formtastic li.text .label {
  vertical-align: top;
}

form.formtastic .input label:after {
  content: ":"
}

form.formtastic .input.boolean label:after {
  content: ""
}

form.formtastic .boolean label {
  padding-left: 0px;
  margin-left: 166px;
  text-align: left;
  display: inline;
}

form.formtastic .inputs .inputs .boolean label {
  padding-left: 0;
  margin-left: 152px;
}

form.formtastic .input p.inline-hints {
  color: #999;
  font-style: italic;
  margin-left: 168px;
  padding: 2px 0px 8px 0px;
}

form.formtastic .input p.inline-errors {
  color: #cc0000;
  margin-left: 168px;
  padding: 0px 0px 12px 0px;
}

form.formtastic .error select, form.formtastic .error input {
  border: 2px solid red;
}

form.formtastic fieldset.actions {
  padding-left: 174px;
  border: none;
}

form.formtastic div.wysiwyg {
  display: inline-block;
}

form.formtastic textarea.wysiwyg {
  margin-left: 166px;
}

.formtastic .stringish input {
  width: auto;
}

form.formtastic fieldset.choices label:after {
  content: ""
}

form.formtastic fieldset.choices {
  border: thin solid #DDD;
  padding: 10px;
  pmargin-left: 170px;
}

.formtastic .choices-group {
  width: auto;
  padding: 10px;
  padding-left: 150px;
  margin: 2px;
  float: none;
}

form.formtastic .choices .label {
  text-align: left;
  position: inherit;
  width: inherit;
  float: none;
}

form.formtastic .choices .label label {
  position: relative;
  width: auto;
}
/*


*/