:root { /* System greys */ --gpSystemLightestGrey: #DCDEDF; --gpSystemLighterGrey: #B8BCBF; --gpSystemLightGrey: #8B929A; --gpSystemGrey: #67707B; --gpSystemDarkGrey: #3D4450; --gpSystemDarkerGrey: #23262E; --gpSystemDarkestGrey: #0E141B; /* Store blue greys */ --gpStoreLightestGrey: #CCD8E3; --gpStoreLighterGrey: #A7BACC; --gpStoreLightGrey: #7C8EA3; --gpStoreGrey: #4e697d; --gpStoreDarkGrey: #2A475E; --gpStoreDarkerGrey: #1B2838; --gpStoreDarkestGrey: #000F18; /* Gradients */ --gpGradient-StoreBackground: linear-gradient(180deg, var(--gpStoreDarkGrey) 0%, var(--gpStoreDarkerGrey) 80%); --gpGradient-LibraryBackground: radial-gradient(farthest-corner at 40px 40px,#3D4450 0%, #23262E 80%); /* Colours */ --gpColor-Blue: #1A9FFF; --gpColor-BlueHi: #00BBFF; --gpColor-Green: #5ba32b; --gpColor-GreenHi: #59BF40; --gpColor-Orange: #E35E1C; --gpColor-Red: #D94126; --gpColor-RedHi: #EE563B; --gpColor-DustyBlue: #417a9b; --gpColor-LightBlue: #B3DFFF; --gpColor-Yellow: #FFC82C; --gpColor-ChalkyBlue: #66C0F4; /* Backgrounds */ --gpBackground-LightSofter: #6998bb24; --gpBackground-LightSoft: #3b5a7280; --gpBackground-LightMedium: #678BA670; --gpBackground-LightHard: #93B8D480; --gpBackground-LightHarder: #aacce6a6; --gpBackground-DarkSofter: #0e141b33; --gpBackground-DarkSoft: #0e141b66; --gpBackground-DarkMedium: #0e141b99; --gpBackground-DarkHard: #0e141bcc; --gpBackground-Neutral-LightSofter: rgba(235, 246, 255, 0.10); --gpBackground-Neutral-LightSoft: rgba(235, 246, 255, 0.20); --gpBackground-Neutral-LightMedium: rgba(235, 246, 255, 0.30); --gpBackground-Neutral-LightHard: rgba(235, 246, 255, 0.40); --gpBackground-Neutral-LightHarder: rgba(235, 246, 255, 0.50); /* Corners */ --gpCorner-Small: 1px; --gpCorner-Medium: 2px; --gpCorner-Large: 3px; /* Spacing */ --gpSpace-Gutter: 24px; --gpSpace-Gap: 12px; /* Fixed widths */ --gpNavWidth: 240px; --gpPaymentsNavWidth: 340px; --gpDselectWidth: 340px; --gpSidePanelWidth: 340px; --gpGiftingPanelWidth: 280px; --gpCommunityRightPanelWidth: 320px; --gpVerticalResponsivePadding-Small: calc( (100vw - 854px) / 60 ); --gpVerticalResponsivePadding-Medium: calc( (100vw - 854px) / 20 ); --gpVerticalResponsivePadding-Large: calc( (100vw - 854px) / 12 ); /* Game capsule widths */ --screen-width: 100vw; --gpWidth-6colcap: calc((var(--screen-width) - (5 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 6); --gpWidth-5colcap: calc((var(--screen-width) - (4 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 5); --gpWidth-4colcap: calc((var(--screen-width) - (3 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 4); --gpWidth-3colcap: calc((var(--screen-width) - (2 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 3); --gpWidth-2colcap: calc((var(--screen-width) - (1 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 2); --gpWidth-1colcap: calc((var(--screen-width) - (2 * var(--gpSpace-Gutter)))); /* Fixed heights */ --gpStoreMenuHeight: 58px; /* Surfaces */ --gpShadow-Small: 0px 2px 2px 0px #0000003D; --gpShadow-Medium: 0px 3px 6px 0px #0000003D; --gpShadow-Large: 0px 12px 16px 0px #0000003D; --gpShadow-XLarge: 0px 24px 32px 0px #0000003D; /* Type styles */ --gpText-HeadingLarge: normal 700 26px/1.4 "Motiva Sans", Arial, Sans-serif; --gpText-HeadingMedium: normal 700 22px/1.4 "Motiva Sans", Arial, Sans-serif; --gpText-HeadingSmall: normal 700 18px/1.4 "Motiva Sans", Arial, Sans-serif; --gpText-BodyLarge: normal 400 16px/1.4 "Motiva Sans", Arial, Sans-serif; --gpText-BodyMedium: normal 400 14px/1.4 "Motiva Sans", Arial, Sans-serif; --gpText-BodySmall: normal 400 12px/1.4 "Motiva Sans", Arial, Sans-serif; } @media screen and (min-width: 1280px) { :root { --gpSpace-Gutter: calc(24px + 2vw); } } /* Avatars */ .playerAvatar, .friend_block_holder .friend_block_avatar, .friend_activity .friend_block_avatar { width: 34px; height: 34px; position: relative; border-radius: 0; padding: 1px; } /* Offline State */ .playerAvatar.offline, .friend_block_holder.friend_status_offline .friend_block_avatar, .friend_activity.friend_status_offline .friend_block_avatar, .appHubIconHolder.offline, .avatar_block_status_offline, .appHubIconHolder.ignored { background: -webkit-linear-gradient( top, rgba(106,106,106,1) 5%, rgba(85,85,85,1) 95%); background: linear-gradient( to bottom, rgba(106,106,106,1) 5%, rgba(85,85,85,1) 95%); /* IE <= 9 doesn't support rounded corners and gradient. The gradient isn't too noticable so just disable the filter in IE9 */ filter: none; } .playerAvatar.offline img, .friend_status_offline .friend_block_avatar img, .appHubIconHolder.offline img, .avatar_block_status_offline img { background: -webkit-linear-gradient( top, #515151 5%, #474747 95%); background: linear-gradient( to bottom, #515151 5%, #474747 95%); } /* Online State */ .playerAvatar.online, .friend_block_holder.friend_status_online .friend_block_avatar, .friend_activity.friend_status_online .friend_block_avatar, .appHubIconHolder.online, .avatar_block_status_online { background-color: #57cbde; background: -webkit-linear-gradient( top, rgba(83,164,196,1) 5%, rgba(69,128,151,1) 95%); background: linear-gradient( to bottom, rgba(83,164,196,1) 5%, rgba(69,128,151,1) 95%); /* IE <= 9 doesn't support rounded corners and gradient. The gradient isn't too noticable so just disable the filter in IE9 */ filter: none; } .playerAvatar.online img, .friend_status_online .friend_block_avatar img, .appHubIconHolder.online img, .avatar_block_status_online img { background: -webkit-linear-gradient( top, #41778f 5%, #3d697b 95%); background: linear-gradient( to bottom, #41778f 5%, #3d697b 95%); } /* In-Game State */ .playerAvatar.in-game, .friend_block_holder.friend_status_in-game .friend_block_avatar, .friend_activity.friend_status_in-game .friend_block_avatar, .appHubIconHolder.in-game, .avatar_block_status_in-game { background-color: #90ba3c; background: -webkit-linear-gradient( top, rgba(143,185,59,1) 5%, rgba(110,140,49,1) 95%); background: linear-gradient( to bottom, rgba(143,185,59,1) 5%, rgba(110,140,49,1) 95%); /* IE <= 9 doesn't support rounded corners and gradient. The gradient isn't too noticable so just disable the filter in IE9 */ filter: none; } .playerAvatar.in-game img, .friend_status_in-game .friend_block_avatar img, .appHubIconHolder.in-game img, .avatar_block_status_in-game img { background: -webkit-linear-gradient( top, #66812e 5%, #59702b 95%); background: linear-gradient( to bottom, #66812e 5%, #59702b 95%); } /* Golden State */ .playerAvatar.golden, .friend_block_holder.friend_status_golden .friend_block_avatar, .friend_activity.friend_status_golden .friend_block_avatar, .appHubIconHolder.golden, .avatar_block_status_golden { background-color: #e4ca63; background: -webkit-linear-gradient( 305deg, #d5bf6a 10%,#ffe2a9 40%,#ba995c 52%,#ba995c 61%,#d5bf6a 85%); background: linear-gradient( 145deg, #d5bf6a 10%,#ffe2a9 40%,#ba995c 52%,#ba995c 61%,#d5bf6a 85%); } /* .playerAvatar.golden img, .friend_status_golden .friend_block_avatar img, .appHubIconHolder.golden img, .avatar_block_status_golden img { background-color: #e4ca63 background: -webkit-linear-gradient( 305deg, #d5bf6a 10%,#ffe2a9 40%,#ba995c 52%,#ba995c 61%,#d5bf6a 85%); background: linear-gradient( 145deg, #d5bf6a 10%,#ffe2a9 40%,#ba995c 52%,#ba995c 61%,#d5bf6a 85%); } */ .playerAvatar.ignored { } .playerAvatar img, .friend_block_holder .friend_block_avatar img, .friend_activity .friend_block_avatar img { width: 32px; height: 32px; padding: 1px; border-radius: 0; border: none; } .playerAvatar .profile_avatar_frame { position: absolute; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .playerAvatar .profile_avatar_frame > img { transform: scale(1.23); width: 32px; height: 32px; background: none; } .playerAvatar.medium { width: 66px; height: 66px; } .playerAvatar.medium img { width: 64px; height: 64px; } .playerAvatar.medium .profile_avatar_frame > img { width: 64px; height: 64px; transform: scale(1.225); } .playerAvatar.full { width: 186px; height: 186px; } .playerAvatar.full img { width: 184px; height: 184px; } .playerAvatar.tiny { width: 24px; height: 24px; } .playerAvatar.tiny img { width: 22px; height: 22px; } .playerAvatar_friendindicator { position: absolute; left: 26px; top: 23px; background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/friendindicator_small.png' ); width: 20px; height: 20px; z-index: 2; cursor: pointer; } .persona, a.persona, .persona a, .friend_status_offline, .friend_status_offline div, .friend_status_offline a { color:#898989; } .persona.online, a.persona.online, .persona.online a, .friend_status_online, .friend_status_online div, .friend_status_online a { color:#57cbde; } .persona.in-game, a.persona.in-game, .persona.in-game a, .friend_status_in-game, .friend_status_in-game div, .friend_status_in-game a { color:#90ba3c; } .persona.golden, a.persona.golden, .persona.golden a, .friend_status_golden, .friend_status_golden div, .friend_status_golden a { color:#e4ca63; } .border_color_offline { border-color:#898989; } .border_color_online { border-color:#57cbde; } .border_color_in-game { border-color:#90ba3c; } .border_color_golden { border-color: #e4ca64; } .miniprofile_hover { position: absolute; top: 0; left: 0; z-index: 5000; font-family: "Motiva Sans", sans-serif; } .miniprofile_hover_inner.shadow_content { margin: 11px; } .miniprofile_container { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 328px; font-family: "Motiva Sans", Sans-serif; font-weight: normal; /* normal */ } .miniprofile_playersection { position: relative; display: flex; flex-direction: row; z-index: 1; height: 62px; padding: 16px; } .miniprofile_playersection .playersection_avatar { width: 90px; height: 90px; background: none; border-bottom-width: 2px; border-bottom-style: solid; } .miniprofile_playersection .playersection_avatar img { width: 90px; height: 90px; box-sizing: border-box; background: none; } .miniprofile_playersection .playersection_avatar_frame { position: absolute; z-index: 1; width: 107px; height: 107px; top: 8px; left: 8px; pointer-events: none; } .miniprofile_playersection .playersection_avatar_frame > img { width: 100%; height: 100%; background: none; } .miniprofile_playersection .player_content { display: flex; flex-direction: column; justify-content: center; padding-left: 16px; text-shadow: 1px 1px 4px #000; } .miniprofile_playersection .player_content .persona { font-size: 20px; } .miniprofile_playersection .player_content .persona, .miniprofile_playersection .player_content .secondaryname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; } .miniprofile_playersection .player_content .friend_status_offline { font-size: 10px; } .miniprofile_gamesection { display: flex; flex-direction: row; position: relative; min-height: 64px; } .miniprofile_gamesection .game_logo { width: 90px; height: 34px; top: 18px; left: 16px; position: absolute; } .miniprofile_gamesection .miniprofile_game_details { display: flex; flex-direction: column; padding: 8px 8px 8px 122px; font-size: 14px; align-self: center; } .miniprofile_gamesection .miniprofile_game_details .game_state, .miniprofile_gamesection .miniprofile_game_details .rich_presence { font-size: 12px; color: rgb( 98, 129, 59 ); } .miniprofile_gamesection .miniprofile_game_details .miniprofile_game_name { color: #90ba3c; } .miniprofile_detailssection { display: flex; flex-direction: column; padding: 16px 16px 8px 16px; } .miniprofile_detailssection.not_in_game { padding-top: 24px; } .miniprofile_featuredcontainer { display: flex; flex-direction: row; height: 34px; padding-left: 16px; margin-bottom: 8px; } .miniprofile_featuredcontainer .badge_icon { width: 34px; height: 34px; position: relative; } .miniprofile_featuredcontainer .description { margin-left: 12px; margin-top: auto; margin-bottom: auto; font-size: 14px; overflow: hidden; white-space: nowrap; font-family: "Motiva Sans", Arial, Helvetica, sans-serif; } .miniprofile_featuredcontainer .description .name { overflow: hidden; text-overflow: ellipsis; color: #b1b1b1; } .miniprofile_featuredcontainer .description .xp { font-size: 12px; color: #6b6a6a; } .miniprofile_featuredcontainer .friendPlayerLevel { margin-top: 0; } .miniprofile_playtimesection { border: none; min-height: 57px; box-sizing: border-box; padding: 2px; display: flex; flex-direction: row; align-items: center; background: radial-gradient( circle at top left, rgba(81, 148, 255, 0.5) 0%, rgba(0, 39, 112, 0.075) 100% ), linear-gradient(to bottom, rgba(58, 148, 184, 0.637) 0%, rgba(106, 201, 239, 0.15) 1px, rgba(19, 100, 133, 0.1) 25%, rgba(106, 201, 239, 0.0) 50% ); } .miniprofile_playtimesection .gamelogo { width: 120px; height: 55px; margin-right: 12px; box-shadow: 0 0 2px black ; } .miniprofile_playtimesection .playtimecontent { color: rgba(181, 255, 255, 0.5); font-size: 13px; display: flex; flex-direction: column; justify-content: space-between; } .miniprofile_playtimesection .playtimecontent div:nth-child(2) { margin-top: 4px; } .miniprofile_playtimesection .playtimecontent .timeplayed { color: rgb(181, 255, 255); } .miniprofile_playtimesection.forcurrentgame { padding: 0px; align-items: initial; min-height: 0px; background: transparent; } .miniprofile_background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -3; background: radial-gradient( ellipse farthest-corner at 20% 30%, rgb( 76, 80, 91 ) 0%, rgb( 52, 55, 63 ) 50%, rgb( 40, 44, 50 ) 100% ); } .miniprofile_backgroundblur { width: 380px; height: 380px; filter: blur( 10px ) saturate( 2 ); position: absolute; left: -60px; top: -60px; opacity: 0.4; -webkit-mask: radial-gradient( ellipse farthest-corner at 150px 150px, rgba( 0, 0, 0, 1 ) 0%, rgba( 0, 0, 0, 0.6 ) 20%, rgba( 0, 0, 0, 0.3 ) 34%, rgba( 0, 0, 0, 0 ) 64% ); mask: radial-gradient( ellipse farthest-corner at 150px 150px, rgba( 0, 0, 0, 1 ) 0%, rgba( 0, 0, 0, 0.6 ) 20%, rgba( 0, 0, 0, 0.3 ) 34%, rgba( 0, 0, 0, 0 ) 64% ); mix-blend-mode: screen; } .miniprofile_backdropblur { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .miniprofile_backdrop { background: linear-gradient( to bottom, rgba( 24, 26, 30, .7 ) 5%, rgba( 24, 26, 30, .4 ) 95% ); } .miniprofile_content { width: 302px; border-radius: 3px; color: #828282; font-size: 14px; position: relative; } .miniprofile_nameplatecontainer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .miniprofile_nameplate { width: 100%; height: 100%; object-fit: cover; object-position: top right; } /* * GENERIC POPUP */ .pulldown { padding-left: 5px; padding-right: 18px; background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/popups/btn_arrow_down_padded.png' ); background-position: right center; background-repeat: no-repeat; cursor: pointer; } body.v6 .pulldown { margin-right: 5px; } span.popup_menu_pulldown_indicator { display: inline-block; background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/popups/btn_arrow_down.png' ); vertical-align: middle; width: 9px; height: 4px; } #admin_drop { border-radius: 2px; border: none; padding: 1px; display: inline-block; cursor: pointer; text-decoration: none !important; color: #67c1f5 !important; background: rgba( 103, 193, 245, 0.2 ) } #admin_drop:hover { text-decoration: none !important; color: #fff !important; background: #417a9b; background: -webkit-linear-gradient( 150deg, #417a9b 5%,#67c1f5 95%); background: linear-gradient( -60deg, #417a9b 5%,#67c1f5 95%); } #admin_drop span { padding: 0 22px 0 15px; margin-right: 8px; font-size: 15px; line-height: 30px; } .popup_block_new { z-index: 200; position: absolute; box-shadow: 0 0 12px #000000; } .popup_block_new.popup_block_hidden_until_visible { opacity: 1.0; transition: opacity 200ms; } .popup_block_new.popup_block_hidden_until_visible:not(.visible) { opacity: 0; pointer-events: none; } @media screen and (max-width: 910px) { html.responsive .popup_block_new.responsive_slidedown { position: static; box-shadow: none; } } html.responsive.rn_mobile_app .popup_block_new.responsive_slidedown { position: static; box-shadow: none; } .popup_block_new .popup_body { border: 1px solid #3D4450; position: relative; background-color: #3D4450; } body.v6 .popup_block_new .popup_body.popup_menu { padding: 0px 0px; } .popup_menu a.popup_menu_item { display: block; } .popup_menu .popup_menu_item { padding: 5px 12px; color: #dcdedf; text-transform: none; font-family: Motiva Sans, Arial, Helvectica, Verdana, sans-serif; font-size: 12px; font-weight: normal; line-height: normal; text-align: left; cursor: pointer; } #genre_flyout .popup_menu .popup_menu_item { font-size: 13px; padding: 5px 14px; } @media screen and (max-width: 910px) { html.responsive .popup_menu .popup_menu_item { font-size: 14px; line-height: 18px; } } html.responsive.touch .popup_menu .popup_menu_item { font-size: 14px; line-height: 18px; } .popup_menu a.popup_menu_item { text-decoration: none; } .popup_menu span.popup_menu_item { cursor: default; } .popup_menu .popup_menu_item:hover, .popup_menu .popup_menu_item.focus { color: #171d25; text-decoration: none; background: #dcdedf; } .popup_menu_subheader { color: #9e9995; font-size: 11px; padding: 2px 12px 3px 12px; cursor: default; } .popup_menu_item, .popup_menu_subheader { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .popup_menu_hint { float: right; margin-left: 8px; } .popup_menu_subarea { color: #9e9995; font-size: 11px; background-color: #3b3938; margin: 8px 12px; padding: 8px; text-align: center; } .popup_menu_subarea_inner { margin: 0 auto; width: 138px; } .popup_menu .hr { height: 1px; background-color: #82807c; margin: 10px 12px 0 12px; } .friendPlayerLevel { display: inline-block; font-size: 16px; border-radius: 16px; border: solid white 2px; height: 28px; width: 28px; line-height: 28px; text-align: center; cursor: default; } .friendPlayerLevel .friendPlayerLevelNum { color: #e5e5e5; } .friendPlayerLevel.lvl_0 { border-color: #9b9b9b; } .friendPlayerLevel.lvl_10 { border-color: #c02942; } .friendPlayerLevel.lvl_20 { border-color: #d95b43; } .friendPlayerLevel.lvl_30 { border-color: #fecc23; } .friendPlayerLevel.lvl_40 { border-color: #467a3c; } .friendPlayerLevel.lvl_50 { border-color: #4e8ddb; } .friendPlayerLevel.lvl_60 { border-color: #7652c9; } .friendPlayerLevel.lvl_70 { border-color: #c252c9; } .friendPlayerLevel.lvl_80 { border-color: #542437; } .friendPlayerLevel.lvl_90 { border-color: #997c52; } .friendPlayerLevel.lvl_100, .friendPlayerLevel.lvl_200, .friendPlayerLevel.lvl_300, .friendPlayerLevel.lvl_400, .friendPlayerLevel.lvl_500, .friendPlayerLevel.lvl_600, .friendPlayerLevel.lvl_700, .friendPlayerLevel.lvl_800, .friendPlayerLevel.lvl_900, .friendPlayerLevel.lvl_1000, .friendPlayerLevel.lvl_1100, .friendPlayerLevel.lvl_1200, .friendPlayerLevel.lvl_1300, .friendPlayerLevel.lvl_1400, .friendPlayerLevel.lvl_1500, .friendPlayerLevel.lvl_1600, .friendPlayerLevel.lvl_1700, .friendPlayerLevel.lvl_1800, .friendPlayerLevel.lvl_1900, .friendPlayerLevel.lvl_2000, .friendPlayerLevel.lvl_2100, .friendPlayerLevel.lvl_2200, .friendPlayerLevel.lvl_2300, .friendPlayerLevel.lvl_2400, .friendPlayerLevel.lvl_2500, .friendPlayerLevel.lvl_2600, .friendPlayerLevel.lvl_2700, .friendPlayerLevel.lvl_2800, .friendPlayerLevel.lvl_2900, .friendPlayerLevel.lvl_3000, .friendPlayerLevel.lvl_3100, .friendPlayerLevel.lvl_3200, .friendPlayerLevel.lvl_3300, .friendPlayerLevel.lvl_3400, .friendPlayerLevel.lvl_3500, .friendPlayerLevel.lvl_3600, .friendPlayerLevel.lvl_3700, .friendPlayerLevel.lvl_3800, .friendPlayerLevel.lvl_3900, .friendPlayerLevel.lvl_4000, .friendPlayerLevel.lvl_4100, .friendPlayerLevel.lvl_4200, .friendPlayerLevel.lvl_4300, .friendPlayerLevel.lvl_4400, .friendPlayerLevel.lvl_4500, .friendPlayerLevel.lvl_4600, .friendPlayerLevel.lvl_4700, .friendPlayerLevel.lvl_4800, .friendPlayerLevel.lvl_4900, .friendPlayerLevel.lvl_5000, .friendPlayerLevel.lvl_5100, .friendPlayerLevel.lvl_5200 { border: none; border-radius: 0; background-repeat: no-repeat; background-position: 0 0; font-size: 14px; height: 32px; width: 32px; line-height: 32px; text-shadow: 1px 1px #1a1a1a; } .friendPlayerLevel.lvl_100 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_hexagons.png' ); } .friendPlayerLevel.lvl_200 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_shields.png' ); } .friendPlayerLevel.lvl_300 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_books.png' ); } .friendPlayerLevel.lvl_400 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_chevrons.png' ); } .friendPlayerLevel.lvl_500 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_circle2.png' ); } .friendPlayerLevel.lvl_600 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_angle.png' ); } .friendPlayerLevel.lvl_700 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_flag.png' ); } .friendPlayerLevel.lvl_800 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_wings.png' ); } .friendPlayerLevel.lvl_900 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_arrows.png' ); } .friendPlayerLevel.lvl_1000 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_crystals.png' ); } .friendPlayerLevel.lvl_1100 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_space.png' ); } .friendPlayerLevel.lvl_1200 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_waterelement.png' ); } .friendPlayerLevel.lvl_1300 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_fireelement.png' ); } .friendPlayerLevel.lvl_1400 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_earthelement.png' ); } .friendPlayerLevel.lvl_1500 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_airelement_1-2.png' ); } .friendPlayerLevel.lvl_1600 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_airelement_3-4.png' ); } .friendPlayerLevel.lvl_1700 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_airelement_5-6.png' ); } .friendPlayerLevel.lvl_1800 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_airelement_7-8.png' ); } .friendPlayerLevel.lvl_1900 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_airelement_9-10.png' ); } .friendPlayerLevel.lvl_2000 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_geo_1-2.png?v=2' ); } .friendPlayerLevel.lvl_2100 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_geo_3-4.png?v=2' ); } .friendPlayerLevel.lvl_2200 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_geo_5-6.png?v=2' ); } .friendPlayerLevel.lvl_2300 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_geo_7-8.png?v=2' ); } .friendPlayerLevel.lvl_2400 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_geo_9-10.png?v=2' ); } .friendPlayerLevel.lvl_2500 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_mandala_1-2.png?v=2' ); } .friendPlayerLevel.lvl_2600 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_mandala_3-4.png?v=2' ); } .friendPlayerLevel.lvl_2700 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_mandala_5-6.png?v=2' ); } .friendPlayerLevel.lvl_2800 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_mandala_7-8.png?v=2' ); } .friendPlayerLevel.lvl_2900 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_mandala_9-10.png?v=2' ); } .friendPlayerLevel.lvl_3000 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_spiro_1-2.png?v=2' ); } .friendPlayerLevel.lvl_3100 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_spiro_3-4.png?v=2' ); } .friendPlayerLevel.lvl_3200 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_spiro_5-6.png?v=2' ); } .friendPlayerLevel.lvl_3300 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_spiro_7-8.png?v=2' ); } .friendPlayerLevel.lvl_3400 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_spiro_9-10.png?v=2' ); } .friendPlayerLevel.lvl_3500 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_patterns_1-2.png?v=2' ); } .friendPlayerLevel.lvl_3600 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_patterns_3-4.png?v=2' ); } .friendPlayerLevel.lvl_3700 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_patterns_5-6.png?v=2' ); } .friendPlayerLevel.lvl_3800 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_patterns_7-8.png?v=2' ); } .friendPlayerLevel.lvl_3900 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_patterns_9-10.png?v=2' ); } .friendPlayerLevel.lvl_4000 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_shapes_1.png?v=2' ); } .friendPlayerLevel.lvl_4100 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_shapes_2.png?v=2' ); } .friendPlayerLevel.lvl_4200 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_shapes_3.png?v=2' ); } .friendPlayerLevel.lvl_4300 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_shapes_4.png?v=2' ); } .friendPlayerLevel.lvl_4400 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_shapes_5.png?v=2' ); } .friendPlayerLevel.lvl_4500 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_grunge_1.png?v=2' ); } .friendPlayerLevel.lvl_4600 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_grunge_2.png?v=2' ); } .friendPlayerLevel.lvl_4700 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_grunge_3.png?v=2' ); } .friendPlayerLevel.lvl_4800 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_grunge_4.png?v=2' ); } .friendPlayerLevel.lvl_4900 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_grunge_5.png?v=2' ); } .friendPlayerLevel.lvl_5000 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_halftone_1.png?v=2' ); } .friendPlayerLevel.lvl_5100 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_halftone_2.png?v=2' ); } .friendPlayerLevel.lvl_5200 { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/community/levels_halftone_3.png?v=2' ); } .friendPlayerLevel.lvl_plus_10 { background-position: 0 -32px; } .friendPlayerLevel.lvl_plus_20 { background-position: 0 -64px; } .friendPlayerLevel.lvl_plus_30 { background-position: 0 -96px; } .friendPlayerLevel.lvl_plus_40 { background-position: 0 -128px; } .friendPlayerLevel.lvl_plus_50 { background-position: 0 -160px; } .friendPlayerLevel.lvl_plus_60 { background-position: 0 -192px; } .friendPlayerLevel.lvl_plus_70 { background-position: 0 -224px; } .friendPlayerLevel.lvl_plus_80 { background-position: 0 -256px; } .friendPlayerLevel.lvl_plus_90 { background-position: 0 -288px; } .newmodal { font-family: "Motiva Sans", Sans-serif; font-weight: normal; /* normal */ position: absolute; max-width: 900px; /* our page width */ min-width: 500px; background: radial-gradient(circle at top left, rgba(74, 81, 92, 0.4) 0%, rgba(75, 81, 92, 0) 60%), #25282e; } .newmodal_background { position: fixed; z-index: 900; background: #000000; top: 0; right: 0; bottom: 0; left: 0; } .newmodal_header .title_text { padding: 32px 32px 0px 32px; display: block; } .newmodal_header .subtitle_text { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ font-size: 19px; text-transform: none; line-height: 20px; letter-spacing: 0px; padding: 0px 32px 0px 32px; display: block; } .modal_top_bar { width: 100%; height: 1px; background: linear-gradient(to right, #00ccff, #3366ff); } .newmodal_header { padding: 0px 0px 0px 0px; text-align: left; font-size: 22px; font-weight: 700; color: #ffffff; letter-spacing: unset; text-transform: unset; flex-shrink: 0; } @media screen and (max-width: 910px) { html.responsive .newmodal_header .title_text { padding: 32px 15px 0px 15px; } html.responsive .newmodal_content { max-width: 646px; min-width: 280px; } } .newmodal_close { background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBREZBRDlBNzdCNzExRTI5ODAzRUE3MDU0Mzk5MjM5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBREZBRDlCNzdCNzExRTI5ODAzRUE3MDU0Mzk5MjM5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUFERkFEOTg3N0I3MTFFMjk4MDNFQTcwNTQzOTkyMzkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUFERkFEOTk3N0I3MTFFMjk4MDNFQTcwNTQzOTkyMzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4iulRzAAABPElEQVR42mI8cuQIAyWABUqbAXEylH0fiDtwqI8FYhsoewEQH4cZcBaI64DYG8p/AVWADDyAeD4QMwPxJiA+BRJkgkr+BeJoIL4D5U8DYi0kzepAvAKq+TJU7V9kA0DgIxD7Q2lOIF4NpfmBeAuUfg3EPkD8BaaJCc2Z14A4EcoGuWAC1NkqQPwLqvkRsgYmLAG1HoiboOw0IA6EshNh/iZkAAjUA/FBJP5KIF6GTSEuAwygUQsDflAxogwQAuJ10AAExcpNKHsjEIsSMoAZGl2K0EALBeIIKFsOKSpxGtACxK5Qdi4QX4DiAqiYExB34TIgBIgrkAJtFpLcdKgYCBQBcRRMghGamUBxfhKIeaB+NkFOLFAAkjsDTZXfgdgK5DpYXvBGiqYpWDQzQMVAYZKDlDcuMFKanQECDAAqw0LA+GRiqAAAAABJRU5ErkJggg== ); background-repeat: no-repeat; background-position: center right; cursor: pointer; float: right; margin-top: 9px; margin-right: 9px; height: 16px; width: 16px; opacity: 0.7; } /* for labelling the close button with text, used on market */ .newmodal_close.with_label { padding-right: 24px; width: auto; color: #ffffff; line-height: 16px; font-size: 12px; } .newmodal_close:hover { opacity: 1; } #ShareModal { width: 290px; } .newmodal_content_border { padding: 0 1px 1px 1px; display: flex; } .newmodal_content { width: 100%; overflow: auto; word-wrap: break-word; padding: 32px; font-size: 14px; color: #acb2b8; position: relative; } .newmodal_content_innerbg { background-color: rgba(59, 63, 72, 0.5); padding: 8px; color: #8f8f8f; } .newmodal_buttons { text-align: right; } .newmodal_buttons .btn_medium { margin-left: 12px; margin-top: 12px; } .newmodal_prompt_description { font-size: 14px; margin-bottom: 8px; } .newmodal_prompt_input { } .newmodal_prompt_input input[type=text] { width: 100%; } .newmodal_prompt_textarea { height: 396px; } .newmodal_prompt_with_textarea { display: inline-block; padding-top: 1px; padding-bottom: 1px; width: 500px; } .gray_bevel input, .gray_bevel textarea { border: none; outline: none; background-color: rgba(0,0,0,0.2); border: 1px solid #000; box-shadow: 1px 1px 0 0 rgba( 91, 132, 181, 0.2 ); font-size: 13px; color: #BFBFBF; } .gray_bevel input:-moz-read-only, .gray_bevel textarea:-moz-read-only { background: transparent; border: transparent; box-shadow: none; color: #919191; } .gray_bevel input:read-only, .gray_bevel textarea:read-only { background: transparent; border: transparent; box-shadow: none; color: #919191; } .gray_bevel.fullwidth { display: block; } .gray_bevel.fullwidth.for_text_input input, .gray_bevel.fullwidth textarea { /* narrow a bit to account for padding in the text area */ width: calc(100% - 8px); } input.gray_bevel { height: 20px; } textarea.gray_bevel, .gray_bevel textarea { resize: none; } select.gray_bevel { background-color: #565658; border-radius: 3px; border: 1px solid #262627; box-shadow: 1px 1px 0px #39393a; color: #BFBFBF; margin-bottom: 6px; outline: none; padding: 0px; line-height: 27px; height: 27px; font-size: 14px; } select.blueish { background-color: rgba( 255, 255, 255, 0.7 ); color: #000; border: 1px solid rgba( 255, 255, 255, 0.1 ); border-radius: 3px; box-shadow: 1px 1px 0px #000; } .waiting_dialog_container { line-height: 32px; } .waiting_dialog_centered { display: flex; justify-content: center; } .waiting_dialog_throbber { width: 32px; height: 32px; background: url( 'https://community.cloudflare.steamstatic.com/public/images/login/throbber.gif' ) center center no-repeat; margin-right: 5px; float: left; } .emoticon_hover { position: absolute; top: 0; left: 0; z-index: 1200; } .emoticon_hover_content { padding: 6px 10px 6px 6px; background-color: #3b3938; border: 1px solid #797979; margin: 12px; box-shadow: 0 0 12px #000000; white-space: nowrap; } .emoticon_hover_content.client { margin: 0; box-shadow: none; display: inline-block; } .emoticon_hover_content_inner { position: relative; min-height: 54px; padding-left: 62px; font-size: 13px; } .emoticon_hover_content_inner img.emoticon_large { position: absolute; left: 0; top: 0; } .emoticon_hover_title { padding-top: 8px; color: #898989; } .emoticon_hover_desc { color: #686868; } .emoticon_hover_arrow { width: 13px; height: 26px; background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/popups/hover_arrow_both.gif' ); background-repeat: no-repeat; position: absolute; top: 26px; } .emoticon_hover_arrow.left { background-position: left top; left: 0; } .emoticon_hover_arrow.right { background-position: right top; right: 0; } /* * HEADER */ /* apply 16px padding to the sides of all the page-wide divs to prevent content from touching the sides on small resolutions */ div#footer, div#global_header, div#store_header, div#main, div.page_area { padding-left: 16px; padding-right: 16px; } div.page_content { width: 940px; margin: 0px auto; } div#global_header { background: #171d25; background-position: center top; min-width: 940px; font-family: "Motiva Sans", Sans-serif; font-weight: normal; /* normal */ font-size: 14px; } .partner_events div#global_header { position: relative; z-index: 151; } div#global_header .content { background: #171d25; position: relative; width: 940px; height: 104px; margin: 0px auto; z-index: 402; } div#global_actions { position: absolute; right: 0px; top: 6px; height: 21px; line-height: 21px; color: #b8b6b4; font-size: 11px; z-index: 401; } div#global_actions a.global_action_link { padding: 0 4px; } div#global_actions a.global_action_link, div.admin_actions a.global_action_link { color: #b8b6b4; } div#global_actions .global_action_link:hover, div.admin_actions .global_action_link:hover { text-decoration: none; color: #ffffff; } div.admin_actions { position: absolute; right: 0; bottom: 4px; text-align: right; color: #b8b6b4; font-size: 11px } div#global_actions #global_action_menu { line-height: 24px; vertical-align: top; display: inline-block; } #global_action_menu > * { vertical-align: top; } div#global_actions .user_avatar { display: inline-block; margin-left: 3px; } div#global_header div.logo { float: left; padding-top: 30px; margin-right: 40px; width: 176px; height: 44px; } div#global_header .menuitem { display: block; position: relative; padding-top: 45px; padding-left: 7px; padding-right: 7px; padding-bottom: 7px; line-height: 16px; float: left; font-size: 14px; color: #dcdedf; text-transform: uppercase; font-size: 16px; font-family: "Motiva Sans", "Twemoji", "Noto Sans", Helvetica, sans-serif; font-weight: 500; text-transform: uppercase; } div#global_header .menuitem.active, div#global_header .menuitem:hover { color: #ffffff; text-decoration: none; } div#global_header .menuitem.active { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/globalheader_highlight.png' ); background-repeat: repeat-x; } div#global_header .activebg { display: none; } #header_wallet_balance { display: inline-block; } #header_wallet_ctn { text-align: right; padding-right: 15px; line-height: normal; } #account_pulldown { display: inline-block; padding-left: 4px; line-height: 25px; } #account_language_pulldown { display: block; } #language_pulldown.focus, #account_pulldown.focus { color: #ffffff; } #account_dropdown > .popup_body { width: fit-content; max-width: 250px; } #account_dropdown > .popup_body.popup_menu .popup_menu_item { padding: 8px 18px; font-size: 13px; } #account_dropdown > .popup_body.popup_menu .popup_menu_item .account_name { color: #4cb4ff; } .header_installsteam_btn { display: inline-block; position: relative; height: 21px; line-height: 24px; margin-right: 3px; } .header_installsteam_btn_green .header_installsteam_btn_leftcap, .header_installsteam_btn_green .header_installsteam_btn_rightcap, .header_installsteam_btn_green .header_installsteam_btn_content { background-color: #5c7e10; &:hover { background-color: #6c9018; transition-property: background; transition-duration: 250ms; cursor: pointer; } } .header_installsteam_btn_gray .header_installsteam_btn_leftcap, .header_installsteam_btn_gray .header_installsteam_btn_rightcap, .header_installsteam_btn_gray .header_installsteam_btn_content { background-color: rgba(103, 112, 123, 0.2); &:hover { background-color: #3D4450; transition-property: background; transition-duration: 250ms; cursor: pointer; } } .header_installsteam_btn_content { display: inline-block; padding-left: 35px; padding-right: 9px; background-position: 10px 5px; background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/btn_header_installsteam_download.png?v=1' ); background-repeat: no-repeat; text-decoration: none; color: #e5e4dc; font-weight: normal; } .header_installsteam_btn_content:hover { text-decoration: none; color: #ffffff; } .global_header_toggle_button { display: inline-block; line-height: 24px; margin: 0 3px 0 8px; cursor: pointer; /* background-color: #262625; */ } .global_header_toggle_button:hover, .global_header_toggle_button.focus { /* background-color: #575451; */ } /* make sure we override any global a styles on the site */ .global_header_toggle_button, a.global_header_toggle_button, a.global_header_toggle_button:hover { color: #ffffff; font-weight: normal; font-size: 12px; font-family: "Motiva Sans", Sans-serif; font-weight: bold; /* bold */ } .global_header_toggle_button.green, .global_header_toggle_button.has_notifications { background-color: #5c7e10; } .global_header_toggle_button.green:hover, .global_header_toggle_button.green.focus, .global_header_toggle_button.has_notifications:hover, .global_header_toggle_button.has_notifications.focus { background-color: #7ea64b; } .global_header_toggle_button.red { background-color: #9a3130; } .global_header_toggle_button.red:hover, .global_header_toggle_button.red.focus { background-color: #d75a5a; } .global_header_toggle_button.yellow { background-color: #bb9d2f; } .global_header_toggle_button.yellow:hover, .global_header_toggle_button.yellow.focus { background-color: #c1a643; } .global_header_account_alert { font-weight: bold; padding: 0 54px; } a.global_header_account_alert:hover { color: #ffffff; } div#global_header .menuitem_new { position: absolute; top: 27px; font-size: 11px; color: #85b0df } div#global_header .submenuitem { text-decoration: none; text-transform: none; font-size: 12px; color: #dcdedf; padding-right: 15px; padding-left: 15px; } div#global_header .submenuitem span.new { color: white; background: #c37f00 ; padding: 1px 3px; font-size: 10px; border-radius: 2px; text-shadow: none; text-transform: uppercase; } div#global_header .submenuitem.active, div#global_header .submenuitem:hover { text-decoration: none; background: #dcdedf; color: #171a21; } div#global_header .submenuitem.moderator { color: #ca5029; } div#global_header .submenuitem.active.moderator, div#global_header .submenuitem.moderator:hover { color: #ca5029; } .community_sub_nav { position: absolute; left: 7px; top: 65px; width: 650px; font-size: 14px; } .menuitem.username { max-width: 250px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #global_header .supernav_container { position: absolute; left: 200px } .supernav_content { background: #3D4450; box-shadow: 3px 3px 5px -3px #000; text-align: left; z-index: 500; } .supernav_content a.submenuitem { display: block; padding: 6px 0; text-transform: uppercase; font-size: 12px; } .supernav_content a.submenuitem:hover { color: #4897cf; text-decoration: none; } .supernav { &::after { content: ""; display: block; width: 100%; height: 2.5px; margin-top: 2px; } } div#global_header .menuitem.supernav_active { color: #1a9fff; &::after { content: ""; display: block; width: 100%; height: 2.5px; background: #1a9fff; border-radius: 3px; animation: slide 0.1s; margin-top: 2px; } } @keyframes slide { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* -------------- paging controls -------------*/ .pagebtn, a.pagebtn { display: inline-block; line-height: 24px; background-color: rgba( 103, 193, 245, 0.2 ); border: 1px transparent; border-radius: 3px; cursor: pointer; padding: 0px 16px; color: #66c0f4; } .pagebtn:not(.disabled):hover, a.pagebtn:not(.disabled):hover { background-color: #66c0f4; border-color: #66c0f4; color: #fff; text-decoration: none; } .pagebtn.disabled, .pagebtn.disabled:hover, a.pagebtn.disabled, a.pagebtn.disabled:hover { cursor: default; opacity: 0.2; } a.pagelink:hover { text-decoration: underline; color: #ffffff; } /* steam inbox */ /* notification box */ #header_notification_area { display: inline-block; } .header_notification_btn { padding: 0 8px; } .header_notification_btn.has_notifications .header_notification_envelope { margin-left: 4px; } .header_notification_btn.no_notifications .notification_count { display: none; } .header_notification_btn.has_notifications { } #header_notification_dropdown .popup_menu { padding: 2px; } #header_notification_dropdown .popup_menu_item { line-height: 36px; padding: 0px 8px 0px 8px; background-repeat: no-repeat; background-position: left center; color: #bfbfbf; } #header_notification_dropdown .popup_menu_item:hover { color: #ffffff; background-color: #373d44; } #header_notification_dropdown .popup_menu_item.active_inbox_item { color: #70ba24; } .header_notification_btn.header_notification_bell { display: block; width: 46px; height: 24px; padding: 0px; margin: 0px; background: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/notification_bell.png' ) no-repeat #3D4450; background-position: center; background-size: 14px; } .notification_ctn.hide_when_empty:not(.active_inbox_item) { display: none; } .header_notification_dropdown_seperator { height: 1px; background-color: #262a31; } .notification_icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; background-repeat: no-repeat; background-position: center; margin-right: 16px; position: relative; top: -2px; background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/inbox_icons_sprite.png' ); } .header_notification_comments .notification_icon { background-position: 0 0; } .header_notification_items .notification_icon { background-position: 0 -16px; } .header_notification_invites .notification_icon { background-position: 0 -32px; } .header_notification_gifts .notification_icon { background-position: 0 -48px; } .header_notification_offlinemessages .notification_icon { background-position: 0 -64px; } /* these are shown conditionally so not a big deal that they aren't in the sprite */ .header_notification_tradeoffers .notification_icon { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/inbox_tradeoffers.png' ); } .header_notification_asyncgame .notification_icon { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/inbox_async_game.png' ); } .header_notification_asyncgameinvite .notification_icon { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/inbox_async_game_invite.png' ); } /* re-uses comment icon */ .header_notification_moderatormessage .notification_icon, .header_notification_helprequestreply .notification_icon { background-image: url( 'https://community.cloudflare.steamstatic.com/public/shared/images/header/inbox_moderator_message.png' ); } .header_parental_btn { padding: 0 12px; width: 23px; background-position: center; background-repeat: no-repeat; cursor: pointer; } .header_parental_btn.passwordless { cursor: default; } .header_parental_btn.partial { background-color: rgba(103, 112, 123, 0.2); background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAxIDc5LmE4ZDQ3NTM0OSwgMjAyMy8wMy8yMy0xMzowNTo0NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk2ODQ3OEQ2NEQyQzExRUU4QzBFQkY2RTE2Q0U4QUVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk2ODQ3OEQ3NEQyQzExRUU4QzBFQkY2RTE2Q0U4QUVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTY4NDc4RDQ0RDJDMTFFRThDMEVCRjZFMTZDRThBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTY4NDc4RDU0RDJDMTFFRThDMEVCRjZFMTZDRThBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6qk34BAAABnklEQVR42tyUTStEYRTH586MFHlLMaHU2CiUNGJFYyFZSXaUhWahyIKNT2BjQXZsp4mUJAs1NVEWKC/5AsyCyB4L7vid6dzpNHNjMyu3fj1v53+e55zzPNfJ5XKBcnzBQJm+sjkK28H61k6Mph+ycLqymHgvWq+iGYUmuGD9vuREGLXRjEMEBiHus/EI9IHYTqBp8QutFUIg2XchimHIbCT9TrMeVE2Jo0f4MuMXjv7tDbT/atIhtk8ljjAUo124k/zAkU9oB3CuNkk0z96C89s9Ipxemk3dcAnhzZ9VQySVGIYO2EP0QLsBQ2qyDTHsorSTmooz7N4KoWnFZqALqjXp8lWaTe1cPXTDNNqIzZHcnVrtS6w9GOTDgWu4hXnmHFnTqgXU4YANrc7LmTpq1AJcSTgmfEfFrjlpg3XkmtNI9VI4cRGO0Z/S9X3m0swl6c9Cs9V6oVWYE6XlaSBYoH8Ic5CAE+aW9dlk1LagzZcfg7ju8AHH0A5S6pqiS/upSc5q5cJ6cTO+90gf75rZ1V7gVYSXxRrn//7YfgQYAHJdjG35zInfAAAAAElFTkSuQmCC' ); } .header_parental_btn.partial.password:hover { background-color: #3D4450; } .header_parental_btn.full { background-color: rgb(92, 126, 16); background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAxIDc5LmE4ZDQ3NTM0OSwgMjAyMy8wMy8yMy0xMzowNTo0NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ5QzIxNDIwNEU2RTExRUVBQ0Y0QjY1NzI2NTE3RUVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ5QzIxNDIxNEU2RTExRUVBQ0Y0QjY1NzI2NTE3RUVEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDlDMjE0MUU0RTZFMTFFRUFDRjRCNjU3MjY1MTdFRUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDlDMjE0MUY0RTZFMTFFRUFDRjRCNjU3MjY1MTdFRUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ACHYVAAABY0lEQVR42tzUzytEURTA8XkTCwshWRIWFhMjDalJiZQSC+UfkKzsLC3ewspCjZpsJSspOyW7mdSwMGSyUooslKWi/Ly+t87lzJ3Hamzc+kz3nHPf6b1735vAGBOrxojHqjT+rNE09rGC5oj1jchgD1NlFbtHIokH8z2yquasqfoTelxN31Ea9SoeQa2K7XxMxXVyTcWjFfCi4iO8qtjO8yp+xokLAu/4JzCDS2Tx6O1RAxbRii3kovYoSgqHov+3tTroxg7uMCC5Y7W5Z5KzDW+wjYTfaBC36qIhyZ+rXElywyp3jV7daNOUjwziSKOIU5nbPV311m7YHjWyVW3eprbbg5CTTKm8zXV4azvtj2v0oQpFzOIdk/K22/kuDjAnzfpk/Zs+tYK61VHJLZnKEUptXOXstV/v0TKSuMcCunDxw/eZwBXW0YISQvdoYcSLl5NH8j/yJvkC5nUh+L9/bJ8CDACBt6K3eAQ3DQAAAABJRU5ErkJggg==' ); } .header_parental_btn.full.password:hover { background-color: rgb(126, 166, 75); } /* dynamic links */ .dynamiclink_box { position: relative; font-family: Helvetica, Arial, sans-serif; background: -webkit-linear-gradient( 30deg, rgba(87, 92, 104, 0.3) 5%,rgba(255,255,255,0.05) 95%); background: linear-gradient( 60deg, rgba(87, 92, 104, 0.3) 5%,rgba(255,255,255,0.05) 95%); border-radius: 6px; padding: 8px; margin: 10px 0px 10px 0px; cursor: pointer; overflow: hidden; } a.dynamiclink_box { display: block; text-decoration: none !important; } .dynamiclink_box.noPopup { cursor: default; } .dynamiclink_box.newspost .dynamiclink_description { padding-top: 10px; } .dynamiclink_box:hover { border-color: #97C0E3; } img.dynamiclink_preview { float: left; margin-right: 14px; max-height: 88px; max-width: 75%; } .dynamiclink_content { font-family: "Motiva Sans", Sans-serif; font-weight: 300; /* light */ color: rgb( 192, 192, 192 ); text-shadow: 0 0 16px rgb( 0, 0, 0 ); font-size: 13px; line-height: normal; text-align: left; display: flow-root; } .dynamiclink_name { font-size: 15px; color: #aad8ec; font-family: "Motiva Sans", Sans-serif; font-weight: 300; /* light */ border-bottom: 1px dotted rgba( 109, 207, 246, .6 ); padding-bottom: 0px; display: inline-block; margin-bottom: 6px; } .dynamiclink_name .dynamiclink_type { color: #c6d4df; } .dynamiclink_type { color: #c6d4df; } .dynamiclink_type a { color: #c6d4df; text-decoration: underline; } .dynamiclink_type a:hover { color: #ffffff; text-decoration: underline; } .dynamiclink_author { min-height: 16px; font-size: 12px; color: #95a6b2; margin-bottom: 4px; } .dynamiclink_author a { color: #c6d4df; text-decoration: underline; } .dynamiclink_author a:hover { color: #ffffff; text-decoration: underline; } .dynamiclink_author span { color: #809fb7; } .dynamiclink_author img.app_icon { vertical-align: top; padding-right: 5px; height: 16px; } .dynamiclink_url { margin-top: 8px; } .dynamiclink_url a { color: #ffffff; text-decoration: none; } .dynamiclink_url a:hover { color: #7bb7e3; text-decoration: underline; } .dynamiclink_url a, .dynamiclink_authorname { color: #ffffff; } .dynamiclink_app { min-height: 16px; font-size: 12px; color: #95a6b2; margin-bottom: 4px; } .dynamiclink_app a { color: #c6d4df; } .dynamiclink_app a:hover { color: #ffffff; text-decoration: underline; } .dynamiclink_app span { color: #809fb7; } .dynamiclink_app img.app_icon { vertical-align: top; padding-right: 5px; height: 16px; } .dynamiclink_youtubeviewvideoembedded { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .dynamiclink_sketchfabmodelembedded { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .dynamiclink_youtubeviewvideoembedded iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .dynamiclink_youtubeviews { padding-top: 4px; padding-bottom: 4px; color: #bfbfbf; } .dynamiclink_sketchfabmodelembedded { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .dynamiclink_sketchfabmodelembedded iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } img.dynamiclink_sketchfab_play_overlay_image { position: absolute; left: 83px; margin-left: -25px; top: 50%; margin-top: -25px; width: 50px; height: 50px; } .dynamiclink_pointsshopitem { } .dynamiclink_pointsshopitem .dynamiclink_itemtype { padding-bottom: 2px; } /* blur capsule images for games with adult content if the user has opted out of seeing them*/ .app_has_adult_content { overflow: hidden; } .app_has_adult_content img.game_capsule { filter: blur( 30px ); } /* ugc with adult content */ .ugc.has_adult_content { overflow: hidden; } .ugc.has_adult_content img, .ugc.has_adult_content div.imgWallItem { filter: blur( 30px ); } .ugc.banned.has_adult_content img, .ugc.banned.has_adult_content.profile_media_item { box-shadow: inset 0px 0px 1px 1px #ff0000; } .ugc.has_adult_content.internet_explorer { background-color: black; } .ugc.has_adult_content.internet_explorer img { opacity: 0; filter: none; } .ugc.has_adult_content.internet_explorer div.imgWallItem { filter: none; opacity: 0.05; } .ugc.has_adult_content .workshopItemDetails, .ugc.has_adult_content .myguide_showcase_item { opacity: 0.25; } .ugc.has_adult_content.ugc_show_warning_image::after { content: ""; background: url( https://community.cloudflare.steamstatic.com/public/shared/images/ico/icon_content_warning.png ) center center no-repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } .ugc.has_adult_content.dynamiclink_box::after { width: 88px; } .ugc .ugc_warning { display: none; } .ugc.has_adult_content .ugc_warning { display: block; position: absolute; width: 100%; top: 0; left: 0; font-size: 0.75em; vertical-align: top; text-align: center; color: #ffffff; background-color: rgba(0,0,0,0.25); padding-top: 10px; padding-bottom: 10px; } .ugc.has_adult_content .ugc_warning:hover { color: #ffffff; } .ugc.has_adult_content .ugc_warning.large { font-size: 1.25em; top: 12%; } .ugc.has_adult_content .ugc_warning .ugc_inline_option { display: inline-block; text-decoration: underline; } .ugc.has_adult_content .ugc_warning .ugc_inline_option:hover { color: #66C0F4; } .ugc.has_adult_content .ugc_warning .ugc_warning_image { background: url( https://community.cloudflare.steamstatic.com/public/shared/images/ico/icon_content_warning.png ) center center no-repeat; width: 100%; height: 36px; pointer-events: none; } /* ugc_options defines the per-ugc preferences dropdown */ .ugc_options { display: block; position: absolute; top: 0px; right: -5px; cursor: pointer; opacity: 0; padding: 5px 5px 0 0; transition: opacity 0.2s, right 0.2s; z-index: 5; } .ugc_options > div { width: 15px; height: 15px; background-color: rgba(54,97,125,1); background-image: url('https://community.cloudflare.steamstatic.com/public/shared/images/v6/icon_expand.png'); background-position: 4px 4px; border-radius: 3px; background-repeat: no-repeat; box-shadow: 0 0 3px #000; } .ugc_options:hover > div { background-color: #67c1f5; color: #fff; background-image: url('https://community.cloudflare.steamstatic.com/public/shared/images/v6/icon_expand_white.png'); } *:hover > .ugc_options, .ugc_hover.ugc_options { opacity: 1; right: 0px; } .ugc_options_tooltip { background: -webkit-linear-gradient( top, #e3eaef 5%, #c7d5e0 95%); background: linear-gradient( to bottom, #e3eaef 5%, #c7d5e0 95%); padding: 2px 8px; color: #fff; border-radius: 3px; box-shadow: 0 0 3px #000; } .ugc_options_tooltip > .option { margin: 5px 0; display: block; cursor: pointer; background-color: rgba(0,0,0,0.1); border-radius: 2px; padding: 4px 8px; line-height: normal; font-size: 11px; color: #407898; } .ugc_options_tooltip > .option:hover { color: #ffffff; background-color: #67c1f5; } .jsTooltip { background-color: #c2c2c2; padding: 5px; border-radius: 2px; box-shadow: 0 0 3px #000; max-width: 225px; color: #3d3d3f; font-size: 11px; text-align: left; } .Tooltip_mark { font-size: 11px; } /* early access tag on reviews*/ .early_access_review { background-color: #4d6c8b; border: 1px solid #779abc; text-transform: uppercase; font-family: arial; font-size: 11px; color: #9ac7f3; padding: 1px 4px 0px 4px; margin-bottom: 10px; margin-right: 4px; display: inline-block; cursor: default; line-height: 13px; } /* pre release tag on reviews*/ .pre_release_review { background-color: #8b734d; border: 1px solid #bca177; text-transform: uppercase; font-family: arial; font-size: 11px; color: #dabb8a; padding: 1px 4px 0px 4px; margin-bottom: 10px; display: inline-block; cursor: default; line-height: 13px; } /* shared bbcode styles */ span.bb_spoiler { color: #000000; background-color: #000000; padding: 0px 8px; } span.bb_spoiler:hover { color: #ffffff; } span.bb_spoiler > span { visibility: hidden; } span.bb_spoiler:hover > span { visibility: visible; } blockquote.bb_blockquote, .bb_wysiwyg blockquote { border: 1px solid #56707f; border-radius: 3px; padding: 12px; margin: 8px; font-size: 92%; display: table; word-break: break-word; } .forumtopic_answer .answer_quote blockquote.bb_blockquote, .bb_wysiwyg blockquote { border: 1px solid #457592; } blockquote.bb_blockquote.with_author { } div.bb_quoteauthor { font-size: 92%; font-style: italic; } div.bb_h1, .bb_wysiwyg h1 { font-size: 20px; line-height: 23px; color: #5aa9d6; font-weight: normal; margin-bottom: 10px; clear: both; } div.bb_h2, .bb_wysiwyg h2 { color: #5aa9d6; margin-bottom: 6px; margin-top: 8px; font-size: 18px; line-height: 21px; font-weight: 400; clear:both; } div.bb_h3, .bb_wysiwyg h3 { color: #5aa9d6; margin-bottom: 6px; margin-top: 8px; font-size: 16px; line-height: 19px; font-weight: 300; clear:both; } .ModernBBStyles .DialogBodyText .tagexample { color: #cfd2d3; font-size: 14px; } .ModernBBStyles div.bb_h1 { font-size: 32px; line-height: 33px; font-weight: 500; color: #ffffff; } .ModernBBStyles div.bb_h2 { font-size: 26px; line-height: 29px; font-weight: 400; color: #ffffff; } .ModernBBStyles div.bb_h3 { font-size: 19px; line-height: 22px; font-weight: 300; color: #ffffff; } .ModernBBStyles a.bb_link { color: #80bcd2; } span.bb_strike { text-decoration: line-through; } div.bb_pullquote { font-size: 18px; font-weight: 600; } span.bb_link_host { font-size: 10px; color: #7e8391; padding: 4px; top: -1px; } div.bb_code, .bb_wysiwyg pre { border: 1px solid #535354; border-radius: 3px; padding: 12px; margin: 8px; font-size: 11px; font-family: Consolas,monospace; white-space: pre; white-space: pre-wrap; overflow-x: auto; } span.bb_removedlink { color: #56707f; font-weight: normal; font-size: 80%; } div.bb_table { display: table; font-size: 12px; } div.bb_table div.bb_table_th { display: table-cell; font-weight: bold; border: 1px solid #4d4d4d; padding: 4px; } div.bb_table div.bb_table_th img.sharedFilePreviewImage { margin: 0px; } div.bb_table div.bb_table_tr { display: table-row; } div.bb_table div.bb_table_td { display: table-cell; vertical-align: middle; border: 1px solid #4d4d4d; padding: 4px; } div.bb_table div.bb_table_td img.sharedFilePreviewImage { margin: 0px; } video.bb_video { width: 100%; } .bb_ul > li { list-style-position: outside; } /* V6 */ body.v6 .store_nav .popup_block_new .popup_body, body.v6 #footer_nav .popup_block_new .popup_body { border: none; position: relative; background: #417A9B; } body.v6 .store_nav .popup_menu_subheader, body.v6 #footer_nav .popup_menu_subheader{ color: #13242e; } body.v6 .store_nav .popup_menu .hr, body.v6 #footer_nav .popup_menu .hr{ background-color: #33627d; margin: 5px 0px 5px 0px; } /* * DYNAMIC STORE - ownership styling */ .ds_flag { position: absolute; left: 0; top: 14px; font-size: 10px; color: #111111; box-shadow: 0 0 10px rgba(0,0,0,0.9); height: 18px; line-height: 19px; padding: 0 0 0 18px; white-space: nowrap; z-index: 5; } .store_main_capsule .ds_flag { top: 42px; } .broadcast_capsule .ds_flag { top: 28px; } .ds_flag.ds_owned_flag { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUNDNzBFNTUyMUM0MTFFNDk1REVFODRBNUU5RjA2MUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUNDNzBFNTYyMUM0MTFFNDk1REVFODRBNUU5RjA2MUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5Q0M3MEU1MzIxQzQxMUU0OTVERUU4NEE1RTlGMDYxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5Q0M3MEU1NDIxQzQxMUU0OTVERUU4NEE1RTlGMDYxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv3vUKAAAAAlSURBVHjaYvz//z8DsYARpFhISAivjnfv3jGSp3jUGeQ4AyDAADZHNe2nyOBrAAAAAElFTkSuQmCC') no-repeat 4px 4px #4F95BD; } .ds_flag.ds_wishlist_flag { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTM3OEVDNTUyMUM0MTFFNDgxN0ZEN0MzNjYzNzcxOTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTM3OEVDNTYyMUM0MTFFNDgxN0ZEN0MzNjYzNzcxOTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMzc4RUM1MzIxQzQxMUU0ODE3RkQ3QzM2NjM3NzE5NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMzc4RUM1NDIxQzQxMUU0ODE3RkQ3QzM2NjM3NzE5NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps9jzFQAAACPSURBVHjaYvz//z+DkJDQdQYGhpsMCMAKxMZAHPXu3bt9cFGQYkFBwQ0gGoaBfAEgzgfibUDsBxNnYsAOfgKxJBBvAeIZMEEWZBVA52xA5gOdUAEUc8NQDBTkBEoGMOAByCYLAjUsRzM5AKtioMQzIEW0ydjcHIBTMSE3M0Ij5RKQfQ6HGiOgIXogBkCAAQDGVT+0v+n6EQAAAABJRU5ErkJggg==') no-repeat 4px 4px #d3deea; } .ds_flag.ds_incart_flag { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTc2NkExNDUyMUM0MTFFNDlBMDZDN0ZDMTM1QUM0QzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTc2NkExNDYyMUM0MTFFNDlBMDZDN0ZDMTM1QUM0QzYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNzY2QTE0MzIxQzQxMUU0OUEwNkM3RkMxMzVBQzRDNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNzY2QTE0NDIxQzQxMUU0OUEwNkM3RkMxMzVBQzRDNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmidn20AAADOSURBVHjajM+9DgFBEMDx9dUJuYtESaHRKEhoVHqPoeJFdBLvoFNpJER0RENEobhCRCkXXxXF+Y/MyTYSk/wys5O5vdmI4zgDY0wVfVzN73hFgiAwruu2ORQxRRMjHWhgpnU3rsUKZWysLFHQOoFTOCyNGvJwNUtktC5hG5WO7/sv0hkLeJzngnqv+Yn1Z2cJ9u6RKvIQ3PTmJB5IoxW3XrvUfY9W76J5yB88e3iCOsbYaS+GTviRPZzFHSluOehq8nt5V07O353/ibcAAwA8yD/9PofkFwAAAABJRU5ErkJggg==') no-repeat 4px 4px #A3CF06; } .ds_flag.ds_ignored_flag { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAAEV95QVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0NBQzI5M0RBQkU4MTFFODkwMjRCQUUxMEY4RjAzOTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0NBQzI5M0VBQkU4MTFFODkwMjRCQUUxMEY4RjAzOTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3Q0FDMjkzQkFCRTgxMUU4OTAyNEJBRTEwRjhGMDM5OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3Q0FDMjkzQ0FCRTgxMUU4OTAyNEJBRTEwRjhGMDM5OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhYgdgsAAAC0SURBVHjaYmBAA1MAAghEbAQzAQIIxloAxDwAAQTiRAHx9v///zMwARmOQPwSJAriPAHiDBAHIIBgypBBPUgLCGxHk+AASQAEEDOUA5IMgxp3GawNTXUUI5DgBuKpUIHfQCwGNgdN5XaYR2ASYKMAAgzZh/VoujigYiA5BmTnohvNgKYJHBwsQMYvIAbRS2CBhQS+QEPnF3II1eMxGSQXBTKZEdn/QByLZAobEC8G4mUwNwMAaHAvah1OMXkAAAAASUVORK5CYII=') no-repeat 4px 4px #bfbfbf; } .ds_flag.ds_excluded_by_preferences_flag { left: 0; right: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAAEV95QVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQ4MTk4RThBQkU4MTFFOEE4QzlBQ0YwQzQ0RThBMUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQ4MTk4RTlBQkU4MTFFOEE4QzlBQ0YwQzQ0RThBMUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDgxOThFNkFCRTgxMUU4QThDOUFDRjBDNDRFOEExQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDgxOThFN0FCRTgxMUU4QThDOUFDRjBDNDRFOEExQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkmScEMAAADKSURBVHjaYmBAA1MAAghEbAQzAQIIxvoPYgAEEAhFAfH2////M7AAGcuAWA4mUw/EHCAZgACCKTOCSsSAJGES26ECFVBDwToAAogZqhIkGQbETEB8mRFq5l0gXgI1TgNmWQWSmzaCVHIA8XcgrgTiR0AcC/MIB5LzGAACDNmH9UiSDFB2Pcz3yM7lgDr5P9RemN1RULntMMUbkUyDKYJpggcmSDHIfyuh1oG89RiIGaH4MVSsHqoGLIgc+iCf/YLy2YB4MTQiwG4GAMb1Ppm6hYCeAAAAAElFTkSuQmCC') no-repeat 4px 4px #bfbfbf; } .ds_collapse_flag.ds_flagged .ds_flag { overflow: hidden; max-width: 0; transition: all 0.5s; -webkit-transition: all 0.5s; } .ds_collapse_flag.ds_collapse_flag_tiny.ds_flagged .ds_flag { padding-left: 4px; } .ds_collapse_flag.ds_flagged:hover .ds_flag { max-width: 120px; } .ds_collapse_flag.ds_flagged:hover .ds_flag.ds_excluded_by_preferences_flag { max-width: none; padding-right: 4px; } .ds_collapse_flag_tiny.ds_flagged:hover .ds_flag { padding-left: 18px; } .ds_flagged.ds_excluded_by_preferences { } /* Scrollbar CSS. Move this to somewhere common before checking in thankx */ .v_scrollbar { background-color: rgba(0,0,0,0.2); border-radius: 2px; } .v_scrollbar_target div.animating { transition: left 0.3s, top 0.3s; } .v_scrollbar > .handle { background: #3d6c8d; /* Old browsers */ background: -moz-linear-gradient(-45deg, #3d6c8d 0%, #2e5470 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3d6c8d), color-stop(100%,#2e5470)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #3d6c8d 0%,#2e5470 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #3d6c8d 0%,#2e5470 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #3d6c8d 0%,#2e5470 100%); /* IE10+ */ background: linear-gradient(135deg, #3d6c8d 0%,#2e5470 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d6c8d', endColorstr='#2e5470',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border-radius: 2px; } .v_scrollbar.horizontal { height: 14px; } .v_scrollbar.vertical { width: 14px; } .v_scrollbar.vertical > .handle { height: 24px; width: 14px; } .v_scrollbar.horizontal > .handle { height: 14px; width: 24px; } .LoadingWrapper { position: relative; margin: auto auto; vertical-align: middle; } .LoadingWrapper .LoadingThrobber { margin: 0px auto 40px auto; width: 62px; height: 62px; } .LoadingWrapper .LoadingText { color: #60acde; font-size: 22px; text-align: center; } @keyframes loading_throbber_bar { 0% { transform: scale( 1.0, 0.6 ); background-color: #67c1f5; } 30% { transform: scale( 1.0, 1.0 ); background-color: #67c1f5; } 55% { transform: scale( 1.0, 0.6 ); background-color: #67c1f5; } 100% { transform: scale( 1.0, 0.6 ); background-color: #67c1f5; } } @-webkit-keyframes loading_throbber_bar { 0% { -webkit-transform: scale( 1.0, 0.7 ); background-color: #67c1f5; } 30% { -webkit-transform: scale( 1.0, 1.0 ); background-color: #67c1f5; } 55% { -webkit-transform: scale( 1.0, 0.7 ); background-color: #67c1f5; } 100% { -webkit-transform: scale( 1.0, 0.7 ); background-color: #67c1f5; } } .LoadingWrapper .LoadingThrobber .Bar { -webkit-animation: test 2s infinite; float: left; margin-right: 6px; width: 12px; height: 68px; background-color: #67c1f5; animation: loading_throbber_bar 1s ease-in-out infinite; -webkit-animation: loading_throbber_bar 1s ease-in-out infinite; } .LoadingWrapper .LoadingThrobber .Bar1 { } .LoadingWrapper .LoadingThrobber .Bar2 { animation-delay: 0.16s; -webkit-animation-delay: 0.16s; } .LoadingWrapper .LoadingThrobber .Bar3 { animation-delay: 0.32s; -webkit-animation-delay: 0.32s; } .content_descriptors_examples_desc { font-size: 18px; padding-bottom: 20px; } .content_descriptors_example_app { padding-bottom: 20px; display: flex; align-items: center; } .content_descriptors_example_app .app_logo { width: 120px; height: 45px; } .content_descriptors_example_app .app_name { margin-left: 20px; } .shared_game_rating { color: #c6d4df; font-size: 12px; } .shared_game_rating .game_rating_agency { margin-top: 8px; } .shared_game_rating .game_rating_required_age { font-family: "Motiva Sans", Sans-serif; font-weight: normal; /* normal */ text-transform: uppercase; margin-bottom: 5px; font-size: 14px; color: white; } .shared_game_rating .game_rating_title { font-family: "Motiva Sans", Sans-serif; font-weight: normal; /* normal */ margin-bottom: 5px; font-size: 14px; color: white; } .shared_game_rating .game_rating_title .game_rating_banned { color: red; } .shared_game_rating .game_rating_details { display: flex; } .shared_game_rating .game_rating_icon { margin-right: 10px; } .shared_game_rating p.descriptorText { margin: 0; font-size: 11px !important; color: #c6d4df !important; text-transform: uppercase; line-height: 14px; } /* community awards hover */ .reaction_award_hover { font-family: "Motiva Sans", sans-serif; width: 150px; background: #DADEE0; } .community_tooltip.reaction_award_hover, .store_tooltip.reaction_award_hover { padding: 0px; } .reaction_award_hover .reaction_award_icon { background-color: #474C52; border-radius: 3px 3px 0 0; padding-top: 5px; text-align: center; } .reaction_award_hover .reaction_award_icon > img { height: 100px; } .reaction_award_hover .reaction_award_info { padding: 10px; text-align: center; } .reaction_award_hover .reaction_award_name { font-weight: bold; font-size: 12px; color: #0A212E; } .reaction_award_hover .reaction_award_desc { padding-top: 5px; font-size: 10px; color: #0A212E; } .reaction_award_hover .reaction_award_points { padding-top: 5px; font-size: 10px; color: #737678; } /* community awards */ .community_award_btn_icon { vertical-align: middle; margin-right: 5px; } .community_award_ctn { display: flex; flex-wrap: wrap; } .community_award { position: relative; background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 0px 3px 0px 3px; margin: 0 1px; line-height: 28px; height: 28px; cursor: pointer; } .community_award:hover { background-color: rgba(255, 255, 255, 0.2); } .community_award_icon { height: 20px; vertical-align: middle; } .community_award_count { color: #66c0f4; font-size: 13px; vertical-align: middle; font-weight: bold; } .community_award_count.hidden { display: none; } .community_tooltip.community_award_tooltip { background: #141c27; color: #7cc5fb; } /* hover */ .community_award_ctn_hover { display: inline-block; } .community_award_ctn_hover .community_award { display: inline-block; background-color: rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 3px; margin: 1px; line-height: unset; height: unset; } .community_award_ctn_hover .community_award .community_award_icon { width: 16px; height: 16px; vertical-align: middle; } .community_award_ctn_hover .community_award .community_award_count { color: #66c0f4; font-size: 12px; vertical-align: middle; font-weight: bold; padding: 0; } .community_award_ctn_hover .community_award .community_award_count.hidden { display: none; } @media screen and (max-width: 910px) { html.responsive .newmodal { min-width: 0; } /* workaround for ios safari, having the background be position: fixed introduces display glitches */ html.responsive .newmodal_background { position: absolute; } } html.responsive.touch .newmodal { min-width: 0; } /* workaround for ios safari, having the background be position: fixed introduces display glitches */ html.responsive.touch .newmodal_background { position: absolute; } @media screen and (max-width: 910px) { html.responsive .newmodal { min-width: 500px; } } html.responsive.tablet .newmodal { min-width: 500px; } @media screen and (max-width: 910px) { html.responsive .newmodal_content { padding: 15px; } } /* China Desktop Footer */ body.v6 #footer.china_footer { padding: 16px 16px 60px 16px; } body.v6 #footer_spacer.china_spacer { height: 360px; } .china_footer_content a, #footer .china_footer_content a { color: #8F8E93; } .china_footer_content a:hover, #footer .china_footer_content a:hover { color: #FFFFFF; } .china_footer_navlinks { user-select: none; margin-left: 50px; } .china_footer_content { max-width: calc( 910px - 16px); margin: 0px auto; padding-top: 16px; color: #8F8E93; font-family: "Motiva Sans", Sans-serif; font-weight: normal; /* normal */ } .china_footer_row { display: flex; align-items: center; justify-content: space-between; } .china_pw_logo { margin-right: 10px; } .china_steam_logo { width: 142px; height: 44px; } .china_footer_line { height: 1px; background: #24272C; margin: 20px 0; } .china_footer_social_box { display: flex; align-items: center; } .china_footer_social_box:first-of-type { margin-right: 20px; } .china_footer_social_box.tooltip { cursor: default; user-select: none; } .china_footer_socials_ctn { display: flex; } .china_footer_legal_ctn { margin-top: 20px; } .china_footer_logos img { width: 96px; vertical-align: top; } .gpnav:focus { outline: 4px solid blue; box-shadow: 0 0 2px inset #0000ff; } /* For Date pickers shared between projects */ .rdt .rdtPicker { background: #576070; border: 1px solid #646f82; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); } .rdt .rdtPicker th { border-bottom: transparent; } .rdt .rdtPicker td { color: white; } /* days that show from the previous or subsequent calendar month (eg when a month does not start on a Sunday) */ .rdt .rdtPicker td.rdtNew, .rdt .rdtPicker td.rdtOld { } .rdt .rdtPicker td.rdtDisabled, .rdt .rdtPicker td.rdtDisabled:hover { color: #333333; } .rdt .rdtPicker td.rdtDay:hover, .rdt .rdtPicker td.rdtMonth:hover, .rdt .rdtPicker td.rdtYear:hover { color: black; } .rdt .rdtPicker td .rdtCounter .rdtBtn:hover { color: black; } .rdt .rdtPicker th.rdtSwitch { color: white; font-size: 13px; } .rdt .rdtPicker th.rdtSwitch:hover { color: black; } .rdt .rdtPicker th.dow { background: #474f5c; color: #9aa3b1; } /* for dynamic store items */ html.responsive .ds_steam_deck_compat { display: block; position: absolute; pointer-events: none; top: 4px; right: 4px; z-index: 15; width: 44px; height: 24px; border-radius: 24px; opacity: 0; background-color: var(--gpBackground-DarkMedium); backdrop-filter: blur(24px); transition: opacity 0.1s ease; } html.responsive .gpfocus .ds_steam_deck_compat { transition: opacity 0.2s ease 0.1s; opacity: 1; } .ds_steam_deck_compat.verified { background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') 3px no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-verified.svg') 22px no-repeat; } .ds_steam_deck_compat.playable { background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') 3px no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-playable.svg') 22px no-repeat; } .ds_steam_deck_compat.unsupported { background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') 3px no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-unsupported.svg') 22px no-repeat; } .ds_steam_deck_compat.unknown { background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') 3px no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-unknown.svg') 22px no-repeat; } /* global inline */ .steam_deck_compat { display: none; pointer-events: none; width: 40px; height: 20px; background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') left no-repeat; background-size: 20px 20px; } .steam_deck_compat.verified { display: inline-block; background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') left no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-verified.svg') right no-repeat; } .steam_deck_compat.playable { display: inline-block; background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') left no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-playable.svg') right no-repeat; } .steam_deck_compat.unsupported { display: inline-block; background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') left no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-unsupported.svg') right no-repeat; } .steam_deck_compat.unknown { display: inline-block; background: url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-logo.svg') left no-repeat, url('https://community.cloudflare.steamstatic.com/public/shared/images/ico/ico-deck-unknown.svg') right no-repeat; } .private_app_indicator { height: 1.25em; width: 1.25em; vertical-align: middle; display: inline-block; } .private_app_indicator svg line, .private_app_indicator svg path { stroke: rgb(110, 141, 80); }