/*
 * myedeposit.com - the Flash movies of the public site, rebuilt in HTML + CSS (2026-10-04).
 *
 *   inc/md_menu.swf     730 x 74   the menu in the page header        ->  .med-menu
 *   (md_menu_001..004.swf = the same menu resting on one section      ->  data-movie on .med-menu)
 *   inc/main_top.swf    980 x 238  the banner of the home page         ->  .med-banner
 *
 * Every number below is read out of the movies themselves with tools/swf-dump.cjs (stage size, bitmaps,
 * the position, size and colour of every text, the buttons' states and targets, the banner's timeline),
 * not taken from a screenshot.
 *
 * MENU (md_menu*.swf, 30 fps, the frames are states, not time)
 *   bar            730 x 40 bitmap at 0,0 (images/med_menu_bar.jpg); the 34 px under it are white
 *   top items      SOLUTIONS / PRICING / SUPPORT / ABOUT US, text origins x 70 / 258.95 / 422.95 / 571.95,
 *                  baseline y 26.25; Myriad Semibold 14 px #cccccc
 *   item "on"      Myriad Bold 16 px #ff9900, baseline y 26 - 27.25, centred on the same spot
 *   frame 5        SOLUTIONS on + its row: Simple Invoicing Solutions x 63.25, Simple ePayment Solutions
 *                  x 250.7, eFax Solutions x 449.35; baseline y 62.75; Myriad Bold 14 px #999999, over #333333
 *   frame 10 / 20  PRICING / ABOUT US on, no row; rolling off them goes back to frame 1
 *   frame 15       SUPPORT on + its row: System Requirement & Support x 416.7, FAQ x 643.65
 *   frame 1        the resting state of the movie: md_menu nothing, _001 = frame 5, _002 PRICING on,
 *                  _003 = frame 15, _004 ABOUT US on
 *
 * BANNER (main_top.swf, 18 fps, one loop = 330 frames = 18.333 s; a keyframe percentage is (frame - 1) / 330)
 *   background     980 x 238 bitmap (images/med_banner_bg.jpg), always there
 *   four messages  each a group of one or two lines of outlined letters with a white drop shadow
 *                  (blur 5, angle 30 deg, distance 3 for the first, 5 for the others):
 *                    1  "Solutions For" / "Your Business"      at 188.05, 53.05   frames   1 -  90
 *                    2  "Simple Invoicing" / "Solutions"       at 187.25, 53.05   frames  90 - 180
 *                    3  "Simple ePayment" / "Solutions"        at 187.35, 53.35   frames 180 - 270
 *                    4  "eFax Solutions"                       at 265.55, 90.8    frames 270 - 330
 *   a line comes in by a mask sliding left to right over it: about 19 frames (1.06 s) per line, the second
 *   line right after the first
 *   a message leaves over its last 10 frames: alpha 1 -> 0 while a blur grows from 0 to 50
 *
 * Myriad (the movies' typeface) is not a web font. Where it is not installed the menu is set in Source
 * Sans 3 - Adobe's open-source sans, near-identical in shape and width (SIL Open Font License; the file
 * and its licence are in inc/fonts/, served from this site, no third-party request). The banner's words
 * need no font: they are the movie's own letter outlines (images/med_banner_*.svg).
 */

