/* Expressway Printing Inc. - 2009 site, lightly modernized.
   The original grey / black / #FFF200 design is untouched; this file only adds the
   banner, "retired" notes, and the rules that let the 900px table layout fit small screens. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-bottom: 20px; }
img { max-width: 100%; height: auto; border: 0; }

/* "kept for nostalgia" banner */
.nostalgia-banner { background: #FFF200; color: #000; font: 13px/1.4 Arial, Helvetica, sans-serif; text-align: center; padding: 6px 12px; border-bottom: 1px dashed #000; margin-bottom: 20px; }
.nostalgia-banner p { margin: 0; }
.nostalgia-banner a:link, .nostalgia-banner a:visited { color: #000; font-weight: bold; white-space: nowrap; text-decoration: underline; }
.nostalgia-banner a:hover { background: #000; color: #FFF200; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 6px 12px; font: 13px Arial, sans-serif; z-index: 2000; }
.skip:focus { left: 0; }

/* the three layout tables: 900px wide at most, but never wider than the screen */
#table1Layout, #table2Layout, #table3Layout { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
#table1Layout #logo { max-width: 100%; }
#table1Layout #tdLogo img { height: auto; }
#table2Layout #splashMain img { max-width: 100%; height: auto; }
#table2Layout #splashMain2 img { max-width: 100%; height: auto; vertical-align: middle; }
#table2Layout img { max-width: 100%; }
#table2Layout iframe { display: block; margin: 0 auto; width: 100%; max-width: 898px; height: 518px; border: 0; }

/* home page buttons (original spaced them with  ) */
#table2Layout #splashMain2 p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
#table2Layout #splashMain2 p a { display: block; }

/* keyboard users: open a dropdown when one of its links has focus */
@media (min-width: 900px) {
  ul.MenuBarHorizontal li:focus-within > ul { left: auto; }
}

/* footer icons (original used rows of  ) */
#tdFooter .style4 { padding-left: 24px; }
#tdFooter span.style19 { display: inline-block; margin-right: 24px; vertical-align: middle; }
#tdFooter span.style19 a { display: inline-block; }

/* floated pictures on Our Company / Our History */
.float-left { float: left; }
.float-right { float: right; }

/* retired / historical notes */
.retired-note { clear: both; max-width: 620px; margin: 24px auto; padding: 10px 16px; background: #FFFBCC; border: 1px dashed #000; color: #000;
  font: 13px/1.5 Arial, Helvetica, sans-serif; text-align: left; }
.retired-note p { margin: 0; }
.retired-note .tag { display: inline-block; background: #000; color: #FFF200; font-size: 11px; letter-spacing: .06em; padding: 1px 6px; margin-right: 4px; }
.retired-note a:link, .retired-note a:visited { color: #000; font-weight: bold; text-decoration: underline; }
#table2Layout #tdMain .retired-note a:hover, .retired-note a:hover { background: #FFF200; }
.gone { color: #777; text-decoration: line-through; }
.gone small { text-decoration: none; color: #777; }

/* keyboard focus */
#tdNavNew a:focus-visible, .skip:focus-visible, .retired-note a:focus-visible { outline: 2px solid #000; outline-offset: 1px; }

/* mobile menu button (only shown on small screens, and only when the script ran) */
.menu-toggle { display: none; }

@media (max-width: 899px) {
  body { font-size: 16px; }
  /* stack the header and footer table cells */
  #table1Layout, #table1Layout tbody, #table1Layout tr, #table1Layout td,
  #table3Layout, #table3Layout tbody, #table3Layout tr, #table3Layout td { display: block; width: auto; height: auto; }
  #table1Layout #trAddress { text-align: center; padding: 8px 10px; line-height: 2; }
  #table1Layout #trAddress a { display: inline-block; line-height: 1.4; padding: 6px 10px; }
  #table1Layout #tdLogo { padding: 10px 0 5px; }
  #table1Layout #tdLogo img { width: 251px; max-width: 80%; }
  #table1Layout #tdNavNew { padding: 0 0 12px; }
  #table2Layout td { height: auto; }
  #table2Layout #tdMain { padding: 15px 12px; text-align: left; }
  #table2Layout #splashMain { padding: 8px; }
  #table2Layout #splashMain2 { padding: 6px 4px; }
  #table2Layout #splashMain2 p { gap: 8px 6px; }
  #table2Layout #splashMain2 p a { flex: 0 1 calc(50% - 6px); }
  #table2Layout #splashMain2 p a img { width: 100%; }
  .style16 { font-size: 24px; }
  #tdMain h5 { font-size: 14px; }
  #table2Layout #tdMain p, #table2Layout #tdMain li { overflow-wrap: break-word; }
  .float-left, .float-right { float: none; display: block; margin: 0 auto 14px; }
  #table2Layout iframe { height: 360px; }
  #table3Layout { padding: 10px 5px; text-align: center; }
  #tdFooter .style4 { padding-left: 0; }
  #tdFooter div { text-align: center; }
  #tdFooter span.style19 { margin: 4px 10px; }
  #tdCopyRight, #tdCopyRight div { text-align: center; }
  #tdCopyRight { padding-top: 6px; }
  #tdMrGreen2 div, #table3Layout td[align] { text-align: center; }
  #table3Layout td { padding: 4px 0; }
  #table3Layout td .style2 a { display: inline-block; padding: 6px 8px; }

  /* menu: one column, big tap targets, submenus open on tap */
  .menu-toggle { display: block; width: calc(100% - 20px); margin: 0 10px 8px; padding: 12px; background: #000; color: #FFF200; border: 0;
     font: bold 15px Geneva, Arial, Helvetica, sans-serif; letter-spacing: .08em; text-align: center; cursor: pointer; }
  .menu-toggle:focus-visible { outline: 2px solid #FFF200; outline-offset: 2px; }
  ul.MenuBarHorizontal { margin: 0 10px; display: flex; flex-direction: column-reverse; }  /* same About-first order as the desktop bar */
  ul.MenuBarHorizontal li { float: none; width: auto; padding: 0; }
  ul.MenuBarHorizontal a { margin: 0; padding: 12px 10px; border-left: 0; border-bottom: 1px dashed #000; font-size: 16px; }
  ul.MenuBarHorizontal ul { position: static; left: auto; width: auto; font-size: 16px; }
  ul.MenuBarHorizontal ul li { width: auto; font-size: 15px; border: 0; background: #f2f2f2; }
  ul.MenuBarHorizontal ul a { padding-left: 28px; background-color: #f2f2f2; }
  ul.MenuBarHorizontal a.MenuBarItemSubmenu::after { content: " \25BE"; }
  ul.MenuBarHorizontal li.mnav-open > a.MenuBarItemSubmenu::after { content: " \25B4"; }
  .mnav-ready ul.MenuBarHorizontal { display: none; }
  .mnav-ready.menu-open ul.MenuBarHorizontal { display: flex; }
  .mnav-ready ul.MenuBarHorizontal ul { display: none; }
  .mnav-ready ul.MenuBarHorizontal li.mnav-open > ul { display: block; }
}
@media (max-width: 420px) {
  #table1Layout #trAddress { font-size: 12px; }
}