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                 margin-top: 0.65em;
 354                 position: relative;
 355                 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
 356                 border: solid 1px #AAAAAA;
 357                 color: black;
 358                 background-color: white;
 359                 /* @embed */
 360                 background-image: url(images/search-fade.png);
 361                 background-position: top left;
 362                 background-repeat: repeat-x;
 363         }
 364         div#simpleSearch label {
 365                 /*
 366                  * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 367                  * this from ever being shown anyways.
 368                 */
 369                 font-size: 13px;
 370                 top: 0.25em;
 371         }
 372         div#simpleSearch input {
 373                 color: black;
 374         }
 375         div#simpleSearch input:focus {
 376                 outline: none;
 377         }
 378         div#simpleSearch input.placeholder {
 379                 color: #999999;
 380         }
 381         div#simpleSearch input::-webkit-input-placeholder {
 382                 color: #999999;
 383         }
 384         div#simpleSearch input#searchInput {
 385                 margin: 0;
 386                 border-width: 0;
 387                 padding: 3px;
 388                 vertical-align: top;
 389                 /*
 390                  * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
 391                  * this from ever being shown anyways.
 392                 */
 393                 font-size: 13px;
 394                 width: 14em;
 395                 background-color: transparent;
 396                 direction: ltr;
 397         }
 398         div#simpleSearch button#searchButton {
 399                 padding: 0;
 400                 margin: 0 5px;
 401                 border: none;
 402                 cursor: pointer;
 403                 background-color: transparent;
 404                 font-size: x-small;
 405         }
 406         /* OVERRIDDEN BY COMPLIANT BROWSERS */
 407         div#simpleSearch button#searchButton img {
 408                 border: none;
 409                 margin: 0;
 410                 padding: 0;
 411                 padding-top: 0.5em;
 412                 vertical-align: middle;
 413         }
 414         /* IGNORED BY IE6 */
 415         div#simpleSearch button#searchButton > img {
 416                 padding-top: 0;
 417                 margin-top: -1px;
 418         }
 419 /* Panel */
 420 div#mw-panel {
 421         position: absolute;
 422         top: 160px;
 423         padding-top: 1em;
 424         width: 10em;
 425         left: 0;
 426 }
 427         div#mw-panel div.portal {
 428                 padding-bottom: 1.5em;
 429                 direction: ltr;
 430         }
 431         div#mw-panel div.portal h5 {
 432                 font-weight: normal;
 433                 color: #444444;
 434                 padding: 0.25em;
 435                 padding-top: 0;
 436                 padding-left: 1.75em;
 437                 cursor: default;
 438                 border: none;
 439                 font-size: 0.75em;
 440         }
 441         div#mw-panel div.portal div.body {
 442                 margin: 0;
 443                 padding-top: 0.5em;
 444                 margin-left: 1.25em;
 445                 /* @embed */
 446                 background-image: url(images/portal-break.png);
 447                 background-repeat: no-repeat;
 448                 background-position: top left;
 449         }
 450         div#mw-panel div.portal div.body ul {
 451                 list-style: none;
 452                 list-style-image: none;
 453                 list-style-type: none;
 454                 padding: 0;
 455                 margin: 0;
 456         }
 457         div#mw-panel div.portal div.body ul li {
 458                 line-height: 1.125em;
 459                 padding: 0;
 460                 padding-bottom: 0.5em;
 461                 margin: 0;
 462                 overflow: hidden;
 463                 font-size: 0.75em;
 464         }
 465         div#mw-panel div.portal div.body ul li a {
 466                 color: #0645ad;
 467         }
 468         div#mw-panel div.portal div.body ul li a:visited {
 469                 color: #0b0080;
 470         }
 471 /* Footer */
 472 div#footer {
 473         margin-left: 10em;
 474         margin-top: 0;
 475         padding: 0.75em;
 476         /* @embed */
 477         background-image: url(images/border.png);
 478         background-position: top left;
 479         background-repeat: repeat-x;
 480         direction: ltr;
 481 }
 482 div#footer ul {
 483         list-style: none;
 484         list-style-image: none;
 485         list-style-type: none;
 486         margin: 0;
 487         padding: 0;
 488 }
 489 div#footer ul li {
 490         margin: 0;
 491         padding: 0;
 492         padding-top: 0.5em;
 493         padding-bottom: 0.5em;
 494         color: #333333;
 495         font-size: 0.7em;
 496 }
 497 div#footer #footer-icons {
 498         float: right;
 499 }
 500 /* @noflip */
 501 body.ltr div#footer #footer-places {
 502         float: left;
 503 }
 504 div#footer #footer-info li {
 505         line-height: 1.4em;
 506 }
 507 div#footer #footer-icons li {
 508         float: left;
 509         margin-left: 0.5em;
 510         line-height: 2em;
 511 }
 512 div#footer #footer-places li {
 513         float: left;
 514         margin-right: 1em;
 515         line-height: 2em;
 516 }
 517 /* Logo */
 518 #p-logo {
 519         position: absolute;
 520         top: -160px;
 521         left: 0;
 522         width: 10em;
 523         height: 160px;
 524 }
 525 #p-logo a {
 526         display: block;
 527         width: 10em;
 528         height: 160px;
 529         background-repeat: no-repeat;
 530         background-position: center center;
 531         text-decoration: none;
 532 }
 533
 534 /*
 535  *
 536  * The following code is highly modified from monobook. It would be nice if the
 537  * preftoc id was more human readable like preferences-toc for instance,
 538  * howerver this would require backporting the other skins.
 539  */
 540
 541 /* Preferences */
 542 #preftoc {
 543         /* Tabs */
 544         width: 100%;
 545         float: left;
 546         clear: both;
 547         margin: 0 !important;
 548         padding: 0 !important;
 549         /* @embed */
 550         background-image: url(images/preferences-break.png);
 551         background-position: bottom left;
 552         background-repeat: no-repeat;
 553 }
 554         #preftoc li {
 555                 /* Tab */
 556                 float: left;
 557                 margin: 0;
 558                 padding: 0;
 559                 padding-right: 1px;
 560                 height: 2.25em;
 561                 white-space: nowrap;
 562                 list-style-type: none;
 563                 list-style-image: none;
 564                 /* @embed */
 565                 background-image: url(images/preferences-break.png);
 566                 background-position: bottom right;
 567                 background-repeat: no-repeat;
 568         }
 569         /* Sadly, IE6 won't understand this */
 570         #preftoc li:first-child {
 571                 margin-left: 1px;
 572         }
 573         #preftoc a,
 574         #preftoc a:active {
 575                 display: inline-block;
 576                 position: relative;
 577                 color: #0645ad;
 578                 padding: 0.5em;
 579                 text-decoration: none;
 580                 background-image: none;
 581                 font-size: 0.9em;
 582         }
 583         #preftoc a:hover,
 584         #preftoc a:focus {
 585                 text-decoration: underline;
 586         }
 587         #preftoc li.selected a {
 588                 /* @embed */
 589                 background-image: url(images/preferences-fade.png);
 590                 background-position: bottom;
 591                 background-repeat: repeat-x;
 592                 color: #333333;
 593                 text-decoration: none;
 594         }
 595 #preferences {
 596         float: left;
 597         width: 100%;
 598         margin: 0;
 599         margin-top: -2px;
 600         clear: both;
 601         border: solid 1px #cccccc;
 602         background-color: #f9f9f9;
 603         /* @embed */
 604         background-image: url(images/preferences-base.png);
 605 }
 606 #preferences fieldset.prefsection {
 607         border: none;
 608         padding: 0;
 609         margin: 1em;
 610 }
 611 #preferences fieldset.prefsection fieldset {
 612         border: none;
 613         border-top: solid 1px #cccccc;
 614 }
 615 #preferences legend {
 616         color: #666666;
 617 }
 618 #preferences fieldset.prefsection legend.mainLegend {
 619         display: none;
 620 }
 621 #preferences td {
 622         padding-left: 0.5em;
 623         padding-right: 0.5em;
 624 }
 625 #preferences td.htmlform-tip {
 626         font-size: x-small;
 627         padding: .2em 2em;
 628         color: #666666;
 629 }
 630 #preferences div.mw-prefs-buttons {
 631         padding: 1em;
 632 }
 633 #preferences div.mw-prefs-buttons input {
 634         margin-right: 0.25em;
 635 }
 636
 637 /*
 638  * Styles for the user login and create account forms
 639  */
 640 #userlogin, #userloginForm {
 641         border: solid 1px #cccccc;
 642         padding: 1.2em;
 643         margin: .5em;
 644         float: left;
 645 }
 646
 647 #userlogin {
 648         min-width: 20em;
 649         max-width: 90%;
 650         width: 40em;
 651 }
 652
 653 /*
 654  *
 655  * The following code is slightly modified from monobook
 656  *
 657  */
 658 div#content {
 659         line-height: 1.5em;
 660 }
 661 #bodyContent {
 662         font-size: 0.8em;
 663 }
 664 /* Links */
 665 a {
 666         text-decoration: none;
 667         color: #0645ad;
 668         background: none;
 669 }
 670 a:visited {
 671         color: #0b0080;
 672 }
 673 a:active {
 674         color: #faa700;
 675 }
 676 a:hover, a:focus {
 677         text-decoration: underline;
 678 }
 679 a.stub {
 680         color: #772233;
 681 }
 682 a.new, #p-personal a.new {
 683         color: #ba0000;
 684 }
 685 a.new:visited, #p-personal a.new:visited {
 686         color: #a55858;
 687 }
 688
 689 /* Inline Elements */
 690 img {
 691         border: none;
 692         vertical-align: middle;
 693 }
 694 hr {
 695         height: 1px;
 696         color: #aaa;
 697         background-color: #aaa;
 698         border: 0;
 699         margin: .2em 0 .2em 0;
 700 }
 701
 702 /* Structural Elements */
 703 h1,
 704 h2,
 705 h3,
 706 h4,
 707 h5,
 708 h6 {
 709         color: black;
 710         background: none;
 711         font-weight: normal;
 712         margin: 0;
 713         overflow: hidden;
 714         padding-top: .5em;
 715         padding-bottom: .17em;
 716         border-bottom: 1px solid #aaa;
 717         width: auto;
 718 }
 719 h1 { font-size: 188%; }
 720 h1 .editsection { font-size: 53%; }
 721 h2 { font-size: 150%; }
 722 h2 .editsection { font-size: 67%; }
 723 h3,
 724 h4,
 725 h5,
 726 h6 {
 727         border-bottom: none;
 728         font-weight: bold;
 729 }
 730 h3 { font-size: 132%; }
 731 h3 .editsection { font-size: 76%; font-weight: normal; }
 732 h4 { font-size: 116%; }
 733 h4 .editsection { font-size: 86%; font-weight: normal; }
 734 h5 { font-size: 100%; }
 735 h5 .editsection { font-weight: normal; }
 736 h6 { font-size: 80%;  }
 737 h6 .editsection { font-size: 125%; font-weight: normal; }
 738 .editsection { float: right; }
 739 p {
 740         margin: .4em 0 .5em 0;
 741         line-height: 1.5em;
 742 }
 743         p img {
 744                 margin: 0;
 745         }
 746 abbr,
 747 acronym,
 748 .explain {
 749         border-bottom: 1px dotted black;
 750         color: black;
 751         background: none;
 752         cursor: help;
 753 }
 754 q {
 755         font-family: Times, "Times New Roman", serif;
 756         font-style: italic;
 757 }
 758 /* Disabled for now
 759 blockquote {
 760         font-family: Times, "Times New Roman", serif;
 761         font-style: italic;
 762 }*/
 763 pre, code, tt, kbd, samp {
 764         /*
 765          * It's important for this rule to first reference an actual font name, some browsers will render the monospace text
 766          * too small otherwise, namely Firefox, Chrome and Safari
 767          */
 768         font-family: monospace, "Courier New";
 769 }
 770 code {
 771         background-color: #f9f9f9;
 772 }
 773 pre {
 774         padding: 1em;
 775         border: 1px dashed #2f6fab;
 776         color: black;
 777         background-color: #f9f9f9;
 778         line-height: 1.1em;
 779 }
 780 ul {
 781         line-height: 1.5em;
 782         list-style-type: square;
 783         margin: .3em 0 0 1.5em;
 784         padding: 0;
 785         /* @embed */
 786         list-style-image: url(images/bullet-icon.png);
 787 }
 788 ol {
 789         line-height: 1.5em;
 790         margin: .3em 0 0 3.2em;
 791         padding: 0;
 792         list-style-image: none;
 793 }
 794 li {
 795         margin-bottom: .1em;
 796 }
 797 dt {
 798         font-weight: bold;
 799         margin-bottom: .1em;
 800 }
 801 dl {
 802         margin-top: .2em;
 803         margin-bottom: .5em;
 804 }
 805 dd {
 806         line-height: 1.5em;
 807         margin-left: 2em;
 808         margin-bottom: .1em;
 809 }
 810 /* Tables */
 811 table {
 812         font-size: 100%;
 813         color: black;
 814         /* we don't want the bottom borders of <h2>s to be visible through
 815          * floated tables */
 816         background-color: white;
 817 }
 818 fieldset table {
 819         /* but keep table layouts in forms clean... */
 820         background: none;
 821 }
 822 /* Forms */
 823 fieldset {
 824         border: 1px solid #2f6fab;
 825         margin: 1em 0 1em 0;
 826         padding: 0 1em 1em;
 827         line-height: 1.5em;
 828 }
 829         fieldset.nested {
 830                 margin: 0 0 0.5em 0;
 831                 padding: 0 0.5em 0.5em;
 832         }
 833 legend {
 834         padding: .5em;
 835         font-size: 95%;
 836 }
 837 form {
 838         border: none;
 839         margin: 0;
 840 }
 841 textarea {
 842         width: 100%;
 843         padding: .1em;
 844 }
 845 select {
 846         vertical-align: top;
 847 }
 848 /* Table of Contents */
 849 #toc,
 850 .toc,
 851 .mw-warning {
 852         border: 1px solid #aaa;
 853         background-color: #f9f9f9;
 854         padding: 5px;
 855         font-size: 95%;
 856 }
 857 #toc h2,
 858 .toc h2 {
 859         display: inline;
 860         border: none;
 861         padding: 0;
 862         font-size: 100%;
 863         font-weight: bold;
 864 }
 865 #toc #toctitle,
 866 .toc #toctitle,
 867 #toc .toctitle,
 868 .toc .toctitle {
 869         text-align: center;
 870 }
 871 #toc ul,
 872 .toc ul {
 873         list-style-type: none;
 874         list-style-image: none;
 875         margin-left: 0;
 876         padding-left: 0;
 877         text-align: left;
 878 }
 879 #toc ul ul,
 880 .toc ul ul {
 881         margin: 0 0 0 2em;
 882 }
 883 #toc .toctoggle,
 884 .toc .toctoggle {
 885         font-size: 94%;
 886 }
 887 /* Images */
 888 div.floatright, table.floatright {
 889         clear: right;
 890         float: right;
 891         position: relative;
 892         margin: 0 0 .5em .5em;
 893         border: 0;
 894 }
 895 div.floatright p { font-style: italic; }
 896 div.floatleft, table.floatleft {
 897         float: left;
 898         clear: left;
 899         position: relative;
 900         margin: 0 .5em .5em 0;
 901         border: 0;
 902 }
 903 div.floatleft p { font-style: italic; }
 904 /* Thumbnails */
 905 div.thumb {
 906         margin-bottom: .5em;
 907         width: auto;
 908         background-color: transparent;
 909 }
 910 div.thumbinner {
 911         border: 1px solid #ccc;
 912         padding: 3px !important;
 913         background-color: #f9f9f9;
 914         font-size: 94%;
 915         text-align: center;
 916         overflow: hidden;
 917 }
 918 html .thumbimage {
 919         border: 1px solid #ccc;
 920 }
 921 html .thumbcaption {
 922         border: none;
 923         text-align: left;
 924         line-height: 1.4em;
 925         padding: 3px !important;
 926         font-size: 94%;
 927 }
 928 div.magnify {
 929         float: right;
 930         border: none !important;
 931         background: none !important;
 932 }
 933 div.magnify a, div.magnify img {
 934         display: block;
 935         border: none !important;
 936         background: none !important;
 937 }
 938 /* @noflip */
 939 div.tright {
 940         clear: right;
 941         float: right;
 942         margin: .5em 0 1.3em 1.4em;
 943 }
 944 /* @noflip */
 945 div.tleft {
 946         float: left;
 947         clear: left;
 948         margin: .5em 1.4em 1.3em 0;
 949 }
 950 img.thumbborder {
 951         border: 1px solid #dddddd;
 952 }
 953 .hiddenStructure {
 954         display: none;
 955 }
 956 /* Warning */
 957 .mw-warning {
 958         margin-left: 50px;
 959         margin-right: 50px;
 960         text-align: center;
 961 }
 962 /* User Message */
 963 .usermessage {
 964         background-color: #e0e8ff;
 965         border: 1px solid #99b3ff;
 966         color: black;
 967         font-weight: bold;
 968         margin: 2em 0 1em;
 969         padding: .5em 1em;
 970         vertical-align: middle;
 971 }
 972 /* Site Notice (includes notices from CentralNotice extension) */
 973 #siteNotice {
 974         position: relative;
 975         text-align: center;
 976         font-size: 0.8em;
 977         margin: 0;
 978 }
 979 #localNotice {
 980         margin-bottom: 0.9em;
 981 }
 982 /* Categories */
 983 .catlinks {
 984         border: 1px solid #aaa;
 985         background-color: #f9f9f9;
 986         padding: 5px;
 987         margin-top: 1em;
 988         clear: both;
 989 }
 990 /* Sub-navigation */
 991 #siteSub {
 992         display: none;
 993 }
 994 #jump-to-nav {
 995         display: none;
 996 }
 997 #contentSub, #contentSub2 {
 998         font-size: 84%;
 999         line-height: 1.2em;
