/* CSS for customized radio buttons and check boxes */
/* page styles */

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

    .custom-radio label
    {
        display: block;
        position: relative;
        z-index: 1;
        line-height: 1.2;
        padding: 0px 0px 5px 20px;
        margin: 0;
        cursor: pointer;
    }
    .custom-checkbox label
    {
        display: block;
        position: relative;
        z-index: 1;
        line-height: 1.2;
        padding: 0px 0px 0px 20px;
        margin: 0;
        cursor: pointer;
    }
    /* states */
    .custom-checkbox label
    {
        background: url(../images/checkbox.png) no-repeat;
    }

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

    .custom-checkbox label, .custom-radio label
    {
        background-position: left 1px;
    }

        .custom-checkbox label.hover,
        .custom-checkbox label.focus,
        .custom-radio label.hover,
        .custom-radio label.focus
        {
            background-position: left 1px;
        }

        .custom-checkbox label.checked,
        .custom-radio label.checked
        {
            background-position: left -65px;
        }

        .custom-checkbox label.checkedHover,
        .custom-checkbox label.checkedFocus
        {
            /*background-position: right -26px;*/
        }

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