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