@charset "UTF-8";
/* Drop-down navigation for the #dropmenu nav bar on elfring.com.
   Same nav used on barcodingfonts.com / micrfonts.com / micrgauge.com, themed to
   elfring's blue (#255C7F bar / #16374A dark). Pairs with js/dropdownmenu.js for
   touch support.

   This site's shell is #esf (banner strip) + #wrap (white page box) with the old
   nav (ul#css3menu) absolutely positioned and cleared by a 50px top margin on
   #content. The rules below drop #dropmenu in as a normal block at the top of
   #wrap and retire that 50px gap. */

/* --- banner: hold the search box on the right --- */
#esf {
	position: relative;
	/* elfring2.css sets this to 4px; drop it to 1px to match the #dropmenu bottom rule. */
	border-bottom-width: 1px;
}

#esf #banner_r {
	float: right;
	width: 322px;
	margin-top: 0;
}

/* The nav is now a normal block at the top of #wrap, so the content wrapper no
   longer needs the 50px top margin that used to clear the absolutely-positioned
   ul#css3menu. index.htm uses #content, every interior page uses #contentcol. */
#content,
#contentcol {
	margin-top: 12px;
}

#dropmenu {
	font-size: 118%;
	background-color: #D6EFF7;
	border: none;
	/* Black rule under the bar. Halved to 1px per request. */
	border-bottom: 1px solid #000000;
	position: relative;
	z-index: 500;
	/* Clear the floated search box in #esf above. */
	clear: both;
	/* Pulled up 12px (was 4px) to tuck the bar closer under the #esf banner. */
	margin: -8px 0 0 0;
}

/* Top-level bar -- plain floated list */
#dropmenu > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#dropmenu > ul::after {
	content: "";
	display: block;
	clear: both;
}

#dropmenu > ul > li {
	float: left;
	position: relative;
}

#dropmenu > ul > li > a {
	display: block;
	padding: 6px 18px;
	line-height: normal;
	color: #000000;
	font: bold 14px Verdana, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 6px;
}

#dropmenu > ul > li > a:hover,
#dropmenu > ul > li.active > a {
	background-color: #92D6EA;
}

/* While the mouse is anywhere over the top bar, suppress the "current page"
   highlight so only the item actually under the cursor looks selected. */
#dropmenu > ul:hover > li.active > a {
	background-color: transparent;
}

#dropmenu > ul > li.active:hover > a {
	background-color: #92D6EA;
}

/* Nested dropdown lists -- plain vertical block list */
#dropmenu li ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 160px;
	width: max-content;
	background-color: #ffffff;
	border: 1px solid #255C7F;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	overflow: hidden;
	z-index: 100;
}

#dropmenu li:hover > ul,
#dropmenu li:focus-within > ul {
	display: block;
}

#dropmenu li ul li {
	float: none;
}

#dropmenu li ul li a {
	display: block;
	padding: 8px 14px;
	line-height: normal;
	color: #000000;
	font: normal 12px Verdana, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
}

#dropmenu li ul li a:hover,
#dropmenu li ul li a.touch-highlight {
	background-color: #e4eef3;
	color: #000000;
}

/* Matches the top-bar :hover look, applied by dropdownmenu.js while dragging a finger */
#dropmenu > ul > li > a.touch-highlight {
	background-color: #92D6EA;
}

/* -------------------------------------------------------------------------
   Site search box -- lives in #banner_r (top-right of #esf) and submits to
   search.php. #esf is 51px tall, so the controls are kept compact.
   ------------------------------------------------------------------------- */
#site-search {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
	height: 51px;
	padding-right: 1em;
	box-sizing: border-box;
}

#site-search input[type="search"] {
	width: 190px;
	height: 24px;
	padding: 0 8px;
	margin: 0;
	border: 1px solid #16374A;
	border-radius: 3px;
	background: #ffffff;
	color: #000000;
	font-size: 14px;
	line-height: 24px;
}

#site-search button {
	height: 26px;
	padding: 0 12px;
	border: 1px solid #16374A;
	border-radius: 3px;
	background: #92D6EA;
	color: #16374A;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#site-search button:hover {
	background: #5FB3CE;
}

/* ---- search.php results list ---- */
ul.search-results {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}

ul.search-results li {
	margin: 0 0 1.4em 0;
}

ul.search-results a {
	font-size: 118%;
}

.search-snippet {
	margin: 3px 0 2px 0;
	color: #333333;
	line-height: 1.4;
}

.search-snippet mark {
	background: #ffe9a8;
	color: #000000;
}

.search-url {
	color: #3C7A3C;
	font-size: 90%;
}

.search-note {
	color: #333333;
	margin: 1em 0;
}