/* wrapper divs */
.custom-checkbox, .custom-radio
{
    position: relative;
}

/* input, label positioning */
.custom-checkbox input, .custom-radio input
{
    position: absolute;
    left: 2px;
    top: 3px;
    margin: 0;
    z-index: 0;
}

.custom-checkbox label, .custom-radio label
{
    display: block;
    position: relative;
    z-index: 1;
    font-size: 1.3em;
    padding-right: 1em;
    line-height: 1;
    padding: .5em 0 .5em 30px;
    margin: 0 0 .3em;
    cursor: pointer;
}


.custom-checkbox label
{
    background: url(images/rokinputs.png) no-repeat;
}

.custom-radio label
{
    background: url(images/rokinputs.png) no-repeat;
}

.custom-checkbox label
{
    background-position: 2px -894px;
}

.custom-radio label
{
    background-position: 2px 2px;
}

.custom-checkbox label.hover, .custom-checkbox label.focus
{
    background-position: 2px -894px;
}

.custom-radio label.hover, .custom-radio label.focus
{
    background-position: 2px 2px;
}


.custom-checkbox label.checked
{
    background-position: 2px -1121px;
}

.custom-radio label.checked
{
    background-position: 2px -226px;
}

.custom-checkbox label.checkedHover
{
    background-position: 2px -1121px;
}

.custom-checkbox label.checkedFocus
{
    background-position: 2px -226px;
}

.custom-checkbox label.focus, .custom-radio label.focus
{
    outline: 1px dotted #ccc;
}