/* styles specific to bridcoform page */
#bridcoform { width: 70%; margin: 0 0 0 200px; }
#bridcoform hgroup { margin-bottom: 20px; }
#bridcoform div { width: 100%; margin-bottom: 15px; float: left; border-bottom: 1px gray dotted;}
#bridcoform span#range { float: left; width: 100%; color: red; clear: both; text-align: center; }
#howYouRateThis,#yearOfCrime { text-align: right; }
#bridcoform legend { font-style: italic; color: #434242; font-size: 0.8em; margin-bottom: 20px; float: left; width: 100%; }
#bridcoform fieldset {  margin-bottom: 20px;  }
#bridcoform label { font-family: Arial; width: 40%; float: left; color: #2b1a14; text-align: left; margin: 0 5% 0 0%; font-size: 1.2em; line-height: 1.6em; background-color: transparent; }
input { height: 20px; font-size: 1em; width: 40%; float: right; }
#bridcoform textarea { height: 60px; font-size: 1em; width: 40%; float: right; }
#bridcoform input#submit { text-decoration: none; height: 34px; font: normal normal 1.25em/1.5em Arial; background-color: #b01c20; border-radius: 8px; color: white; float: right; margin-bottom: 10px; background: linear-gradient(top, rgb(241,92,96) 0%, rgb(176,28,32) 100%); margin-top: 10px; box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf; }
.polyfill-important .input-range,.polyfill-important .step-controls { float: right; }
input:not([type="range"]), textarea, select { border: 1px solid #bfbfbf; padding: 0.2em; font-size: 1.1em; line-height: 1.2em; background: #ffffff; background: linear-gradient(top, #ffffff 0%,#ededed 8%,#ffffff 100%); border-radius: 4px; appearance: none; box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.1); }
/* styles for adding cross or tick to input form fields */
input:required { border: 1px solid rgba(253, 8, 8, 0.29); }
input:focus:invalid { background: url('images/cross.png') no-repeat right; padding-right: 3px; }
input:focus:valid { background: url('images/tick.png') no-repeat right; padding-right: 3px; }

/* Webkit (Chrome and Safari) make no allowance for polyfilled elements so we need to make them align left */

.-webkit- input#howYouRateThis:focus:invalid,.-webkit- input#yearOfCrime:focus:invalid { background: url('images/cross.png') no-repeat left; padding-right: 3px; }
.-webkit- input#howYouRateThis:focus:valid,.-webkit- input#yearOfCrime:focus:valid { background: url('images/tick.png') no-repeat left; padding-right: 3px; }