/*
	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-radio-button input[type="radio"]
{
	cursor:pointer;
	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-radio-button label
{
	position: relative;
}

/* fallback for IE6, IE7 and IE8 */
.skinned-radio-button input[type="radio"]
{
	position: static\9;
}

.skinned-radio-button input[type="radio"] + span::before
{
	cursor:pointer;
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-left:-10px;
	margin-top:-10px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-image: url('../assets/radio_button.png');
}

.skinned-radio-button input[type="radio"] + span::before
{
	background-position: 0px 0px;
}

.skinned-radio-button input[type="radio"]:checked + span::before
{
	background-position: -32px 0px;
}

.skinned-radio-button input[type="radio"]:hover + span::before
{
	background-position: -32px 0px;
}

/* disabled form elements */
.skinned-radio-button input[type="radio"]:disabled + span,
.skinned-radio-button input[type="radio"]:disabled + span::before
{
	-moz-opacity: .6;
	-webkit-opacity: .6;
	opacity: .6;
	background-position: 0px 0px;
	cursor:auto;
}

/* focused and active form elements */
.skinned-radio-button input[type="radio"]:focus + span::before,
.skinned-radio-button input[type="radio"]:active + span::before
{
	outline: dotted 1px #ccc;
}

