/*  forms.css from isellsoap    https://github.com/isellsoap/forms.css/blob/gh-pages/assets/css/forms.css
 *      iDM version.  Includes material taken from Paul Anderson's awesomeform
*/

form {
    /*width: 430px;*/
    font: 100%/1.25 raleway-idm,'century gothic',optima,calibri,'gill sans',corbel,candara,sans-serif;
}
form.small {
    width: 384px;
}
input,      /*sets styles for within fields*/
select,
form > button,
optgroup,
textarea {
    display: block;
    /*    margin: 0 0 .5em 146px ;  */  /* left mar: $label_width + $label_right */
    /*margin: 0 0 .5em 98px;*/
    margin: 0 0 .5em 11%;
    padding: 0;
    /*width: 260px;*/
    width: 70%;
    font-size: .938em;      /* changing this can be catastrophic */
}
label[for=zip],
input[name=state],
input[name=zip] {
    display: inline-block;
    float: none;
}
input[name=state] {
    margin: 0 0 .5em 0;
    width: 10%;
}
label[for=zip] {
    margin-left: auto;
}
input[name=zip] {
    margin: 0 0 .5em 0;
    width: 32%;
}
.small input,
.small select,
.small button,
.small optgroup,
.small textarea {
    margin: 0 0 .5em 120px ;
    width: 240px;
}
input.double {
    position: relative;
    float: left;          /* for first of two adjacent textfields */
    margin: 0 0 .5em;
    padding: 0;
    width: 33%;
}
.small input.double {
    margin: 0 0 .5em 120px ;
    width: 118px;
}
input.double+input[type=text] {
    position: relative;
    float: left;
    clear: right;
    margin: 0 0 0 1%;
    width: 36%;
}
.small input.double+input[type=text] {
    left: 239px;
    width: 120px;
}
input.double+span {         /* for plain text after narrow label */
    position: absolute;
    margin: -2.125em 0 0;
    padding: .25em 0 0 2px;
    font-variant: small-caps;
    font-size-adjust: .48;
}
/* margin-left and width equal to input above makes fieldset box match input
  *  -- radio buttons and checkboxes will then be inset
  * to line up radio and checkboxes under left edge of textfields, extend fieldset to left
  *  -- keep fieldset width + left margin = input width + left margin (which makes right of fieldset line up with right of textfield)
  *  -- left-margin on radio and checkboxes (see bottom) moves controls from left edge of fieldset
*/
fieldset {
    margin: 1.25em 0 1em 11%;
    padding-bottom: 1em;
    width: auto;
    border: 1px solid #ddd;
}
legend {
    padding: 0 .5em;
    border: 0;
    color: #fff; /*#bbb;*/
    font-variant: small-caps;
    font-size: 1em;
}
.fieldnoline {
    margin: 0 0 0 146px ;      /* Wrap single checkbox with this to line up box under textfield (values should match input)*/
    width: 260px ;
}
.small .fieldnoline {
    margin: 0 0 0 120px ;
    width: 240px ;
}
label {
    display: block;
    float: left;
    clear: left;
    margin-right: 1%;
    padding-top: 0.2em;
    width: 25%;
    text-align: right;
    text-transform: lowercase;
    font-variant: small-caps;
}
.small label {
    width: 110px;
}
form br {
    clear: left;
}
label span,
legend span,
.fieldnoline span {             /* 'Required' asterisk */
    background: transparent;
    color: #b00;
    vertical-align: -.375em;
    font-size: 1.375em;
}
.fieldnoline span {        /* for asterisk before single checkbox */
    display: inline;
    margin-left: -1.625em;
}
input[type='checkbox'] + label,
input[type='radio'] + label {
    display: inline;
}
/*
 *   The following section is for reversing the display of CHECKBOX and RADIO INPUTs.
 *  Surround the section of items with <fieldset class="checks"></fieldset> or <div class="checks"></div>.
 *   It is highly recommended to use FIELDSET over DIV when there are multiple items.
 *   Add <br> after each individual radio button or checkbox (within a group--unnecessary if there's only one)
 *   In the section, the INPUT precedes the LABEL and the BR comes last (after the label).
*/
.checks label {
    float: none;
    clear: none;
    padding-left: 1em;
    width: auto;
    text-align: left;
    line-height: 1.375em;
}
.checks input {
    float: left;
    width: auto;
    text-align: right;
}
/*     End reverse checks/radios section */
/*
 * 1. WebKit browsers use “pointer” only when “size” attribute with value 0
 *    or 1 is present.
 */
label,
input[type='checkbox'],
input[type='radio'],
select,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    cursor: pointer;
}
/*
 * Improves appearancy and consistency in all browsers.
 *
 * 1. https://github.com/nathansmith/formalize/issues/43
 * 2. Firefox sets line height using “!important” in the UA style sheet.
 */
