/** font **/
.arial						{ font-family:arial; }

.size10					{ font-size:10px; }
.size11					{ font-size:11px; }
.size12					{ font-size:12px; }
.size14					{ font-size:14px; }
.size16					{ font-size:16px; }
.size18					{ font-size:18px; }
.size24					{ font-size:24px; }
.size40					{ font-size:40px; }

.red						{ color:#f63941; }
.blue						{ color:#569ffd; }
.cyan						{ color:#00b2c0; }
.orange					{ color:#FF7700; }
.green					{ color:#7d9500; }
.black					{ color:#333; }
.white					{ color:#FFFFFF; }
.gray						{ color:#888; }

.normal					{ font-weight:normal; }
.bold						{ font-weight:bold; }

.u_line					{ text-decoration:underline; }
.th_line					{ text-decoration:line-through; }

.clb						{ clear:both; }

.gap_s					{ letter-spacing:-1px; }
.gap_normal			{ letter-spacing:normal; }

.var						{ color:#ddd;font-size:11px; }


/************************************************* checkbox, radio button ************************************************/
/* 
 * 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)
 * 
 */
.ui-helper-hidden-accessible {
	position: absolute;
	left: -999em;
}

.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 {
	display: inline-block;
	width: 12px;
	height:14px;
	margin-right:3px;
	background: url('/images/icon_checkbox.png') 0 -40px no-repeat;
	vertical-align:middle;
}

span.ui-radio {
	display: inline-block;
	width: 20px;
	height: 20px;
	width: 12px;
	height:14px;
	margin-right:3px;
	background: url('/images/icon_checkbox.png') 0 -200px no-repeat;
	vertical-align:middle;
}

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

span.ui-checkbox-state-hover {
	background-position: 0 -120px;
}

span.ui-radio-state-hover {
	background-position: 0 -240px;
}

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

span.ui-checkbox-state-checked-hover {
	background-position: 0 -80px;
}
span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
	background-position: 0 -160px;
}

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