skins/MonoBook/main.css

   1 /*
   2 ** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
   3 ** Copyright Gabriel Wicke - http://wikidev.net/
   4 ** License: GPL (http://www.gnu.org/copyleft/gpl.html)
   5 **
   6 ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
   7 ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
   8 ** Michael Zeltner and Geir Bækholt)
   9 ** All you guys rock :)
  10 */
  11
  12 div#column-content {
  13         width: 100%;
  14         float: right;
  15         margin: 0 0 0.6em -12.2em;
  16         padding: 0;
  17 }
  18
  19 .mw-body {
  20         margin: 2.8em 0 0 12.2em;
  21         padding: 1em;
  22         position: relative;
  23         z-index: 2;
  24         background: #fff;
  25         color: #000;
  26         border: 1px solid #aaa;
  27         border-right: 0;
  28         line-height: 1.5em;
  29 }
  30
  31 div#column-one {
  32         padding-top: 160px;
  33 }
  34
  35 /* Hide, but keep accessible for screen-readers */
  36 #column-one h2 {
  37         position: absolute;
  38         top: -9999px;
  39 }
  40
  41 /* the left column width is specified in class .portlet */
  42
  43 /* Font size:
  44 ** We take advantage of keyword scaling- browsers won't go below 9px
  45 ** More at http://www.w3.org/2003/07/30-font-size
  46 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
  47 */
  48
  49 body {
  50         font: x-small sans-serif;
  51         /* @embed */
  52         background: #f9f9f9 url( headbg.jpg ) 0 0 no-repeat;
  53         color: #000;
  54         margin: 0;
  55         padding: 0;
  56         direction: ltr; /* Needed for RTL flipping */
  57         unicode-bidi: embed;
  58 }
  59
  60 /* scale back up to a sane default */
  61 div#globalWrapper {
  62         font-size: 127%;
  63         width: 100%;
  64         margin: 0;
  65         padding: 0;
  66         position: relative;
  67         z-index: 0;
  68 }
  69
  70 /* general styles */
  71 a {
  72         color: #002bb8;
  73 }
  74
  75 a:visited {
  76         color: #5a3696;
  77 }
  78
  79 a.new,
  80 #p-personal a.new {
  81         color: #c20;
  82 }
  83
  84 ul {
  85         list-style-type: square;
  86         /* @embed */
  87         list-style-image: url( bullet.gif );
  88 }
  89
  90 pre,
  91 .mw-code {
  92         line-height: 1.1em;
  93 }
  94
  95 #firstHeading {
  96         padding-top: 0;
  97         overflow: visible;
  98 }
  99
 100 .mw-indicators {
 101         float: right;
 102         line-height: 1.5em;
 103         font-size: 95%;
 104 }
 105
 106 .mw-indicator {
 107         display: -moz-inline-block;
 108         display: inline-block;
 109         zoom: 1;
 110         *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */
 111 }
 112
 113 /*
 114 ** the main content area
 115 */
 116
 117 #siteNotice {
 118         font-size: 95%;
 119         padding: 0 0.9em;
 120 }
 121
 122 #localNotice {
 123         margin: 0;
 124 }
 125
 126 #siteNotice p {
 127         margin: 0;
 128         padding: 0;
 129 }
 130
 131 /*
 132 ** classes for special content elements like town boxes
 133 ** intended to be referenced directly from the wiki src
 134 */
 135
 136 /*
 137 ** User styles
 138 */
 139 /* table standards */
 140 table.rimage {
 141         float: right;
 142         position: relative;
 143         margin-left: 1em;
 144         margin-bottom: 1em;
 145         text-align: center;
 146 }
 147
 148 /*
 149 ** edit views etc
 150 */
 151 .special li {
 152         line-height: 1.4em;
 153         margin: 0;
 154         padding: 0;
 155 }
 156
 157 /*
 158 ** Structural Elements
 159 */
 160
 161 /*
 162 ** general portlet styles (elements in the quickbar)
 163 */
 164 .portlet {
 165         border: 0;
 166         margin: 0 0 0.5em;
 167         padding: 0;
 168         float: none;
 169         width: 11.6em;
 170         overflow: hidden;
 171 }
 172
 173 .portlet h3 {
 174         background: transparent;
 175         padding: 0 1em 0 0.5em;
 176         display: inline;
 177         height: 1em;
 178         text-transform: lowercase;
 179         font-size: 91%;
 180         font-weight: normal;
 181         white-space: nowrap;
 182 }
 183
 184 .pBody {
 185         font-size: 95%;
 186         background-color: #fff;
 187         color: #000;
 188         border-collapse: collapse;
 189         border: 1px solid #aaa;
 190         padding: 0 0.8em 0.3em 0.5em;
 191 }
 192
 193 /* allows .pBody styles to wrap around content added via BaseTemplateAfterPortlet hook */
 194 .pBody:after {
 195         content: '';
 196         clear: both;
 197         display: block;
 198 }
 199
 200 .portlet ul {
 201         line-height: 1.5em;
 202         font-size: 95%;
 203 }
 204
 205 .portlet li {
 206         padding: 0;
 207         margin: 0;
 208 }
 209
 210 /*
 211 ** Logo properties
 212 */
 213
 214 #p-logo {
 215         top: 0;
 216         left: 0;
 217         position: absolute; /*needed to use z-index */
 218         z-index: 3;
 219         height: 155px;
 220         width: 12em;
 221         overflow: visible;
 222 }
 223
 224 #p-logo h3 {
 225         display: none;
 226 }
 227
 228 #p-logo a,
 229 #p-logo a:hover {
 230         display: block;
 231         height: 155px;
 232         width: 12.2em;
 233         background-repeat: no-repeat;
 234         background-position: 35% 50% !important; /* stylelint-disable-line declaration-no-important */
 235         text-decoration: none;
 236 }
 237
 238 /*
 239 ** Search portlet
 240 */
 241 #p-search {
 242         position: relative;
 243         z-index: 3;
 244 }
 245
 246 input.searchButton {
 247         margin-top: 1px;
 248         font-size: 95%;
 249 }
 250
 251 #searchGoButton {
 252         padding-left: 0.5em;
 253         padding-right: 0.5em;
 254         font-weight: bold;
 255 }
 256
 257 #searchInput {
 258         width: 10.9em;
 259         margin: 0;
 260         font-size: 95%;
 261 }
 262
 263 #p-search .pBody {
 264         padding: 0.5em 0.4em 0.4em 0.4em;
 265         text-align: center;
 266 }
 267
 268 #p-search #searchform div div {
 269         margin-top: 0.4em;
 270         font-size: 95%;
 271 }
 272
 273 /*
 274 ** the personal toolbar
 275 */
 276 #p-personal {
 277         position: absolute;
 278         left: 0;
 279         top: 0;
 280         z-index: 3;
 281
 282         width: 100%;
 283         white-space: nowrap;
 284         padding: 0;
 285         margin: 0;
 286         border: 0;
 287         background: none;
 288         overflow: visible;
 289         line-height: 1.2em;
 290 }
 291
 292 #p-personal h3 {
 293         display: none;
 294 }
 295
 296 #p-personal .portlet,
 297 #p-personal .pBody {
 298         z-index: 0;
 299         padding: 0;
 300         margin: 0;
 301         border: 0;
 302         overflow: visible;
 303         background: none;
 304 }
 305
 306 /* this is the ul contained in the portlet */
 307 #p-personal ul {
 308         border: 0;
 309         line-height: 1.4em;
 310         color: #2f6fab;
 311         padding: 0;
 312         padding-right: 2em;
 313         /* Avoid overlap with the logo. */
 314         padding-left: 14em;
 315         margin: 0;
 316         text-align: right;
 317         list-style-type: none;
 318         list-style-image: none;
 319         z-index: 0;
 320         background: none;
 321         cursor: default;
 322         text-transform: lowercase;
 323 }
 324
 325 #p-personal li {
 326         z-index: 0;
 327         border: 0;
 328         padding: 0;
 329         display: inline;
 330         color: #2f6fab;
 331         margin-left: 1em;
 332         line-height: 1.2em;
 333         background: none;
 334 }
 335
 336 #p-personal li a {
 337         text-decoration: none;
 338         color: #005896;
 339         padding-bottom: 0.2em;
 340 }
 341
 342 #p-personal li a:hover {
 343         background-color: #fff;
 344         text-decoration: none;
 345 }
 346
 347 #p-personal li.active a:hover {
 348         background-color: transparent;
 349 }
 350
 351 /* The icon in front of the username / login link */
 352 li#pt-userpage,
 353 li#pt-anonuserpage,
 354 li#pt-login {
 355         /* @embed */
 356         background: url( user.gif ) top left no-repeat;
 357         padding-left: 20px;
 358 }
 359
 360 /* Don't lowercase username */
 361 li#pt-userpage {
 362         text-transform: none;
 363 }
 364
 365 /* "Not logged in" text in gray */
 366 li#pt-anonuserpage {
 367         color: #707070;
 368 }
 369
 370 #p-personal li.active {
 371         font-weight: bold;
 372 }
 373
 374 /*
 375 ** the page-related actions- page/talk, edit etc
 376 */
 377 #p-cactions {
 378         position: absolute;
 379         top: 1.3em;
 380         left: 11.5em;
 381         margin: 0;
 382         white-space: nowrap;
 383         width: 76%;
 384         line-height: 1.1em;
 385         overflow: visible;
 386         background: none;
 387         border-collapse: collapse;
 388         padding-left: 1em;
 389         font-size: 95%;
 390 }
 391
 392 #p-cactions ul {
 393         list-style-type: none;
 394         list-style-image: none;
 395 }
 396
 397 #p-cactions li {
 398         display: inline;
 399         border: 1px solid #aaa;
 400         border-bottom: 0;
 401         padding: 0 0 1em 0;
 402         margin: 0 0.3em 0 0;
 403         overflow: visible;
 404         background: #fff;
 405 }
 406
 407 #p-cactions li.selected {
 408         border-color: #fabd23;
 409         font-weight: bold;
 410 }
 411
 412 #p-cactions li a {
 413         background-color: #fbfbfb;
 414         color: #002bb8;
 415         border: 0;
 416         padding: 0 0.8em 0.3em;
 417         position: relative;
 418         z-index: 0;
 419         margin: 0;
 420         text-decoration: none;
 421         text-transform: lowercase;
 422 }
 423
 424 #p-cactions li.selected a {
 425         z-index: 3;
 426         background-color: #fff;
 427 }
 428
 429 #p-cactions .new a {
 430         color: #ba0000;
 431 }
 432
 433 #p-cactions li a:hover {
 434         z-index: 3;
 435         text-decoration: none;
 436         background-color: #fff;
 437 }
 438
 439 #p-cactions h3 {
 440         display: none;
 441 }
 442
 443 #p-cactions li.istalk {
 444         margin-right: 0;
 445 }
 446
 447 #p-cactions li.istalk a {
 448         padding-right: 0.5em;
 449 }
 450
 451 #p-cactions #ca-addsection a {
 452         padding-left: 0.4em;
 453         padding-right: 0.4em;
 454 }
 455
 456 /* offsets to distinguish the tab groups */
 457 li#ca-talk {
 458         margin-right: 1.6em;
 459 }
 460
 461 li#ca-watch,
 462 li#ca-unwatch,
 463 li#ca-varlang-0,
 464 li#ca-print {
 465         margin-left: 1.6em;
 466 }
 467
 468 #p-cactions .pBody {
 469         font-size: 1em;
 470         background-color: transparent;
 471         color: inherit;
 472         border-collapse: inherit;
 473         border: 0;
 474         padding: 0;
 475 }
 476
 477 #p-lang {
 478         position: relative;
 479         z-index: 3;
 480 }
 481
 482 /* Override text-transform on languages where capitalization is significant */
 483 .capitalize-all-nouns .portlet h3,
 484 .capitalize-all-nouns #p-personal ul,
 485 .capitalize-all-nouns #p-cactions ul li a {
 486         text-transform: none;
 487 }
 488
 489 /* TODO: #t-iscite is only used by the Cite extension, come up with some
 490  * system which allows extensions to add to this file on the fly
 491  */
 492 #t-ispermalink,
 493 #t-iscite {
 494         color: #999;
 495 }
 496
 497 /*
 498 ** footer
 499 */
 500 div#footer {
 501         background-color: #fff;
 502         border-top: 1px solid #fabd23;
 503         border-bottom: 1px solid #fabd23;
 504         margin: 0.6em 0 1em 0;
 505         overflow: hidden;
 506         padding: 0.4em 0 0.3em 0;
 507         text-align: center;
 508         font-size: 90%;
 509 }
 510
 511 div#footer li {
 512         display: inline;
 513         margin: 0 1.3em;
 514 }
 515
 516 #f-poweredbyico,
 517 #f-copyrightico {
 518         margin: 0 8px;
 519         position: relative;
 520         top: -2px; /* Bump it up just a tad */
 521 }
 522
 523 #f-poweredbyico {
 524         float: right;
 525         height: 1%;
 526 }
 527
 528 #f-copyrightico {
 529         float: left;
 530         height: 1%;
 531 }
 532
 533 #userloginprompt,
 534 #languagelinks {
 535         font-size: 85%;
 536 }
 537
 538 #login-sectiontip {
 539         font-size: 85%;
 540         line-height: 1.2;
 541         padding-top: 2em;
 542 }
 543
 544 /**
 545  * This was originally added by Gabriel Wicke in r3681 (committed on 25 May 2004)
 546  * with the commit message "tweaks to page history".
 547  * Unlike the other IE/Mac fixes that used to be present here, this seems to get
 548  * applied on more modern browsers, so let's keep it here until someone has the
 549  * time to properly test it out.
 550  */
 551 #pagehistory li.selected {
 552         position: relative;
 553 }
 554
 555 div.patrollink {
 556         clear: both;
 557 }
 558
 559 .sharedUploadNotice {
 560         font-style: italic;
 561 }
 562
 563 .editExternally {
 564         border: 1px solid #808080;
 565         background-color: #fff;
 566         padding: 3px;
 567         margin-top: 0.5em;
 568         float: left;
 569         font-size: small;
 570         text-align: center;
 571 }
 572
 573 .editExternallyHelp {
 574         font-style: italic;
 575         color: #808080;
 576 }
 577
 578 .toggle {
 579         margin-left: 2em;
 580         text-indent: -2em;
 581 }
 582
 583 /* @bug 1714 */
 584 input#wpSave,
 585 input#wpDiff {
 586         margin-right: 0.33em;
 587 }
 588
 589 #wpSave {
 590         font-weight: bold;
 591 }
 592
 593 /* noarticletext */
 594 div.noarticletext {
 595         border: 1px solid #ccc;
 596         background: #fff;
 597         padding: 0.2em 1em;
 598         color: #000;
 599 }
 600
 601 #powersearch p {
 602         margin-top: 0;
 603 }
 604
 605 div.multipageimagenavbox {
 606         border: solid 1px #c0c0c0;
 607         padding: 4px;
 608         margin: 1em;
 609         background: #f0f0f0;
 610 }
 611
 612 div.multipageimagenavbox div.thumb {
 613         border: 0;
 614         margin-left: 2em;
 615         margin-right: 2em;
 616 }
 617
 618 div.multipageimagenavbox hr {
 619         margin: 6px;
 620 }
 621
 622 table.multipageimage td {
 623         text-align: center;
 624 }
 625
 626 .templatesUsed {
 627         margin-top: 1.5em;
 628 }
 629
 630 .mw-summary-preview {
 631         margin: 0.1em 0;
 632 }
 633
 634 /* Friendlier slave lag warnings */
 635 div.mw-lag-warn-normal,
 636 div.mw-lag-warn-high {
 637         padding: 3px;
 638         text-align: center;
 639         margin: 3px auto;
 640 }
 641
 642 div.mw-lag-warn-normal {
 643         border: 1px solid #fc6;
 644         background-color: #ffc;
 645 }
 646
 647 div.mw-lag-warn-high {
 648         font-weight: bold;
 649         border: 2px solid #f03;
 650         background-color: #fcc;
 651 }
 652
 653 .MediaTransformError {
 654         background-color: #ccc;
 655         padding: 0.1em;
 656 }
 657
 658 .MediaTransformError td {
 659         text-align: center;
 660         vertical-align: middle;
 661         font-size: 90%;
 662 }
 663
 664 /* Sometimes people don't want personal tools to be lowercase! */
 665 .no-text-transform {
 666         text-transform: none;
 667 }
 668
 669 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 670 .tipsy {
 671         font-size: 127%;
 672 }