/******************************************************************************
 * EDIT.CSS
 * --------
 *
 * Stylesheet voor invulformulieren
 * 15/02/2016
 ******************************************************************************/

.label,
.textbox,
.multiLineTextbox,
.dropdownlist {
  display: block;
  width: 30rem;
  height: 2.4rem;
  padding: 0.4rem;
  color: #00F;
  background-color: #fff;
  border: 1px solid #999;
}

.label {
  color: inherit;
  background-color: #eee;
}

.multiLineTextbox {
  height: 6.0rem;
}

.dropdownlist {
  padding: 0;
}
/**
 * validator 
 */
.validator {
  text-align: left;
  padding: 0 0.2rem;
  color: red;
  height: auto;
}

.validation_summary {
  color: red;
  width: 60rem; /* cfr fieldset */
  margin: 2rem auto;
}

  .validation_summary ul {
    display: block;
    padding-left: 30%; /* cfr fieldset label */
  }

/**
 * Fieldset elements 
 */
fieldset {
  width: 60rem;
  height: auto;
  margin: 3.0rem auto;
  padding: 1.5rem 0;
  border: 1px solid #ccc;
  text-align: left;
}

  /* 
    p-tags can't contain block elements. Radiobuttons and checkboxes are 
    translated as tables; this are block elements, so we must use div-tags
    */
  fieldset p {
    display: block;
    min-height: 3rem;
    margin: 0.6rem 0.5rem;
  }

  fieldset div {
    display: block;
    min-height: 3rem;
    margin: 0.6rem 0.5rem;
    padding-top: 0.5rem;
  }

  fieldset legend {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem;
    margin-left: 0.5rem;
  }

  fieldset .remark {
    text-align: center;
    font-size: 1.1rem;
    padding: 0 1.5rem 1rem 0;
  }

    fieldset .remark:before {
      content: "[ ";
    }

    fieldset .remark:after {
      content: " ]";
    }

  fieldset .label {
    float: left;
    width: 30%;
    border: none;
    text-align: right;
    background-color: rgba(0, 0, 0, 0); /* transparant */
    padding: 0.3rem 0.8rem;
  }

  fieldset label:after {
    _content: ": ";
  }

  fieldset .gray {
    background-color: lightgray;
    color: #666;
    text-align: left;
    border: 1px solid #999;
    padding: 0.2rem 0.4rem 0.1rem 0.4rem;
  }

  fieldset .textbox {
    float: left;
    width: 40%;
    padding: 0 0.4rem 0.1rem 0.4rem;
  }

  fieldset .multiLineTextbox {
    float: left;
    width: 40%;
  }

  fieldset .dropdownlist {
    float: left;
    width: 40%;
  }

  fieldset .checkBox input {
    float: left;
    margin-top: 0.6rem;
  }

  fieldset .checkBox label {
    text-align: left;
  }

  fieldset input[type="checkbox"], 
  fieldset input[type="radio"] {
    float: left;
    margin-top: 0.6rem;
  }

  fieldset .radios {
    float: left;
  }

    fieldset .radios label {
      float: left;
      line-height: 2.2rem;
      margin: 0 2rem 0 0.2rem;
    }

  /**
   * Fieldset validation and error notification
   */
  fieldset .errorNotification {
    padding: 0.5em 0 0 30%;
    color: red;
    text-align: left;
  }

  fieldset .validator {
    color: red;
    display: block;
    float: left;
    padding-left: 5px;
    padding-top: 5px;
    font-weight: bold;
  }

  fieldset .browse-button {
    width: 13%;
    margin-left: 2%;
  }

  fieldset .textbox ~ .button {
    margin-left: 1rem;
    height: 2.4rem;
  }

  /** 
   * Fieldset control dimensions 
   */
  fieldset .pc5 {
    width: 5%;
  }

  fieldset .pc10 {
    width: 10%;
  }

  fieldset .pc12 {
    width: 12%;
  }

  fieldset .pc15 {
    width: 15%;
  }

  fieldset .pc20 {
    width: 20%;
  }

  fieldset .pc25 {
    width: 25%;
  }

  fieldset .pc30 {
    width: 30%;
  }

  fieldset .pc35 {
    width: 35%;
  }

  fieldset .pc40 {
    width: 40%;
  }

  fieldset .pc45 {
    width: 45%;
  }

  fieldset .pc50 {
    width: 50%;
  }

  fieldset .pc55 {
    width: 55%;
  }

  fieldset .pc60 {
    width: 60%;
  }

  fieldset .pc65 {
    width: 65%;
  }

  fieldset .pc70 {
    width: 70%;
  }

  fieldset .pc75 {
    width: 75%;
  }

  fieldset .pc80 {
    width: 80%;
  }

  fieldset .pc85 {
    width: 85%;
  }

  fieldset .pc90 {
    width: 90%;
  }

  fieldset .pc95 {
    width: 95%;
  }

  fieldset .pc100 {
    width: 100%;
  }

.CKFinderFrame {
  border: solid 2px #e3e3c7;
  background-color: #f1f1e3;
  padding: 2rem 0 0 0;
  margin: 0 auto;
}