docs/wiki/design.css

   1 /**
   2  * Design elements for default Template
   3  *
   4  * @author Andreas Gohr <andi@splitbrain.org>
   5  * @author Anika Henke <henke@cosmocode.de>
   6  */
   7
   8 /* -------------- general elements --------------- */
   9
  10 body {
  11   font: 100% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  12   background-color: #f8f8f8;
  13   color: Black;
  14   margin: 0;
  15   padding: 0;
  16   margin-left:  1em;
  17   margin-right: 1em;
  18 }
  19
  20 /* the document */
  21 div.page {
  22   margin-top: 4px;
  23   margin-left:  1em;
  24   margin-right: 2em;
  25   text-align: justify;
  26 }
  27
  28 table {
  29   font-size: 100%;
  30   padding:0;
  31   margin:0;
  32 }
  33
  34 tr,td,th {padding:0; margin:0;}
  35
  36 img {border:0}
  37
  38 p {padding:0; margin: 0 0 1.0em 0;}
  39
  40 hr {
  41   border: 0px;
  42   border-top: 1px solid #8cacbb;
  43   text-align:center;
  44   height: 0px;
  45 }
  46
  47 div.nothing {
  48   text-align:center;
  49   margin: 2em;
  50 }
  51
  52 /* ---------------- forms ------------------------ */
  53
  54 form {
  55   border: none;
  56   margin: 0;
  57   display: inline;
  58 }
  59
  60 label {
  61   display: block;
  62   text-align: right;
  63   font-weight: bold;
  64 }
  65
  66 label.simple {
  67   text-align: left;
  68   font-weight: normal;
  69 }
  70
  71 label input.edit {
  72   width: 50%;
  73 }
  74
  75 fieldset {
  76   width: 300px;
  77   text-align: center;
  78   border: 1px solid #8cacbb;
  79   padding: 0.5em;
  80 }
  81
  82 textarea.edit {
  83   font-family:monospace;
  84   border: 1px solid #8cacbb;
  85   color: Black;
  86   background-color: white;
  87   font-size:14px;
  88   padding: 3px;
  89   width:100%;
  90 }
  91
  92 input.edit,select.edit {
  93   font-size: 100%;
  94   border: 1px solid #8cacbb;
  95   height: 18px !important;
  96   max-height: 22px !important;
  97   min-height: 22px !important;
  98   color: Black;
  99   background-color: white;
 100   vertical-align: middle;
 101   padding: 1px;
 102   display: inline;
 103 }
 104
 105 input.missing {
 106   font-size: 100%;
 107   border: 1px solid #8cacbb;
 108   height: 18px !important;
 109   max-height: 22px !important;
 110   min-height: 22px !important;
 111   color: Black;
 112   background-color: #ffcccc;
 113   vertical-align: middle;
 114   padding: 1px;
 115   display: inline;
 116 }
 117
 118 /* --------- buttons ------------------- */
 119
 120
 121 input.button {
 122   border: 1px solid #8cacbb;
 123   color: Black;
 124   background-color: white;
 125   vertical-align: middle;
 126   text-decoration:none;
 127   font-size: 100%;
 128   cursor: pointer;
 129   height: 22px !important;
 130   max-height: 22px !important;
 131   min-height: 22px !important;
 132   margin: 1px;
 133   display: inline;
 134 }
 135
 136 div.secedit input.button {
 137   border: 1px solid #8cacbb;
 138   color: Black;
 139   background-color: white;
 140   vertical-align: middle;
 141   text-decoration:none;
 142   margin: 0px;
 143   padding: 0px;
 144   font-size: 10px;
 145   cursor: pointer;
 146   height: 15px !important;
 147   max-height: 15px !important;
 148   min-height: 15px !important;
 149   float:right;
 150   display: inline;
 151 }
 152
 153 /* ----------- page navigator ------------- */
 154
 155 div.pagenav {
 156   margin-top:1em;
 157 }
 158
 159 div.pagenav-prev {
 160   text-align:right;
 161   float:left;
 162   width:50%
 163 }
 164
 165 div.pagenav-prev input.button {
 166   margin-right:5px;
 167 }
 168
 169 div.pagenav-next {
 170   text-align:left;
 171   float:right;
 172   width:50%
 173 }
 174
 175 div.pagenav-next input.button {
 176   margin-left:5px;
 177 }
 178
 179 /* --------------- Links ------------------ */
 180
 181 a {
 182   color:#000000;
 183   text-decoration:none;
 184 }
 185 a:hover {
 186   color:#000000;
 187   text-decoration:none;
 188 }
 189
 190 /* external link */
 191 a.urlextern{
 192     background: transparent url(images/link_icon.gif) 0px 1px no-repeat;
 193     padding: 1px 0px 1px 16px;
 194     color:#0000BB;
 195     text-decoration:none;
 196 }
 197 a.urlextern:visited {
 198   color:Purple;
 199 }
 200 a.urlextern:hover {
 201   text-decoration:underline;
 202 }
 203
 204 /* windows share */
 205 a.windows{
 206     background: transparent url(images/windows.gif) 0px 1px no-repeat;
 207     padding: 1px 0px 1px 16px;
 208     color:#436976;
 209     text-decoration:none;
 210 }
 211 a.windows:visited {
 212   color:Purple;
 213 }
 214 a.windows:hover {
 215   text-decoration:underline;
 216 }
 217
 218 /* interwiki link */
 219 a.interwiki{
 220     background: transparent url(images/interwiki.png) 0px 1px no-repeat;
 221     padding-left: 16px;
 222     color:#436976;
 223     text-decoration:none;
 224 }
 225 a.interwiki:visited {
 226   color:Purple;
 227 }
 228 a.interwiki:hover {
 229   text-decoration:underline;
 230 }
 231
 232 /* link to some embedded media */
 233 a.media {
 234   color:#436976;
 235   text-decoration:none;
 236 }
 237 a.media:hover {
 238   color:#436976;
 239   text-decoration:underline
 240 }
 241
 242 /* email link */
 243 a.mail {
 244   background: transparent url(images/mail_icon.gif) 0px 1px no-repeat;
 245   padding: 1px 0px 1px 16px;
 246   color:#436976;
 247   text-decoration:none;
 248 }
 249 a.mail:hover {
 250   text-decoration:underline;
 251 }
 252
 253 /* existing wikipage */
 254 a.wikilink1:link    { color:#0000BB; text-decoration:none }
 255 a.wikilink1:visited { color:Purple; text-decoration:none }
 256 a.wikilink1:hover   { color:#0000BB; text-decoration:underline }
 257
 258 /* not existing wikipage */
 259 a.wikilink2:link    { color:#FF3300; text-decoration:none }
 260 a.wikilink2:visited { color:#FF3300; text-decoration:none }
 261 a.wikilink2:hover   { color:#FF3300; text-decoration:underline }
 262
 263
 264 /* ------------- Page elements ----------------- */
 265
 266 div.preview{
 267   background:#f7f9fa;
 268   margin-left:2em;
 269   padding: 4px;
 270   border: 1px dashed #000000;
 271 }
 272
 273 div.breadcrumbs{
 274   background-color: #f5f5f5;
 275   font-size:80%;
 276   color: #666666;
 277   padding-left: 4px;
 278 }
 279
 280 span.user{
 281   color: #cccccc;
 282   font-size: 90%;
 283 }
 284
 285 /* embedded images */
 286 img.media {
 287   margin: 3px;
 288 }
 289
 290 img.medialeft {
 291   border: 0;
 292   float: left;
 293   margin: 0 1.5em 0 0;
 294 }
 295
 296 img.mediaright {
 297   border: 0;
 298   float: right;
 299   margin: 0 0 0 1.5em;
 300 }
 301
 302 img.mediacenter {
 303   border: 0;
 304   display: block;
 305   margin-left: auto;
 306   margin-right: auto;
 307 }
 308
 309 acronym {
 310   cursor: help;
 311   border-bottom: 1px dotted #000;
 312 }
 313
 314 /* general headline setup */
 315 h1, h2, h3, h4, h5 {
 316     color: Black;
 317     background-color: transparent;
 318     font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
 319     font-size: 100%;
 320     font-weight: normal;
 321     margin-left:    0;
 322     margin-right:   0;
 323     margin-top:     0;
 324     margin-bottom:  1em;
 325     padding-left:   0;
 326     padding-right:  0;
 327     padding-top:    0.5em;
 328     padding-bottom: 0;
 329     border-bottom: 1px solid #8cacbb;
 330     clear: left;
 331 }
 332
 333 /* special headlines */
 334 h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
 335 h2 {font-size: 150%; margin-left: 20px;}
 336 h3 {font-size: 140%; margin-left: 40px; border-bottom: none; font-weight: bold;}
 337 h4 {font-size: 120%; margin-left: 60px; border-bottom: none; font-weight: bold;}
 338 h5 {font-size: 100%; margin-left: 80px; border-bottom: none; font-weight: bold;}
 339
 340 /* indent different sections */
 341 div.level1 {margin-left: 3px;}
 342 div.level2 {margin-left: 23px;}
 343 div.level3 {margin-left: 43px;}
 344 div.level4 {margin-left: 63px;}
 345 div.level5 {margin-left: 83px;}
 346
 347 /* unordered lists */
 348 ul {
 349   line-height: 1.5em;
 350   list-style-type: square;
 351   margin: 0 0 0.5em 1.5em;
 352   padding: 0;
 353   list-style-image: url(images/bullet.gif);
 354 }
 355
 356 /* ordered lists */
 357 ol {
 358   line-height: 1.5em;
 359   margin: 0 0 0.5em 1.5em;
 360   padding: 0;
 361   color: #638c9c;
 362   font-weight: bold;
 363   list-style-image: none;
 364 }
 365
 366 /* the list items overriding the ol definition */
 367 .li {
 368   color: #000000;
 369   font-weight: normal;
 370 }
 371
 372 ol {list-style-type: decimal}
 373 ol ol {list-style-type: upper-roman}
 374 ol ol ol {list-style-type: lower-alpha}
 375 ol ol ol ol {list-style-type: lower-greek}
 376
 377 li.open {
 378   list-style-image: url(images/open.gif);
 379 }
 380
 381 li.closed {
 382   list-style-image: url(images/closed.gif);
 383 }
 384
 385 blockquote {
 386   border-left: 2px solid #8cacbb;
 387   padding-left: 3px;
 388   margin-left: 0;
 389 }
 390
 391 /* code blocks by indention */
 392 pre.pre {
 393   font-size: 120%;
 394   padding: 0.5em;
 395   border: 1px dashed #8cacbb;
 396   color: Black;
 397   background-color: #f7f9fa;
 398   overflow: auto;
 399 }
 400
 401 /* code blocks by code tag */
 402 pre.code {
 403   font-size: 120%;
 404   padding: 0.5em;
 405   border: 1px dashed #8cacbb;
 406   color: Black;
 407   background-color: #f7f9fa;
 408   overflow: auto;
 409 }
 410
 411 /* inline code words */
 412 code {
 413   font-size: 120%;
 414 }
 415
 416 /* code blocks by file tag */
 417 pre.file {
 418   font-size: 120%;
 419   padding: 0.5em;
 420   border: 1px dashed #8cacbb;
 421   color: Black;
 422   background-color: #dee7ec;
 423   overflow: auto;
 424 }
 425
 426 /* inline tables */
 427 table.inline {
 428   background-color: #ffffff;
 429   border-spacing: 0px;
 430   border-collapse: collapse;
 431 }
 432
 433 table.inline th {
 434   padding: 3px;
 435   border: 1px solid #8cacbb;
 436   background-color: #dee7ec;
 437 }
 438
 439 table.inline td {
 440   padding: 3px;
 441   border: 1px solid #8cacbb;
 442 }
 443
 444 .leftalign{
 445   text-align: left;
 446 }
 447
 448 .centeralign{
 449   text-align: center;
 450 }
 451
 452 .rightalign{
 453   text-align: right;
 454 }
 455
 456 /* ---------- table of contents ------------------- */
 457
 458 div.toc {
 459   margin-left: 2em;
 460   margin-top: 1.2em;
 461   margin-bottom: 0;
 462   float:right;
 463   width: 200px;
 464   font-size: 80%;
 465   clear:both;
 466   border: 1px solid #8cacbb;
 467   background-color: #ffffff;
 468 }
 469
 470 div.tocheader {
 471   padding: 3px;
 472   border: 1px solid #8cacbb;
 473   background-color: #dee7ec;
 474   text-align: left;
 475   font-weight:bold;
 476   margin-bottom: 2px;
 477 }
 478
 479 div.toctoggle {
 480   float:right;
 481   margin-top:0.3em;
 482   margin-right:3px;
 483 }
 484
 485 div.toctoggle img {
 486   width:0.8em;
 487   height:0.8em;
 488 }
 489
 490 #tocinside {
 491   border: 1px solid #8cacbb;
 492   background-color: #ffffff;
 493   text-align: left;
 494   padding-top: 0.5em;
 495   padding-bottom: 0.7em;
 496 }
 497
 498 ul.toc {
 499   list-style-type: none;
 500   list-style-image: none;
 501   line-height: 1.2em;
 502   margin: 0;
 503   padding: 0;
 504   padding-left: 1em;
 505 }
 506
 507 ul.toc li {
 508   background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
 509   padding-left:0.4em;
 510 }
 511
 512 ul.toc li.clear {
 513   background-image: none;
 514   padding-left:0.4em;
 515 }
 516
 517 a.toc {
 518   color: #0000BB;
 519   text-decoration:none;
 520 }
 521
 522 a.toc:hover {
 523   color: #000000;
 524   text-decoration:underline;
 525 }
 526
 527 /* ---------------------------- Diff rendering --------------------------*/
 528 table.diff { background:white; }
 529 td.diff-blockheader {font-weight:bold}
 530 td.diff-header {
 531   border-bottom: 1px solid #8cacbb;
 532   font-size:120%;
 533 }
 534 td.diff-addedline {
 535     background:#ddffdd;
 536     font-family: monospace;
 537     font-size: 100%;
 538 }
 539 td.diff-deletedline {
 540     background:#ffffbb;
 541     font-family: monospace;
 542     font-size: 100%;
 543 }
 544 td.diff-context {
 545     background:#f7f9fa;
 546     font-family: monospace;
 547     font-size: 100%;
 548 }
 549 span.diffchange { color: red; }
 550
 551 /* --------------------- footnotes -------------------------------- */
 552
 553 div.footnotes{
 554   clear:both;
 555   border-top: 1px solid #8cacbb;
 556   padding-left: 1em;
 557   margin-top: 1em;
 558 }
 559
 560 div.fn{
 561   font-size:90%;
 562 }
 563
 564 a.fn_top{
 565   vertical-align:super;
 566   font-size:80%;
 567 }
 568
 569 a.fn_bot{
 570   vertical-align:super;
 571   font-size:80%;
 572   font-weight:bold;
 573 }
 574
 575
 576 /* --------------- search result formating --------------- */
 577 .search_result{
 578   margin-bottom: 6px;
 579   padding-left: 30px;
 580   padding-right: 10px;
 581 }
 582
 583 .search_snippet{
 584   color: #999999;
 585   font-size: 12px;
 586   margin-left: 20px;
 587 }
 588
 589 .search_sep{
 590   color: #000000;
 591 }
 592
 593 .search_hit{
 594   color: #000000;
 595   background: #FFFF99;
 596 }
 597
 598 div.search_quickresult{
 599   margin-bottom: 15px;
 600   padding-bottom: 5px;
 601   border-bottom: 1px dashed #8cacbb;
 602   margin-left: 30px;
 603   padding-right: 10px;
 604 }
 605
 606 div.search_quickhits {
 607   margin-left: 1em;
 608   float:left;
 609   background: transparent url(images/bullet.gif) 0px 1px no-repeat;
 610   padding: 1px 0px 1px 8px;
 611   width: 30%;
 612 }
 613
 614 /* ------------------ Additional ---------------------- */
 615 .footerinc a img {
 616     opacity: 0.5;
 617 }
 618
 619 .footerinc a:hover img {
 620     opacity: 1;
 621 }
 622
 623 /* ---- Admin --- */
 624
 625 div.acladmin label {
 626   text-align: left;
 627   font-weight: normal;
 628   display: inline;
 629 }
 630
 631 div.acladmin table{
 632   margin-left: 10%;
 633   width: 80%;
 634 }
 635
 636 /* ---------- AJAX quicksearch ----------- */
 637
 638 div.ajax_qsearch {
 639   position:absolute;
 640   right:225px;;
 641   text-align:left;
 642   width: 200px;
 643   background-color: #ff9;
 644   opacity: 0.9;
 645   display:none;
 646 }
 647
 648 /* ---------- Spellchecking ------------- */
 649
 650 a.spell_error {
 651   color: #ff0000;
 652   text-decoration: underline;
 653 }
 654
 655 div#spell_suggest {
 656   position: absolute;
 657   left: 0;
 658   top: 0;
 659   display: none;
 660   background-color: #fff;
 661   padding: 2px;
 662   border: 1px solid #000;
 663   font-size:80%;
 664   z-index: 2;
 665 }
 666
 667 div#spell_result {
 668   display:none;
 669   font-family:monospace;
 670   border: 1px solid #8cacbb;
 671   color: Black;
 672   font-size:14px;
 673   padding: 3px;
 674   background-color: #f7f9fa;
 675   overflow: auto;
 676   z-index: 1;
 677
 678   white-space: pre-wrap;       /* css-3 */
 679   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 680   white-space: -pre-wrap;      /* Opera 4-6 */
 681   white-space: -o-pre-wrap;    /* Opera 7 */
 682   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 683 }
 684
 685 span.spell_noerr {
 686   color: #009933;
 687 }
 688
 689 span.spell_wait {
 690   color: #0066cc;
 691 }
 692