body {
  font-family: "helvetica";
}

.checkbox.custom {
  float: left;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

input[type="checkbox"].custom {
  margin-left: 0;
  padding: 0;
}

input[type=checkbox].css-checkbox {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0px;
  border: 0;
}

input[type=checkbox].css-checkbox+label.css-label,
input[type=checkbox].css-checkbox+label.css-label-red,
input[type=checkbox].css-checkbox+label.css-label-yellow,
input[type=checkbox].css-checkbox+label.css-label-blue,
input[type=checkbox].css-checkbox+label.css-label-purple {
  padding-left: 22px;
  height: 25px;
  width: 25px;
  display: inline-block;
  line-height: 15px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 13px;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
}

input[type=checkbox].css-checkbox+label.css-label:hover,
input[type=checkbox].css-checkbox+label.css-label-red:hover,
input[type=checkbox].css-checkbox+label.css-label-yellow:hover,
input[type=checkbox].css-checkbox+label.css-label-blue:hover,
input[type=checkbox].css-checkbox+label.css-label-purple:hover {
  opacity: 0.5;
}

input[type=checkbox].css-checkbox:checked+label.css-label,
input[type=checkbox].css-checkbox:checked+label.css-label-red,
input[type=checkbox].css-checkbox:checked+label.css-label-yellow,
input[type=checkbox].css-checkbox:checked+label.css-label-blue,
input[type=checkbox].css-checkbox:checked+label.css-label-purple {
  background-position: 0 -26px;
}

.css-label {
  background-image: url(../img/rsz_1rsz_check1.png);
}

.css-label-red {
  background-image: url(http://codeopus.net/file/blog/check2.png);
}

.css-label-yellow {
  background-image: url(http://codeopus.net/file/blog/check3.png);
}

.css-label-blue {
  background-image: url(http://codeopus.net/file/blog/check4.png);
}

.css-label-purple {
  background-image: url(http://codeopus.net/file/blog/check5.png);
}