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

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 {
  width: 640px;
  margin: 0 0 1em;
  padding: 1em 0 0;
  }

form.formtastic .inputs li {
  width: 640px;
  clear: both;
  }
form.formtastic fieldset ol li.hidden {display:none; border: none; margin: 0;}
form.formtastic .inputs li:last-child {border: none;}

/* Label */

form.formtastic .inputs label {
  width: 120px;
  margin: 4px 0 0;
  padding: 0 16px 0 0;
  color: #000;
  line-height: 120%;
  text-align: right;
  }
form.formtastic fieldset ol li.boolean label {
  padding-left: 140px;
  width: auto;
  color: #454545;
  }
form.formtastic fieldset ol li.boolean label input {
  margin: 0 7px 0 0;
  width: auto;
  display: inline;
  float: left;
  }

/* Legend */

form.formtastic legend {color: #03690d; padding: 0 0 1em;}
form.formtastic #secondary legend {
  float: left;
  font-weight: normal;
  margin: 0;
  font-size: 16px;
  padding: 0 0 1em;
  }

/* Fieldset */

form.formtastic fieldset {margin: 0 0 1.5em;}
form.formtastic fieldset.add-to-nested-fields {
  padding-left: 140px;
  margin: -20px 0 40px;
  }

/* Text inputs and textarea */

form.formtastic fieldset ol li.string input,
form.formtastic fieldset ol li.numeric input {
  width: 300px;
  }
form.formtastic .inputs input,
form.formtastic fieldset ol li.text textarea {
  width: 300px;
  margin: 0 15px 0 0;
  padding: 3px;
  font-size: 13px;
  }
form.formtastic fieldset ol li.text textarea {height: 160px;}
form.formtastic fieldset ol li.text textarea.address { height:auto }

/* Select */

form.formtastic .inputs select {width: auto; min-width: 200px; margin: 0 15px 0 0;}
form.formtastic .inputs select option {padding-right: 10px;}

/* Buttons */

form.formtastic fieldset.buttons {padding-left: 140px; margin-top: -15px;}

/* Checkboxes */

form.formtastic fieldset ol li.check_boxes {margin-top: 10px;}
form.formtastic fieldset ol li.check_boxes legend {
  color: #454545;
  width: 120px;
  font-size: 12px;
  font-weight: bold;
  padding: 0 16px 0 0;
  }
form.formtastic fieldset ol li.check_boxes fieldset ol {
  clear: both;
  float: left;
  margin: 0;
  padding: 0 0 0 123px;
  }
form.formtastic fieldset ol li.check_boxes fieldset ol li {
  clear: none !important;
  float: left;
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  display: inline;
  }
form.formtastic fieldset ol li.check_boxes fieldset ol li label {
  padding: 0;
  width: auto;
  margin: 0;
  font-weight: normal;
  }
form.formtastic fieldset ol li.check_boxes fieldset ol li label input {
  margin: 0 5px 0 17px;
  width: auto;
  }
form.formtastic fieldset ol li.check_boxes fieldset ol li {
  width: 200px;
  float: left;
  padding-bottom: 10px;
  }

/* Radio buttons */

form.formtastic fieldset ol li.radio fieldset legend {
  font: inherit;
  margin-bottom: -1em;
  padding: 0;
  }
form.formtastic fieldset ol li.radio fieldset legend span {
  width: 200px;
  color: #000;
  font-weight: bold;
  text-align: right;
  }
form.formtastic fieldset ol li.radio ol {
  padding-left: 220px;
  }
