/* hide the real form element by opacity: 0 and position: absolute - display: block and visibility: hidden do not work because then form elements cannot get the focus and actually get checked or unchecked */
.skinned-form-controls input[type="checkbox"],
.skinned-form-controls input[type="radio"]
{
	position: absolute;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	opacity: 0; 
	z-index: 999;
    cursor: pointer;
}

/* prevent the entire page from scrolling if there is overflow and checkbox or radio button are clicked */
.skinned-form-controls span
{
	position: relative;
	margin-right: 2em;
}

.skinned-form-controls input[type="radio"] + span::before,
.skinned-form-controls input[type="checkbox"] + span::before
{
	content: "";
	display: inline-block;
	width: 33px;
	height: 24px;
	vertical-align: middle;
	background-repeat:  no-repeat;
}


.skinned-form-controls input[type="radio"], .skinned-form-controls input[type="checkbox"]{
  width: 24px;
  height: 24px;
}
.skinned-form-controls input[type="radio"] + span::before
{
    background: url(/images/radio.png) no-repeat;
}

.skinned-form-controls input[type="radio"]:checked + span::before
{
	background: url(/images/radio-selected.png) no-repeat;
}
.skinned-form-controls input[type="checkbox"] + span::before
{
    background: url(/images/checkbox.png) no-repeat;
}

.skinned-form-controls input[type="checkbox"]:checked + span::before
{
    background: url(/images/checkbox_checked.png) no-repeat;
}

/* disabled form elements */
.skinned-form-controls input[type="radio"]:disabled + span,
.skinned-form-controls input[type="checkbox"]:disabled + span,
.skinned-form-controls input[type="radio"]:disabled + span::before,
.skinned-form-controls input[type="checkbox"]:disabled + span::before
{
	-moz-opacity: .4;
	-webkit-opacity: .4;
	opacity: .4;
}

/* focused and active form elements */
.skinned-form-controls input[type="checkbox"]:focus + span::before,
.skinned-form-controls input[type="radio"]:focus + span::before,
.skinned-form-controls input[type="checkbox"]:active + span::before,
.skinned-form-controls input[type="radio"]:active + span::before
{
	outline: dotted 1px #ccc;
}
/* skin-specific sprite */
.skinned-form-controls.skinned-form-controls-mac input[type="checkbox"] + span::before,
.skinned-form-controls.skinned-form-controls-mac input[type="radio"] + span::before
{
	background-repeat: no-repeat;
}