/* The Legion of Bushinryu — shared styles.
   Recreates the original FrontPage Express look (black page, yellow Arial text,
   600px framed table layout) without <font> tags or presentational attributes. */

body {
  margin: 8px;
  background: #000;
  color: #ff0;
  font-family: "Times New Roman", Times, serif;
}

/* The original text was shrunk with <font size="2">, which left paragraph and
   blockquote margins at the 16px default. Keep those fixed so spacing matches. */
p          { margin: 16px 0; }
blockquote { margin: 16px 40px; }

/* Blank spacer paragraphs (&nbsp;) were set in the default 16px Times. */
.spacer { font: 16px "Times New Roman", Times, serif; }

a:link    { color: #c0c0c0; }
a:visited { color: #808080; }
a:active  { color: #fff; }
a img     { border: 0; }

/* Links whose color was forced by an inner <font color>, in every state. */
a.silver:link, a.silver:visited, a.silver:active { color: #c0c0c0; }
a.yellow:link, a.yellow:visited, a.yellow:active { color: #ff0; }
a.white:link,  a.white:visited,  a.white:active  { color: #fff; }

/* Pages that used yellow for every link state (Media). */
.links-yellow a:link,
.links-yellow a:visited,
.links-yellow a:active { color: #ff0; }

/* ---- Page frame ------------------------------------------------------- */

.frame {
  width: 600px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  /* sfbg1.gif was not recovered; drop it into /images to restore the tile. */
  background: url(../images/sfbg1.gif);
}
.frame > tbody > tr > td { padding: 0; }

/* Banner and footer images sit flush, as they did in quirks mode. */
.block { display: block; }

/* Vertical navigation tabs in the left column. */
.nav {
  width: 25px;
  vertical-align: top;
  text-align: center;
}
.nav img { vertical-align: baseline; }
.nav img.bottom { vertical-align: bottom; }

/* ---- Text ------------------------------------------------------------- */

.text, .text p, .small, .tiny {
  font-family: Arial, Helvetica, sans-serif;
}
.text  { font-size: 13px; }  /* <font size="2"> */
.small { font-size: 13px; }
.tiny  { font-size: 10px; }  /* <font size="1"> */
.arial { font-family: Arial, Helvetica, sans-serif; }

.white  { color: #fff; }
.silver { color: #c0c0c0; }
.yellow { color: #ff0; }
.cyan   { color: #80ffff; }
.aqua   { color: #0ff; }

.center { text-align: center; }
.right  { text-align: right; }
.top    { vertical-align: top; }
.bottom { vertical-align: bottom; }

/* The original pages rendered in quirks mode, where a paragraph that opens or
   closes a table cell loses its margin. (.keep opts out where text came first.) */
td > p:first-child:not(.keep),
td > blockquote:first-child,
td > blockquote:first-child > p:first-child { margin-top: 0; }
td > p:last-child:not(.keep) { margin-bottom: 0; }
.mt0 { margin-top: 0; }
.m13 { margin: 13px 0; }  /* paragraphs that sat inside an unclosed <font size="2"> */

/* Quirks mode also gave an image-only line no extra text height.
   .solo puts such an image on its own line without that gap. */
.solo { display: block; margin: 0 auto; }
.solo-l { display: block; }

/* Floated images (replaces align="left|right" + hspace/vspace). */
.fl { float: left; }
.fr { float: right; }
.hs2 { margin-left: 2px; margin-right: 2px; }
.hs4 { margin-left: 4px; margin-right: 4px; }
.hs5 { margin-left: 5px; margin-right: 5px; }
.hs6 { margin-left: 6px; margin-right: 6px; }
.vs2 { margin-top: 2px; margin-bottom: 2px; }
.vs3 { margin-top: 3px; margin-bottom: 3px; }
.vs4 { margin-top: 4px; margin-bottom: 4px; }
.mid { vertical-align: middle; }

/* ---- Home page -------------------------------------------------------- */

.link-code {
  width: 90%;
  box-sizing: border-box;
  vertical-align: bottom;
}

/* ---- Animation viewer ------------------------------------------------- */

.viewer { margin: 0 auto; border-spacing: 0; }
.viewer td { padding: 2px; }
.viewer .stage {
  width: 368px;
  height: 185px;
  vertical-align: bottom;
  text-align: center;
  padding: 0;
  /* anibg.gif was not recovered; drop it into /images to restore the backdrop. */
  background: url(../images/anibg.gif);
}
.viewer .stage img { margin: 12px 0; vertical-align: bottom; }
.viewer select {
  background-color: #202020;
  color: #cccc00;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* ---- Storyboards ------------------------------------------------------ */

.story-wide { width: 620px; }