/* 
* The state classes are a little bit complex, because of the doubble class bug in IE6
* The state class looks like this:
* 
* .ui-radio-state[-checked][-disabled][-hover] or .ui-checkbox-state[-checked][-disabled][-hover]
* 
* Examples:
* 
* .ui-radio-state-checked (simply checked) 
* .ui-radio-state-checked-hover (checked and hovered/focused)
* .ui-radio-state-hover (unchecked and hovered/focused)
* 
* If you donīt have to deal with the doubble class bug of IE6 you can also use the simple ui-checkbox-checked, ui-checkbox-disabled, ui-checkbox-hover state-classnames (or: ui-radio-checked...)
* and the ui-radio/ui-checkbox role-classnames.
* 
*/

.ui-radio-state-disabled,
.ui-radio-state-checked-disabled,
.ui-radio-state-disabled-hover,
.ui-radio-state-checked-disabled-hover {
	color: #999;
}
span.ui-checkbox,
span.ui-radio {
	display: block;
	float:left; 
	width: 12px;
	height: 12px;
	background: #F3F5EA url(../images/icon-checkbox.png) 0 -40px no-repeat;
	cursor:pointer;
	border-color:#777777;
	margin-bottom:3px;
	font-size: 0px;
}

span.ui-radio { background-color:transparent; background-position: 0 -115px !important; }

span.ui-helper-hidden {
	display: none;
}

span.ui-checkbox-state-hover {
	background-position: 0 -40px !important;
}

span.ui-radio-state-hover {
	background-position: 0 -115px !important;
}


span.ui-checkbox-state-checked {
	background-position: 0 0px !important;
}

span.ui-checkbox-state-checked-hover {
	background-position: 0 -74px !important;
}
span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
	background-position: 0 -158px !important;
}


span.ui-radio-state-checked-hover {
	background-position: 0 -198px !important;
}

label.ui-checkbox, label.ui-radio { padding:0 5px; margin:0; display:block; float:left; cursor:pointer; line-height:14px; }
.ui-opacity-zero { opacity: 0; filter:Alpha(Opacity=0); }