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