ul.checkboxes {
   margin: 0;
   padding: 0;
   margin-left: 2em;
   list-style: none;
}

ul.checkboxes li {
   padding: 0.25em;
}

[role='checkbox'] {
   margin: 0;
   padding: 0.25em;
   padding-left: 0.5em;
   border: 2px transparent solid;
   width: 12em;
}
ul.checkboxes label {
   margin: 0;
   padding: 0.25em;
   border: 2px transparent solid;
   width: 12em;
}


[role='checkbox'][aria-checked='false']:before{
   content: url('../images/checkbox-unchecked.png');
   position: relative;
   top: 2px;
   left: -0.25em;
}

[role='checkbox'][aria-checked='true']:before{
   content: url('../images/checkbox-checked.png');
   position: relative;
   top: 2px;
   left: -0.25em;
}

[role='checkbox'][aria-checked='mixed']:before{
   content: url('../images/checkbox-mixed.png');
   position: relative;
   top: 2px;
   left: -0.25em;
}

ul.checkboxes label:hover,
[role='checkbox']:hover {
   background-color: #DDDDDD;
}

ul.checkboxes label.focus,
[role='checkbox'].focus {
   border-color: black;
   background-color: #EEEEEE;
}