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