@charset "utf-8";
/* FORMS
   --------------------------------- */
/*form { display: inline; }

fieldset {
   margin: 2em 0;
   border: 1px solid #eee;
   border-width: 1px 0 0;
   padding: 10px;
   }

legend { margin: 1em 0; }

legend span {
   display: block;
   font-size: 1.3em;
   font-weight: 700;
   color: #d21033;
   text-transform: uppercase;
   }

fieldset fieldset {
   margin: 1.5em 0;
   border-width: 1px;
   padding: 1em;
   background: #fafafa;
   }

fieldset fieldset legend {
   font-size: 1.3em;
   margin: 0 0 0 -5px;
   padding: 0 5px;
   }

fieldset fieldset legend span {
   font-size: 1em;
   color: #000;
   text-transform: capitalize;
   }

label {
   cursor: pointer;
   font-size: 1.1em;
   color: #555;
   }

label em { color: #d21033; }

input[type="text"], input[type="password"], select, textarea { border-width: 1px; }
input[type="text"], input[type="password"], textarea, option { padding: 3px; }
option {
   font-family: Verdana, sans-serif;
   font-size: 1em;
   color: #000;
   padding: 2px 0;
   }

input[type="text"], input[type="password"] { min-height: 1.5em; }
* html select {
   font: normal 400 1.1em/1.0 Verdana, sans-serif;
   height: 1.5em
   }
optgroup {
   font-weight: 700;
   font-style: normal;
   color: #777;
}
optgroup option {
   padding-left: 1em;
}
textarea {
   line-height: 1.5;
}
xinput.btn-submit {
   border-width: 2px;
}*/
/* vertically aligned form
   TODO: combine styles
   DEPRECATED:
   5/22/07 - fm-v div.row select, .fm-v div.row textarea {float:left; clear:both;}  can be combined with .fm-v div.row input ???
*/
.fm-v div.row {
   float: left;
   margin: 0;
   padding: .5em 0;
   width: 100%;
}
.fm-v div.row label {
   float: left;
   width: 100%;
   line-height: 1.5;
}
.fm-v div.row input, .fm-v div.row select, .fm-v div.row textarea {
   float: left;
   clear: left;
}
.fm-v div.row input.check {
   float: left;
   clear: left;
   margin: 0 .5em 0 0;
   border: 0;
   width: 1.3em;
   height: 1.3em;
   position: relative;
   top: .1em;
}
.fm-v div.row label.check {
   float: left;
   width: auto;
}
.fm-v div.row input.radio {
   float: left;
   clear: left;
   margin: 0 .5em 0 0;
   border: 0;
   width: 1.3em;
   height: 1.3em;
   position: relative;
   top: .1em;
}
.fm-v div.row label.radio {
   float: left;
   width: auto;
}
.fm-v div.row span.msg-error {
   float: left;
   display: block;
   position: relative;
   top: .2em;
   margin: 0 0 0 1em;
   padding: 0 0 0 2em;
   font-size: 1.1em;
   line-height: 1.55;
   background: url(../img/error-s.gif) left top no-repeat;
   color: #d21033;
}
.fm-v span.msg-error {
   float: left;
   display: block;
   padding: 0 0 0 2em;
   font-size: 1.1em;
   line-height: 1.55;
   background: url(../img/error-s.gif) left top no-repeat;
   color: #d21033;
}
.fm-v div.row input.btn-submit {
   display: block;
   margin: 0;
} /* float:left; clear:left; margin-bottom:0; or display:block */
/* horizontally aligned form */
.fm-h div.row {
   float: left;
   margin: 0;
   padding: .5em 0;
   width: 100%;
}
.fm-h div.row label {
   float: left;
   clear: left;
   margin-right: .5em;
   width: 15em;
   text-align: right;
   line-height: 1.5;
} /* display:block; */
.fm-h div.row input {
   float: left;
   clear: right;
} /* margin-bottom:1em; */
.fm-h div.row.check label {
   clear: none;
   width: auto;
   margin-right: 1.5em;
}
.fm-h div.row.check input {
   position: relative;
   top: -2px;
}
.fm-h div.row input.btn-submit {
   clear: both;
   display: block;
   text-align: center;
} /* float:left; clear:left; margin-bottom:0; or display block */
/* highlight errors */
.error {
   background: #ffefef;
}
input.error, select.error, textarea.error {
   background: #FFEFEF;
   color: #d21033;
} /* border-color:#d21033; */
/* mark as required */
/* Required text */

.required {
   background: #ffd;
}

abbr[title="Required"],
abbr.required {
   border: 0;
   color: #d21033;
   background: transparent;
}




/* FORMS - pears */
/* TODO :
 * Normalize font-family, vertical-align, font-size, line-height
 */
 
   .fieldset { /* style <div> outside of <fieldset> */
      position: relative;
      padding: 2.5em 1em 1em 1em;
      border: 1px solid #ddd;
      background-color: #fafafa;
      }

      fieldset { margin: 0; border: 0; padding: 0; }

         .row { /* style <fieldset> to contain fields and labels */
            position: relative; /* establish positioning context */
            margin: 0 0 1.5em 0;
            padding: 0 0 1.5em 0;
            border-bottom: 1px solid #eee;
            }

            .row--pad { padding-left: 20%; }
            .row--actions {
               border: 0;  /* remove border on .row with submit buttons */
               margin-bottom: 0;
               }

   legend {
      color: #000;
      font-weight: 700;
      }

      .legend { /* style <span> inside of <legend> */
         position: absolute;
         width: 100%;
         top: 0.5em;
         left: 1em;
         }

   label { /* <label> above fields by default */
      font-weight: 700;
      display: block;
      }

      .row--pad > label {
         position: absolute;
         left: 0;
         width: 20%;
         line-height: 3em;         
         }

      .label--left { /* <label> left of fields */
         float: left;
         width: 20%;
         margin: 4px 0 5px 0; /* magic numbers - align label text with field text */
         }

   .options {
      margin: 5px 0 0 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      }

      .options > li {
         margin: 0 0 5px 0;
         padding: 0;
         }

         .options label {
            display: inline;
            float: none;
            width: auto;
            font-weight: 400;
            }


.form-text,
textarea {
   margin: 0;
   padding: .5em;
   vertical-align: middle;
   font-size: 100%;
   font-family: sans-serif;
   border: 1px solid #ddd;
   
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
           box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
   }

.form-text:focus {
   border: 1px solid #ccc;
   background: #fff;
   }

textarea { height: 10em; }

select {
   min-width: 25%;
   padding: 4px;
   }

.form-help {
   color: #999;
   overflow: hidden;
   margin: 0;
   }

.form-help input { display :block; }

input[type="checkbox"],
input[type="radio"]{
   margin: 0;
   vertical-align: middle;
   }

/*input[type="submit"] {
   margin: 0;
   padding: 5px 10px;
   font-size: 12px;   
   font-weight: bold;
   border: 1px solid #ccc;
   background: #eee;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   }

input[type="submit"]:hover,
input[type="submit"]:focus {
   border: 1px solid #bbb;
   background: #e5e5e5;
   }

input[type="submit"]:active {
   border: 1px solid #ccc;
   background: #eee;
   }*/

@media screen and (max-width: 600px) {
form fieldset label {
display: block;
float: none;
width: auto;
margin: 0 0 5px 0;
}
.form-actions,
.check,
.options ul,
.form-help {
margin-left: 0;
padding-left: 0;
}
.form-text,
textarea {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}