/*********** GENERIC FORM ***************/
input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select {
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  background-color:#ffffff;
  border: solid 1px #c0baaa;
  padding: 4px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
  border-color: #464646;
}

input.phone-number {
  width: 100px;
}

.fieldWithErrors input[type="text"],
.fieldWithErrors input[type="password"],
.fieldWithErrors input[type="file"],
.fieldWithErrors textarea,
.fieldWithErrors select {
  border:solid 2px #cc6666;
}

select {
  padding: 3px;
}

.labelled-input {
  color: gray;
}

.submit-link {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #363636;
  font-size: 13px;
  font-weight: bold;
}
.submit-link span {
  position: relative; /* HUH? Why */
  top: -1px;
  line-height: 18px;
  text-decoration: underline;
}
.submit-link:hover span {
  text-decoration: none;
}

.phs-form form {
  padding:10px;
}

.phs-form input[type="text"],
.phs-form input[type="password"],
.phs-form input[type="file"],
.phs-form textarea,
.phs-form select {
  width:96%;
}
.phs-form select {
  width:auto;
  padding:3px;
}
.phs-form input.phone-number {
  width:100px;
}

/* TODO Should this be merged with .disclaimer in main.css? */
.phs-form #disclaimer {
  overflow:auto;
  border: solid 1px #8993b4;
  height:100px;
  width:483px;
  background-color:#fff;
  padding:2px;
}

/*********** TABLE BASED FORM ***************/
.phs-form table, .phs-form tr, .phs-form th, .phs-form td {
  border:none;
}
.phs-form th, .phs-form td {
  padding:5px;
}
.phs-form table {
  margin:auto;
}
.phs-form table .spacer {
  height:20px;
}
.phs-form table .label {
  text-align:right;
  width:200px;
}
.phs-form table .field {
  text-align:left;
  width:250px;
}
.phs-form table .errors {
  text-align:left;
  width:250px;
  color:#cc3333;
}
.phs-form table .errors ul {
  margin:0px;
  margin-left:2em;
}
.phs-form table .errors-row td {
  padding:0px;
}

/*********** BLOCK BASED FORM ***************/
.phs-form {}

/**** FORM SPECIFIC STYLING; consider when to move out into seperate file ******/
.user-form table .opt-in td {
  font-size:9pt;
}

.user-form #recaptcha_area {
  /*margin:auto;*/
}

.petition-form {
  padding:0px;
}
.petition-form table .label {
  width:150px;
}
.petition-form table .field {
  width:120px;
}
.petition-form table .errors {
  width:150px;
}
.petition-form table .field input,
.petition-form table .field textarea {
  width:250px;
}
.petition-form table button {
  /* TODO Why is this necessary? */
  position: static;
}

.enrollment-form .phs-form-row {
  margin: 5px 0px;
}
.enrollment-form .phs-form-label {
  display: inline-block;
  width: 30%;
  text-align: right;
  padding: 0px 5px;
}
.enrollment-form .phs-form-field {
  vertical-align: middle;
  display: inline-block;
  width: 50%;
  text-align: left;
  padding: 0px 5px;
}
.enrollment-form .phs-form-errors {
  vertical-align: middle;
  display: inline-block;
  width: 40%;
  text-align: left;
  padding: 0px 5px;
  color: red;
}
.enrollment-form .phs-form-errors div,
.enrollment-form .phs-form-errors .formError {
  color: red;
}