form.formtastic fieldset ol li.radio ol li {border: none;}
form.formtastic fieldset ol li.radio ol li label {display: inline; color: #454545;}
form.formtastic fieldset ol li.radio ol li label input {width: auto;}

/* Hints */

form.formtastic .inputs .inline-hints {
  float: right;
  width: 175px;
  margin: -2px 0 0 0;
  color: #888;
  line-height: 130%;
  text-align: left;
  font-size: 11px;
  }

/* Errors */

form.formtastic fieldset ol li ul.errors {
  float: left;
  margin: 8px 0 10px 140px;
  list-style: square inside;
  }
form.formtastic fieldset ol li ul.errors li {margin: 0;}

/* Misc */

form.formtastic fieldset ol li.accessory fieldset ol li {
  float: left;
  clear: none;
  }

form.formtastic .collapsible legend {cursor: pointer;}
form.formtastic .collapsible legend span {
  padding-right: 24px;
  background: url(/images/icon-toggle.gif) center right no-repeat;
  }
form.formtastic .collapsible-open legend span {
  padding-right: 24px;
  background: url(/images/icon-toggle-collapse.gif) center right no-repeat !important;
  }

/* Different styling for inputs with Markdown */

#product_assembly_instructions_input .inline-hints,
#page_body_input .inline-hints {
  width: 500px;
  margin: 3px 0 0;
  }

#product_assembly_instructions, #page_body {
  margin-top: 15px;
  width: 640px;
  font-family: Monaco, Consolas, "Courier New", Courier, mono;
  font-size: 12px;
  }

form.formtastic fieldset ol li.radio fieldset ol.choose-accessories li {
  float: left;
  width: auto;
  margin: 0;
  }
form.formtastic fieldset ol li.radio fieldset ol.choose-accessories li label {
  font-weight: normal;
  }
form.formtastic fieldset ol li.accessory {
  margin: 0;
  }

form.formtastic fieldset ol li.required abbr {margin-left: 2px; color: #db2d00;}

/* Overrides for the Create Package page */

form.formtastic .inputs #package_use_hose_connector_input {margin-top: -10px;}
form.formtastic .inputs #package_drill_top_id_input {margin-top: 37px;}
form.formtastic .inputs #package_motor_casing_id_input label,
form.formtastic .inputs #package_hose_connector_id_input label,
form.formtastic .inputs #package_adapter_id_input label,
form.formtastic .inputs #package_use_motor_casing_input label,
form.formtastic .inputs #package_use_hose_connector_input label,
form.formtastic .inputs #package_drill_top_id_input label,
form.formtastic .inputs #package_tank_id_input label {
  font-weight: normal;
  }
form.formtastic .inputs #package_message {height: 80px;}

#pump-package-articles {
  margin: 0 0 40px 0;
  width: 610px;
  padding: 0 0 1px;
  font-size: 12px;
  }
#pump-package-articles caption {margin: 20px 0 0;}
#pump-package-articles thead th {
  border-bottom: 1px solid #ccc;
  color: #555;
  padding: 35px 4px 4px;
  }
#pump-package-articles thead .article {width: 240px;}
#pump-package-articles thead .image {width: 32px;}
#pump-package-articles img {display: block;}
#pump-package-articles .price {
  text-align: right;
  color: inherit;
  }
#pump-package-articles tbody td {
  border-bottom: 1px solid #ccc;
  padding: 4px;
  font-weight: normal;
  height: 32px;
  }
#pump-package-articles tfoot td {
  padding: 4px;
  border-top: 2px solid #ccc;
  }

form.formtastic fieldset.package-accessories {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding-top: 20px;
  margin-top: 20px;
  }

form.formtastic fieldset.package-accessories ol {
  margin-right: -20px;
  }

form.formtastic fieldset.package-accessories ol li {
  float: left;
  width: 270px;
  margin: 10px 20px 20px 0;
  height: 150px;
  text-align: center;
  }

form.formtastic fieldset.package-accessories ol li label {
  display: none;
  }

form.formtastic fieldset.package-accessories ol li p.image {
  height: 80px;
  margin: 0 0 10px;
  }

/*
form.formtastic fieldset.package-accessories ol li img.unselected {
  opacity: 0.3;
  }
*/

form.formtastic fieldset#package-order {
  float: right;
  width: 220px;
  padding-left: 0;
  margin-top: 20px;
  }
form.formtastic fieldset#package-order ol {width: 220px;}
form.formtastic fieldset#package-order ol li {float: right;}
form.formtastic fieldset#package-order ol li .btn {margin-right: -5px;}

.commit-section #order {margin-top: 75px;}