1000         margin: 0 0 1.4em 1em;
1001         color: #7d7d7d;
1002         width: auto;
1003 }
1004 span.subpages {
1005         display: block;
1006 }
1007 /* Emulate Center */
1008 .center {
1009         width: 100%;
1010         text-align: center;
1011 }
1012 *.center * {
1013         margin-left: auto;
1014         margin-right: auto;
1015 }
1016 /* Small for tables and similar */
1017 .small, .small * {
1018         font-size: 94%;
1019 }
1020 table.small {
1021         font-size: 100%;
1022 }
1023 /* Edge Cases for Content */
1024 h1, h2 {
1025         margin-bottom: .6em;
1026 }
1027 h3, h4, h5 {
1028         margin-bottom: .3em;
1029 }
1030 #firstHeading {
1031         padding-top: 0;
1032         margin-top: 0;
1033         padding-top: 0;
1034         margin-bottom: 0.1em;
1035         line-height: 1.2em;
1036         font-size: 1.6em;
1037         padding-bottom: 0;
1038 }
1039 div#content a.external,
1040 div#content a[href ^="gopher://"] {
1041         /* @embed */
1042         background: url(images/external-link-ltr-icon.png) center right no-repeat;
1043         padding-right: 13px;
1044 }
1045 div#content a[href ^="https://"],
1046 .link-https {
1047         /* @embed */
1048         background: url(images/lock-icon.png) center right no-repeat;
1049         padding-right: 13px;
1050 }
1051 div#content a[href ^="mailto:"],
1052 .link-mailto {
1053         /* @embed */
1054         background: url(images/mail-icon.png) center right no-repeat;
1055         padding-right: 13px;
1056 }
1057 div#content a[href ^="news://"] {
1058         /* @embed */
1059         background: url(images/news-icon.png) center right no-repeat;
1060         padding-right: 13px;
1061 }
1062 div#content a[href ^="ftp://"],
1063 .link-ftp {
1064         /* @embed */
1065         background: url(images/file-icon.png) center right no-repeat;
1066         padding-right: 13px;
1067 }
1068 div#content a[href ^="irc://"],
1069 div#content a.extiw[href ^="irc://"],
1070 .link-irc {
1071         /* @embed */
1072         background: url(images/talk-icon.png) center right no-repeat;
1073         padding-right: 13px;
1074 }
1075 div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
1076 div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
1077 div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
1078 div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
1079 div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
1080 div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
1081 .link-audio {
1082         /* @embed */
1083         background: url("images/audio-icon.png?2") center right no-repeat;
1084         padding-right: 13px;
1085 }
1086 div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
1087 div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
1088 div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
1089 div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
1090 .link-video {
1091         /* @embed */
1092         background: url("images/video-icon.png?2") center right no-repeat;
1093         padding-right: 13px;
1094 }
1095 div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
1096 div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
1097 div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
1098 .link-document {
1099         /* @embed */
1100         background: url("images/document-icon.png?2") center right no-repeat;
1101         padding-right: 13px;
1102 }
1103 /* Interwiki Styling  (Disabled) */
1104 div#content a.extiw,
1105 div#content a.extiw:active {
1106         color: #36b;
1107         background: none;
1108         padding: 0;
1109 }
1110 div#content a.external {
1111         color: #36b;
1112 }
1113 div#content .printfooter {
1114         display: none;
1115 }
1116 /* Icon for Usernames */
1117 #pt-userpage,
1118 #pt-anonuserpage,
1119 #pt-login {
1120         /* @embed */
1121         background: url(images/user-icon.png) left top no-repeat;
1122         padding-left: 15px !important;
1123         text-transform: none;
1124 }
1125
1126 .toccolours {
1127         border: 1px solid #aaa;
1128         background-color: #f9f9f9;
1129         padding: 5px;
1130         font-size: 95%;
1131 }
1132 #bodyContent {
1133         position: relative;
1134         width: 100%;
1135 }
1136 #mw-js-message {
1137         font-size: 0.8em;
1138 }
1139 div#bodyContent {
1140         line-height: 1.5em;
1141 }
1142
1143 /* Watch/Unwatch Icon Styling */
1144 #ca-unwatch.icon,
1145 #ca-watch.icon {
1146         margin-right:1px;
1147 }
1148 /* OVERRIDDEN BY COMPLIANT BROWSERS */
1149 #ca-unwatch.icon a,
1150 #ca-watch.icon a {
1151         margin: 0;
1152         padding: 0;
1153         outline: none;
1154         display: block;
1155         width: 26px;
1156         /* This hides the text but shows the background image */
1157         padding-top: 3.1em;
1158         margin-top: -0.8em;
1159         height: 0;
1160         overflow: hidden;
1161         /* @embed */
1162         background-image: url(images/watch-icons.png);
1163 }
1164 /* IGNORED BY IE6 */
1165 html > body #ca-unwatch.icon a,
1166 html > body #ca-watch.icon a {
1167         margin-top: 0;
1168 }
1169 #ca-unwatch.icon a {
1170         background-position: -43px 60%;
1171 }
1172 #ca-watch.icon a {
1173         background-position: 5px 60%;
1174 }
1175 #ca-unwatch.icon a:hover,
1176 #ca-unwatch.icon a:focus {
1177         background-position: -67px 60%;
1178 }
1179 #ca-watch.icon a:hover,
1180 #ca-watch.icon a:focus {
1181         background-position: -19px 60%;
1182 }
1183 #ca-unwatch.icon a.loading,
1184 #ca-watch.icon a.loading {
1185         /* @embed */
1186         background-image: url(images/watch-icon-loading.gif);
1187         background-position: center 60%;
1188 }
1189 #ca-unwatch.icon a span,
1190 #ca-watch.icon a span {
1191         display: none;
1192 }
1193 div.vectorTabs ul {
1194         /* @embed */
1195         background-image:url(images/tab-break.png);
1196         background-position:right bottom;
1197         background-repeat:no-repeat;
1198 }
1199
1200 /* Convenience links to edit block, delete and protect reasons */
1201 p.mw-ipb-conveniencelinks, p.mw-protect-editreasons,
1202 p.mw-filedelete-editreasons, p.mw-delete-editreasons {
1203         float: right;
1204 }
1205
1206 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
1207 .tipsy {
1208         font-size: 0.8em;
1209 }