/* FORMS, CHECKBOX, FORMHANDLER */

button,
input,
select,
textarea {
  border: 1px solid #cdcacc;  
  }
input[type=radio],
input[type=checkbox] {
  border: none;
  }

input, select, textarea {
  color: #888;
  padding: 4px;
  margin-bottom: 4px;
  }
input:focus, select:focus, textarea:focus {
  color: #000;
  }

button,
input[type=submit] {
  text-transform: uppercase;
  padding: 0.5em 2em;
  }
button:hover, 
button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  color: inherit; 
  }


/* formhandler */

/* styled-checkbox set by js! */
.styled-checkbox {
  position: relative;
  margin-left: 150px;
  }
 .styled-checkbox label {
   display: inline-block;
   padding-left: 30px;
   }
 .styled-checkbox input {
   position: fixed;
   left: -3em;
   top: 0;
   }
 .styled-checkbox label:before {
   content: ' ';
   font-size: 2em;
   font-weight: bold;
   color: #0E72B5;
   float: left;
   margin-left: -30px;
   position: absolute;
   line-height: 15px;
   width: 15px;
   height: 15px;
   border: 1px solid #C6CBD0;      
   }
 .styled-checkbox label.checked:before {
   content: '\2713';
   }
 .styled-checkbox .form-errorfield ~ label {
   color: #CC0529;
   font-weight: bold;
  }
 .styled-checkbox .form-errorfield ~ label:before {
   border-color: #CC0529;
   background: #ffe0e3;
  }
 .styled-checkbox input:focus ~ label:before,
 .styled-checkbox input:focus ~ label.form-errorfield:before {
   outline: 1px dotted;
   }


/* formhandler */
.form {}
  .form-errors {
    font-size: 1.1em;
    font-weight: bold;
    list-style: none;
    background: #CC0529;
    color: #fff !important;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    }    
  .form .error {
    display: block;
    color: #CC0529;
    font-weight: bold;
    }
   

.form-submit {
  margin: 1em 0 2em 160px;
  }   

.form-fields {
  display: table;
  border-spacing: 0;
  width: 100%;
  margin: 1.5em 0 2em;
  }
  .form-field > * {
    display: inline-block;
    padding-bottom: 1em;
    }
  
  .form-fields > .form-field {
    display: table-row;
    }
    .form-fields .form-field > * {
      display: table-cell;
      vertical-align: top;
      }
    .form-fields .form-field > *:first-child {
      width: 160px;
      padding-right: 20px;
      }
  
    label.form-errorfield {
      color: #CC0529;
      font-weight: bold;
      }
    input.form-errorfield,
    textarea.form-errorfield {
      border-color: #CC0529;
      background: #fcfcfc;
      }
    input.form-errorfield:focus,
    textarea.form-errorfield:focus {
      border-color: #444;
      background: #fff;
      }

      .form-fullfield input,
      .form-fullfield textarea {
        width: 100%;
        }
      .form-fullfield textarea {
        min-height: 10em;
        }
      .form-fullname > input {
        float: left;
        width: 49%;        
        }
      .form-fullname > input + input {
        float: right;
        }
      .form-streetno > input {
        float: left;
        width: 78%;
        }
      .form-streetno > input + input {
        float: right;
        width: 20%;        
        }
      .form-zipcity > input {
        float: left;
        width: 20%;
        }
      .form-zipcity > input + input {
        float: right;
        width: 78%;        
        }
      .form-limittext > input {
        max-width: 35em;
        }
        
    .form input[type=checkbox] {
      margin-right: 0.5em;
      }
    .js .form-trigger-target {
      display: none;
      }
    .js .form-trigger-target-visible {
      display: block;
      }

@media all and (max-width: 600px) {
  .form-fields > .form-field,
  .form-fields .form-field > * {
    display: block;
    padding-bottom: 0;
    }
  .styled-checkbox,
  .form-submit {
    margin-left: 0;
    }   
}