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