input[type='checkbox'],
input[type='radio'] {
    visibility: hidden;
}


/* */
span.cb {
	display: inline-block;
	width: 24px;
	height: 25px;
	line-height: 25px;
	white-space: nowrap;
	background: transparent url(../images/bg-checkbox-fs8.png) 0 0 no-repeat;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
}

span.cb-active {
	background-position: -24px 0 !important;
}

span.cb-checked {
	background-position: -48px 0 !important;
}

span.cb-checked.cb-active {
	background-position: -72px 0 !important;
}

span.cb-disabled {
    background-position: -96px 0 !important;
}

span.cb-checked.cb-disabled {
    background-position: -120px 0 !important;
}


span.r {
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	white-space: nowrap;
	background: transparent url(../images/bg-radio-fs8.png) 0 0 no-repeat;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
}

span.r-active {
	background-position: -24px 0 !important;
}

span.r-checked {
	background-position: -48px 0 !important;
}

span.r-checked.r-active {
	background-position: -72px 0 !important;
}

span.r-disabled {
    background-position: -96px 0 !important;
}

span.r-checked.r-disabled {
    background-position: -120px 0 !important;
}

span.cb-wrap,
span.r-wrap 
{
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
    font-size: 0;
    line-height: inherit;
}

span.cb-wrap {
    height: 25px;
}

span.cb-wrap > input,
span.r-wrap > input 
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    outline: none;
    cursor: pointer;
    visibility: visible;
}

span.cb-wrap > span,
span.r-wrap > span 
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;    
}