﻿span.user-selector
{
	position: relative;
	overflow: hidden;
}

span.user-selector > input
{
	padding: 0;
	margin: 0;
	height: 31px;
	width: 31px;
	float: left;
	position: absolute;
	left: 0;
	opacity: 0;
}

span.user-selector > label 
{ 
	float: left; 
	line-height: 31px; 
	padding: 0 0 0 35px;
	-moz-transition: color 1s ease; 
	-o-transition: color 1s ease; 
	-webkit-transition: color 1s ease; 
	transition: color 1s ease; 
}

span.user-selector:not(#foo) > input + label
{
	background: url(/images/radio-on-off.jpg) 0 -1px no-repeat;
	height: 31px;
}

span.user-selector:not(#foo) > input[type=radio] + label 
{ 
    background-position: 0px 0px; 
}

/* Checked radio styles */
span.user-selector:not(#foo) > input[type=radio]:checked + label 
{ 
    background-position: 0px -31px; 
}

span.user-selector:not(#foo) > input[type=radio]:hover:checked + label,
span.user-selector:not(#foo) > input[type=radio]:focus:checked + label,
span.user-selector:not(#foo) > input[type=radio]:checked + label:hover,
span.user-selector:not(#foo) > input[type=radio]:focus:checked + label
{ 
    background-position: 0px -31px; 
}
