/* DooDooBlox account pages in the late-2015 look.
   .r15  - the "new" 2015 pages (Friends, Inventory, Games): grey page, white cards.
   .r15o - the older pages (Money, Groups, Messages): square tabs, grey boxes.
   Both reuse the shared Ddb helpers (loading, empty, pager, toast), restyled here. */

.r15, .r15o { text-align: left; }
.r15 *, .r15o * { box-sizing: content-box; }
.r15 input, .r15 select, .r15 button, .r15 textarea,
.r15o input, .r15o select, .r15o button, .r15o textarea { font-family: inherit; }

/* ======================= new 2015 ======================= */
.r15 { font: 300 16px/20px 'Source Sans Pro', Arial, Helvetica, sans-serif; color: #191919; background: #f2f2f2;
       margin: -10px -10px 0; padding: 0 10px 40px; min-height: 500px; }
.r15 a { color: #191919; text-decoration: none; }
.r15 a:hover { text-decoration: underline; }
.r15 a.r15-link, .r15 .r15-link a { color: #00a2ff; }
.r15 h1 { font: 300 48px/1.3 'Source Sans Pro', Arial, sans-serif; color: #191919; margin: 0; padding: 10px 0 10px 12px; }
.r15 h3 { font: 300 24px/1.1 'Source Sans Pro', Arial, sans-serif; color: #191919; margin: 0; }
.r15 .r15-clear:after { content: ""; display: table; clear: both; }
.r15 .r15-note { font-size: 14px; color: #757575; font-weight: 400; }
.r15 .r15-danger { color: #d86868; font-weight: 400; }

/* buttons */
.r15-btn { display: inline-block; font: 400 16px/16px 'Source Sans Pro', Arial, sans-serif; padding: 7px 16px; border: 1px solid #00a2ff;
           border-radius: 3px; background: #00a2ff; color: #fff !important; cursor: pointer; text-align: center; white-space: nowrap;
           text-decoration: none !important; }
.r15-btn:hover { background: #32b5ff; border-color: #32b5ff; }
.r15-btn.green { background: #02b757; border-color: #02b757; font-size: 18px; line-height: 18px; padding: 9px 24px; }
.r15-btn.green:hover { background: #3fc679; border-color: #3fc679; }
.r15-btn.control { background: #fff; border-color: #b8b8b8; color: #757575 !important; }
.r15-btn.control:hover { color: #191919 !important; border-color: #191919; background: #fff; }
.r15-btn.xs { font-size: 14px; line-height: 14px; padding: 5px 10px; }
.r15-btn[disabled] { opacity: .5; cursor: default; }

/* inputs and selects */
.r15-input, .r15-select { font: 300 16px/20px 'Source Sans Pro', Arial, sans-serif; color: #191919; background: #fff;
                          border: 1px solid #b8b8b8; border-radius: 3px; padding: 8px 12px; height: 20px; outline: 0; }
.r15-select { height: 38px; padding: 0 30px 0 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
              background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191919' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.r15-input:focus, .r15-select:focus { border-color: #00a2ff; }

/* horizontal tabs (Friends) */
.r15-tabs { list-style: none; margin: 0 0 12px; padding: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); display: flex; }
.r15-tabs li { flex: 1 1 0; margin: 0; padding: 0; list-style: none; }
.r15-tabs a { display: block; padding: 12px 4px; text-align: center; font: 400 18px/25px 'Source Sans Pro', Arial, sans-serif; color: #191919;
              cursor: pointer; text-decoration: none !important; }
.r15-tabs a:hover { background: #f2f2f2; box-shadow: 0 -4px 0 0 #00a2ff inset; }
.r15-tabs li.active a { box-shadow: 0 -4px 0 0 #00a2ff inset; background: #fff; }
.r15-tabs .r15-badge { display: inline-block; min-width: 10px; margin-left: 6px; padding: 0 5px; border-radius: 10px; background: #e2231a; color: #fff;
                       font: 600 12px/18px 'Source Sans Pro', Arial, sans-serif; vertical-align: 3px; }

/* friends */
.r15-subtitle { font: 300 24px/30px 'Source Sans Pro', Arial, sans-serif; margin: 0 0 6px 6px; display: inline-block; }
.r15-subhead { margin-bottom: 6px; }
.r15-subhead .r15-btn { float: right; margin: 0 6px; }
.r15-subhead .r15-add { float: right; margin-right: 6px; }
.r15-subhead .r15-add .r15-input { width: 190px; height: 16px; padding: 7px 10px; font-size: 14px; vertical-align: top; }
.r15-friends { margin: 0 -6px; }
.r15-friends:after { content: ""; display: table; clear: both; }
.r15-friend { float: left; width: 33.333%; padding: 4px 6px; box-sizing: border-box !important; }
.r15-friend-card { position: relative; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(150, 150, 150, .74); height: 92px; overflow: hidden; }
.r15-friend-pic { float: left; margin: 9px; width: 72px; height: 72px; border: 1px solid #ddd; position: relative; }
.r15-friend-pic img { width: 72px; height: 72px; display: block; }
.r15-friend-pic.online { border-color: #02b757; }
.r15-friend-pic.game { border-color: #00a2ff; }
.r15-friend-pic.studio { border-color: #f68802; }
.r15-friend-pic .dot { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: #02b757; }
.r15-friend-pic.game .dot { background: #00a2ff; }
.r15-friend-pic.studio .dot { background: #f68802; }
.r15-friend-info { overflow: hidden; padding: 12px 8px 0 0; }
.r15-friend-name { display: block; font: 400 16px/20px 'Source Sans Pro', Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r15-friend-status { font: 400 12px/15px 'Source Sans Pro', Arial, sans-serif; color: #757575; margin-top: 2px; height: 15px; overflow: hidden;
                     white-space: nowrap; text-overflow: ellipsis; }
.r15-friend-status a { color: #00a2ff; }
.r15-friend-status.ok { color: #02b757; }
.r15-friend-status.bad { color: #d86868; }
.r15-friend-btns { position: absolute; right: 9px; bottom: 9px; }
.r15-friend-btns .r15-btn { margin-left: 4px; }

/* vertical tabs + item grid (Inventory) */
.r15-vtabs { float: left; width: 150px; margin: 0; padding: 12px 0; background: #fff; box-shadow: 0 1px 3px rgba(150, 150, 150, .74); list-style: none; }
.r15-vtabs h3 { padding: 0 0 0 12px; margin: 0 0 10px; }
.r15-vtabs li { list-style: none; margin: 0; padding: 0; }
.r15-vtabs a { display: block; padding: 8px 0 8px 12px; font: 400 16px/16px 'Source Sans Pro', Arial, sans-serif; color: #191919; cursor: pointer;
               text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r15-vtabs a:hover { background: #f2f2f2; box-shadow: -4px 0 0 0 #00a2ff inset; }
.r15-vtabs li.active a { box-shadow: -4px 0 0 0 #00a2ff inset; }
.r15-vcontent { margin-left: 160px; min-height: 400px; display: flow-root; }
.r15-catselect { display: none; margin: 0 0 12px 8px; }
.r15-subtabs { margin: 0 8px 10px; }
.r15-subtabs a { display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; font: 400 14px/14px 'Source Sans Pro', Arial, sans-serif; color: #191919;
                 background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(150, 150, 150, .74); cursor: pointer; text-decoration: none !important; }
.r15-subtabs a.active { background: #00a2ff; color: #fff; }
.r15-cont-head { padding: 5px 8px 0; margin-bottom: 12px; }
.r15-cont-head:after { content: ""; display: table; clear: both; }
.r15-cont-head .title { float: left; }
.r15-cont-head .title .r15-note { display: block; margin-top: 2px; }
.r15-cont-head .more { float: right; padding-top: 5px; }
.r15-cont-head .more .r15-btn { float: right; }
.r15-cont-head .more .r15-note { float: right; width: 150px; margin: 2px 8px 0 0; text-align: right; color: #191919; line-height: 17px; }
.r15-items { list-style: none; margin: 0; padding: 5px 0 0; }
.r15-items:after { content: ""; display: table; clear: both; }
.r15-item { float: left; width: 16.666%; padding: 6px 8px; list-style: none; box-sizing: border-box !important; }
.r15-item-link { display: block; position: relative; background: #fff; padding: 5px; border-radius: 3px; box-shadow: 0 1px 3px rgba(150, 150, 150, .74);
                 text-decoration: none !important; }
.r15-item-link:hover { box-shadow: 0 1px 6px rgba(25, 25, 25, .5); }
.r15-item-thumb { display: block; position: relative; border-bottom: 1px solid #f2f2f2; padding-bottom: 100%; overflow: hidden; }
.r15-item-thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; }
.r15-item-tag { position: absolute; left: 0; bottom: 0; padding: 1px 5px; background: #f68802; color: #fff; font: 600 11px/14px 'Source Sans Pro', Arial, sans-serif; }
.r15-item-name, .r15-item-by { display: block; padding-top: 5px; font: 400 12px/15px 'Source Sans Pro', Arial, sans-serif; color: #191919;
                               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r15-item-by { color: #757575; }
.r15-item-cost { display: block; padding-top: 5px; font: 600 12px/16px 'Source Sans Pro', Arial, sans-serif; color: #02b757; white-space: nowrap; }
.r15-item-cost.none { color: #757575; font-weight: 400; }
.r15-robux { display: inline-block; width: 16px; height: 16px; margin-right: 3px; vertical-align: -3px; background: url(/Images/Icons/img-robux.png) no-repeat 0 1px; }
.r15-empty-box { padding: 6px 8px; font-weight: 400; }

/* pager */
.r15-pager { text-align: center; padding: 12px 0 0; clear: both; }
.r15-pager:empty { display: none; }
.r15-pager .pg { display: inline-block; vertical-align: middle; font: 300 16px/20px 'Source Sans Pro', Arial, sans-serif; margin: 0 2px; }
.r15-pager button { width: 32px; height: 32px; padding: 0; margin: 0 3px; vertical-align: middle; background: #fff; border: 1px solid #b8b8b8; border-radius: 3px; cursor: pointer; }
.r15-pager button:before { content: ""; display: inline-block; width: 8px; height: 8px; border: solid #191919; border-width: 0 0 2px 2px; transform: rotate(45deg); margin-left: 3px; }
.r15-pager button.next:before { transform: rotate(-135deg); margin: 0 3px 0 0; }
.r15-pager button[disabled] { opacity: .4; cursor: default; }
.r15-pager input { width: 28px; height: 30px; padding: 0; margin: 0 5px; vertical-align: middle; text-align: center; border: 1px solid #b8b8b8;
                   border-radius: 3px; font: 300 16px/20px 'Source Sans Pro', Arial, sans-serif; }

/* games */
.r15-gfilters { padding: 12px 4px 0; }
.r15-gfilters:after { content: ""; display: table; clear: both; }
.r15-gfilters .r15-select { float: left; width: 164px; margin-right: 8px; }
.r15-gsearch { float: right; }
.r15-gsearch .r15-input { width: 200px; height: 20px; vertical-align: top; }
.r15-gsearch .r15-btn { vertical-align: top; padding: 10px 16px; }
.r15-glist { position: relative; padding: 12px 0 0 1px; overflow: hidden; }
.r15-glist-head { overflow: hidden; }
.r15-glist-head h3 { float: left; text-transform: uppercase; line-height: 31px; }
.r15-glist-head .r15-btn { float: right; margin: 0 6px 5px 0; }
.r15-glist-head a.back { float: left; margin: 7px 0 0 16px; font-size: 14px; font-weight: 400; color: #00a2ff; }
.r15-gtrack-wrap { position: relative; margin-top: 5px; }
.r15-gtrack { white-space: nowrap; overflow: hidden; padding-bottom: 5px; }
.r15-games-grid { white-space: normal; }
.r15-games-grid .r15-game { margin-bottom: 12px; }
.r15-game { display: inline-block; vertical-align: top; white-space: normal; padding: 0 4px; margin: 2px 0 7px; }
.r15-game-card { display: block; position: relative; width: 146px; padding: 9px 6px 6px; background: #fff; border-radius: 3px;
                 box-shadow: 0 1px 3px rgba(150, 150, 150, .74); text-decoration: none !important; }
.r15-game-card:hover { box-shadow: 0 1px 6px rgba(25, 25, 25, .5); }
.r15-game-thumb { display: block; width: 140px; height: 140px; margin-left: 3px; overflow: hidden; background: #e3e3e3; }
.r15-game-thumb img { display: block; width: 140px; height: 140px; border: 0; object-fit: cover; }
.r15-game-title { display: block; margin: 1px 3px 0; font: 300 16px/19px 'Source Sans Pro', Arial, sans-serif; color: #191919;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r15-game-notes { display: block; margin: 1px 3px; font: 400 12px/12px 'Source Sans Pro', Arial, sans-serif; color: #757575; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r15-votes { display: block; position: relative; height: 16px; margin: 9px 1px 0; }
.r15-votes .up, .r15-votes .down { position: absolute; top: 0; width: 16px; height: 16px; }
.r15-votes .up { left: 0; }
.r15-votes .down { right: 0; }
.r15-votes .up:before, .r15-votes .down:before { content: ""; position: absolute; left: 4px; top: 3px; width: 0; height: 0;
                                                 border-left: 4px solid transparent; border-right: 4px solid transparent; }
.r15-votes .up:before { border-bottom: 9px solid #b8b8b8; }
.r15-votes .down:before { border-top: 9px solid #b8b8b8; top: 4px; }
.r15-votes .bar { position: absolute; left: 22px; right: 22px; top: 5px; height: 6px; background: #ccc; }
.r15-votes .bar b { display: block; height: 6px; background: #757575; }
.r15-scroller { position: absolute; top: 2px; bottom: 7px; width: 30px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 3px #ccc;
                border: 0; padding: 0; cursor: pointer; }
.r15-scroller.next { right: 0; border-radius: 0 3px 3px 0; }
.r15-scroller.prev { left: 0; border-radius: 3px 0 0 3px; }
.r15-scroller:hover { background: rgba(255, 255, 255, .9); }
.r15-scroller:before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -10px;
                       border: solid #191919; border-width: 3px 3px 0 0; transform: rotate(45deg); }
.r15-scroller.prev:before { margin-left: -4px; transform: rotate(-135deg); }
.r15-scroller[hidden] { display: none; }

/* ======================= older 2015 ======================= */
.r15o { font: 400 14px/1.428 'Source Sans Pro', Arial, Helvetica, sans-serif; color: #343434; }
.r15o a { color: #095fb5; text-decoration: none; }
.r15o a:hover { text-decoration: underline; }
.r15o h2 { font: 400 30px/1.3 'Source Sans Pro', Arial, sans-serif; color: #343434; margin: 0; }
.r15o .r15-clear:after { content: ""; display: table; clear: both; }
.r15o .label { font-weight: 600; }
.r15o .gray { color: #808080; }
.r15o .note { font-size: 12px; color: #808080; }

/* square tabs */
.r15o-tabs { list-style: none; margin: 0; padding: 0 0 0 5px; border-bottom: 1px solid #ccc; height: 43px; position: relative; }
.r15o-tabs li { float: left; list-style: none; margin: 4px 2px -1px 1px; padding: 7px; background: #d6d6d6; border: 1px solid #9e9e9e; border-bottom: 0;
                font: 700 15px/21px 'Source Sans Pro', Arial, sans-serif; color: #343434; cursor: pointer; white-space: nowrap; }
.r15o-tabs li a { color: #343434 !important; font-weight: 400; text-decoration: none !important; }
.r15o-tabs li:hover { background: #e3e3e3; }
.r15o-tabs li.selected { margin-top: 0; padding: 9px 7px 12px; background: #fff; border-color: #ccc; }
.r15o-tabs li.selected a { font-weight: 700; }
.r15o-count { display: inline-block; margin-left: 4px; padding: 0 4px; font: 400 12px/15px 'Source Sans Pro', Arial, sans-serif; color: #000;
              background: #e5effa; border: 1px solid #06c; vertical-align: 1px; }
.r15o-panel { background: #fff; border: 1px solid #ccc; border-top: 0; padding: 6px; }
.r15o-box { background: #efefef; border: 1px solid #ccc; }
.r15o-box-head { display: block; padding: 6px 10px; font: 700 15px/20px 'Source Sans Pro', Arial, sans-serif; color: #343434; }

/* buttons */
.r15o-btn { display: inline-block; font: 400 12px/21px Arial, Helvetica, sans-serif; color: #000 !important; padding: 0 8px; cursor: pointer;
            border: 1px solid #777; background: #ccc url(/Images/StyleGuide/btn-control-medium-tile.png) repeat-x 50% 0; text-decoration: none !important;
            white-space: nowrap; vertical-align: middle; }
.r15o-btn:hover { background-position: 50% -23px; }
.r15o-btn.large { font-size: 13px; line-height: 24px; background-image: url(/Images/StyleGuide/btn-control-large-tile.png); }
.r15o-btn.large:hover { background-position: 50% -26px; }
.r15o-btn[disabled] { opacity: .5; cursor: default; }
.r15o-big { display: inline-block; font: 400 20px/28px 'Source Sans Pro', Arial, sans-serif; color: #fff !important; padding: 1px 13px 3px; cursor: pointer;
            background: #070 url(/Images/Buttons/StyleGuide/bg-btn-green.png) repeat-x 0 -96px; border: 1px solid #070; text-decoration: none !important; }
.r15o-big:hover { background-position: 0 -128px; }
.r15o-big.blue { background: #05b url(/Images/Buttons/StyleGuide/bg-btn-blue.png) repeat-x 0 -96px; border-color: #05b; }
.r15o-big[disabled], .r15o-big.disabled { opacity: .45; cursor: default; }
.r15o-input, .r15o-select, .r15o-textarea { font: 400 13px Arial, Helvetica, sans-serif; color: #000; border: 1px solid #a7a7a7; background: #fff; padding: 2px 4px; }
.r15o-input { height: 17px; }
.r15o-textarea { display: block; width: 100%; box-sizing: border-box !important; min-height: 60px; resize: vertical; }
.r15o-pagerbtn { width: 27px; height: 27px; border: 0; padding: 0; cursor: pointer; vertical-align: middle; background: url(/Images/Buttons/Arrows/btn-silver-left-27.png) no-repeat; }
.r15o-pagerbtn.next { background-image: url(/Images/Buttons/Arrows/btn-silver-right-27.png); }
.r15o-pagerbtn[disabled] { opacity: .35; cursor: default; }

/* tables */
.r15o-table { width: 100%; border-collapse: collapse; border-top: 1px solid #9e9e9e; }
.r15o-table th { background: #f1f1f1; padding: 5px; text-align: left; font-weight: 600; border-left: 1px solid #f1f1f1; white-space: nowrap; }
.r15o-table td { padding: 5px; border-top: 1px solid #ccc; vertical-align: middle; }
.r15o-table td.num, .r15o-table th.num { text-align: right; }
.r15o-table tr.total td { padding-top: 9px; text-align: right; font-size: 16px; }
.r15o-robux, .r15o-tix { font-weight: 700; white-space: nowrap; }
.r15o-robux { color: #060; padding-left: 20px; background: url(/Images/Icons/img-robux.png) no-repeat 0 1px; }
.r15o-tix { color: #a61; padding-left: 17px; background: url(/Images/Tickets.png) no-repeat 0 2px; }
.r15o-neg { color: #c00; }

/* messages */
.r15o-msg-tabs { list-style: none; margin: 0; padding: 0; height: 41px; }
.r15o-msg-tabs li { display: inline-block; position: relative; margin: 0 1px -1px 0; background: #fff; border: 1px solid #ccc; border-bottom: 0;
                    font: 700 15px/21px 'Source Sans Pro', Arial, sans-serif; vertical-align: bottom; cursor: pointer; }
.r15o-msg-tabs li a { display: inline-block; padding: 9px 7px; color: #343434 !important; text-decoration: none !important; }
.r15o-msg-tabs li:not(.selected) { background: #d6d6d6; border-color: #9e9e9e; }
.r15o-msg-tabs li:not(.selected) a { padding: 7px; font-weight: 400; }
.r15o-msg-tabs li .r15o-count { margin: 0 8px 0 -4px; }
.r15o-msg-tabs .compose { float: right; margin-top: 8px; }
.r15o-msg-body { background: #fff; border-top: 1px solid #ccc; padding: 12px 5px; min-height: 200px; }
.r15o-msg-nav { min-height: 41px; }
.r15o-msg-nav:after { content: ""; display: table; clear: both; }
.r15o-msg-nav .check { float: left; padding: 12px; }
.r15o-msg-nav .r15o-btn { float: left; margin: 7px 10px 7px 0; }
.r15o-msg-nav .r15o-pager { float: right; margin: 7px 18px; }
.r15o-msg-nav .back { float: left; margin: 7px 10px 7px 6px; }
.r15o-msg-list { border-top: 1px solid #ccc; }
.r15o-msg-row { position: relative; padding: 5px 0 8px; background: #f8f8f8; border: 1px solid #ededed; border-top: 0; cursor: pointer; overflow: hidden; }
.r15o-msg-row:hover { background: #eef4fb; }
.r15o-msg-row.unread { background: #fff; }
.r15o-msg-row .check { float: left; padding: 12px; }
.r15o-msg-row .check.blank { width: 13px; }
.r15o-msg-row .pic { float: left; width: 48px; margin-right: 12px; }
.r15o-msg-row .pic img { width: 48px; height: 48px; display: block; }
.r15o-msg-row .summary { overflow: hidden; margin-top: 4px; padding-right: 10px; }
.r15o-msg-row .who { font-weight: 700; color: #000; }
.r15o-msg-row .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #343434; }
.r15o-msg-row .subject { color: #000; }
.r15o-msg-row.unread .subject { font-weight: 700; }
.r15o-msg-row .date { float: right; padding-top: 2px; font-size: 11px; color: #888; }
.r15o-msg-detail { padding: 10px 12px; }
.r15o-msg-detail .sender { float: left; width: 110px; }
.r15o-msg-detail .sender img { width: 100px; height: 100px; display: block; border: 1px solid #ddd; }
.r15o-msg-detail .head { overflow: hidden; }
.r15o-msg-detail h3 { margin: 0 0 4px; font: 700 18px/1.3 'Source Sans Pro', Arial, sans-serif; color: #343434; }
.r15o-msg-detail .from { color: #808080; }
.r15o-msg-detail .text { clear: both; padding: 14px 0; border-top: 1px solid #e3e3e3; margin-top: 12px; word-wrap: break-word; }
.r15o-msg-reply { border-top: 1px solid #e3e3e3; padding-top: 10px; }
.r15o-msg-reply .warn { margin: 6px 0; font-size: 12px; color: #c00; }
.r15o-msg-reply .send { margin-top: 8px; }
.r15o-msg-form { max-width: 560px; padding: 6px 12px; }
.r15o-msg-form label { display: block; margin: 10px 0 3px; font-weight: 600; }
.r15o-msg-form .r15o-input { width: 100%; box-sizing: border-box !important; height: 24px; }
.r15o-msg-form .r15o-textarea { min-height: 160px; }

/* groups */
.r15o-groups:after { content: ""; display: table; clear: both; }
.r15o-gleft { float: left; width: 160px; }
.r15o-gmid { float: left; width: 630px; margin: 0 10px; }
.r15o-gright { float: left; width: 160px; }
.r15o-glist { background: #efefef; border: 1px solid #ccc; text-align: center; margin-bottom: 8px; }
.r15o-create { display: inline-block; width: 122px; margin: 5px 0 10px; padding: 9px 13px 10px; font: 400 23px/27px 'Source Sans Pro', Arial, sans-serif; color: #fff !important;
               background: #070 url(/Images/Buttons/StyleGuide/bg-btn-green.png) repeat-x 0 -96px; border: 1px solid #070; text-decoration: none !important; }
.r15o-create.disabled { background: #99c699; border-color: #99c699; cursor: default; }
.r15o-gitem { display: block; padding: 5px 0 5px 14px; text-align: left; color: #343434 !important; text-decoration: none !important; }
.r15o-gitem:after { content: ""; display: table; clear: both; }
.r15o-gitem:hover { background-color: #e3e3e3; }
.r15o-gitem.selected { background: url(/Images/gamesPage_filterArrow.png) no-repeat 4px 50%; }
.r15o-gitem img { float: left; width: 42px; height: 42px; }
.r15o-gitem span { display: block; margin-left: 42px; padding: 12px 6px; font: 700 11px/15px 'Source Sans Pro', Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r15o-gsearch { background: #efefef; border: 1px solid #ccc; padding: 4px 0; margin-bottom: 15px; text-align: center; }
.r15o-gsearch .r15o-input { width: 350px; font-style: italic; padding-left: 10px; }
.r15o-gdesc { padding: 10px; margin-bottom: 15px; }
.r15o-gdesc:after { content: ""; display: table; clear: both; }
.r15o-gdesc .left-col { float: left; width: 150px; margin-right: 10px; }
.r15o-gdesc .left-col img { width: 150px; height: 150px; display: block; }
.r15o-gdesc .owner { margin-top: 10px; color: #808080; }
.r15o-gdesc .owner a { font-style: italic; }
.r15o-gdesc .rank { margin-top: 10px; }
.r15o-gdesc .right-col { float: left; width: 450px; }
.r15o-gdesc .right-col pre { margin: 14px 0; font: 400 14px/1.428 'Source Sans Pro', Arial, sans-serif; white-space: pre-wrap; word-wrap: break-word; }
.r15o-shout { margin-top: 10px; }
.r15o-shout .top { padding: 8px 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; position: relative; word-wrap: break-word; }
.r15o-shout .top:after { content: ""; position: absolute; left: 22px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #ddd; }
.r15o-shout .bottom { padding: 10px 0 0 5px; font-size: 13px; }
.r15o-shout .bottom a { font-style: italic; }
.r15o-shout .bottom .when { color: #808080; font-size: 11px; }
.r15o-shout-form { margin-top: 8px; }
.r15o-shout-form .r15o-input { width: 340px; }
.r15o-ptabs { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
.r15o-ptabs .tabs { height: 40px; border-bottom: 1px solid #ccc; }
.r15o-ptabs .tab { float: left; margin: 4px 2px -1px 1px; padding: 7px; background: #d6d6d6; border: 1px solid #9e9e9e; border-bottom: 0;
                   font: 700 15px/21px 'Source Sans Pro', Arial, sans-serif; cursor: pointer; }
.r15o-ptabs .tab.active { margin-top: 0; padding: 9px 7px; background: #fff; border-color: #ccc; position: relative; }
.r15o-ptabs .pane { padding: 6px 0 10px; min-height: 80px; }
.r15o-ptabs .pane:after { content: ""; display: table; clear: both; }
.r15o-ptabs .tools { padding: 4px 6px 0; }
.r15o-member { float: left; width: 82px; margin: 10px 11px; text-align: center; position: relative; }
.r15o-member img { width: 70px; height: 70px; display: block; margin: 0 auto 4px; }
.r15o-member .status { position: absolute; left: 6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #9e9e9e; border: 1px solid #fff; }
.r15o-member .status.on { background: #02b757; }
.r15o-member a.name { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r15o-member .role { font-size: 11px; color: #808080; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r15o-ptabs .r15o-pager { clear: both; text-align: center; padding-top: 6px; }
.r15o-wallhead { background: #efefef; border: 1px solid #ccc; border-bottom: 0; padding-bottom: 8px; }
.r15o-wallpost-box { margin: 0 14px; }
.r15o-wallpost-box:after { content: ""; display: table; clear: both; }
.r15o-wallpost-box .r15o-textarea { float: left; width: 85%; min-height: 55px; }
.r15o-wallpost-box .r15o-btn { float: left; margin: 14px 0 0 10px; }
.r15o-wall { background: #fff; border: 1px solid #ccc; border-top: 0; }
.r15o-wall .post { padding: 10px; background: #fff; }
.r15o-wall .post:nth-child(odd) { background: #f2f2f2; }
.r15o-wall .post:after { content: ""; display: table; clear: both; }
.r15o-wall .post .pic { float: left; width: 100px; margin: 5px 15px 5px 5px; text-align: center; }
.r15o-wall .post .pic img { width: 100px; height: 100px; display: block; }
.r15o-wall .post .text { overflow: hidden; margin: 5px; }
.r15o-wall .post .body { min-height: 66px; word-wrap: break-word; }
.r15o-wall .post .date { margin-top: 6px; }
.r15o-wall .post .date .gray { color: gray; }
.r15o-wall .post .del { float: right; font-size: 11px; }
.r15o-wall .r15o-pager { text-align: center; padding: 8px; }
.r15o-controls { background: #efefef; border: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 8px; text-align: center; }
.r15o-controls .r15o-box-head { text-align: left; }
.r15o-controls .r15o-btn { display: block; width: 110px; margin: 0 auto 6px; }
.r15o-gresults .row { padding: 8px 6px; border-top: 1px solid #ccc; overflow: hidden; }
.r15o-gresults .row img { float: left; width: 60px; height: 60px; margin-right: 10px; }
.r15o-gresults .row .name { font-size: 16px; font-weight: 600; }
.r15o-gresults .row .sub { color: #808080; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* money */
.r15o-money { position: relative; }
.r15o-money .buy { position: absolute; right: 0; top: 0; }
.r15o-money .balance { position: absolute; right: 140px; top: 10px; font-size: 14px; }
.r15o-money .balance span { margin-left: 10px; }
.r15o-filters { margin: 5px 0 7px 5px; }
.r15o-filters .r15o-select { margin: 0 5px; }
.r15o-cols:after { content: ""; display: table; clear: both; }
.r15o-cols > .col { float: left; width: 48%; margin: 0 3px; }
.r15o-cols > .col.divider { border-right: 1px solid #ccc; padding-right: 6px; }
.r15o-cols h2.light, .r15o-money h2.light { font: 400 16px/1.3 'Source Sans Pro', Arial, sans-serif; color: #000; margin: 6px 0; }
.r15o-trade { overflow: hidden; }
.r15o-trade .menu { float: left; width: 170px; border-right: 1px solid #ccc; padding: 6px 10px 6px 4px; }
.r15o-trade .menu .item { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid #e3e3e3; }
.r15o-trade .menu .item:hover { background: #f2f2f2; }
.r15o-trade .menu .item.selected { background: #e5effa; font-weight: 600; }
.r15o-trade .area { margin-left: 190px; padding: 6px 4px; }
.r15o-trade .r15o-big { margin: 2px 0 12px; }
.r15o-form-row { margin: 0 0 10px; }
.r15o-form-row .label { display: block; margin-bottom: 3px; }
.r15o-quote { margin: 6px 0 12px; padding: 6px 8px; background: #fffbe0; border: 1px solid #e8dc9b; }
.r15o-sub { margin: 6px 0 10px; }
.r15o-sub a { margin-right: 12px; cursor: pointer; }
.r15o-sub a.selected { font-weight: 700; color: #343434; text-decoration: none; }
.r15o-trade-items { overflow: hidden; }
.r15o-trade-item { float: left; width: 110px; margin: 0 10px 10px 0; text-align: center; font-size: 12px; }
.r15o-trade-item img { width: 110px; height: 110px; display: block; border: 1px solid #ddd; }
.r15o-trade-item .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r15o-status { display: inline-block; padding: 0 6px; border: 1px solid #ccc; font-size: 12px; background: #f1f1f1; }
.r15o-status.Pending { background: #e5effa; border-color: #06c; }
.r15o-status.Accepted { background: #e2f5e4; border-color: #393; }
.r15o-status.Declined { background: #fbe3e3; border-color: #c33; }
.r15o-status.Countered { background: #fff3dd; border-color: #c80; }
.r15o-rowlink { cursor: pointer; }
.r15o-rowlink:hover td { background: #f5f9fe; }

/* ======================= 2013 =======================
   .r13 - Friends, People (Browse) and the forum, after the mid-2013 pages:
   Arial 12px, jQuery UI square tabs, the blue forum tables. */
.r13 { font: 400 12px Arial, Helvetica, sans-serif; color: #000; text-align: left; padding: 0 10px 20px; }
.r13 * { box-sizing: content-box; }
.r13 a { color: #095fb5; text-decoration: none; }
.r13 a:hover { text-decoration: underline; }
.r13 h1 { font: 700 40px Arial, Helvetica, sans-serif; color: #363636; margin: 12px 0; }
.r13 h3 { font: 700 15px Arial, Helvetica, sans-serif; color: #363636; margin: 0 0 12px; }
.r13 input, .r13 select, .r13 button, .r13 textarea { font-family: Arial, Helvetica, sans-serif; }
.r13 .gray { color: #808080; }
.r13 .ddb-skel { height: 12px; margin: 10px 0; background: #e3e3e3; animation: r15-pulse 1.2s ease-in-out infinite; }
.r13 .ddb-panel-body { padding: 4px 0; }
.r13 .ddb-empty { padding: 10px 0; font-size: 13px; color: #363636; }
.r13 .ddb-error { padding: 10px 0; color: #c00; }

/* jQuery UI horizontal tabs */
.r13-tabs { padding: 3px; background: #fff; border: 1px solid #fff; font-size: 15px; color: #333; }
.r13-tabs > ul { list-style: none; margin: 0; padding: 3px 3px 0 5px; height: 40px; border-bottom: 1px solid #ccc; }
.r13-tabs > ul li { float: left; list-style: none; position: relative; margin: 5px 3px -1px 0; padding: 0; height: 33px; white-space: nowrap;
                    background: #f1f1f1; border: 1px solid #ccc; border-bottom: 0; cursor: pointer; }
.r13-tabs > ul li a { display: block; padding: 8px 9px 0; font: 700 15px/19px Arial, Helvetica, sans-serif; color: #363636 !important; text-decoration: none !important; }
.r13-tabs > ul li:hover { background: #fafafa; }
.r13-tabs > ul li.active { margin-top: 0; height: 39px; background: #fff; }
.r13-tabs .count { margin-left: 4px; padding: 0 5px; font-size: 11px; color: #fff; background: #c00; border-radius: 8px; vertical-align: 2px; }
.r13-panel { padding: 15px 21px; font-size: 13px; color: #333; }
.r13-btn { font: 400 12px Arial, Helvetica, sans-serif; color: #000; padding: 1px 8px; cursor: pointer; background: #eee linear-gradient(#fff, #ddd);
           border: 1px solid #999; border-radius: 2px; vertical-align: middle; }
.r13-btn:hover { background: #e3e3e3; }
.r13-btn[disabled] { opacity: .5; cursor: default; }
.r13-input { font: 400 13px Arial, Helvetica, sans-serif; border: 1px solid #a7a7a7; padding: 2px 4px; height: 17px; vertical-align: middle; }
.r13-textarea { display: block; width: 100%; box-sizing: border-box !important; min-height: 120px; font: 400 13px Arial, Helvetica, sans-serif; border: 1px solid #a7a7a7; padding: 4px; }
.r13-pager { text-align: center; padding: 12px 0 0; font-size: 12px; }
.r13-pager:empty { display: none; }
.r13-pager a, .r13-pager span { margin: 0 4px; }
.r13-pager span.cur { font-weight: 700; }

/* friends grid */
.r13-friends:after { content: ""; display: table; clear: both; }
.r13-friend { float: left; width: 126px; height: 168px; margin: 0 8px 12px 0; text-align: center; position: relative; overflow: hidden; }
.r13-friend .pic { display: block; width: 110px; height: 110px; margin: 0 auto 4px; border: 1px solid #ddd; background: #fff; }
.r13-friend .pic img { width: 110px; height: 110px; display: block; }
.r13-friend .name { display: block; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r13-friend .where { display: block; font-size: 11px; color: #808080; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r13-friend .where a { color: #095fb5; }
.r13-online { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: #9e9e9e; vertical-align: 0; }
.r13-online.on { background: #02b757; }
.r13-online.game { background: #00a2ff; }
.r13-online.studio { background: #f68802; }
.r13-friend .acts { margin-top: 3px; }
.r13-friend .acts .r13-btn { font-size: 11px; padding: 0 5px; }
.r13-addfriend { float: right; margin-top: -2px; font-size: 12px; }

/* people search (Browse.aspx) */
.r13-searchbar { width: 876px; height: 28px; line-height: 28px; padding: 0 6px; margin: 0 auto 10px; background: #ffffff; border: 1px solid #ccc; color: #000; }
.r13-searchbar .label { font: 700 15px/28px Arial, Helvetica, sans-serif; color: #000; margin-right: 4px; }
.r13-searchbar .r13-input { width: 400px; height: 16px; }
.r13-grid { width: 890px; margin: 0 auto; border-collapse: collapse; border: 1px solid #ccc; }
.r13-grid th { background: #ccc linear-gradient(#e8e8e8, #c8c8c8); border: 1px solid #aaa; padding: 4px 6px; font-weight: 700; text-align: left; color: #363636; }
.r13-grid td { border: 1px solid #ddd; padding: 4px 6px; vertical-align: middle; }
.r13-grid tr:nth-child(even) td { background: #f4f4f4; }
.r13-grid td.pic { width: 60px; text-align: center; }
.r13-grid td.pic img { width: 48px; height: 48px; display: block; margin: 0 auto; }
.r13-grid td.name a { font-weight: 700; font-size: 13px; }
.r13-grid td.blurb { color: #555; font-style: italic; word-break: break-word; }

/* forum */
.r13-forum { width: 100%; border-collapse: separate; border-spacing: 0; }
.r13-forum td.side { width: 180px; padding-right: 14px; vertical-align: top; }
.r13-forum td.main { vertical-align: top; }
.r13-tb { width: 100%; border: 1px solid #013da4; background: #fff; border-spacing: 1px; }
.r13-tb th { color: #fff; background: #6e99c9; font-size: 11px; font-weight: 700; padding: 5px; text-align: center; white-space: nowrap; }
.r13-tb th.left { text-align: left; }
.r13-tb td { padding: 3px; background: #def; vertical-align: middle; }
.r13-tb td.hl { background: #dfe9fc; text-align: center; }
.r13-tb td.alt { background: #dae7fd; }
.r13-tb td.group { background: #bdd6f5; height: 20px; }
.r13-tb td.icon { width: 34px; text-align: center; vertical-align: top; }
.r13-tb td.icon img { width: 34px; border: 0; }
.r13 a.forumTitle, .r13 .forumTitle { font-weight: 700; color: #013da4; }
.r13 a.forumTitle:hover { color: #dd6900; }
.r13 .smaller { font-size: .9em; }
.r13 .smallbold { font-weight: 700; }
.r13-menu { text-align: right; margin-bottom: 8px; }
.r13-menu a { color: #013da4 !important; font-size: .9em; margin-left: 10px; }
.r13-menu a img { border: 0; vertical-align: -2px; margin-right: 3px; }
.r13-menu a:hover { color: #000 !important; }
.r13-crumbs { font-size: 13px; font-weight: 700; margin: 4px 0 8px; }
.r13-crumbs a { color: #013da4 !important; }
.r13-time { margin-bottom: 4px; }
.r13-post td.author { width: 150px; vertical-align: top; background: #def; padding: 8px; }
.r13-post td.author img { width: 100px; height: 100px; display: block; margin: 4px 0; border: 1px solid #b8c8e0; background: #fff; }
.r13-post td.author .stats { font-size: 11px; color: #333; }
.r13-post td.body { vertical-align: top; background: #fff; padding: 0; }
.r13-post .posthead { background: #d4d9ec; padding: 4px 6px; font-size: 11px; }
.r13-post .posthead .acts { float: right; }
.r13-post .posthead .acts a { margin-left: 8px; cursor: pointer; }
.r13-post .text { padding: 8px 8px 16px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.r13-post .text blockquote { margin: 4px 0 8px; padding: 4px 8px; background: #f3f6fb; border: 1px solid #c8d4e8; white-space: pre-wrap; }
.r13-staff { color: #c00; font-weight: 700; font-size: 11px; }
.r13-tag { font-size: 11px; font-weight: 700; color: #c60; margin-right: 4px; }
.r13-compose { margin: 10px 0; }
.r13-compose .r13-tb td { padding: 8px; }
.r13-compose label { display: block; font-weight: 700; margin: 6px 0 3px; }
.r13-compose .r13-input { width: 98%; }
.r13-note { margin: 10px 0; padding: 8px 10px; background: #def; border: 1px solid #013da4; }

/* shared helpers inside both looks */
.r15 .ddb-skel, .r15o .ddb-skel { height: 12px; margin: 10px 0; background: #e3e3e3; border-radius: 2px; animation: r15-pulse 1.2s ease-in-out infinite; }
.r15 .ddb-panel-body, .r15o .ddb-panel-body { padding: 4px 8px; }
@keyframes r15-pulse { 50% { opacity: .45; } }
.r15 .ddb-empty, .r15o .ddb-empty { padding: 14px 8px; font-weight: 400; color: #757575; }
.r15o .ddb-empty { color: #343434; }
.r15 .ddb-error, .r15o .ddb-error { padding: 10px; color: #c00; font-weight: 400; }
.r15 .ddb-hint, .r15o .ddb-hint { font-size: 12px; color: #808080; }
.ddb-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 5000; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ddb-toast { font: 400 14px/1.4 'Source Sans Pro', Arial, sans-serif; color: #fff; background: #02b757; padding: 9px 16px; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ddb-toast.bad { background: #d86868; }

@media (max-width: 760px) {
    .r15-friend { width: 100%; }
    .r15-vtabs { display: none; }
    .r15-vcontent { margin-left: 0; }
    .r15-catselect { display: inline-block; }
    .r15-item { width: 50%; }
}