skins/vector/screen.css

   1 /*
   2  * Any rules which should not be flipped automatically in right-to-left situations should be
   3  * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
   4  * should be prepended with @embed in a comment block.
   5  *
   6  * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
   7  * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
   8  * a rule that makes things work in IE6, and then following it with a rule that begins with
   9  * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
  10  * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
  11  * "IGNORED BY IE6" comments.
  12  */
  13
  14 /* Framework */
  15 html,
  16 body {
  17         height: 100%;
  18         margin: 0;
  19         padding: 0;
  20         font-family: sans-serif;
  21         font-size: 1em;
  22 }
  23 body {
  24         background-color: #f3f3f3;
  25         /* @embed */
  26         background-image: url(images/page-base.png);
  27 }
  28 /* Content */
  29 div#content {
  30         margin-left: 10em;
  31         padding: 1em;
  32         /* @embed */
  33         background-image: url(images/border.png);
  34         background-position: top left;
  35         background-repeat: repeat-y;
  36         background-color: white;
  37         color: black;
  38         direction: ltr;
  39 }
  40 /* Head */
  41 #mw-page-base {
  42         height: 5em;
  43         background-color: white;
  44         /* @embed */
  45         background-image: url(images/page-fade.png);
  46         background-position: bottom left;
  47         background-repeat: repeat-x;
  48 }
  49 #mw-head-base {
  50         margin-top: -5em;
  51         margin-left: 10em;
  52         height: 5em;
  53         /* @embed */
  54         background-image: url(images/border.png);
  55         background-position: bottom left;
  56         background-repeat: repeat-x;
  57 }
  58 div#mw-head {
  59         position: absolute;
  60         top: 0;
  61         right: 0;
  62         width: 100%;
  63 }
  64 div#mw-head h5 {
  65         margin: 0;
  66         padding: 0;
  67 }
  68         /* Hide empty portlets */
  69         div.emptyPortlet {
  70                 display: none;
  71         }
  72         /* Personal */
  73         #p-personal {
  74                 position: absolute;
  75                 top: 0;
  76                 padding-left: 10em;
  77                 right: 0.75em;
  78         }
  79         #p-personal h5 {
  80                 display: none;
  81         }
  82         #p-personal ul {
  83                 list-style: none;
  84                 margin: 0;
  85                 padding: 0;
  86         }
  87         /* @noflip */
  88         #p-personal li {
  89                 line-height: 1.125em;
  90                 float: left;
  91         }
  92         /* This one flips! */
  93         #p-personal li {
  94                 margin-left: 0.75em;
  95                 margin-top: 0.5em;
  96                 font-size: 0.75em;
  97                 white-space: nowrap;
  98         }
  99         /* Navigation Containers */
 100         #left-navigation {
 101                 position: absolute;
 102                 left: 10em;
 103                 top: 2.5em;
 104         }
 105         #right-navigation {
 106                 float: right;
 107                 margin-top: 2.5em;
 108         }
 109         /* Navigation Labels */
 110         div.vectorTabs h5,
 111         div.vectorMenu h5 span {
 112                 display: none;
 113         }
 114         /* Namespaces and Views */
 115         /* @noflip */
 116         div.vectorTabs {
 117                 float: left;
 118                 height: 2.5em;
 119         }
 120         div.vectorTabs {
 121                 /* @embed */
 122                 background-image: url(images/tab-break.png);
 123                 background-position: bottom left;
 124                 background-repeat: no-repeat;
 125                 padding-left: 1px;
 126         }
 127         /* @noflip */
 128         div.vectorTabs ul {
 129                 float: left;
 130         }
 131         div.vectorTabs ul {
 132                 height: 100%;
 133                 list-style: none;
 134                 margin: 0;
 135                 padding: 0;
 136         }
 137         /* @noflip */
 138         div.vectorTabs ul li {
 139                 float: left;
 140         }
 141         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 142         div.vectorTabs ul li {
 143                 line-height: 1.125em;
 144                 display: inline-block;
 145                 height: 100%;
 146                 margin: 0;
 147                 padding: 0;
 148                 background-color: #f3f3f3;
 149                 /* @embed */
 150                 background-image: url(images/tab-normal-fade.png);
 151                 background-position: bottom left;
 152                 background-repeat: repeat-x;
 153                 white-space:nowrap;
 154         }
 155         /* IGNORED BY IE6 */
 156         div.vectorTabs ul > li {
 157                 display: block;
 158         }
 159         div.vectorTabs li.selected {
 160                 /* @embed */
 161                 background-image: url(images/tab-current-fade.png);
 162         }
 163         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 164         div.vectorTabs li a {
 165                 display: inline-block;
 166                 height: 1.9em;
 167                 padding-left: 0.5em;
 168                 padding-right: 0.5em;
 169                 /* @embed */
 170                 background-image: url(images/tab-break.png);
 171                 background-position: bottom right;
 172                 background-repeat: no-repeat;
 173                 color: #0645ad;
 174                 cursor: pointer;
 175                 font-size: 0.8em;
 176         }
 177         /* IGNORED BY IE6 */
 178         div.vectorTabs li > a {
 179                 display: block;
 180         }
 181         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 182         div.vectorTabs span a  {
 183                 display: inline-block;
 184                 padding-top: 1.25em;
 185         }
 186         /* IGNORED BY IE6 */
 187         /* @noflip */
 188         div.vectorTabs span > a {
 189                 float: left;
 190                 display: block;
 191         }
 192         div.vectorTabs li.selected a,
 193         div.vectorTabs li.selected a:visited{
 194                 color: #333333;
 195                 text-decoration: none;
 196         }
 197         div.vectorTabs li.new a,
 198         div.vectorTabs li.new a:visited{
 199                 color: #a55858;
 200         }
 201         /* Variants and Actions */
 202         /* @noflip */
 203         div.vectorMenu {
 204                 direction: ltr;
 205                 float: left;
 206                 /* @embed */
 207                 background-image: url(images/arrow-down-icon.png);
 208                 background-position: 100% 60%;
 209                 background-repeat: no-repeat;
 210                 cursor: pointer;
 211         }
 212         /* @noflip */
 213         body.rtl div.vectorMenu {
 214                 direction: rtl;
 215         }
 216         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 217         /* @noflip */
 218         div#mw-head div.vectorMenu h5 {
 219                 float: left;
 220                 /* @embed */
 221                 background-image: url(images/tab-break.png);
 222                 background-repeat: no-repeat;
 223         }
 224         /* This will be flipped - unlike the one above it */
 225         div#mw-head div.vectorMenu h5 {
 226                 background-position: bottom left;
 227                 margin-left: -1px;
 228         }
 229         /* IGNORED BY IE6 */
 230         div#mw-head div.vectorMenu > h5 {
 231                 background-image: none;
 232         }
 233         div#mw-head div.vectorMenu h4 {
 234                 display: inline-block;
 235                 float: left;
 236                 font-size: 0.8em;
 237                 padding-left: 0.5em;
 238                 padding-top: 1.375em;
 239                 font-weight: normal;
 240                 border: none;
 241         }
 242         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 243         /* @noflip */
 244         div.vectorMenu h5 a {
 245                 display: inline-block;
 246                 width: 24px;
 247                 height: 2.5em;
 248                 text-decoration: none;
 249                 /* @embed */
 250                 background-image: url(images/tab-break.png);
 251                 background-repeat: no-repeat;
 252         }
 253         /* This will be flipped - unlike the one above it */
 254         div.vectorMenu h5 a {
 255                 background-position: bottom right;
 256         }
 257         /* IGNORED BY IE6 */
 258         div.vectorMenu h5 > a {
 259                 display: block;
 260         }
 261         div.vectorMenu div.menu {
 262                 position: relative;
 263                 display: none;
 264                 clear: both;
 265                 text-align: left;
 266         }
 267         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 268         /* @noflip */
 269         body.rtl div.vectorMenu div.menu {
 270                 margin-left: 24px;
 271         }
 272         /* IGNORED BY IE6 */
 273         /* @noflip */
 274         body.rtl div.vectorMenu > div.menu {
 275                 margin-left: auto;
 276         }
 277         /* IGNORED BY IE6 */
 278         /* Also fixes old versions of FireFox */
 279         /* @noflip */
 280         body.rtl div.vectorMenu > div.menu,
 281         x:-moz-any-link {
 282                 margin-left: 23px;
 283         }
 284         div.vectorMenu:hover div.menu {
 285                 display: block;
 286         }
 287         div.vectorMenu ul {
 288                 position: absolute;
 289                 background-color: white;
 290                 border: solid 1px silver;
 291                 border-top-width: 0;
 292                 list-style: none;
 293                 list-style-image: none;
 294                 list-style-type: none;
 295                 padding: 0;
 296                 margin: 0;
 297                 margin-left: -1px;
 298                 text-align: left;
 299         }
 300         /* Fixes old versions of FireFox */
 301         div.vectorMenu ul,
 302         x:-moz-any-link {
 303                 min-width: 5em;
 304         }
 305         /* Returns things back to normal in modern versions of FireFox */
 306         div.vectorMenu ul,
 307         x:-moz-any-link,
 308         x:default {
 309                 min-width: 0;
 310         }
 311         div.vectorMenu li {
 312                 padding: 0;
 313                 margin: 0;
 314                 text-align: left;
 315                 line-height: 1em;
 316         }
 317         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 318         div.vectorMenu li a {
 319                 display: inline-block;
 320                 padding: 0.5em;
 321                 white-space: nowrap;
 322                 color: #0645ad;
 323                 cursor: pointer;
 324                 font-size: 0.8em;
 325         }
 326         /* IGNORED BY IE6 */
 327         div.vectorMenu li > a {
 328                 display: block;
 329         }
 330         div.vectorMenu li.selected a,
 331         div.vectorMenu li.selected a:visited {
 332                 color: #333333;
 333                 text-decoration: none;
 334         }
 335         /* Search */
 336         #p-search h5 {
 337                 display: none;
 338         }
 339         /* @noflip */
 340         #p-search {
 341                 float: left;
 342         }
 343         #p-search {
 344                 margin-right: 0.5em;
 345                 margin-left: 0.5em;
 346         }
 347         #p-search form,
 348         #p-search input {
 349                 margin: 0;
 350                 margin-top: 0.4em;
 351         }
 352         div#simpleSearch {
 353                 display: block;
 354                 width: 14em;
 355                 height: 1.4em;
 356                 margin-top: 0.65em;
 357                 position: relative;
 358                 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
 359                 border: solid 1px #AAAAAA;
 360                 color: black;
 361                 background-color: white;
 362                 /* @embed */
 363                 background-image: url(images/search-fade.png);
 364                 background-position: top left;
 365                 background-repeat: repeat-x;
 366         }
 367         div#simpleSearch label {
 368                 /*
 369                  * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 370                  * this from ever being shown anyways.
 371                 */
 372                 font-size: 13px;
 373                 top: 0.25em;
 374                 direction: ltr;
 375         }
 376         div#simpleSearch input {
 377                 color: black;
 378                 direction: ltr;
 379         }
 380         div#simpleSearch input:focus {
 381                 outline: none;
 382         }
 383         div#simpleSearch input.placeholder {
 384                 color: #999999;
 385         }
 386         div#simpleSearch input::-webkit-input-placeholder {
 387                 color: #999999;
 388         }
 389         div#simpleSearch input#searchInput {
 390                 position: absolute;
 391                 top: 0;
 392                 left: 0;
 393                 width: 90%;
 394                 margin: 0;
 395                 padding: 0;
 396                 padding-left: 0.2em;
 397                 padding-top: 0.2em;
 398                 padding-bottom: 0.2em;
 399                 outline: none;
 400                 border: none;
 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                 background-color: transparent;
 407                 direction: ltr;
 408         }
 409         div#simpleSearch button#searchButton {
 410                 position: absolute;
 411                 width: 10%;
 412                 right: 0;
 413                 top: 0;
 414                 padding: 0;
 415                 padding-top: 0.2em;
 416                 padding-bottom: 0.2em;
 417                 padding-right: 0.4em;
 418                 margin: 0;
 419                 border: none;
 420                 cursor: pointer;
 421                 background-color: transparent;
 422         }
 423         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 424         div#simpleSearch button#searchButton img {
 425                 border: none;
 426                 margin: 0;
 427                 margin-top: -3px;
 428                 padding: 0;
 429         }
 430         /* IGNORED BY IE6 */
 431         div#simpleSearch button#searchButton > img {
 432                 margin: 0;
 433         }
 434 /* Panel */
 435 div#mw-panel {
 436         position: absolute;
 437         top: 160px;
 438         padding-top: 1em;
 439         width: 10em;
 440         left: 0;
 441 }
 442         div#mw-panel div.portal {
 443                 padding-bottom: 1.5em;
 444                 direction: ltr;
 445         }
 446         div#mw-panel div.portal h5 {
 447                 font-weight: normal;
 448                 color: #444444;
 449                 padding: 0.25em;
 450                 padding-top: 0;
 451                 padding-left: 1.75em;
 452                 cursor: default;
 453                 border: none;
 454                 font-size: 0.75em;
 455         }
 456         div#mw-panel div.portal div.body {
 457                 margin: 0;
 458                 padding-top: 0.5em;
 459                 margin-left: 1.25em;
 460                 /* @embed */
 461                 background-image: url(images/portal-break.png);
 462                 background-repeat: no-repeat;
 463                 background-position: top left;
 464         }
 465         div#mw-panel div.portal div.body ul {
 466                 list-style: none;
 467                 list-style-image: none;
 468                 list-style-type: none;
 469                 padding: 0;
 470                 margin: 0;
 471         }
 472         div#mw-panel div.portal div.body ul li {
 473                 line-height: 1.125em;
 474                 padding: 0;
 475                 padding-bottom: 0.5em;
 476                 margin: 0;
 477                 overflow: hidden;
 478                 font-size: 0.75em;
 479         }
 480         div#mw-panel div.portal div.body ul li a {
 481                 color: #0645ad;
 482         }
 483         div#mw-panel div.portal div.body ul li a:visited {
 484                 color: #0b0080;
 485         }
 486 /* Footer */
 487 div#footer {
 488         margin-left: 10em;
 489         margin-top: 0;
 490         padding: 0.75em;
 491         /* @embed */
 492         background-image: url(images/border.png);
 493         background-position: top left;
 494         background-repeat: repeat-x;
 495         direction: ltr;
 496 }
 497 div#footer ul {
 498         list-style: none;
 499         list-style-image: none;
 500         list-style-type: none;
 501         margin: 0;
 502         padding: 0;
 503 }
 504 div#footer ul li {
 505         margin: 0;
 506         padding: 0;
 507         padding-top: 0.5em;
 508         padding-bottom: 0.5em;
 509         color: #333333;
 510         font-size: 0.7em;
 511 }
 512 div#footer #footer-icons {
 513         float: right;
 514 }
 515 /* @noflip */
 516 body.ltr div#footer #footer-places {
 517         float: left;
 518 }
 519 div#footer #footer-info li {
 520         line-height: 1.4em;
 521 }
 522 div#footer #footer-icons li {
 523         float: left;
 524         margin-left: 0.5em;
 525         line-height: 2em;
 526 }
 527 div#footer #footer-places li {
 528         float: left;
 529         margin-right: 1em;
 530         line-height: 2em;
 531 }
 532 /* Logo */
 533 #p-logo {
 534         position: absolute;
 535         top: -160px;
 536         left: 0;
 537         width: 10em;
 538         height: 160px;
 539 }
 540 #p-logo a {
 541         display: block;
 542         width: 10em;
 543         height: 160px;
 544         background-repeat: no-repeat;
 545         background-position: center center;
 546         text-decoration: none;
 547 }
 548
 549 /*
 550  *
 551  * The following code is highly modified from monobook. It would be nice if the
 552  * preftoc id was more human readable like preferences-toc for instance,
 553  * howerver this would require backporting the other skins.
 554  */
 555
 556 /* Preferences */
 557 #preftoc {
 558         /* Tabs */
 559         width: 100%;
 560         float: left;
 561         clear: both;
 562         margin: 0 !important;
 563         padding: 0 !important;
 564         /* @embed */
 565         background-image: url(images/preferences-break.png);
 566         background-position: bottom left;
 567         background-repeat: no-repeat;
 568 }
 569         #preftoc li {
 570                 /* Tab */
 571                 float: left;
 572                 margin: 0;
 573                 padding: 0;
 574                 padding-right: 1px;
 575                 height: 2.25em;
 576                 white-space: nowrap;
 577                 list-style-type: none;
 578                 list-style-image: none;
 579                 /* @embed */
 580                 background-image: url(images/preferences-break.png);
 581                 background-position: bottom right;
 582                 background-repeat: no-repeat;
 583         }
 584         /* Sadly, IE6 won't understand this */
 585         #preftoc li:first-child {
 586                 margin-left: 1px;
 587         }
 588         #preftoc a,
 589         #preftoc a:active {
 590                 display: inline-block;
 591                 position: relative;
 592                 color: #0645ad;
 593                 padding: 0.5em;
 594                 text-decoration: none;
 595                 background-image: none;
 596                 font-size: 0.9em;
 597         }
 598         #preftoc a:hover,
 599         #preftoc a:focus {
 600                 text-decoration: underline;
 601         }
 602         #preftoc li.selected a {
 603                 /* @embed */
 604                 background-image: url(images/preferences-fade.png);
 605                 background-position: bottom;
 606                 background-repeat: repeat-x;
 607                 color: #333333;
 608                 text-decoration: none;
 609         }
 610 #preferences {
 611         float: left;
 612         width: 100%;
 613         margin: 0;
 614         margin-top: -2px;
 615         clear: both;
 616         border: solid 1px #cccccc;
 617         background-color: #f9f9f9;
 618         /* @embed */
 619         background-image: url(images/preferences-base.png);
 620 }
 621 #preferences fieldset.prefsection {
 622         border: none;
 623         padding: 0;
 624         margin: 1em;
 625 }
 626 #preferences fieldset.prefsection fieldset {
 627         border: none;
 628         border-top: solid 1px #cccccc;
 629 }
 630 #preferences legend {
 631         color: #666666;
 632 }
 633 #preferences fieldset.prefsection legend.mainLegend {
 634         display: none;
 635 }
 636 #preferences td {
 637         padding-left: 0.5em;
 638         padding-right: 0.5em;
 639 }
 640 #preferences td.htmlform-tip {
 641         font-size: x-small;
 642         padding: .2em 2em;
 643         color: #666666;
 644 }
 645 #preferences div.mw-prefs-buttons {
 646         padding: 1em;
 647 }
 648 #preferences div.mw-prefs-buttons input {
 649         margin-right: 0.25em;
 650 }
 651
 652 /*
 653  * Styles for the user login and create account forms
 654  */
 655 #userlogin, #userloginForm {
 656         border: solid 1px #cccccc;
 657         padding: 1.2em;
 658         margin: .5em;
 659         float: left;
 660 }
 661
 662 #userlogin {
 663         min-width: 20em;
 664         max-width: 90%;
 665         width: 40em;
 666 }
 667
 668 /*
 669  *
 670  * The following code is slightly modified from monobook
 671  *
 672  */
 673 div#content {
 674         line-height: 1.5em;
 675 }
 676 #bodyContent {
 677         font-size: 0.8em;
 678 }
 679 /* Links */
 680 a {
 681         text-decoration: none;
 682         color: #0645ad;
 683         background: none;
 684 }
 685 a:visited {
 686         color: #0b0080;
 687 }
 688 a:active {
 689         color: #faa700;
 690 }
 691 a:hover, a:focus {
 692         text-decoration: underline;
 693 }
 694 a.stub {
 695         color: #772233;
 696 }
 697 a.new, #p-personal a.new {
 698         color: #ba0000;
 699 }
 700 a.new:visited, #p-personal a.new:visited {
 701         color: #a55858;
 702 }
 703
 704 /* Inline Elements */
 705 img {
 706         border: none;
 707         vertical-align: middle;
 708 }
 709 hr {
 710         height: 1px;
 711         color: #aaa;
 712         background-color: #aaa;
 713         border: 0;
 714         margin: .2em 0 .2em 0;
 715 }
 716
 717 /* Structural Elements */
 718 h1,
 719 h2,
 720 h3,
 721 h4,
 722 h5,
 723 h6 {
 724         color: black;
 725         background: none;
 726         font-weight: normal;
 727         margin: 0;
 728         overflow: hidden;
 729         padding-top: .5em;
 730         padding-bottom: .17em;
 731         border-bottom: 1px solid #aaa;
 732         width: auto;
 733 }
 734 h1 { font-size: 188%; }
 735 h1 .editsection { font-size: 53%; }
 736 h2 { font-size: 150%; }
 737 h2 .editsection { font-size: 67%; }
 738 h3,
 739 h4,
 740 h5,
 741 h6 {
 742         border-bottom: none;
 743         font-weight: bold;
 744 }
 745 h3 { font-size: 132%; }
 746 h3 .editsection { font-size: 76%; font-weight: normal; }
 747 h4 { font-size: 116%; }
 748 h4 .editsection { font-size: 86%; font-weight: normal; }
 749 h5 { font-size: 100%; }
 750 h5 .editsection { font-weight: normal; }
 751 h6 { font-size: 80%;  }
 752 h6 .editsection { font-size: 125%; font-weight: normal; }
 753 .editsection { float: right; }
 754 p {
 755         margin: .4em 0 .5em 0;
 756         line-height: 1.5em;
 757 }
 758         p img {
 759                 margin: 0;
 760         }
 761 abbr,
 762 acronym,
 763 .explain {
 764         border-bottom: 1px dotted black;
 765         color: black;
 766         background: none;
 767         cursor: help;
 768 }
 769 q {
 770         font-family: Times, "Times New Roman", serif;
 771         font-style: italic;
 772 }
 773 /* Disabled for now
 774 blockquote {
 775         font-family: Times, "Times New Roman", serif;
 776         font-style: italic;
 777 }*/
 778 pre, code, tt, kbd, samp {
 779         /*
 780          * It's important for this rule to first reference an actual font name, some browsers will render the monospace text
 781          * too small otherwise, namely Firefox, Chrome and Safari
 782          */
 783         font-family: monospace, "Courier New";
 784 }
 785 code {
 786         background-color: #f9f9f9;
 787 }
 788 pre {
 789         padding: 1em;
 790         border: 1px dashed #2f6fab;
 791         color: black;
 792         background-color: #f9f9f9;
 793         line-height: 1.1em;
 794 }
 795 ul {
 796         line-height: 1.5em;
 797         list-style-type: square;
 798         margin: .3em 0 0 1.5em;
 799         padding: 0;
 800         /* @embed */
 801         list-style-image: url(images/bullet-icon.png);
 802 }
 803 ol {
 804         line-height: 1.5em;
 805         margin: .3em 0 0 3.2em;
 806         padding: 0;
 807         list-style-image: none;
 808 }
 809 li {
 810         margin-bottom: .1em;
 811 }
 812 dt {
 813         font-weight: bold;
 814         margin-bottom: .1em;
 815 }
 816 dl {
 817         margin-top: .2em;
 818         margin-bottom: .5em;
 819 }
 820 dd {
 821         line-height: 1.5em;
 822         margin-left: 2em;
 823         margin-bottom: .1em;
 824 }
 825 /* Tables */
 826 table {
 827         font-size: 100%;
 828         color: black;
 829 }
 830 /* Forms */
 831 fieldset {
 832         border: 1px solid #2f6fab;
 833         margin: 1em 0 1em 0;
 834         padding: 0 1em 1em;
 835         line-height: 1.5em;
 836 }
 837         fieldset.nested {
 838                 margin: 0 0 0.5em 0;
 839                 padding: 0 0.5em 0.5em;
 840         }
 841 legend {
 842         padding: .5em;
 843         font-size: 95%;
 844 }
 845 form {
 846         border: none;
 847         margin: 0;
 848 }
 849 textarea {
 850         width: 100%;
 851         padding: .1em;
 852 }
 853 select {
 854         vertical-align: top;
 855 }
 856 /* Table of Contents */
 857 #toc,
 858 .toc,
 859 .mw-warning {
 860         border: 1px solid #aaa;
 861         background-color: #f9f9f9;
 862         padding: 5px;
 863         font-size: 95%;
 864 }
 865 #toc h2,
 866 .toc h2 {
 867         display: inline;
 868         border: none;
 869         padding: 0;
 870         font-size: 100%;
 871         font-weight: bold;
 872 }
 873 #toc #toctitle,
 874 .toc #toctitle,
 875 #toc .toctitle,
 876 .toc .toctitle {
 877         text-align: center;
 878 }
 879 #toc ul,
 880 .toc ul {
 881         list-style-type: none;
 882         list-style-image: none;
 883         margin-left: 0;
 884         padding-left: 0;
 885         text-align: left;
 886 }
 887 #toc ul ul,
 888 .toc ul ul {
 889         margin: 0 0 0 2em;
 890 }
 891 #toc .toctoggle,
 892 .toc .toctoggle {
 893         font-size: 94%;
 894 }
 895 /* Images */
 896 div.floatright, table.floatright {
 897         clear: right;
 898         float: right;
 899         position: relative;
 900         margin: 0 0 .5em .5em;
 901         border: 0;
 902 }
 903 div.floatright p { font-style: italic; }
 904 div.floatleft, table.floatleft {
 905         float: left;
 906         clear: left;
 907         position: relative;
 908         margin: 0 .5em .5em 0;
 909         border: 0;
 910 }
 911 div.floatleft p { font-style: italic; }
 912 /* Thumbnails */
 913 div.thumb {
 914         margin-bottom: .5em;
 915         width: auto;
 916         background-color: transparent;
 917 }
 918 div.thumbinner {
 919         border: 1px solid #ccc;
 920         padding: 3px !important;
 921         background-color: #f9f9f9;
 922         font-size: 94%;
 923         text-align: center;
 924         overflow: hidden;
 925 }
 926 html .thumbimage {
 927         border: 1px solid #ccc;
 928 }
 929 html .thumbcaption {
 930         border: none;
 931         text-align: left;
 932         line-height: 1.4em;
 933         padding: 3px !important;
 934         font-size: 94%;
 935 }
 936 div.magnify {
 937         float: right;
 938         border: none !important;
 939         background: none !important;
 940 }
 941 div.magnify a, div.magnify img {
 942         display: block;
 943         border: none !important;
 944         background: none !important;
 945 }
 946 /* @noflip */
 947 div.tright {
 948         clear: right;
 949         float: right;
 950         margin: .5em 0 1.3em 1.4em;
 951 }
 952 /* @noflip */
 953 div.tleft {
 954         float: left;
 955         clear: left;
 956         margin: .5em 1.4em 1.3em 0;
 957 }
 958 img.thumbborder {
 959         border: 1px solid #dddddd;
 960 }
 961 .hiddenStructure {
 962         display: none;
 963 }
 964 /* Warning */
 965 .mw-warning {
 966         margin-left: 50px;
 967         margin-right: 50px;
 968         text-align: center;
 969 }
 970 /* User Message */
 971 .usermessage {
 972         background-color: #ffce7b;
 973         border: 1px solid #ffa500;
 974         color: black;
 975         font-weight: bold;
 976         margin: 2em 0 1em;
 977         padding: .5em 1em;
 978         vertical-align: middle;
 979 }
 980 /* Site Notice (includes notices from CentralNotice extension) */
 981 #siteNotice {
 982         position: relative;
 983         text-align: center;
 984         font-size: 0.8em;
 985         margin: 0;
 986 }
 987 #localNotice {
 988         margin-bottom: 0.9em;
 989 }
 990 /* Categories */
 991 .catlinks {
 992         border: 1px solid #aaa;
 993         background-color: #f9f9f9;
 994         padding: 5px;
 995         margin-top: 1em;
 996         clear: both;
 997 }
 998 /* Sub-navigation */
 999 #siteSub {
