/**
 * jQuery UI styles for the postcode suggestions list.
 *
 * Replaces the full smoothness theme the plugin used to load from Google's CDN.
 * Only the rules the autocomplete menu actually uses are here, taken from
 * jQuery UI 1.14.1 (core.css, menu.css, autocomplete.css and the smoothness
 * theme), with the theme's gradient images flattened to the fallback colours
 * they already declared, so no image files are needed. The one deliberate
 * departure from the theme is the highlight colour for the item the arrow keys
 * are on, see the comment further down.
 *
 * Everything is scoped to .ppc-ui-autocomplete, the class the plugin adds to
 * its own menu, so nothing else on the page is affected. The exception is
 * .ui-helper-hidden-accessible: jQuery UI appends its own live region to the
 * body, outside the menu, and without that rule its status messages render as
 * visible text.
 */

.ui-helper-hidden-accessible {
	border: 0;
	clip: rect( 0 0 0 0 );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	opacity: 0;
}

.ppc-ui-autocomplete {
	/* .ui-autocomplete */
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	/* .ui-front */
	z-index: 100;
	/* .ui-menu */
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
	/* .ui-widget */
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	/* .ui-widget-content */
	border: 1px solid #aaaaaa;
	background: #ffffff;
	color: #222222;
}

.ppc-ui-autocomplete.ui-corner-all {
	border-radius: 4px;
}

.ppc-ui-autocomplete .ui-menu-item {
	margin: 0;
	cursor: pointer;
}

/* The plugin renders its own div inside each item instead of the wrapper
   jQuery UI would add, so both selectors are needed for the padding. */
.ppc-ui-autocomplete .ui-menu-item-wrapper,
.ppc-ui-autocomplete .ui-menu-item > div {
	position: relative;
	padding: 3px 1em 3px .4em;
}

/* jQuery UI puts ui-state-active on the item the arrow keys are on, and
   ui-state-focus on the one the mouse is over. Smoothness styled the first of
   those white on a white menu, so keyboard navigation had no visible highlight
   at all. Both states get the same grey here instead, so arrowing and hovering
   look the same and both are actually visible. */
.ppc-ui-autocomplete .ui-state-focus,
.ppc-ui-autocomplete .ui-state-active,
.ppc-ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
	margin: -1px;
	border: 1px solid #999999;
	background: #dadada;
	font-weight: normal;
	color: #212121;
}