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