input,
select,
textarea,
form > button {
    vertical-align: top;
    line-height: normal;
}
/*
 * The reason why I list all input types one by one and not just “input” is
 * this: I don’t want to address input types “file” and “range”.
 */
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea,
form > button,
input[type='button'],
/*input[type='submit'],*/
input[type='reset'] {
    height: 1.75em;
    border: 1px solid;
    background-clip: padding-box;
}
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea {
    box-sizing: border-box;
    padding: 2px 3px;
    border-color: #999 #bbb #ddd;
    background-color: #fff;
}
/*
 * Known issue regarding “select”: IE 9 ignores background color.
 */
input[type='color']:hover,
input[type='date']:hover,
input[type='datetime']:hover,
input[type='datetime-local']:hover,
input[type='email']:hover,
input[type='month']:hover,
input[type='number']:hover,
input[type='password']:hover,
input[type='search']:hover,
input[type='tel']:hover,
input[type='text']:hover,
input[type='time']:hover,
input[type='url']:hover,
input[type='week']:hover,
select:hover,
select[size]:hover,
textarea:hover {
    background-color: #f5f5f5;
}
input[type='color']:focus,
input[type='date']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='month']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='time']:focus,
input[type='url']:focus,
input[type='week']:focus,
select:focus,
select[size]:focus,
textarea:focus,
form > button:focus,
input[type='button']:focus,
/*input[type='submit']:focus,*/
input[type='reset']:focus {
    z-index: 1;
    outline: 0;
    border-color: #0068c4;
    background-color: #fff;
    box-shadow: #0068c4 0 0 .5em 0;
}
/* alternate submit buttons */
input[type='submit'],
input[type='submit']:visited {
    margin: 2em auto 1em;
    width: 6.125em;
    /*height: 1.75em;*/
    /*border: .188em solid #1c252b;   /* paints over white edge */
    /*border-radius: 1em;*/
    /*background:    ; PayPal  #f4c65a;*/
    /*background: linear-gradient(to bottom,  #f4c65a 0%,#fef2d5 5%,#ffffff 26%,#fef2d5 48%,#f9b516 74%);*/

    /*box-shadow: 1px 1px 3px rgba(0,0,0, 0.6);*/
    /*color: #293f61;*/
    text-align: center;
    /*font-weight: normal;  bold matches PayPal button;*/
    /*font-weight: bold;*/
    /*font-style:  normal; italic matches PayPal button;*/
    /*font-size: 1em;*/
    /*font-family:  ;   /* ariel, helvetica, sans-serif matches PayPal button */
    /*line-height: .825em;*/
    letter-spacing: 1px;
    /*text-transform: lowercase;*/
    /*font-variant: small-caps;*/
    padding: .2em .8em;
    border: 1px solid hsl(0,0%,100%);  /*bluish #446d88;*/
    /*background: hsl(147, 81%, 71%) linear-gradient(hsla(0, 100%, 100%, 0.40), transparent);*/
    /*background-color: #474140;*/
    /*color: white;*/
    /*background-color: hsl(147, 81%, 71%);*/
    color: hsl(240, 100%, 27%);
    border-radius: 3px;
    box-shadow: 0 .05em .25em gray;
    text-shadow: 0 -.05em .05em #335166;
    line-height: 1.375;
}
.ie9 input[type='submit'],
.ie9 input[type='submit']:visited {
    /* new yellow-orange */
    /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0YzY1YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjZmVmMmQ1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjYlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDglIiBzdG9wLWNvbG9yPSIjZmVmMmQ1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzQlIiBzdG9wLWNvbG9yPSIjZjliNTE2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);*/
}
input[type='submit']:hover {
    /*background-color: red;*/
    background: blue;
    color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0,0%,10%);
}

input[type='submit']:active {
    transform: scale(.95);
}
.ie9 input[type='submit']:active,
.lt-ie9 input[type='submit']:active {
    outline: none;
    border: none;
}

/*  end alternate submit */

/*
 * 1. A font size of 100% (as specified in the first rule set) would render
 *    check boxes and radio buttons bigger in Webkit browsers (Mac OS X).
 * 2. Needed for browser specific positioning later on.
 * 3. Improves consistency in all browers.
 */
input[type='checkbox'],
input[type='radio'] {
    position: relative; /* 2 */
    vertical-align: middle; /* 3 */
    font-size: .6875em; /* 1 */
}
/*
 * Opera (Mac OS X) needs this. More information:
 * https://github.com/nathansmith/formalize/issues/45
 */
input[type='checkbox'] {
    margin: 2px 1px;
}
input[type='radio'] {
    margin: 1px;
}
select[multiple],
select[size],
textarea {
    height: auto;
}
/* https://github.com/nathansmith/formalize/issues/42 */
select[size='0'],
select[size='1'] {
    height: 1.8em;
}
/*
 * Only Firefox understands this. Result: Opera and IE have italic font style,
 * WebKit and Firefox normal font style.
 */
optgroup {
    font-weight: 700;
    font-style: normal;
}
/*
 * 1. Removes default vertical scrollbar in IE browsers.
 */
textarea {
    overflow: auto; /* 1 */
    min-height: 5em;
    resize: vertical;
}
/*
 * All clickable buttons.
 *
 * 1. Fallback for browsers not supporting gradients (like IE 9).
 * 2. “Pushed in” effect for active state.
 */
