skins/vector/screen.css

   1 /*
   2  * Any rules which should not be flipped automatically in right-to-left situations should be
   3  * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
   4  * should be prepended with @embed in a comment block.
   5  *
   6  * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
   7  * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
   8  * a rule that makes things work in IE6, and then following it with a rule that begins with
   9  * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
  10  * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
  11  * "IGNORED BY IE6" comments.
  12  */
  13
  14 /* Framework */
  15 html,
  16 body {
  17         height: 100%;
  18         margin: 0;
  19         padding: 0;
  20         font-family: sans-serif;
  21         font-size: 1em;
  22 }
  23 body {
  24         background-color: #f6f6f6;
  25 }
  26 /* Content */
  27 div#content {
  28         margin-left: 10em;
  29         padding: 1em;
  30         /* Border on top, left, and bottom side */
  31         border: 1px solid #a7d7f9;
  32         border-right-width: 0;
  33         /* Merge the border with tabs' one (in their background image) */
  34         margin-top: -1px;
  35         background-color: white;
  36         color: black;
  37         direction: ltr;
  38 }
  39 /* Hide, but keep accessible for screen-readers */
  40 #mw-navigation h2 {
  41         position: absolute;
  42         top: -9999px;
  43 }
  44 /* Head */
  45 #mw-page-base {
  46         height: 5em;
  47         background-color: white;
  48         /* @embed */
  49         background-image: url(images/page-fade.png);
  50         background-position: bottom left;
  51         background-repeat: repeat-x;
  52 }
  53 #mw-head-base {
  54         margin-top: -5em;
  55         margin-left: 10em;
  56         height: 5em;
  57 }
  58 div#mw-head {
  59         position: absolute;
  60         top: 0;
  61         right: 0;
  62         width: 100%;
  63 }
  64 div#mw-head h3 {
  65         margin: 0;
  66         padding: 0;
  67 }
  68 /* Hide empty portlets */
  69 div.emptyPortlet {
  70                 display: none;
  71 }
  72 /* Personal */
  73 #p-personal {
  74         position: absolute;
  75         top: 0.33em;
  76         right: 0.75em;
  77         /* Display on top of page tabs - bugs 37158, 48078 */
  78         z-index: 100;
  79 }
  80 #p-personal h3 {
  81         display: none;
  82 }
  83 #p-personal ul {
  84         list-style-type: none;
  85         list-style-image: none;
  86         margin: 0;
  87         padding-left: 10em; /* Keep from overlapping logo */
  88 }
  89 /* @noflip */
  90 #p-personal li {
  91         line-height: 1.125em;
  92         float: left;
  93 }
  94 /* This one flips! */
  95 #p-personal li {
  96         margin-left: 0.75em;
  97         margin-top: 0.5em;
  98         font-size: 0.75em;
  99         white-space: nowrap;
 100 }
 101 /* Navigation Containers */
 102 #left-navigation {
 103         position: absolute;
 104         left: 10em;
 105         top: 2.5em;
 106 }
 107 #right-navigation {
 108         float: right;
 109         margin-top: 2.5em;
 110 }
 111 /* Navigation Labels */
 112 div.vectorTabs h3,
 113 div.vectorMenu h3 span {
 114         display: none;
 115 }
 116 /* Namespaces and Views */
 117 /* @noflip */
 118 div.vectorTabs {
 119         float: left;
 120         height: 2.5em;
 121 }
 122 div.vectorTabs {
 123         /* @embed */
 124         background-image: url(images/tab-break.png);
 125         background-position: bottom left;
 126         background-repeat: no-repeat;
 127         padding-left: 1px;
 128 }
 129 /* @noflip */
 130 div.vectorTabs ul {
 131         float: left;
 132 }
 133 div.vectorTabs ul {
 134         height: 100%;
 135         list-style-type: none;
 136         list-style-image: none;
 137         margin: 0;
 138         padding: 0;
 139 }
 140 /* @noflip */
 141 div.vectorTabs ul li {
 142         float: left;
 143 }
 144 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 145 div.vectorTabs ul li {
 146         line-height: 1.125em;
 147         display: inline-block;
 148         height: 100%;
 149         margin: 0;
 150         padding: 0;
 151         background-color: #f3f3f3;
 152         /* @embed */
 153         background-image: url(images/tab-normal-fade.png);
 154         background-position: bottom left;
 155         background-repeat: repeat-x;
 156         white-space: nowrap;
 157 }
 158 /* IGNORED BY IE6 */
 159 div.vectorTabs ul > li {
 160         display: block;
 161 }
 162 div.vectorTabs li.selected {
 163         /* @embed */
 164         background-image: url(images/tab-current-fade.png);
 165 }
 166 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 167 div.vectorTabs li a {
 168         display: inline-block;
 169         height: 1.9em;
 170         padding-left: 0.5em;
 171         padding-right: 0.5em;
 172         color: #0645ad;
 173         cursor: pointer;
 174         font-size: 0.8em;
 175 }
 176 /* IGNORED BY IE6 */
 177 div.vectorTabs li > a {
 178         display: block;
 179 }
 180 div.vectorTabs li.icon a {
 181         background-position: bottom right;
 182         background-repeat: no-repeat;
 183 }
 184 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 185 div.vectorTabs span a  {
 186         display: inline-block;
 187         padding-top: 1.25em;
 188 }
 189 /* IGNORED BY IE6 */
 190 /* @noflip */
 191 div.vectorTabs span > a {
 192         float: left;
 193         display: block;
 194 }
 195 div.vectorTabs span {
 196         display: inline-block;
 197         /* @embed */
 198         background-image: url(images/tab-break.png);
 199         background-position: bottom right;
 200         background-repeat: no-repeat;
 201 }
 202 div.vectorTabs li.selected a,
 203 div.vectorTabs li.selected a:visited{
 204         color: #333;
 205         text-decoration: none;
 206 }
 207 div.vectorTabs li.new a,
 208 div.vectorTabs li.new a:visited{
 209         color: #a55858;
 210 }
 211 /* Variants and Actions */
 212 /* @noflip */
 213 div.vectorMenu {
 214         direction: ltr;
 215         float: left;
 216         /* @embed */
 217         background-image: url(images/arrow-down-icon.png);
 218         /* SVG support using a transparent gradient to guarantee cross-browser
 219          * compatibility (browsers able to understand gradient syntax support also SVG) */
 220         /* @embed */
 221         background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg);
 222         /* @embed */
 223         background-image: linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg);
 224         background-position: 100% 60%;
 225         background-repeat: no-repeat;
 226         cursor: pointer;
 227 }
 228 div.vectorMenuFocus {
 229         /* @embed */
 230         background-image: url(images/arrow-down-focus-icon.png);
 231         /* SVG support using a transparent gradient to guarantee cross-browser
 232          * compatibility (browsers able to understand gradient syntax support also SVG) */
 233         /* @embed */
 234         background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg);
 235         /* @embed */
 236         background-image: linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg);
 237         background-position: 100% 60%;
 238 }
 239 /* @noflip */
 240 body.rtl div.vectorMenu {
 241         direction: rtl;
 242 }
 243 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 244 /* @noflip */
 245 div#mw-head div.vectorMenu h3 {
 246         float: left;
 247         /* @embed */
 248         background-image: url(images/tab-break.png);
 249         background-repeat: no-repeat;
 250 }
 251 /* This will be flipped - unlike the one above it */
 252 div#mw-head div.vectorMenu h3 {
 253         background-position: bottom left;
 254         margin-left: -1px;
 255 }
 256 /* IGNORED BY IE6 */
 257 div#mw-head div.vectorMenu > h3 {
 258         background-image: none;
 259 }
 260 div#mw-head div.vectorMenu h4,
 261 div.vectorMenu#p-variants #mw-vector-current-variant {
 262         display: inline-block;
 263         float: left;
 264         font-size: 0.8em;
 265         padding-left: 0.5em;
 266         padding-top: 1.375em;
 267         font-weight: normal;
 268         border: none;
 269 }
 270 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 271 /* @noflip */
 272 div.vectorMenu h3 a {
 273         display: inline-block;
 274         width: 24px;
 275         height: 1.9em;
 276         text-decoration: none;
 277         /* @embed */
 278         background-image: url(images/tab-break.png);
 279         background-repeat: no-repeat;
 280 }
 281 /* This will be flipped - unlike the one above it */
 282 div.vectorMenu h3 a {
 283         background-position: bottom right;
 284 }
 285 /* IGNORED BY IE6 */
 286 div.vectorMenu h3 > a {
 287         display: block;
 288 }
 289 div.vectorMenu div.menu {
 290         position: relative;
 291         display: none;
 292         clear: both;
 293         text-align: left;
 294 }
 295 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 296 /* @noflip */
 297 body.rtl div.vectorMenu div.menu {
 298         margin-left: 24px;
 299 }
 300 /* IGNORED BY IE6 */
 301 /* @noflip */
 302 body.rtl div.vectorMenu > div.menu {
 303         margin-left: auto;
 304 }
 305 /* IGNORED BY IE6 */
 306 /* Also fixes old versions of FireFox */
 307 /* @noflip */
 308 body.rtl div.vectorMenu > div.menu,
 309 x:-moz-any-link {
 310         margin-left: 23px;
 311 }
 312 /* Enable forcing showing of the menu for accessibility */
 313 div.vectorMenu:hover div.menu,
 314 div.vectorMenu div.menuForceShow {
 315         display: block;
 316 }
 317 div.vectorMenu ul {
 318         position: absolute;
 319         background-color: white;
 320         border: solid 1px silver;
 321         border-top-width: 0;
 322         list-style-type: none;
 323         list-style-image: none;
 324         padding: 0;
 325         margin: 0;
 326         margin-left: -1px;
 327         text-align: left;
 328 }
 329 /* Fixes old versions of FireFox */
 330 div.vectorMenu ul,
 331 x:-moz-any-link {
 332         min-width: 5em;
 333 }
 334 /* Returns things back to normal in modern versions of FireFox */
 335 div.vectorMenu ul,
 336 x:-moz-any-link,
 337 x:default {
 338         min-width: 0;
 339 }
 340 div.vectorMenu li {
 341         padding: 0;
 342         margin: 0;
 343         text-align: left;
 344         line-height: 1em;
 345 }
 346 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 347 div.vectorMenu li a {
 348         display: inline-block;
 349         padding: 0.5em;
 350         white-space: nowrap;
 351         color: #0645ad;
 352         cursor: pointer;
 353         font-size: 0.8em;
 354 }
 355 /* IGNORED BY IE6 */
 356 div.vectorMenu li > a {
 357         display: block;
 358 }
 359 div.vectorMenu li.selected a,
 360 div.vectorMenu li.selected a:visited {
 361         color: #333;
 362         text-decoration: none;
 363 }
 364 /* Search */
 365 #p-search h3 {
 366         display: none;
 367 }
 368 /* @noflip */
 369 #p-search {
 370         float: left;
 371 }
 372 #p-search {
 373         margin-right: 0.5em;
 374         margin-left: 0.5em;
 375 }
 376 #p-search form,
 377 #p-search input {
 378         margin: 0;
 379         margin-top: 0.4em;
 380 }
 381 div#simpleSearch {
 382         display: block;
 383         width: 14em;
 384         height: 1.4em;
 385         margin-top: 0.65em;
 386         position: relative;
 387         min-height: 1px; /* Gotta trigger hasLayout for IE7 */
 388         border: solid 1px #aaa;
 389         color: black;
 390         background-color: white;
 391         /* @embed */
 392         background-image: url(images/search-fade.png);
 393         background-position: top left;
 394         background-repeat: repeat-x;
 395 }
 396 div#simpleSearch label {
 397         /*
 398          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 399          * this from ever being shown anyways.
 400         */
 401         font-size: 13px;
 402         top: 0.25em;
 403         direction: ltr;
 404 }
 405 div#simpleSearch input {
 406         color: black;
 407         direction: ltr;
 408 }
 409 div#simpleSearch input:focus {
 410         outline: none;
 411 }
 412 div#simpleSearch input.placeholder {
 413         color: #999;
 414 }
 415 div#simpleSearch input::-webkit-input-placeholder {
 416         color: #999;
 417 }
 418 div#simpleSearch input:-moz-placeholder {
 419         color: #999;
 420 }
 421 div#simpleSearch input:-ms-input-placeholder {
 422         color: #999;
 423 }
 424 div#simpleSearch input#searchInput {
 425         position: absolute;
 426         top: 0;
 427         left: 0;
 428         width: 90%;
 429         margin: 0;
 430         padding: 0;
 431         padding-left: 0.2em;
 432         padding-top: 0.2em;
 433         padding-bottom: 0.2em;
 434         outline: none;
 435         border: none;
 436         /*
 437          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 438          * this from ever being shown anyways.
 439         */
 440         font-size: 13px;
 441         background-color: transparent;
 442         direction: ltr;
 443 }
 444 div#simpleSearch button#searchButton {
 445         position: absolute;
 446         width: 10%;
 447         right: 0;
 448         top: 0;
 449         padding: 0;
 450         padding-top: 0.3em;
 451         padding-bottom: 0.2em;
 452         padding-right: 0.4em;
 453         margin: 0;
 454         border: none;
 455         cursor: pointer;
 456         background-color: transparent;
 457         background-image: none;
 458 }
 459 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 460 div#simpleSearch button#searchButton img {
 461         border: none;
 462         margin: 0;
 463         margin-top: -3px;
 464         padding: 0;
 465 }
 466 /* IGNORED BY IE6 */
 467 div#simpleSearch button#searchButton > img {
 468         margin: 0;
 469 }
 470 /* Panel */
 471 div#mw-panel {
 472         position: absolute;
 473         top: 160px;
 474         padding-top: 1em;
 475         width: 10em;
 476         left: 0;
 477 }
 478 div#mw-panel div.portal {
 479         padding-bottom: 1.5em;
 480         direction: ltr;
 481 }
 482 div#mw-panel div.portal h3 {
 483         font-weight: normal;
 484         color: #444;
 485         padding: 0.25em;
 486         padding-top: 0;
 487         padding-left: 1.75em;
 488         cursor: default;
 489         border: none;
 490         font-size: 0.75em;
 491 }
 492 div#mw-panel div.portal div.body {
 493         margin: 0;
 494         padding-top: 0.5em;
 495         margin-left: 1.25em;
 496         /* @embed */
 497         background-image: url(images/portal-break.png);
 498         background-repeat: no-repeat;
 499         background-position: top left;
 500 }
 501 div#mw-panel div.portal div.body ul {
 502         list-style-type: none;
 503         list-style-image: none;
 504         padding: 0;
 505         margin: 0;
 506 }
 507 div#mw-panel div.portal div.body ul li {
 508         line-height: 1.125em;
 509         padding: 0;
 510         padding-bottom: 0.5em;
 511         margin: 0;
 512         font-size: 0.75em;
 513         word-wrap: break-word;
 514 }
 515 div#mw-panel div.portal div.body ul li a {
 516         color: #0645ad;
 517 }
 518 div#mw-panel div.portal div.body ul li a:visited {
 519         color: #0b0080;
 520 }
 521 /* Footer */
 522 div#footer {
 523         margin-left: 10em;
 524         margin-top: 0;
 525         padding: 0.75em;
 526         direction: ltr;
 527 }
 528 div#footer ul {
 529         list-style-type: none;
 530         list-style-image: none;
 531         margin: 0;
 532         padding: 0;
 533 }
 534 div#footer ul li {
 535         margin: 0;
 536         padding: 0;
 537         padding-top: 0.5em;
 538         padding-bottom: 0.5em;
 539         color: #333;
 540         font-size: 0.7em;
 541 }
 542 div#footer #footer-icons {
 543         float: right;
 544 }
 545 /* @noflip */
 546 body.ltr div#footer #footer-places {
 547         float: left;
 548 }
 549 div#footer #footer-info li {
 550         line-height: 1.4em;
 551 }
 552 div#footer #footer-icons li {
 553         float: left;
 554         margin-left: 0.5em;
 555         line-height: 2em;
 556         text-align: right;
 557 }
 558 div#footer #footer-places li {
 559         float: left;
 560         margin-right: 1em;
 561         line-height: 2em;
 562 }
 563 /* Logo */
 564 #p-logo {
 565         position: absolute;
 566         top: -160px;
 567         left: 0;
 568         width: 10em;
 569         height: 160px;
 570 }
 571 #p-logo a {
 572         display: block;
 573         width: 10em;
 574         height: 160px;
 575         background-repeat: no-repeat;
 576         background-position: center center;
 577         text-decoration: none;
 578 }
 579
 580 /*
 581  *
 582  * The following code is highly modified from monobook. It would be nice if the
 583  * preftoc id was more human readable like preferences-toc for instance,
 584  * howerver this would require backporting the other skins.
 585  */
 586
 587 /* Preferences */
 588 #preftoc {
 589         /* Tabs */
 590         width: 100%;
 591         float: left;
 592         clear: both;
 593         margin: 0 !important;
 594         padding: 0 !important;
 595         /* @embed */
 596         background-image: url(images/preferences-break.png);
 597         background-position: bottom left;
 598         background-repeat: no-repeat;
 599 }
 600         #preftoc li {
 601                 /* Tab */
 602                 float: left;
 603                 margin: 0;
 604                 padding: 0;
 605                 padding-right: 1px;
 606                 height: 2.25em;
 607                 white-space: nowrap;
 608                 list-style-type: none;
 609                 list-style-image: none;
 610                 /* @embed */
 611                 background-image: url(images/preferences-break.png);
 612                 background-position: bottom right;
 613                 background-repeat: no-repeat;
 614         }
 615         /* Sadly, IE6 won't understand this */
 616         #preftoc li:first-child {
 617                 margin-left: 1px;
 618         }
 619         #preftoc a,
 620         #preftoc a:active {
 621                 display: inline-block;
 622                 position: relative;
 623                 color: #0645ad;
 624                 padding: 0.5em;
 625                 text-decoration: none;
 626                 background-image: none;
 627                 font-size: 0.9em;
 628         }
 629         #preftoc a:hover,
 630         #preftoc a:focus {
 631                 text-decoration: underline;
 632         }
 633         #preftoc li.selected a {
 634                 /* @embed */
 635                 background-image: url(images/preferences-fade.png);
 636                 background-position: bottom;
 637                 background-repeat: repeat-x;
 638                 color: #333;
 639                 text-decoration: none;
 640         }
 641 #preferences {
 642         float: left;
 643         width: 100%;
 644         margin: 0;
 645         margin-top: -2px;
 646         clear: both;
 647         border: solid 1px #ccc;
 648         background-color: #fafafa;
 649 }
 650 #preferences fieldset {
 651         border: none;
 652         border-top: solid 1px #ccc;
 653 }
 654 #preferences fieldset.prefsection {
 655         border: none;
 656         padding: 0;
 657         margin: 1em;
 658 }
 659 #preferences legend {
 660         color: #666;
 661 }
 662 #preferences fieldset.prefsection legend.mainLegend {
 663         display: none;
 664 }
 665 #preferences td {
 666         padding-left: 0.5em;
 667         padding-right: 0.5em;
 668 }
 669 .htmlform-tip {
 670         font-size: x-small;
 671         padding: .2em 2em;
 672         color: #666;
 673 }
 674 #preferences div.mw-prefs-buttons {
 675         padding: 1em;
 676 }
 677 #preferences div.mw-prefs-buttons input {
 678         margin-right: 0.25em;
 679 }
 680
 681 /**
 682  * The following code is slightly modified from monobook
 683  */
 684 div#content {
 685         line-height: 1.5em;
 686 }
 687 #bodyContent {
 688         font-size: 0.8em;
 689 }
 690
 691 ul {
 692         list-style-type: disc;
 693         /* @embed */
 694         list-style-image: url(images/bullet-icon.png);
 695 }
 696
 697 pre, .mw-code {
 698         line-height: 1.3em;
 699 }
 700
 701 /* Site Notice (includes notices from CentralNotice extension) */
 702 #siteNotice {
 703         font-size: 0.8em;
 704 }
 705 #firstHeading {
 706         padding-top: 0;
 707         margin-top: 0;
 708         font-size: 1.6em;
 709 }
 710 div#content a.external,
 711 div#content a.external[href ^="gopher://"] {
 712         /* @embed */
 713         background: url(images/external-link-ltr-icon.png) center right no-repeat;
 714         padding-right: 13px;
 715 }
 716 div#content a.external[href ^="https://"],
 717 .link-https {
 718         /* @embed */
 719         background: url(images/lock-icon.png) center right no-repeat;
 720         padding-right: 13px;
 721 }
 722 div#content a.external[href ^="mailto:"],
 723 .link-mailto {
 724         /* @embed */
 725         background: url(images/mail-icon.png) center right no-repeat;
 726         padding-right: 13px;
 727 }
 728 div#content a.external[href ^="news:"] {
 729         /* @embed */
 730         background: url(images/news-icon.png) center right no-repeat;
 731         padding-right: 13px;
 732 }
 733 div#content a.external[href ^="ftp://"],
 734 .link-ftp {
 735         /* @embed */
 736         background: url(images/file-icon.png) center right no-repeat;
 737         padding-right: 13px;
 738 }
 739 div#content a.external[href ^="irc://"],
 740 div#content a.external[href ^="ircs://"],
 741 .link-irc {
 742         /* @embed */
 743         background: url(images/talk-icon.png) center right no-repeat;
 744         padding-right: 13px;
 745 }
 746 div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
 747 div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
 748 div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
 749 div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
 750 div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
 751 div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
 752 .link-audio {
 753         /* @embed */
 754         background: url(images/audio-icon.png) center right no-repeat;
 755         padding-right: 13px;
 756 }
 757 div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
 758 div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
 759 div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
 760 div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
 761 .link-video {
 762         /* @embed */
 763         background: url(images/video-icon.png) center right no-repeat;
 764         padding-right: 13px;
 765 }
 766 div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
 767 div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
 768 div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
 769 .link-document {
 770         /* @embed */
 771         background: url(images/document-icon.png) center right no-repeat;
 772         padding-right: 13px;
 773 }
 774
 775 /* Icon for Usernames */
 776 #pt-userpage,
 777 #pt-anonuserpage,
 778 #pt-login {
 779         /* @embed */
 780         background: url(images/user-icon.png) left top no-repeat;
 781         /* SVG support using a transparent gradient to guarantee cross-browser
 782          * compatibility (browsers able to understand gradient syntax support also SVG) */
 783         /* @embed */
 784         background-image: -webkit-linear-gradient(transparent, transparent), url(images/user-icon.svg);
 785         /* @embed */
 786         background-image: linear-gradient(transparent, transparent), url(images/user-icon.svg);
 787         padding-left: 15px !important;
 788 }
 789
 790 .redirectText {
 791         font-size: 140%;
 792 }
 793
 794 .redirectMsg img {
 795         vertical-align: text-bottom;
 796 }
 797
 798 #bodyContent {
 799         position: relative;
 800         width: 100%;
 801 }
 802 div#bodyContent {
 803         line-height: 1.5em;
 804 }
 805
 806 /* mediawiki.notification */
 807 .skin-vector .mw-notification-area {
 808         font-size: 0.8em;
 809 }
 810 .skin-vector .mw-notification-area-layout {
 811         top: 7em;
 812 }
 813 .skin-vector .mw-notification {
 814         background-color: #fff;
 815         background-color: rgba(255, 255, 255, 0.93);
 816         padding: 0.75em 1.5em;
 817         border: solid 1px #a7d7f9;
 818         border-radius: 0.75em;
 819         -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 820         -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 821         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 822 }
 823
 824 /* Watch/Unwatch Icon Styling */
 825 #ca-unwatch.icon a,
 826 #ca-watch.icon a {
 827         margin: 0;
 828         padding: 0;
 829         outline: none;
 830         display: block;
 831         width: 26px;
 832         /* This hides the text but shows the background image */
 833         padding-top: 3.1em;
 834         margin-top: 0;
 835         /* Only applied in IE6 */
 836         margin-top: -0.8em !ie;
 837         height: 0;
 838         overflow: hidden;
 839         /* @embed */
 840         background-image: url(images/watch-icons.png);
 841 }
 842 #ca-unwatch.icon a {
 843         background-position: -43px 60%;
 844 }
 845 #ca-watch.icon a {
 846         background-position: 5px 60%;
 847 }
 848 #ca-unwatch.icon a:hover,
 849 #ca-unwatch.icon a:focus {
 850         background-position: -67px 60%;
 851 }
 852 #ca-watch.icon a:hover,
 853 #ca-watch.icon a:focus {
 854         background-position: -19px 60%;
 855 }
 856 #ca-unwatch.icon a.loading,
 857 #ca-watch.icon a.loading {
 858         /* @embed */
 859         background-image: url(images/watch-icon-loading.gif);
 860         background-position: 5px 60%;
 861 }
 862 #ca-unwatch.icon a span,
 863 #ca-watch.icon a span {
 864         display: none;
 865 }
 866 div.vectorTabs ul {
 867         /* @embed */
 868         background-image: url(images/tab-break.png);
 869         background-position: right bottom;
 870         background-repeat: no-repeat;
 871 }
 872
 873 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 874 .tipsy {
 875         font-size: 0.8em;
 876 }
 877
 878 /* Animate between standard and high definition layouts */
 879
 880 body.vector-animateLayout div#content,
 881 body.vector-animateLayout div#footer {
 882         -moz-transition: margin-left 250ms, padding 250ms;
 883         -webkit-transition: margin-left 250ms, padding 250ms;
 884         -o-transition: margin-left 250ms, padding 250ms;
 885         transition: margin-left 250ms, padding 250ms;
 886 }
 887 body.vector-animateLayout #p-logo,
 888 body.vector-animateLayout #left-navigation {
 889         -moz-transition: left 250ms;
 890         -webkit-transition: left 250ms;
 891         -o-transition: left 250ms;
 892         transition: left 250ms;
 893 }
 894 body.vector-animateLayout #mw-panel {
 895         -moz-transition: padding-left 250ms;
 896         -webkit-transition: padding-left 250ms;
 897         -o-transition: padding-left 250ms;
 898         transition: padding-left 250ms;
 899 }
 900 body.vector-animateLayout #p-search {
 901         -moz-transition: margin-right 250ms;
 902         -webkit-transition: margin-right 250ms;
 903         -o-transition: margin-right 250ms;
 904         transition: margin-right 250ms;
 905 }
 906 body.vector-animateLayout #p-personal {
 907         -moz-transition: right 250ms;
 908         -webkit-transition: right 250ms;
 909         -o-transition: right 250ms;
 910         transition: right 250ms;
 911 }
 912 body.vector-animateLayout #mw-head-base {
 913         -moz-transition: margin-left 250ms;
 914         -webkit-transition: margin-left 250ms;
 915         -o-transition: margin-left 250ms;
 916         transition: margin-left 250ms;
 917 }