/** Element styles throughout the view */
.ComboBox {
	width:100%;
}
.ComboBox p {
	position:relative;
	margin:0; padding:0;
}
.ComboBox p input {
	position:relative;
	width:100%;
	z-index: 5;
}
.ComboBox p em {
	position:absolute;
	z-index:6;
	display:block;
	right:-5px; top:3px;
	width:16px; height:16px;
	overflow:hidden;
	background-image:
		url('/template/widgets/ui/images/ui-icons_444444_256x240.png');
	background-position:-128px 0;
	background-repeat: 0;
	cursor:pointer;
}
.ComboBox div {
	clear:left;
	position:relative;
	width:100%;
}
.ComboBox ul {
	margin:0;
	padding:0;
}
.ComboBox li {
	margin:0 0 2px 0;
	padding:2px 6px;
	list-style:none;
}

/** Styles for the .available elements */
.ComboBox .available {
	position:absolute;
	top:0; left:5px; right:0;
	z-index:15;
	margin:0 0 3px;
	background-color:#F9F9F9;
	border:1px solid #999999;
	border-top:none;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
}

.ComboBox .available li,
.ComboBox .available li label {
	font-weight:normal;
	color:#000;
	cursor:pointer;
	position:relative;
	z-index:15;
	margin:0;
	padding:2px 4px;
}
.ComboBox .available li.selected {
	background-color:#CCFFFF;
}
.ComboBox .available li.accepted,
.ComboBox .available li.accepted label {
	/** Item is already accepted. Render as "disabled". **/
	color:#999999 !important;
	cursor:text !important;
}

/** Styles for the .current elements */
.ComboBox .current li {
	position:relative;
	z-index:5;
	overflow-y:auto; /* Useful if height is fixed. */
	width: 95%;
}
.ComboBox .current li {
	float:left;
	border:1px solid #999999;
	padding:0 4px; margin:1px;
	background-color:#F0F0F0;
}

.ComboBox .current li label {
	font-weight:normal;
	color:#000;
}

.ComboBox .current .remove {
	cursor:pointer;
	float:left;
	display:block;
	margin-right:4px;
	color:#0000CC;
	text-decoration:none;
}

.ComboBox .id {
	display:none;
}