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-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 h5,
 113 div.vectorMenu h5 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         background-position: 100% 60%;
 219         background-repeat: no-repeat;
 220         cursor: pointer;
 221 }
 222 div.vectorMenuFocus {
 223         /* @embed */
 224         background-image: url(images/arrow-down-focus-icon.png);
 225         background-position: 100% 60%;
 226 }
 227 /* @noflip */
 228 body.rtl div.vectorMenu {
 229         direction: rtl;
 230 }
 231 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 232 /* @noflip */
 233 div#mw-head div.vectorMenu h5 {
 234         float: left;
 235         /* @embed */
 236         background-image: url(images/tab-break.png);
 237         background-repeat: no-repeat;
 238 }
 239 /* This will be flipped - unlike the one above it */
 240 div#mw-head div.vectorMenu h5 {
 241         background-position: bottom left;
 242         margin-left: -1px;
 243 }
 244 /* IGNORED BY IE6 */
 245 div#mw-head div.vectorMenu > h5 {
 246         background-image: none;
 247 }
 248 div#mw-head div.vectorMenu h4 {
 249         display: inline-block;
 250         float: left;
 251         font-size: 0.8em;
 252         padding-left: 0.5em;
 253         padding-top: 1.375em;
 254         font-weight: normal;
 255         border: none;
 256 }
 257 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 258 /* @noflip */
 259 div.vectorMenu h5 a {
 260         display: inline-block;
 261         width: 24px;
 262         height: 2.5em;
 263         text-decoration: none;
 264         /* @embed */
 265         background-image: url(images/tab-break.png);
 266         background-repeat: no-repeat;
 267 }
 268 /* This will be flipped - unlike the one above it */
 269 div.vectorMenu h5 a {
 270         background-position: bottom right;
 271 }
 272 /* IGNORED BY IE6 */
 273 div.vectorMenu h5 > a {
 274         display: block;
 275 }
 276 div.vectorMenu div.menu {
 277         position: relative;
 278         display: none;
 279         clear: both;
 280         text-align: left;
 281 }
 282 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 283 /* @noflip */
 284 body.rtl div.vectorMenu div.menu {
 285         margin-left: 24px;
 286 }
 287 /* IGNORED BY IE6 */
 288 /* @noflip */
 289 body.rtl div.vectorMenu > div.menu {
 290         margin-left: auto;
 291 }
 292 /* IGNORED BY IE6 */
 293 /* Also fixes old versions of FireFox */
 294 /* @noflip */
 295 body.rtl div.vectorMenu > div.menu,
 296 x:-moz-any-link {
 297         margin-left: 23px;
 298 }
 299 /* Enable forcing showing of the menu for accessibility */
 300 div.vectorMenu:hover div.menu,
 301 div.vectorMenu div.menuForceShow {
 302         display: block;
 303 }
 304 div.vectorMenu ul {
 305         position: absolute;
 306         background-color: white;
 307         border: solid 1px silver;
 308         border-top-width: 0;
 309         list-style-type: none;
 310         list-style-image: none;
 311         padding: 0;
 312         margin: 0;
 313         margin-left: -1px;
 314         text-align: left;
 315 }
 316 /* Fixes old versions of FireFox */
 317 div.vectorMenu ul,
 318 x:-moz-any-link {
 319         min-width: 5em;
 320 }
 321 /* Returns things back to normal in modern versions of FireFox */
 322 div.vectorMenu ul,
 323 x:-moz-any-link,
 324 x:default {
 325         min-width: 0;
 326 }
 327 div.vectorMenu li {
 328         padding: 0;
 329         margin: 0;
 330         text-align: left;
 331         line-height: 1em;
 332 }
 333 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 334 div.vectorMenu li a {
 335         display: inline-block;
 336         padding: 0.5em;
 337         white-space: nowrap;
 338         color: #0645ad;
 339         cursor: pointer;
 340         font-size: 0.8em;
 341 }
 342 /* IGNORED BY IE6 */
 343 div.vectorMenu li > a {
 344         display: block;
 345 }
 346 div.vectorMenu li.selected a,
 347 div.vectorMenu li.selected a:visited {
 348         color: #333;
 349         text-decoration: none;
 350 }
 351 /* Search */
 352 #p-search h5 {
 353         display: none;
 354 }
 355 /* @noflip */
 356 #p-search {
 357         float: left;
 358 }
 359 #p-search {
 360         margin-right: 0.5em;
 361         margin-left: 0.5em;
 362 }
 363 #p-search form,
 364 #p-search input {
 365         margin: 0;
 366         margin-top: 0.4em;
 367 }
 368 div#simpleSearch {
 369         display: block;
 370         width: 14em;
 371         height: 1.4em;
 372         margin-top: 0.65em;
 373         position: relative;
 374         min-height: 1px; /* Gotta trigger hasLayout for IE7 */
 375         border: solid 1px #aaa;
 376         color: black;
 377         background-color: white;
 378         /* @embed */
 379         background-image: url(images/search-fade.png);
 380         background-position: top left;
 381         background-repeat: repeat-x;
 382 }
 383 div#simpleSearch label {
 384         /*
 385          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 386          * this from ever being shown anyways.
 387         */
 388         font-size: 13px;
 389         top: 0.25em;
 390         direction: ltr;
 391 }
 392 div#simpleSearch input {
 393         color: black;
 394         direction: ltr;
 395 }
 396 div#simpleSearch input:focus {
 397         outline: none;
 398 }
 399 div#simpleSearch input.placeholder {
 400         color: #999;
 401 }
 402 div#simpleSearch input::-webkit-input-placeholder {
 403         color: #999;
 404 }
 405 div#simpleSearch input:-moz-placeholder {
 406         color: #999;
 407 }
 408 div#simpleSearch input:-ms-input-placeholder {
 409         color: #999;
 410 }
 411 div#simpleSearch input#searchInput {
 412         position: absolute;
 413         top: 0;
 414         left: 0;
 415         width: 90%;
 416         margin: 0;
 417         padding: 0;
 418         padding-left: 0.2em;
 419         padding-top: 0.2em;
 420         padding-bottom: 0.2em;
 421         outline: none;
 422         border: none;
 423         /*
 424          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 425          * this from ever being shown anyways.
 426         */
 427         font-size: 13px;
 428         background-color: transparent;
 429         direction: ltr;
 430 }
 431 div#simpleSearch button#searchButton {
 432         position: absolute;
 433         width: 10%;
 434         right: 0;
 435         top: 0;
 436         padding: 0;
 437         padding-top: 0.3em;
 438         padding-bottom: 0.2em;
 439         padding-right: 0.4em;
 440         margin: 0;
 441         border: none;
 442         cursor: pointer;
 443         background-color: transparent;
 444         background-image: none;
 445 }
 446 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 447 div#simpleSearch button#searchButton img {
 448         border: none;
 449         margin: 0;
 450         margin-top: -3px;
 451         padding: 0;
 452 }
 453 /* IGNORED BY IE6 */
 454 div#simpleSearch button#searchButton > img {
 455         margin: 0;
 456 }
 457 /* Panel */
 458 div#mw-panel {
 459         position: absolute;
 460         top: 160px;
 461         padding-top: 1em;
 462         width: 10em;
 463         left: 0;
 464 }
 465 div#mw-panel div.portal {
 466         padding-bottom: 1.5em;
 467         direction: ltr;
 468 }
 469 div#mw-panel div.portal h5 {
 470         font-weight: normal;
 471         color: #444;
 472         padding: 0.25em;
 473         padding-top: 0;
 474         padding-left: 1.75em;
 475         cursor: default;
 476         border: none;
 477         font-size: 0.75em;
 478 }
 479 div#mw-panel div.portal div.body {
 480         margin: 0;
 481         padding-top: 0.5em;
 482         margin-left: 1.25em;
 483         /* @embed */
 484         background-image: url(images/portal-break.png);
 485         background-repeat: no-repeat;
 486         background-position: top left;
 487 }
 488 div#mw-panel div.portal div.body ul {
 489         list-style-type: none;
 490         list-style-image: 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-type: none;
 521         list-style-image: none;
 522         margin: 0;
 523         padding: 0;
 524 }
 525 div#footer ul li {
 526         margin: 0;
 527         padding: 0;
 528         padding-top: 0.5em;
 529         padding-bottom: 0.5em;
 530         color: #333;
 531         font-size: 0.7em;
 532 }
 533 div#footer #footer-icons {
 534         float: right;
 535 }
 536 /* @noflip */
 537 body.ltr div#footer #footer-places {
 538         float: left;
 539 }
 540 div#footer #footer-info li {
 541         line-height: 1.4em;
 542 }
 543 div#footer #footer-icons li {
 544         float: left;
 545         margin-left: 0.5em;
 546         line-height: 2em;
 547         text-align: right;
 548 }
 549 div#footer #footer-places li {
 550         float: left;
 551         margin-right: 1em;
 552         line-height: 2em;
 553 }
 554 /* Logo */
 555 #p-logo {
 556         position: absolute;
 557         top: -160px;
 558         left: 0;
 559         width: 10em;
 560         height: 160px;
 561 }
 562 #p-logo a {
 563         display: block;
 564         width: 10em;
 565         height: 160px;
 566         background-repeat: no-repeat;
 567         background-position: center center;
 568         text-decoration: none;
 569 }
 570
 571 /*
 572  *
 573  * The following code is highly modified from monobook. It would be nice if the
 574  * preftoc id was more human readable like preferences-toc for instance,
 575  * howerver this would require backporting the other skins.
 576  */
 577
 578 /* Preferences */
 579 #preftoc {
 580         /* Tabs */
 581         width: 100%;
 582         float: left;
 583         clear: both;
 584         margin: 0 !important;
 585         padding: 0 !important;
 586         /* @embed */
 587         background-image: url(images/preferences-break.png);
 588         background-position: bottom left;
 589         background-repeat: no-repeat;
 590 }
 591         #preftoc li {
 592                 /* Tab */
 593                 float: left;
 594                 margin: 0;
 595                 padding: 0;
 596                 padding-right: 1px;
 597                 height: 2.25em;
 598                 white-space: nowrap;
 599                 list-style-type: none;
 600                 list-style-image: none;
 601                 /* @embed */
 602                 background-image: url(images/preferences-break.png);
 603                 background-position: bottom right;
 604                 background-repeat: no-repeat;
 605         }
 606         /* Sadly, IE6 won't understand this */
 607         #preftoc li:first-child {
 608                 margin-left: 1px;
 609         }
 610         #preftoc a,
 611         #preftoc a:active {
 612                 display: inline-block;
 613                 position: relative;
 614                 color: #0645ad;
 615                 padding: 0.5em;
 616                 text-decoration: none;
 617                 background-image: none;
 618                 font-size: 0.9em;
 619         }
 620         #preftoc a:hover,
 621         #preftoc a:focus {
 622                 text-decoration: underline;
 623         }
 624         #preftoc li.selected a {
 625                 /* @embed */
 626                 background-image: url(images/preferences-fade.png);
 627                 background-position: bottom;
 628                 background-repeat: repeat-x;
 629                 color: #333;
 630                 text-decoration: none;
 631         }
 632 #preferences {
 633         float: left;
 634         width: 100%;
 635         margin: 0;
 636         margin-top: -2px;
 637         clear: both;
 638         border: solid 1px #ccc;
 639         background-color: #f9f9f9;
 640         /* @embed */
 641         background-image: url(images/preferences-base.png);
 642 }
 643 #preferences fieldset {
 644         border: none;
 645         border-top: solid 1px #ccc;
 646 }
 647 #preferences fieldset.prefsection {
 648         border: none;
 649         padding: 0;
 650         margin: 1em;
 651 }
 652 #preferences legend {
 653         color: #666;
 654 }
 655 #preferences fieldset.prefsection legend.mainLegend {
 656         display: none;
 657 }
 658 #preferences td {
 659         padding-left: 0.5em;
 660         padding-right: 0.5em;
 661 }
 662 .htmlform-tip {
 663         font-size: x-small;
 664         padding: .2em 2em;
 665         color: #666;
 666 }
 667 #preferences div.mw-prefs-buttons {
 668         padding: 1em;
 669 }
 670 #preferences div.mw-prefs-buttons input {
 671         margin-right: 0.25em;
 672 }
 673
 674 /**
 675  * The following code is slightly modified from monobook
 676  */
 677 div#content {
 678         line-height: 1.5em;
 679 }
 680 #bodyContent {
 681         font-size: 0.8em;
 682 }
 683
 684 .editsection {
 685         float: right;
 686 }
 687
 688 ul {
 689         list-style-type: disc;
 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 }