@charset "utf-8";
/* forms.css
 *   for misstibet forms only.
 *   -> This is loaded *after* the main stylesheet: it only contains *differences*.
 * notes: see main stylesheet for css notes, standards, etc.
 *
 * history:
 *   21 oct 2019 jw - comment out screen-reader-response.
 *                      maybe i was having it for debugging?
 *                      not much point in having visual styles for screen reader!
 *   23 feb 2019 jw - rearrange and add to cf7 message css.
 *                    they have changed class names? or i was using my own?
 *
 */

/* ================ {{{ general form structure: ================ */
body.page-template-page-form-php div.intro {
  color:            #600;
  text-align:       center;
  display:          table;
  margin:           auto;
  padding:          20px;
  border:           1px dashed #cc0000; 
  -moz-border-radius:    8px; 
  -webkit-border-radius: 8px; 
  -khtml-border-radius:  8px; 
  border-radius:         8px; 
}

div.form {
  margin:           auto; 
}

div.form fieldset {
  margin-top:       20px;
  padding:          20px 30px;
  border:           4px solid #fff3ff;
  -moz-border-radius:    8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius:  8px;
  border-radius:         8px;
}
div.form legend {
  width:            10em;
  padding:          4px;
  color:            #ef95b2; /* dark pink of logo, but darker */
  background-color: #ffefff; /* light pink */
  background: -webkit-gradient( linear, left top, left bottom, from(#ffefff), to(#ffffff));
  background: -moz-linear-gradient( top, #ffdfdf, #ffefff);
  font-weight:      bold;
  border:           2px solid #dfd1d1; /* pinkish grey */
  -moz-border-radius:    8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius:  8px;
  border-radius:         8px;
}

div.form fieldset > div { /* primary data areas in a fieldset (contain label and field) */
  clear:            both;
  padding-bottom:   20px;
}
div.label,
div.field {
  float:            left;
}
label,
div.label {
  text-align:       right;
}
div.field {
  margin-left:      20px;
  position:         relative;
}
div.captcha div.field {
  width:            400px;
}
span.instr {
  display:          inline-block;
  width:            150px;
  margin-left:      10px;
  font-size:        80%;
  text-align:       left;
  float:            right;
}
div.submit span.privpol {
  font-size:        90%;
  margin-top:       12px;
}
div.submit span.privpol:before {
  content: '[';
}
div.submit span.privpol:after {
  content: ']';
}
div.submit span.instr {
  margin-top:		16px;
  margin-left:	20px;
  font-size:		85%;
  width:				auto;
}

div.required div.label {
  font-weight: bold;
}
div.field span.to_who span.wpcf7-list-item, 
div.field span.sponsor-type span.wpcf7-list-item {
  display:				block;
  margin-bottom:	8px;
  margin-left:		0;
  font-size:			90%;
}
div.field span#sponsor-type {
  display:	      block;
  width:		      420px;
}
div.field span.sponsor-type span.wpcf7-list-item {
  width:		      200px;
}
/* ------------ {{ captcha: ------------ */
div.captcha div.label {
  font-size:      90%;
  margin-top:     25px;
}
div.field span.to_who span.wpcf7-list-item label span.wpcf7-list-item-label {
  font-size:      110%;
}
div.captcha img {
  border:           2px solid #ccc;
  -moz-border-radius: 8px;
  position:         absolute;
  top:              9px;
}
img.wpcf7-captchac {
  margin-left:      0     !important;
}
div.captcha span.wpcf7-form-control-wrap {
  position:         absolute;
  top:              8px;
  left:             95px;
}
div.captcha span.wpcf7-form-control-wrap input {
  width:            40px;
  border-radius:    0       !important;
  font-weight:      bold;
}
div.captcha span.instr {
  width:            230px;
  position:         absolute;
  top:              12px;
  left:             170px;
}
/*  { for recaptcha form: */
div#recaptcha_widget_div {
  display:          table;
  float:            left;
}
div#captcha_label {
  width:            160px;
  border-left:      4px solid #cc0000;
  border-top:       4px solid #cc0000;
}
div#captcha_instr {
  display: table; 
  margin-top: 8px;
  padding-top: 4px;
  padding-left: 8px;
  width: 200px;
  height: 66px;
  float: left;
  border-right: 4px solid #cc0000;
  border-bottom: 4px solid #cc0000;
}
/*  } for recaptcha form. */
/* ------------ }} captcha. ------------ */

