#editableList .jspVerticalBar {
	width: 30px;
	background-color: transparent;
}

#editableList .jspHorizontalBar {
	display: none;
}

#editableList .jspArrowUp {
	background: transparent url("../images/arrow_up.png") no-repeat center center;
}

#editableList .jspArrowDown {
	background: transparent url("../images/arrow_down.png") no-repeat center center;
}

#editableList .jspDrag {
	width: 17px;
	margin: 0 auto;
	background: transparent url("../images/slider.png") no-repeat center center;
	box-shadow: 0 0px 5px #CCC;
	-webkit-box-shadow: 0 0px 5px #CCC;
    -moz-box-shadow: 0 0px 5px #CCC;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#editableList .jspTrack {
	background: transparent url("../images/scrollTrack.png") repeat-y center center;
}

#editableList .offset {
	margin-right: 34px;
}

/*
 * Setting max width prevents a bug with longer entries. The value depends on the current group management popup dimensions.
 */
#editableList .elItem {
	position: relative;
	max-width: 220px;
	padding: 4px 0px;
	border-top: 1px solid black;
	overflow: hidden; 
 	text-overflow: ellipsis; 
}

#editableList .elItem:last-child {
	border-bottom: 1px solid black;
}

#editableList .elRemove {
	position: absolute;
	right: 2px;
	bottom: 4px;
	width: 12px;
	height: 12px;
	background-image: url("../images/btnDelete.png");
}

#editableList .elRemove:hover {
	background-image: url("../images/btnDelete_over.png");
}

#editableList .elRemove:active {
	background-image: url("../images/btnDelete_pressed.png");
}

#editableList #elInput {
	position: relative;
	padding-right: 50px;
	box-sizing: border-box;
}

#editableList #elTextInput {
	width: 220px;
	height: 18px;
	border: 1px dotted black;
	font: 11px Verdana;
	background: none;
}

#editableList #elEnter {
	position: absolute;
	top: 3px;
	right: 1px;
}