@font-face {
  font-family: "MED Source Sans";
  src: url(fonts/SourceSans3-latin.woff2) format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------ menu ------------------------------------------------ */

.med-menu {
  position: relative;
  width: 730px;
  height: 74px;
  overflow: hidden;
  text-align: left;
  background: #ffffff url(../images/med_menu_bar.jpg) no-repeat 0 0;
  font-family: "Myriad Pro", Myriad, "MED Source Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.med-menu ul, .med-menu li { margin: 0; padding: 0; list-style: none; }

/* top items: a 130 x 40 box centred where the movie centred the word */
.med-menu .med-menu-top li { position: absolute; top: 0; width: 130px; height: 40px; text-align: center; }
.med-menu .med-menu-top .med-m-solutions { left: 40.5px; }
.med-menu .med-menu-top .med-m-pricing { left: 219.5px; }
.med-menu .med-menu-top .med-m-support { left: 386.4px; }
.med-menu .med-menu-top .med-m-about { left: 538.2px; }
.med-menu .med-menu-top a,
.med-menu .med-menu-top a:hover {
  display: block;
  height: 40px;
  line-height: 43px;   /* puts the baseline at y 26, where the movie had it */
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #cccccc;
  text-decoration: none;
  white-space: nowrap;
}
/* an item is "on" while the pointer (or the keyboard) is on it, and when it is the open page's section */
.med-menu .med-menu-top a:hover,
.med-menu .med-menu-top a:focus,
.med-menu[data-open="solutions"] .med-m-solutions a,
.med-menu[data-open="pricing"] .med-m-pricing a,
.med-menu[data-open="support"] .med-m-support a,
.med-menu[data-open="about"] .med-m-about a,
.med-menu[data-movie="md_menu_001"] .med-m-solutions a,
.med-menu[data-movie="md_menu_002"] .med-m-pricing a,
.med-menu[data-movie="md_menu_003"] .med-m-support a,
.med-menu[data-movie="md_menu_004"] .med-m-about a {
  font-size: 16px;
  font-weight: 700;
  color: #ff9900;
  outline: 0;
}

/* the row under the bar */
.med-menu .med-menu-sub { display: none; }
.med-menu .med-menu-sub li { position: absolute; top: 49px; height: 18px; }
.med-menu .med-menu-sub a,
.med-menu .med-menu-sub a:hover {
  display: block;
  line-height: 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #999999;
  text-decoration: none;
  white-space: nowrap;
}
.med-menu .med-menu-sub a:hover,
.med-menu .med-menu-sub a:focus { color: #333333; outline: 0; }
.med-menu .med-sub-solutions .med-s1 { left: 63px; }
.med-menu .med-sub-solutions .med-s2 { left: 251px; }
.med-menu .med-sub-solutions .med-s3 { left: 449px; }
.med-menu .med-sub-support .med-s1 { left: 417px; }
.med-menu .med-sub-support .med-s2 { left: 644px; }

/* which row shows: the resting row of the page's movie, replaced by the row of the item last pointed at */
.med-menu[data-movie="md_menu_001"] .med-sub-solutions,
.med-menu[data-movie="md_menu_003"] .med-sub-support { display: block; }
.med-menu[data-open] .med-menu-sub { display: none; }
.med-menu[data-open="solutions"] .med-sub-solutions,
.med-menu[data-open="support"] .med-sub-support { display: block; }

/* ----------------------------------------------- banner ----------------------------------------------- */

.med-banner {
  position: relative;
  width: 980px;
  height: 238px;
  overflow: hidden;
  /* the movie's own background colour (#00ccff) never showed: the bitmap covers the whole stage */
  background: url(../images/med_banner_bg.jpg) no-repeat 0 0;
}
.med-banner .med-slide {
  position: absolute;
  width: 470px;
  height: 100px;
  opacity: 0;
  animation: 18.3333s linear infinite;
}
.med-banner .med-line {
  position: absolute;
  display: block;
  width: 0;
  overflow: hidden;
  animation: 18.3333s linear infinite;
}
.med-banner .med-line img { display: block; border: 0; max-width: none; }

.med-banner .med-slide-1 { left: 188.05px; top: 53.05px; animation-name: med-slide-1; }
.med-banner .med-slide-2 { left: 187.25px; top: 53.05px; animation-name: med-slide-2; }
.med-banner .med-slide-3 { left: 187.35px; top: 53.35px; animation-name: med-slide-3; }
.med-banner .med-slide-4 { left: 265.55px; top: 90.8px; animation-name: med-slide-4; }

.med-banner .med-line-1a { left: 0; top: 0; height: 38.1px; animation-name: med-line-1a; }
.med-banner .med-line-1b { left: 126.15px; top: 50.05px; height: 38.1px; animation-name: med-line-1b; }
.med-banner .med-line-2a { left: 0; top: 0; height: 48.65px; animation-name: med-line-2a; }
.med-banner .med-line-2b { left: 212.3px; top: 48.65px; height: 38.15px; animation-name: med-line-2b; }
.med-banner .med-line-3a { left: 0; top: 0; height: 49.2px; animation-name: med-line-3a; }
.med-banner .med-line-3b { left: 224.05px; top: 52.2px; height: 38.1px; animation-name: med-line-3b; }
.med-banner .med-line-4a { left: 0; top: 0; height: 38.15px; animation-name: med-line-4a; }

/* a message: there from its first frame, gone by alpha + blur over its last ten frames.
   drop shadow: blur 5, angle 30 deg, distance 3 (first message) or 5 -> offsets 2.6 / 1.5 and 4.3 / 2.5 px */
@keyframes med-slide-1 {
  0%      { opacity: 1; filter: drop-shadow(2.6px 1.5px 2px #ffffff) blur(0); }
  23.939% { opacity: 1; filter: drop-shadow(2.6px 1.5px 2px #ffffff) blur(0); }
  26.97%  { opacity: 0; filter: drop-shadow(2.6px 1.5px 2px #ffffff) blur(12px); }
  100%    { opacity: 0; filter: drop-shadow(2.6px 1.5px 2px #ffffff) blur(12px); }
}
@keyframes med-slide-2 {
  0%      { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  26.969% { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  26.97%  { opacity: 1; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  51.515% { opacity: 1; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  54.242% { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(12px); }
  100%    { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(12px); }
}
@keyframes med-slide-3 {
  0%      { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  54.241% { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  54.242% { opacity: 1; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  78.788% { opacity: 1; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  81.515% { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(12px); }
  100%    { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(12px); }
}
@keyframes med-slide-4 {
  0%      { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  81.514% { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  81.515% { opacity: 1; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  96.667% { opacity: 1; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(0); }
  99.697% { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(12px); }
  100%    { opacity: 0; filter: drop-shadow(4.3px 2.5px 2px #ffffff) blur(12px); }
}

/* a line: uncovered left to right, at the pace the movie's mask moved (about 17 - 21 px a frame) */
@keyframes med-line-1a { 0%, 0.136% { width: 0; } 5.561%, 100% { width: 306.2px; } }
@keyframes med-line-1b { 0%, 5.758% { width: 0; } 11.515%, 100% { width: 319.7px; } }
@keyframes med-line-2a { 0%, 27.115% { width: 0; } 32.624%, 100% { width: 383.6px; } }
@keyframes med-line-2b { 0%, 33.152% { width: 0; } 38.242%, 100% { width: 218.15px; } }
@keyframes med-line-3a { 0%, 54.364% { width: 0; } 59.939%, 100% { width: 403.9px; } }
@keyframes med-line-3b { 0%, 60.091% { width: 0; } 65.076%, 100% { width: 218.15px; } }
@keyframes med-line-4a { 0%, 81.639% { width: 0; } 87.182%, 100% { width: 337.7px; } }

/* ------------------------------------------------ login ------------------------------------------------ */

/* The header's member login (ID and PW boxes, Login button, "Forgot Password?") is one link now: signing in
   happens on the program's own page, https://app.myedeposit.com/ (owner 2026-10-04). The link stands where
   the Login button stood - right end of the header, above the menu bar. The site's stylesheet sets every
   link to 12 px Verdana, :hover included, so each state is spelled out here. */
a.med-login,
a.med-login:link,
a.med-login:visited,
a.med-login:hover,
a.med-login:focus {
  display: inline-block;
  margin: 0 34px 23px 0;
  padding: 2px 6px;
  font-family: "Myriad Pro", Myriad, "MED Source Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: #333333;
  text-decoration: none;
}
a.med-login:hover,
a.med-login:focus { color: #ff9900; }

/* a visitor who asked for less motion sees the first message, standing still */
@media (prefers-reduced-motion: reduce) {
  .med-banner .med-slide, .med-banner .med-line { animation: none; }
  .med-banner .med-slide-1 { opacity: 1; filter: drop-shadow(2.6px 1.5px 2px #ffffff); }
  .med-banner .med-line-1a { width: 306.2px; }
  .med-banner .med-line-1b { width: 319.7px; }
}