.GameDetails {display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:24px;padding:16px;} .GameDetails section{text-align:center;} .GameDetails img{object-fit:contain;max-width:100%;} .GamePlay{margin:18px 0;} .GamePlay .Button{font-size:22px;padding:10px 45px;} .OutfitRow{padding:14px 6px;border-bottom:1px solid #ccc;} @media(max-width:600px){.GameDetails{grid-template-columns:1fr;}}
  body { margin: 0; padding: 0; background: #fff; font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #000; }
  a { color: #00f; text-decoration: none; }
  a:hover { text-decoration: underline; }
  #Container { margin: 0 auto; max-width: 900px; }
  /* 2007's header: the original banner (banner2.png), black borders, login left, logo middle, alerts right */
  #Header { border-top: 1px solid #000; font: bold 12px Verdana, sans-serif; color: #fff; text-align: center; }
  #Banner { position: relative; height: 72px; background: #8aa070 url(/images/banner2.png) no-repeat; border: 1px solid #000; border-top: 0; }
  #Banner a, #Banner a:visited { color: #fff; } #Banner a:hover { color: #fff; text-decoration: underline; }
  #Options { position: absolute; left: 0; top: 0; bottom: 0; width: 287px; text-align: left; }
  #Authentication { position: absolute; left: 0; top: 0; padding: 4px; margin: 0; text-shadow: 0 0 3px #000, 0 0 2px #000; }
  #Authentication input[type=text], #Authentication input[type=password] { width: 82px; font-size: 11px; }
  #Authentication input.Link { color: #fff; font-weight: bold; }
  #Settings { position: absolute; left: 0; bottom: 0; padding: 4px; text-shadow: 0 0 3px #000, 0 0 2px #000; }
  #Logo { position: absolute; left: 287px; width: 326px; top: 9px; text-align: center; }
  /* The white glow is part of logo.png (old Internet Explorer has no CSS drop-shadow), so it looks the same everywhere. */
  #Logo img { border: 0; max-width: 100%; height: auto; }
  #Alerts { position: absolute; right: 0; top: 0; bottom: 0; width: 287px; display: flex; align-items: center; justify-content: center; }
  #AlertSpace { background: #fff; border: 1px solid #000; color: #6e99c9; padding: 5px 10px; width: 200px; font-size: 11px; line-height: 16px; }
  #Banner #AlertSpace a { color: #6e99c9; } #Banner #AlertSpace a.Tix { color: #2d7a1d; font-size: 13px; }
  #Banner #AlertSpace a.SignUpAndPlay { color: #000; background: #F5CD2F; border: 1px solid #000; padding: 1px 8px; font: bold 13px 'Comic Sans MS', Verdana, sans-serif; }
  #Navigation { background: #6e99c9; border: 1px solid #000; border-top: 0; color: #fff; font: normal 12pt/2em 'Comic Sans MS', Verdana, sans-serif; text-align: center; }
  #Navigation a { color: #fff; } #Navigation a:hover { color: #fff; text-decoration: underline; }
  #Body { padding: 10px 0; }
  .Box { border: 1px solid #000; margin-bottom: 10px; background: #fff; }
  .Box h2 { margin: 0; padding: 3px 6px; background: #ccc; border-bottom: 1px solid #000; font: bold 14px 'Comic Sans MS', Verdana, sans-serif; letter-spacing: 1px; }
  h3 { font: bold 12pt 'Comic Sans MS', Verdana, sans-serif; letter-spacing: 1px; }
  /* 2006's big yellow buttons */
  .Button.Big, input.Button.Big { background: #F5CD2F; color: #000; border: 1px solid #000; font: bold 18px 'Comic Sans MS', Verdana, sans-serif; padding: 6px 18px; }
  .Box .Content { padding: 8px; line-height: 16px; }
  .Columns { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .Columns > .Main { flex: 2 1 420px; min-width: 0; }
  .Columns > .Side { flex: 1 1 220px; min-width: 0; }
  .Muted { color: #666; }
  .Online { color: #1a8a1a; }
  .Notice { border: 1px solid #e0c060; background: #fff8d8; padding: 5px 8px; margin-bottom: 10px; }
  .Error { border: 1px solid #c33; background: #fde; padding: 5px 8px; margin-bottom: 10px; color: #900; }
  .SystemAlert { border: 1px solid #e0c060; background: #fff8d8; padding: 6px 12px; margin-top: 6px; font-size: 12px; text-align: center; }
  .SystemAlert.AlertWarning { border-color: #c33; background: #fde; color: #900; }
  .SystemAlert.AlertInfo { border-color: #6e99c9; background: #eaf2fa; color: #1e4570; }
  .SystemAlert .AlertLabel { font-weight: bold; margin-right: 4px; font-family: 'Comic Sans MS', Verdana, sans-serif; }
  .Poll { border: 1px solid #6e99c9; background: #eaf2fa; color: #1e4570; padding: 6px 12px; margin-top: 6px; font-size: 12px; }
  .Poll .AlertLabel { font-weight: bold; margin-right: 4px; font-family: 'Comic Sans MS', Verdana, sans-serif; }
  .Poll form { margin: 0; }
  .PollResults { width: 100%; border-collapse: collapse; margin-top: 4px; }
  .PollResults td { padding: 2px 4px; vertical-align: middle; }
  .PollAnswer { width: 34%; }
  .PollBar { width: 50%; }
  .PollBar div { height: 10px; background: #6e99c9; }
  .PollCount { white-space: nowrap; color: #555; }
  .PollOption { font-size: 12px; padding: 2px 8px; cursor: pointer; }
  .PollOption.Chosen { font-weight: bold; }
  .Error404Container { text-align: center; padding: 8px 16px; }
  .Error404Notice { background: #FFF3A8; border: 1px solid #E6C657; padding: 12px 16px; text-align: center; margin-bottom: 10px; }
  .Error404Notice h2 { margin: 0 0 6px 0; font-size: 18px; color: #333; font-family: 'Comic Sans MS', Verdana, sans-serif; }
  .Error404SubBar { background: #D6D6D6; color: #333; font-weight: bold; font-size: 11px; padding: 6px; text-align: center; letter-spacing: 1px; margin-bottom: 15px; border: 1px solid #bbb; }
  .Error404Image { max-width: 100%; height: auto; border: 2px solid #555; box-shadow: 0 3px 6px rgba(0,0,0,0.25); display: inline-block; margin: 5px 0 12px 0; }
  .Tix { color: #2d7a1d; font-weight: bold; }
  .Free { color: #c00; font-weight: bold; }
  .Grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .Cell { width: 118px; text-align: center; overflow: hidden; }
  .Cell img, .NoThumb { border: 1px solid #ccc; background: #f4f4f4; }
  .NoThumb { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #888; box-sizing: border-box; padding: 4px; }
  .Cell .Name { font-weight: bold; display: block; margin-top: 2px; word-wrap: break-word; }
  .Tabs a { display: inline-block; padding: 2px 8px; margin: 0 2px 4px 0; border: 1px solid #999; background: #eee; color: #000; }
  .Tabs a.On { background: #6e99c9; color: #fff; border-color: #3e6d9e; font-weight: bold; }
  input[type=text], input[type=password], input[type=number], select, textarea {
    font-family: Verdana, Arial, sans-serif; font-size: 11px; border: 1px solid #7f9db9; padding: 2px 4px; background: #fff; box-sizing: border-box;
  }
  input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, select:focus, textarea:focus {
    border-color: #3e6d9e; outline: none;
  }
  .Button, input.Button, button.Button, button { display: inline-block; background: #2d8b1d; color: #fff; font-weight: bold; padding: 4px 12px;
                          border: 1px solid #1a5c10; cursor: pointer; font-family: Verdana, Arial, sans-serif; font-size: 11px; text-decoration: none; }
  .Button:hover, input.Button:hover, button.Button:hover, button:hover { background: #389e26; color: #fff; text-decoration: none; }
  .Button.Big, input.Button.Big, button.Button.Big { background: #F5CD2F; color: #000; border: 1px solid #000; font: bold 14px 'Comic Sans MS', Verdana, sans-serif; padding: 6px 18px; }
  .Button.Big:hover, input.Button.Big:hover, button.Button.Big:hover { background: #ffe04d; color: #000; }
  .Button.Gray, button.Button.Gray { background: #888; border-color: #555; color: #fff; }
  .Button.Gray:hover, button.Button.Gray:hover { background: #999; }
  .Button.Red, button.Button.Red { background: #c33; border-color: #811; color: #fff; }
  .Button.Red:hover, button.Button.Red:hover { background: #d44; }
  .Button.Blue, button.Button.Blue { background: #6e99c9; border-color: #3e6d9e; color: #fff; }
  .Button.Blue:hover, button.Button.Blue:hover { background: #7eaad9; }
  input.Small { font-size: 11px; }
  input.Link { background: none; border: 0; padding: 0; color: #00f; cursor: pointer; font: inherit; }
  input.Link:hover { text-decoration: underline; }
  form.Inline { display: inline; }
  table.Form { border-collapse: collapse; }
  table.Form td { padding: 4px 8px 4px 0; vertical-align: middle; }
  .GameThumb { width: 160px; height: 100px; background: #6e99c9; color: #fff; display: flex; align-items: center; justify-content: center;
               text-align: center; font-weight: bold; font-size: 12px; padding: 6px; box-sizing: border-box; border: 1px solid #3e6d9e; }
  .PlaceThumb { display: block; max-width: 100%; height: auto; border: 1px solid #777; background: #bdd5ee; box-sizing: border-box; }
  .AvatarFrame { text-align: center; border: 1px solid #ccc; background: #fff; padding: 4px; }
  .AvatarFrame img { max-width: 100%; height: auto; }
  .ProfileName { text-align: center; font-weight: bold; font-size: 13px; }
  .Blurb { border: 1px solid #bbb; padding: 8px; background: #fafafa; }
  .CharacterIntro { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .CharacterIntro > div { flex: 1 1 220px; }
  .CharacterIntro h3 { margin-top: 0; }
  .Pager { margin-top: 8px; }
  .HomeLayout { display: grid; grid-template-columns: 204px minmax(0,1fr) 168px; gap: 10px; }
  .BrowseLayout { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; }
  .HomeLayout section, .BrowseLayout section { min-width: 0; }
  a img { border: 0; } /* Internet Explorer draws a blue border around linked pictures */
  .Portrait { object-fit: contain; background: white; display: block; margin: 0 auto; max-width: 100%; }
  /* ADMIN / BETA TESTER tag on a picture, like the catalog's LIMITED one */
  .RibbonHolder { position: relative; display: inline-block; zoom: 1; }
  .RibbonHolder .Ribbon { position: absolute; left: 0; bottom: 4px; }
  /* Catalog, laid out like austiblox's (floats and inline blocks: the same in IE8) */
  .CatalogTop { background: #f0f0f0; border: 1px solid #bbb; padding: 6px 10px; margin-bottom: 8px; }
  .CatalogTop h2 { display: inline; font-size: 15px; margin: 0 24px 0 0; }
  .CatalogTop form { display: inline; } .CatalogTop input { width: 300px; max-width: 60%; }
  .CatalogTop .ResetLink { font-size: 11px; }
  .CatalogLayout { zoom: 1; }
  .CatalogSide { float: left; width: 160px; }
  .SideBox { border: 1px solid #bbb; background: #f7f7f7; padding: 4px 10px; margin-bottom: 8px; }
  .SideBox h3 { color: #666; font-size: 12px; font-weight: normal; letter-spacing: 1px; margin: 8px 0 4px; }
  .SideBox ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 14px; }
  .SideBox li { margin: 3px 0; }
  .SideBox li.On a { font-weight: bold; }
  .SideBox li.On:before { content: "\25B6"; color: #c00; font-size: 9px; margin-left: -13px; padding-right: 4px; }
  .SideNote { font-size: 11px; }
  .CatalogMain { margin-left: 172px; }
  .DarkBox { border: 1px solid #555; background: #fff; }
  .DarkBox h2 { background: #3a3a3a; color: #fff; margin: 0; padding: 5px 8px; font-size: 15px; }
  /* Edit Game (My/Place.aspx), laid out like austiblox's: labels on the right of a grey column, rows striped. */
  .EditGame { padding: 14px 10px 8px; background: #f2f2f2; }
  table.EditGameForm { width: 100%; max-width: 666px; margin: 0 auto; border-collapse: collapse; border: 1px solid #bbb; background: #fff; }
  table.EditGameForm td { padding: 9px 8px; border-top: 1px solid #ddd; vertical-align: top; }
  table.EditGameForm tr:nth-child(even) td { background: #f0f0f0; }
  table.EditGameForm td.Label { width: 180px; text-align: right; font-weight: bold; color: #444; padding-top: 12px; }
  table.EditGameForm input[type=text], table.EditGameForm select, table.EditGameForm textarea { width: 100%; max-width: 430px; font-size: 12px; padding: 4px; }
  table.EditGameForm textarea { height: 110px; resize: vertical; }
  table.EditGameForm .Hint { display: block; font-size: 10px; color: #666; margin-top: 4px; }
  table.EditGameForm td.Submit { text-align: center; background: #fff; }
  table.EditGameForm td.Submit button { background: #fff; color: #000; border: 1px solid #333; font-weight: normal; padding: 3px 16px; }
  table.EditGameForm td.Submit button:hover { background: #eee; color: #000; }
  .EditGameWarning { text-align: center; color: #e00; margin: 12px 0 4px; }
  .EditGameLinks { text-align: center; margin: 0 0 10px; }
  .ItemGrid { padding: 8px 4px; }
  .ItemCard { display: inline-block; zoom: 1; vertical-align: top; width: 104px; margin: 4px 3px 10px; font-size: 10px; text-align: left; }
  .ItemPicture { display: block; position: relative; width: 96px; height: 96px; border: 1px solid #ccc; padding: 2px; text-align: center; background: #fff; }
  .ItemPicture .NoThumb { font-size: 10px; }
  .OffSale { position: absolute; left: 0; bottom: 2px; background: #900; color: #fff; font: bold italic 9px Arial, sans-serif; padding: 0 5px; }
  .ItemName { display: block; font-weight: bold; color: #00f; font-size: 11px; margin: 3px 0 2px; }
  .ItemFact { display: block; color: #333; }
  .ItemPrice { display: block; color: #060; font-weight: bold; }
  .Clear { clear: both; }
  @media (max-width: 600px) { .CatalogSide { float: none; width: auto; } .CatalogMain { margin-left: 0; } }
  .BetaIntro { border: 1px solid #9ab; background: #eef4fb; padding: 8px 12px; margin-bottom: 10px; }
  .BetaIntro h3 { margin: 6px 0; } .BetaIntro ul { margin: 6px 0 6px 18px; padding: 0; }
  .BetaStatus { border: 1px solid #bbb; background: #f7f7f7; padding: 4px 12px; margin-bottom: 8px; }
  .BetaStatus.Approved { background: #eaf7e6; border-color: #7b7; }
  .PeopleGrid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 18px 10px; text-align: center; }
  .PeopleGrid b { display: block; overflow-wrap: anywhere; margin-top: 6px; }
  .SearchBar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; padding: 6px 0 14px; }
  .SearchBar input { max-width: 100%; box-sizing: border-box; }
  .QuickLinks { padding-left: 16px; margin: 0; }
  .QuickLinks li { margin: 8px 0; }
  .CreateGrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 24px; }
  .CreateGrid a { border: 1px solid #7695b4; background: #e6eef7; padding: 20px; }
  .CreateGrid b { display: block; font-size: 22px; margin-bottom: 14px; }
  .CreateGrid span { color: #333; }
  @media (max-width: 760px) {
    .HomeLayout { grid-template-columns: 170px minmax(0,1fr); }
    .HomeLayout > aside:last-child { grid-column: 1 / -1; }
    .PeopleGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  }
  #Footer { margin: 10px 0 16px; font-size: 10px; color: #777; text-align: center; }
  #Footer p { margin: 4px 0; } #Footer .Legalese { color: #999; }
  .WikiText { font-size: 12px; line-height: 18px; } .WikiText h3 { border-bottom: 1px solid #aaa; margin: 14px 0 6px; } .WikiText h4 { margin: 10px 0 4px; font-size: 12px; }
  .WikiText ul { margin: 4px 0 8px 18px; padding: 0; } a.WikiNew { color: #c00; } .WikiFooter { margin-top: 16px; border-top: 1px solid #ddd; padding-top: 6px; }
  .WikiEdit textarea { width: 100%; box-sizing: border-box; font: 12px/1.5 Consolas, monospace; } .WikiHistory td { padding: 3px 10px 3px 0; } .WikiList { columns: 2; }
  .GameStats td:first-child { color: #666; white-space: nowrap; }
  .GameMiddle { display: grid; grid-template-columns: minmax(0,2fr) minmax(200px,1fr); gap: 10px; }
  .Description { white-space: pre-wrap; }
  .RatingBar { height: 10px; background: #c33; border: 1px solid #777; margin: 4px 0 6px; }
  .RatingBar div { height: 100%; background: #2d8b1d; }
  .Likes { color: #2d7a1d; } .Dislikes { color: #c33; }
  .Button.Red { background: #c33; border-color: #811; } .Button.Gold { background: #d9a400; border-color: #8a6a00; }
  .GameTabs { margin: 4px 0 0; } .GameTabs a { font-size: 13px; padding: 4px 14px; margin-bottom: 0; }
  .TabPanel[hidden] { display: none; }
  .CommentForm { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 10px; }
  .CommentForm textarea { flex: 1; min-width: 0; font: inherit; }
  .Comment { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #ddd; }
  .Comment p { margin: 0 0 4px; overflow-wrap: anywhere; }
  .ServerRow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ccc;
               background: #f6f6f6; margin-bottom: 8px; }
  .ServerRow p { margin: 0 0 4px; }
  .ServerPlayers img { border: 1px solid #ccc; background: #fff; margin: 2px 2px 0 0; }
  .PlacePicture { height: auto; }
  /* --- Groups: Layout matching Austiblox / 2008 ROBLOX with site theme --- */
  .GroupHeaderBody { display: flex; gap: 16px; align-items: flex-start; }
  .GroupEmblemBox { width: 140px; text-align: center; flex-shrink: 0; }
  .GroupEmblemImg { width: 140px; height: 140px; object-fit: cover; border: 1px solid #000; background: #f4f4f4; display: block; }
  .GroupMemberCount { font-size: 11px; font-weight: bold; color: #444; margin-top: 6px; text-align: center; }
  .GroupDetails { flex: 1; min-width: 0; }
  .GroupMeta { font-size: 11px; margin-bottom: 8px; line-height: 18px; }
  .GroupDescTitle { font-weight: bold; font-size: 11px; margin-top: 8px; margin-bottom: 2px; }
  .GroupDescText { font-size: 11px; line-height: 16px; white-space: pre-wrap; word-break: break-word; }
  .GroupActions { margin-top: 10px; }
  .GroupColumns { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
  .GroupColLeft { flex: 1 1 360px; min-width: 0; }
  .GroupColRight { flex: 1.25 1 450px; min-width: 0; }
  .GroupMembersGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; text-align: center; padding: 4px 0; }
  .GroupMemberItem { display: flex; flex-direction: column; align-items: center; font-size: 11px; overflow: hidden; }
  .GroupMemberAvatar { width: 64px; height: 64px; object-fit: contain; border: 1px solid #ccc; background: #fff; margin-bottom: 4px; }
  .GroupMemberName { font-weight: bold; color: #00f; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .GroupMemberRole { color: #555; font-size: 10px; margin-top: 2px; }
  .GroupForumTable { width: 100%; border-collapse: collapse; font-size: 11px; }
  .GroupForumTable th { background: #eee; border-bottom: 1px solid #ccc; padding: 5px 8px; font-weight: bold; color: #333; text-align: left; }
  .GroupForumTable td { padding: 6px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
  .GroupForumThread { display: flex; align-items: center; gap: 6px; }
  .GroupGamesGrid { display: flex; flex-wrap: wrap; gap: 14px; }
  .GroupGameCard { width: 160px; font-size: 11px; }
  .GroupGameThumb { width: 160px; height: 100px; object-fit: cover; border: 1px solid #000; background: #bdd5ee; display: block; }
  .GroupGameTitle { font-weight: bold; color: #00f; display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .GroupWallInput { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
  .GroupWallAvatar { width: 48px; height: 48px; object-fit: contain; border: 1px solid #ccc; background: #fff; flex-shrink: 0; }
  .GroupWallForm { flex: 1; }
  .GroupWallForm textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 11px; resize: vertical; border: 1px solid #999; padding: 4px; }
  .GroupSearchRow { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; align-items: center; }
  @media (max-width: 600px) {
    body { font-size: 13px; padding-bottom: 0; -webkit-text-size-adjust: 100%; }
    .HomeLayout, .BrowseLayout { display: block; }
    #Banner { height: auto; background-size: cover; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    #Options, #Logo, #Alerts, #Authentication, #Settings { position: static; width: auto; }
    #Options { order: 2; text-align: center; } #Logo { order: 1; } #Alerts { order: 3; }
    #Authentication input[type=text], #Authentication input[type=password] { width: 30%; font-size: 15px; padding: 4px; }
    #Navigation { display: flex; overflow-x: auto; white-space: nowrap; padding: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; line-height: normal; }
    #Navigation a { font-size: 14px; padding: 11px 12px; flex: none; }
    #Navigation span { display: none; }
    #Body { padding: 10px 6px; }
    .Box .Content { line-height: 19px; }
    .Box h2 { font-size: 15px; padding: 6px 8px; }
    .Grid { justify-content: center; }
    .PeopleGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .CreateGrid { grid-template-columns: 1fr; padding: 10px; }
    .GroupColumns { flex-direction: column; }
    .GroupHeaderBody { flex-direction: column; align-items: center; text-align: center; }
    .GroupEmblemBox { margin-bottom: 8px; }
    .GroupMembersGrid { grid-template-columns: repeat(2, 1fr); }
    input, select, textarea { font-size: 16px; }
    table.Form td { display: block; padding: 3px 0; }
    table.EditGameForm td { display: block; }
    table.EditGameForm td.Label { width: auto; text-align: left; padding: 8px 8px 0; border-top: 1px solid #ddd; }
    table.EditGameForm td.Label + td { border-top: 0; padding-top: 4px; }
    #Body { padding: 10px 6px; }
  }