.autocomplete {
	position: absolute;
	min-width: 10em;
	max-width: 20em;
	border: 1px solid gray;
	background-color: white;
	padding: 1px;
	cursor: default;
}

.autocomplete .option {
	white-space: nowrap;
	overflow: hidden;

	line-height: 1.2em;
	vertical-align: middle;
	padding: 2px;

	cursor: pointer;
}

/* This is the colour that the "selected" option will be (the one selected by up/down arrow keys) */
div.autocomplete .option.selected {
	background-color: #aa7f7f;
}

/* This is the colour that the "hovered" option will be (the one selected by the mouse).
   This WAS a slightly paler version of the "selected" background colour, but ...
   Oh man, time for a rant:
   Note that the "selected" option (see above) and the "hovered" option are different --
   we're getting CSS to do as much work as possible to keep the code clean.
   IJ is upset (to the tune of an URGENT JOB) that somebody who mouses over an option,
   and then hits ENTER, will generally not select the option they expected.
   To re-cap: somebody types part of a word, then moves their right hand to the mouse,
   moves the mouse down the list, then -- rather than clicking the left mouse button --
   moves their right hand back to the keyboard and presses enter, expecting that the highlighted
   option is going to be inserted.
   I agree that in these circumstances, the code definitely does the wrong thing ... but what
   BLOODY MANIAC is moving their hand back and forth like that!  I THINK WE ALL KNOW THAT THERE'S
   ONLY ONE PERSON IN THE WORLD WHO MOVES THEIR HAND BACK AND FORTH THAT MUCH WHILE USING HEURIST.

   So, that's why we make the background-color of the hovered option WHITE.  This way it appears
   that there is no selected option unless the user clicks.
 */

.autocomplete div.option:hover {
	/* background-color: #d4bfbf;    see also div.autocomplete:hover div.option.selected:hover */
	background-color: inherit;
}

/* very confusing if the selected option (keyboard input) and the hovered option (mouse input)
 * are showing at the same time ... hide the keyboard selection if the mouse is in motion
 */
div.autocomplete:hover .option.selected {
	background-color: white;
}
div.autocomplete:hover div.option.selected:hover {
	/* background-color: #d4bfbf;    see also .autocomplete div.option:hover */
	background-color: inherit;
}


span.invisibleTextbox {
	/* autocomplete magic stuff ... do not change */
	position: absolute;
	visibility: hidden;
	padding-left: 4px;
	font-size: 11px;
	font-size-adjust: none;
}


div.confirmImg {
	position: absolute;
	cursor: default;
	width: 136px;
	height: 29px;

	background-image: url(../img/confirm-change.png);
}

div.confirmImg div.option {
	position: absolute;
	width: 97px;
	height: 10px;
	opacity: 0.3;
	left: 3px;
	cursor: pointer;
}
div.confirmImg div.option:hover {
	border: 1px dotted black;
}