/* 
	Hide the original radios and checkboxes
	(but still accessible)
    
	:not(#foo) > is a rule filter to block browsers
	             that don't support that selector from
	             applying rules they shouldn't
	   
*/

li.graphical_1{
	list-style-type: none;
}

li.graphical_1:not(#foo) > fieldset > input[type='radio'], 
li.graphical_1:not(#foo) > fieldset > input[type='checkbox'] {
	
	/* Hide the input, but have it still be clickable */
	opacity: 0;
	
	float: left;
	width: 18px;
}


li.graphical_1:not(#foo) > fieldset > input[type='radio'] + label,
li.graphical_1:not(#foo) > fieldset > input[type='checkbox'] + label {
	margin: 0;
	clear: none;
	
	/* Left padding makes room for image */
	padding: 0px 20px 2px 28px;

	/* Make look clickable because they are */
	cursor: pointer;
	
	background: url(/assets/images/btn-radio-off.png) left center no-repeat;	
}

/*
	Change from unchecked to checked graphic
*/
li.graphical_1:not(#foo) > fieldset > input[type='radio']:checked + label {
	background-image: url(/assets/images/btn-radio-on.png);
}
li.graphical_1:not(#foo) > fieldset > input[type='checkbox']:checked + label {
	background-image: url(/assets/images/check.png);
}








/* "Pill" type toggle */

li.graphical_2{
	list-style-type: none;
}

li.graphical_2:not(#foo) > input[type='radio']{
	
	/* Hide the input, but have it still be clickable */
	opacity: 0;
	
	float: left;
}


li.graphical_2:not(#foo) > input[type='radio'].radioActivate + label{
	clear: none;
	padding: 8px 20px 2px 18px;
	cursor: pointer;
	background: url(/assets/images/btn-active-off.png) left center no-repeat;	
}

li.graphical_2:not(#foo) > input[type='radio'].radioDeactivate + label{
	clear: none;
	padding: 8px 20px 2px 28px;
	cursor: pointer;
	background: url(/assets/images/btn-inactive-off.png) left center no-repeat;	
}


/*
	Change from unchecked to checked graphic
*/
li.graphical_2:not(#foo) > input[type='radio'].radioActivate:checked + label {
	background-image: url(/assets/images/btn-active-on.png);
}


li.graphical_2:not(#foo) > input[type='radio'].radioDeactivate:checked + label {
	background-image: url(/assets/images/btn-inactive-on.png);
}






li.graphical_3{
	list-style-type: none;
}

li.graphical_3:not(#foo) > input[type='radio']{
	
	/* Hide the input, but have it still be clickable */
	opacity: 0;
	
	float: left;
}


li.graphical_3:not(#foo) > input[type='radio'].radioActivate + label{
	clear: none;
	padding: 8px 20px 2px 18px;
    padding-top: 25px; /* update for use with base admin 3 */
	cursor: pointer;
	background: url(/assets/images/btn-toggleon-off.png) left center no-repeat;	
}

li.graphical_3:not(#foo) > input[type='radio'].radioDeactivate + label{
	clear: none;
	padding: 8px 20px 2px 28px;
    padding-top: 25px; /* update for use with base admin 3 */
	cursor: pointer;
	background: url(/assets/images/btn-toggleoff-off.png) left center no-repeat;
    margin-left: -4px; /* update for use with base admin 3 */
}


/*
	Change from unchecked to checked graphic
*/
li.graphical_3:not(#foo) > input[type='radio'].radioActivate:checked + label {
	background-image: url(/assets/images/btn-toggleon-on.png);
}


li.graphical_3:not(#foo) > input[type='radio'].radioDeactivate:checked + label {
	background-image: url(/assets/images/btn-toggleoff-on.png);
}
