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