/**********************************
Styling for the contact form
***********************************/
/*TODO:
 * problems with mobile
 * hourglass not visible
 * error message appears way too much up, scrolling all the way to the top
*/
#yl_ctfx {
  border: 1px solid #000;
  padding: 5px;
  background-color: #FFD;
  color: #000;
  font-size: 1.0em;
  position: fixed;
  top: 10px;
  left: 10%;
  width: 80%;
/*   margin: 0 auto; */
  z-index: 254;
}

#yl_hourglass {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  /* TODO: check it is really centered */
/*   left: 50%; */
  width: 64px;
  height: 64px;
  z-index: 255;
}

#yl_ctfx label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
  color: #000;
}

#yl_ctfx p {
  margin: 0;
  padding: 5px 10px 7px 0px;
}

/* #yl_ctfx label { width: 120px; } /* Width of labels */
/* #yl_ctfx label { margin-left: 123px; } /* Width plus 3 (html space) */
#yl_ctfx label.error {
  margin-left: 20%;
  width: 80%;
}

#yl_ctfx label.error {
  color: red;
  font-style: italic
}
#yl_ctfx div.error { display: none; }
#yl_ctfx input { border: 1px solid black; }
#yl_ctfx input.checkbox { border: none }
#yl_ctfx input:focus { border: 1px dotted black; }
#yl_ctfx input.error { border: 1px dotted red; }
#yl_ctfx textarea:focus { border: 1px dotted black; }
#yl_ctfx textarea.error { border: 1px dotted red; }

#csubject, #cname, #cemail, #ccomment {
  width: 95%;
}

#yl_ctfx input.submit {
/*  margin-left: 123px;*/
}

#yl_fx_close {
  float: right;
  width: 123px;
  text-align: right;
}

/* for small screens */
@media only screen and (max-width:640px) {
  #yl_ctfx {
    margin: 0;
    border: 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 3px;
    padding-bottom: 27px;
    /* increase contrast */
    background-color: #FFF;
    color: #000;
    font-size: 4.0vw;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  }
  
  #yl_ctfx input, #yl_ctfx textarea {
    font-size: 4.5vw;
  }

  #yl_hourglass {
    top: 10px;
  }

}