/* Encarta Premium 2009 window frame: menu bar + toolbar, from ENCARTAR.DLL bitmaps. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #1e6b00; }
body { display: flex; flex-direction: column; font: 12px "Segoe UI", Tahoma, sans-serif; }

#menubar { height: 20px; display: flex; align-items: stretch; background: #f5f6f7; border-bottom: 1px solid #e3e4e6;
  padding-left: 4px; user-select: none; position: relative; z-index: 30; }
.mtop { padding: 2px 7px; cursor: default; position: relative; color: #000; }
.mtop.open, .mtop:hover { background: #d8e6f8; outline: 1px solid #a8c8ec; outline-offset: -1px; }
.mdrop { position: absolute; top: 100%; left: 0; min-width: 210px; background: #f0f0f0; border: 1px solid #979797;
  box-shadow: 2px 2px 3px rgba(0,0,0,.25); padding: 2px; display: none; }
.mtop.open > .mdrop, .mitem.sub:hover > .mdrop { display: block; }
.mitem { padding: 3px 24px 3px 28px; white-space: nowrap; position: relative; display: flex; justify-content: space-between; gap: 24px; }
.mitem:hover { background: #d8e6f8; outline: 1px solid #a8c8ec; outline-offset: -1px; }
.mitem.gray { color: #8d8d8d; }
.mitem .acc { color: #555; }
.mitem.sub::after { content: "\25B8"; position: absolute; right: 8px; }
.mitem.sub > .mdrop { top: -3px; left: 100%; }
.msep { height: 1px; background: #d7d7d7; margin: 3px 2px 3px 26px; }
u.k { text-decoration: none; }
#menubar.keys u.k { text-decoration: underline; }

#toolbar { height: 68px; flex: none; display: flex; align-items: flex-start; padding: 0 6px;
  background: url(../frame/bmp/15092.png) repeat-x left top; position: relative; z-index: 20; user-select: none; }
.tb { display: inline-block; flex: none; cursor: default; background-repeat: no-repeat; }
#tbBack { margin-right: -4px; }
#tbHome { margin-left: 8px; margin-right: 6px; }
#tbFeatures { margin-left: 2px; }
#tbSpacer { flex: 1; }
#tbSearch { display: flex; align-items: flex-start; height: 68px; margin: 0; }
#sLeft { width: 28px; height: 68px; background: url(../frame/bmp/15094.png) no-repeat; }
#sRight { width: 12px; height: 68px; background: url(../frame/bmp/15093.png) no-repeat; }
/* 15097 is drawn one row higher than its end caps (its field border is on rows 16-18 / 41-44, theirs on
   17-19 / 42-45): shifted down 1px it meets them; the edit then sits on the white field, rows 20-41 */
#sInput { height: 68px; width: 300px; box-sizing: border-box; border: 0; margin: 0; padding: 20px 2px 26px; line-height: 22px; outline: none;
  background: url(../frame/bmp/15097.png) repeat-x 0 1px; font: 12px Tahoma, sans-serif; color: #333; }
#tbGo { margin-left: 0; }          /* 15093's last grey column runs straight into the button's own backdrop */
#tbPane { position: absolute; right: 22px; bottom: 0; }

#main { flex: 1; position: relative; min-height: 0; }
#content { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
#statusbar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: #ffffe1; border: 1px solid #888;
  padding: 4px 10px; font: 12px Tahoma, sans-serif; z-index: 40; }

/* search results pane (Encarta's find_s/m/l.xsl), dropping down over the content */
#findpane { position: absolute; left: 0; right: 0; top: 0; width: 100%; border: 0; z-index: 10; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.35); }
#findpane[data-size="0"] { height: 150px; }
#findpane[data-size="1"] { height: 55%; }
#findpane[data-size="2"] { height: 100%; }

/* Features menu + flyout: popup windows sized by Encarta's own OnFinishedLoading(w, h, gradient, radius) */
#toolsmenu, #toolsflyout { position: fixed; border: 1px solid #a9b6a0; z-index: 50; box-shadow: 2px 3px 8px rgba(0,0,0,.35);
  width: 300px; height: 400px; }

/* QuickMatch list (QMLISTUI.DLL): layered popup, 1px border, owner-drawn rows of 15px,
   Verdana Ref 12px, text indented 17px, hover/selection #CDF499, 90% opaque, 10 rows visible */
#quickmatch { position: fixed; z-index: 60; background: #fff; border: 1px solid #000; opacity: .9;
  max-height: 150px; overflow-y: auto; overflow-x: hidden; box-sizing: content-box; cursor: default;
  font: 12px 'Verdana Ref', Verdana, sans-serif; color: #000; }
#quickmatch > div { height: 15px; line-height: 15px; padding-left: 17px; padding-right: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: clip; }
#quickmatch > div.art { font-weight: bold; }
#quickmatch > div.sel { background: #cdf499; }

/* Quick Search (CQuickSearchDlg): 466x160 bitmap 15242; title (32,15), caption (32,38)-(424,83),
   edit (63,98) 317x19 on 15243, Go 32x33 from 15244 (4 frames), "cancel" link (11221/11222) */
#quicksearch { position: fixed; z-index: 70; left: 50%; top: 160px; width: 466px; height: 160px; margin-left: -233px;
  background: url(../res/encartar.dll/BITMAP/15242.png) no-repeat; box-shadow: 2px 3px 10px rgba(0,0,0,.45); font: 11px Tahoma, sans-serif; }
#quicksearch .qt { position: absolute; left: 32px; top: 15px; width: 392px; font: bold 13px Tahoma, sans-serif; color: #424242; }
#quicksearch .qc { position: absolute; left: 32px; top: 38px; width: 392px; height: 45px; color: #424242; overflow: hidden; }
#quicksearch .qe { position: absolute; left: 30px; top: 91px; width: 362px; height: 33px; background: url(../res/encartar.dll/BITMAP/15243.png) no-repeat; }
#quicksearch input { position: absolute; left: 33px; top: 7px; width: 317px; height: 19px; border: 0; outline: none; background: transparent; font: 12px Tahoma, sans-serif; }
#quicksearch .qg { position: absolute; left: 394px; top: 91px; width: 32px; height: 33px; background: url(../res/encartar.dll/BITMAP/15244.png) 0 0 no-repeat; cursor: pointer; }
#quicksearch .qg:hover { background-position: -96px 0; }
#quicksearch .qx { position: absolute; right: 18px; bottom: 10px; font: 10px Tahoma, sans-serif; color: #424242; }
#quicksearch .qx:hover { color: #f37021; font-weight: bold; }