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