1/* 2** Plone style sheet for CSS2-capable browsers. 3** Copyright Alexander Limi, 2002-2003 - http://www.plonesolutions.com 4** 5** Thanks to Geir Bkholt, Stian Siland for input and guidance. 6** 7** Style sheet documentation can be found at http://plone.org/documentation 8** 9** You should preferrably use ploneCustom.css to add your own CSS classes and to 10** customize your portal, as these are the base fundaments of Plone, and will 11** change and be refined in newer versions. Keeping your changes in 12** ploneCustom.css will make it easier to upgrade. 13** 14** Feel free to use whole or parts of this for your own designs, but give credit 15** where credit is due. 16** 17*/ 18 19 20/* 21** DTML instructions to set caching headers. Inside comments area to play nicer with CSS editors. 22** 23** ** 24** 25** 26** 27** */ 28/* */ 29 30 31 32body { 33 font: 0.7em Verdana, Helvetica, Arial, sans-serif; 34 background: White; 35 color: Black; 36 margin: 0; 37 padding: 0; 38/* These work in IE only, changes the look of the scrollbar + textareas */ 39 scrollbar-base-color: #DEE7EC; 40 scrollbar-highlight-color: #DEE7EC; 41 scrollbar-track-color: #F7F9FA; 42 scrollbar-darkshadow-color: #F7F9FA; 43 scrollbar-3dlight-color: #8CACBB; 44 scrollbar-shadow-color: #8CACBB; 45 scrollbar-arrow-color: #436976; 46} 47 48table { 49 font-size: 100%; 50} 51 52a { 53 text-decoration: none; 54 color: #436976; 55 background-color: transparent; 56} 57 58table { 59 60} 61 62 63img { 64 border: none; 65 vertical-align: middle; 66} 67 68p { 69 margin: 0.5em 0em 1em 0em; 70 text-align: justify; 71 line-height: 1.5em; 72} 73 74p a { 75 text-decoration: underline; 76} 77 78p a:visited { 79 color: Purple; 80 background-color: transparent; 81} 82 83p a:active { 84 color: Red; 85 background-color: transparent; 86} 87 88p img { 89 border: 0; 90 margin: 0; 91} 92 93 94hr { 95 clear: both; 96 height: 1px; 97 color: #8CACBB; 98 background-color: transparent; 99} 100 101 102h1, h2, h3, h4, h5, h6 { 103 color: Black; 104 clear: left; 105 font: 100% Verdana, Helvetica, Arial, sans-serif; 106 margin: 0; 107 padding-top: 0.5em; 108 border-bottom: 1px solid #8CACBB; 109} 110 111h1 a, 112h2 a, 113h3 a, 114h4 a, 115h5 a, 116h6 a { color: Black ! important; } 117 118 119h1 { 120 font-size: 160%; 121} 122 123h2 { 124 font-size: 150%; 125} 126 127h3 { 128 font-size: 140%; 129} 130 131h4 { 132 font-size: 120%; 133} 134 135h5 { 136 font-size: 100%; 137} 138 139h6 { 140 font-size: 80%; 141} 142 143ul { 144 line-height: 1.5em; 145 list-style-type: square; 146 margin: 0.5em 0 0 2em; 147 padding:0; 148} 149 150ol { 151 line-height: 1.5em; 152 margin: 0.5em 0 0 2em; 153 padding:0; 154} 155 156ul a, ol a { 157 text-decoration: underline; 158} 159 160li { 161 margin-bottom: 1em; 162} 163 164dl { 165} 166 167dt { 168 font-weight: bold; 169} 170 171dt a { 172 text-decoration: underline; 173} 174 175 176dd { 177 line-height: 1.5em; 178 margin-bottom: 1em; 179} 180 181d a { 182 text-decoration: underline; 183} 184 185 186fieldset { 187 border: 1px solid #8cacbb; 188 margin: 2em 0em 1em 0em; 189 padding: 1em 0em; 190} 191 192legend { 193 background: White; 194 padding: 0.5em; 195} 196 197 198form { 199 border: none; 200 margin: 0; 201} 202 203textarea { 204 border: 1px solid #8cacbb; 205 color: Black; 206 background-color: white; 207 width: 88%; 208 padding: 0.1em; 209} 210 211input { 212 font: 100% Verdana, Helvetica, Arial, sans-serif; 213 border: 1px solid #8cacbb; 214 color: Black; 215 background-color: white; 216 vertical-align: middle; 217 margin-bottom: 1px; /* IE bug fix */ 218 padding: 0.1em; 219} 220 221select { 222 font: 100% Verdana, Helvetica, Arial, sans-serif; 223 border: 1px solid #8cacbb; 224 vertical-align: top; 225} 226 227abbr, acronym, .explain { 228 border-bottom: 1px dotted Black; 229 color: Black; 230 background-color: transparent; 231 cursor: help; 232} 233 234q { 235 font-family: Times, "Times New Roman", serif; 236 font-style: italic; 237 font-size: 120%; 238} 239 240blockquote { 241 font-family: Times, "Times New Roman", serif; 242 font-style: italic; 243 font-size: 120%; 244} 245 246code { 247 font-size: 120%; 248 color: Black; 249 background-color: #dee7ec; 250} 251 252pre { 253 font-size: 120%; 254 padding: 1em; 255 border: 1px solid #8cacbb; 256 color: Black; 257 background-color: #dee7ec; 258} 259 260.netscape4 { 261 display: none; 262} 263 264/* 265** Structural Elements 266*/ 267 268div.top { 269 /* Top section */ 270 background: transparent; 271 margin: 0; 272 padding: 0; 273} 274 275.logo { 276 /* Logo properties */ 277 margin: 1em 0em 1em 2em; 278 padding: 0; 279} 280 281div.searchBox { 282 /*searchbox style and positioning */ 283 background-color: transparent; 284 color: Black; 285 float: right; 286 margin: 3em 0em 0em 0em; 287 padding: 0em 2em 0em 0em; 288 text-align: right; 289 text-transform: lowercase; 290 width: 30%; 291} 292 293input.searchButton { 294 font-size: 100% ! important; 295 margin-bottom: 1px ! important; 296} 297 298div.tabs { 299 /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */ 300 background: transparent; 301 border-collapse: collapse; 302 border-bottom-color: #8CACBB; 303 border-bottom-style: solid; 304 border-bottom-width: 1px; 305 padding: 0.5em 0em 0em 2em; 306 white-space: nowrap; 307} 308 309div.tabs a { 310 /* The normal, unselected tabs. They are all links */ 311 background: transparent; 312 border-color: #8CACBB; 313 border-width: 1px; 314 border-style: solid solid none solid; 315 color: #436976; 316 font-weight: normal; 317 height: 1.2em; 318 margin-right: 0.5em; 319 padding: 0em 2em; 320 text-transform: lowercase; 321} 322 323div.tabs a.selected { 324 /* The selected tab. There's only one of this */ 325 background: #DEE7EC; 326 border: 1px solid #8CACBB; 327 border-bottom: #DEE7EC 1px solid; 328 color: #436976; 329 font-weight: normal; 330} 331 332div.tabs a:hover { 333 background: #DEE7EC; 334 border-color: #8CACBB; 335 border-bottom-color: #DEE7EC; 336 color: #436976; 337} 338 339div.personalBar { 340 /* Bar with personalized menu (user preferences, favorites etc) */ 341 background: #DEE7EC; 342 border-bottom-color: #8CACBB; 343 border-bottom-style: solid; 344 border-bottom-width: 1px; 345 color: Black; 346 padding-right: 3em; 347 text-align: right; 348 text-transform: lowercase; 349} 350 351div.personalBar a { 352 background-color: transparent; 353 color: #436976; 354 font-weight: normal; 355 margin-left: 1em; 356} 357 358div.personalBar img { 359 vertical-align: top; 360} 361.caseSensitive { 362 text-transform: none; 363} 364 365div.pathBar { 366 /* The path bar, including breadcrumbs and add to favorites */ 367 border-bottom-color: #8CACBB; 368 border-bottom-style: solid; 369 border-bottom-width: 1px; 370 padding-left: 2em; 371 padding-right: 2em; 372 text-transform: lowercase; 373} 374 375.breadcrumbs { 376 float: left; 377 text-transform: lowercase; 378} 379 380.addFavorite { 381 vertical-align: bottom; 382} 383 384table.columns { 385 width: 100%; 386} 387 388table.columns td.left { 389 vertical-align: top; 390 width: 15%; 391 padding: 2em 0em 1em 2em; 392} 393 394table.columns td.main { 395 vertical-align: top; 396 padding: 0em 2em 1em 2em; 397 margin: 0; 398 399} 400 401table.columns td.right { 402 vertical-align: top; 403 width: 15%; 404 padding: 2em 2em 1em 0em; 405} 406 407#contentTabs { 408 background: transparent; 409 border-collapse: collapse; 410 border-bottom: 1px solid #74AE0B; 411 padding-left: 1em; 412 margin-top: 2em; 413 white-space: nowrap; 414} 415 416#contentTabs a { 417 background: transparent; 418 border: 1px solid #74AE0B; 419 border-style: solid solid none solid; 420 color: #578308; 421 font-weight: normal; 422 height: 1.2em; 423 margin-right: 0.5em; 424 padding: 0em 2em; 425 text-transform: lowercase; 426} 427 428#contentTabs a.selected { 429 background: #CDE2A7; 430 border-bottom: #CDE2A7 1px solid; 431 color: #578308; 432 font-weight: normal; 433} 434 435#contentTabs a:hover { 436 background-color: #CDE2A7; 437 color: #578308; 438} 439 440#contentBar { 441 background: #CDE2A7; 442 border-left: 1px solid #74AE0B; 443 border-right: 1px solid #74AE0B; 444 color: #578308; 445 text-align: right; 446 text-transform: lowercase; 447} 448 449/* Fix for IE6 disappearing float bug */ 450#content { 451 height: 100%; 452} 453 454 455div.document { 456 background: White; 457 font: 120% Verdana, Helvetica, Arial, sans-serif; 458 padding: 0; 459 margin: 0em 0em 2em 0em; 460} 461 462div.editableDocument { 463 background: White; 464 border: 1px solid #74AE0B; 465 font: 120% Verdana, Helvetica, Arial, sans-serif; 466 margin: 0em 0em 2em 0em; 467 padding: 0em 1em 2em 1em; 468} 469 470div.documentActions { 471 float: right; 472 margin-top: 1.5em; 473} 474 475div.message { 476 background: #FFCE7B; 477 border: 1px solid #FFA500; 478 color: Black; 479 font: bold 80% Verdana, Helvetica, Arial, sans-serif; 480 margin: 2em 0em 1em 0em; 481 padding: 0.5em 1em; 482 vertical-align: middle; 483} 484 485div.message a { 486 color: Black; 487 text-decoration: underline; 488} 489 490 491 492div.title { 493 margin-top: 1em; 494} 495 496.description { 497 /* The summary text describing the document */ 498 font: bold 100% Verdana, Helvetica, Arial, sans-serif; 499 display: block; 500 margin: 1em 0em; 501 line-height: 1.5em; 502} 503 504.footer { 505 background: #DEE7EC; 506 border-top: 1px solid #8CACBB; 507 border-bottom: 1px solid #8CACBB; 508 color: Black; 509 clear: both; 510 float: none; 511 margin: 2em 0em; 512 padding: 0.5em 0em 1em 0em; 513 text-align: center; 514} 515 516 517/* Accessibility and visual enhancement elements */ 518 519a.skipnav { 520 visibility: hidden; 521 position: absolute; 522} 523 524 525/* 526** Widgets 527*/ 528 529input.standalone { 530 background: #DEE7EC url(linkOpaque.gif) 9px 1px no-repeat; 531 color: Black; 532 cursor: pointer; 533 font-size: 80%; 534 font-weight: normal; 535 margin-bottom: 1em; 536 padding: 1px 1px 1px 15px; 537 text-transform: lowercase; 538} 539 540input.context { 541 background: White url(linkTransparent.gif) 9px 1px no-repeat; 542 color: Black; 543 cursor: pointer; 544 font-size: 80%; 545 font-weight: normal; 546 margin-bottom: 1em; 547 padding: 1px 1px 1px 15px; 548 text-transform: lowercase; 549} 550 551input.destructive { 552 background: #FFCE7B url(linkTransparent.gif) 9px 1px no-repeat; 553 border: 1px solid #FFA500; 554 color: Black; 555 cursor: pointer; 556 font-size: 80%; 557 font-weight: normal; 558 margin-bottom: 1em; 559 padding: 1px 1px 1px 15px; 560 text-transform: lowercase; 561} 562 563input.noborder { 564 border: none; 565 margin: 0; 566 background-color: transparent; 567} 568 569div.row { 570 clear: both; 571 min-height: 4em; 572 margin: 0em 0em 1em 0em; 573 position: relative; 574} 575 576.group { 577 border: 1px solid #8cacbb; 578 margin: 1em 0em 1em 0em; 579 padding: 0em 1em; 580} 581span.legend { 582 background: White; 583 font-size: 80%; 584 padding: 0.5em; 585 position : relative; 586 top: -0.8em; 587 left: 0em; 588} 589 590div.label { 591 font-weight: bold; 592 display: inline; 593 padding-right: 0.5em; 594} 595 596div.field { 597 margin-top: 0.2em; 598} 599 600div.help { 601 background-color: #FFFFE1; 602 border: 1px solid black; 603 font-size: 80%; 604 font-weight: normal; 605 line-height: normal; 606 text-align: left; 607 position: absolute; 608 left: -18em; 609 top: 1.5em; 610 width: 16em; 611 padding: 0.5em; 612} 613 614.error { 615 /* Class for error indication in forms */ 616 background: #FFCE7B; 617 border: 1px solid #FFA500; 618 padding: 1em; 619 margin: 0; 620 width: 68% !important; 621} 622 623.required { 624 /* Used in addition to class "label" on required elements */ 625 background: url(required.gif) right no-repeat; 626} 627 628span.card { 629 background: #DEE7EC; 630 border-color: #8CACBB; 631 border-width: 1px; 632 border-style: solid; 633 float: left; 634 margin: 1em; 635 padding: 1em; 636 text-align: center; 637 width: 15%; 638} 639 640table.listing, 641div.stx table { 642 /* The default table for document listings. Contains name, document types, modification times etc in a file-browser-like fashion */ 643 border-collapse: collapse; 644 border-left: 1px solid #8CACBB; 645 border-bottom: 1px solid #8CACBB; 646 font-size: 80%; 647 margin: 1em 0em 1em 0em; 648 clear: both; 649} 650 651table.listing th, 652div.stx table th { 653 background: #DEE7EC; 654 border-top: 1px solid #8CACBB; 655 border-bottom: 1px solid #8CACBB; 656 border-right: 1px solid #8CACBB; 657 color: Black; 658 font-weight: normal; 659 padding: 0em 1em 0em 1em; 660 text-transform: lowercase; 661 white-space: nowrap; 662} 663 664table.listing td.top { 665 border-left: 1px solid White; 666 border-top: 1px solid White ! important; 667 border-right: 1px solid White ! important; 668 text-align: right ! important; 669 padding: 0em 0em 1em 0em; 670 /* insane IE row bug workaround */ 671 position: relative; 672 left: -1px; 673 top: -1px; 674} 675 676table.listing tr.odd { 677 /*every second line should be shaded */ 678 background: transparent; 679} 680 681table.listing tr.even { 682 background: #F7F9FA; 683} 684 685table.listing td, 686div.stx table td { 687 border-right: 1px solid #8CACBB; 688 padding: 0em 1em; 689 text-align: left; 690} 691 692table.listing a:hover { 693 text-decoration: underline; 694} 695 696table.listing img { 697 vertical-align: middle; 698} 699 700/* Additional STX workaround classes */ 701 702div.stx table p /* stupid STX table workaround */ 703{ 704 margin: 0; 705 padding: 0; 706} 707 708div.stx table /* stupid STX table workaround */ 709{ 710 border: 1px solid #8CACBB ! important; 711} 712div.stx table td { 713 border-bottom: 1px solid #8CACBB; 714} 715 716 717div.box { 718 border: none; 719 margin: 0em 0em 2em 0em; 720 padding: 0; 721} 722 723div.box h4 { 724 font-size: 1em; 725} 726 727div.box h5 { 728 background: #DEE7EC; 729 border: 1px solid #8CACBB; 730 border-style: solid solid none solid; 731 color: Black; 732 padding: 0em 1em 0em 1em; 733 text-transform: lowercase; 734 display: inline; 735 font-size: 1em; 736 height: 1em; 737} 738 739div.box h6 { 740 background: #DEE7EC; 741 border: 1px solid #8CACBB; 742 border-style: solid solid none solid; 743 color: Black; 744 padding: 0em 1em 0em 1em; 745 text-transform: lowercase; 746 display: block; 747 font-size: 1em; 748 height: 1.2em; 749} 750 751 752div.box div.body { 753 background: transparent; 754 border-collapse: collapse; 755 border: 1px solid #8CACBB; 756} 757 758.boxDetails { 759 text-align: right; 760} 761 762div.box .content { 763 padding: 1em; 764} 765 766div.box a.close { 767 float: right; 768 text-transform: none; 769 border-left: 1px solid #8CACBB; 770 padding: 0em 0.2em; 771} 772 773div.box h1, 774div.box h2, 775div.box h3, 776div.box h4 { 777 margin: 0; 778 padding: 0; 779} 780 781div.box .even { 782 background-color: #F7F9FA; 783} 784 785div.box .odd { 786 background-color: transparent; 787} 788 789div.box input { 790 font-size: 100%; 791} 792 793div.spacer { 794 margin: 1em; 795} 796 797.currentNavItem { 798 color: Black; 799 font-weight: bold; 800} 801 802.private { 803 color: Black; 804} 805 806.published { 807 color: #74AE0B; 808} 809 810.pending { 811 color: #FFA500; 812} 813 814.syndicated { 815 color: #008000; 816} 817 818.expired { 819 color: Red; 820} 821 822.even { 823 background-color: #F7F9FA; 824} 825 826.odd { 827 background-color: transparent; 828} 829 830.highlight { 831 background-color: #F7F9FA; 832} 833 834div.listingBar { 835 background: #DEE7EC; 836 border-color: #8CACBB; 837 border-style: solid; 838 border-width: 1px; 839 padding: 0em 1em; 840 text-align: center; 841 text-transform: lowercase; 842 clear: both; 843 vertical-align: top; 844 margin: 1em 0em; 845} 846 847div.listingBar span.previous { 848 text-align: left; 849 float: left; 850} 851 852div.listingBar span.next { 853 text-align: right; 854 float: right; 855} 856 857div listingBar img { 858 vertical-align: middle; 859} 860 861 862/* 863** Calendar elements - used in the calendar rendering 864*/ 865 866div.day { 867 background-color: #FFFFBB; 868 border: 1px solid Black; 869 padding: 0.2em; 870 position: absolute; 871 visibility: hidden; 872 width: 12em; 873 z-index: 2; 874} 875 876div.date { 877 font-weight: bold; 878} 879 880 881table.calendar { 882 border: 1px solid #8CACBB; 883 margin: 0em 1em 2em 0em; 884 text-align: right; 885} 886 887table.calendar a { 888 text-decoration: none; 889 color: #436976; 890} 891 892table.calendar a:hover { 893 text-decoration: none; 894} 895 896table.calendar th { 897 background-color: #DEE7EC; 898 color: Black; 899 font-weight: bold; 900 text-align: center; 901} 902 903table.calendar td { 904 background-color: transparent; 905 width: 1.5em; 906 padding: 2px; 907} 908 909table.calendar td.weekdays { 910 background-color: #DEE7EC; 911 border: 1px solid #8CACBB; 912 border-style: solid none; 913 text-align: center; 914} 915 916table.calendar td.event { 917 background-color: #DEE7EC; 918 font-weight: bold; 919} 920 921table.calendar td.noevent { 922 background-color: transparent; 923} 924 925table.calendar td.todayevent { 926 background-color: #DEE7EC; 927 border: 2px solid #FFA500; 928 font-weight: bold; 929} 930 931table.calendar td.todaynoevent { 932 border-collapse: collapse; 933 border: 2px solid #FFA500; 934} 935 936 937 938 939 940 941/* */ 942 943