/* ------------ {{ form messages - usually contact form 7: ------------ */
div[class=$"-message"] {
  text-align:       left;
  width:            70%;
  color:            #3399ff;
  padding:          4px 20px 4px 20px;
  margin:           auto;
  margin-bottom:    12px;
}
div.error-message {
  border:           2px solid #3399ff;
}
div.success-message {
  border:           2px solid var(--color-maroon);
}
/* for debugging:
div.screen-reader-response {
  font-size:		1.1em;
  text-align:		center;
  padding:			1em;
  border:           2px solid var(--color-maroon);
}
*/
span.wpcf7-not-valid-tip {
  color:            var(--color-maroon);
}

/*
div.error-message {
  text-align:  left;
  border:      2px solid #3399ff;
  width:    70%;
  color:    #3399ff;
  padding:  4px 20px 4px 20px;
  margin-bottom:  12px;
}
div.success-message {
  text-align:  left;
  border:      2px solid #cc0000;
  width:    70%;
  color:    #3399ff;
  padding:  4px 20px 4px 20px;
  margin-bottom:  12px;
}
*/
div.message {
  width:    70%;
  text-align:  center;
  border:   2px solid #3399ff;
  color:    #3399ff;
  padding:  20px 0px 20px 0px;
}
ul.error {
  margin-top:  0em;
}
ul.error ul.error {
  margin-top:  .1em;
  margin-left: -.5em;
}
li.error {
}
dl.error dt {
  margin-top:  .5em;
}
dl.contact-success {
  text-align:  left;
  /* goes totally bonkers on MSwindows:
     margin-left:  15%;
   */
}
/* ------------ }} form messages. ------------ */
/* ================ }}} general form structure. ================ */

/* ================ {{{ general form parts: ================ */
input[type="text"], 
input[type="email"], 
textarea {
  background-color: #ff97c4;   /* dark pink */
  width:            250px;
  padding:          4px;
  -moz-border-radius:     8px 0 0 0;
  -webkit-border-radius:  8px 0 0 0;
  -khtml-border-radius:   8px 0 0 0;
  border-radius:          8px 0 0 0;
}
textarea {
  background-color: #ff97c4;   /* darker pink */
  font-family:      monospace;
  height:           200px;
  width:            340px;
}
input:focus,
textarea:focus  {
  background-color: #fff3ff;  /* light pink */
}
select {
  background-color: #ff97c4;  /* dark pink */
}
span.checkbox {
  white-space:      nowrap;
  margin-right:     2em;
  line-height:      180%;
}
td#who_checkboxen span.checkbox {
  width:            20em;
  display:          block;
  float:            left;
}
input.checkbox {
  background-color: #ff97c4;  /* dark pink */
  font-size:        90%;
  line-height:      1.2em;
}
input.checkbox2 {
  background-color: #fff3ff;  /* light pink */
  font-size:        90%;
  line-height:      1.2em;
}
input.radio-sidebar {
}
input.radio-main {
  background:       #fff3ff;  /* light pink */
}

form input[type="submit"] {
  color:            #000;     /* black */
  font-weight:      bold;
  width:            auto    !important;
  -moz-border-radius:     8px;
  -webkit-border-radius:  8px;
  border-radius:          8px;
  padding:          6px;
  margin-top:       8px;
  background-color: #ff97c4;  /* dark pink */
  background: -webkit-gradient( linear, left top, left bottom, from(#ff97c4), to(#ffefff));
  background: -moz-linear-gradient( top, #ff97c4, #ffefff);
}

/* ------------ { form labels: ------------ */
.form-label {
  color:            #333;
  text-align:       right;
}
.form-label2 {
  color:            #333;
  text-align:       left;
}
.form-label-req {
  color:            #333;
  font-weight:      bold;
  text-align:       right;
}
.form-text {
  color:            grey;
}
span.label-err-highlight {
  color:            #c00;
  font-weight:      bold;
}
/* ------------ } form labels. ------------ */
/* ================ }}} general form parts. ================ */


/* ================ {{{ specific forms: ================ */
/* ------------ {{ comments section: ------------ */
h3#reply-title {
  background-color: transparent;
  border:           none;
}
ul#comment-notes {
  font-size:        90% !important;
}
ul#comment-notes li { 
  list-style-type:  none;
  list-style-image: url(../images/bullets/bullet.gif);
  margin-top:       .5ex;
}
ul#comment-notes li ul li { 
  list-style-image: none;
}

