MediaWiki:Mobile.css

Revision as of 13:52, 5 October 2022 by Bawolff (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
   1 /* <pre> */
   2 body {
   3     font-family: system-ui, -apple-system, Roboto, Helvetica, sans-serif;
   4 }
   5 
   6 @media all and (max-width: 320px) {
   7     body {
   8           font-size: 0.9em;
   9     }
  10 
  11 }
  12 
  13 #mw-content-text {
  14     line-height: 1.7em;
  15 }
  16 
  17 .pre-content h1,
  18 .content h1,
  19 .content h2 {
  20     font-weight: bold;
  21 }
  22 
  23 body {
  24     background: var(--body-background-color);
  25     color: var(--text-color);
  26 }
  27 
  28 select {
  29     color: var(--text-color);
  30 }
  31 
  32 a:not( [ href ] ) {
  33     color: inherit;
  34 }
  35 
  36 a.external,
  37 .mw-parser-output a.external {
  38     background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg fill='%23906039'%3E%3Cpath d='M8.9 8.9H1.1V1.1h2.8V0H1.1C.5 0 0 .5 0 1.1v7.8C0 9.5.5 10 1.1 10h7.8c.6 0 1.1-.5 1.1-1.1V6.1H8.9v2.8z'/%3E%3Cpath d='M10 0H5.6l1.8 1.8L4.2 5l.8.8 3.2-3.2L10 4.4V0z'/%3E%3C/g%3E%3C/svg%3E");
  39 }
  40 
  41 .pre-content h1 {
  42     text-align: center;
  43 }
  44 
  45 .content .mw-parser-output > h2,
  46 .content .section-heading {
  47     border-color: var(--sidebar);
  48 }
  49 
  50 .content .mw-parser-output > h2,
  51 .content .section-heading {
  52     border-color: var(--sidebar);
  53 }
  54 
  55 .content .plainlist ol,
  56 .content .plainlist ul {
  57     padding: 0;
  58 }
  59 
  60 .content p {
  61     margin: 0.5em 0;
  62 }
  63 
  64 .content hr {
  65     background: none;
  66     border-color: var(--sidebar);
  67     border-style: solid;
  68     border-width: 1px 0 0 0;
  69     height: initial;
  70 }
  71 
  72 .content kbd,
  73 .content samp {
  74     border: none;
  75 }
  76 
  77 .content code,
  78 .content pre {
  79     background-color: var(--mw-code-background-color);
  80     border: 1px solid var(--body-border);
  81 }
  82 
  83 #mw-mf-page-center {
  84     background-color: transparent;
  85 }
  86 
  87 .header {
  88     border-top: none;
  89 }
  90 
  91 .header-container.header-chrome {
  92     background: var(--body-background-image) var(--body-background-color) no-repeat;
  93     background-color: var(--body-background-color);
  94     background-position: 0 50%;
  95     background-size: 900px;
  96     box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
  97 }
  98 
  99 .header-container .header .search-box {
 100     text-align: right;
 101 }
 102 
 103 .header-container .header .search {
 104     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
 105 }
 106 
 107 .header-container .notification-count {
 108     border-radius: 50%;
 109 }
 110 
 111 .header-container .notification-count.notification-unseen {
 112     background: none;
 113 }
 114 
 115 .header-container .branding-box {
 116     opacity: 1;
 117 }
 118 
 119 .overlay {
 120     background: var(--body-main);
 121 }
 122 
 123 .overlay textarea {
 124     color: var(--text-color);
 125 }
 126 
 127 .overlay.search-overlay {
 128     background: var(--body-main);
 129 }
 130 
 131 .overlay.search-overlay .results,
 132 .overlay.search-overlay .search-feedback {
 133     background-color: var(--body-light);
 134 }
 135 
 136 .overlay.search-overlay .search-content {
 137     border-color: var(--body-mid);
 138 }
 139 
 140 .overlay .license {
 141     color: var(--base-text-color);
 142 }
 143 
 144 .overlay .panel {
 145     border-color: var(--sidebar);
 146 }
 147 
 148 .overlay .content-header {
 149     background-color: var(--body-light);
 150     border-color: transparent;
 151 }
 152 
 153 .overlay.overlay-loading {
 154     background: var(--ooui-window-background);
 155 }
 156 
 157 .overlay .overlay-content {
 158     background: var(--body-main);
 159 }
 160 
 161 .page-summary h2,
 162 .page-summary h3 {
 163     color: var(--text-color);
 164 }
 165 
 166 .page-list li,
 167 .topic-title-list li,
 168 .site-link-list li {
 169     border-color: var(--body-mid);
 170 }
 171 
 172 .overlay-enabled .overlay:not(.editor-overlay),
 173 .overlay-enabled #mw-mf-page-center {
 174     overflow-y: scroll;
 175 }
 176 
 177 .overlay-header-container,
 178 .overlay-footer-container {
 179     background-color: var(--body-background-color);
 180     border-color: transparent;
 181 }
 182 
 183 .editor-overlay .wikitext-editor {
 184     color: var(--text-color);
 185 }
 186 
 187 .editor-overlay .overlay-header {
 188     outline-color: transparent;
 189 }
 190 
 191 .editor-overlay .summary-request {
 192     color: var(--text-color);
 193 }
 194 
 195 .editor-overlay .editor-switcher {
 196     border: none;
 197 }
 198 
 199 .action-submit .mw-editnotice .action-edit .mw-editnotice,
 200 .action-submit .mw-editTools,
 201 .action-edit .mw-editTools,
 202 .action-submit .preview-limit-report-wrapper,
 203 .action-edit .preview-limit-report-wrapper,
 204 .action-submit .diff-otitle,
 205 .action-edit .diff-otitle,
 206 .action-submit .diff-ntitle,
 207 .action-edit .diff-ntitle,
 208 .action-submit #section_0,
 209 .action-edit #section_0,
 210 .action-submit #editpage-copywarn,
 211 .action-edit #editpage-copywarn,
 212 .action-submit #mw-anon-edit-warning,
 213 .action-edit #mw-anon-edit-warning {
 214     color: var(--byline-color);
 215 }
 216 
 217 .wikitext-editor {
 218     background-color: var(--body-main);
 219 }
 220 
 221 .ve-mobile-fakeToolbar {
 222     border: none;
 223 }
 224 
 225 .ve-mobile-fakeToolbar-container {
 226     background: var(--body-background-color);
 227     border: none;
 228 }
 229 
 230 .ve-mobile-fakeToolbar .mw-ui-icon-mf-spinner {
 231     border-color: transparent;
 232 }
 233 
 234 .ve-ui-targetToolbar-mobile .oo-ui-toolbar-tools > .ve-ui-toolbar-group-back {
 235     border-color: transparent;
 236 }
 237 
 238 .ve-ui-mobileContext {
 239     background-color: var(--body-light);
 240     border-color: var(--body-light);
 241 }
 242 
 243 .ve-ui-mobileContext .ve-ui-linearContextItem-body-action-wrapper {
 244     border-color: var(--body-border);
 245 }
 246 
 247 .ve-ui-linearContextItem-foot:not(:empty) {
 248     border-color: var(--body-border);
 249 }
 250 
 251 .ve-ui-mwSaveDialog-options {
 252     backgroubd-color: var(--body-light);
 253     border-color: var(--body-mid);
 254 }
 255 
 256 .page-actions-menu {
 257     border-color: var(--sidebar);
 258 }
 259 
 260 #language-selector {
 261     display: none;
 262 }
 263 
 264 .minerva__tab-container .minerva__tab {
 265     color: var(--text-color);
 266 }
 267 
 268 .minerva__tab-container .minerva__tab.new,
 269 .minerva__tab-container .minerva__tab.new:visited,
 270 .minerva__tab-container .minerva__tab.new:hover,
 271 .minerva__tab-container .minerva__tab.new:active {
 272     color: var(--redlink-color);
 273 }
 274 
 275 .minerva__tab-container .minerva__tab.selected {
 276     border-color: var(--body-border);
 277 }
 278 
 279 .heading-holder .tagline {
 280     color: var(--base-heading-color);
 281 }
 282 
 283 .minerva-footer {
 284     border: none;
 285 }
 286 
 287 .mw-footer > .post-content {
 288     margin-top: 32px;
 289 }
 290 
 291 .mw-footer > .post-content > .minerva-footer-logo {
 292     display: none;
 293 }
 294 
 295 .mw-footer .hlist li:after {
 296     color: var(--background-text-color);
 297 }
 298 
 299 .last-modified-bar {
 300     border-top: 1px solid;
 301     border-color: transparent;
 302     background: none;
 303     color: var(--text-color);
 304 }
 305 
 306 .last-modified-bar a,
 307 .last-modified-bar a:active,
 308 .last-modified-bar a:visited,
 309 .last-modified-bar .last-modified-text-accent {
 310     color: var(--background-text-color);
 311 }
 312 
 313 .last-modified-bar.active,
 314 .last-modified-bar.active:active,
 315 .last-modified-bar.active:visited,
 316 .last-modified-bar.active .last-modified-text-accent {
 317     color: #fff;
 318 }
 319 
 320 .mw-ui-icon-mf-expand-gray:not(.mw-ui-icon-mf-expand-invert):before {
 321     background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eexpand%3C/title%3E%3Cg fill=%22%2354595d%22%3E%3Cpath d=%22M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/g%3E%3C/svg%3E");
 322 }
 323 
 324 #content {
 325     border-top: none;
 326 }
 327 
 328 .toggle-list__list {
 329     background-color: var(--wikitable-bg);
 330 }
 331 
 332 .toggle-list-item__anchor:visited,
 333 .toggle-list-item__anchor:active {
 334     color: var(--base-text-color);
 335 }
 336 
 337 .toggle-list-item:hover {
 338     background: var(--wikitable-bg-lighter);
 339 }
 340 
 341 .toggle-list-item__label {
 342     color: var(--base-text-color);
 343 }
 344 
 345 .mw-ui-icon-wikimedia-search-base20:before {
 346     background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esearch%3C/title%3E%3Cg fill='white'%3E%3Cpath fill-rule='evenodd' d='M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM13 8A5 5 0 113 8a5 5 0 0110 0z'/%3E%3C/g%3E%3C/svg%3E%0A");
 347 }
 348 
 349 .mw-ui-icon-wikimedia-menu-base20:before {
 350     background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Emenu%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z'/%3E%3C/g%3E%3C/svg%3E%0A");
 351 }
 352 
 353 .mw-ui-icon-wikimedia-bellOutline-base20:before {
 354     background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Ebell%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5v.69zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4zM8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2z'/%3E%3C/g%3E%3C/svg%3E%0A");
 355 }
 356 
 357 .mw-ui-icon-minerva-userAvatarOutline:before {
 358     background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Euser avatar%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M10 8c1.7 0 3.06-1.35 3.06-3S11.7 2 10 2 6.94 3.35 6.94 5 8.3 8 10 8zm0 2c-2.8 0-5.06-2.24-5.06-5S7.2 0 10 0s5.06 2.24 5.06 5-2.26 5-5.06 5zm-7 8h14v-1.33c0-1.75-2.31-3.56-7-3.56s-7 1.81-7 3.56V18zm7-6.89c6.66 0 9 3.33 9 5.56V20H1v-3.33c0-2.23 2.34-5.56 9-5.56z'/%3E%3C/g%3E%3C/svg%3E%0A");
 359 }
 360 
 361 @media all and (min-width: 1000px) {
 362     .mw-ui-icon-with-label-desktop,
 363     .mw-ui-icon-with-label-desktop:hover,
 364     .mw-ui-icon-with-label-desktop:focus,
 365     .mw-ui-icon-with-label-desktop:active,
 366     .mw-ui-icon-with-label-desktop:visited {
 367           color: var(--base-text-color) !important;
 368     }
 369 
 370 }
 371 
 372 .header-action .mw-ui-icon-mf-close-base20:before {
 373     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eclose%3C/title%3E%3Cg fill='white'%3E%3Cpath d='M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z'/%3E%3Cpath d='M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z'/%3E%3C/g%3E%3C/svg%3E");
 374 }
 375 
 376 #mw-mf-page-left {
 377     background-color: var(--body-background-color);
 378 }
 379 
 380 #mw-mf-page-left .secondary-action {
 381     border-left-color: var(--body-mid);
 382 }
 383 
 384 #mw-mf-page-left ul li {
 385     background-color: var(--body-main);
 386     border-color: var(--body-mid);
 387 }
 388 
 389 #mw-mf-page-left ul li a {
 390     color: var(--base-text-color);
 391 }
 392 
 393 #mw-mf-page-left ul li a:hover {
 394     box-shadow: inset 4px 0 0 0 var(--link-color);
 395 }
 396 
 397 #mw-mf-page-left ul.hlist li a {
 398     color: var(--background-link-color);
 399 }
 400 
 401 #mw-mf-page-left ul.hlist li a span {
 402     font-size: 0.8125rem;
 403 }
 404 
 405 .notifications-overlay.navigation-drawer {
 406     box-shadow: -1px 0 8px 0 rgba(0, 0, 0, 0.35);
 407 }
 408 
 409 .notifications-overlay .mw-echo-ui-actionMenuPopupWidget-menu {
 410     border: none;
 411 }
 412 
 413 .mw-ui-anchor.mw-ui-progressive,
 414 .mw-ui-anchor.mw-ui-progressive:active,
 415 .mw-ui-anchor.mw-ui-progressive:hover {
 416     color: var(--link-color);
 417 }
 418 
 419 .minerva-talk-full-page-button {
 420     background-color: var(--body-main);
 421     border-color: var(--body-dark);
 422     color: var(--link-color);
 423 }
 424 
 425 .minerva-talk-content-explained {
 426     border-color: var(--sidebar);
 427     color: var(--base-text-color);
 428 }
 429 
 430 .talk-overlay .comment .wikitext-editor {
 431     border-color: var(--body-border);
 432 }
 433 
 434 .client-js .skin-minerva--talk-simplified .section-heading {
 435     border-color: var(--sidebar);
 436 }
 437 
 438 .mw-notification a,
 439 .toast a {
 440     color: var(--link-color);
 441 }
 442 
 443 .drawer {
 444     background-color: var(--body-light);
 445 }
 446 
 447 .drawer.references-drawer {
 448     background-color: var(--body-light);
 449     color: var(--text-color);
 450 }
 451 
 452 .drawer.references-drawer a {
 453     color: var(--link-color);
 454 }
 455 
 456 .drawer.references-drawer .references-drawer__title {
 457     color: var(--text-color);
 458 }
 459 
 460 .drawer.references-drawer .mw-ui-icon::before {
 461     filter: brightness(0);
 462 }
 463 
 464 .cta-holder {
 465     background: var(--body-light);
 466 }
 467 
 468 .cta-holder .desc {
 469     color: var(--byline-color);
 470 }
 471 
 472 .mw-tag-marker {
 473     border-color: var(--body-border);
 474 }
 475 
 476 .oo-ui-toolGroup {
 477     background: var(--body-background-color);
 478 }
 479 
 480 .load-fail-msg {
 481     color: var(--text-color);
 482 }
 483 
 484 .load-fail-msg-link a {
 485     color: var(--link-color);
 486 }
 487 
 488 .image-details {
 489     background-color: var(--body-light);
 490     border-color: transparent;
 491 }
 492 
 493 .mw-recentchanges-toplinks th {
 494     font-size: 90%;
 495 }
 496 
 497 .mw-changeslist-legend {
 498     margin-left: 0;
 499 }
 500 
 501 @media all and (min-width: 720px) {
 502     .ns-special .pre-content {
 503           background-color: transparent;
 504     }
 505 
 506     .ns-special .mw-body {
 507           background: var(--body-main);
 508     }
 509 
 510     .ns-special .mw-body form {
 511           background: transparent;
 512     }
 513 
 514 }
 515 
 516 form.mw-mf-settings .oo-ui-fieldLayout,
 517 form.mw-mf-settings .oo-ui-fieldLayout:first-child {
 518     border-color: var(--body-mid);
 519 }
 520 
 521 .ns-special .content-header {
 522     border-bottom-color: var(--body-dark);
 523 }
 524 
 525 .action-history .mw-history-compareselectedversions {
 526     background-color: var(--body-main);
 527 }
 528 
 529 .action-history #pagehistory li:not(.selected) {
 530     border-bottom-color: var(--sidebar);
 531 }
 532 
 533 ul.mw-contributions-list li,
 534 ul.special li {
 535     border-color: var(--sidebar);
 536 }
 537 
 538 .page-list li > a:not(.mw-ui-icon-element),
 539 .topic-title-list li > a:not(.mw-ui-icon-element),
 540 .site-link-list li > a:not(.mw-ui-icon-element) {
 541     color: var(--byline-color);
 542 }
 543 
 544 .page-list.side-list .list-thumb,
 545 .topic-title-list.side-list .list-thumb,
 546 .site-link-list.side-list .list-thumb {
 547     color: var(--text-color);
 548 }
 549 
 550 .mw-mf-user {
 551     color: var(--text-color);
 552 }
 553 
 554 .diff-editfont-monospace {
 555     font-family: monospace,monospace;
 556 }
 557 
 558 :root {
 559     --diff-deletedline-background: #fbc0ba;
 560 }
 561 
 562 .minoredit {
 563     background: var(--body-mid);
 564 }
 565 
 566 #mw-mf-diffview .mw-mf-diff-date {
 567     color: var(--byline-color);
 568 }
 569 
 570 #mw-mf-diffview .mw-diff-inline-deleted del,
 571 #mw-mf-diffview .mw-diff-inline-changed del {
 572     background: var(--diff-deletedline-background);
 573     color: var(--diff-deletedline-color);
 574     border-radius: 0.33em;
 575 }
 576 
 577 #mw-mf-diffview .mw-diff-inline-added ins,
 578 #mw-mf-diffview .mw-diff-inline-changed ins {
 579     background: var(--diff-addedline-background);
 580     color: var(--diff-addedline-color);
 581     border-radius: 0.33em;
 582 }
 583 
 584 #mw-mf-diffview .mw-diff-inline-moved {
 585     background: var(--diff-context-background);
 586 }
 587 
 588 #mw-mf-diffview #mw-mf-userinfo {
 589     background: var(--body-light);
 590     border-top-color: var(--body-border);
 591 }
 592 
 593 #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count {
 594     color: var(--text-color);
 595 }
 596 
 597 #mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div {
 598     color: var(--base-text-color);
 599 }
 600 
 601 .content table.relative-location {
 602     display: table;
 603 }
 604 
 605 .floornumber-us {
 606     display: none;
 607 }
 608 
 609 div.hatnote {
 610     padding: 5px 7px;
 611     color: var(--text-color);
 612     font-size: 0.8125rem;
 613     background-color: var(--body-mid);
 614     margin: 0 0 0.5em 0;
 615     overflow: hidden;
 616 }
 617 
 618 .tbz-check {
 619     display: none;
 620 }
 621 
 622 @media screen and (max-width: 719px) {
 623     .pollquestion {
 624           width: auto;
 625     }
 626 
 627     .transcript {
 628           width: auto;
 629           margin: 20px auto;
 630     }
 631 
 632     .musicplayer {
 633           clear: both !important;
 634           float: none !important;
 635           width: 100%;
 636           max-width: 100%;
 637           text-align: center;
 638           margin-left: 0;
 639     }
 640 
 641 }
 642 
 643 .infobox {
 644     font-size: 85%;
 645     background-color: var(--body-light);
 646     border: 1px solid var(--body-border);
 647     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
 648     table-layout: fixed;
 649 }
 650 
 651 .content .infobox {
 652     display: table;
 653 }
 654 
 655 .content .infobox caption {
 656     display: table-caption;
 657 }
 658 
 659 .infobox .infobox-header {
 660     color: var(--infobox-text-color);
 661     font-size: 1.15em;
 662     background: var(--body-dark);
 663     padding: 0.5em 0;
 664     text-align: center;
 665 }
 666 
 667 .infobox .infobox-subheader {
 668     background: var(--body-dark);
 669     line-height: 2em;
 670     text-align: center;
 671 }
 672 
 673 .infobox .infobox-subheader a {
 674     color: var(--infobox-text-color);
 675 }
 676 
 677 .infobox th:not(.infobox-nested):not(.infobox-subheader):not(.infobox-header) {
 678     text-align: right;
 679     vertical-align: top;
 680     border-right: 0.175em solid var(--body-dark);
 681     padding: 0.2em 0.5em;
 682 }
 683 
 684 .infobox caption.infobox-caption {
 685     text-align: center;
 686 }
 687 
 688 .infobox td {
 689     padding: 0.25em 0.5em;
 690     line-height: 1.6em;
 691     padding-bottom: 0.6em;
 692 }
 693 
 694 .infobox td.infobox-nested {
 695     padding: 0.25em 0;
 696     line-height: 1em;
 697 }
 698 
 699 .infobox .infobox-padding {
 700     height: 0.5em;
 701     padding: 0;
 702     border: 0;
 703 }
 704 
 705 .infobox .infobox-image {
 706     text-align: center;
 707 }
 708 
 709 .infobox .infobox-image.inventory-image {
 710     height: 32px;
 711 }
 712 
 713 .infobox .infobox-nested {
 714     text-align: center;
 715 }
 716 
 717 .infobox .infobox-nested + .infobox-nested {
 718     border-left: 0.175em solid var(--body-dark);
 719 }
 720 
 721 .infobox .infobox-full-width-content {
 722     max-width: 300px;
 723     text-align: center;
 724     overflow-x: hidden;
 725     padding: 0;
 726 }
 727 
 728 .skill-info a[href$="?action=edit"] + a[href$="?action=edit"] {
 729     display: none;
 730 }
 731 
 732 .infobox-bonuses {
 733     float: none;
 734     table-layout: fixed;
 735     font-size: 100%;
 736 }
 737 
 738 table.infobox-switch.infobox-bonuses {
 739     display: block !important;
 740 }
 741 
 742 .content .infobox-bonuses {
 743     display: block;
 744 }
 745 
 746 .infobox-bonuses tbody {
 747     border: 1px solid var(--body-border);
 748 }
 749 
 750 .infobox-bonuses .infobox-bonuses-image {
 751     text-align: center;
 752     vertical-align: middle;
 753     border: 1px solid var(--body-border);
 754 }
 755 
 756 .infobox-bonuses .infobox-bonuses-image-caption {
 757     font-size: 0.85em;
 758 }
 759 
 760 .infobox-bonuses .infobox-subheader {
 761     background: var(--body-dark);
 762     color: var(--infobox-text-color);
 763     line-height: 2em;
 764     border-top: none;
 765     border-bottom: none;
 766 }
 767 
 768 .infobox-bonuses .infobox-subheader a {
 769     color: var(--infobox-text-color);
 770 }
 771 
 772 .infobox-bonuses .infobox-subheader + .infobox-subheader {
 773     border-left: 0.175em solid var(--body-light);
 774 }
 775 
 776 .infobox-bonuses a {
 777     font-weight: bold;
 778 }
 779 
 780 .poh-room {
 781     background-color: var(--infobox-room-poh-color);
 782     margin: auto;
 783     width: 100px;
 784 }
 785 
 786 .poh-room img {
 787     display: block;
 788 }
 789 
 790 .poh-room-row {
 791     display: flex;
 792 }
 793 
 794 .poh-room-text {
 795     margin: auto;
 796     width: 92px;
 797 }
 798 
 799 .infobox-buttons {
 800     margin-top: 0.5em;
 801     text-align: center;
 802 }
 803 
 804 .infobox-bottom-links {
 805     display: none;
 806 }
 807 
 808 .advanced-data {
 809     display: none;
 810 }
 811 
 812 @media screen and (min-width: 720px) {
 813     .content table.infobox {
 814           float: right;
 815           margin-top: 0.5em;
 816           margin-left: 1em;
 817           width: 300px !important;
 818     }
 819 
 820     .content table.infobox.skill-info {
 821           float: none;
 822           margin: 0 0 1em 0;
 823     }
 824 
 825     .content table.infobox.infobox-bonuses {
 826           display: table;
 827           float: none;
 828           margin: 0;
 829           width: 100% !important;
 830           max-width: 600px;
 831     }
 832 
 833 }
 834 
 835 .multi-infobox {
 836     margin-top: 0.5em;
 837     margin-bottom: 2.5em;
 838 }
 839 
 840 .multi-infobox .tabber {
 841     margin: 0;
 842 }
 843 
 844 .multi-infobox .tabber .tabbernav {
 845     text-align: center;
 846     margin-left: 0;
 847 }
 848 
 849 .mw-body .multi-infobox .tabber .tabbertab {
 850     padding: 5px;
 851 }
 852 
 853 .multi-infobox table.infobox {
 854     margin: 0;
 855 }
 856 
 857 .multi-infobox .infobox-buttons {
 858     margin-top: 0;
 859 }
 860 
 861 @media screen and (min-width: 720px) {
 862     .multi-infobox {
 863           float: right;
 864           margin-left: 1em;
 865           width: 300px;
 866     }
 867 
 868 }
 869 
 870 @media screen and (max-width: 720px) {
 871     .inventorytable.storage-left,
 872     .lootingbagtable.storage-left,
 873     .runepouchtable.storage-left {
 874           margin-right: auto;
 875           clear: none;
 876           float: none;
 877     }
 878 
 879     .inventorytable.storage-right,
 880     .lootingbagtable.storage-right,
 881     .runepouchtable.storage-right {
 882           margin-left: auto;
 883           clear: none;
 884           float: none;
 885     }
 886 
 887     .runepouchtable.storage-center {
 888           margin-left: 23px;
 889     }
 890 
 891     .runepouchtable.storage-right {
 892           margin-left: 23px;
 893     }
 894 
 895     .equipment-div.equipment-left,
 896     .equipment-div-buttons.equipment-left {
 897           margin-right: auto;
 898           clear: none;
 899           float: none;
 900           width: 100%;
 901     }
 902 
 903     .equipment-div.equipment-center,
 904     .equipment-div-buttons.equipment-center {
 905           width: 100%;
 906     }
 907 
 908     .equipment-div.equipment-right,
 909     .equipment-div-buttons.equipment-right {
 910           margin-left: auto;
 911           clear: none;
 912           float: none;
 913           width: 100%;
 914     }
 915 
 916 }
 917 
 918 .tile {
 919     padding: 1.5em 2em 1em;
 920 }
 921 
 922 .tile h2 {
 923     font-weight: 600;
 924     border: none;
 925     margin-top: 0.4em;
 926 }
 927 
 928 .tile .byline + h2 {
 929     margin-top: -0.5em;
 930 }
 931 
 932 .tile-top {
 933     padding: 1.3rem 1.5rem 2rem;
 934 }
 935 
 936 .tile-bottom {
 937     padding: 1rem 1.5rem 2rem;
 938 }
 939 
 940 .tile-bottom.read-more {
 941     padding: 0;
 942 }
 943 
 944 .tile-bottom.read-more a {
 945     padding: 1em 1.75em;
 946 }
 947 
 948 .tile.oswf-day {
 949     float: none !important;
 950     padding: 0.5em 2em;
 951 }
 952 
 953 .tile.oswf-day h2 {
 954     margin-right: auto;
 955     margin-left: auto;
 956     margin-top: -0.5em;
 957 }
 958 
 959 .oswf-tile {
 960     margin-bottom: 1em;
 961 }
 962 
 963 .oswf-tile h2 {
 964     clear: none !important;
 965     margin-top: 0;
 966     padding-top: f2em !important;
 967 }
 968 
 969 .oswf-tile .oswf-img {
 970     display: block;
 971     max-width: 75px;
 972     float: right;
 973 }
 974 
 975 .oswf-tile .oswf-img img {
 976     max-width: 100%;
 977     height: auto !important;
 978 }
 979 
 980 :root {
 981     --mobile-navbox-wide-bg-color: #dcd3bf;
 982     --mobile-navbox-linear-gradient: linear-gradient(to right, rgba(226, 219, 200, 0), #e2dbc8 95%, #e2dbc8);
 983 }
 984 
 985 .navbox {
 986     border: 1px solid var(--body-border);
 987     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
 988     font-size: 0.85em;
 989 }
 990 
 991 .content .navbox ul {
 992     padding-left: 0;
 993 }
 994 
 995 .content .navbox ul li {
 996     margin-bottom: 0;
 997 }
 998 
 999 @media screen and (max-width: 719px) {
1000     .navbox td,
1001     .navbox th,
1002     .navbox tr,
1003     .navbox tbody,
1004     .navbox .navbox-subgroup {
1005           display: block;
1006     }
1007 
1008 }
1009 
1010 @media screen and (min-width: 720px) {
1011     .content table.navbox,
1012     .content .navbox table {
1013           width: 100% !important;
1014     }
1015 
1016 }
1017 
1018 .navbox .navbox-subgroup {
1019     margin: 0;
1020 }
1021 
1022 .navbox .navbar {
1023     display: none;
1024 }
1025 
1026 .navbox .plink-template,
1027 .navbox img {
1028     display: none;
1029 }
1030 
1031 .navbox-title {
1032     color: var(--text-color);
1033     background-color: var(--body-dark);
1034     font-size: 140%;
1035     font-weight: bold;
1036     text-align: center;
1037     padding: 0.25em 0;
1038 }
1039 
1040 @media screen and (min-width: 720px) {
1041     .navbox-title {
1042           border-bottom: 1px solid var(--body-border);
1043     }
1044 
1045 }
1046 
1047 .navbox-group-title {
1048     background-color: var(--body-mid);
1049     font-weight: bold;
1050     padding: 0.2em 0.85em;
1051 }
1052 
1053 @media screen and (max-width: 719px) {
1054     .navbox-group-title {
1055           overflow: hidden;
1056           white-space: nowrap;
1057           text-overflow: ellipsis;
1058     }
1059 
1060 }
1061 
1062 @media screen and (min-width: 720px) {
1063     .navbox-group-title {
1064           border: 1px solid var(--body-border);
1065           border-width: 0 1px 1px 0;
1066           width: 12vw;
1067     }
1068 
1069 }
1070 
1071 .navbox-group-title-hidden {
1072     display: none;
1073 }
1074 
1075 .navbox-list {
1076     padding: 0;
1077     position: relative;
1078 }
1079 
1080 @media screen and (min-width: 720px) {
1081     .navbox-list {
1082           border-bottom: 1px solid var(--body-border);
1083     }
1084 
1085 }
1086 
1087 @media screen and (max-width: 719px) {
1088     .navbox-list ul {
1089           white-space: nowrap;
1090           overflow-x: auto;
1091           overflow-y: hidden;
1092           -webkit-overflow-scrolling: touch;
1093     }
1094 
1095 }
1096 
1097 @media screen and (min-width: 720px) {
1098     .navbox-list ul {
1099           padding: 0.2em 0.85em 0.5em !important;
1100     }
1101 
1102 }
1103 
1104 .navbox-list li {
1105     display: inline-flex;
1106     align-items: center;
1107     height: 3.5em;
1108     margin: 0 0 0 0.85em;
1109 }
1110 
1111 @media screen and (min-width: 720px) {
1112     .navbox-list li {
1113           height: 2.1em;
1114     }
1115 
1116     .navbox-list li:first-child {
1117           margin-left: 0;
1118     }
1119 
1120 }
1121 
1122 .navbox-list li + li {
1123     margin-left: 0.5em;
1124 }
1125 
1126 .navbox-list li + li > a::before {
1127     content: '•';
1128     display: inline-block;
1129     white-space: pre-wrap;
1130     position: relative;
1131     left: -0.425em;
1132     color: var(--text-color);
1133     pointer-events: none;
1134 }
1135 
1136 .navbox-list li + li > a + a::before {
1137     display: none;
1138 }
1139 
1140 .navbox-list li:last-child {
1141     margin-right: 2em;
1142 }
1143 
1144 .navbox-list:not([style*="center"])::after {
1145     content: '';
1146     display: block;
1147     position: absolute;
1148     background-image: var(--mobile-navbox-linear-gradient);
1149     height: 100%;
1150     width: 2.5em;
1151     top: 0;
1152     right: 0;
1153     pointer-events: none;
1154 }
1155 
1156 @media screen and (min-width: 720px) {
1157     .navbox-list:not([style*="center"])::after {
1158           display: none;
1159     }
1160 
1161 }
1162 
1163 .navbox-list.navbox-parent {
1164     border-bottom: 0;
1165     padding: 0;
1166 }
1167 
1168 .navbox-list.navbox-parent::after {
1169     display: none;
1170 }
1171 
1172 .navbox-group .navbox-group .navbox-group-title {
1173     background-color: var(--body-light);
1174     padding: 0 0.85em 0 1.7em;
1175 }
1176 
1177 @media screen and (min-width: 720px) {
1178     .navbox-group .navbox-group .navbox-group-title {
1179           padding-left: 0.85em;
1180     }
1181 
1182 }
1183 
1184 .navbox-group .navbox-group .navbox-list ul {
1185     padding-left: 1.7em;
1186 }
1187 
1188 .navbox-group .navbox-group .navbox-list li {
1189     margin-bottom: 0;
1190 }
1191 
1192 .navbox-group .navbox-group .navbox-list li:first-child {
1193     margin-left: 0;
1194 }
1195 
1196 .navbox-group .navbox-group.navbox-group-split .navbox-list ul {
1197     padding-left: 0.85em;
1198 }
1199 
1200 .navbox-group .navbox-group .navbox-group:first-child .navbox-group-title {
1201     padding-top: 0.5em;
1202 }
1203 
1204 @media screen and (min-width: 720px) {
1205     .navbox-group .navbox-group .navbox-group:first-child .navbox-group-title {
1206           padding-top: 0;
1207     }
1208 
1209 }
1210 
1211 .navbox-group .navbox-group .navbox-group .navbox-group-title {
1212     background-color: transparent;
1213     padding-left: 2.55em;
1214 }
1215 
1216 @media screen and (min-width: 720px) {
1217     .navbox-group .navbox-group .navbox-group .navbox-group-title {
1218           background-color: var(--mobile-navbox-wide-bg-color);
1219           padding-left: 0.85em;
1220     }
1221 
1222 }
1223 
1224 .navbox-group .navbox-group .navbox-group .navbox-list ul {
1225     padding-left: 2.55em;
1226 }
1227 
1228 .navbox-group .navbox-group .navbox-group.navbox-group-split .navbox-list ul {
1229     padding-left: 1.7em;
1230 }
1231 
1232 @media screen and (max-width: 720px) {
1233     .questdetails-header {
1234           text-align: center;
1235           display: block;
1236           width: auto;
1237           background-color: rgba(0, 0, 0, 0.1);
1238     }
1239 
1240     .questdetails-info {
1241           display: block;
1242           margin-top: 10px;
1243           margin-bottom: 10px;
1244     }
1245 
1246     .questdetails tr,
1247     .questdetails tbody {
1248           display: block;
1249     }
1250 
1251     .questdetails {
1252           padding: 0;
1253     }
1254 
1255     .questdetails ul {
1256           padding-left: 2px;
1257           margin-left: 2px;
1258     }
1259 
1260     .questdetails-info {
1261           word-wrap: normal;
1262     }
1263 
1264 }
1265 
1266 @keyframes slide-up {
1267     from {
1268           opacity: 0;
1269           transform: translateY(1rem);
1270     }
1271 
1272     to {
1273           opacity: 1;
1274           transform: translateY(0);
1275     }
1276 
1277 }
1278 
1279 @media only screen and (max-width: 65.999rem) {
1280     .mainpage-header h1 {
1281           text-align: center;
1282     }
1283 
1284 }
1285 
1286 .mainpage-body {
1287     display: unset;
1288 }
1289 
1290 .mainpage-body ul {
1291     margin: 0 0.25em;
1292     list-style-type: disc;
1293 }
1294 
1295 .mainpage-body .tile-row {
1296     width: inherit;
1297 }
1298 
1299 .mainpage-left {
1300     margin-right: 0;
1301 }
1302 
1303 .mainpage-left .tile {
1304     padding: 2.5em 1.75em 2em;
1305 }
1306 
1307 .mainpage-left .tile h2 {
1308     padding: 0;
1309     margin: 0.65em 0.5em;
1310 }
1311 
1312 .mainpage-left .tile-halves h2 {
1313     padding: 0;
1314     margin: 0.65em 0.5em;
1315 }
1316 
1317 .mainpage-recent-updates {
1318     display: flex;
1319     flex-flow: row wrap;
1320     justify-content: center;
1321     padding: 1.5em 1em 2.5em;
1322     white-space: nowrap;
1323     -webkit-overflow-scrolling: touch;
1324     -webkit-scroll-snap-type: mandatory;
1325     scroll-snap-type: mandatory;
1326 }
1327 
1328 .mainpage-recent-updates::before {
1329     content: 'Recent updates';
1330     display: block;
1331     position: -webkit-sticky;
1332     position: sticky;
1333     left: 1.5em;
1334     color: var(--byline-color);
1335     font-weight: bold;
1336     text-transform: uppercase;
1337     letter-spacing: 0.025em;
1338 }
1339 
1340 .mainpage-recent-updates .tile-halves {
1341     display: inline-block;
1342     margin: 1em 0.75em 0 0;
1343     width: 100%;
1344     white-space: initial;
1345     flex: unset;
1346     scroll-snap-align: center;
1347 }
1348 
1349 .mainpage-recent-updates .tile-halves:nth-child(1) {
1350     animation: 0.9s 0.2s both slide-up;
1351 }
1352 
1353 .mainpage-recent-updates .tile-halves:nth-child(2) {
1354     animation: 0.9s 0.4s both slide-up;
1355 }
1356 
1357 .mainpage-recent-updates .tile-halves:nth-child(3) {
1358     animation: 0.9s 0.6s both slide-up;
1359     margin-right: 1em;
1360 }
1361 
1362 .mainpage-recent-updates .tile-top {
1363     height: 9em;
1364     overflow: hidden;
1365 }
1366 
1367 .mainpage-recent-updates .tile-bottom {
1368     padding-bottom: 0.5rem;
1369 }
1370 
1371 .mainpage-recent-updates .byline {
1372     margin: 0;
1373 }
1374 
1375 .mainpage-recent-updates .byline + h2 {
1376     margin: 0.025em 0 0;
1377     padding: 0;
1378 }
1379 
1380 .mainpage-recent-updates a + a:before {
1381     content: "· ";
1382     display: inline-block;
1383     white-space: pre-wrap;
1384     pointer-events: none;
1385 }
1386 
1387 @media only screen and (min-width: 58em) {
1388     .mainpage-recent-updates {
1389           overflow-x: initial;
1390     }
1391 
1392     .mainpage-recent-updates::before {
1393           width: 100%;
1394     }
1395 
1396     .mainpage-recent-updates .tile-halves {
1397           width: 85vw;
1398           max-width: 18em;
1399     }
1400 
1401     .mainpage-recent-updates .tile-halves:nth-child(3) {
1402           margin-right: 0;
1403     }
1404 
1405     .mainpage-recent-updates .tile-halves img {
1406           margin-top: unset;
1407     }
1408 
1409     .mainpage-recent-updates .tile-halves:nth-child(3) {
1410           margin-right: 0;
1411     }
1412 
1413 }
1414 
1415 @media only screen and (max-width: 65.999rem) {
1416     .mainpage-recent-updates .tile-halves:last-child {
1417           display: block;
1418     }
1419 
1420     .mainpage-recent-updates .tile-halves:nth-last-child(1),
1421     .mainpage-recent-updates .tile-halves:nth-last-child(3) {
1422           margin-right: 0;
1423     }
1424 
1425 }
1426 
1427 .mainpage-contents {
1428     background: var(--body-mid);
1429     padding: 55px 1em 2em 2.5em;
1430     display: flex;
1431     flex-wrap: nowrap;
1432     align-items: flex-start;
1433     overflow-x: auto;
1434     position: relative;
1435 }
1436 
1437 .mainpage-contents::before {
1438     content: 'Explore';
1439     margin: 1em;
1440     position: absolute;
1441     top: 0;
1442     color: inherit;
1443     font-weight: bold;
1444     text-transform: uppercase;
1445     letter-spacing: 0.025em;
1446 }
1447 
1448 .mainpage-contents .tile-halves {
1449     border: none;
1450     background: none;
1451     box-shadow: none;
1452     flex: 0 0 auto;
1453     width: 200px;
1454     margin-right: 10px;
1455 }
1456 
1457 .mainpage-contents .tile-halves:nth-child(3) {
1458     margin-right: 0.9rem;
1459 }
1460 
1461 .mainpage-contents .tile-top {
1462     padding: 0;
1463     height: initial;
1464 }
1465 
1466 .mainpage-contents .tile-bottom {
1467     border: none;
1468 }
1469 
1470 .mainpage-contents h2 {
1471     width: 100%;
1472 }
1473 
1474 .mainpage-skills .tile-top {
1475 }
1476 
1477 @media only screen and (min-width: 32em) {
1478     .mainpage-skills .tile-top ul {
1479           width: 100%;
1480           max-width: 50em;
1481           margin: auto;
1482     }
1483 
1484 }
1485 
1486 .mainpage-wikinews::before {
1487     content: 'From the wiki';
1488     margin-left: 0.75em;
1489     color: var(--byline-color);
1490     font-weight: bold;
1491     text-transform: uppercase;
1492     letter-spacing: 0.025em;
1493 }
1494 
1495 .mainpage-wikinews .news-date {
1496     font-weight: bold;
1497     margin-bottom: 0;
1498 }
1499 
1500 .mainpage-wikinews p {
1501     margin-left: 0.5em;
1502     margin-right: 0.5em;
1503 }
1504 
1505 .mainpage-discord .tile-top {
1506     padding: 1em 2em;
1507     height: 70px;
1508 }
1509 
1510 .mainpage-discord .tile-top .partner-icon img {
1511     float: left;
1512     margin: 0 1em 0 -1em;
1513 }
1514 
1515 .mainpage-discord .tile-top .server-name {
1516     margin: 0;
1517 }
1518 
1519 .mainpage-discord .tile-top .server-tagline {
1520     margin: 0;
1521 }
1522 
1523 .mainpage-twitter {
1524     margin-bottom: 0;
1525 }
1526 
1527 .mainpage-twitter .tile-top {
1528     padding: 1em 2em;
1529     height: 70px;
1530 }
1531 
1532 .mainpage-twitter .tile-top .twitter-logo {
1533     float: left;
1534     margin: 0 1em 0 -1em;
1535 }
1536 
1537 .mainpage-twitter .tile-top .twitter-name {
1538     margin: 0;
1539 }
1540 
1541 .mainpage-twitter .tile-top .twitter-tagline {
1542     margin: 0;
1543 }
1544 
1545 .ns-120 section ul,
1546 .transcript ul,
1547 .ns-120 section ol,
1548 .transcript ol {
1549     padding: 0;
1550 }
1551 
1552 .ns-120 section ul,
1553 .transcript ul {
1554     margin: 5px 0 0 0;
1555 }
1556 
1557 .ns-120 section ul ul,
1558 .transcript ul ul,
1559 .ns-120 section ul ol,
1560 .transcript ul ol {
1561     margin: 5px 0 0 15px;
1562 }
1563 
1564 .ns-120 section ul,
1565 .transcript ul,
1566 .ns-120 section ul ul,
1567 .transcript ul ul,
1568 .ns-120 section ul ol,
1569 .transcript ul ol {
1570     list-style: none !important;
1571     border-left: 1px dashed var(--transcript-border-color);
1572 }
1573 
1574 .ns-120 section ul:hover,
1575 .transcript ul:hover,
1576 .ns-120 section ul ul:hover,
1577 .transcript ul ul:hover,
1578 .ns-120 section ul ol:hover,
1579 .transcript ul ol:hover {
1580     border-color: var(--transcript-border-hover-color);
1581 }
1582 
1583 .ns-120 section ul li,
1584 .transcript ul li,
1585 .ns-120 section ul ul li,
1586 .transcript ul ul li,
1587 .ns-120 section ul ol li,
1588 .transcript ul ol li {
1589     flex-direction: column;
1590     padding-left: 10px;
1591     margin: 14px 0;
1592 }
1593 
1594 .ns-120 section ul li:last-of-type,
1595 .transcript ul li:last-of-type,
1596 .ns-120 section ul ul li:last-of-type,
1597 .transcript ul ul li:last-of-type,
1598 .ns-120 section ul ol li:last-of-type,
1599 .transcript ul ol li:last-of-type {
1600     margin-bottom: 0;
1601 }
1602 
1603 .smallChart .highcharts-range-selector {
1604     display: none;
1605 }
1606 
1607 .smallChart .highcharts-button title + rect {
1608     display: none;
1609 }
1610 
1611 #GEpopupchart {
1612     overflow-x: auto !important;
1613 }
1614 
1615 .wikitable {
1616     background: none;
1617     box-shadow: none;
1618 }
1619 
1620 .wikitable tbody {
1621     background: var(--body-light);
1622 }
1623 
1624 .toc {
1625     background-color: var(--body-light);
1626     border-color: var(--body-border);
1627 }
1628 
1629 #filetoc li {
1630     display: inline;
1631     padding-right: 2em;
1632 }
1633 
1634 .mw-dismissable-notice-body {
1635     margin: 0;
1636 }
1637 
1638 .mw-dismissable-notice-body .mw-dismissable-notice-close-parent {
1639     border-radius: 0 !important;
1640     font-size: 0.75em;
1641 }
1642 
1643 :root {
1644     --thumb-image-background: var(--body-light);
1645     --thumb-caption-background: var(--body-mid);
1646     --body-background-image: url(https://runescape.wiki/images/RuneScape_Wiki_background.jpg);
1647     --body-background-color: #f6f6f6;
1648 }
1649 
1650 
1651 .content .thumbimage {
1652     background-color: var(--thumb-image-background);
1653     border: 1px solid transparent;
1654     border-bottom: none;
1655 }
1656 
1657 .content .thumbcaption {
1658     margin: 0;
1659     padding: 4px 6px !important;
1660     color: inherit;
1661     background: var(--thumb-caption-background);
1662 }
1663 
1664 .content table.messagebox {
1665     margin: 0.5em auto;
1666 }
1667 
1668 .content table a > img {
1669     max-width: inherit !important;
1670     height: inherit !important;
1671 }
1672 
1673 .content .infobox a > img {
1674     max-width: 100% !important;
1675     height: auto !important;
1676 }
1677 
1678 .content .infobox-bonuses a > img {
1679     max-width: inherit !important;
1680     height: inherit !important;
1681 }
1682 
1683 /* Added stuff from RL output */
1684 
1685 .perk-link {
1686     background: #09222F;
1687     border-radius: 111px;
1688     width: 35px;
1689     height: 35px;
1690     line-height: 30px;
1691     display: inline-table;
1692     margin-right: 5px;
1693     text-align: center;
1694 }
1695 
1696 .perk-link.perk-link-nobg {
1697     background: transparent;
1698 }
1699 
1700 .perk-link > a {
1701     vertical-align: middle;
1702 }
1703 
1704 .perk-link .perk-link-rank {
1705     position: relative;
1706     top: -26px;
1707     left: 5px;
1708     margin-bottom: -28px;
1709     line-height: 0;
1710     float: left;
1711 }
1712 
1713 .perk-background {
1714     background: #09222F;
1715 }
1716 
1717 .navbox .perk-link img {
1718     max-height: initial;
1719 }
1720 
1721 .tile {
1722     background: #ffffff;
1723     border: 1px solid #e4eaee;
1724     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
1725     padding: 1.5em 2em 1em;
1726 }
1727 
1728 .tile h2 {
1729     font-weight: 600;
1730     border: none;
1731     margin-top: 0.4em;
1732 }
1733 
1734 .tile .byline + h2 {
1735     margin-top: -0.5em;
1736 }
1737 
1738 .byline {
1739     font-size: 0.9em;
1740     color: #949eaa;
1741 }
1742 
1743 .byline a {
1744     color: #949eaa;
1745 }
1746 
1747 .tile-halves {
1748     border: 1px solid #e4eaee;
1749     background: #ffffff;
1750     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
1751 }
1752 
1753 .tile-halves .byline + h2 {
1754     margin-top: -0.5em;
1755 }
1756 
1757 .tile-top {
1758     padding: 1.3rem 1.5rem 2rem;
1759 }
1760 
1761 .tile-top.tile-image {
1762     background-color: #949eaa;
1763     padding: 0;
1764 }
1765 
1766 .tile-bottom {
1767     background: #ffffff;
1768     border-top: 1px solid #e4eaee;
1769     padding: 1rem 1.5rem 2rem;
1770 }
1771 
1772 .tile-bottom.read-more {
1773     background: #f9fafa;
1774     padding: 0;
1775     transition: 0.3s ease-out;
1776 }
1777 
1778 .tile-bottom.read-more a {
1779     display: block;
1780     color: #949eaa;
1781     font-weight: bold;
1782     text-align: right;
1783     padding: 1em 1.75em;
1784     text-decoration: none;
1785 }
1786 
1787 .tile-bottom.read-more:hover {
1788     background: #f2f4f4;
1789 }
1790 
1791 .tile-bottom.read-more .arrow {
1792     filter: invert(43%) sepia(50%) hue-rotate(175deg);
1793     margin-left: 0.4em;
1794     transition: 0.3s ease-out;
1795 }
1796 
1797 .tile.oswf-day {
1798     float: none !important;
1799     padding: 0.5em 2em;
1800 }
1801 
1802 .tile.oswf-day h2 {
1803     margin-right: auto;
1804     margin-left: auto;
1805     margin-top: -0.5em;
1806 }
1807 
1808 .oswf-tile {
1809     margin-bottom: 1em;
1810 }
1811 
1812 .oswf-tile h2 {
1813     clear: none !important;
1814     margin-top: 0;
1815     padding-top: 0.2em !important;
1816 }
1817 
1818 .oswf-tile .oswf-img {
1819     display: block;
1820     max-width: 75px;
1821     float: right;
1822 }
1823 
1824 .oswf-tile .oswf-img img {
1825     max-width: 100%;
1826     height: auto !important;
1827 }
1828 
1829 .mainpage-body {
1830     color: #4c4c4c;
1831 }
1832 
1833 .mainpage-body h2,
1834 .mainpage-body h2 a {
1835     color: #444e5a;
1836 }
1837 
1838 .mainpage-body ul {
1839     margin: 0 0.25em;
1840     list-style-type: disc;
1841 }
1842 
1843 .mainpage-left > * {
1844     border-bottom: none;
1845 }
1846 
1847 .mainpage-left .tile {
1848     padding: 2.5em 1.75em 2em;
1849     border-left-width: 0;
1850     border-right-width: 0;
1851 }
1852 
1853 .mainpage-left .tile h2 {
1854     padding: 0;
1855     margin: 0.65em 0.5em;
1856 }
1857 
1858 .mainpage-left .tile-halves {
1859     border-left-width: 0;
1860     border-right-width: 0;
1861 }
1862 
1863 .mainpage-left .tile-halves h2 {
1864     padding: 0;
1865     margin: 0.65em 0.5em;
1866 }
1867 
1868 .tile.big-tile {
1869     border: none;
1870     border-bottom: 1px solid #e4eaee;
1871 }
1872 
1873 .mainpage-recent-updates {
1874     border-bottom: 1px solid #e4eaee;
1875     padding: 1.5em 1em 2.5em;
1876     white-space: nowrap;
1877     overflow-x: scroll;
1878     -webkit-overflow-scrolling: touch;
1879     -webkit-scroll-snap-destination: 50% 50%;
1880     scroll-snap-destination: 50% 50%;
1881     -webkit-scroll-snap-type: mandatory;
1882     scroll-snap-type: mandatory;
1883 }
1884 
1885 .mainpage-recent-updates::before {
1886     content: 'Recent updates';
1887     display: block;
1888     position: -webkit-sticky;
1889     position: sticky;
1890     left: 1.5em;
1891     color: #949eaa;
1892     font-weight: bold;
1893     text-transform: uppercase;
1894     letter-spacing: 0.025em;
1895 }
1896 
1897 .mainpage-recent-updates .tile {
1898     width: 78%;
1899 }
1900 
1901 .mainpage-recent-updates .tile p,
1902 .mainpage-recent-updates .tile a {
1903     white-space: normal !important;
1904 }
1905 
1906 .mainpage-recent-updates .tile-halves {
1907     display: inline-block;
1908     margin: 1em 0.75em 0 0;
1909     width: 85vw;
1910     max-width: 18em;
1911     white-space: initial;
1912     -webkit-scroll-snap-coordinate: 50% 50%;
1913     scroll-snap-coordinate: 50% 50%;
1914     scroll-snap-align: center;
1915 }
1916 
1917 .mainpage-recent-updates .tile-halves:nth-child(1) {
1918     animation: 0.9s 0.2s both slide-up;
1919 }
1920 
1921 .mainpage-recent-updates .tile-halves:nth-child(2) {
1922     animation: 0.9s 0.4s both slide-up;
1923 }
1924 
1925 .mainpage-recent-updates .tile-halves:nth-child(3) {
1926     animation: 0.9s 0.6s both slide-up;
1927     margin-right: 1em;
1928 }
1929 
1930 .mainpage-recent-updates .tile-top {
1931     height: 9em;
1932     overflow: hidden;
1933 }
1934 
1935 .mainpage-recent-updates .tile-bottom {
1936     display: flex;
1937     padding-bottom: 0.5rem;
1938 }
1939 
1940 .mainpage-recent-updates .tile-bottom p:not(.byline) {
1941     color: #4c4c4c;
1942 }
1943 
1944 .mainpage-recent-updates .byline {
1945     margin: 0;
1946 }
1947 
1948 .mainpage-recent-updates .byline + h2 {
1949     margin: 0.025em 0 0;
1950     padding: 0;
1951 }
1952 
1953 @media only screen and (min-width: 58em) {
1954     .mainpage-recent-updates {
1955           display: flex;
1956           flex-flow: row wrap;
1957           justify-content: center;
1958           overflow-x: initial;
1959     }
1960 
1961     .mainpage-recent-updates::before {
1962           width: 100%;
1963     }
1964 
1965     .mainpage-recent-updates .tile-halves:nth-child(3) {
1966           margin-right: 0;
1967     }
1968 
1969 }
1970 
1971 .mainpage-contents {
1972     background: #5d6773;
1973     padding: 2.5em 1em 2em;
1974 }
1975 
1976 .mainpage-contents::before {
1977     content: 'Explore';
1978     margin-left: 1.5em;
1979     color: #949eaa;
1980     font-weight: bold;
1981     text-transform: uppercase;
1982     letter-spacing: 0.025em;
1983 }
1984 
1985 .mainpage-contents .tile-halves {
1986     border: none;
1987     background: none;
1988     box-shadow: none;
1989     margin: 0 1.5em;
1990 }
1991 
1992 .mainpage-contents .tile-halves:first-child {
1993     margin-top: 1.25em;
1994 }
1995 
1996 .mainpage-contents .tile-halves:first-child .tile-bottom {
1997     border-top: none;
1998 }
1999 
2000 .mainpage-contents .tile-halves:last-child {
2001     margin-bottom: 0;
2002 }
2003 
2004 .mainpage-contents .tile-halves:last-child .tile-top {
2005     border-bottom: none;
2006 }
2007 
2008 .mainpage-contents .tile-bottom {
2009     border-color: #828d9a;
2010     padding: 0.25em 0;
2011     background: none;
2012 }
2013 
2014 .mainpage-contents h2 {
2015     padding: 0 0 0.35em;
2016     width: 100%;
2017 }
2018 
2019 .mainpage-contents h2 a {
2020     color: #f9fafa;
2021     display: block;
2022 }
2023 
2024 .mainpage-skills .tile-top {
2025     overflow-x: scroll;
2026     -webkit-overflow-scrolling: touch;
2027 }
2028 
2029 .mainpage-skills .tile-top h2 {
2030     position: -webkit-sticky;
2031     position: sticky;
2032     left: 0.5em;
2033 }
2034 
2035 .mainpage-skills .tile-top ul {
2036     columns: 3;
2037     width: 32em;
2038     list-style: none;
2039     margin-left: 0.75em;
2040 }
2041 
2042 @media only screen and (min-width: 32em) {
2043     .mainpage-skills .tile-top ul {
2044           width: 100%;
2045           max-width: 50em;
2046           margin: auto;
2047     }
2048 
2049 }
2050 
2051 .mainpage-skills .tile-top li {
2052     display: flex;
2053     align-items: center;
2054     margin-bottom: 0.6em;
2055 }
2056 
2057 .mainpage-skills .tile-top li a:first-child {
2058     width: 25px;
2059     height: 25px;
2060     padding: 4px;
2061     border-radius: 3px;
2062 }
2063 
2064 .mainpage-skills .tile-top li a:last-child {
2065     flex: 1;
2066     color: #444e5a;
2067     font-weight: bold;
2068     padding-left: 0.5em;
2069 }
2070 
2071 .skill-agility a:first-child,
2072 .skill-melee a:first-child {
2073     background: #bc483d;
2074 }
2075 
2076 .skill-ranged a:first-child {
2077     background: #748d36;
2078 }
2079 
2080 .skill-magic a:first-child {
2081     background: #6274ab;
2082 }
2083 
2084 .skill-fishing a:first-child,
2085 .skill-fletching a:first-child {
2086     background: #3e8e9a;
2087 }
2088 
2089 .skill-cooking a:first-child,
2090 .skill-divination a:first-child,
2091 .skill-thieving a:first-child {
2092     background: #91689e;
2093 }
2094 
2095 .skill-farming a:first-child,
2096 .skill-woodcutting a:first-child {
2097     background: #59924f;
2098 }
2099 
2100 .skill-mining a:first-child,
2101 .skill-summoning a:first-child {
2102     background: #6385a8;
2103 }
2104 
2105 .skill-invention a:first-child,
2106 .skill-smithing a:first-child {
2107     background: #d2b244;
2108 }
2109 
2110 .skill-archaeology a:first-child {
2111     background: #a56831;
2112 }
2113 
2114 .mainpage-wikinews::before {
2115     content: 'From the wiki';
2116     margin-left: 0.75em;
2117     color: #949eaa;
2118     font-weight: bold;
2119     text-transform: uppercase;
2120     letter-spacing: 0.025em;
2121 }
2122 
2123 .mainpage-wikinews .news-date {
2124     font-weight: bold;
2125     margin-bottom: 0;
2126 }
2127 
2128 .mainpage-left .mainpage-wikinews p {
2129     margin-left: 0.75em;
2130     margin-right: 0.75em;
2131 }
2132 
2133 .mainpage-yg {
2134     display: none;
2135     padding-bottom: 2.5em !important;
2136 }
2137 
2138 .mainpage-yg::before {
2139     content: 'Discussions';
2140     margin-left: 0.75em;
2141     color: #949eaa;
2142     font-weight: bold;
2143     text-transform: uppercase;
2144     letter-spacing: 0.025em;
2145 }
2146 
2147 body.is-authenticated .mainpage-yg {
2148     display: inherit;
2149 }
2150 
2151 .mainpage-news {
2152     background: #f9fafa;
2153 }
2154 
2155 .mainpage-news .news-updates::before {
2156     content: 'Newsposts';
2157     margin-left: 0.75em;
2158     color: #949eaa;
2159     font-weight: bold;
2160     text-transform: uppercase;
2161     letter-spacing: 0.025em;
2162 }
2163 
2164 .mainpage-news .news-updates li {
2165     text-overflow: ellipsis;
2166     white-space: nowrap;
2167     overflow: hidden;
2168 }
2169 
2170 .mainpage-social {
2171     border: none;
2172     margin-bottom: 0;
2173 }
2174 
2175 .mainpage-social .tile-top {
2176     display: flex;
2177     align-items: center;
2178     justify-content: center;
2179     padding: 1em 2em;
2180     height: 70px;
2181 }
2182 
2183 .mainpage-social .tile-top .social-icon {
2184     float: left;
2185     margin: 0 1em 0 -1em;
2186     width: 60px;
2187     text-align: center;
2188 }
2189 
2190 .mainpage-social .tile-top .social-header {
2191     color: #ffffff;
2192     font-weight: bold;
2193     font-size: 1.25em;
2194     margin: 0;
2195 }
2196 
2197 .mainpage-social .tile-top .social-tagline {
2198     color: rgba(255, 255, 255, 0.85);
2199     margin: 0;
2200 }
2201 
2202 .mainpage-social .tile-bottom {
2203     border: none;
2204     padding: 1em 2em;
2205 }
2206 
2207 .mainpage-social .tile-bottom p {
2208     color: #949eaa;
2209     font-weight: bold;
2210     text-transform: uppercase;
2211     letter-spacing: 0.025em;
2212     color: #ffffff;
2213     font-size: 0.9em;
2214     text-align: center;
2215     margin: 0;
2216 }
2217 
2218 .mainpage-social.mainpage-discord .tile-top {
2219     background: #7289da;
2220 }
2221 
2222 .mainpage-social.mainpage-discord .tile-bottom {
2223     background: #697ec4;
2224 }
2225 
2226 .mainpage-social.mainpage-twitter .tile-top {
2227     background: #1da1f2;
2228 }
2229 
2230 .mainpage-social.mainpage-twitter .tile-bottom {
2231     background: #1e96e0;
2232 }
2233 
2234 .mainpage-events {
2235     border: none;
2236     margin-bottom: 0;
2237 }
2238 
2239 .mainpage-events .tile-top {
2240     background-color: #4f348b;
2241     color: #fff;
2242     padding: 1em 2em;
2243 }
2244 
2245 .mainpage-events .tile-top h2 {
2246     margin-bottom: 0;
2247     padding-bottom: 0;
2248 }
2249 
2250 .mainpage-events .tile-top .note {
2251     margin-top: 0;
2252     color: #949eaa;
2253     font-style: italic;
2254 }
2255 
2256 .mainpage-events .tile-top .note a,
2257 .mainpage-events .tile-top .note a:visited {
2258     color: #b8c5d4;
2259 }
2260 
2261 .mainpage-events .tile-top a,
2262 .mainpage-events .tile-top a:visited,
2263 .mainpage-events .tile-top h2 a {
2264     color: #fff;
2265     text-decoration: none;
2266 }
2267 
2268 .mainpage-events .tile-top ul {
2269     list-style: none;
2270     margin-top: 1em;
2271     margin-left: 0;
2272 }
2273 
2274 .mainpage-events .tile-top li {
2275     padding-bottom: 0.6em;
2276     overflow: auto;
2277 }
2278 
2279 .mainpage-events .tile-top li img {
2280     max-width: 30px;
2281     width: auto;
2282     height: auto;
2283 }
2284 
2285 .mainpage-events .tile-top li a:hover,
2286 .mainpage-events .tile-top li a:focus {
2287     text-decoration: underline;
2288 }
2289 
2290 .mainpage-events .tile-top li a {
2291     float: left;
2292 }
2293 
2294 .mainpage-events .tile-top li a:first-child {
2295     width: 30px;
2296 }
2297 
2298 .mainpage-events .tile-top li a:last-child {
2299     padding-left: 1.5em;
2300     text-indent: -1em;
2301     line-height: 1.5;
2302 }
2303 
2304 .mainpage-events .tile-top li:last-of-type {
2305     display: none;
2306 }
2307 
2308 .mainpage-events .tile-bottom {
2309     border: none;
2310     padding: 1em 1.75em;
2311     background-color: #3d276b;
2312     color: #fff;
2313     font-weight: bold;
2314     font-size: 0.9em;
2315     text-align: center;
2316     text-transform: uppercase;
2317     letter-spacing: 0.03em;
2318     margin: 0;
2319 }
2320 
2321 body.wgl-darkmode .mainpage-events .tile-bottom {
2322     background-color: #3d276b;
2323     color: #fff;
2324 }
2325 
2326 .mainpage-events .tile-bottom a,
2327 .mainpage-events .tile-bottom a:visited {
2328     color: #fff;
2329     text-decoration: none;
2330 }
2331 
2332 .mainpage-events .tile-bottom .arrow {
2333     margin-left: 0.2em;
2334 }
2335 
2336 .mw-recentchanges-toplinks th {
2337     font-size: 90%;
2338 }
2339 
2340 .mw-changeslist-legend {
2341     margin-left: 0;
2342 }
2343 
2344 #mw-mf-diffview del {
2345     border: 2px #379541 solid;
2346     padding: 0.15em 0.5em;
2347     background-color: #c1edbf !important;
2348     margin-right: 2px;
2349 }
2350 
2351 #mw-mf-diffview del::before {
2352     content: "- ";
2353     font-weight: bold;
2354     font-size: 100%;
2355 }
2356 
2357 #mw-mf-diffview ins {
2358     border: 2px #438ab5 solid;
2359     padding: 0.15em 0.5em;
2360     background-color: #bddff2 !important;
2361     margin-right: 2px;
2362 }
2363 
2364 #mw-mf-diffview ins::before {
2365     content: "+ ";
2366     font-weight: bold;
2367     font-size: 100%;
2368 }
2369 
2370 #mw-mf-minidiff {
2371     background: #f9f9f9;
2372     border: 1px #f1f1f1 solid;
2373     padding: 10px;
2374 }
2375 
2376 .mw-diff-inline-changed,
2377 .mw-diff-inline-added {
2378     padding-bottom: 10px;
2379 }
2380 
2381 #mw-mf-diffview #mw-mf-diff-comment::before {
2382     content: "(";
2383 }
2384 
2385 #mw-mf-diffview #mw-mf-diff-comment::after {
2386     content: ")";
2387 }
2388 
2389 #mw-mf-diffarea {
2390     padding: 1em 1em 2em !important;
2391 }
2392 
2393 .forumsearchbox {
2394     padding: 0.5em;
2395     text-align: center;
2396     font-size: 90%;
2397     background-color: #f1f1f1;
2398     margin: auto !important;
2399 }
2400 
2401 .forumsearchbox tbody {
2402     display: inline;
2403 }
2404 
2405 .forumsearchbox input {
2406     margin: 0.5em;
2407 }
2408 
2409 .forumheader {
2410     border-left: 15px solid #ccc;
2411     background-color: #f1f1f1;
2412     margin: 1em 0;
2413     padding: 12px;
2414 }
2415 
2416 .forum_title {
2417     text-align: left;
2418 }
2419 
2420 .forum_title .forum_new {
2421     font-weight: bold;
2422     padding-top: 2px;
2423     padding-bottom: 1px;
2424 }
2425 
2426 .forum_edited {
2427     text-align: right;
2428 }
2429 
2430 .forumlist {
2431     margin: auto !important;
2432 }
2433 
2434 .forumlist .forum_editor,
2435 .forumlist .forum_type {
2436     display: none;
2437 }
2438 
2439 .forumlist .forum_title,
2440 .forumlist .forum_edited {
2441     width: auto;
2442 }
2443 
2444 .forumactiveheader,
2445 .forumarchiveheader,
2446 .forumoldarchives {
2447     background-color: #438ab5;
2448     color: #ffffff;
2449 }
2450 
2451 .forumoldarchives a {
2452     color: #ffffff;
2453 }
2454 
2455 .forumcolumnheader {
2456     background-color: #e6e6e6;
2457     color: #000000;
2458     text-align: left;
2459     padding-left: 5px;
2460     margin: auto;
2461 }