/*

File: contact.css
Purpose: To apply styles specific to the Contact page

*/



ul#contact_info {
  height: 6em;                                                                  /* Because its contents are floated and I want sibling elements to be able to push-off it with their margins */
  list-style-type: none;
  margin-left: 0;
}
  ul#contact_info li {
    float: left;
  }
  ul#contact_info li.adr {
    margin-right: 1.5em;
    width: 50%;
  }
  ul#contact_info li.tel,
  ul#contact_info li.internet {
    clear: right;
  }
  @media print { ul#contact_info li.internet {
    width: 40%;                                                                 /* Firefox, Opera: Give it a large-enough width so the <li> doesn't float-up next to li.tel */
  }}
  @media screen { ul#contact_info li.internet a.url {
    display: inline;
    visibility: hidden;
  }}

#form_container {
  background-color: #fff;                                                       /* In case it has to run over into the side column */
  margin: 1.5em 0;
  position: relative;
  width: 35.25em;
}
  #form_side {
    position: absolute;
      right: 0;
      top: 0;
  }
  form#feedback {
    clear: none;
    margin-right: 11.25em;
    width: 32.25em;
    white-space: nowrap;
  }
    #feedback ol.inputs {
      list-style-type: none;
    }
		#feedback ol#user_info {
			height: 1.5em;                                                            /* For Firefox, or else it will be too far down */ /* Later changed by JavaScript */
		}
      .inputs li {
        clear: left;
        width: 32.25em;
      }
      .inputs li div.multi-line {
        height: 1.25em;
        margin-left: 11.25em;
        width: 22em;                                                            /* Normally, this would be 21 em, but here it is set a little longer to allow for small differences in width between browsers */
      }
      .inputs li.extra {
        display: none;                                                          /* Later changed by JavaScript */
      }
        .inputs li label {
          display: block;
          float: left;
          width: 9.75em;                                                        /* With #content split into fourths with 1.5em gutters, this is 1/4 */
        }
        .inputs li span {
          display: block;                                                       /* IE */
          display: table-cell;
          float: left;
          height: 1.5em;
          vertical-align: middle;
          width: 1.5em;
        }
        .inputs li.required span {                                              /* Background-image is used instead of <img> (preferred for accessibility) because it can be vertically-centered (display: table-cell; won't work if the <span> is floated) */
          background-image: url(/images/css/star.png);
          background-position: 50% 50%;
          background-repeat: no-repeat;
        }

        input,
        textarea {
          display: block;
          float: left;
          width: 21em;                                                          /* With #content split into fourths with 1.5em gutters, this is 2/4 + 1 gutter */
        }
        input {
          height: 1.25em;                                                       /* To vertically center the text */
          margin: 0.125em 0;                                                    /* To vertically center the text */
        }

/* Specific fields -----------------------------------------------------------*/

#form_side input#more {
  background: transparent;
  color: #999;
  line-height: 1.5em;
  height: 1.375em;
  margin: 0;
  width: 1.5em;
}
#form_side input#more:hover {
  color: #466;
}

input + input {
  clear: both;
  margin-left: 11.25em;                                                         /* label { width } + gutter (label { margin-right }) */
}
input#city {
  clear: none;
  margin-right: 0.125em;
  width: 12.895em;                                                              /* Really want 12.9 em, but this makes both default and +1 font-sizes happy */ /* Sticks-out a tiny bit in Opera, but is flush in Firefox */
}
input#state {
  clear: none;
  margin-left: 0.125em;
  margin-right: 0.125em;
  width: 2.2em;                                                                 /* When at normal font-size, a little more space than what the characters use is needed */
}
input#zip {
  clear: none;
  margin-left: 0.125em;
  width: 5.4em;                                                                 /* When at normal font-size, a little more space than what the characters use is needed */
}
input#cc, label#cc_label {
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  width: auto;                                                                  /* Yes, it is necessary */
}
  label#cc_label {
    margin-left: 11.25em;
    margin-right: 1em;
  }

textarea#message {
  height: 8.875em;                                                              /* A mulitple of 1.5 em - margin-top */
  margin-top: 0.125em;
}

div.buttons {
  clear: both;
  margin: 1.5em 0;
  margin-bottom: 3em;
  margin-left: 11.25em;                                                         /* label { width } + gutter (label { margin-right }) */
}
  input[type="reset"],
  input[type="submit"] {
    clear: none;
    height: 1.5em;
    margin: 0;
    width: 9.75em;
  }
  input[type="submit"] {
    /*margin-right: 1.5em;*/                                                    /* For use with the Clear button */
  }

#status {
  font-style: italic;
}
/*#status {
  background-position: center left;
  background-repeat: no-repeat;
  min-height: 25px;
  padding-left: 25px;
}
#status.error {
  background-image: url(/images/css/send.error.png);
}
#status.fix {
  background-image: url(/images/css/send.fix.png);
}
#status.processing {
  background-image: url(/images/css/send.processing.gif);
}
#status.success {
  background-image: url(/images/css/send.success.png);
}*/