/* vmx.css: the page's type, after the 2002 xbox.com stylesheet's rules (research/xbox2002/BRIEF.md, section 2):
   Verdana 8pt body, Arial bold heads, #339900 links, 7pt legal text. Our own file; values only. */
BODY { background-color: #70BC1F; margin: 0; }
BODY, TD, P, DIV, UL, OL, LI { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000; }
P { margin-top: 0; margin-bottom: 10px; }
H1 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14pt; line-height: 16pt; margin: 0 0 6px; }
H2 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13pt; line-height: 15pt; margin: 0 0 6px; }
H3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; line-height: 14pt; margin: 0 0 4px; }
H4 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 11pt; line-height: 12pt; margin: 0 0 4px; }
A:link, A:visited { color: #339900; text-decoration: none; }
A:hover { color: #339900; text-decoration: underline; }
A:active { color: #99CC33; }
UL { margin-top: 4px; margin-bottom: 8px; margin-left: 20px; padding-left: 0; list-style-position: outside; }
LI { margin-bottom: 5px; }
IMG { border: 0; }
TD.slice IMG, TABLE.nav IMG, TABLE.footer IMG, TABLE.subnav IMG { display: block; }

.productInfoLabel { font-family: Verdana, Arial, sans-serif; font-size: 8pt; }
.productInfoValue { font-family: Verdana, Arial, sans-serif; font-size: 10pt; font-weight: bold; }
.bucketHeader { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #FFFFFF; }
.bucketBar { background-color: #333333; padding: 3px 6px; }
.bucket { border: 1px solid #999999; }
.quote { font-family: Verdana, Arial, sans-serif; font-weight: bold; font-style: italic; font-size: 14pt; color: #666666; line-height: 130%; }
.legalText, .legalLinks { font-family: Verdana, Arial, sans-serif; font-size: 7pt; line-height: 10pt; }
.lowerNav { font-family: Verdana, Arial, sans-serif; font-size: 8pt; }
.smallText { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; }
.greyText { color: #666666; }
.tag { color: #A8550C; font-weight: bold; }
.countryselect { font-family: Verdana, Arial, sans-serif; font-size: 8pt; width: 146px; }

/* the "please stand by"-style notice: the fan-project line, always shown */
.notice { font-family: Verdana, Arial, sans-serif; font-size: 8pt; font-weight: bold; text-align: center;
  border: 1px solid #999999; background-color: #FFFFE1; padding: 6px 8px; }

/* the hosted control's set dressing */
.ctlbox { border: 1px solid #999999; background-color: #F0F0F0; padding: 6px 8px; }
.ctlframe { border: 2px inset #D4D0C8; background: #D4D0C8; }
.mono { font-family: "Courier New", Courier, monospace; font-size: 8pt; }

/* the game pages: a shot of the VMX's screen with its caption, the period's sortable list, the video player's frame */
.shot { border: 1px solid #666666; }
TABLE.list { border-collapse: collapse; }
TABLE.list TH { font-family: Verdana, Arial, sans-serif; font-size: 8pt; text-align: left; color: #FFFFFF; background-color: #333333; padding: 3px 5px; }
TABLE.list TD { padding: 3px 5px; border-bottom: 1px solid #CCCCCC; vertical-align: top; }
.wmp { border: 2px outset #D4D0C8; background: #D4D0C8; padding: 4px; }
.wmp VIDEO { display: block; background: #000000; }
.slotnote { border: 1px dashed #A8550C; background-color: #FFF8EC; padding: 4px 6px; }

/* ---- narrow screens (phones): the same 2002 page poured into one column. The sliced top nav is cropped to its
   middle (three buttons, the jewel, two buttons), the fixed-width layout tables turn into stacked blocks, the right
   rail drops under the body, and the type goes up a size so it reads without zooming. Desktop is untouched. */
@media (max-width: 799px) {
  HTML, BODY { overflow-x: hidden; }
  BODY, TD, P, DIV, UL, OL, LI { font-size: 10pt; line-height: 14pt; }
  .productInfoLabel, .smallText, .lowerNav, .mono, .notice { font-size: 9pt; }
  .productInfoValue { font-size: 11pt; }
  .legalText, .legalLinks { font-size: 8pt; line-height: 11pt; }
  LI { margin-bottom: 7px; }

  /* top nav: keep the slices at their real size, show the middle 360 or so */
  TABLE.nav { margin-left: calc(50% - 390px); margin-right: 0; }

  /* layout tables -> blocks */
  TABLE[width="770"], TABLE[width="760"], TABLE[width="195"],
  TABLE[width="770"] > TBODY, TABLE[width="760"] > TBODY, TABLE[width="195"] > TBODY,
  TABLE[width="770"] > TBODY > TR, TABLE[width="760"] > TBODY > TR, TABLE[width="195"] > TBODY > TR,
  TABLE[width="770"] > TBODY > TR > TD, TABLE[width="760"] > TBODY > TR > TD, TABLE[width="195"] > TBODY > TR > TD,
  TABLE[width="555"]:not(.subnav):not(.list), TABLE[width="555"]:not(.subnav):not(.list) > TBODY,
  TABLE[width="555"]:not(.subnav):not(.list) > TBODY > TR, TABLE[width="555"]:not(.subnav):not(.list) > TBODY > TR > TD {
    display: block; width: auto; }
  TABLE[width="770"]:not(.footer) { margin: 0 4px; border-left: 1px solid #666666; border-right: 1px solid #666666; background: #FFFFFF; }
  TD[width="760"] { padding: 0 10px; }
  TD[width="1"], TD[width="4"], TD[width="10"], TD[width="15"], TD[width="20"] { display: none !important; }
  TD[width="175"], TD[width="140"] { margin-bottom: 12px; }
  TABLE[width="175"], TABLE[width="170"], TABLE.list { width: 100%; }

  /* pictures and hosted things never wider than the column */
  TABLE[width="770"] IMG, VIDEO { max-width: 100%; height: auto; }
  IMG[width="1"] { display: none; }
  TABLE.subnav { width: 100%; }
  TABLE.subnav IMG { width: 100%; height: auto; }
  TABLE.subnav TD:last-child { display: none; }
  .ctlframe, .wmp { width: auto !important; }
  .ctlframe OBJECT, .ctlframe IFRAME { width: 100%; height: 880px; display: block; }
  .ctlframe OBJECT { height: auto; }
  .wmp VIDEO { width: 100%; }
  .countryselect { width: 170px; }

  /* footer: the white box between the strips, corners left off */
  TABLE.footer { width: auto; margin: 0 4px; display: block; }
  TABLE.footer > TBODY, TABLE.footer > TBODY > TR, TABLE.footer > TBODY > TR > TD { display: block; width: auto; height: auto; }
  TABLE.footer TD[width="100"] { display: none; }
  TABLE.footer IMG { width: 100%; }
  TABLE.footer TD[bgcolor] { padding: 8px 6px; }
}