skins/common/shared.css

   1 /**
   2  * CSS in this file is used by *all* skins (that have any CSS at all).  Be
   3  * careful what you put in here, since what looks good in one skin may not in
   4  * another, but don't ignore the poor pre-Monobook users either.
   5  */
   6
   7 /* GENERAL CLASSES FOR DIRECTIONALITY SUPPORT */
   8 /* These classes should be used for text depending on the content direction.
   9 Content stuff like editsection, ul/ol and TOC depend on this. */
  10  /* @noflip */.mw-content-ltr { direction: ltr; }
  11 /* @noflip */.mw-content-rtl { direction: rtl; }
  12 /* Most input fields should be in site direction */
  13 /* @noflip */.sitedir-ltr textarea, .sitedir-ltr input { direction: ltr; }
  14 /* @noflip */.sitedir-rtl textarea, .sitedir-rtl input { direction: rtl; }
  15 /* Input types that should follow user direction, like buttons */
  16 input[type="submit"], input[type="button"], input[type="reset"], input[type="file"] { direction: ltr; }
  17 /* Override default values */
  18 /* @noflip */textarea[dir="ltr"], input[dir="ltr"] { direction: ltr; }
  19 /* @noflip */textarea[dir="rtl"], input[dir="rtl"] { direction: rtl; }
  20
  21 .mw-float-start { float: left; }
  22 .mw-float-end { float: right; }
  23
  24 /* The scripts of these languages are very hard to read with underlines */
  25 [lang="ar"] a, [lang="ckb"] a, [lang="fa"] a, [lang="kk-arab"] a,
  26 [lang="mzn"] a, [lang="ps"] a, [lang="ur"] a {
  27         text-decoration: none;
  28 }
  29
  30 /* Default style for semantic tags */
  31 abbr, acronym, .explain {
  32         border-bottom: 1px dotted black;
  33         cursor: help;
  34 }
  35
  36 /* Colored watchlist and recent changes numbers */
  37 .mw-plusminus-pos { color: #006400; } /* dark green */
  38 .mw-plusminus-neg { color: #8b0000; } /* dark red */
  39 .mw-plusminus-null { color: #aaa; } /* gray */
  40
  41 /* Links to redirects appear italicized on [[Special:AllPages]], [[Special:PrefixIndex]],
  42    [[Special:Watchlist/edit]] and in category listings */
  43 .allpagesredirect, .redirect-in-category, .watchlistredir {
  44         font-style: italic;
  45 }
  46
  47
  48 /* Comment and username portions of RC entries */
  49 span.comment {
  50         font-style: italic;
  51 }
  52
  53 span.changedby {
  54         font-size: 95%;
  55 }
  56
  57 /* Math */
  58 .texvc {
  59         direction: ltr;
  60         unicode-bidi: embed;
  61 }
  62 img.tex { vertical-align: middle; }
  63 span.texhtml { font-family: serif; }
  64
  65 /* add a bit of margin space between the preview and the toolbar */
  66 /* this replaces the ugly <p><br /></p> we used to insert into the page source */
  67 #wikiPreview.ontop { margin-bottom: 1em; }
  68
  69 /* Stop floats from intruding into edit area in previews */
  70 #editform, #toolbar, #wpTextbox1 {
  71         clear: both;
  72 }
  73 #toolbar img {
  74         cursor: pointer;
  75 }
  76 div#mw-js-message {
  77         margin: 1em 5%;
  78         padding: 0.5em 2.5%;
  79         border: solid 1px #ddd;
  80         background-color: #fcfcfc;
  81 }
  82
  83 /* Edit section links */
  84 .editsection {
  85         float: right;
  86         margin-left: 5px;
  87 }
  88 /* Correct directionality when page dir is different from site/user dir */
  89 /* @noflip */.mw-content-ltr .editsection, .mw-content-rtl .mw-content-ltr .editsection { float: right; }
  90 /* @noflip */.mw-content-rtl .editsection, .mw-content-ltr .mw-content-rtl .editsection { float: left; }
  91 /**
  92  * File histories
  93  */
  94 h2#filehistory {
  95         clear: both;
  96 }
  97
  98 table.filehistory th,
  99 table.filehistory td {
 100         vertical-align: top;
 101 }
 102 table.filehistory th {
 103         text-align: left;
 104 }
 105 table.filehistory td.mw-imagepage-filesize,
 106 table.filehistory th.mw-imagepage-filesize {
 107         white-space: nowrap;
 108 }
 109
 110 table.filehistory td.filehistory-selected {
 111         font-weight: bold;
 112 }
 113
 114 /*
 115  * rev_deleted stuff
 116  */
 117 li span.deleted, span.history-deleted {
 118         text-decoration: line-through;
 119         color: #888;
 120         font-style: italic;
 121 }
 122
 123 /**
 124  * Patrol stuff
 125  */
 126 .not-patrolled {
 127         background-color: #ffa;
 128 }
 129
 130 .unpatrolled {
 131         font-weight: bold;
 132         color: red;
 133 }
 134
 135 div.patrollink {
 136         font-size: 75%;
 137         text-align: right;
 138 }
 139
 140 /**
 141  * Forms
 142  */
 143 td.mw-label { text-align: right; }
 144 td.mw-input { text-align: left; }
 145 td.mw-submit { text-align: left; }
 146
 147 td.mw-label { vertical-align: top; }
 148 .prefsection td.mw-label { width: 20%; }
 149 .prefsection table { width: 100%; }
 150 td.mw-submit { white-space: nowrap; }
 151
 152 table.mw-htmlform-nolabel td.mw-label {
 153         width: 0 !important;
 154 }
 155
 156 tr.mw-htmlform-vertical-label td.mw-label {
 157         text-align: left !important;
 158 }
 159
 160 .mw-htmlform-invalid-input td.mw-input input {
 161         border-color: red;
 162 }
 163 .mw-htmlform-multiselect-flatlist div.mw-htmlform-multiselect-item {
 164         display: inline;
 165         margin-right: 1em;
 166         white-space: nowrap;
 167 }
 168
 169 input#wpSummary {
 170         width: 80%;
 171 }
 172
 173 /**
 174  * Image captions
 175  */
 176 .thumbcaption { text-align: left; }
 177 .magnify { float: right; }
 178
 179 /**
 180  * Hidden categories
 181  */
 182 .mw-hidden-cats-hidden { display: none; }
 183 .catlinks-allhidden { display: none; }
 184
 185 /* Convenience links to edit block, delete and protect reasons */
 186 p.mw-ipb-conveniencelinks, p.mw-protect-editreasons,
 187 p.mw-filedelete-editreasons, p.mw-delete-editreasons,
 188 p.mw-revdel-editreasons {
 189         font-size: 90%;
 190         text-align: right;
 191 }
 192
 193 /*
 194  * OpenSearch ajax suggestions
 195  */
 196 .os-suggest {
 197         overflow: auto;
 198         overflow-x: hidden;
 199         position: absolute;
 200         top: 0px;
 201         left: 0px;
 202         width: 0px;
 203         background-color: white;
 204         background-color: Window;
 205         border-style: solid;
 206         border-color: #AAAAAA;
 207         border-width: 1px;
 208         z-index:99;
 209         font-size:95%;
 210 }
 211
 212 table.os-suggest-results {
 213         font-size: 95%;
 214         cursor: pointer;
 215         border: 0;
 216         border-collapse: collapse;
 217         width: 100%;
 218 }
 219
 220 .os-suggest-result, .os-suggest-result-hl {
 221         white-space: nowrap;
 222         background-color: white;
 223         background-color: Window;
 224         color: black;
 225         color: WindowText;
 226         padding: 2px;
 227 }
 228 .os-suggest-result-hl,
 229 .os-suggest-result-hl-webkit {
 230         background-color: #4C59A6;
 231         color: white;
 232 }
 233 .os-suggest-result-hl {
 234         /* System colors are misimplemented in Safari 3.0 and earlier,
 235            making highlighted text illegible... */
 236         background-color: Highlight;
 237         color: HighlightText;
 238 }
 239
 240 .os-suggest-toggle {
 241         position: relative;
 242         left: 1ex;
 243         font-size: 65%;
 244 }
 245 .os-suggest-toggle-def {
 246         position: absolute;
 247         top: 0px;
 248         left: 0px;
 249         font-size: 65%;
 250         visibility: hidden;
 251 }
 252
 253 /* Page history styling */
 254 /* the auto-generated edit comments */
 255 .autocomment { color: gray; }
 256 #pagehistory .history-user {
 257         margin-left: 0.4em;
 258         margin-right: 0.2em;
 259 }
 260 #pagehistory span.minor {
 261         font-weight: bold;
 262 }
 263 #pagehistory li {
 264         border: 1px solid white;
 265 }
 266 #pagehistory li.selected {
 267         background-color: #f9f9f9;
 268         border: 1px dashed #aaa;
 269 }
 270
 271 /** Generic minor/bot/newpage styling */
 272 .newpage, .minor, .bot {
 273         font-weight: bold;
 274 }
 275
 276 #shared-image-dup, #shared-image-conflict {
 277         font-style: italic;
 278 }
 279
 280 /*
 281  * Recreating deleted page warning
 282  * Reupload file warning
 283  * Page protection warning
 284  * incl. log entries for these warnings
 285  */
 286 div.mw-warning-with-logexcerpt {
 287         padding: 3px;
 288         margin-bottom: 3px;
 289         border: 2px solid #2F6FAB;
 290         clear: both;
 291 }
 292 div.mw-warning-with-logexcerpt ul li {
 293         font-size: 90%;
 294 }
 295
 296 /* (show/hide) revision deletion links */
 297 span.mw-revdelundel-link,
 298 strong.mw-revdelundel-link {
 299         font-size: 90%;
 300 }
 301 span.mw-revdelundel-hidden,
 302 input.mw-revdelundel-hidden {
 303         visibility: hidden;
 304 }
 305
 306 td.mw-revdel-checkbox, th.mw-revdel-checkbox {
 307         padding-right: 10px;
 308         text-align: center;
 309 }
 310
 311 /* feed links */
 312 a.feedlink {
 313         /* @embed */
 314         background: url("images/feed-icon.png") center left no-repeat;
 315         padding-left: 16px;
 316 }
 317
 318 /* Plainlinks - this can be used to switch
 319  * off special external link styling */
 320 .plainlinks a {
 321         background: none !important;
 322         padding: 0 !important;
 323 }
 324 /* External URLs should always be treated as LTR (bug 4330) */
 325 /* @noflip */ .rtl a.external.free, .rtl a.external.autonumber {
 326         direction: ltr;
 327         unicode-bidi: embed;
 328 }
 329
 330 /* wikitable class for skinning normal tables
 331  * keep on sync with commonPrint.css
 332  */
 333 table.wikitable {
 334         margin: 1em 1em 1em 0;
 335         background: #f9f9f9;
 336         border: 1px #aaa solid;
 337         border-collapse: collapse;
 338         color: black;
 339 }
 340 .wikitable th, .wikitable td {
 341         border: 1px #aaa solid;
 342         padding: 0.2em;
 343 }
 344 .wikitable th {
 345         background: #f2f2f2;
 346         text-align: center;
 347 }
 348 .wikitable caption {
 349         font-weight: bold;
 350 }
 351
 352 /* hide initially collapsed collapsable tables */
 353 table.collapsed tr.collapsable {
 354         display: none;
 355 }
 356
 357 /* success and error messages */
 358 .success {
 359         color: green;
 360         font-size: larger;
 361 }
 362 .warning {
 363         color: #FFA500; /* orange */
 364         font-size: larger;
 365 }
 366 .error {
 367         color: red;
 368         font-size: larger;
 369 }
 370 .errorbox, .warningbox, .successbox {
 371         font-size: larger;
 372         border: 2px solid;
 373         padding: .5em 1em;
 374         float: left;
 375         margin-bottom: 2em;
 376         color: #000;
 377 }
 378 .errorbox {
 379         border-color: red;
 380         background-color: #fff2f2;
 381 }
 382 .warningbox {
 383         border-color: #FF8C00; /* darkorange */
 384         background-color: #FFFFC0;
 385 }
 386 .successbox {
 387         border-color: green;
 388         background-color: #dfd;
 389 }
 390 .errorbox h2, .warningbox h2, .successbox h2 {
 391         font-size: 1em;
 392         font-weight: bold;
 393         display: inline;
 394         margin: 0 .5em 0 0;
 395         border: none;
 396 }
 397
 398 /* general info/warning box for SP */
 399 .mw-infobox {
 400         border: 2px solid #ff7f00;
 401         margin: 0.5em;
 402         clear: left;
 403         overflow: hidden;
 404 }
 405
 406 .mw-infobox-left {
 407         margin: 7px;
 408         float: left;
 409         width: 35px;
 410 }
 411
 412 .mw-infobox-right {
 413         margin: 0.5em 0.5em 0.5em 49px;
 414 }
 415
 416 /* Note on preview page */
 417 .previewnote {
 418         color: #c00;
 419         margin-bottom: 1em;
 420 }
 421
 422 .previewnote p {
 423         text-indent: 3em;
 424         margin: 0.8em 0;
 425 }
 426
 427 .visualClear {
 428         clear: both;
 429 }
 430
 431 #mw_trackbacks {
 432         border: solid 1px #bbbbff;
 433         background-color: #eeeeff;
 434         padding: 0.2em;
 435 }
 436
 437 /*
 438         Table pager (e.g. Special:ListFiles)
 439         - remove underlines from the navigation link
 440         - collapse borders
 441         - set the borders to outsets (similar to Special:AllMessages)
 442         - remove line wrapping for all td and th, set background color
 443         - restore line wrapping for the last two table cells (description and size)
 444 */
 445 .TablePager {
 446         min-width: 80%;
 447         border-collapse: collapse;
 448 }
 449 .TablePager_nav {
 450         margin: 0 auto;
 451 }
 452 .TablePager_nav td {
 453         padding: 3px;
 454         text-align: center;
 455 }
 456 .TablePager_nav a {
 457         text-decoration: none;
 458 }
 459 .TablePager, .TablePager td, .TablePager th {
 460         border: 1px solid #aaaaaa;
 461         padding: 0 0.15em 0 0.15em;
 462 }
 463 .TablePager th {
 464         background-color: #eeeeff;
 465 }
 466 .TablePager td {
 467         background-color: #ffffff;
 468 }
 469 .TablePager tr:hover td {
 470         background-color: #eeeeff;
 471 }
 472
 473 .imagelist td, .imagelist th {
 474         white-space: nowrap;
 475 }
 476 .imagelist .TablePager_col_links {
 477         background-color: #eeeeff;
 478 }
 479 .imagelist .TablePager_col_img_description {
 480         white-space: normal;
 481 }
 482 .imagelist th.TablePager_sort {
 483         background-color: #ccccff;
 484 }
 485
 486 /* filetoc */
 487 ul#filetoc {
 488         text-align: center;
 489         border: 1px solid #aaaaaa;
 490         background-color: #f9f9f9;
 491         padding: 5px;
 492         font-size: 95%;
 493         margin-bottom: 0.5em;
 494         margin-left: 0;
 495         margin-right: 0;
 496 }
 497
 498 #filetoc li {
 499         display: inline;
 500         list-style-type: none;
 501         padding-right: 2em;
 502 }
 503
 504 /* Classes for EXIF data display */
 505 table.mw_metadata {
 506         font-size: 0.8em;
 507         margin-left: 0.5em;
 508         margin-bottom: 0.5em;
 509         width: 400px;
 510 }
 511
 512 table.mw_metadata caption {
 513         font-weight: bold;
 514 }
 515
 516 table.mw_metadata th {
 517         font-weight: normal;
 518 }
 519
 520 table.mw_metadata td {
 521         padding: 0.1em;
 522 }
 523
 524 table.mw_metadata {
 525         border: none;
 526         border-collapse: collapse;
 527 }
 528
 529 table.mw_metadata td, table.mw_metadata th {
 530         text-align: center;
 531         border: 1px solid #aaaaaa;
 532         padding-left: 5px;
 533         padding-right: 5px;
 534 }
 535
 536 table.mw_metadata th {
 537         background-color: #f9f9f9;
 538 }
 539
 540 table.mw_metadata td {
 541         background-color: #fcfcfc;
 542 }
 543
 544 table.mw_metadata ul.metadata-langlist {
 545         list-style-type: none;
 546         list-style-image: none;
 547         padding-right: 5px;
 548         padding-left: 5px;
 549         margin: 0;
 550 }
 551
 552 /* Galleries */
 553 /* These display attributes look nonsensical, but are needed to support IE and FF2 */
 554 /* Don't forget to update commonPrint.css */
 555 li.gallerybox {
 556         vertical-align: top;
 557         background-color: #f9f9f9;
 558         border: solid 2px white;
 559         display: -moz-inline-box;
 560         display: inline-block;
 561 }
 562
 563 ul.gallery, li.gallerybox {
 564         zoom: 1;
 565         *display: inline;
 566 }
 567
 568 ul.gallery {
 569         margin: 2px;
 570         padding: 2px;
 571         display: block;
 572 }
 573
 574 li.gallerycaption {
 575         font-weight: bold;
 576         text-align: center;
 577         display: block;
 578         word-wrap: break-word;
 579 }
 580
 581 li.gallerybox div.thumb {
 582         text-align: center;
 583         border: 1px solid #ccc;
 584         margin: 2px;
 585 }
 586
 587 li.gallerybox div.thumb img {
 588         display: block;
 589         margin: 0 auto;
 590 }
 591
 592 div.gallerytext {
 593         overflow: hidden;
 594         font-size: 94%;
 595         padding: 2px 4px;
 596         word-wrap: break-word;
 597 }
 598
 599 #mw-addcategory-prompt {
 600         display: inline;
 601         margin-left: 1em;
 602 }
 603
 604 #mw-addcategory-prompt input {
 605         margin-left: 0.5em;
 606         margin-right: 0.5em;
 607 }
 608
 609 .mw-remove-category {
 610         padding: 8px;
 611         /* @embed */
 612         background-image: url(images/remove.png);
 613         background-position: center center;
 614         background-repeat: no-repeat;
 615 }
 616
 617 .mw-ajax-addcategory {
 618         padding-left: 20px;
 619         /* @embed */
 620         background-image: url(images/add.png);
 621         background-position: left center;
 622         background-repeat: no-repeat;
 623 }
 624
 625 .mw-ajax-loader {
 626         /* @embed */
 627         background-image: url(images/ajax-loader.gif);
 628         background-position: center center;
 629         background-repeat: no-repeat;
 630         padding: 16px;
 631         position: relative;
 632         top: -16px;
 633 }
 634
 635 .mw-small-spinner {
 636         padding: 10px !important;
 637         margin-right: 0.6em;
 638         /* @embed */
 639         background-image: url(images/spinner.gif);
 640         background-position: center center;
 641         background-repeat: no-repeat;
 642 }
 643
 644 /* Correct directionality when page dir is different from site/user dir */
 645 /* @noflip */.mw-content-ltr ul, .mw-content-ltr ol,
 646 .mw-content-rtl .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ol {
 647         margin: .3em 0 0 1.5em;
 648 }
 649 /* @noflip */.mw-content-rtl ul, .mw-content-rtl ol,
 650 .mw-content-ltr .mw-content-rtl ul, .mw-content-ltr .mw-content-rtl ol {
 651         margin: .3em 1.5em 0 0;
 652 }
 653 /* Localised ordered list numbering for some languages */
 654 ol:lang(bcc) li,
 655 ol:lang(bqi) li,
 656 ol:lang(fa) li,
 657 ol:lang(glk) li,
 658 ol:lang(kk-arab) li,
 659 ol:lang(mzn) li {
 660         list-style-type: -moz-persian;
 661         list-style-type: persian;
 662 }
 663
 664 ol:lang(ckb) li {
 665         list-style-type: -moz-arabic-indic;
 666         list-style-type: arabic-indic;
 667 }
 668
 669 ol:lang(bn) li {
 670         list-style-type: -moz-bengali;
 671         list-style-type: bengali;
 672 }
 673
 674 ol:lang(or) li {
 675         list-style-type: -moz-oriya;
 676         list-style-type: oriya;
 677 }
 678
 679 /* Correct directionality when page dir is different from site/user dir */
 680 /* @noflip */.mw-content-ltr .toc ul, .mw-content-ltr #toc ul,
 681 .mw-content-rtl .mw-content-ltr .toc ul, .mw-content-rtl .mw-content-ltr #toc ul {
 682         text-align: left;
 683         margin-left: 0;
 684 }
 685 /* @noflip */.mw-content-rtl .toc ul, .mw-content-rtl #toc ul,
 686 .mw-content-ltr .mw-content-rtl .toc ul, .mw-content-ltr .mw-content-rtl #toc ul {
 687         text-align: right;
 688         margin-right: 0;
 689 }
 690 /* @noflip */.mw-content-ltr .toc ul ul, .mw-content-ltr #toc ul ul,
 691 .mw-content-rtl .mw-content-ltr .toc ul ul, .mw-content-rtl .mw-content-ltr #toc ul ul {
 692         margin: 0 0 0 2em;
 693 }
 694 /* @noflip */.mw-content-rtl .toc ul ul, .mw-content-rtl #toc ul ul,
 695 .mw-content-ltr .mw-content-rtl .toc ul ul, .mw-content-ltr .mw-content-rtl #toc ul ul {
 696         margin: 0 2em 0 0;
 697 }
 698
 699 /* tooltip styles */
 700 .mw-help-field-hint {
 701         display: none;
 702         margin-left: 2px;
 703         margin-bottom: -8px;
 704         padding: 0px 0px 0px 15px;
 705         /* @embed */
 706         background-image: url('images/help-question.gif');
 707         background-position: left center;
 708         background-repeat: no-repeat;
 709         cursor: pointer;
 710         font-size: .8em;
 711         text-decoration: underline;
 712         color: #0645ad;
 713 }
 714 .mw-help-field-hint:hover {
 715         /* @embed */
 716         background-image: url('images/help-question-hover.gif');
 717 }
 718 .mw-help-field-data {
 719         display: block;
 720         background-color: #d6f3ff;
 721         padding:5px 8px 4px 8px;
 722         border: 1px solid #5dc9f4;
 723         margin-left: 20px;
 724 }
 725 .tipsy {
 726         padding: 5px 5px 10px;
 727         font-size: 12px;
 728         position: absolute;
 729         z-index: 100000;
 730         overflow: visible;
 731 }
 732 .tipsy-inner {
 733         padding: 5px 8px 4px 8px;
 734         background-color: #d6f3ff;
 735         color: black;
 736         border: 1px solid #5dc9f4;
 737         max-width: 300px;
 738         text-align: left;
 739 }
 740 .tipsy-arrow {
 741         position: absolute;
 742         /* @embed */
 743         background: url(images/tipsy-arrow.gif) no-repeat top left;
 744         width: 13px;
 745         height: 13px;
 746 }
 747 .tipsy-se .tipsy-arrow {
 748         bottom: -2px;
 749         right: 10px;
 750         background-position: 0% 100%;
 751 }
 752 /* Table Sorting */
 753 th.headerSort {
 754         background-image: url(images/sort_both.gif);
 755         cursor: pointer;
 756         background-repeat: no-repeat;
 757         background-position: center right;
 758         padding-right: 21px;
 759 }
 760 th.headerSortUp {
 761         background-image: url(images/sort_up.gif);
 762 }
 763 th.headerSortDown {
 764         background-image: url(images/sort_down.gif);
 765 }
 766
 767 /* LTR content in RTL layout */
 768 .ltr {
 769         /* @noflip */
 770         direction: ltr;
 771         unicode-bidi: embed;
 772 }
 773
 774 #mw-clearyourcache, #mw-sitecsspreview, #mw-sitejsspreview, #mw-usercsspreview, #mw-userjspreview {
 775         direction: ltr;
 776         unicode-bidi: embed;
 777 }
 778
 779 /* Correct user & content directionality when viewing a diff */
 780 .diff-currentversion-title, .diff {
 781         direction: ltr;
 782         unicode-bidi: embed;
 783 }
 784 /* @noflip */ .diff-contentalign-right td {
 785         direction: rtl;
 786         unicode-bidi: embed;
 787 }
 788 /* @noflip */ .diff-contentalign-left td {
 789         direction: ltr;
 790         unicode-bidi: embed;
 791 }
 792 .diff-otitle, .diff-ntitle, .diff-lineno {
 793         direction: ltr !important;
 794         unicode-bidi: embed;
 795 }
 796
 797 #mw-revision-info, #mw-revision-nav {
 798         direction: ltr;
 799 }
 800
 801 /* Images */
 802 /* @noflip */div.tright, div.floatright, table.floatright {
 803         clear: right;
 804         float: right;
 805 }
 806 /* @noflip */div.tleft, div.floatleft, table.floatleft {
 807         float: left;
 808         clear: left;
 809 }
 810 div.floatright, table.floatright, div.floatleft, table.floatleft {
 811         position: relative;
 812 }