form > button,
input[type='button'],
/*input[type='submit'],*/
input[type='reset'] {
    overflow: visible;
    padding: 3px .5em;
    border-color: #ddd #bbb #999;
    background: #e5e5e5 url('img/button.png') repeat-x; /* 1 */
    background-image: -moz-linear-gradient(#fff, #e5e5e5);
    background-image: -ms-linear-gradient(#fff, #e5e5e5);
    background-image: -o-linear-gradient(#fff, #e5e5e5);
    background-image: -webkit-linear-gradient(#fff, #e5e5e5);
    background-image: linear-gradient(#fff, #e5e5e5);
    text-shadow: #fff 0 1px 1px;
    font-weight: 700;
    line-height: normal;
}
form > button:hover,
input[type='button']:hover,
/*input[type='submit']:hover,*/
input[type='reset']:hover {
    background-image: -moz-linear-gradient(#fff, #d9d9d9);
    background-image: -ms-linear-gradient(#fff, #d9d9d9);
    background-image: -o-linear-gradient(#fff, #d9d9d9);
    background-image: -webkit-linear-gradient(#fff, #d9d9d9);
    background-image: linear-gradient(#fff, #d9d9d9);
}
form > button:active,
input[type='button']:active,
/*input[type='submit']:active,*/
input[type='reset']:active {
    border-color: #999 #bbb #ddd;
    background-image: -moz-linear-gradient(#d9d9d9, #fff);
    background-image: -ms-linear-gradient(#d9d9d9, #fff);
    background-image: -o-linear-gradient(#d9d9d9, #fff);
    background-image: -webkit-linear-gradient(#d9d9d9, #fff);
    background-image: linear-gradient(#d9d9d9, #fff);
    box-shadow: inset rgba(0, 0, 0, .25) 0 1px 2px 0;
}
/*
 * Disabled states.
 */
input[type='color'][disabled],
input[type='date'][disabled],
input[type='datetime'][disabled],
input[type='datetime-local'][disabled],
input[type='email'][disabled],
input[type='month'][disabled],
input[type='number'][disabled],
input[type='password'][disabled],
input[type='search'][disabled],
input[type='tel'][disabled],
input[type='text'][disabled],
input[type='time'][disabled],
input[type='url'][disabled],
input[type='week'][disabled],
select[disabled],
textarea[disabled] {
    background-color: #eee !important;
}
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
form > button[disabled] {
    color: #888;
    cursor: default;
    user-select: none;
}
/*
 * WebKit specific stuff.
 */
@media (-webkit-min-device-pixel-ratio: 0) {

    input[type='checkbox'] {
        top: -1px;
    }
    input[type='radio'] {
        top: -3px;
    }
    input[type='search'] {
        -webkit-appearance: none;
    }
    input[type='search']::-webkit-search-decoration {
        display: none;
    }
    select {
        border-radius: 0;

        -webkit-appearance: none;
    }
    /*
     * 1. https://github.com/nathansmith/formalize/issues/44
     */
    select[multiple],
    select[multiple][size], /* 1 */
    select[size] {
        padding-right: 3px;
        background-image: none;
    }
    select,
    select[size='0'],
    select[size='1'] {
        padding-right: 1em;
        background: #fff url('img/select_arrow.gif') no-repeat right center;
    }
    select:hover,
    select[size='0']:hover,
    select[size='1']:hover {
        background-color: #f5f5f5;
    }
    select:focus,
    select[size='0']:focus {
        z-index: 1;
        outline: 0;
        border-color: #0068c4;
        background-color: #fff;
        box-shadow: #0068c4 0 0 .5em 0;
    }
    ::-webkit-input-placeholder {
        color: #888;
        font-family: raleway-idm, "century gothic", sans-serif;
        letter-spacing: 1px;
        text-transform: lowercase;
        font-variant: small-caps;
    }
}
/*
 * Firefox specific stuff.
 */
@-moz-document url-prefix() {

    input[type='checkbox'] {
        top: -2px;
    }
    input[type='radio'] {
        top: -1px;
    }
    textarea {
        font-size: 1em;
    }
    label,
    input[type='submit'] {
        font-size-adjust: .45;
    }
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #000;
    opacity: .8;
    font-family: raleway-idm, "century gothic", sans-serif;
    letter-spacing: 1px;
    text-transform: lowercase;
    font-variant: small-caps;
}
/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner {
    padding: 0;
    border: 0;
}
/* iDM additions: some of this supersedes above */
input[type='radio'] {
    margin: .75em 0 0 1.75em;
}
input[type='checkbox'] {
    margin-top: .5em;
    margin-left: 25%;
    padding: 0;
}
input[type='checkbox'] + label {
    margin-left: 0;
}
.small input[type='checkbox'] + label {
    margin-left: 0;
}
input[type='text'],
textarea,
select {
    font-family: "gill sans mt",tahoma, "trebuchet ms", "andale mono", courier, sans-serif;
}
.g-recaptcha {
    position: relative;
    /*float: right;*/
   /* transform: scale(.9); */  /* without scaling, needs mar-right of 1em */
}
::-webkit-resizer:hover {
    cursor:pointer;                 /* should work, but doesn't*/
}