input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    position: relative;
    background: url(../img/comune/checkbox.png) no-repeat;
    background-position: 0 2px;
    height: 20px;
    width: auto;
    display: block;
    cursor: pointer;
    padding-left:25px;
    padding-top:2px;
    font-size: 0.9em;
    color:#fff;
    font-weight:normal;
}
/* Provide a border when hovered and when the checkbox before it is checked */

input[type=checkbox] + label:hover {
    background-position: 0 -22px;
}

input[type=checkbox]:checked + label {
    background-position: 0 -44px;
}
/*
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/

input[type=checkbox]:checked + label:after {
    margin: auto;
    line-height: 1;
    text-align: center;
}