/* 
 * 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.
 * 
 */
 
span.ui-checkbox,
span.ui-radio {
	display: inline-block;
	/*float: left;*/
	width: 16px;
	height: 16px;
	background: url(../images/checkbox.png) 0 0px no-repeat;
	margin-right:2px;
	position:relative;
	top:1px;
}
span.ui-helper-hidden {
	display: none;
}
span.ui-radio{
	background-position: 0 0px;
}
span.ui-radio-state-hover{
	background-position: 0 -16px;
}
span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
	background-position: 0 -32px;
}
span.ui-radio-state-checked-hover {
	background-position: 0 -48px;
}

span.ui-checkbox{
	background-position: -16px 0px;
}
span.ui-checkbox-state-hover{
	background-position: -16px -16px;
}
span.ui-checkbox-state-checked-disabled-hover,
span.ui-checkbox-state-checked-disabled,
span.ui-checkbox-state-checked {
	background-position: -16px -32px;
}
span.ui-checkbox-state-checked-hover {
	background-position: -16px -48px;
}


/* Selectmenu
----------------------------------*/
.ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
.ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; display: none; overflow: auto; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-open { display: block; }
.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu-dropdown { }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 1em; outline:none; text-decoration:none; }
.ui-selectmenu-menu li.ui-state-disabled a { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-open li.ui-selectmenu-item-focus a { }
.ui-selectmenu-open li.ui-selectmenu-item-selected { }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-content { }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
/* IE6 workaround (dotted transparent borders) */
* html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
* html .ui-selectmenu-menu li a { position: relative }