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