body.DefaultTheme { --gradient-right: rgba(109, 38, 44, 0.301); --gradient-left: rgba(50, 255, 193, 0.103); --gradient-background: rgba(34, 35, 48, 0.93); --gradient-background-right: rgba(109, 38, 44, 0); --gradient-background-left: rgba(50, 255, 193, 0.103); --color-showcase-header: rgba(43, 45, 68, 0.93); --gradient-showcase-header-left: rgba(115, 173, 184, 0.247); --btn-background:rgba(43, 52, 68); --btn-background-hover:rgb(53, 62, 78); --btn-outline:rgb(93, 102, 118); } body.CosmicTheme { --gradient-right: rgba(248, 70, 180, 0.301); --gradient-left: rgba(9, 243, 99, 0.247); --gradient-background: rgba(46, 13, 36, 0.93); --gradient-background-right: rgba(70, 227, 248, 0); --gradient-background-left: rgba(239, 243, 9, 0.13); --color-showcase-header: rgba(57, 24, 61, 0.93); --gradient-showcase-header-left: rgba(20, 60, 68, 0.93); --btn-background:rgb(90, 40, 92); --btn-background-hover:rgb(100, 50, 102); --btn-outline:rgba(140, 90, 142); } body.SummerTheme { --gradient-right: rgba(252, 197, 16, 0.301); --gradient-left: rgba(9, 243, 153, 0.247); --gradient-background: rgba(51, 27, 16, 0.93); --gradient-background-right: rgba(252, 197, 16, 0); --gradient-background-left: rgba(48, 243, 9, 0.13); --color-showcase-header: rgba(70, 53, 31, 0.93); --gradient-showcase-header-left: rgba(33, 78, 76, 0.93); --btn-background:rgb(95, 76, 39); --btn-background-hover:rgb(105, 86, 49); --btn-outline:rgb(145, 126, 89); } body.MidnightTheme { --gradient-right: rgba(51, 54, 253, 0.233); --gradient-left: rgba(12, 85, 241, 0.37); --gradient-background: rgba(10, 14, 32, 0.93); --gradient-background-right: rgba(51, 54, 253, 0); --gradient-background-left: rgba(12, 85, 241, 0.13); --color-showcase-header: rgba(34, 32, 61, 0.93); --gradient-showcase-header-left: rgba(20, 33, 68, 0.93); --btn-background:rgb(38, 36, 68); --btn-background-hover:rgb(48, 46, 78); --btn-outline:rgb(88, 86, 108); } body.DarkModeTheme { --gradient-right: rgba(49, 49, 49, 0.233); --gradient-left: rgba(51, 51, 51, 0.37); --gradient-background: rgba(24, 24, 24, 0.93); --gradient-background-right: rgba(34, 34, 34, 0); --gradient-background-left: rgba(32, 32, 32, 0.13); --color-showcase-header: rgba(0, 0, 0, 0.5); --gradient-showcase-header-left: rgba(0, 0, 0, 0.5); --btn-background:rgba(0, 0, 0, 0.5); --btn-background-hover:rgba(40, 40, 40, 1); --btn-outline:rgb(80, 80, 80); } body.SteelTheme { --gradient-right: rgba(70, 106, 128, 0.233); --gradient-left: rgba(86, 120, 134, 0.37); --gradient-background: rgba(41, 46, 51, 0.93); --gradient-background-right: rgba(17, 24, 29, 0); --gradient-background-left: rgba(19, 27, 31, 0); --color-showcase-header: rgba(55, 62, 76, 0.93); --gradient-showcase-header-left: rgba(68, 83, 93, 0.93); --btn-background:rgb(66, 76, 92); --btn-background-hover:rgb(76, 86, 102); --btn-outline:rgb(106, 126, 142); } /* -- PinkTealTheme -- (Cyberpunk 2077) */ body.PinkTealTheme { --gradient-right: rgb(139 29 68); --gradient-left: rgb(137 30 67); --gradient-background: rgb(0 255 255 / 15%); --gradient-background-right: rgb(0 0 0 / 0%); --gradient-background-left: rgb(0 0 0 / 0%); --color-showcase-header: rgb(42 117 122); --gradient-showcase-header-left: rgb(42 117 122); --btn-background: rgb(42 117 122); --btn-background-hover: rgb(57 166 173); --btn-outline: rgb(55 162 169); } /* -- MutedRedTheme -- (Hades) */ body.MutedRedTheme { --gradient-right: rgb(142 40 40 / 23%); --gradient-left: rgb(163 53 53 / 37%); --gradient-background: rgb(96 17 2 / 30%); --gradient-background-right: rgb(253 51 51 / 0%); --gradient-background-left: rgba(241, 12, 12, 0.13); --color-showcase-header: rgb(49 9 9 / 81%); --gradient-showcase-header-left: rgb(182 27 23 / 35%); --btn-background: rgb(58 13 10); --btn-background-hover: rgb(105 26 21); --btn-outline: rgb(108, 90, 86); } body.SteamGreenTheme { --gradient-right: #393e2b; --gradient-left: rgb(71 78 52); --gradient-background: rgb(53 58 39); --gradient-background-right: rgb(194 253 51 / 0%); --gradient-background-left: rgb(206 241 12 / 0%); --color-showcase-header: rgb(62 69 44); --gradient-showcase-header-left: rgb(83 92 60); --btn-background: rgb(73 82 53); --btn-background-hover: rgb(82 91 59); --btn-outline: rgb(92 111 45); } /* -- BlueRedTheme -- (CSGO) */ body.BlueRedTheme { --gradient-right: rgb(253 56 51 / 23%); --gradient-left: rgb(12 230 241 / 37%); --gradient-background: rgb(10 25 32 / 30%); --gradient-background-right: rgb(253 51 51 / 15%); --gradient-background-left: rgb(12 241 241 / 13%); --color-showcase-header: rgb(64 23 23 / 50%); --gradient-showcase-header-left: rgb(27 113 132 / 93%); --btn-background: rgb(45 93 111); --btn-background-hover: rgb(36 121 130); --btn-outline: rgb(86 105 108); } /* -- GoldBurgundyTheme -- (Resident Evil Village - Castle) */ body.GoldBurgundyTheme { --gradient-right: rgb(253 219 51 / 23%); --gradient-left: rgb(97 75 37); --gradient-background: rgb(39 27 16 / 50%); --gradient-background-right: rgb(0 0 0 / 35%); --gradient-background-left: rgb(0 0 0 / 35%); --color-showcase-header: rgb(53 28 22 / 76%); --gradient-showcase-header-left: rgb(120 92 20 / 69%); --btn-background: rgb(57 38 25); --btn-background-hover: rgb(77 52 36); --btn-outline: rgb(108, 90, 86); } /* -- VibrantBlueTheme -- (Civilization VI) */ body.VibrantBlueTheme { --gradient-right: #008ada8a; --gradient-left: rgb(47 137 188); --gradient-background: #0203048a; --gradient-background-right: rgb(253 51 51 / 0%); --gradient-background-left: rgb(12 140 241 / 17%); --color-showcase-header: rgb(19 57 95); --gradient-showcase-header-left: rgb(39 106 141); --btn-background: rgb(25 70 107); --btn-background-hover: rgb(35 87 130); --btn-outline: rgb(34 88 133); } body.GoldenProfileDebutTheme { --gradient-right: rgba(156, 66, 17, 0.18); --gradient-left: rgba(213, 172, 81, 0.62); --gradient-background: rgba(61, 47, 20, 0.6); --gradient-background-right: rgba(0, 0, 0, 0); --gradient-background-left: rgba(243, 200, 9, 0.13); --color-showcase-header: rgba(95, 72, 33, 0.82); --gradient-showcase-header-left: rgba(155, 122, 54, 0.9); --btn-background: rgb(125, 98, 44); --btn-background-hover: rgb(135, 108, 54); --btn-outline: rgb(175, 148, 94); } body.WinterProfile2020Theme { --gradient-right: #7770A988; --gradient-left: #34526F88; --gradient-background: #34526F88; --gradient-background-right: rgba(25, 20, 65, 0.333); --gradient-background-left: rgba(3, 7, 12, 0.333); --color-showcase-header: #07817f; --gradient-showcase-header-left: #34526F; --btn-background: #34526F; --btn-background-hover: rgb(54, 104, 151); --btn-outline: #34526F; } body.GoldenWeekProfile2021Theme { --gradient-right: #389bb0aa; --gradient-left: #2c5e83aa; --gradient-background: #134061aa; --gradient-background-right: #389bb066; --gradient-background-left: #2c5e8333; --color-showcase-header: #389bb0; --gradient-showcase-header-left: #2c5e83; --btn-background: #2c5e83; --btn-background-hover: #1b6daa; --btn-outline: #2c5e83; } body.Summer2021Theme { --gradient-right: #344f68; --gradient-left: #ee3b57b8; --gradient-background: #000000cc; --gradient-background-right: #c1ad4c52; --gradient-background-left: #2e6ea2a3; --color-showcase-header: #b03849a1; --gradient-showcase-header-left: #2e6986; --btn-background: #309186; --btn-background-hover: #3aa89c; --btn-outline: #2c5e83; } /* -- NEW THEMES 6.23.21 -- */ /* (Resident Evil Village - Village) */ body.MutedBlueTheme { --gradient-right: #737d96; --gradient-left: rgb(115 124 147); --gradient-background: #2127338c; --gradient-background-right: rgb(253 51 51 / 0%); --gradient-background-left: rgb(20 26 49 / 13%); --color-showcase-header: rgb(30 44 66 / 54%); --gradient-showcase-header-left: rgb(69 79 108 / 75%); --btn-background: rgb(44 55 74); --btn-background-hover: rgb(63 81 111); --btn-outline: rgb(86 91 108); } /* (Evil Genius 2) */ body.GoldTheme { --gradient-right: rgb(197 164 79 / 73%); --gradient-left: rgb(128 94 36); --gradient-background: rgb(116 93 44 / 64%); --gradient-background-right: rgb(0 0 0 / 35%); --gradient-background-left: rgb(0 0 0 / 35%); --color-showcase-header: rgb(185 145 76 / 76%); --gradient-showcase-header-left: rgb(120 95 31 / 69%); --btn-background: rgb(145 116 66); --btn-background-hover: rgb(169 132 68); --btn-outline: rgb(108, 90, 86); } /* (Dying Light) */ body.BurntOrangeTheme { --gradient-right: rgb(136 66 8 / 66%); --gradient-left: rgb(251 250 251 / 48%); --gradient-background: rgb(47 24 6 / 65%); --gradient-background-right: rgb(19 8 2); --gradient-background-left: rgb(8 2 5 / 0%); --color-showcase-header: rgb(48 12 5 / 88%); --gradient-showcase-header-left: rgb(168 99 5 / 67%); --btn-background: rgb(50 15 7); --btn-background-hover: rgb(89 31 17); --btn-outline: rgb(86 30 17); } /* (Loop Hero) */ body.FlatGreyTheme { --gradient-right: #3b3e4100; --gradient-left: rgb(59 62 65 / 0%); --gradient-background: rgb(59 62 65); --gradient-background-right: rgb(59 62 65 / 0%); --gradient-background-left: rgb(59 62 65 / 0%); --color-showcase-header: rgb(105 110 113); --gradient-showcase-header-left: rgb(105 110 113); --btn-background: rgb(105 110 113); --btn-background-hover: rgb(118 122 124); --btn-outline: rgb(105 110 113); } /* (Outriders - Main) */ body.PurpleTheme { --gradient-right: #3c2c4c; --gradient-left: #52298094; --gradient-background: #20024380; --gradient-background-right: #0f021f; --gradient-background-left: #150329; --color-showcase-header: #4c2f69; --gradient-showcase-header-left: #29113f; --btn-background: #40245c; --btn-background-hover: #5f3c80; --btn-outline: #603689; } /* Halloween 2021 */ body.GreenSlimeTheme { --gradient-right: rgb(254 249 156 / 30%); --gradient-left: rgb(98 145 152 / 34%); --gradient-background: rgb(35 58 26 / 58%); --gradient-background-right: rgb(0 0 0); --gradient-background-left: rgb(0 0 0); --color-showcase-header: rgb(27 38 18); --gradient-showcase-header-left: rgb(113 141 46); --btn-background: rgb(33 45 20); --btn-background-hover: rgb(80 101 35); --btn-outline: rgb(86 109 37); } body.GhostTheme { --gradient-right: rgb(82 64 83 / 52%); --gradient-left: rgb(3 3 4 / 46%); --gradient-background: rgb(93 123 137 / 32%); --gradient-background-right: rgb(72 31 46); --gradient-background-left: rgb(0 0 0); --color-showcase-header: rgb(69 32 46); --gradient-showcase-header-left: rgb(93 123 136); --btn-background: rgb(93 122 135); --btn-background-hover: rgb(112 151 169); --btn-outline: rgb(126 126 126 / 27%); } body.ColorNightmareTheme { --gradient-right: rgb(58 183 180 / 51%); --gradient-left: rgb(243 106 9 / 25%); --gradient-background: rgb(0 0 0 / 50%); --gradient-background-right: rgb(0 0 0); --gradient-background-left: rgb(9 243 217 / 33%); --color-showcase-header: rgb(57 144 152 / 61%); --gradient-showcase-header-left: rgb(198 96 50); --btn-background: rgb(45 114 123); --btn-background-hover: rgb(196 96 50); --btn-outline: rgb(196 96 50); } body.MurugiahTheme { --gradient-right: rgb(84 75 158); --gradient-left: rgb(84 75 158); --gradient-background: rgb(84 75 158); --gradient-background-right: rgb(84 75 158); --gradient-background-left: rgb(84 75 158); --color-showcase-header: rgb(11 160 232); --gradient-showcase-header-left: rgb(11 160 232); --btn-background: rgb(225 69 40); --btn-background-hover: rgb(145 181 69); --btn-outline: rgb(225 69 40); } body.Winter2021Theme { --gradient-right: rgb(87 136 137 / 14%); --gradient-left: rgb(157 204 199 / 35%); --gradient-background: rgb(22 77 81 / 88%); --gradient-background-right: rgb(95 165 155 / 15%); --gradient-background-left: rgb(9 243 217 / 33%); --color-showcase-header: rgb(184 99 69); --gradient-showcase-header-left: rgb(207 132 36); --btn-background: rgb(184 99 69); --btn-background-hover: rgb(206 131 36); --btn-outline: rgb(196 96 50); } body.Lunar2022Theme { --gradient-right: rgb(232 63 12 / 78%); --gradient-left: rgb(239 65 12); --gradient-background: rgb(58 44 122 / 83%); --gradient-background-right: rgb(135 25 2 / 65%); --gradient-background-left: rgb(211 72 31 / 60%); --color-showcase-header: rgb(86 62 173); --gradient-showcase-header-left: rgb(234 101 69); --btn-background: rgb(86 62 173); --btn-background-hover: rgb(146 78 131); --btn-outline: rgb(173 85 113); } body.SteamDeckTheme { --gradient-right: transparent; --gradient-left: transparent; --gradient-background: transparent; --gradient-background-right: transparent; --gradient-background-left: transparent; --color-showcase-header: rgb(149 1 169 / 19%); --gradient-showcase-header-left: rgb(87 89 123 / 0%); --btn-background: rgb(29 10 25 / 10%); --btn-background-hover: rgb(175 52 149 / 21%); --btn-outline: rgb(29 10 25 / 0%); } body.Steam3000Theme { --gradient-right: rgba(0, 0, 0, 0); --gradient-left: rgba(0, 0, 0, 0); --gradient-background: rgba(0, 0, 0, 0); --gradient-background-right: rgba(0, 0, 0, 0); --gradient-background-left: rgba(0, 0, 0, 0); --color-showcase-header: rgb(231 196 52); --gradient-showcase-header-left: rgb(239 0 255); --btn-background: rgba(0, 0, 0, 0); --btn-background-hover: rgb(46, 46, 46); --btn-outline: rgba(0, 0, 0, 0); } /* Custom overrides for Steam Deck theme */ body.SteamDeckTheme .profile_customization_header, body.SteamDeckTheme .profile_header_badge, body.SteamDeckTheme .profile_leftcol_header, body.SteamDeckTheme .profile_rightcol, body.SteamDeckTheme .btn_profile_action { box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #f13292, inset 0 0 10px 1px #f13292, 0 0 3px #f13292, inset 0 0 4px #f13292; border-radius: 3px; } body.SteamDeckTheme .profile_customization { overflow: visible; } body.SteamDeckTheme .profile_in_game, body.SteamDeckTheme .profile_summary, body.SteamDeckTheme .header_real_name, body.SteamDeckTheme .persona_name, body.SteamDeckTheme .persona_level, body.SteamDeckTheme .profile_customization_header, body.SteamDeckTheme .profile_content h2, body.SteamDeckTheme .profile_count_link, body.SteamDeckTheme .favorite_badge_description { color: #ddbed2; text-shadow: 0 0 6px #e5abc89c; } /* Custom overrides for Steam 3000 theme */ body.Steam3000Theme .profile_rightcol { outline: 2px dotted #e6c333; box-shadow: 4px 4px #20d038; background: black; border-radius: 0px; } body.Steam3000Theme .profile_header_bg_texture, body.Steam3000Theme .profile_content.has_profile_background { background:rgba( 0, 0 , 0, 0 ); } body.Steam3000Theme .profile_customization { outline: 2px dotted #e6c333; box-shadow: 4px 4px #20d038; background: black; border-radius: 0px; } body.Steam3000Theme .profile_header { max-width: 950px; } body.Steam3000Theme .profile_header_content { outline: 2px dotted #e6c333; box-shadow: 4px 4px #20d038; background: black; } body.Steam3000Theme html.responsive.tablet .profile_rightcol { background: black; } body.Steam3000Theme .profile_count_link.ellipsis { border: 1px dotted #20d038; padding-left: 5px; padding-bottom: 5px; margin-bottom: 8px; } body.Steam3000Theme .btn_profile_action { border-radius: 0px; border: 1px dotted #e6c333; } body.Steam3000Theme .recent_games { outline: 2px dotted #e6c333; box-shadow: 4px 4px #20d038; background: black; border-radius: 0px; } body.Steam3000Theme .recentgame_quicklinks { margin-top: 8px; margin-bottom: 8px; background: black; border: 2px dotted #e7c434; padding: 4px; } body.Steam3000Theme .profile_recentgame_header.profile_leftcol_header { outline: 2px dotted #e6c333; box-shadow: 4px 4px #20d038; background: black; border-radius: 0px; } body.Steam3000Theme .profile_recentgame_header.profile_leftcol_header .recentgame_quicklinks { border: none; } body.Steam3000Theme .profile_recentgame_header.profile_leftcol_header h2 { margin-top: auto; } body.Steam3000Theme .profile_comment_area { outline: 2px dotted #fb5034; box-shadow: 4px 4px #debf3a; background: #000000; border-radius: 0px; margin-top: 35px; } /* End Steam 3000 custom overrides */ div.profile_page { position: relative; min-width: 950px; } body.profile_page, div.profile_page { background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/2020/bg_dots.png' ); background-position: center top; background-repeat: no-repeat; background-color: #000000; } body.profile_page.private_profile { background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/2020/bg_dots.png' ); background-position: center top; background-repeat: no-repeat; background-color: #000000; } div.profile_page.private_profile { background: transparent; } body.profile_page.has_profile_background, div.profile_page.has_profile_background { background-image: none; background-color: #000000; background-position: center top; background-repeat: no-repeat; } div.profile_page.has_profile_background.full_width_background { background-size: 100%; } @media ( max-width: 1920px ) { div.profile_page.has_profile_background { background-size: auto; } } body.profile_page.has_profile_background { background-color: #000000; } .profile_animated_background { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden; } .profile_animated_background > video { position: absolute; left: 50%; transform: translateX(-50%); width: 1920px; } div.profile_page.has_profile_background.full_width_background .profile_animated_background > video { width: 100%; } @media ( max-width: 1920px ) { div.profile_page.has_profile_background.full_width_background .profile_animated_background > video { width: 1920px; } } body.profile_page.flat_page #footer_spacer { margin-top: 0; } /* this is a workaround for webkit centering bug with backgrounds that are larger than the window */ @media screen and (-webkit-min-device-pixel-ratio:0) { div.profile_page.has_profile_background { background-position: 49.999% 0; } } .profile_header_bg { position: relative; max-width: 1018px; min-height: 224px; padding-bottom: 0px; margin: 0 auto; background-repeat: no-repeat; background-position: center bottom; } .profile_header_bg_texture { max-width: 976px; min-height: 224px; margin: 0 auto; background: radial-gradient( farthest-side at bottom right, var(--gradient-right), transparent 500px ), radial-gradient( farthest-corner at bottom left, var(--gradient-left), transparent 600px ); background-color: var(--gradient-background); background-repeat: no-repeat; background-position: center; } .private_profile .profile_header_bg_texture { background-image: linear-gradient( rgba(28, 40, 43, 0.95) 30%, rgba(29, 57, 60, 0.87) 85%, rgba(31, 74, 78, 0.82) 100%); max-width: 976px; min-height: 224px; margin: 0 auto; background-repeat: no-repeat; background-position: center; box-shadow: 0 10px 20px 0px rgba(0, 0, 0, .3); } .profile_header { position: relative; max-width: 926px; margin: 0 auto; padding-top: 24px; } .profile_header_content { position: relative; padding-top: 8px; padding-right: 8px; color: #c4c4c4; font-size: 13px; } .profile_header_summary { overflow: hidden; padding-right: 18px; padding-left: 18px; } .playerAvatar.profile_header_size { position: relative; width: 166px; height: 166px; } .playerAvatar.profile_header_size .playerAvatarAutoSizeInner img { /* override the gradient behind the image (it won't show anyway) */ background: none; filter: none; /* fix space appearing beneath image */ display: block; padding: 0; width: 100%; height: 100%; } .playerAvatar.profile_header_size .playerAvatarAutoSizeInner { position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; } .playerAvatar.profile_header_size .playerAvatarAutoSizeInner .profile_avatar_frame { } .playerAvatar.profile_header_size .playerAvatarAutoSizeInner .profile_avatar_frame > img { transform: scale(1.22); } .profile_header .playerAvatar.profile_header_size { float: left; margin-right: 18px; } .profile_header_badgeinfo { float: right; } .profile_header_badgeinfo_badge_area { width: 268px; } .profile_text_content_check { margin-bottom: 12px; padding: 14px 11px; margin-top: 4px; background-color: rgba( 0, 0, 0, 0.2 ); } .profile_text_content_check > .profile_text_content_check_controls { margin-left: 20px; float: right; } .profile_text_content_check > .profile_text_content_check_controls > span { cursor: pointer; } .profile_text_content_check > img { width: 12px; } .profile_text_content_check .hidden_content_title { padding-top: 10px; } .profile_text_content_check .hidden_content { font-style: italic; } @media screen and ( max-width: 700px ) { html.responsive .profile_header_summary { clear: both; padding: 8px; } html.responsive .profile_header .profile_summary.noexpand { height: auto; } html.responsive .profile_header .playerAvatar.profile_header_size { max-width: 40%; } html.responsive .profile_header .profile_header_centered_persona { position: static; padding-bottom: 18px; } html.responsive .profile_header .profile_header_summary .persona_name_spacer, html.responsive .profile_header .profile_header_summary .header_real_name_spacer { display: none; } html.responsive .profile_header .header_real_name { height: auto; line-height: 24px; } html.responsive .profile_header_content { padding-top: 0; } html.responsive .profile_header { padding-top: 8px; } html.responsive .profile_header_bg_texture { background-size: cover; } html.responsive .profile_header_badgeinfo { float: none; overflow: hidden; } } @media screen and ( max-width: 460px ) { html.responsive .profile_header_badgeinfo { float: none; overflow: visible; } html.responsive .profile_header_badgeinfo_badge_area { float: none; overflow: hidden; max-width: 50%; max-width: calc( 100% - 125px - 20px ); } html.responsive .profile_header_badgeinfo_badge_area .profile_header_badge { margin-bottom: 0; } html.responsive .profile_header_actions { display: grid; grid-auto-flow: row; row-gap: .5em; padding-top: 8px; text-align: center; } html.responsive .profile_header .playerAvatar.profile_header_size { max-width: none; width: 125px; height: 125px; } } .profile_header_actions { white-space: nowrap; } .profile_header .persona_name { line-height: 40px; font-size: 24px; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ } .profile_header .profile_header_centered_persona { position: absolute; left: 186px; right: 268px; white-space: nowrap; padding-left: 18px; padding-bottom: 18px; } .profile_header_valve_employee { background-color: rgba(0, 0, 0, 0.3); padding: 5px 10px 5px 10px; } .profile_header_valve_employee_icon { position: absolute; vertical-align: middle; background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0IyODU2QjE4MThEMTFFNEIxNUZBOUMwRkZDMkI3Q0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0IyODU2QjI4MThEMTFFNEIxNUZBOUMwRkZDMkI3Q0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QjI4NTZBRjgxOEQxMUU0QjE1RkE5QzBGRkMyQjdDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3QjI4NTZCMDgxOEQxMUU0QjE1RkE5QzBGRkMyQjdDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqu1o0MAAAERSURBVHjapFOBDYIwECyEAWQAEkYoG+gE6ATIZjCBOoFsABtowgB2A7w3VywVDMZPPi3P3X3/+w2GYVCu9X1/xFLAt2pqDbxOkqRyg4EVADHFcoJruIAucEPcBp7DRbyDHyB0HwVIbuESLPGzUzPmJJE1ExEr0BKzQ9AQvCdYMeOZcTnNVfaIZSFr1gQZJ2Hu7LXdEFNKTLghG1bZmhy7OPtJSSxR+lRE7PbBr5dHDtSySYJTxA/jNUvqvLH7BmLxjMCLE84JeLb58m8USL3jL2X9EA45Ybn63YTTiEAtE4a69VomsXL99eIgEfhgSbHX4Pcg2UljH64cV9uL2CNrklN79WsekyFh+TH985yfAgwA6tSJc+P+wyYAAAAASUVORK5CYII=' ); background-repeat: no-repeat; background-position: center; padding: 5px 10px 10px 0px; width: 32px; height: 32px; } .profile_header_valve_employee_desc { display: inline-block; padding: 5px 10px 10px 48px; font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ color: #ffffff; font-size: 14px; } .profile_header_valve_employee_desc a { text-decoration: underline; } .profile_header .persona_name .nickname { color: #9b9b9b; } .header_real_name_spacer { height: 52px; } .profile_flag { vertical-align: middle; width: 16px; height: 11px; } .profile_header .profile_summary { line-height: 18px; height: 57px; overflow: hidden; margin-bottom: 8px; } .profile_header .profile_summary.noexpand { height: 76px; } .profile_summary_modal { line-height: 18px; } .profile_summary_modal_desc { padding-bottom: 20px; } .profile_summary_modal.viewing_own_profile { padding: 10px; border: 1px solid #ffffff; font-style: italic; } .profile_summary img.emoticon, .profile_summary_modal img.emoticon { vertical-align: text-bottom; } .profile_header_badgeinfo .persona_level { line-height: 40px; margin-bottom: 13px; } .profile_header_badgeinfo .persona_level .friendPlayerLevel { vertical-align: middle; } .profile_header_badgeinfo .persona_level .friendPlayerLevel .friendPlayerLevelNum { color: #ffffff; } .profile_header_badge { border-radius: 3px; background-color: rgba( 0, 0, 0, 0.3 ); height: 70px; margin-bottom: 13px; } .profile_header_badge_instructions { padding: 8px; } .favorite_badge { position: relative; padding: 8px 8px; display: flex; align-items: center; gap: 8px; } .favorite_badge_icon { display: flex; } .favorite_badge_icon img { width: 54px; height: 54px; } .favorite_badge_description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .favorite_badge_description .name { color: #ffffff; } .btn_profile_action { border-radius: 2px; color: lightgray !important; padding: 1px; display: inline-block; text-decoration: none; cursor: pointer; background-color: var(--btn-background); transition: all 0.1s ease-in-out; } .btn_profile_action > span { padding: 0 10px; border-radius: 2px; display: block; background-color: var(--btn-background); } .btn_profile_action:hover, .btn_profile_action.focus { text-decoration: none; color: #fff; background-color: var(--btn-background-hover); filter: drop-shadow(1px 5px 10px rgba(0, 0, 0, 0.25)); } .btn_profile_action:hover > span, .btn_profile_action.focus > span { background-color: var(--btn-background-hover); color: #fff; } .btn_profile_action_disabled { opacity: 0.5; cursor: default; } .btn_profile_action > span > .reward_btn_icon { vertical-align: middle; } #view_equipped_items_icon { width: 20px; } #profile_action_dropdown { white-space: nowrap; } #profile_action_dropdown .popup_menu_item { padding: 5px 12px; line-height: 26px; } #profile_action_dropdown .popup_menu_item img { position: relative; top: 3px; } .popup_menu .profile_actions_support a.popup_menu_item { color: #cc3333; } .profile_content { position: relative; background: radial-gradient( farthest-side at top right, var(--gradient-right), transparent 500px ), radial-gradient( farthest-corner at top left, var(--gradient-left), transparent 600px ), radial-gradient( farthest-corner at bottom right, var(--gradient-background-right), transparent 500px ), radial-gradient( farthest-corner at bottom left, var(--gradient-background-left), transparent 600px ); background-color: var(--gradient-background); background-repeat: no-repeat; padding: 12px 12px 64px 12px; width: 952px; margin: 0 auto; font-size: 13px; min-height: calc( 100vh - 511px ); } .private_profile .profile_content { padding-bottom: 120px; background-image: transparent; background-position: center bottom, center; background-repeat: no-repeat, repeat-y; } .private_profile .profile_rightcol { background-color: transparent; } .profile_content.has_profile_background { background: radial-gradient( farthest-side at top right, var(--gradient-right), transparent 500px ), radial-gradient( farthest-corner at top left, var(--gradient-left), transparent 600px ), radial-gradient( farthest-corner at bottom right, var(--gradient-background-right), transparent 500px ), radial-gradient( farthest-corner at bottom left, var(--gradient-background-left), transparent 600px ); background-color: var(--gradient-background); margin-top: 0px; overflow: hidden; padding-top: 16px; } .profile_content_inner { position: relative; } .profile_leftcol { width: 652px; float: left; } .profile_rightcol { background-color: #101214; background-color: rgba( 0, 0, 0, 0.3 ); backdrop-filter: blur(20px); padding: 10px; border-radius: 3px; width: 268px; float: right; } .profile_content h2 { margin: 0; padding: 0; font-weight: normal; line-height: 26px; font-size: 20px; font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ } .profile_customization { position: relative; background-position: top left; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(20px); border-radius: 3px; padding: 0px 0px 0px 0px; margin-bottom: 12px; font-size: 13px; overflow: hidden; } .profile_customization.pointer { cursor: pointer; } .profile_customization_block { position: relative; border-radius: 5px; padding: 20px 10px 11px 10px; margin-bottom: 0px; font-size: 13px; overflow: hidden; } .profile_customization_block.customize_replay { display: flex; align-items: center; flex-wrap: wrap; line-height: 17px; } .profile_customization_block label { margin-right: 8px; flex-shrink: 0; } .profile_customization_block .helper_text { margin-left: 8px; flex-grow: 1; text-align: right; line-height: 15px; } .profile_customization_block.replay_showcase_block { padding: 0; border-radius: 0; } .profile_customization_block.replay_showcase_block.preview { filter: blur(5px) grayscale(.7); } .profile_customization_block.replay_showcase_block img { display: block; } .myart .profile_customization_block { position: relative; border-radius: 5px; padding: 15px 10px 11px 10px; margin-bottom: 0px; font-size: 13px; overflow: hidden; } .profile_customization_editlink { display: none; line-height: 30px; position: absolute; right: 5px; top: 0; } .profile_customization:hover .profile_customization_editlink { display: block; filter: none; padding: 5px; } .profile_customization_editlink:hover .profile_customization_editlink_text { text-decoration: underline; } .profile_customization_header { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ background: var(--color-showcase-header); background: linear-gradient(90deg, var(--gradient-showcase-header-left) 0%, var(--color-showcase-header) 90%); padding: 5px 10px 5px 10px; color: #ffffff; font-size: 16px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .profile_customization.myart .profile_customization_header { display:none; } .profile_customization.myart .profile_customization_editlink { display: none; } .customization_edit_instructions { padding: 8px; } /* hide this background if the header is rendered within the instructions */ .customization_edit_instructions .profile_customization_header { background: transparent; } .customization_edit_instructions_text { padding: 0px 10px 5px 10px; line-height: 20px; } .showcase_content_bg { background-color: #101214; background-color: rgba( 0, 0, 0, 0.3 ); padding: 8px; border-radius: 5px; margin-bottom: 9px; overflow: hidden; } .achievement_showcase .showcase_content_bg { padding-bottom: 3px; } .showcase_content_bg:last-child { margin-bottom: 0; } .showcase_stats_row { white-space: nowrap; } .showcase_stats_row .showcase_stat { margin-left: 42px; display: inline-block; } .showcase_stat { font-size: 34px; } .showcase_stats_row .showcase_stat:first-child, html.responsive .showcase_stats_row .showcase_stat:first-child { margin-left: 0; } .showcase_stat .value { font-size: 1em; font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ color: #ffffff; } .showcase_stat .label { font-size: 0.5em; color: #9b9b9b; } a.showcase_stat:hover .label { color: #ffffff; } @media screen and ( max-width: 600px ) { html.responsive .showcase_stats_row .showcase_stat { margin-left: 6%; } html.responsive .showcase_stat { font-size: 30px; } } @media screen and ( max-width: 500px ) { html.responsive .showcase_stat { font-size: 26px; } } @media screen and ( max-width: 400px ) { html.responsive .showcase_stat { font-size: 22px; } } .showcase_bodylabel { font-size: 13px; margin-bottom: 8px; color: #898989; } .showcase_achievement { width: 64px; height: 64px; line-height: 64px; float: left; margin-left: 4.5%; margin-bottom: 5px; } .showcase_achievement img { width: 64px; height: 64px; } .showcase_achievement:nth-child(7n-6), html.responsive .showcase_achievement:nth-child(7n-6) { margin-left: 0; } .showcase_achievement.openslot { width: 60px; height: 60px; line-height: 60px; } .showcase_badges_icons { margin-bottom: 0px; } .showcase_badges_icons .showcase_badge { float: left; position: relative; margin-left: 26px; margin-bottom: 9px; } .showcase_badges_icons .showcase_badge.openslot { margin-left: 22px; } .showcase_badges_icons .showcase_openslot_placeholder { line-height: 80px; } .showcase_badges_icons .showcase_badge, .showcase_badges_icons .showcase_badge img { width: 80px; height: 80px; } .showcase_badges_icons .showcase_badge:nth-child(6n-5) { margin-left: 0; } .showcase_slot { display: block; float: left; position: relative; } .showcase_gamecollector_game { width: 148px; height: 56px; margin-left: 7px; margin-bottom: 7px; line-height: 56px; } .showcase_gamecollector_games { } .showcase_gamecollector_games .showcase_gamecollector_game:nth-child(4n-3), html.responsive .showcase_gamecollector_games .showcase_gamecollector_game:nth-child(4n-3) { margin-left: 0; } .showcase_gamecollector_game img.game_capsule { width: 148px; height: 56px; } .showcase_gamecollector_game.openslot { width: 144px; height: 52px; line-height: 52px; } /* achievements completionist */ .showcase_achievementscompletionist_games .showcase_content_bg { padding-bottom: 2px; } .showcase_achievementscompletionist_game { position: relative; width: 304px; height: 167px; line-height: 167px; margin-left: 7px; margin-bottom: 12px; //box-shadow: 0 0 3px 2px rgba( 255, 246, 23, 0.8 ); } .showcase_achievementscompletionist_games .showcase_achievementscompletionist_game:nth-child(2n-1) { margin-left: 0; } .showcase_achievementscompletionist_game img.game_capsule { width: 304px; height: 142px; } .showcase_achievementscompletionist_game.openslot { width: 300px; } .showcase_achievementscompletionist_game_num_achievements { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ position: absolute; bottom: 0; left: 0; right: 0; color: offWhite; font-weight: 400; background: linear-gradient(90deg, #055ae3 0%, #2d73ff 90%); padding: 2px 8px; line-height: 19px; } .achievement_icon { width: 45px; height: 45px; position: absolute; bottom: 0; left: 260px; right: 0; top: 130px; } /* salien */ #showcase_salien_body { position:absolute; z-index: 0; max-width:100%; } #showcase_salien_arms { position:absolute; z-index: 1; max-width:100%; } #showcase_salien_eyes { position:absolute; z-index: 1; max-width:100%; } #showcase_salien_legs { position:absolute; z-index: 1; max-width:100%; } #showcase_salien_mouth { position:absolute; z-index: 1; max-width:100%; } #showcase_salien_shirt { position:absolute; top:16.25%; z-index: 1; max-width:100%; } #showcase_salien_hat { position:absolute; top:-1.85%; z-index: 1; max-width:100%; } #showcase_salien_cryotube_back { position:absolute; z-index: 0; max-width:100%; top:0; left:0; } #showcase_salien_cryotube_front { position:absolute; z-index: 1; max-width:100%; display:block; } .showcase_salien_cont { float: left; width: 76.6%; height: 100%; display: block; position: relative; top: 15%; left: 11%; } .showcase_salienbadge_cont { float:right; height: 150px; white-space: nowrap; margin: 1em 0; } .showcase_salienbadge { display: inline-block; height: 100%; vertical-align: middle; } .showcase_salienbadge_image { vertical-align: middle; } .showcase_salien { float:left; width:150px; height:275px; } .showcase_stats_salien_header { font-size: 18px; margin-bottom: 24px; } .showcase_salien .showcase_openslot_placeholder { line-height: 275px; } .showcase_stats_salien { float:left; text-align:center; } .showcase_stats_row .showcase_stats_salien .showcase_stat { margin-left: 20px; margin-right: 20px; } .awards_showcase .showcase_content_bg { display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .showcase_award { padding: 6px; overflow: hidden; text-overflow: ellipsis; } .showcase_award_icon { width: 64px; height: 64px; width: 75px; height: 75px; } @media screen and (max-width: 910px) { html.responsive .showcase_badges_icons .showcase_badge { width: 12%; height: auto; } html.responsive .showcase_badges_icons .showcase_badge img { width: 100%; height: auto; } html.responsive .showcase_badges_icons .showcase_badge { margin-left: 4%; } html.responsive .showcase_badges_icons .showcase_badge.openslot { margin-left: 3%; } html.responsive .showcase_gamecollector_game { width: 24%; height: auto; margin-left: 1%; line-height: 100%; } html.responsive .showcase_gamecollector_game img.game_capsule { width: 100%; height: auto; } html.responsive .item_showcase_item { width: 15%; margin-left: 0.9%; line-height: 100%; height: auto; } html.responsive .item_showcase_item img.item_image { width: 100%; height: auto; } html.responsive .showcase_achievement { width: 10%; height: auto; line-height: 100%; float: left; margin-left: 4.5%; margin-bottom: 5px; } html.responsive .showcase_achievement img { width: 100%; height: auto; } } .item_showcase .item_count_stat { float: left; padding-top: 14px; max-width: 30%; } .item_showcase .item_count_stat > div { padding-left: 12px; } .item_showcase .showcase_slot_row, .trade_showcase .showcase_slot_row { margin-left: -5px; } .item_showcase_item { width: 96px; height: 96px; line-height: 96px; margin-left: 5px; margin-bottom: 5px; border: 1px solid #3a3a3a; } .item_showcase_item img.item_image { width: 96px; height: 96px; } .item_showcase_item.openslot { width: 94px; height: 94px; line-height: 94px; } .trade_showcase_items { margin-bottom: 10px; } .showcase_stats_trading { margin-bottom: 12px; } .favoritegame_showcase_game { position: relative; height: 69px; padding-left: 200px; margin-bottom: 22px; } .favoritegame_showcase_game.showcase_slot { float: none; } .favoritegame_showcase_game .favorite_game_cap { position: absolute; left: 0; top: 0; } .favoritegame_showcase_game .favorite_game_cap, .favoritegame_showcase_game .favorite_game_cap img { width: 184px; height: 69px; } .showcase_item_detail_title { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ font-size: 24px; padding-top: 10px; color: #ffffff; line-height: 29px; max-height: 58px; overflow: hidden; } .favoritegame_showcase_game .showcase_openslot_placeholder { line-height: 69px; } .favoritegroup_showcase_group { position: relative; height: 157px; padding-left: 166px; margin-bottom: 22px; } .favoritegroup_showcase_group.showcase_slot { float: none; } .favoritegroup_showcase_group .favoritegroup_avatar { position: absolute; left: 0; top: 0; width: 157px; height: 157px; } .favoritegroup_showcase_group .favoritegroup_avatar img { width: 157px; height: 157px; } .favoritegroup_showcase_group .favoritegroup_content { position: relative; height: 157px; } .favoritegroup_showcase_group .showcase_openslot_placeholder { line-height: 157px; } .favoritegroup_showcase_group .favoritegroup_namerow { font-size: 16px; color: #828282; vertical-align: bottom; line-height: 32px; } .favoritegroup_showcase_group .favoritegroup_namerow .favoritegroup_name { font-size: 24px; font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ } @media screen and (max-width: 480px) { html.responsive .favoritegroup_showcase_group .favoritegroup_avatar { position: static; float: left; margin: 0 12px 12px 0; } html.responsive .favoritegroup_showcase_group { padding-left: 0; } html.responsive .favoritegroup_showcase_group .favoritegroup_avatar, html.responsive .favoritegroup_showcase_group .favoritegroup_avatar img { width: 92px; height: 92px; } html.responsive .favoritegroup_description { max-height: 58px; overflow: hidden; } } .recommendation_showcase .showcase_slot { float: none; } .recommendation_showcase .showcase_slot .showcase_openslot_placeholder { line-height: 91px; } .favorite_game_playtime { color: #9b9b9b; font-size: 17px; } .showcase_stats_row.favoritegroup_stats { } .showcase_stats_row.favoritegroup_stats .showcase_stat { padding-top: 4px; padding-bottom: 4px; margin-left: 22px; } .showcase_stats_row.favoritegroup_stats .showcase_stat:first-child { margin-left: 0; } .showcase_stats_row.favoritegroup_stats .showcase_stat .value { font-size: 0.64em; } .showcase_stat.favoritegroup_ingame .value { color: #8bc53f; } .showcase_stat.favoritegroup_online .value { color: #62a7e3; } .showcase_stat.favoritegroup_inchat { background-color: var(--color-showcase-header); border-radius: 3px; padding-left: 12px; padding-right: 12px; cursor: pointer; } .favoritegroup_stats.showcase_stats_row { position: absolute; bottom: 0; left: 0; right: 0; } .workshop_showcase_item { height: 160px; position: relative; overflow: hidden; } .favoriteguide_showcase .workshop_showcase_item { height: auto; min-height: 160px; } .workshop_showcase_item.showcase_slot { float: none; } .workshop_showcase_item .showcase_openslot_placeholder, .workshop_showcase_multiitem .showcase_openslot_placeholder { line-height: 114px; } .workshop_showcase_mutiitem_ctn { float: left; max-width: 20%; } .workshop_showcase_multiitem.showcase_slot { position: relative; float: none; margin: 2px; overflow: hidden; } .workshop_showcase_multiitem img.workshop_showcase_item_image { width: 100%; } .workshop_showcase_multiitem.openslot { margin: 0px 4px 0px 0px; height: 115px; width: 115px; } .workshop_showcase_item img.workshop_showcase_item_image { float: left; width: 160px; max-width: 40%; margin-right: 8px; display: block; } .workshop_showcase_right_col { overflow: hidden; position: relative; height: 100%; } .myworkshop_showcase_header { /* 620 x 58 */ width: 600px; height: 38px; padding: 10px; line-height: 38px; /*background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_showcase_myworkshop.png' );*/ margin: 10px; } .myworkshop_showcase_header .playerAvatar { float: left; margin-right: 10px; } .myworkshop_showcase_header .myworkshop_playerName { font-size: 24px; font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ color: #ffffff; } .workshop_showcase_mini_app { position: absolute; right: 0; bottom: 0; } .workshop_showcase_mini_app, .workshop_showcase_mini_app img { height: 32px; width: 32px; } .workshop_showcase_details_row { position: absolute; left: 0; bottom: 0; right: 0; padding-top: 10px; background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/showcase_content_fade.png' ); background-position: center top; background-repeat: repeat-x; } .workshop_showcase_details_content { background-color: #0e0e0e; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .workshop_showcase_app { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .workshop_showcase_app_details { line-height: 32px; } .workshop_showcase_app_details .workshop_showcase_app img { vertical-align: middle; } .workshop_showcase_stars { float: right; } .guide_showcase_contributors { margin-bottom: 8px; } .guide_showcase_appinfo { line-height: 32px; margin-bottom: 8px; } .guide_showcase_appinfo .workshop_showcase_app img { vertical-align: middle; } .guide_showcase_item_description { line-height: 18px; max-height: 72px; } .myworkshop_showcase_header.guides { background: linear-gradient(180deg, var(--gradient-showcase-header-left) 0%, var(--color-showcase-header) 90%); padding: 8px; border-radius: 5px; /*background: -webkit-linear-gradient( left, #000000 5%,#282828 95%); background: linear-gradient( to right, #000000 5%,#282828 95%); */ } .myguide_showcase_item_ctn { width: 48%; margin-right: 1%; overflow: hidden; background-color: #101214; background-color: rgba( 0, 0, 0, 0.3 ); border: 1px solid transparent; border-radius: 3px; margin-bottom: 7px; } .myguide_showcase_item_ctn.openslot { height: 88px; } .myguide_showcase_item { padding: 10px; height: 68px; } .myguide_showcase_item_overlay { display: block; } .myguide_showcase_item.left { margin-right: 2%; } .myguide_showcase_item:hover { border-color: #97C0E3; } .guide_showcase_img_ctn { float: left; position: relative; width: 66px; max-width: 25%; margin-right: 8px; } .guide_showcase_img_ctn img.guide_showcase_image { width: 100%; display: block; } .guide_showcase_item_content { overflow: hidden; /* prevents wrapping below image */ } @media screen and (max-width: 460px) { html.responsive .myguide_showcase_item_ctn.left, html.responsive .myguide_showcase_item_ctn { margin-right: 0; width: auto; float: none; } } .guide_showcase_img_ctn .workshop_showcase_mini_app, .guide_showcase_img_ctn .workshop_showcase_mini_app img { width: 18px; height: 18px; } .myguide_showcase_item_ctn.showcase_slot .showcase_openslot_placeholder { line-height: 88px; } .guide_showcase_title { font-size: 14px; color: #ffffff; } .guide_showcase_author, .guide_showcase_author a { color: #828282; } .screenshot_showcase_primary { width: 508px; max-width: calc( 83% - 7px ); float: left; margin-right: 7px; } .screenshot_showcase_primary.single { float: none; width: 100%; min-height: 100px; max-width: 100%; margin-right: 0px; } .screenshot_showcase_primary.showcase_slot.openslot { height: 397px; } .screenshot_showcase_screenshot { cursor: pointer; border: 1px solid #000000; display: block; overflow: hidden; } .screenshot_showcase_screenshot:hover { border: 1px solid #97C0E3; } .screenshot_showcase_primary .screenshot_showcase_screenshot { margin-bottom: 4px; } .screenshot_showcase_screenshot img { display: block; } .screenshot_showcase_primary .screenshot_showcase_screenshot img { margin-left: auto; margin-right: auto; } .screenshot_showcase_itemname { word-wrap: break-word; } .screenshot_showcase_rightcol { overflow: hidden; max-width: 17%; width: 102px; text-align: center; } .screenshot_showcase_smallscreenshot { float: none; margin-bottom: 11px; overflow: hidden; } .screenshot_showcase_smallscreenshot.screenshot_count { display: block; height: 57px; line-height: 57px; background-color: #222223; color: #ffffff; } .screenshot_showcase_smallscreenshot.openslot { height: 79px; } .screenshot_showcase_stats { line-height: 24px; } .screenshot_showcase_stat { margin-right: 12px; cursor: default; } .screenshot_showcase_stats .screenshot_showcase_staticon { vertical-align: text-bottom; } .screenshot_showcase_staticon.favorite { display: inline-block; background-image: url( 'https://community.akamai.steamstatic.com/public/images/sharedfiles/ico_fav_tiled.png' ); background-repeat: no-repeat; background-position: 0 -65px; width: 17px; height: 17px; } .screenshot_showcase .screenshot_showcase_primary.showcase_slot.openslot .showcase_openslot_placeholder { line-height: 337px !important; } .screenshot_showcase .screenshot_showcase_primary.single.showcase_slot.openslot .showcase_openslot_placeholder { line-height: 100px !important; } .screenshot_showcase .showcase_slot .play_video_icon { position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -40px; z-index: 2; } .profile_recentgame_header { display: flex; justify-content: space-between; margin-bottom: 8px; } .recentgame_quicklinks { float: right; display: flex; gap: 8px; align-items: center; } .recent_game { backdrop-filter: blur(20px); background-color: rgba( 0, 0, 0, 0.3 ); border-radius: 3px; margin-bottom: 21px; } .recent_game_content { padding: 8px 10px; } .recent_game.in_game { border-top-left-radius: 0; border-top-right-radius: 0; } .recent_game_now_playing { height: 33px; padding: 5px; border-radius: 3px; background-color: #88c743; background: -webkit-linear-gradient( top, #b0f951 5%, #88c743 95%); background: linear-gradient( to bottom, #b0f951 5%, #88c743 95%); } .recent_game_now_playing .content { height: 31px; line-height: 31px; border: 1px solid #3c5a1b; border-radius: 3px; background-color: #1b1b1b; padding: 0 5px; } .recent_game .game_info { position: relative; height: 69px; } .recent_game .game_info .game_info_cap { float: left; margin-right: 8px; width: 184px; max-width: 33%; } .recent_game .game_info .game_info_cap img { width: 100%; } .recent_game .game_info .game_info_details { position: absolute; right: 0; bottom: 0; text-align: right; } .recent_game .game_info .game_name { padding-top: 10px; font-size: 14px; } .recent_game .game_info_stats, .favoritegame_showcase .game_info_stats { padding: 9px 11px 10px; background-color: var(--gradient-background); border-radius: 3px; /*border-top: 1px solid #48515f;*/ margin-top: 9px; } .game_info_stats_rule { border-top: 1px solid rgba(0, 0, 0, 0.5); background-color:rgba(255, 255, 255, .1); height: 1px; margin: 10px 0; } .game_info_achievements_only_ctn { line-height: 32px; position: relative; } .game_info_achievements_badge .game_info_achievements { width: 286px; float: right; } .game_info_achievements_badge .game_info_achievement_summary { display: block; text-align: right; margin-bottom: 8px; } .game_info_achievements_badge .game_info_achievement_summary a.whiteLink { float: left; } .game_info_achievements_badge .achievement_progress_bar_ctn { width: auto; display: block; margin-bottom: 8px; } .achievement_progress_bar_ctn { height: 8px; padding: 1px; width: 145px; display: inline-block; background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 5px; box-shadow: 1px 1px 1px rgba(255, 255, 255, .1); } .achievement_progress_bar_ctn .progress_bar { background-color: #364359; height: 8px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, var(--color-showcase-header) 80%);; } .achievement_icons { white-space: nowrap; overflow: hidden; } .game_info_achievement { vertical-align: top; display: inline-block; margin-left: 4px; } .game_info_achievements_only_ctn .game_info_achievements_summary_area { float: left; width: 361px; white-space: nowrap; } .game_info_achievement:first-child { margin-left: 0; } .game_info_achievement, .game_info_achievement img { width: 32px; height: 32px; } .game_info_achievement.plus_more, .showcase_achievement.plus_more { height: 30px; width: 30px; border: 1px solid #212121; background-color: #222223; line-height: 30px; color: #ffffff; text-align: center; box-shadow: 1px 1px 1px #353535; cursor: pointer; } .game_info_badge_only_ctn { } .game_info_badge_border { border: 1px solid #212121; border-radius: 3px; background-color: #222223; width: 282px; height: 48px; box-shadow: 1px 1px 0 #343944; } .game_info_achievements_badge .game_info_badge_border { float: left; } .game_info_badge { position: relative; padding: 7px; } .game_info_badge_icon { position: absolute; top: 7px; left: 7px; } .game_info_badge_icon img.badge_icon.small { width: 36px; height: 36px; } .game_info_badge_description { padding-left: 52px; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .game_info_badge_description .name { color: #ffffff; font-size: 13px; } .showcase_achievement.plus_more { height: 62px; width: 62px; line-height: 62px; } @media screen and ( max-width: 640px ) { html.responsive .game_info_achievements_badge .game_info_badge_border { float: none; margin-bottom: 8px; width: auto; max-width: 282px; } html.responsive .game_info_achievements { float: none; clear: left; margin-top: 8px; width: auto; position: relative; } html.responsive .game_info_achievements_only_ctn { line-height: normal; } html.responsive .game_info_achievement_summary a.whiteLink { white-space: nowrap; } html.responsive .game_info_achievements_summary_area { float: left; margin-right: 1%; max-width: 54%; white-space: normal; } html.responsive .game_info_achievements_summary_area .game_info_achievement_summary { display: block; text-align: center; } html.responsive .game_info_achievements_only_ctn .game_info_achievements_summary_area .achievement_progress_bar_ctn { width: auto; display: block; } html.responsive .game_info_achievements_only_ctn .achievement_icons { overflow: hidden; } html.responsive .achievement_icons { overflow: hidden; } } @media screen and (max-width: 480px ) { html.responsive .achievement_icons { padding-top: 6px; } html.responsive .game_info_achievements_only_ctn .game_info_achievements { margin-top: 0; } } .game_info_stats_publishedfilecounts .published_file_count_ctn { display: inline-block; } .game_info_stats_publishedfilecounts .published_file_link { margin-right: 12px; white-space: nowrap; line-height: 19px; } .game_info_stats_publishedfilecounts .published_file_link:hover { text-decoration: underline; } .published_file_icon { width: 19px; height: 19px; display: inline-block; margin-right: 4px; background-image: url('https://community.akamai.steamstatic.com/public/images/profile/icons_content.png?v=2'); background-position: center; background-repeat: no-repeat; vertical-align: middle; } .published_file_icon.workshop_item { background-position: 0 center; } .published_file_icon.video { background-position: -19px center; } .published_file_icon.screenshot { background-position: -38px center; } .published_file_icon.guide { background-position: -57px center; } .published_file_icon.recommendation { background-position: -76px center; } .published_file_icon.artwork { background-position: -95px center; } .profile_comment_area { margin-top: 84px; backdrop-filter: blur(20px); background-color: rgba(0, 0, 0, 0.3); border-radius: 3px; border-radius: 3px; } .profile_comment_area .commentthread_entry { margin: 10px; } .commentthread_area { border-radius: 5px; overflow: hidden; } .commentthread_entry_error { color: #ff5454; } .commentthread_comment_text { color: #ffffff; } .commentthread_comment_timestamp { color: rgba(255,255,255,0.5); } .profile_count_link { font-size: 14px; margin-bottom: 4px; min-height: 29px; } .profile_count_link a:hover .count_link_label { text-decoration: underline; } .profile_count_link_total { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ color: #9b9b9b; font-size: 24px; } .profile_in_game { margin-bottom: 32px; } .profile_in_game_header { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ font-size: 20px; } .profile_in_game_name { font-size: 15px; margin-bottom: 12px; } .profile_in_game_broadcastpreview { color: #9b9b9b; margin-bottom: 12px; } .profile_private_info { padding: 12px 0; color: #39838d;; font-size: 17px; } .profile_private_info_dropdowns select { width: 200px; height: 30px; margin-bottom: 40px; } .profile_private_info_dropdowns select option { background-color: #1B2838; } .profile_private_info_message { font-size: 20px; } .profile_ban_status { margin-bottom: 32px; color: #a94847; line-height: 22px; } .profile_country_restriction { border: 1px solid #c1a643; text-align: center; font-size: 16px; margin-bottom: 32px; padding: 10px; } .ban_status_header { text-align: center; font-size: 16px; } .currentTradeBan { color: #95423a; } .profile_ban .profile_ban_info { color: #828282; } .profile_badges_badge, .profile_badges_badge img { width: 54px; height: 54px; } .profile_badges_badge { float: left; margin-right: 16px; } .profile_badges_badge.last { margin-right: 0; } .profile_awards img.award_icon { width: 40px; height: 40px; //padding: 5px; width: 50px; height: 50px; //background-color: rgba( 0, 0, 0, 0.25 ); } .profile_badges, .profile_item_links, .profile_group_links, .profile_friend_links { margin-bottom: 40px; } html.responsive .localmenu_content .profile_badges_badge { width: 19%; margin-right: 7%; } html.responsive .localmenu_content .profile_badges_badge.last { margin-right: 0; } html.responsive .localmenu_content .profile_badges_badge img { width: 100%; height: auto; } .profile_in_common { margin-bottom: 6px; } .profile_group { position: relative; word-wrap: break-word; overflow: hidden; padding-top: 1px; padding-left: 42px; height: 36px; } .profile_group.profile_primary_group { padding-top: 10px; padding-left: 80px; height: 60px; margin-bottom: 12px; margin-top: 12px; } .profile_group_avatar { position: absolute; left: 0; top: 0; box-shadow: 2px 2px 3px #0c0c0c; width: 32px; height: 32px; } .profile_group_avatar img { border-radius: 2px; } .profile_primary_group .profile_group_avatar { width: 64px; height: 64px; } .profile_small_header_bg { /*background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_header_small_bg.png' );*/ max-width: 1010px; height: 215px; margin: 0 auto -98px auto; background-position: center; } .profile_small_header_texture { /*background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_header_small_bg_texture.jpg' );*/ background: rgba(58, 62, 71, 0.5); max-width: 978px; height: 102px; margin: 0 auto; position: relative; } .profile_small_header_text { position: absolute; left: 120px; right: 30px; bottom: 31px; max-height: 65px; color: white; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .profile_small_header_name { font-size: 26px; } .profile_small_header_avatar { position: absolute; left: 30px; top: 18px; color: white; } .profile_small_header_arrow { font-size: 16px; color: #828282; } .profile_small_header_additional { position: absolute; right: 30px; top: 0; bottom: 0; } .profile_small_header_additional .gameLogo { margin-top: 12px; } body .pagecontent.profile_subpage_column { padding-bottom: 0; } .profile_subpage_column .profile_small_header_bg { background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_header_small_bg_column.png?v=1' ); height: 111px; margin-bottom: 0; } .profile_subpage_general .profile_small_header_bg { background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_header_small_bg_none.png' ); height: 111px; margin-bottom: 0; } .profile_subpage_column .profile_header, .profile_subpage_general .profile_header { height: 87px; } .profile_subpage_column .maincontent, body.migrated_profile_page .profile_subpage_column #BG_bottom.maincontent { background-image: url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_subpage_column_bottom.png?v=1' ), url( 'https://community.akamai.steamstatic.com/public/images/profile/profile_subpage_column.png?v=1' ); background-repeat: no-repeat, repeat-y; background-position: bottom center, center; width: 926px; padding: 12px 12px 128px 12px; } .profile_subpage_general .maincontent { margin-top: -7px; border-left: 1px solid #000000; border-right: 1px solid #545454; background-color: #262627; padding: 12px; width: 946px; box-shadow: inset 0 -1px 3px #101010; } body.migrated_profile_page #BG_bottom.maincontent { margin: 0 auto; width: 948px; background: none; } .profile_topfriends .friendBlock { background: none; } .profile_topfriends .friendBlock:hover { background-color: #3a3a3a; } #group_invite_modal_list { max-height: 400px; overflow-y: auto; background-color: #000000; border-radius: 3px; padding: 8px; } .group_invite_throbber { text-align: center; height: 32px; padding: 32px 0px; } .group_list_option { height: 40px; position: relative; padding: 5px 5px 5px 50px; border-radius: 3px; cursor: pointer; } .group_list_option:hover { background-color: #33425A; } .group_list_option .playerAvatar { position: absolute; left: 5px; top: 5px; } .group_list_option .group_list_groupname { line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile_comment_area .commentthread_header, .profile_leftcol_header { border-bottom: none; padding: 6px 10px; line-height: 26px; } .profile_comment_area .commentthread_header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; flex-direction: column; background: var(--color-showcase-header); background: linear-gradient(90deg, var(--gradient-showcase-header-left) 0%, var(--color-showcase-header) 90%); font-family: "Motiva Sans", Sans-serif; font-weight: 200; color: #ffffff; font-size: 16px; line-height: 30px; overflow: hidden; white-space: nowrap; } .profile_comment_area .comment_header_label { font-family: "Motiva Sans", Sans-serif; font-weight: 200; color: #ffffff; font-size: 16px; line-height: 30px; overflow: hidden; white-space: nowrap; } .profile_comment_area .commentthread_header_and_count { width: 100%; background-image: none; padding-left: 0;; } .profile_leftcol_header h2 { float: left; } .profile_comment_area .commentthread_header .commentthread_count { font-family: "Motiva Sans", Sans-serif; font-weight: 200; /* thin */ background: none; padding-left: 0px; display: flex; justify-content: space-between; } .profile_comment_area .commentthread_header .commentthread_paging { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } .profile_comment_area .commentthread_header .commentthread_allcommentslink { font-size: 12px; font-family: Arial,Helvetica,Verdana,sans-serif; } .profile_comment_area .commentthread_header .commentthread_allcommentslink:hover { text-decoration: underline; } .profile_comment_area .commentthread_allcomments_separator { display: none; } .profile_comment_area .commentthread_entry { /* background-color: transparent; */ } .profile_comment_area .commentthread_entry_quotebox_quote { display: none; } .profile_comment_area .commentthread_entry_quotebox { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; background-color: rgba(255, 255, 255, 0.1); box-shadow: 1px 1px 1px rgba(255, 255, 255, .1); /*-webkit-box-shadow: inset 0 0 5px #202020;*/ } .profile_comment_area .commentthread_comment_container { margin-top: 9px; border-radius: 5px; } .profile_comment_area .commentthread_textarea { color: #ffffff; } .commentthread_textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.5); } .profile_comment_area .commentthread_footer { padding-top: 15px; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); margin-left: 10px; margin-right: 10px; } .profile_comment_area .pagebtn { line-height: 16px; } .profile_comment_area .commentthread_subscribe_checkbox { display: inline-block; position: relative; height: 12px; width: 12px; vertical-align: middle; border: 1px solid rgba(255, 255, 255, .1); border-top-color: rgba(255, 255, 255, 0.2); border-left-color: rgba(255, 255, 255, 0.2); border-top-right-radius: 1px; border-bottom-left-radius: 1px; background: rgba(255, 255, 255, 0.2); } .profile_comment_area .commentthread_subscribe_ctn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; font-weight: 400; } .profile_background_holder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; z-index: 0; min-width: 972px; } .profile_background_image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; background-position: center top; background-repeat: no-repeat; } .profile_background_holder_content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000000; z-index: 0; } .profile_background_image_content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center -226px; /* 240px header, -14px margin .profile_content.has_profile_background */ background-repeat: no-repeat; z-index: 0; } .profile_background_overlay_content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: #171717; opacity: .85; filter: alpha(opacity=85); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; } .profile_customization.customization_edit { } .profile_customization.customization_edit.none_selected { border: 1px dotted var(--btn-background-hover); } .profile_customization_area .profile_customization.customization_edit.none_selected { cursor: pointer; } .profile_customization_area .profile_customization.customization_edit.none_selected:hover { border-color: var(--btn-outline); } .showcase_notes { word-wrap: break-word; overflow: hidden; overflow-y: auto; max-height: 600px; } .newmodal_content a.bb_link:hover, .profile_summary a.bb_link:hover, .showcase_notes a.bb_link:hover, .showcase_notes a:hover { text-decoration: underline; } .profile_summary_modal .bb_h1, .customtext_showcase .bb_h1 { border-bottom: 1px dotted #666666; } .profile_customization_edit_icon { display: inline-block; vertical-align: middle; background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJFQ0Q1M0UyOTAwODExRTJCOEQxQjI4RTMyMTI3NEIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJFQ0Q1M0UzOTAwODExRTJCOEQxQjI4RTMyMTI3NEIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkVDRDUzRTA5MDA4MTFFMkI4RDFCMjhFMzIxMjc0QjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkVDRDUzRTE5MDA4MTFFMkI4RDFCMjhFMzIxMjc0QjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6u3ykzAAAAvUlEQVR42oxTCxHDIAwNDpAwCUiYhEpAQutgDiqhEiqhczAJnYNKSJNb2AENJe/ucXySd+EFADpARE/c8IeDGLMzAIPAjCUOswAFDMQncckVTAKSnMoeZc3zuStAB0GCc6y8X8U1TdvxChb0FoENdQQltut4QmxctVjERvJyY/StaYxPp83/iWbaXpumCtDwkBbVjgfDKy1a9+qZ1qpgFfe9eDGAESzgss8xEb/WZOfcO1UwKlewgP8GnAIMACuKvjkRumvoAAAAAElFTkSuQmCC' ); background-repeat: no-repeat; background-position: center; width: 16px; height: 16px; } .saved_changes_msg { border: 1px solid #549cd7; color: #549cd7; line-height: 39px; padding: 0 16px; margin-bottom: 18px; } .manage_friends_btn_ctn { float: right; } .add_friends_btn_ctn { float: right; margin-top: 10px; } @media screen and (max-width: 540px) { html.responsive .add_friends_btn_ctn { float: none; margin-top: 0; margin-bottom: 10px; text-align: center; } } .bulk_action_ctn { white-space: nowrap; } .coplayGroup { border-bottom: 1px solid; margin-bottom: 25px; padding-bottom: 10px; } .gameListRow { height: 77px; margin-bottom: 15px; padding-left: 208px; position: relative; } .gameListRowItem { color: #939393; font-size: 11px; height: 66px; padding: 9px; position: relative; } .gameListRowItemTop { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; } .gameListRowItemTopPrimary { /* Ensures text still ellipsizes correctly */ overflow: hidden; max-width: 100%; } .gameListRowItemTopSecondary { } .gameListRowLogo { left: 0; position: absolute; } .friends_limit_details { line-height: 20px; font-size: 17px; color: #6b6b6c; } .friends_limit_details strong { font-weight: normal; color: #67c1f5; } .friends_limit_details_maxed_out { color: orange; max-width: 600px; } .friends_current_count { font-size: 18px; } .friends_limit_invites_maxed_out { color: orange; max-width: 600px; margin: 0 6px 0 8px; font-size: 14px; } .manage_friends_header { margin-bottom: 14px; } .manage_actions_ctn { border: 1px solid #529cde; background-color: #3a3a3a; margin-bottom: 17px; padding: 18px 12px; color: #8e8e8e; font-size: 12px; } .manage_actions_instructions { color: #ffffff; margin-right: 15px; } .manage_actions_buttons { padding-top: 12px; } .manage_actions_buttons .btn_medium { margin-right: 10px; margin-bottom: 10px; } .manage_friend_checkbox { position: absolute; right: 0; top: 0; bottom: 0; width: 30px; line-height: 48px; background-color: #434343; text-align: center; z-index: 5; /* overlap link overlay */ cursor: default; } .manage_friend_checkbox input { vertical-align: middle; } a.manage_friend_link { display: block; min-height: 40px; } .profile_friends .friendBlock { position: relative; float: left; width: 290px; margin-right: 8px; } .profile_friends .friendBlock:nth-child(3n) { margin-right: 0; } .btn_manage_friends { color: #ffffff; } #blockConfirmBlock { width: 800px; margin: 0 auto; } body.profile_page #footer { background-color: #000000; } .friends_that_play_content .profile_friends { margin-bottom: 12px; } .player_list_results .friendBlock { width: 264px; } .player_list_results.cols { width: 822px; } .player_list_results.cols .friendBlock { float: left; margin-right: 6px; } @media screen and (max-width: 910px) { .player_list_results.cols { width: auto; } .player_list_results .friendBlock { float: left; } } .namehistory_link { cursor: pointer; } #NamePopup { font-size: 13px; font-family: Arial,Helvetica,Verdana,sans-serif; line-height: normal; } #NamePopup .popup_menu { padding: 6px; } #NamePopup #NamePopupAliases { padding: 0 12px; } #NamePopupClearAliases { float:right; font-size:12px; } #NamePopupClearAliases > a { color: #b8b6b4; } #NamePopupClearAliases > a:hover { color: #ffffff; } .rightcol_controls { background-color: #1e1e1f; border-radius: 5px; } .rightcol_controls_content { padding: 20px 14px; } .rightcol_controls_rule { height: 1px; background-color: #333333; border-top: 1px solid #000000; } .profile_fatalerror { padding: 20px 9% 80px 9%; } .profile_fatalerror h1 { margin-left: 8px; } .profile_fatalerror h3 { color: #5491cf; font-size: 17px; font-weight: normal; margin-bottom: 12px; margin-left: 8px; } .profile_fatalerror_message { background-color: #1d1d1d; border-radius: 3px; padding: 16px 4.5%; color: #d6d6d6; margin-bottom: 32px; line-height: 20px; } .group_breadcrumbs, .group_breadcrumbs a { color: #9b9b9b; text-decoration: none; margin-bottom: 12px; } .group_breadcrumbs a:hover { text-decoration: underline; } .sectionTabs { position: relative; padding-top: 3px; margin-left: -5px; font-size: 14px; z-index: 10; } .sectionTab, a.sectionTab { margin-top: 7px; display: block; float: left; color: #dadada; background-color: rgba( 0, 0, 0, 0.4 ); line-height: 29px; height: 29px; padding: 0px 12px; margin-left: 5px; text-decoration: none; border-radius: 2px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; -moz-border-radius: 2px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; } .sectionTab:hover { background-color: rgba( 102, 192, 244, 0.4 ); color: #ffffff; } .sectionTabActive { position: relative; margin-top: 0px; margin-left: 5px; font-size: 14px; color: white; float: left; } .sectionTabActive .sectionTab { margin-top: 0px; display: inline-block; padding-left: 12px; padding-right: 8px; margin-right: 12px; height: 36px; line-height: 36px; background-position: 0 0px; background-repeat: repeat-x; text-decoration: none; } .sectionTabActive .sectionTab:hover { text-decoration: none; color: #ffffff; } .sectionTabInactive, .sectionTabInactive .sectionTab_leftcap, .sectionTabInactive .sectionTab_rightcap { display: inline; } .sectionTab.active { margin-top: 0px; height: 34px; padding: 1px; text-decoration: none; border: none; background: #57749e; /* Old browsers */ background: -webkit-linear-gradient( top, #66C0F4 5%, #417B9C 95%); background: linear-gradient( to bottom, #66C0F4 5%, #417B9C 95%); } .sectionTab.active > span { height: 35px; line-height: 36px; padding: 0 19px; border-radius: 2px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; color: #ffffff; display: block; background: #417B9C; /* Old browsers */ background: -webkit-linear-gradient( top, #5AA9D6 5%, #417B9C 95%); background: linear-gradient( to bottom, #5AA9D6 5%, #417B9C 95%); } .new_wishlist_tab_position .sectionTab.wishlist { position: absolute; right: 0; margin-bottom: 6px; top: -3px; } .profile_paging { background-color: rgba( 0, 0, 0, 0.2 ); border-radius: 3px; color: #747474; font-size: 12px; height: 25px; line-height: 25px; padding: 0px 5px; margin: 9px 0px; } .profile_paging .pageLinks { float: right; } .profile_paging .pagebtn { height: 15px; line-height: 15px; } .profile_broadcast_thumbnail{ width: 268px; height: 150px; display: inline; margin-bottom:12px } .profile_broadcast_live { margin-bottom:12px } .profile_subpage_selector { margin-bottom: 16px; } @media screen and (max-width: 910px) { html.responsive .profile_rightcol { float: none; width: auto; } html.responsive .profile_leftcol { float: none; width: auto; } html.responsive .profile_content { width: auto; font-size: inherit; } html.responsive .profile_count_link { font-size: inherit; } html.responsive .profile_count_link_preview_ctn .profile_count_link { background: transparent; margin: 0; width: auto; float: none; padding: 0; margin-bottom: 8px; } html.responsive .profile_count_link_preview > div { float: none; display: inline-block; vertical-align: middle; } html.responsive .profile_badges_badge, html.responsive .profile_badges_badge img { width: 36px; height: 36px; } html.responsive .profile_badges_badge { margin-right: 6px; } } html.responsive.tablet .profile_rightcol { float: none; width: auto; } html.responsive.tablet .profile_leftcol { float: none; width: auto; } html.responsive.tablet .profile_content { width: auto; font-size: inherit; } html.responsive.tablet .profile_count_link { font-size: inherit; } html.responsive.tablet .profile_count_link_preview_ctn .profile_count_link { background: transparent; margin: 0; width: auto; float: none; padding: 0; margin-bottom: 8px; } html.responsive.tablet .profile_count_link_preview > div { float: none; display: inline-block; vertical-align: middle; } html.responsive.tablet .profile_badges_badge, html.responsive.tablet .profile_badges_badge img { width: 36px; height: 36px; } html.responsive.tablet .profile_badges_badge { margin-right: 6px; } @media screen and (max-width: 910px) { html.responsive div.profile_page { min-width: 0; } html.responsive .profile_header_bg { min-width: 0; } html.responsive .profile_header { width: auto; padding-left: 8px; padding-right: 8px; } html.responsive .profile_content.has_profile_background { margin-left: auto; margin-right: auto; padding: 0; } html.responsive .profile_background_holder_content { min-width: 0; } html.responsive .profile_leftcol { padding: 0 1%; } html.responsive .profile_rightcol { padding: 0 1%; } html.responsive .profile_summary_modal { line-height: normal; } /* friends page */ html.responsive body.migrated_profile_page #BG_bottom.maincontent { width: auto; margin: 0 1%; } html.responsive .profile_subpage_column .maincontent { width: auto; margin: 0; padding: 0 1%; } html.responsive body.migrated_profile_page .profile_subpage_column #mainContents { width: auto; } html.responsive .profile_subpage_general .maincontent { width: auto; padding-left: 1%; padding-right: 1%; } html.responsive .graytab_body_wrapper { width: auto; } html.responsive .profile_background_image_content { background-position: center top; background-size: 115% auto; background-attachment: fixed; } html.responsive .profile_background_overlay_content { opacity: .65; filter: alpha(opacity=65); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; } html.responsive .profile_small_header_avatar { left: 3%; } html.responsive .profile_small_header_text { left: 3%; padding-left: calc( 68px + 3% ); right: 32px; /* need to avoid right menu hamburger on profile subpages */ } /* html.responsive .profile_content.has_profile_background .profile_content_inner { padding-top: 128px; } */ html.responsive .responsive_status_info { padding: 8px; background: rgba( 0, 0, 0, 0.5 ); margin: 12px 0; } html.responsive .responsive_status_info .profile_in_game { margin: 0; } html.responsive .responsive_status_info .profile_in_game_name, html.responsive .responsive_status_info .profile_ban_status, html.responsive .responsive_status_info .profile_in_game_broadcastpreview, html.responsive .responsive_status_info .profile_in_game_joingame { margin-top: 8px; margin-bottom: 0; } html.responsive .responsive_status_info .profile_ban_status { margin-top: 12px; } html.responsive .responsive_count_link_area { margin: 0 -4px; } html.responsive .profile_count_link_preview { overflow: hidden; line-height: 44px; height: 44px; } html.responsive .profile_count_link, html.responsive .profile_count_link_preview_ctn { background: rgba( 0, 0, 0, 0.5 ); display: block; float: left; padding: 8px; margin: 0 4px 4px 4px; height: 29px; } html.responsive .profile_count_link_total { font-size: 20px; } html.responsive .profile_count_link_preview_ctn { height: 78px; overflow: hidden; } html.responsive .profile_badges { margin-bottom: 0; } html.responsive .profile_item_links { margin-bottom: 12px; } html.responsive .profile_group > *:not(.profile_group_avatar), html.responsive .profile_topfriends .friendBlock > div:not(.playerAvatar) { display: none; } html.responsive .profile_group.profile_primary_group, html.responsive .profile_group, html.responsive .profile_topfriends .friendBlock { padding: 0; margin: 0; height: auto; width: auto; margin-right: 6px; } html.responsive .profile_topfriends .friendBlock .playerAvatar { margin: 0; float: none; } html.responsive .profile_primary_group .profile_group_avatar, html.responsive .profile_primary_group .profile_group_avatar img { width: 32px; height: 32px; } html.responsive .profile_group_avatar { position: static; } } @media screen and (min-width: 661px) and (max-width: 910px) { html.responsive .profile_count_link, html.responsive .profile_count_link_preview_ctn { width: calc( 25% - 16px - 8px ); } html.responsive .profile_count_link:nth-child(4n) { /* margin-right: 0; */ } } @media screen and (min-width: 521px) and ( max-width: 660px ) { html.responsive .profile_count_link, html.responsive .profile_count_link_preview_ctn { width: calc( 33% - 16px - 8px ); } html.responsive .profile_count_link:nth-child(3n) { /* margin-right: 0; */ } } @media screen and (max-width: 520px) { html.responsive .profile_count_link, html.responsive .profile_count_link_preview_ctn { width: calc( 50% - 16px - 8px ); } html.responsive .profile_count_link:nth-child(2n) { /* margin-right: 0; */ } } @media screen and (max-width: 910px) { html.responsive body.profile_page .responsive_page_template_content { padding-bottom: 0; } html.responsive body.profile_page .profile_content_inner { padding-bottom: 120px; } } html.responsive.touch body.profile_page .responsive_page_template_content { padding-bottom: 0; } html.responsive.touch body.profile_page .profile_content_inner { padding-bottom: 120px; } @media screen and (max-width: 600px ) { html.responsive .profile_small_header_additional { display: none; } } @media screen and (max-width: 500px) { html.responsive .profile_leftcol_header > h2 { display: inline-block; margin-right: 8px; float: none; } html.responsive .recentgame_recentplaytime { display: inline-block; float: none; vertical-align: bottom; } html.responsive .recentgame_recentplaytime > h2 { font-size: 16px; } html.responsive .gameListRowItemTop { flex-direction: column; align-items: flex-start; justify-content: flex-start; } } body.flat_page .sectionTabsHR { position: static; width: auto; left: 0; right: 0; top: 0; max-width: 958px; } .manage_friends_max_block_ctn { margin: 20px 10% 0 10%; text-align: center; padding: 15px; background-color: rgba( 0, 0 , 0, .3 ); } .manage_friends_max_block_header { font-size: 16px; margin-bottom: 15px; font-weight: bold; } .manage_friends_max_block_ctn > a { margin-top: 30px; } .group_invite_menu_option_disabled { opacity: .3; } .clanInviteErrorTable td { padding: 5px; } .clanInviteErrorTable th { padding: 5px; font-weight: bold; text-align: center; } .clanInviteErrorTable { margin-top: 15px; } .invite_banner { font-family: "Motiva Sans", Sans-serif; font-weight: 300; /* light */ padding: 12px; background: #5c6e84; border: 1px solid #8F98A0; box-shadow: 0 0 90px rgba(255, 255, 255, 0.2) inset; } .invite_ctn { margin: 0 auto; max-width: 1018px; } .invite_banner .header { padding: 12px 12px 0px 12px; font-size: 22px; color: #fff; } .invite_banner p { margin-top: 4px; } .invite_banner .content { padding: 0px 12px 12px 12px; font-size: 14px; color: #fff; }