/* { the comment form: */
form#commentform {
  padding:		      12px;
  margin:			      auto;
}
form#commentform p label {
  vertical-align:   top;
  margin-right:		  10px;
  font-weight:		  bold;
  width:					  120px;
  font-size:			  90%;
  display:				  block; /* so it will get width! */
  float:					  left;
}
form#commentform p label:after {
  content:          ': ';
}
form#commentform p label[for=humanvalue] {
  width:            auto;
}
form#commentform p label[for=humanvalue]:after {
  content:          '';
}
form#commentform p label[for=comment]:after {
  content:          '\00a0\00a0*';
  color:            #c30;
  font-weight:      bold;
}
form#commentform p span.required {
  font-weight:      bold;
  padding-right:    5px;
}
form#commentform p.form-allowed-tags {
  font-size:        90% !important;
  margin-left:      8em;
  margin-right:     3em;
}
div#comments form#commentform > h3 > span {
  display:          block;
  border:           1px solid #000; /* black */
  border-bottom:    0;
  padding:          10px;
  margin:           0;
  color:            #c00;   /* red */
}
div#comments form#commentform input, 
div#comments form#commentform textarea  {
  width:            400px;
}
form#commentform p.comment-form-rbt label {
  margin-left:     -24px;
}
form#commentform p.comment-form-rbt span.required {
  margin-right:     6px;
}
form#commentform p.comment-form-rbt input {
  width:            60px      !important;
}
div#comments form#commentform input:focus,
div#comments form#commentform textarea:focus  {
  background-color: #fff3ff;   /* light pink */
}
form#commentform input[type="submit"] {
  margin-left:      128px;
  margin-top:       0;
  padding:          10px 16px;
}
/* } the comment form. */
/* { cool word balloon: */
div#comments form#commentform > h3 {
  display:          block;
  background-color: #ffffef;
  margin-top:       0;
  margin-bottom:    6px;
  padding:          8px 12px;
  color:            #c00;   /* red */
  font-weight:      normal;
}
/* } cool word balloon. */
/* ------------ }} comments section. ------------ */

/* ------------ {{ Comment form: ------------ */
form#commentform .form-label {
  margin:           1em 0 0;
}
form#commentform span.required {
  background:       #fff;
  color:            #c30;
}
form#commentform, 
form#commentform p {
  padding:          0;
}
input#author, input#email, input#url, textarea#comment {
  padding:          0.2em;
}
div.comments ol li {
  margin:           0 0 3.5em;
}
textarea#comment {
  height: 13em;
  margin: 0 0 0.5em;
  overflow: auto;
  width: 66%;
}
/* ------------ }} Comment form. ------------ */

/* ------------ {{ Apply form: ------------ */
/* { agree fieldset: */
p#agree {
  -moz-border-radius:     8px;
  -webkit-border-radius:  8px;
  border-radius:          8px;
  background-color: #ff97c4; /* dark pink, same as input fields */
  color:            #600; /* deep red */
  font-weight:      bold;
  display:          table;
  margin:           auto;
  text-align:       center;
  padding:          8px;
}
/* } agree fieldset. */

/* { contact fieldset: */
fieldset > div > div {
  margin-top:       20px;
  float:            left;
}
fieldset#apply-contact-info div.label, 
fieldset#apply-contact-info div.field {
  float:            none;
}
fieldset#apply-contact-info div.field {
  margin-left:      0;
}
fieldset#apply-contact-info div.label {
  text-align:       left;
}
/* name: */
div#apply-name div {
  width:            220px;
}
div#apply-name input {
  width:            180px !important;
}
/* address: */
div#apply-address div, 
div#apply-city div {
  width:            330px;
}
div#apply-address input, 
div#apply-city input {
  width:            300px !important;
}
div#postcode {
  width:            130px !important;
}
div#postcode input {
  width:            100px !important;
}
div#country {
  width:            180px;
}
div#country input {
  width:            170px !important;
}
/* email: */