1000         display: none;
1001 }
1002 #jump-to-nav {
1003         display: none;
1004 }
1005 #contentSub, #contentSub2 {
1006         font-size: 84%;
1007         line-height: 1.2em;
1008         margin: 0 0 1.4em 1em;
1009         color: #7d7d7d;
1010         width: auto;
1011 }
1012 span.subpages {
1013         display: block;
1014 }
1015 /* Emulate Center */
1016 .center {
1017         width: 100%;
1018         text-align: center;
1019 }
1020 *.center * {
1021         margin-left: auto;
1022         margin-right: auto;
1023 }
1024 /* Small for tables and similar */
1025 .small, .small * {
1026         font-size: 94%;
1027 }
1028 table.small {
1029         font-size: 100%;
1030 }
1031 /* Edge Cases for Content */
1032 h1, h2 {
1033         margin-bottom: .6em;
1034 }
1035 h3, h4, h5 {
1036         margin-bottom: .3em;
1037 }
1038 #firstHeading {
1039         padding-top: 0;
1040         margin-top: 0;
1041         padding-top: 0;
1042         margin-bottom: 0.1em;
1043         line-height: 1.2em;
1044         font-size: 1.6em;
1045         padding-bottom: 0;
1046 }
1047 div#content a.external,
1048 div#content a[href ^="gopher://"] {
1049         /* @embed */
1050         background: url(images/external-link-ltr-icon.png) center right no-repeat;
1051         padding-right: 13px;
1052 }
1053 div#content a[href ^="https://"],
1054 .link-https {
1055         /* @embed */
1056         background: url(images/lock-icon.png) center right no-repeat;
1057         padding-right: 13px;
1058 }
1059 div#content a[href ^="mailto:"],
1060 .link-mailto {
1061         /* @embed */
1062         background: url(images/mail-icon.png) center right no-repeat;
1063         padding-right: 13px;
1064 }
1065 div#content a[href ^="news://"] {
1066         /* @embed */
1067         background: url(images/news-icon.png) center right no-repeat;
1068         padding-right: 13px;
1069 }
1070 div#content a[href ^="ftp://"],
1071 .link-ftp {
1072         /* @embed */
1073         background: url(images/file-icon.png) center right no-repeat;
1074         padding-right: 13px;
1075 }
1076 div#content a[href ^="irc://"],
1077 div#content a.extiw[href ^="irc://"],
1078 .link-irc {
1079         /* @embed */
1080         background: url(images/talk-icon.png) center right no-repeat;
1081         padding-right: 13px;
1082 }
1083 div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
1084 div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
1085 div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
1086 div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
1087 div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
1088 div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
1089 .link-audio {
1090         /* @embed */
1091         background: url("images/audio-icon.png?2") center right no-repeat;
1092         padding-right: 13px;
1093 }
1094 div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
1095 div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
1096 div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
1097 div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
1098 .link-video {
1099         /* @embed */
1100         background: url("images/video-icon.png?2") center right no-repeat;
1101         padding-right: 13px;
1102 }
1103 div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
1104 div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
1105 div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
1106 .link-document {
1107         /* @embed */
1108         background: url("images/document-icon.png?2") center right no-repeat;
1109         padding-right: 13px;
1110 }
1111
1112 /* Interwiki Styling */
1113 div#content a.extiw,
1114 div#content a.extiw:active {
1115         color: #36b;
1116         /* Don't show icons for interwiki links */
1117         background: none;
1118         padding: 0;
1119 }
1120 div#content a.extiw:visited {
1121         color: #636;
1122 }
1123 div#content a.extiw:active {
1124         color: #b63;
1125 }
1126
1127 /* External links */
1128 div#content a.external {
1129         color: #36b;
1130 }
1131 div#content a.external:visited {
1132         color: #636; /* bug 3112 */
1133 }
1134 div#content a.external:active {
1135         color: #b63;
1136 }
1137
1138
1139 div#content .printfooter {
1140         display: none;
1141 }
1142 /* Icon for Usernames */
1143 #pt-userpage,
1144 #pt-anonuserpage,
1145 #pt-login {
1146         /* @embed */
1147         background: url(images/user-icon.png) left top no-repeat;
1148         padding-left: 15px !important;
1149         text-transform: none;
1150 }
1151
1152 .toccolours {
1153         border: 1px solid #aaa;
1154         background-color: #f9f9f9;
1155         padding: 5px;
1156         font-size: 95%;
1157 }
1158 #bodyContent {
1159         position: relative;
1160         width: 100%;
1161 }
1162 #mw-js-message {
1163         font-size: 0.8em;
1164 }
1165 div#bodyContent {
1166         line-height: 1.5em;
1167 }
1168
1169 /* Watch/Unwatch Icon Styling */
1170 #ca-unwatch.icon,
1171 #ca-watch.icon {
1172         margin-right:1px;
1173 }
1174 #ca-unwatch.icon a,
1175 #ca-watch.icon a {
1176         margin: 0;
1177         padding: 0;
1178         outline: none;
1179         display: block;
1180         width: 26px;
1181         /* This hides the text but shows the background image */
1182         padding-top: 3.1em;
1183         margin-top: 0;
1184         /* Only applied in IE6 */
1185         margin-top: -0.8em !ie;
1186         height: 0;
1187         overflow: hidden;
1188         /* @embed */
1189         background-image: url(images/watch-icons.png);
1190 }
1191 #ca-unwatch.icon a {
1192         background-position: -43px 60%;
1193 }
1194 #ca-watch.icon a {
1195         background-position: 5px 60%;
1196 }
1197 #ca-unwatch.icon a:hover,
1198 #ca-unwatch.icon a:focus {
1199         background-position: -67px 60%;
1200 }
1201 #ca-watch.icon a:hover,
1202 #ca-watch.icon a:focus {
1203         background-position: -19px 60%;
1204 }
1205 #ca-unwatch.icon a.loading,
1206 #ca-watch.icon a.loading {
1207         /* @embed */
1208         background-image: url(images/watch-icon-loading.gif);
1209         background-position: 5px 60%;
1210 }
1211 #ca-unwatch.icon a span,
1212 #ca-watch.icon a span {
1213         display: none;
1214 }
1215 div.vectorTabs ul {
1216         /* @embed */
1217         background-image:url(images/tab-break.png);
1218         background-position:right bottom;
1219         background-repeat:no-repeat;
1220 }
1221
1222 /* Convenience links to edit block, delete and protect reasons */
1223 p.mw-ipb-conveniencelinks, p.mw-protect-editreasons,
1224 p.mw-filedelete-editreasons, p.mw-delete-editreasons {
1225         float: right;
1226 }
1227
1228 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
1229 .tipsy {
1230         font-size: 0.8em;
1231 }