/* ------------------------------------------------------------------
   custom.css — your overrides.

   roblox2011.css is GENERATED from the userscript (rebuild wipes it),
   so put every change you make in here instead. Loaded after it.
   ------------------------------------------------------------------ */

/* Page background is left to the generated sheet — its base64 sky/landscape
   photo is the authentic ROBLOX 3.0 one, confirmed against the Wayback
   capture of Browse.aspx (30 Jun 2011).
   To use the flat blue->white gradient instead, uncomment:

body {
  background: #F8FCFF url(/images/bg_gradient.jpg) repeat-x !important;
}
*/

/* The nav caret, TRUSTe seal and "Play This" button used to be drawn here as
   stand-ins. The genuine 2011 images have since been recovered from the
   Wayback Machine, so those workarounds are gone. */

/* My ROBLOX submenu: fit one more item on the row.
 *
 * The bar is a single row of floated <li>s inside a fixed 900px #Container,
 * with .subMenu{height:26px} clipping anything that wraps. In 2011 it held 14
 * items and ended 18px short of the edge, so adding "Develop" pushed the last
 * one — "Share", which carries the only dropdown — onto a hidden second row.
 * Measured: Ambassadors ends at 884, the content box ends at 902, Share needs
 * 47 more.
 *
 * 5px -> 3px of horizontal padding gives back 4px per item, about 60px across
 * the row, which is comfortably more than the 29px overdraw. Vertical padding
 * is untouched so the bar keeps its height, and the child selectors matter:
 * .subMenu ul ul a is the dropdown, which has its own fixed width and must not
 * be narrowed.
 */
.subMenu > ul > li > a,
.subMenu > ul > li > a:visited {
  padding-left: 3px;
  padding-right: 3px;
}

/* Ad slots.
 *
 * The 2011 markup reserves a 300x300 float:right box on the games page and
 * leaves it empty for the ad network to fill. With nothing in it you get an
 * invisible 300px hole that the game tiles dutifully flow around — which reads
 * as a broken grid (two tiles, a gap, then four) rather than as an ad slot.
 *
 * :empty is the whole trick: the moment a real ad is put in the panel this
 * styling stops applying, with nothing to undo.
 */
.AdPanel:empty {
  display: block;
  width: 300px;
  height: 306px;
  border: 1px dashed #b9c6d4;
  background: #f4f8fc;
  color: #9aa9b8;
  font: normal 11px/306px Verdana, sans-serif;
  text-align: center;
}
.AdPanel:empty::before { content: "Advertisement"; }

/* The ad slot is sized to a whole number of game tiles, not to a standard
 * banner size.
 *
 * The tiles are 154px tall and flow around this float. At the markup's 300px
 * the ad ends 8px into the third row, so that row starts against the ad,
 * fits only two tiles, and leaves a hole on the left before the grid widens
 * to four — which looks like a bug rather than a layout.
 *
 * 2 x 154 = 308 means exactly two rows sit beside the ad and the next row
 * starts clean at full width. When a real ad goes in here, drop this rule
 * along with the :empty styling above and let it be whatever size it is.
 */
#GamePageAdDiv { height: 308px !important; }

/* Contain the floated game tiles.
 *
 * #GamesContent holds a row of float:left tiles and nothing clears them, so it
 * computed to height:0 — the white box stopped above the grid.
 *
 * The ::after clearfix rather than overflow:hidden, and the difference matters
 * here: overflow:hidden makes the div a block formatting context, and a BFC
 * refuses to overlap the ad's float — so instead of tiles flowing around a
 * 300px ad for its first 300px and then using the full width, the whole grid
 * narrows to 426px and stays two columns all the way down. A ::after clear
 * contains the floats without changing how the box interacts with the ad.
 */
#GamesContent::after { content: ""; display: block; clear: both; }

/* Placeholder tiles for the panels that normally come from the API */
.rbx-placeholder {
  background: #fff;
  border: 1px solid #ccc;
  color: #777;
  font: normal 8pt/1.5 Verdana, sans-serif;
  text-align: center;
  padding: 10px;
}
.rbx-placeholder .ph-note {
  color: #999;
  font-size: 7pt;
  display: block;
  margin-top: 4px;
}