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:-moz-placeholder {
 403         color: #999;
 404 }
 405 div#simpleSearch input:-ms-input-placeholder {
 406         color: #999;
 407 }
 408 div#simpleSearch input#searchInput {
 409         position: absolute;
 410         top: 0;
 411         left: 0;
 412         width: 90%;
 413         margin: 0;
 414         padding: 0;
 415         padding-left: 0.2em;
 416         padding-top: 0.2em;
 417         padding-bottom: 0.2em;
 418         outline: none;
 419         border: none;
 420         /*
 421          * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 422          * this from ever being shown anyways.
 423         */
 424         font-size: 13px;
 425         background-color: transparent;
 426         direction: ltr;
 427 }
 428 div#simpleSearch button#searchButton {
 429         position: absolute;
 430         width: 10%;
 431         right: 0;
 432         top: 0;
 433         padding: 0;
 434         padding-top: 0.3em;
 435         padding-bottom: 0.2em;
 436         padding-right: 0.4em;
 437         margin: 0;
 438         border: none;
 439         cursor: pointer;
 440         background-color: transparent;
 441         background-image: none;
 442 }
 443 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 444 div#simpleSearch button#searchButton img {
 445         border: none;
 446         margin: 0;
 447         margin-top: -3px;
 448         padding: 0;
 449 }
 450 /* IGNORED BY IE6 */
 451 div#simpleSearch button#searchButton > img {
 452         margin: 0;
 453 }
 454 /* Panel */
 455 div#mw-panel {
 456         position: absolute;
 457         top: 160px;
 458         padding-top: 1em;
 459         width: 10em;
 460         left: 0;
 461 }
 462 div#mw-panel div.portal {
 463         padding-bottom: 1.5em;
 464         direction: ltr;
 465 }
 466 div#mw-panel div.portal h5 {
 467         font-weight: normal;
 468         color: #444;
 469         padding: 0.25em;
 470         padding-top: 0;
 471         padding-left: 1.75em;
 472         cursor: default;
 473         border: none;
 474         font-size: 0.75em;
 475 }
 476 div#mw-panel div.portal div.body {
 477         margin: 0;
 478         padding-top: 0.5em;
 479         margin-left: 1.25em;
 480         /* @embed */
 481         background-image: url(images/portal-break.png);
 482         background-repeat: no-repeat;
 483         background-position: top left;
 484 }
 485 div#mw-panel div.portal div.body ul {
 486         list-style: none;
 487         list-style-image: none;
 488         list-style-type: none;
 489         padding: 0;
 490         margin: 0;
 491 }
 492 div#mw-panel div.portal div.body ul li {
 493         line-height: 1.125em;
 494         padding: 0;
 495         padding-bottom: 0.5em;
 496         margin: 0;
 497         font-size: 0.75em;
 498         word-wrap: break-word;
 499 }
 500 div#mw-panel div.portal div.body ul li a {
 501         color: #0645ad;
 502 }
 503 div#mw-panel div.portal div.body ul li a:visited {
 504         color: #0b0080;
 505 }
 506 /* Footer */
 507 div#footer {
 508         margin-left: 10em;
 509         margin-top: 0;
 510         padding: 0.75em;
 511         /* @embed */
 512         background-image: url(images/border.png);
 513         background-position: top left;
 514         background-repeat: repeat-x;
 515         direction: ltr;
 516 }
 517 div#footer ul {
 518         list-style: none;
 519         list-style-image: none;
 520         list-style-type: none;
 521         margin: 0;
 522         padding: 0;
 523 }
 524 div#footer ul li {
 525         margin: 0;
 526         padding: 0;
 527         padding-top: 0.5em;
 528         padding-bottom: 0.5em;
 529         color: #333;
 530         font-size: 0.7em;
 531 }
 532 div#footer #footer-icons {
 533         float: right;
 534 }
 535 /* @noflip */
 536 body.ltr div#footer #footer-places {
 537         float: left;
 538 }
 539 div#footer #footer-info li {
 540         line-height: 1.4em;
 541 }
 542 div#footer #footer-icons li {
 543         float: left;
 544         margin-left: 0.5em;
 545         line-height: 2em;
 546         text-align: right;
 547 }
 548 div#footer #footer-places li {
 549         float: left;
 550         margin-right: 1em;
 551         line-height: 2em;
 552 }
 553 /* Logo */
 554 #p-logo {
 555         position: absolute;
 556         top: -160px;
 557         left: 0;
 558         width: 10em;
 559         height: 160px;
 560 }
 561 #p-logo a {
 562         display: block;
 563         width: 10em;
 564         height: 160px;
 565         background-repeat: no-repeat;
 566         background-position: center center;
 567         text-decoration: none;
 568 }
 569
 570 /*
 571  *
 572  * The following code is highly modified from monobook. It would be nice if the
 573  * preftoc id was more human readable like preferences-toc for instance,
 574  * howerver this would require backporting the other skins.
 575  */
 576
 577 /* Preferences */
 578 #preftoc {
 579         /* Tabs */
 580         width: 100%;
 581         float: left;
 582         clear: both;
 583         margin: 0 !important;
 584         padding: 0 !important;
 585         /* @embed */
 586         background-image: url(images/preferences-break.png);
 587         background-position: bottom left;
 588         background-repeat: no-repeat;
 589 }
 590         #preftoc li {
 591                 /* Tab */
 592                 float: left;
 593                 margin: 0;
 594                 padding: 0;
 595                 padding-right: 1px;
 596                 height: 2.25em;
 597                 white-space: nowrap;
 598                 list-style-type: none;
 599                 list-style-image: none;
 600                 /* @embed */
 601                 background-image: url(images/preferences-break.png);
 602                 background-position: bottom right;
 603                 background-repeat: no-repeat;
 604         }
 605         /* Sadly, IE6 won't understand this */
 606         #preftoc li:first-child {
 607                 margin-left: 1px;
 608         }
 609         #preftoc a,
 610         #preftoc a:active {
 611                 display: inline-block;
 612                 position: relative;
 613                 color: #0645ad;
 614                 padding: 0.5em;
 615                 text-decoration: none;
 616                 background-image: none;
 617                 font-size: 0.9em;
 618         }
 619         #preftoc a:hover,
 620         #preftoc a:focus {
 621                 text-decoration: underline;
 622         }
 623         #preftoc li.selected a {
 624                 /* @embed */
 625                 background-image: url(images/preferences-fade.png);
 626                 background-position: bottom;
 627                 background-repeat: repeat-x;
 628                 color: #333;
 629                 text-decoration: none;
 630         }
 631 #preferences {
 632         float: left;
 633         width: 100%;
 634         margin: 0;
 635         margin-top: -2px;
 636         clear: both;
 637         border: solid 1px #ccc;
 638         background-color: #f9f9f9;
 639         /* @embed */
 640         background-image: url(images/preferences-base.png);
 641 }
 642 #preferences fieldset {
 643         border: none;
 644         border-top: solid 1px #ccc;
 645 }
 646 #preferences fieldset.prefsection {
 647         border: none;
 648         padding: 0;
 649         margin: 1em;
 650 }
 651 #preferences legend {
 652         color: #666;
 653 }
 654 #preferences fieldset.prefsection legend.mainLegend {
 655         display: none;
 656 }
 657 #preferences td {
 658         padding-left: 0.5em;
 659         padding-right: 0.5em;
 660 }
 661 .htmlform-tip {
 662         font-size: x-small;
 663         padding: .2em 2em;
 664         color: #666;
 665 }
 666 #preferences div.mw-prefs-buttons {
 667         padding: 1em;
 668 }
 669 #preferences div.mw-prefs-buttons input {
 670         margin-right: 0.25em;
 671 }
 672
 673 /**
 674  * The following code is slightly modified from monobook
 675  */
 676 div#content {
 677         line-height: 1.5em;
 678 }
 679 #bodyContent {
 680         font-size: 0.8em;
 681 }
 682
 683 .editsection {
 684         float: right;
 685 }
 686
 687 ul {
 688         /* @embed */
 689         list-style-image: url(images/bullet-icon.png);
 690 }
 691
 692 pre, .mw-code {
 693         line-height: 1.3em;
 694 }
 695
 696 /* Site Notice (includes notices from CentralNotice extension) */
 697 #siteNotice {
 698         font-size: 0.8em;
 699 }
 700 #firstHeading {
 701         padding-top: 0;
 702         margin-top: 0;
 703         padding-top: 0;
 704         font-size: 1.6em;
 705 }
 706 div#content a.external,
 707 div#content a.external[href ^="gopher://"] {
 708         /* @embed */
 709         background: url(images/external-link-ltr-icon.png) center right no-repeat;
 710         padding-right: 13px;
 711 }
 712 div#content a.external[href ^="https://"],
 713 .link-https {
 714         /* @embed */
 715         background: url(images/lock-icon.png) center right no-repeat;
 716         padding-right: 13px;
 717 }
 718 div#content a.external[href ^="mailto:"],
 719 .link-mailto {
 720         /* @embed */
 721         background: url(images/mail-icon.png) center right no-repeat;
 722         padding-right: 13px;
 723 }
 724 div#content a.external[href ^="news:"] {
 725         /* @embed */
 726         background: url(images/news-icon.png) center right no-repeat;
 727         padding-right: 13px;
 728 }
 729 div#content a.external[href ^="ftp://"],
 730 .link-ftp {
 731         /* @embed */
 732         background: url(images/file-icon.png) center right no-repeat;
 733         padding-right: 13px;
 734 }
 735 div#content a.external[href ^="irc://"],
 736 div#content a.external[href ^="ircs://"],
 737 .link-irc {
 738         /* @embed */
 739         background: url(images/talk-icon.png) center right no-repeat;
 740         padding-right: 13px;
 741 }
 742 div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
 743 div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
 744 div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
 745 div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
 746 div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
 747 div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
 748 .link-audio {
 749         /* @embed */
 750         background: url(images/audio-icon.png) center right no-repeat;
 751         padding-right: 13px;
 752 }
 753 div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
 754 div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
 755 div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
 756 div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
 757 .link-video {
 758         /* @embed */
 759         background: url(images/video-icon.png) center right no-repeat;
 760         padding-right: 13px;
 761 }
 762 div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
 763 div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
 764 div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
 765 .link-document {
 766         /* @embed */
 767         background: url(images/document-icon.png) center right no-repeat;
 768         padding-right: 13px;
 769 }
 770
 771 /* Icon for Usernames */
 772 #pt-userpage,
 773 #pt-anonuserpage,
 774 #pt-login {
 775         /* @embed */
 776         background: url(images/user-icon.png) left top no-repeat;
 777         padding-left: 15px !important;
 778         text-transform: none;
 779 }
 780
 781 .redirectText {
 782         font-size: 140%;
 783 }
 784
 785 .redirectMsg img {
 786         vertical-align: text-bottom;
 787 }
 788
 789 #bodyContent {
 790         position: relative;
 791         width: 100%;
 792 }
 793 div#bodyContent {
 794         line-height: 1.5em;
 795 }
 796
 797 /* mediawiki.notification */
 798 .skin-vector #mw-notification-area {
 799         top: 7em;
 800         font-size: 0.8em;
 801 }
 802 .skin-vector .mw-notification {
 803         background-color: #fff;
 804         background-color: rgba(255, 255, 255, 0.93);
 805         padding: 0.75em 1.5em;
 806         border: solid 1px #a7d7f9;
 807         border-radius: 0.75em;
 808         -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 809         -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 810         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 811 }
 812
 813 /* Watch/Unwatch Icon Styling */
 814 #ca-unwatch.icon a,
 815 #ca-watch.icon a {
 816         margin: 0;
 817         padding: 0;
 818         outline: none;
 819         display: block;
 820         width: 26px;
 821         /* This hides the text but shows the background image */
 822         padding-top: 3.1em;
 823         margin-top: 0;
 824         /* Only applied in IE6 */
 825         margin-top: -0.8em !ie;
 826         height: 0;
 827         overflow: hidden;
 828         /* @embed */
 829         background-image: url(images/watch-icons.png);
 830 }
 831 #ca-unwatch.icon a {
 832         background-position: -43px 60%;
 833 }
 834 #ca-watch.icon a {
 835         background-position: 5px 60%;
 836 }
 837 #ca-unwatch.icon a:hover,
 838 #ca-unwatch.icon a:focus {
 839         background-position: -67px 60%;
 840 }
 841 #ca-watch.icon a:hover,
 842 #ca-watch.icon a:focus {
 843         background-position: -19px 60%;
 844 }
 845 #ca-unwatch.icon a.loading,
 846 #ca-watch.icon a.loading {
 847         /* @embed */
 848         background-image: url(images/watch-icon-loading.gif);
 849         background-position: 5px 60%;
 850 }
 851 #ca-unwatch.icon a span,
 852 #ca-watch.icon a span {
 853         display: none;
 854 }
 855 div.vectorTabs ul {
 856         /* @embed */
 857         background-image: url(images/tab-break.png);
 858         background-position: right bottom;
 859         background-repeat: no-repeat;
 860 }
 861
 862 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 863 .tipsy {
 864         font-size: 0.8em;
 865 }
 866
 867 /* Animate between standard and high definition layouts */
 868
 869 body.vector-animateLayout div#content,
 870 body.vector-animateLayout div#footer {
 871         -moz-transition: margin-left 250ms, padding 250ms;
 872         -webkit-transition: margin-left 250ms, padding 250ms;
 873         -o-transition: margin-left 250ms, padding 250ms;
 874         transition: margin-left 250ms, padding 250ms;
 875 }
 876 body.vector-animateLayout #p-logo,
 877 body.vector-animateLayout #left-navigation {
 878         -moz-transition: left 250ms;
 879         -webkit-transition: left 250ms;
 880         -o-transition: left 250ms;
 881         transition: left 250ms;
 882 }
 883 body.vector-animateLayout #mw-panel {
 884         -moz-transition: padding-left 250ms;
 885         -webkit-transition: padding-left 250ms;
 886         -o-transition: padding-left 250ms;
 887         transition: padding-left 250ms;
 888 }
 889 body.vector-animateLayout #p-search {
 890         -moz-transition: margin-right 250ms;
 891         -webkit-transition: margin-right 250ms;
 892         -o-transition: margin-right 250ms;
 893         transition: margin-right 250ms;
 894 }
 895 body.vector-animateLayout #p-personal {
 896         -moz-transition: right 250ms;
 897         -webkit-transition: right 250ms;
 898         -o-transition: right 250ms;
 899         transition: right 250ms;
 900 }
 901 body.vector-animateLayout #mw-head-base {
 902         -moz-transition: margin-left 250ms;
 903         -webkit-transition: margin-left 250ms;
 904         -o-transition: margin-left 250ms;
 905         transition: margin-left 250ms;
 906 }