/* Windows 7 Start menu. Pane sizes are the theme's own (StartPanelPriv DEFAULTPANESIZE,
   from aero.msstyles.mui); positions inside the panes come from a downscaled capture at
   0.695, so a pixel either way is possible. The pane bitmaps draw the outline, the darker
   glass at the edges and the white program pane themselves. */

.startmenu {
  position: fixed;
  left: 0;
  bottom: 40px;
  width: 411px;
  height: 475px;
  z-index: 15000;
  font: 12px var(--aero);
}
.startmenu[hidden] { display: none; }
.startmenu > .glass {
  position: absolute;
  inset: 0;
  border-radius: 6px 6px 0 0;
  backdrop-filter: url(#aero-glass);
}
@supports not (backdrop-filter: url(#x)) {
  .startmenu > .glass { backdrop-filter: blur(6px) saturate(0.55); background: rgba(116, 184, 252, 0.28); }
}
.startmenu .pane { position: absolute; }
.sm-programs { left: 0; top: 0; width: 261px; height: 391px; border-image: url("../aero/start-programs.png") 11 6 0 13 fill / 11px 6px 0 13px stretch; }
.sm-more { left: 0; top: 391px; width: 261px; height: 30px; border-image: url("../aero/start-moreprograms.png") 30 2 0 9 fill / 30px 2px 0 9px stretch; }
.sm-openbox { left: 0; top: 421px; width: 261px; height: 54px; border-image: url("../aero/start-openbox.png") 23 19 29 24 fill / 23px 19px 29px 24px stretch; }
.sm-places { left: 261px; top: 0; width: 150px; height: 421px; border-image: url("../aero/start-places.png") 8 8 0 0 fill / 8px 8px 0 0 stretch; }
.sm-logoff { left: 261px; top: 421px; width: 150px; height: 54px; border-image: url("../aero/start-logoff-bg.png") 10 2 43 0 fill / 10px 2px 43px 0 stretch; }

/* ---------- left pane: programs, All Programs, search results ---------- */

/* PROGRAMLIST content margins 9/2/11: ten 38 px rows fill the pane's 391 px exactly. */
.sm-list {
  position: absolute;
  left: 9px;
  top: 11px;
  width: 250px;
  height: 374px;
  overflow: hidden auto;
}
.sm-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  padding: 0 0 0 4px;
  border: 0;
  background: none;
  color: #282828;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}
.sm-item img { width: 32px; height: 32px; flex: none; margin-right: 5px; }
.sm-item span { overflow: hidden; text-overflow: ellipsis; }
.sm-item:hover,
.sm-item.focus { border-image: url("../aero/start-mfu-item-1.png") 3 fill / 3px stretch; }
.sm-item:active { border-image: url("../aero/start-mfu-item-3.png") 3 fill / 3px stretch; }

/* All Programs and search results use small icons. */
.sm-list.small .sm-item { height: 22px; padding-left: 3px; }
.sm-list.small .sm-item img { width: 16px; height: 16px; margin-right: 6px; }
.sm-list .sm-item.child { padding-left: 19px; }
.sm-list .sm-item.child2 { padding-left: 35px; }
.sm-group {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 2px 0 1px;
  padding-left: 4px;
  color: #003399;
  font-weight: bold;
}
.sm-group::after {
  content: "";
  flex: 1;
  height: 1px;
  margin: 0 6px 0 8px;
  background: linear-gradient(to right, #d6e0f0, rgba(214, 224, 240, 0));
}
.sm-empty { padding: 8px 10px; color: #6d6d6d; }

.sm-sep {
  position: absolute;
  left: 15px;
  top: 388px;
  width: 232px;
  height: 1px;
  background: url("../aero/start-programs-sep.png");
}

.sm-allbtn {
  position: absolute;
  left: 9px;
  top: 1px;
  width: 250px;
  height: 28px;
  padding: 0 0 0 40px;
  border: 0;
  background: none;
  color: #000;
  font: inherit;
  text-align: left;
}
.sm-allbtn:hover { border-image: url("../aero/start-mfu-item-1.png") 3 fill / 3px stretch; }
.sm-allbtn::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 18px;
  height: 18px;
  background: url("../aero/start-arrow.png") no-repeat;
}
.sm-allbtn.back::before { background-image: url("../aero/start-arrow-back.png"); }

.sm-search {
  position: absolute;
  left: 20px;
  top: 11px;
  width: 224px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 24px 1px 6px;
  border: 0;
  border-image: url("../aero/edit-border-1.png") 2 fill / 2px stretch;
  background: none;
  font: 12px var(--aero);
  color: #000;
  outline: none;
}
.sm-search:hover { border-image-source: url("../aero/edit-border-2.png"); }
.sm-search:focus { border-image-source: url("../aero/edit-border-3.png"); }
.sm-search::placeholder { color: #6d6d6d; font-style: italic; }
.sm-searchglyph {
  position: absolute;
  left: 224px;
  top: 15px;
  width: 16px;
  height: 16px;
  background: url("../aero/ef-search-1.png") no-repeat;
  pointer-events: none;
}

/* ---------- right pane: places, user picture, Shut down ---------- */

/* PLACESLIST content margins 3/5: 35 px rows and 2 px separators, from the capture. */
.sm-placelist {
  position: absolute;
  left: 3px;
  top: 42px;
  width: 142px;
}
.sm-place {
  display: block;
  width: 100%;
  height: 35px;
  padding: 0 0 0 9px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}
.sm-place:hover { border-image: url("../aero/start-place-item-1.png") 3 fill / 3px stretch; }
.sm-place:active { border-image: url("../aero/start-place-item-3.png") 3 fill / 3px stretch; }
.sm-psep {
  height: 2px;
  margin: 0 4px;
  background: url("../aero/start-places-sep.png") center / 133px 2px no-repeat;
}

.sm-picture {
  position: absolute;
  left: 304px;
  top: -26px;
  width: 64px;
  height: 64px;
  pointer-events: none;
}
.sm-picture img.pic {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.sm-picture img.pic.icon { object-fit: contain; }
.sm-picture .frame {
  position: absolute;
  inset: 0;
  background: url("../aero/userframe.png") no-repeat;
}

.sm-split { position: absolute; left: 5px; top: 11px; display: flex; }
.sm-shutdown,
.sm-shutarrow {
  position: relative;
  height: 24px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
}
.sm-shutdown {
  padding: 0 8px 1px;
  border-image: url("../aero/start-shutdown-1.png") 4 3 4 4 fill / 4px 3px 4px 4px stretch;
}
.sm-shutdown:hover { border-image-source: url("../aero/start-shutdown-2.png"); }
.sm-shutdown:active { border-image-source: url("../aero/start-shutdown-3.png"); }
.sm-shutarrow {
  width: 23px;
  border-image: url("../aero/start-shutdown-arrow-1.png") 4 4 4 1 fill / 4px 4px 4px 1px stretch;
}
.sm-shutarrow:hover { border-image-source: url("../aero/start-shutdown-arrow-2.png"); }
.sm-shutarrow:active,
.sm-shutarrow.open { border-image-source: url("../aero/start-shutdown-arrow-3.png"); }
.sm-shutarrow::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 6px;
  height: 9px;
  background: url("../aero/start-shutdown-glyph-1.png") no-repeat;
}