/* Late-2008 Roblox shell. Base rules follow Roblox's archived Nov 2007
   AllCSS.ashx (body 8pt Comic Sans, 900px #Container, 72px #Banner, #6e99c9
   Navigation in 12pt Comic Sans, 7pt legalese footer); the banner artwork is
   TPBlox's own, composed like the Aug-Oct 2008 banner (scene | logo | PLAY NOW). */
* { box-sizing: border-box; }
body { margin: 0; margin-top: 0; background: #fff; color: #000; font: normal 8pt/normal 'Comic Sans MS', Verdana, sans-serif; }
a { text-decoration: none; }
a:link, a:visited, a:active { color: Blue; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #275bb3; outline-offset: 2px; }
h2 { letter-spacing: 1px; }
h3 { font-size: 12pt; font-weight: bold; letter-spacing: 2px; margin: 10px 0; }
#Container { width: 900px; max-width: calc(100% - 24px); margin: 0 auto; }
#Header { margin: 10px auto 0; border-top: solid 1px #000; color: White; font: bold 12px/normal Verdana, sans-serif; text-align: center; }
#Header a, #Header a:visited, #Header a:active { color: White; text-decoration: none; }
#Header a:hover { color: White; text-decoration: underline; }
#Banner { display: flex; height: 72px; border: solid 1px #000; border-top: 0; text-align: center; }
#Banner #Options { position: relative; width: 287px; flex-shrink: 0; background: linear-gradient(90deg,rgba(42,10,8,.55),rgba(76,16,10,.7)), url('assets/playworld.png') center 43% / cover; text-align: left; }
#Banner #Authentication { position: absolute; top: 0; left: 0; padding: 4px; font-size: 11px; text-shadow: 1px 1px #000; }
#Banner #Logo { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; background: #fff; }
#LogoText, #Header #LogoText { font: 900 43px/1 'Arial Black',Arial,sans-serif; letter-spacing: -3px; color: #fff; -webkit-text-stroke: 2px #ed191e; text-shadow: 2px 2px 0 #ed191e; text-decoration: none; transform: rotate(-4deg); }
#Tagline { color: #343c97; font: bold 19px/1.2 'Comic Sans MS','Trebuchet MS',sans-serif; text-align: left; }
#Banner #Alerts { width: 287px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 0%,#7078ed,#152a9f 60%,#090963); }
#Header #PlayNow { border: 1px solid #5e70d6; border-radius: 3px; padding: 3px 10px; color: #fff; background: linear-gradient(#acb5f4,#4b57bd); box-shadow: 0 2px 2px #080851; font: 900 25px/1.15 Arial,sans-serif; text-decoration: none; }
#Header #PlayNow:hover { background: linear-gradient(#c3cbff,#5c69d2); text-decoration: none; }
/* Logged in: the white alert box (Nov 2007 AllCSS #AlertSpace) */
#Banner #AlertSpace { background-color: #fff; border: solid 1px #000; color: #6e99c9; margin: 0 auto; padding: 5px 10px; text-align: center; width: 200px; font: bold 12px/1.45 Verdana, sans-serif; }
#Header #AlertSpace #MessageAlert a { color: #6e99c9; }
#Header #AlertSpace #MessageAlert a:hover { color: #1874CD; }
#Header #AlertSpace #RobuxAlert a { color: Green; }
#Header #AlertSpace #RobuxAlert a:hover { color: #49b745; }
#Header #AlertSpace #TicketsAlert a { color: #fbb117; }
#Header #AlertSpace #TicketsAlert a:hover { color: #fdd017; }
#Header .Navigation { clear: both; background-color: #6e99c9; border: solid 1px #000; border-top: 0; color: #fff; font: normal 12pt/2em 'Comic Sans MS', Verdana, sans-serif; text-decoration: none; }
#Main { margin: 10px 0; min-height: 440px; }
#Footer { border-top: 1px solid #999; color: #000; text-align: center; padding: 5px 0; margin-top: 10px; font: normal 7pt/1.4 Verdana, sans-serif; }
#Footer p { margin: 2px 0; }
.home-layout { display: flex; align-items: flex-start; gap: 12px; }
.home-sidebar { flex: 0 0 152px; min-width: 0; }
.member-panel { border: 1px solid #333; background: #eee; }
.member-panel h2 { margin: 0; background: #ccc; border-bottom: 1px solid #333; padding: 5px; font-size: 10px; font-weight: normal; letter-spacing: 1px; }
.member-panel form, .member-links { padding: 6px; }
.member-panel label { display: block; font-size: 10px; font-weight: bold; margin-bottom: 2px; }
.member-panel input[type=text], .member-panel input[type=password] { width: 100%; border: 2px dashed #888; background: white; margin-bottom: 7px; }
.member-actions { text-align: center; line-height: 2.6; font-size: 9px; }
.member-actions .Button { display: inline-block; width: 64px; line-height: 1.2; }
.member-links p { margin: 3px 0 9px; overflow-wrap: anywhere; }
.member-links > a { display: block; margin: 7px 0; }
.home-character { display: block; margin: 32px 0 0; text-align: center; font-size: 10px; }
.home-character img { display: block; width: 150px; max-width: 100%; height: 190px; object-fit: cover; }
.playworld { flex: 1; min-width: 0; border: 1px solid #333; background: #eee; padding: 10px; }
.playworld h1, .playworld h2, .home-feature h3, .playworld-cta { font-family: 'Comic Sans MS','Trebuchet MS',sans-serif; }
.playworld h1 { margin: 0 0 4px; font-size: 24px; font-weight: bold; }
.playworld h2 { margin: 0 0 14px; font-size: 16px; }
.playworld-columns { display: flex; gap: 14px; }
.playworld-features { flex: 1; min-width: 0; }
.home-feature { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 23px; }
.home-feature img { border: 1px solid #333; background: white; flex-shrink: 0; }
.home-feature h3 { font-size: 13px; letter-spacing: 0; margin: 0 0 5px; }
.home-feature p { margin: 0; font-size: 10px; line-height: 1.45; }
.playworld-preview { flex: 0 0 53%; min-width: 0; }
.world-picture { display: block; height: 275px; border: 1px solid #222; position: relative; overflow: hidden; background: #69a2d1; }
.world-picture img { width: 100%; height: 100%; object-fit: cover; }
.world-picture span { position: absolute; left: 0; right: 0; top: 0; padding: 9px 5px; background: linear-gradient(rgba(0,0,0,.5),transparent); color: white; text-shadow: 2px 2px #222; text-align: center; font: bold 29px Georgia,serif; }
.preview-caption { text-align: center; font-size: 9px; margin: 6px 0; color: #444; }
.playworld-cta, a.playworld-cta:link, a.playworld-cta:visited { display: block; padding: 7px 3px; border: 2px solid #444; border-radius: 9px; background: #c9dc4c; color: #000; font-size: 22px; font-weight: bold; text-align: center; text-decoration: none; }
.playworld-cta:hover { background: #d9ea68; text-decoration: none; }
.home-parents { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 25px; }
.home-parents a { border: 1px solid #777; background: #fff; padding: 12px 8px; text-align: center; color: #443878; text-decoration: none; }
.home-parents strong { display: block; font: bold 19px 'Comic Sans MS',sans-serif; }
.home-parents span { display: block; font-size: 9px; margin-top: 4px; }
.home-parents small { color: #666; font-size: 9px; text-align: right; }
.cool-places { display: flex; margin-top: 14px; border: 1px solid #333; }
.cool-places-heading { flex: 0 0 162px; padding: 7px; background: #ccc; text-align: center; border-right: 1px solid #333; }
.cool-places-heading h2 { font-size: 15px; margin: 0 0 6px; }
.cool-places-heading p { font-size: 10px; margin: 0 0 5px; }
.cool-places-heading a { font-size: 9px; }
.cool-places-list { flex: 1; min-width: 0; display: flex; gap: 12px; padding: 9px; }
.cool-place { flex: 1; min-width: 0; max-width: 132px; text-decoration: none; font-size: 9px; }
.cool-place img, .place-no-image { width: 100%; height: 74px; object-fit: cover; border: 1px solid #aaa; display: block; }
.place-no-image { display: flex; align-items: center; justify-content: center; text-align: center; background: #eee; color: #666; }
.place-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 4px; }
.places-empty { align-self: center; padding: 5px; }
/* Browse-style pages (Games / People / Models): filter column + grid, after
   the 2008 Games.aspx (Nov 2007 AllCSS .DisplayFilters / #GamesContainer) */
.listing { display: flex; gap: 20px; font-family: Verdana, Sans-Serif; }
.listing-sidebar { width: 175px; flex-shrink: 0; }
.listing-sidebar h2 { font: normal 2.5em/1em Verdana, Sans-Serif; margin: 0; }
.listing-sidebar h4 { font: normal 1.3em/1em Verdana, Sans-Serif; letter-spacing: 0.1em; margin: 15px 0; }
.listing-sidebar a { display: block; font-size: 1.1em; text-decoration: none; margin-bottom: 0.5em; }
.listing-sidebar a:hover { text-decoration: underline; }
.listing-sidebar a.sel { font-weight: bold; }
.listing-sidebar a.sel::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 3px; background: #e25b62; border: 1px solid #b83d44; vertical-align: -1px; }
.listing-main { flex: 1; min-width: 0; }
.listing-main > h3 { font: normal 1.5em 'Comic Sans MS', Arial, Sans-Serif; letter-spacing: 0; margin: 0 0 10px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 162px); gap: 14px 21px; }
.gcard { min-width: 0; font: normal 8pt/1.45 Verdana, Sans-Serif; overflow-wrap: anywhere; }
.gcard img, .gcard .noimg { width: 162px; height: 102px; object-fit: cover; border: 1px solid #000; display: block; background: #eee; }
.gcard .noimg { display: flex; align-items: center; justify-content: center; color: #777; }
.gcard a.title { font-weight: bold; display: block; margin: 4px 0 2px; text-decoration: none; }
.gcard a.title:hover { text-decoration: underline; }
.gcard .stat { color: #000; }
.gcard .stat b { color: #000; }
.gcard .online { color: Red; font-weight: bold; }
.classic-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.classic-table th { background: #7199c3; color: white; padding: 5px 6px; text-align: left; }
.classic-table td { border-bottom: 1px solid #ccd6e4; padding: 6px; background: white; }
.classic-table tr:nth-child(even) td { background: #eff4fb; }
.box { border: 1px solid #777; background: #eee; padding: 10px; margin-bottom: 15px; }
.box h3 { margin: -10px -10px 10px; border-bottom: 1px solid #777; background: #ccc; padding: 5px 8px; font-size: 13px; color: #222; }
input, select, textarea { font: 11px Verdana,Arial,sans-serif; }
input[type=text], input[type=password], input[type=color], input[type=email], textarea, select { border: 1px solid #888; padding: 3px; }
button, input[type=submit] { background: #eee; border: 1px solid #888; box-shadow: inset 1px 1px white, inset -1px -1px #ccc; padding: 3px 9px; cursor: pointer; font: 11px Verdana,Arial,sans-serif; }
button:hover, input[type=submit]:hover { background: #ddd; }
.currency-tix { color: #ffe278; font-weight: bold; }
.currency-robux { color: #8ada75; font-weight: bold; }
@media (max-width: 720px) {
    #Container { max-width: calc(100% - 16px); }
    #Banner #Options, #Banner #Alerts { width: 25%; }
    #LogoText, #Header #LogoText { font-size: 30px; -webkit-text-stroke-width: 1px; } #Tagline { display: none; } #Header #PlayNow { font-size: 16px; }
    #Header .Navigation { font-size: 10pt; }
    .home-sidebar { flex-basis: 140px; } .playworld-columns { flex-direction: column; }
    .playworld h1 { font-size: 20px; } .home-parents { margin: 0 0 15px; }
    .cool-places-list { flex-wrap: wrap; } .cool-place { flex-basis: 90px; }
    .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .listing-sidebar { width: 125px; }
}
@media (max-width: 440px) {
    .home-layout { display: block; } .home-sidebar { margin-bottom: 10px; }
    .home-character { display: none; } .member-panel form { display: grid; grid-template-columns: 95px 1fr; gap: 4px; align-items: center; }
    .member-actions { grid-column: 1 / -1; } .member-panel input[type=text], .member-panel input[type=password] { margin: 0; }
    .cool-places-heading { flex-basis: 105px; } .listing { gap: 10px; } .listing-sidebar { width: 100px; }
    .card-grid { grid-template-columns: 1fr; }
}

.avatar-preview {
    --avatar-color: #F5CD30;
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid #CCCCCC;
    margin: 0 auto;
    background-color: #EEEEEE;
}

.avatar-head,
.avatar-body,
.avatar-arm,
.avatar-leg {
    position: absolute;
    /* Per-limb color falls back to the single --avatar-color when a limb
       variable isn't provided (People-page cards still pass one color) */
    background-color: var(--avatar-color);
    border: 1px solid #777777;
}

.avatar-head {
    width: 36px;
    height: 32px;
    left: 56px;
    top: 15px;
    background-color: var(--color-head, var(--avatar-color));
}

.avatar-body {
    width: 48px;
    height: 48px;
    left: 50px;
    top: 52px;
    background-color: var(--color-torso, var(--avatar-color));
}

.avatar-arm {
    width: 22px;
    height: 48px;
    top: 52px;
}

.avatar-left-arm  { left: 25px;  background-color: var(--color-left_arm, var(--avatar-color)); }
.avatar-right-arm { left: 101px; background-color: var(--color-right_arm, var(--avatar-color)); }

.avatar-leg {
    width: 22px;
    height: 36px;
    top: 103px;
}

.avatar-left-leg  { left: 50px; background-color: var(--color-left_leg, var(--avatar-color)); }
.avatar-right-leg { left: 76px; background-color: var(--color-right_leg, var(--avatar-color)); }

/* Smaller preview used on the People page cards */
.avatar-preview-small {
    transform: scale(0.85);
    transform-origin: top center;
    margin-bottom: -20px;
}

/* Classic character editor, with a real engine-rendered portrait. */
.avatar-editor { display: flex; align-items: flex-start; gap: 18px; }
.avatar-stage { flex: 0 0 324px; text-align: center; }
.avatar-portrait-frame { background: #fff; border: 1px solid #aaa; }
.avatar-portrait-frame img { width: 100%; max-width: 300px; height: auto; object-fit: contain; display: block; margin: auto; }
.avatar-portrait-frame img[aria-busy=true] { opacity: .65; }
.avatar-colors { flex: 1; min-width: 0; }
.body-color-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 15px 0; }
.body-color-list label { border: 1px solid #bbb; background: #fff; padding: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.body-color-list input { width: 45px; height: 28px; padding: 1px; cursor: pointer; }
.classic-color-palette { display: grid; grid-template-columns: repeat(8, 28px); gap: 5px; margin: 12px 0; }
.classic-color-palette button { width: 28px; height: 28px; border: 1px solid #555; padding: 0; }
.avatar-save-actions { border-top: 1px solid #bbb; padding-top: 12px; margin-top: 16px; }
#avatar-unsaved { color: #655020; font-size: 10px; }
.avatar-save-message { color: #176021; } .avatar-error { color: #a01919; }
@media(max-width:720px) { .avatar-editor { flex-direction: column; } .avatar-stage { flex-basis: auto; width: 100%; } .avatar-colors { width: 100%; } }

/* ---- Item page (Item.aspx). Rules from Roblox's archived Nov 2007
   AllCSS.ashx (#ItemContainer, .Button, .modalPopup), laid out like the
   late-2008 markup (name heading, Favorite under the thumbnail, Commentary).
   The container is widened from 2007's 620px to fit the 2008 comments pane. */
#ItemContainer { background-color: #eee; border: solid 1px #555; color: #555; margin: 0 auto; width: 725px; }
#ItemContainer h2 { background-color: #ccc; border-bottom: solid 1px #555; color: #333; font: normal x-large 'Comic Sans MS', Verdana, sans-serif; letter-spacing: 1px; margin: 0; text-align: center; }
#ItemContainer h3 { font-size: 1.5em; font-weight: normal; letter-spacing: 0.15em; line-height: 1em; margin: 0 0 0.5em 0; padding: 0; }
#ItemContainer #Item { font: normal 8pt/normal Verdana, sans-serif; }
#ItemContainer #Details { padding: 10px; }
#ItemContainer #LeftColumn { float: left; width: 252px; }
#ItemContainer #Thumbnail { background: #fff; border: solid 1px #555; height: 250px; width: 250px; overflow: hidden; }
#ItemContainer #Thumbnail .ItemThumb { display: block; }
#ItemContainer #Actions { text-align: center; padding: 4px 0; }
#ItemContainer #Actions .Disabled { color: #999; }
#ItemContainer #Summary { background-color: #fff; border: dashed 1px #555; float: right; margin-left: 10px; padding: 5px 5px 5px 15px; position: relative; width: 420px; line-height: 1.6em; }
#ItemContainer #Summary h3 { margin-left: -10px; }
#ItemContainer #Summary #Creator { clear: left; }
#ItemContainer #Summary .Creator .Avatar { float: right; }
#ItemContainer #Summary .Creator .Avatar img { width: 64px; height: 64px; object-fit: contain; border: solid 1px #555; background: #fff; }
#ItemContainer #Summary #DescriptionLabel { margin-bottom: 0.4em; margin-top: 0.7em; clear: right; }
#ItemContainer #Summary #Description { border: solid 1px #555; font: normal 1em/normal Verdana, sans-serif; max-height: 136px; line-height: 1.7em; padding: 5px; overflow: auto; text-align: left; width: 390px; }
#ItemContainer #Summary #ReportAbuse { margin-top: 10px; }
#ItemContainer #PriceInRobux, #ItemContainer #PricePublicDomain { color: Green; float: left; font-weight: bold; line-height: 2em; width: 100px; }
#ItemContainer #PriceInTickets { color: #fbb117; float: left; font-weight: bold; line-height: 2em; width: 100px; }
#ItemContainer #BuyWithRobux, #ItemContainer #BuyWithTickets, #ItemContainer #BuyForFree { float: left; line-height: 2em; width: 110px; }
#ItemContainer #TicketsPurchase, #ItemContainer #PublicDomainPurchase { overflow: hidden; margin-bottom: 4px; }
#ItemContainer #BuyForFree .Button:hover, #ItemContainer #BuyWithRobux .Button:hover { background-color: #49b745; border: solid 1px #000; color: #fff; }
#ItemContainer #BuyWithTickets .Button:hover { background-color: #fdd017; border: solid 1px #000; color: #fff; }
#ItemContainer #Ownership { border: dashed 1px #ff0000; background-color: #ccc; color: #ff0000; float: right; margin-top: 10px; padding: 10px 5px; text-align: center; width: 440px; }
#ItemContainer #Ownership .Button { background-color: #fff; margin-left: 8px; }
#ItemContainer .ItemNotice { background: #ffffdd; border-bottom: solid 1px #555; color: #333; padding: 5px 10px; text-align: center; }
#ItemContainer #Commentary { margin: 0 10px 10px; }
#ItemContainer #Commentary > h3 { font-size: 12pt; font-weight: bold; letter-spacing: 2px; margin: 10px 0; }
#ItemContainer .CommentsContainer { margin: 10px 0 0 0; }
#ItemContainer .CommentsContainer h3 { font-size: 10pt; letter-spacing: 1px; }
#ItemContainer .CommentsContainer .Comments { border: dashed 1px #555; }
#ItemContainer .CommentsContainer .Comment, #ItemContainer .CommentsContainer .AlternateComment { padding: 7px 10px; }
#ItemContainer .CommentsContainer .Comment { background-color: #fff; }
#ItemContainer .CommentsContainer .Commenter { float: left; width: 70px; }
#ItemContainer .CommentsContainer .Avatar { border: solid 1px #555; height: 64px; width: 64px; background: #fff; }
#ItemContainer .CommentsContainer .Avatar img { width: 64px; height: 64px; object-fit: contain; }
#ItemContainer .CommentsContainer .Post { float: left; width: 600px; }
#ItemContainer .CommentsContainer .Content { margin: 10px 0; overflow-wrap: anywhere; }
#ItemContainer .CommentsContainer .PostAComment { margin: 10px 0 0 0; }
#ItemContainer .CommentsContainer .PostAComment .Buttons { margin: 10px 0 0 0; }
#ItemContainer .CommentsContainer textarea { width: 400px; }
#ItemContainer .LinkButton { background: none; border: 0; box-shadow: none; color: Blue; cursor: pointer; font: inherit; padding: 0; }
#ItemContainer .LinkButton:hover { text-decoration: underline; background: none; }

/* Era .Button (Nov 2007 AllCSS): white, grey outline, blue on hover */
input.Button, .Button { cursor: pointer; background-color: #fff; border: solid 1px #333; color: #333; font-family: Verdana, Sans-Serif; font-size: 0.9em; padding: 3px 10px; text-decoration: none; box-shadow: none; }
a.Button:link, a.Button:visited { border: solid 1px #777; color: #777; }
input.Button:hover, .Button:hover, .Button:active, a.Button:hover { background-color: #6e99c9; border: solid 1px #000; color: #fff; text-decoration: none; }

/* ItemPurchasePopupPanel: .modalBackground / .modalPopup (Nov 2007 AllCSS) */
.modalBackground { position: fixed; inset: 0; background-color: Gray; opacity: 0.3; z-index: 100; }
.modalPopup { position: fixed; left: 50%; top: 35%; transform: translate(-50%, -50%); width: 360px; max-width: calc(100% - 32px);
              background-color: #ffffdd; border: 3px solid Gray; padding: 3px 12px 12px; z-index: 101; font: normal 8pt/1.6 Verdana, sans-serif; color: #333; }
.modalPopup .PopupButtons { text-align: center; }
.modalPopup .PopupButtons .Button { margin: 0 4px; }
.modalPopup .Tickets { color: #fbb117; font-weight: bold; }

/* ---- Catalog (Catalog.aspx). Nov 2007 AllCSS #CatalogContainer rules. ---- */
#CatalogContainer { font-family: Verdana, Sans-Serif; position: relative; }
#CatalogContainer h2 { font-family: Verdana, Sans-Serif; font-size: 2.5em; font-weight: normal; line-height: 1em; margin: 0; padding: 0; }
#CatalogContainer h4 { font-family: Verdana, Sans-Serif; font-size: 1.3em; font-weight: normal; letter-spacing: 0.1em; line-height: 1em; margin: 15px 0; padding: 0; }
#CatalogContainer ul { font-family: Verdana, Sans-Serif; list-style: none; margin: 10px 0 30px 0; padding-left: 0; }
#CatalogContainer ul li { margin-bottom: 0.5em; }
#CatalogContainer ul a { font-size: 1.1em; text-decoration: none; }
#CatalogContainer .DisplayFilters { float: left; margin-right: 3px; width: 185px; }
#CatalogContainer .Assets { float: left; overflow: hidden; padding-bottom: 10px; width: 710px; }
#CatalogContainer .SearchBar { background-color: #eee; border: solid 1px #bbb; height: 30px; margin: -5px 0 5px 0; padding: 0; text-align: center; }
#CatalogContainer .SearchBar .SearchBox, #CatalogContainer .SearchBar .SearchButton { height: 30px; margin: 0; padding: 0; }
#CatalogContainer .SearchBar .TextBox { border: solid 1px #000; height: 19px; margin: 4px 0 0 0; padding: 2px 3px 0 3px; width: 250px; }
#CatalogContainer .SearchBar sup { font-size: 0.8em; margin-left: 4px; }
#CatalogContainer .Assets .HeaderPager { padding: 2px 0; text-align: right; margin-bottom: 10px; }
#CatalogContainer .Assets .HeaderPager .Label { font-size: 1em; vertical-align: middle; }
#CatalogContainer .AssetsDataList { border-collapse: collapse; margin: 0; clear: both; }
#CatalogContainer .AssetsDataList td { padding: 0 9px 0 0; }
#CatalogContainer .Asset { margin: -1px 0 15px -1px; vertical-align: top; width: 122px; }
#CatalogContainer .Asset .AssetThumbnail { background: #fff; border: solid 1px #000; height: 120px; text-align: center; width: 120px; overflow: hidden; }
#CatalogContainer .Asset .AssetThumbnail .ItemThumb { display: block; }
#CatalogContainer .Asset .AssetDetails { font-family: Verdana, Sans-Serif; overflow: hidden; padding: 2px 0 6px 0; width: 120px; overflow-wrap: anywhere; }
#CatalogContainer .AssetName a { font-size: 0.9em; font-weight: bold; line-height: 1.5em; vertical-align: top; }
#CatalogContainer .Label, #CatalogContainer .Detail, #CatalogContainer .PriceInRobux, #CatalogContainer .PriceInTickets { font-size: 0.8em; }
#CatalogContainer .PriceInRobux { color: Green; font-weight: bold; }
#CatalogContainer .PriceInTickets { color: #fbb117; font-weight: bold; }
#CatalogContainer .AssetsDisplaySet { float: left; font-family: 'Comic Sans MS', Arial, Sans-Serif; font-size: 1.5em; }
#CatalogContainer .NoResults { clear: both; }
/* images/games_bullet.png: the small red square beside the selected filter */
.GamesBullet { display: inline-block; width: 10px; height: 10px; margin-right: 3px; background: #e25b62; border: 1px solid #b83d44; vertical-align: -1px; }
.ItemThumb.NoThumb { display: flex; align-items: center; justify-content: center; color: #999; font-size: 9px; text-align: center; }

/* ---- User home page (User.aspx). Nov 2007 AllCSS #UserContainer rules; the
   profile pane's light steel blue matches the Mar 2008 capture. ---- */
#UserContainer { font-family: Verdana, Sans-Serif; }
#UserContainer #LeftBank { float: left; text-align: center; width: 444px; }
#UserContainer #RightBank { float: right; text-align: center; width: 444px; }
#ProfilePane, #UserPlacesPane, #UserBadgesPane, #UserStatisticsPane, #FriendsPane, #UserAssetsPane { border: solid 1px #000; }
#UserBadgesPane, #UserStatisticsPane, #FriendsPane { margin: 10px 0 0 0; }
#UserAssetsPane { clear: both; margin: 10px 0; text-align: center; }
#ProfilePane { background-color: LightSteelBlue; padding: 10px; font: normal 8pt 'Comic Sans MS', Verdana, sans-serif; }
#ProfilePane .ProfileName { font: normal 16pt 'Comic Sans MS', Verdana, sans-serif; letter-spacing: 0; margin: 0; }
#ProfilePane .RoleTag { color: #c00; font-size: 8pt; } #ProfilePane .RoleTag.Mod { color: #06c; }
#ProfilePane .OnlineStatus { color: #777; margin-bottom: 12px; } #ProfilePane .OnlineStatus.Online { color: Green; }
#ProfilePane .ProfileLink { margin-bottom: 8px; }
#ProfilePane .ProfileBody { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
#ProfilePane .ProfileAvatar { flex: 0 0 150px; text-align: center; }
#ProfilePane .ProfileAvatar img { width: 150px; height: 190px; object-fit: contain; display: block; }
#ProfilePane .ProfileActions { flex: 1; text-align: center; padding-top: 10px; }
#ProfilePane .ProfileActions a, #ProfilePane .ProfileActions .InlineForm { display: block; margin: 0 0 6px; }
#ProfilePane .MyTPBlox a { display: block; margin-bottom: 6px; }
#ProfilePane .FriendState { display: block; color: Green; font-weight: bold; margin-bottom: 4px; }
#ProfilePane .Blurb { margin-top: 8px; text-align: center; overflow-wrap: anywhere; }
#ProfilePane .Blurb textarea { width: 100%; font: normal 8pt Verdana, sans-serif; }
#ProfilePane .Blurb .Button { margin-top: 4px; }
.LinkButton, button.LinkButton { background: none; border: 0; box-shadow: none; color: Blue; cursor: pointer; font: inherit; padding: 0; }
.LinkButton:hover, button.LinkButton:hover { text-decoration: underline; background: none; }
#UserAssets h4, #UserBadges h4, #UserStatistics h4, #Friends h4 { background-color: #ccc; border-bottom: solid 1px #000; color: #333; margin: 0; text-align: center; font: bold 8pt/1.6 Verdana, sans-serif; }
#UserStatistics h4 { font: normal 11pt/1.5 'Comic Sans MS', Verdana, sans-serif; }
#UserBadgesPane #UserBadges { background-color: #fff; }
#UserBadges .BadgeList { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 10px; }
#UserBadges .Badge { width: 82px; text-align: center; }
#UserBadges .BadgeIcon { font-size: 48px; line-height: 75px; height: 75px; }
#UserStatisticsPane #UserStatistics { background-color: #eee; text-align: left; }
#UserStatistics #Results { padding: 5px 10px 10px 10px; }
#UserStatistics .Statistic { line-height: 1.8em; margin: 0 auto; width: 385px; overflow: hidden; }
#UserStatistics .Label { float: left; text-align: right; width: 178px; }
#UserStatistics .Value { float: right; width: 177px; }
acronym { cursor: help; border-bottom: 1px dotted #000; }
#UserPlaces .AccordionHeader { background-color: #ccc; border-bottom: solid 1px #000; border-top: solid 1px #000; cursor: pointer; font: bold 1em/normal Verdana, sans-serif; letter-spacing: 0.1em; margin: 1px 0; padding: 1px 1em; text-align: left; }
#UserPlaces .AccordionHeader:hover { background-color: #6e99c9; color: #fff; }
#UserPlaces .Place { padding: 5px 10px; }
#UserPlaces .Place .PlayStatus { margin: 5px 0 0 0; display: inline; }
#UserPlaces .Place .PlayOptions { margin: 5px 0 0 0; display: inline; }
#UserPlaces .Place .PlayOptions .Button { border-color: #333; color: #333; margin: 0 3px; }
#UserPlaces .Place .PlayOptions .Button:hover { background-color: #6e99c9; color: #fff; }
#UserPlaces .Place .Statistics { border-top: dashed 1px #555; border-left: dashed 1px #555; border-right: dashed 1px #555; color: #555; letter-spacing: 0.1em; line-height: 1.7em; margin-top: 10px; }
#UserPlaces .Place .Thumbnail { border: solid 1px #555; margin: 0; }
#UserPlaces .Place .Thumbnail img { width: 100%; height: 230px; object-fit: cover; display: block; }
#UserPlaces .Place .Description { border: dashed 1px #555; color: #555; max-height: 75px; line-height: 1.7em; margin: 5px 0 0 0; padding: 5px 10px; overflow: auto; text-align: left; }
#Friends h4 { background: none; border: 0; color: #000; font: bold 10pt/1em 'Comic Sans MS', Verdana, sans-serif; margin: 10px 0 5px; }
#Friends .FriendList { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; padding: 5px 10px 10px; }
#Friends .Friend { width: 110px; }
#Friends .Friend .Avatar img { width: 100px; height: 100px; object-fit: contain; }
#Friends .OnlineStatus { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c00; margin-right: 4px; }
#Friends .OnlineStatus.Online { background: #0a0; }
#UserContainer .None { color: #777; padding: 10px; margin: 0; }
#UserContainer #AssetsMenu { float: left; width: 178px; }
#UserAssetsPane .AssetsMenuItem, #UserAssetsPane .AssetsMenuItem_Selected { border: solid 1px #777; margin: 15px; padding: 3px 10px; width: 100px; }
#UserAssetsPane .AssetsMenuItem:hover { border: solid 1px #000; }
#UserAssetsPane .AssetsMenuItem_Selected { background-color: #6e99c9; border: solid 1px #000; }
#UserAssetsPane .AssetsMenuButton { color: #777; font: normal 14px/normal Verdana, sans-serif; display: block; }
#UserAssetsPane .AssetsMenuButton:hover { color: #000; text-decoration: none; }
#UserAssetsPane .AssetsMenuButton_Selected { color: #fff; font: normal 14px/normal Verdana, sans-serif; text-decoration: none; display: block; }
#UserContainer #AssetsContent { float: left; margin: 10px 28px; padding-bottom: 10px; text-align: left; width: 662px; display: flex; flex-wrap: wrap; }
#UserContainer .Asset { margin: 0 10px 15px 10px; vertical-align: top; width: 112px; }
#UserContainer .Asset .AssetThumbnail { background: #fff; border: solid 1px #000; height: 110px; text-align: center; width: 110px; overflow: hidden; }
#UserContainer .Asset .AssetThumbnail .ItemThumb { display: block; }
#UserContainer .Asset .AssetDetails { overflow: hidden; padding: 2px 0 6px 0; width: 110px; }
#UserContainer .AssetName a { font-size: 0.9em; font-weight: bold; line-height: 1.5em; }
#UserContainer .Label, #UserContainer .Detail, #UserContainer .PriceInRobux, #UserContainer .PriceInTickets { font-size: 0.8em; }
#UserContainer .PriceInRobux { color: Green; font-weight: bold; }
#UserContainer .PriceInTickets { color: #fbb117; font-weight: bold; }

/* ---- Sign up / log in (Login/New.aspx, Login/Default.aspx, 2007) ---- */
#SignUpContainer { font-family: 'Comic Sans MS', Verdana, sans-serif; }
.SignUpPanel { background: #eee; border: solid 1px #000; }
.SignUpPanel h2 { background: #ccc; border-bottom: solid 1px #000; color: #333; font: normal 20pt 'Comic Sans MS', Verdana, sans-serif; letter-spacing: 1px; margin: 0; padding: 2px; text-align: center; }
.SignUpPanel p { font-size: 10pt; margin: 12px 20px; }
#SignUp { float: left; width: 622px; padding-bottom: 20px; }
#SignUp h3 { text-align: center; font-size: 12pt; letter-spacing: 2px; }
#SignUp fieldset { width: 372px; margin: 0 auto 20px; border: 1px solid #aaa; padding: 4px 10px 12px; }
#SignUp legend { font-size: 10pt; color: #333; }
#SignUp .Suggestion { font: normal 8pt Verdana, sans-serif; color: #555; margin-bottom: 12px; }
.SignUpPanel .Field { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 8px 0; font: bold 9pt Verdana, sans-serif; letter-spacing: 1px; }
.SignUpPanel .TextBox { border: 2px dashed #888; width: 164px; height: 32px; padding: 3px; background: #fff; }
#SignUp .Confirm { text-align: center; }
input.BigButton, .BigButton { background: #f5ce31; border: 2px solid #777; color: #000; cursor: pointer; font: bold 16pt 'Comic Sans MS', Verdana, sans-serif; padding: 6px 42px; box-shadow: none; }
input.BigButton:hover, .BigButton:hover { background: #ffe066; }
#SignUpSidebar { float: right; width: 250px; }
#SignUpSidebar .SignUpPanel { margin-bottom: 20px; }
#SignUpSidebar h2 { font-size: 12pt; letter-spacing: 2px; padding: 5px; }
.SignUpError { background: #ffffdd; border: 1px solid #c00; color: #c00; margin: 0 auto 12px; padding: 5px; text-align: center; width: 392px; font: normal 8pt Verdana, sans-serif; }
#LoginContainer { width: 546px; margin: 30px auto; padding: 10px 22px 20px; font: normal 11pt Verdana, sans-serif; background: #fff; }
#LoginContainer h3 { font-size: 13pt; letter-spacing: 0; margin: 20px 0 10px; }
#LoginContainer p { margin: 10px 0; font-size: 11pt; }
#LoginContainer .Field { justify-content: flex-start; font: normal 11pt Verdana, sans-serif; letter-spacing: 0; margin: 4px 0; }
#LoginContainer .Field label, #LoginContainer .Field > span { width: 100px; }
#LoginContainer .TextBox { border: 1px solid #888; height: auto; width: 180px; }
#LoginContainer .SignUpError { width: auto; }

.gcard .ShirtThumb { display: block; width: 122px; height: 122px; border: 1px solid #000; background: #fff; }
.gcard .ShirtThumb .ItemThumb { display: block; }

a.BigButton, a.BigButton:link, a.BigButton:visited { display: inline-block; color: #000; text-decoration: none; }
a.BigButton:hover { text-decoration: none; }
#SignUp p { font-size: 10pt; margin: 12px 40px; }