/*
	Custom Crossbrowser Styling for Checkboxes and Radio Buttons
	------------------------------------------------------------
	created by Martin Ivanov
	http://wemakesites.net
	http://acidjs.wemakesites.net
	http://acidmartin.wordpress.com

	Supported Browsers:
	- Mozilla FireFox
	- Google Chrome
	- Apple Safari
	- Opera
	- Internet Explorer 9

	- Older browsers degrade gracefully displaying browsers' default checkboxes and rad buttons
*/

/* 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;
}

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

/* fallback for IE6, IE7 and IE8 */
.skinned-form-controls input[type="checkbox"],
.skinned-form-controls input[type="radio"]
{
	position: static\9;
}

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

.skinned-form-controls input[type="checkbox"]:checked + span::before
{
	background-position: 0 -20px;
}

.skinned-form-controls input[type="radio"] + span::before
{
	background-position: -20px 0;
}

.skinned-form-controls input[type="radio"]:checked + span::before
{
	background-position: -20px -20px;
}

/* 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-image: url("sprite_check_radio.png");
}