/* phone: */
div#mobile-countrycode {
  margin-left:      10px;
}
div#mobile-countrycode div.label {
  margin-left:      12px;
}
input[name="apply-mobile-number"] {
  width:            150px   !important;
}
input[name="apply-mobile-countrycode"] {
  width:            30px    !important;
}

/* } contact fieldset. */

/* { personal-info fieldset: */
fieldset#apply-personal-info div.label {
  float:            left;
  width:            100px;
}

div#apply-dob div.label {
  width:            150px;
}
div#apply-dob div.field {
  width:            300px;
}
span.menu-apply-dob-day, 
span.menu-apply-dob-month, 
span.menu-apply-dob-year {
  margin-right:     10px;
}

div#weight div.field {
  width:            80px;
}
div#weight div.field input {
  width:            30px;
}
/* } personal-info fieldset. */

/* { about-you fieldset: */
fieldset#apply-about-you > div {
	clear:	          both;
	float:	          left;
}
fieldset#apply-about-you div.label {
  float:            left;
  width:            130px;
}
fieldset#apply-about-you div.field {
  float:            left;
  width:            500px;
}
fieldset#apply-about-you input[type="text"] {
  width:            400px;
}
fieldset#apply-about-you div#apply-experience {
  width:            580px;
  position:         relative;
}
fieldset#apply-about-you div#apply-experience div.label {
  width:            400px;
}
fieldset#apply-about-you div#apply-experience div.field {
  width:            160px;
  margin:           0;
  position:         absolute;
  top:              18px;
  right:            0;
}
/* fieldset#apply-about-you div#apply-experience span.wpcf7-radio { */
fieldset#apply-about-you div#apply-experience div.field {
  margin-top:       0;
  margin-left:      16px;
  position:         relative;
}
fieldset#apply-about-you div#apply-experience span.wpcf7-radio span.wpcf7-list-item {
  margin:           0;
  width:            80px;
  position:         absolute;
  top:              16px;
}
fieldset#apply-about-you div#apply-experience span.wpcf7-radio span.wpcf7-list-item.last {
  left:             76px;
}
fieldset#apply-about-you div#apply-experience span.wpcf7-list-item span.wpcf7-list-item-label {
  position:         relative;
}
fieldset#apply-about-you div#apply-experience span.wpcf7-radio input[type="radio"] {
  position:         absolute;
  top:              0;
}
div.form.apply textarea {
  width:            400px;
}
/* } about-you fieldset. */

/* { file-upload fieldset: */
div.form fieldset#apply-upload > div {
  display:          table;
  border:           1px dashed #ffccff; /* pink */
  width:            500px;
  margin-top:       10px;
  padding:          0 20px 20px 20px;
  -moz-border-radius:     8px;
  -webkit-border-radius:  8px;
  border-radius:          8px;
}
fieldset#apply-upload {
  font-size:        90%;
}
fieldset#apply-upload div.label {
  width:            100%;
  text-align:       left;
}

fieldset#apply-upload div.label span.info {
  margin-left:      20px;
  display:          block;
  font-size:        80%;
  font-weight:      normal !important;
}
fieldset#apply-upload div.field {
}
fieldset#apply-upload div.field input {
  float:            left;
}
div#close-up-photos,
div#full-length-photos {
  margin-top:       30px;
}

div.captcha {
  display:          table;
  margin:           auto;
}

div.submit {
  float:            none;
  clear:            both;
  margin:           auto;
  text-align:       center;
}
div.submit p {
  font-weight:      bold;
}
div.submit p.submit-note {
  font-size:        90%;
}
div.submit p.submit-note span {
  display:          block;
}
fieldset#finish input[type="submit"] {
  -moz-border-radius:     12px;
  -webkit-border-radius:  12px;
  border-radius:          12px;
}

/* } file-upload fieldset. */
/* ------------ }} Apply form. ------------ */


/* ------------ {{ Donate form: ------------ */
form.form-donate {
  display:          inline;
  float:            left;
}
div.sidebar form.form-donate {
  margin:           20px 0 0 80px;
}
/* ------------ }} Donate form. ------------ */
/* ================ }}} specific forms. ================ */

/* e o f */