<link href='https://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css' />	
<div class="wrap">
  				<ul class="js-errors"></ul>
  		<form action="#" id="form" method="post">
    				<h3>Checkbox Group</h3>
    				<ul>	
      <li>
        <input type="checkbox" name="checkbox[]" id="checkbox1">
        <label for="checkbox1">Mike</lable>
      </li>
      <li>
        <input type="checkbox" name="checkbox[]" id="checkbox2">
        <label for="checkbox2">November</lable>
      </li>
      <li>
        <input type="checkbox" name="checkbox[]" id="checkbox3">
        <label for="checkbox3">Oscar</lable>
      </li>
      <li>
        <input type="checkbox" name="checkbox[]" id="checkbox4">
        <label for="checkbox4">Papa</lable>
      </li>
      <li>
        <input type="checkbox" name="checkbox[]" id="checkbox5">
        <label for="checkbox5">Quebec</lable>
      </li>
      <li>
        <input type="checkbox" name="checkbox[]" id="checkbox6">
        <label for="checkbox6">Romeo</lable>
      </li>
    </ul>
				    <h3>Radio Group</h3>
    				<ul>
      	<li>
        				<input type="radio" name="radio" id="radio1">
				        <label for="radio1">Uniform</label>
      			</li>
      	<li>
        				<input type="radio" name="radio" id="radio2">
				        <label for="radio2">Victor</label>
      			</li>
      	<li>
        				<input type="radio" name="radio" id="radio3">
				        <label for="radio3">Whiskey</label>
      			</li>
      	<li>
        				<input type="radio" name="radio" id="radio4">
				        <label for="radio4">Xray</label>
      			</li>
      	<li>
        				<input type="radio" name="radio" id="radio5">
				        <label for="radio5">Yankee</label>
      			</li>
      	<li>
        				<input type="radio" name="radio" id="radio6">
				        <label for="radio6">Zulu</label>
      			</li>
    </ul>
    <input type="submit" name="Submit" value="Submit" />
  		</form>
	</div>

*, *:before, *:after {
  	-webkit-box-sizing:border-box;
	  -moz-box-sizing:border-box;
	  box-sizing:border-box;
}

input, select, input[type="checkbox"], input[type="radio"] {
    -webkit-border-radius:0;
    -webkit-appearance:none;
    outline:none;
}

body {
  background:#2a4a59;
  	font-family:'Dosis', Helvetica, Arial, sans-serif;
	  font-size:100%;
}

.wrap {
  border-radius:4px;
  background:lighten(#2a4a59, 70%);
  color:darken(#2a4a59,5%);
  font-size:1.2em;
	  margin:2em auto;
  	padding:2em;
  	max-width:720px;
  	@media screen and (max-width: 460px) {
      padding:0.5em;
  }
}

h3 {
  font-size:1.3em;
  margin-bottom:0;
}

li {
  margin-bottom:1.5em;
  padding-left:2.5em;
  	position:relative;
}

input[type="checkbox"],
input[type="radio"],
li label::before {
	  cursor:pointer;
	  height:40px;
	  left:0;
	  margin-top:-20px;
	  position:absolute;
	  width:40px;
	  top:50%;
}

input[type="checkbox"],
input[type="radio"] {
	  display:inline-block;
	  opacity:0;
	  vertical-align:middle;
}

li label::before {
	  border:2px solid lighten(#2a4a59,10%);
	  border-radius:4px;
	  color:darken(#48CFAD, 20%);
	  content:'';
	  font-size:1.5em;
	  padding:.1em 0 0 .2em;
}

li input.error + label::before {
	  border-color:#f93337;
}

li input[type="checkbox"]:checked + label::before {
  	border-color:darken(#48CFAD, 20%);
	  content:'\2714';
}

li input[type="radio"] + label::before {
	  border-radius:50%;
}

li input[type="radio"]:checked + label::before {
  	border-color:darken(#48CFAD, 20%);
  	content:'\25CF';
  	font-size:1.5em;
  	padding:0 0 0 .3em;
}

input[type="submit"] {
  background:#37BC9B;
  border:none;
  color:darken(#37BC9B, 30%);
  cursor:pointer;
  font-family:"AvenirNextLTW01-DemiCn", sans-serif;
  font-size:1.4em;
  padding:.5em;
	  width:100%;
  &:hover,
  &:focus {
    background:darken(#37BC9B, 5%);
  }
}

label {
  	display:block;
	  margin-bottom:0.2em;
  	width:100%;
}

ul {
  	margin-bottom:1em;
  padding-top:1em;
  	overflow:hidden;
}

li label {
	  display:inline-block;
	  vertical-align:top;
}

.js-errors {
    background:#f93337;
    border-radius:4px;
    color:#FFF;
    font-size:.8em;
    list-style-type:square;
    margin-bottom:1em;
    padding:1em;
}

.js-errors {
	  display:none;
}

.js-errors li {
	  margin-left:1em;
  margin-bottom:.5em;
  padding-left:0;
}

ul.error input[type="checkbox"] + label::before,
ul.error input[type="radio"] + label::before {
  	border-color:#F93337;
}

ul.error input[type="checkbox"] + label,
ul.error input[type="radio"] + label {
	  color:#F93337;
}

li {
	  float:left;
	  width:50%;
	  &:first-of-type {
		    margin-right:2%;
		    width:48%;
	  }
  	@media screen and (max-width:460px) {
		    width:100%;
		    &:first-of-type {
			    margin-right:0;
			    width:100%;
		    }
  	}
}

	$(document).ready(function() {
      $("#form").validate({
        rules: {
          "checkbox[]": {
            required: true,
            minlength: 1
          },
          radio: "required",
        },

        // FIX
        // Using highlight and unhighlight options we can add the error class to the parent ul which can then be selected and styled
        			highlight: function(element, errorClass, validClass) {
        				  $(element).addClass(errorClass).removeClass(validClass);
          // Keeps the default behaviour, adding error class to element but seems to break the default radio group behaviour but the below fixes that
        				  $(element).closest('ul').addClass(errorClass);
          // add error class to ul element for checkbox groups and radio inputs
        			},
        			unhighlight: function(element, errorClass, validClass) {
          				$(element).removeClass(errorClass).addClass(validClass);
          // keeps the default behaviour removing error class from elements
          				$(element).closest('ul').removeClass(errorClass);
          // remove error class from ul element for checkbox groups and radio inputs
			        },
        // FIX END
 
        errorLabelContainer: ".js-errors",
        errorElement: "li",

        messages: {
          "checkbox[]": "Please select at least one checkbox",
          radio: "Please choose from the Radio Group",
        },
      });
	});