/* widget divs */
div.widget {
  margin-bottom: 2.5em; 
}
div.widget p,
div.widget label {
  margin-bottom: 0.2em;
  font-size: 2.5em;
}
/* form fields basics */
input[type=text], select, textarea {
  width: 100%;
  background-color: #FFFFFF;
  color: #585147;
  font-size: 4em;
  font-weight: bold;
}
/* form fields readonly: make it gray */
input[readonly], select[readonly], textarea[readonly] {
  background-color: #CCC;
  color: #222;
}
/* error styles: red border and red message */
div.error input,
div.error select,
div.error textarea {
  border: 1px solid red;
}
div.widget p.error {
  color: #FF0000;
}

/* checkbox widgets has a different layout ... */
/* hide real checkbox */
input[type="checkbox"] {
  width: 0;
  height: 0;
  display: none;
  opacity: 0;
}

/* do we neet this? */
/*div.checkbox { position:relative; }*/

div.checkbox label {/* p */
  display: block;
}
/* define group of checkbox and label */
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  position: relative;
  /* required space for pseudo element */
  padding-left: 90px;
  cursor: pointer;
}
/* readonly checkbox uses div instead of pseudo element */
div.checkbox div.check + label {
  position: relative;
  padding-left: 90px;
}
/* define pseudo element before label (both state) */
/* TODO: problem: margin padding and position not to control independent between rectangle and character */
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before,
div.checkbox div.check {
  position: absolute;
  left: 0px;
  top: 10px;  
  width: 70px;
  height: 70px;
  font-size: 60px;
  text-align: center;
  color: #585147;
  background-color: #FFF;
  border-style: solid;
  border-width: 2px;
  border-color: #75736E #F2F0EE #F2F0EE #75736E;
}
/* checkbox readonly */
div.checkbox div.check {
  position: relative;
  float: left;
  background-color: #CCC;
  color: #222;
}
/* pseudo element style for checked */
input[type="checkbox"]:checked + label:before {
  content: "\2714";/* \f00c X */
}
/* pseudo element style for not checked */
input[type="checkbox"]:not(:checked) + label:before {
  content:"";
}



/* same style as div which acts as button */
input[type=submit] {
  color: #FFFFFF;
  background-color: #3B3B3B;
  font-size: 3.2em;
  text-align: center;
  margin: 0.5em;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 0px;
  padding-bottom: 3px;
  border: 0px;
}
input[type=submit]:active {
	background-color: #FC561C;
	box-shadow: 5px 5px 5px #F5AB30,
               -5px 5px 5px #F5AB30,
                5px -5px 5px #F5AB30,
               -5px -5px 5px #F5AB30;
}