1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2019 webtrees development team 4 * This program is free software: you can redistribute it and/or modify 5 * it under the terms of the GNU General Public License as published by 6 * the Free Software Foundation, either version 3 of the License, or 7 * (at your option) any later version. 8 * This program is distributed in the hope that it will be useful, 9 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * GNU General Public License for more details. 12 * You should have received a copy of the GNU General Public License 13 * along with this program. If not, see <http://www.gnu.org/licenses/>. 14 */ 15 16/* The webtrees theme */ 17@import "_base.css"; 18@import "_block-charts.css"; 19@import "_chart-ancestors.css"; 20@import "_chart-compact.css"; 21@import "_chart-descendants.css"; 22@import "_chart-family-book.css"; 23@import "_chart-fan.css"; 24@import "_chart-hourglass.css"; 25@import "_chart-interactive.css"; 26@import "_chart-lifespans.css"; 27@import "_chart-pedigree.css"; 28@import "_chart-pedigree-map.css"; 29@import "_chart-relationships.css"; 30@import "_chart-statistics.css"; 31@import "_chart-timeline.css"; 32@import "_list-branches.css"; 33@import "_list-individuals.css"; 34@import "_list-media.css"; 35@import "_list-notes.css"; 36@import "_list-places.css"; 37@import "_list-repositories.css"; 38@import "_list-sources.css"; 39@import "_mime-type-icons.css"; 40@import "_on-screen-keyboard.css"; 41@import "_tab-relatives.css"; 42 43/* Colors for chart boxes, etc. */ 44:root { 45 --sex-f-fg: #ff2080; 46 --sex-m-fg: #81a9cb; 47 --sex-u-fg: #81a9cb; 48 --sex-f-bg: #e9daf1; 49 --sex-m-bg: #edf7fd; 50 --sex-u-bg: #ffffff; 51 --chart-line: solid gray thin; 52} 53 54/* Override Bootstrap formatting */ 55.btn-link { 56 padding-left: 0.25rem; 57 padding-right: 0.25rem; 58} 59 60.table-given-name { 61 overflow-x: hidden; 62} 63 64.container-fluid { 65 padding-left: 5px; 66 padding-right: 5px; 67} 68 69table { 70 border-collapse: separate; 71} 72 73/* 74 * Pages have the following high-level structure: 75 * 76 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 77 * +---wt-header-wrapper 78 * | +---wt-header-container 79 * | +---wt-header-content 80 * | +---wt-accessibility-links 81 * | +---wt-site-logo 82 * | +---wt-site-title 83 * | +---wt-header-search 84 * | | +---wt-header-search-form 85 * | | +---wt-header-search-field 86 * | | +---wt-header-search-button 87 * | +---wt-secondary-navigation 88 * | | +---wt-user-menu 89 * | +---wt-primary-navigation 90 * | +---wt-genealogy-menu 91 * +---wt-main-wrapper 92 * | +---wt-main-container 93 * | +---wt-main-content 94 * | +---wt-messages 95 * | +---wt-page-title 96 * | +---wt-page-options wt-page-options-xxxxx 97 * | +---wt-page-content 98 * +---wt-footers 99 * +---wt-footer wt-footer-contact 100 * +---wt-footer wt-footer-cookies 101 * +---wt-footer wt-footer-page-views 102 * +---wt-footer wt-footer-powered-by 103 */ 104 105.wt-global { 106 color: #555; 107} 108 109.wt-header-wrapper { 110} 111 112.wt-header-container { 113} 114 115.wt-header-content { 116} 117 118.wt-accessibility-links { 119} 120 121.wt-site-logo { 122 order: 1; 123 flex: 0 0 272px; 124} 125 126.wt-site-logo:after { 127 height: 50px; 128 width: 242px; 129 content: url(webtrees/images/webtrees.png); 130} 131 132.wt-site-title { 133 order: 3; 134 flex: 0 0 calc(100% - 15rem); 135 font-size: 1.5rem; 136 font-weight: normal; 137} 138 139.wt-header-search { 140 order: 4; 141 flex: 0 0 15rem; 142 position: relative; 143 top: -0.75rem; 144} 145 146.wt-header-search-form { 147} 148 149.wt-header-search-field { 150} 151 152.wt-header-search-button { 153} 154 155.wt-secondary-navigation { 156 order: 2; 157 white-space: nowrap; 158 margin-bottom: 15px; 159} 160 161.wt-user-menu { 162 flex-wrap: nowrap; 163 justify-content: flex-end; 164} 165 166.wt-user-menu .nav-link { 167 display: inline-block; 168 padding: 0.5rem; 169} 170 171.wt-user-menu .nav-item + .nav-item::before { 172 content: "|"; 173} 174 175.wt-user-menu .dropdown-toggle::after { 176 display: none; 177} 178 179.wt-primary-navigation { 180 order: 5; 181 /* Extend to full page width */ 182 flex: 0 0 100vw; 183 max-width: 100vw; 184 /* Recalculate margins for content */ 185 margin: 0 calc(50% - 50vw); 186 padding: 0 calc(50vw - 50%); 187 border-bottom: 2px solid #81a9cb; 188 border-top: 2px solid #81a9cb; 189} 190 191.wt-genealogy-menu { 192 justify-content: center; 193} 194 195.wt-genealogy-menu .nav-item { 196 text-align: center; 197 min-width: 5rem; 198} 199 200.wt-genealogy-menu .nav-link::before { 201 display: block; 202} 203 204.wt-genealogy-menu .dropdown-toggle::after { 205 display: none; 206} 207 208.wt-genealogy-menu .dropdown-menu { 209 border-radius: 0; 210 border: thin solid #aaa; 211} 212 213.wt-genealogy-menu .dropdown-item { 214 /* Space between icons and align with submenu icons */ 215 padding: 0 5px 0 0; 216 line-height: 1.0; 217} 218 219.wt-genealogy-menu .dropdown-item::before { 220 vertical-align: text-top; 221 line-height: 2.4; 222 padding: 0 .25rem; 223} 224 225.menu-tree .nav-link::before { 226 content: url(webtrees/menu/tree.png); 227} 228 229.menu-tree .dropdown-item::before { 230 content: url(webtrees/menu/tree-tree.png); 231} 232 233.menu-chart .nav-link::before { 234 content: url(webtrees/menu/chart.png); 235} 236 237.menu-chart-ancestry::before { 238 content: url(webtrees/menu/chart-ancestors.png); 239} 240 241.menu-chart-compact::before { 242 content: url(webtrees/menu/chart-compact.png); 243} 244 245.menu-chart-descendants::before { 246 content: url(webtrees/menu/chart-descendants.png); 247} 248 249.menu-chart-familybook::before { 250 content: url(webtrees/menu/chart-family-book.png); 251} 252 253.menu-chart-fanchart::before { 254 content: url(webtrees/menu/chart-fanchart.png); 255} 256 257.menu-chart-hourglass::before { 258 content: url(webtrees/menu/chart-hourglass.png); 259} 260 261.menu-chart-lifespan::before { 262 content: url(webtrees/menu/chart-lifespan.png); 263} 264 265.menu-chart-pedigree::before { 266 content: url(webtrees/menu/chart-pedigree.png); 267} 268 269.menu-chart-pedigreemap::before { 270 content: url(webtrees/menu/chart-pedigree-map.png); 271} 272 273.menu-chart-relationship::before { 274 content: url(webtrees/menu/chart-relationship.png); 275} 276 277.menu-chart-statistics::before { 278 content: url(webtrees/menu/chart-statistics.png); 279} 280 281.menu-chart-timeline::before { 282 content: url(webtrees/menu/chart-timeline.png); 283} 284 285.menu-chart-tree::before { 286 content: url(webtrees/menu/chart-tree.png); 287} 288 289.menu-list .nav-link::before { 290 content: url(webtrees/menu/list.png); 291} 292 293.menu-branches::before { 294 content: url(webtrees/menu/branches.png); 295} 296 297.menu-list-fam::before { 298 content: url(webtrees/menu/list-fam.png); 299} 300 301.menu-list-indi::before { 302 content: url(webtrees/menu/list-indi.png); 303} 304 305.menu-list-note::before { 306 content: url(webtrees/menu/list-note.png); 307} 308 309.menu-list-obje::before { 310 content: url(webtrees/menu/list-obje.png); 311} 312 313.menu-list-plac::before { 314 content: url(webtrees/menu/list-plac.png); 315} 316 317.menu-list-repo::before { 318 content: url(webtrees/menu/list-repo.png); 319} 320 321.menu-list-sour::before { 322 content: url(webtrees/menu/list-sour.png); 323} 324 325.menu-calendar .nav-link::before { 326 content: url(webtrees/menu/calendar.png); 327} 328 329.menu-calendar-day::before { 330 content: url(webtrees/menu/calendar-calendar.png); 331} 332 333.menu-calendar-month::before { 334 content: url(webtrees/menu/calendar-calendar.png); 335} 336 337.menu-calendar-year::before { 338 content: url(webtrees/menu/calendar-calendar.png); 339} 340 341.menu-report .nav-link::before { 342 content: url(webtrees/menu/report.png); 343} 344 345.menu-report .dropdown-item::before { 346 content: url(webtrees/menu/report-report.png); 347} 348 349.menu-search .nav-link::before { 350 content: url(webtrees/menu/search.png); 351} 352 353.menu-search .dropdown-item::before { 354 content: url(webtrees/menu/search-search.png); 355} 356 357.menu-help .nav-link::before { 358 content: url(webtrees/menu/help.png); 359} 360 361.menu-clippings .nav-link::before { 362 content: url(webtrees/menu/clippings.png); 363} 364 365.menu-clippings-add::before { 366 content: url(webtrees/menu/clippings-add.png); 367} 368 369.menu-clippings-cart::before { 370 content: url(webtrees/menu/clippings-cart.png); 371} 372 373.menu-clippings-download::before { 374 content: url(webtrees/menu/edit-preferences.png); 375} 376 377.menu-clippings-empty::before { 378 content: url(webtrees/menu/edit-delete.png); 379} 380 381.menu-fam .nav-link::before { 382 content: url(webtrees/menu/fam.png); 383} 384 385.menu-fam-change::before { 386 content: url(webtrees/menu/edit-famchange.png); 387} 388 389.menu-fam-addchil::before { 390 content: url(webtrees/menu/edit-addchil.png); 391} 392 393.menu-fam-orderchil::before { 394 content: url(webtrees/menu/edit-orderchil.png); 395} 396 397.menu-fam-del::before { 398 content: url(webtrees/menu/edit-delete.png); 399} 400 401.menu-fam-addfav::before { 402 content: url(webtrees/menu/edit-add-favorite.png); 403} 404 405.menu-fam-editraw::before { 406 content: url(webtrees/menu/edit-fam.png); 407} 408 409.menu-indi .nav-link::before { 410 content: url(webtrees/menu/indi.png); 411} 412 413.menu-indi-addname::before { 414 content: url(webtrees/menu/edit-indi.png); 415} 416 417.menu-indi-editsex::before { 418 content: url(webtrees/menu/edit-indi.png); 419} 420 421.menu-indi-del::before { 422 content: url(webtrees/menu/edit-delete.png); 423} 424 425.menu-indi-addfav::before { 426 content: url(webtrees/menu/edit-add-favorite.png); 427} 428 429.menu-indi-editraw::before { 430 content: url(webtrees/menu/edit-indi.png); 431} 432 433.menu-obje .nav-link::before { 434 content: url(webtrees/menu/obje.png); 435} 436 437.menu-obje-edit::before { 438 content: url(webtrees/menu/edit-obje.png); 439} 440 441.menu-obje-link::before { 442 content: url(webtrees/menu/edit-link.png); 443} 444 445.menu-obje-del::before { 446 content: url(webtrees/menu/edit-delete.png); 447} 448 449.menu-obje-addfav::before { 450 content: url(webtrees/menu/edit-add-favorite.png); 451} 452 453.menu-obje-editraw::before { 454 content: url(webtrees/menu/edit-obje.png); 455} 456 457.menu-note .nav-link::before { 458 content: url(webtrees/menu/note.png); 459} 460 461.menu-note-edit::before { 462 content: url(webtrees/menu/edit-note.png); 463} 464 465.menu-note-del::before { 466 content: url(webtrees/menu/edit-delete.png); 467} 468 469.menu-note-addfav::before { 470 content: url(webtrees/menu/edit-add-favorite.png); 471} 472 473.menu-note-editraw::before { 474 content: url(webtrees/menu/edit-note.png); 475} 476 477.menu-record .nav-link::before { 478 content: url(webtrees/menu/indi.png); 479} 480 481.menu-record-del::before { 482 content: url(webtrees/menu/edit-delete.png); 483} 484 485.menu-record-editraw::before { 486 content: url(webtrees/menu/edit-record.png); 487} 488 489.menu-repo .nav-link::before { 490 content: url(webtrees/menu/repo.png); 491} 492 493.menu-repo-edit::before { 494 content: url(webtrees/menu/edit-repo.png); 495} 496 497.menu-repo-del::before { 498 content: url(webtrees/menu/edit-delete.png); 499} 500 501.menu-repo-addfav::before { 502 content: url(webtrees/menu/edit-add-favorite.png); 503} 504 505.menu-repo-editraw::before { 506 content: url(webtrees/menu/edit-repo.png); 507} 508 509.menu-sour .nav-link::before { 510 content: url(webtrees/menu/sour.png); 511} 512 513.menu-sour-edit::before { 514 content: url(webtrees/menu/edit-sour.png); 515} 516 517.menu-sour-del::before { 518 content: url(webtrees/menu/edit-delete.png); 519} 520 521.menu-sour-addfav::before { 522 content: url(webtrees/menu/edit-add-favorite.png); 523} 524 525.menu-sour-editraw::before { 526 content: url(webtrees/menu/edit-sour.png); 527} 528 529.menu-story .nav-link::before { 530 content: url(webtrees/menu/story.png); 531} 532 533.wt-main-container { 534 /* Space between the header/footer and the main content. */ 535 padding-top: 1rem; 536 padding-bottom: 1rem; 537} 538 539.wt-main { 540} 541 542.wt-messages { 543} 544 545.wt-page-title { 546 color: #006; 547 font-size: 1.5rem; 548 font-weight: bold; 549 text-align: center; 550} 551 552.wt-page-options { 553} 554 555.wt-page-content { 556} 557 558.wt-page-options .form-group { 559 margin-bottom: 2px; 560} 561 562.wt-page-options-label { 563 color: #fff; 564 background-color: #81a9cb; 565 font-weight: bold; 566 border-left: 2px solid transparent; 567 border-right: 2px solid transparent; 568} 569 570.wt-page-options-value { 571 background-color: #edf7f9; 572 border: solid #81a9cb 1px; 573 padding: 0.25rem 0.75rem; 574} 575 576.wt-page-content { 577 margin-top: 1rem; 578} 579 580.wt-footers { 581} 582 583.wt-footer { 584} 585 586.wt-footer-contact { 587} 588 589.wt-footer-cookies { 590 background: #aaa; 591 color: #fff; 592 transition: height 0.5s; 593} 594 595.wt-footer-page-views { 596} 597 598.wt-footer-powered-by { 599} 600 601.wt-footer-powered-by-webtrees { 602 width: 100px; 603 height: 21px; 604 content: url(images/powered-by-webtrees.png); 605} 606 607/* 608 * The tree/user home pages 609 * 610 * wt-home-page / wt-user-page 611 * +---wt-main-blocks 612 * | +---wt-block, wt-block-AAA 613 * | +---wt-block, wt-block-BBB 614 * | +---wt-block, wt-block-CCC 615 * +---wt-side-blocks 616 * +---wt-block, wt-block-XXX 617 * +---wt-block, wt-block-YYY 618 * +---wt-block, wt-block-ZZZ 619 * 620 * Each block as the structure 621 * wt-block, wt-block-XXX 622 * +---wt-block-header, wt-block-header-XXX 623 * +---wt-block-content, wt-block-content-XXX 624 */ 625 626.wt-block { 627 background-color: #edf7fd; 628 border: solid #81a9cb 1px; 629} 630 631.wt-block-header { 632 background-color: #edf7fd; 633 border-bottom: none; 634 font-weight: bold; 635} 636 637.wt-block-content { 638} 639 640.wt-block-content .list_table { 641 border-spacing: 1px; 642 border: solid #81a9cb 1px; 643 border-right: 0; 644} 645 646.wt-block-content .list_value, 647.wt-block-content .list_value_wrap { 648 border: 0; 649 border-top: solid #81a9cb 1px; 650 border-right: solid #81a9cb 1px; 651} 652 653/* 654 * The individual page. 655 * 656 * wt-route-individual 657 * +---wt-header-wrapper 658 */ 659 660.wt-individual-silhouette { 661 content: url(images/individual-silhouette-unknown.png); 662} 663 664.wt-individual-silhouette-f { 665 content: url(images/individual-silhouette-female.png); 666} 667 668.wt-individual-silhouette-m { 669 content: url(images/individual-silhouette-male.png); 670} 671 672/* 673 * Chart-boxes are used to build the various charts. 674 * Each type of chart will set its own size and hide/show content. 675 * 676 * wt-chart-box 677 * +--- wt-chart-box-thumbnail 678 * +--- wt-chart-box-extra 679 * +--- wt-chart-box-zoom 680 * +--- wt-chart-box-icon 681 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 682 * +--- wt-chart-box-links 683 * +--- wt-chart-box-icon 684 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 685 * +--- wt-chart-box-name 686 * +--- wt-chart-box-lifespan 687 * +--- wt-chart-box-facts 688 * +--- wt-chart-box-fact 689 */ 690.wt-chart-box, 691.wt-chart-box-menu { 692 background: var(--sex-u-bg); 693 border: dashed var(--sex-u-fg) thin; 694} 695 696.wt-chart-box { 697 height: 5rem; 698 padding: 2px; 699 line-height: 1.1; 700} 701 702.wt-chart-box-f, 703.wt-chart-box-f .wt-chart-box-dropdown { 704 background: var(--sex-f-bg); 705 border: solid var(--sex-f-fg) thin; 706} 707 708.wt-chart-box-m, 709.wt-chart-box-m .wt-chart-box-dropdown { 710 background: var(--sex-m-bg); 711 border: solid var(--sex-m-fg) thin; 712} 713 714/* 715 * Calendar 716 * 717 * wt-calendar-page 718 */ 719 720/* 721 * Reports 722 * 723 * wt-reports-page 724 */ 725 726/* 727 * Search 728 * 729 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page 730 */ 731 732a { 733 color: #555; 734 text-decoration: none; 735} 736 737a:hover { 738 color: #f00; 739 text-decoration: none; 740} 741 742:focus { 743 outline-style: none; 744} 745 746.flash-messages { 747 clear: both; 748 text-align: center; 749} 750 751img { 752 border: 0; 753} 754 755legend img { 756 height: 20px; 757 vertical-align: middle; 758 width: 20px; 759} 760 761img.block, 762#mycart img { 763 border: 0; 764 height: 25px; 765 vertical-align: middle; 766} 767 768.topbottombar { 769 background-color: #81a9cb; 770 color: #fff; 771 font-weight: bold; 772 padding: 4px; 773 text-align: center; 774} 775 776#mycart a img { 777 height: 15px; 778} 779 780.button { 781 width: 60px; 782} 783 784.alpha_index { 785 color: #999; 786} 787 788.news_box:target, 789#gedcom_stats:target { 790 background-color: #ffc; 791} 792 793/* families tab person box */ 794table.center { 795 margin-left: auto; 796 margin-right: auto; 797} 798 799.list_table { 800 margin: 0 auto; 801} 802 803.list_label, 804.list_label_wrap { 805 color: #fff; 806 background-color: #81a9cb; 807 font-weight: bold; 808 text-align: center; 809} 810 811.list_value, 812.list_value_wrap { 813 background-color: #edf7f9; 814 border: solid #81a9cb 1px; 815 vertical-align: top; 816 padding: 4px; 817} 818 819.list_label, 820.list_value { 821 white-space: nowrap; 822} 823 824.list_label_wrap, 825.list_value_wrap { 826 white-space: normal; 827} 828 829div.fact_SHARED_NOTE { 830 clear: both; 831} 832 833/* Table of genealogical facts */ 834 835.wt-facts-table caption { 836 caption-side: top; 837} 838 839.wt-facts-table th { 840 background-color: #81a9cb; 841 border: solid #81a9cb 1px; 842 text-align: center; 843 font-weight: normal; 844 min-width: 20%; 845} 846 847.wt-facts-table td { 848 background-color: #edf7fd; 849 border: solid #81a9cb 1px; 850} 851 852.wt-facts-table .wt-gender-M td { 853 background-color: #edf7fd; 854 border-color: #81a9cb; 855} 856 857.wt-facts-table .wt-gender-F td { 858 background-color: #e9daf1; 859 border-color: #ff2080; 860} 861 862.tabs_table { 863 width: 99%; 864} 865 866.name1 { 867 font-weight: bold; 868 font-size: 12px; 869} 870 871.name2 { 872 font-size: 16px; 873} 874 875a:hover .name1, a:hover .name2 { 876 color: #f00; 877 font-weight: bold; 878 font-size: 12px; 879} 880 881a:hover .nameZoom { 882 color: #f00; 883 font-size: 16px; 884 font-weight: bold; 885} 886 887.details0, 888.details1 { 889 font-size: 11px; 890} 891 892.details2 { 893 font-size: 12px; 894} 895 896.nameZoom { 897 color: #555; 898 font-size: 16px; 899 font-weight: bold; 900} 901 902.details_label { 903 font-weight: bold; 904} 905 906.name_head { 907 color: #555; 908 font-size: 16px; 909 font-weight: bold; 910 line-height: 2; 911 padding: 0 5px; 912} 913 914.date { 915 color: #337; 916} 917 918.label { 919 font-weight: bold; 920} 921 922.error { 923 color: #d00; 924 font-weight: bold; 925} 926 927.largeError { 928 color: #d00; 929 font-size: large; 930 font-weight: bold; 931} 932 933.warning { 934 color: #f00; 935 font-weight: bold; 936} 937 938.indent { 939 padding-left: 20px; 940} 941 942.image { 943 height: 150px; 944 padding: 5px; 945 margin: 2px; 946} 947 948.gender_image { 949 margin: 0 3px; 950 border: 0; 951 vertical-align: middle; 952} 953 954.thumbnail { 955 height: auto; 956 padding: 3px; 957} 958 959.icon { 960 border: 0; 961 padding: 0 5px; 962} 963 964.sublinks_cell { 965 background-color: #edf7fd; 966 font-size: 12px; 967} 968 969.submenu .icon { 970 vertical-align: middle; 971 width: 20px; 972 height: 20px; 973} 974 975.subheaders { 976 font-weight: bold; 977 font-size: 15px; 978 margin-top: 15px; 979 vertical-align: bottom; 980} 981 982#family-table .subheaders:first-child { 983 width: 285px; 984} 985 986.parentdeath { 987 border: thin solid #888; 988 padding: 1px; 989} 990 991.source_citations { 992 display: none; 993} 994 995.selected-option { 996 background-color: #edf7fd; 997} 998 999.border1 { 1000 border: solid #000 1px; 1001} 1002 1003.menuitem { 1004 text-decoration: none; 1005 font-size: 11px; 1006 padding: 1px; 1007} 1008 1009.menuitem_hover { 1010 text-decoration: none; 1011 font-size: 11px; 1012 padding: 1px; 1013} 1014 1015.menuitem .icon, .menuitem_hover .icon { 1016 width: 50px; 1017 height: 50px; 1018} 1019 1020.submenu { 1021 text-decoration: none; 1022 font-size: 11px; 1023 background-color: #edf7fd; 1024 border: solid #81a9cb 1px; 1025 visibility: hidden; 1026 position: absolute; 1027 padding: 5px; 1028} 1029 1030.submenuitem { 1031 vertical-align: middle; 1032 font-size: 11px; 1033 height: 20px; 1034 text-decoration: none; 1035 background-color: #edf7fd; 1036 padding: 1px; 1037 white-space: nowrap; 1038} 1039 1040.submenuitem_hover { 1041 vertical-align: middle; 1042 height: 20px; 1043 font-size: 11px; 1044 background-color: #e6f0fa; 1045 white-space: nowrap; 1046 padding: 1px; 1047} 1048 1049.submenuitem a, 1050.submenuitem_hover a { 1051 display: inline-block; 1052 vertical-align: middle; 1053} 1054 1055.journal_box { 1056 padding: 3pt; 1057 border: thin solid #aaa; 1058 overflow: visible; 1059} 1060 1061.news_box { 1062 background-color: #edf7fd; 1063 border-top: solid #81a9cb 1px; 1064} 1065 1066.news_title { 1067 font-weight: bold; 1068} 1069 1070.news_date { 1071 margin-bottom: 12px; 1072} 1073 1074.current_day { 1075 font-weight: bold; 1076 font-size: 16px; 1077} 1078 1079.cal_day { 1080 float: left; 1081 font-weight: bold; 1082} 1083 1084.rtl_cal_day { 1085 direction: rtl; 1086 float: right; 1087 color: #00f; 1088 font-weight: bold; 1089} 1090 1091.helpcontent { 1092 margin-left: 10px; 1093 margin-right: 10px; 1094} 1095 1096.helpcontent dt { 1097 clear: both; 1098} 1099 1100#user-page h1 { 1101 margin: 0.25em auto 0.6em; 1102} 1103 1104.tvertline { 1105 vertical-align: bottom; 1106} 1107 1108#childbox { 1109 padding: 5px; 1110 position: absolute; 1111 display: none; 1112 text-align: start; 1113 white-space: nowrap; 1114 top: 20px; 1115 left: 0; 1116} 1117 1118.layout3 #childbox { 1119 top: auto; 1120 bottom: 20px; 1121} 1122 1123#childbox a.name1 { 1124 display: block; 1125 margin-left: 5px; 1126} 1127 1128.person0 { 1129 background-color: #aaf; 1130 border: outset #aaf 1px; 1131 vertical-align: top; 1132} 1133 1134.person1 { 1135 background-color: #afa; 1136 border: outset #afa 1px; 1137 vertical-align: top; 1138} 1139 1140.person2 { 1141 background-color: #faa; 1142 border: outset #faa 1px; 1143 vertical-align: top; 1144} 1145 1146.person3 { 1147 background-color: #55f; 1148 border: outset #55f 1px; 1149 vertical-align: top; 1150} 1151 1152.person4 { 1153 background-color: #f55; 1154 border: outset #f55 1px; 1155 vertical-align: top; 1156} 1157 1158.person5 { 1159 background-color: #5f5; 1160 border: outset #5f5 1px; 1161 vertical-align: top; 1162} 1163 1164.listlog { 1165 line-height: 20pt; 1166} 1167 1168.starredname { 1169 text-decoration: underline; 1170} 1171 1172.search_hit { 1173 background-color: #ff0; 1174} 1175 1176.search_item { 1177 font-weight: 600; 1178} 1179 1180.descriptionbox { 1181 color: #fff; 1182 font-size: 12px; 1183 background-color: #81a9cb; 1184 border: solid #81a9cb 1px; 1185 vertical-align: top; 1186 padding: 3px; 1187} 1188 1189.optionbox { 1190 background-color: #d1d9ef; 1191 font-size: 1rem; 1192 border: solid #81a9cb 1px; 1193 vertical-align: top; 1194 white-space: nowrap; 1195 padding: 3px; 1196} 1197 1198.vmiddle { 1199 vertical-align: middle; 1200} 1201 1202.red { 1203 color: #f00; 1204} 1205 1206.wt-relation-fact, 1207.wt-historic-fact { 1208 opacity: 0.8; 1209} 1210 1211.font9 { 1212 font-size: 9px; 1213} 1214 1215.font11 { 1216 font-size: 11px; 1217} 1218 1219.messagebox { 1220 background-color: #c2ceef; 1221 border: solid #81a9cb 1px; 1222} 1223 1224/* ---Pending edits--- */ 1225.new { 1226 outline: solid blue 1px; 1227} 1228 1229.old { 1230 outline: solid red 1px; 1231} 1232 1233.tag_cloud { 1234 text-align: center; 1235} 1236 1237.tag_cloud a { 1238 white-space: nowrap; 1239} 1240 1241.nowrap { 1242 white-space: nowrap; 1243} 1244 1245.wrap { 1246 white-space: normal; 1247} 1248 1249.statistics-page { 1250 text-align: center; 1251} 1252 1253.gchart { 1254 border: solid #81a9cb 1px; 1255} 1256 1257/* ---Find special characters--- */ 1258.largechars { 1259 font-family: monospace; 1260 font-size: 200%; 1261} 1262 1263#facts_content dd { 1264 float: left; 1265 width: 70%; 1266} 1267 1268td.descriptionbox a { 1269 color: #fff; 1270} 1271 1272/* this keeps the tag color the same when it is a link as when not */ 1273 1274.place { 1275 padding-top: 5px; 1276} 1277 1278#pending h2 { 1279 text-align: center; 1280 margin-bottom: 20px; 1281} 1282 1283#pending h3 { 1284 text-align: center; 1285 margin-top: 20px; 1286} 1287 1288#pending a { 1289 font-weight: 700; 1290 color: #555; 1291} 1292 1293#pending a:hover { 1294 color: #f00; 1295} 1296 1297#pending .list_value { 1298 padding: 3px; 1299 text-align: center; 1300 vertical-align: middle; 1301 white-space: nowrap; 1302} 1303 1304#pending .indent { 1305 padding: 0; 1306} 1307 1308/* --- reportengine.php --- */ 1309#reportengine-page table { 1310 margin: 20px auto; 1311} 1312 1313#reportengine-page .report-type { 1314 overflow: hidden; 1315 margin: auto; 1316 width: 180px; 1317} 1318 1319#reportengine-page .report-type div { 1320 float: left; 1321 margin: 0 20px; 1322} 1323 1324#reportengine-page .report-type p { 1325 margin: 0; 1326 text-align: center; 1327} 1328 1329/* styles for popup menus */ 1330.itr { 1331 position: absolute; 1332 line-height: 1.5; 1333} 1334 1335.popup { 1336 position: absolute; 1337 top: 20px; 1338 right: 0; 1339 left: auto; 1340 visibility: hidden; 1341 opacity: 0; 1342 transition: visibility 0s ease .25s, opacity .25s ease; 1343 z-index: 9999; 1344 box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .4); 1345} 1346 1347.popup ul { 1348 white-space: nowrap; 1349 list-style: none; 1350 margin: 0; 1351 padding: 0 10px; 1352 font-size: smaller; 1353} 1354 1355.popup > ul { 1356 padding: 2px 10px; 1357} 1358 1359.popup li .NAME { 1360 padding: 0 5px; 1361} 1362 1363.itr:hover .popup { 1364 visibility: visible; 1365 opacity: 1; 1366 transition-delay: 0s; 1367} 1368 1369/* styles for FindFacts pop-up */ 1370#layDefinedTags, 1371#tabDefinedTagsShow { 1372 width: 450px; 1373} 1374 1375#tabDefinedTags { 1376 width: 430px; 1377} 1378 1379#layDefinedTags { 1380 margin-left: auto; 1381 margin-right: auto; 1382 height: 285px; 1383 overflow: auto; 1384} 1385 1386#tabDefinedTags { 1387 border-collapse: collapse; 1388} 1389 1390#tabDefinedTags th, 1391#tabDefinedTags td { 1392 border: solid 1px #000; 1393 margin: 0; 1394 padding: 3px; 1395} 1396 1397#tabDefinedTags tbody th { 1398 text-align: left; 1399 font-weight: bold; 1400} 1401 1402#tabDefinedTags tr.sel { 1403 background-color: #d1d9ef; 1404 color: #888; 1405} 1406 1407#tabDefinedTags tr.unsel { 1408 background-color: #fff; 1409 color: #888; 1410} 1411 1412#tabDefinedTagsShow { 1413 margin-left: auto; 1414 margin-right: auto; 1415} 1416 1417#tabDefinedTagsShow td { 1418 width: 50%; 1419 text-align: center; 1420} 1421 1422#tabFilterAndCustom { 1423 margin-left: auto; 1424 margin-right: auto; 1425} 1426 1427#tabAction { 1428 margin-left: auto; 1429 margin-right: auto; 1430} 1431 1432#tabAction td { 1433 width: 50%; 1434 text-align: center; 1435} 1436 1437/* ======== List styles ====== */ 1438.surname-list, 1439.givn-list { 1440 margin: 5px auto; 1441} 1442 1443.source-list table, 1444.note-list table, 1445.repo-list table, 1446.media-list table, 1447.indi-list table, 1448.fam-list table { 1449 width: 100%; 1450} 1451 1452.source-list td, 1453.note-list td, 1454.repo-list td, 1455.media-list td, 1456.indi-list td, 1457.fam-list td, 1458.surname-list td, 1459.givn-list td { 1460 padding: 2px 5px; 1461} 1462 1463.surname-list td { 1464 vertical-align: top; 1465} 1466 1467.indi-list .stats, 1468.fam-list .stats { 1469 margin: 0 auto; 1470 width: auto; 1471} 1472 1473.source-list th, 1474.note-list th, 1475.repo-list th, 1476.media-list th, 1477.indi-list th, 1478.fam-list th, 1479.wt-table-changes th, 1480.wt-table-events th, 1481.wt-table-tasks th, 1482.wt-table-yahrzeits th, 1483.surname-list th, 1484.givn-list th { 1485 cursor: pointer; 1486 font-weight: 600; 1487 padding: 2px 4px; 1488 white-space: nowrap; 1489} 1490 1491.source-list th:last-child, 1492.note-list th:last-child, 1493.repo-list th:last-child { 1494 margin: 0 -2px 1px 1px; 1495 padding: 3px 0 4px; 1496 width: 24px; 1497} 1498 1499.givn-list th { 1500 cursor: pointer; 1501 white-space: nowrap; 1502 padding: 2px; 1503 text-align: center; 1504} 1505 1506#source-details h2, 1507#sourcelist-page h2, 1508#note-details h2, 1509#notelist-page h2, 1510#repo-details h2, 1511#repolist-page h2, 1512#media-details h2, 1513#statistics-page h2 { 1514 margin-bottom: 20px; 1515 text-align: center; 1516} 1517 1518#source-edit, 1519#note-edit, 1520#repo-edit, 1521#media-edit { 1522 overflow-x: auto; 1523} 1524 1525.media-list td img { 1526 display: block; 1527 height: 40px; 1528 width: auto; 1529 margin: 3px auto; 1530} 1531 1532.filtersH, 1533.filtersF { 1534 margin: 4px; 1535} 1536 1537.filtersH img { 1538 margin-bottom: 2px; 1539} 1540 1541.list-charts { 1542 text-align: center; 1543} 1544 1545#search-result-tabs h3 { 1546 text-align: center; 1547} 1548 1549#searchAccordion-indi, 1550#searchAccordion-fam, 1551#searchAccordion-source, 1552#searchAccordion-note { 1553 margin: auto; 1554 width: 99%; 1555} 1556 1557#place-hierarchy h2, 1558#place-hierarchy h4 { 1559 text-align: center; 1560} 1561 1562#main_select, 1563#available_select, 1564#right_select { 1565 min-width: 150px; 1566} 1567 1568/* ==== Favourites block ===== */ 1569.add_fav_head { 1570 font-weight: 900; 1571 margin: 5px 0; 1572} 1573 1574.add_fav_head i { 1575 margin: 0 5px 1px; 1576} 1577 1578.add_fav_ref label { 1579 display: inline-block; 1580 min-width: 100px; 1581} 1582 1583.add_fav_ref input { 1584 margin: 0 5px; 1585} 1586 1587/* === Who is online block === */ 1588.logged_in_list { 1589 margin: 5px 0 0; 1590 padding: 0; 1591 line-height: 20px; 1592} 1593 1594/* ==== Theme select block === */ 1595.theme_form ul { 1596 margin: -10px auto; 1597} 1598 1599.theme_form li { 1600 visibility: hidden; 1601} 1602 1603.theme_form li ul li { 1604 display: inline-block; 1605 padding: 10px; 1606 visibility: visible; 1607} 1608 1609/* ==== FAQ table styles ===== */ 1610table.faq { 1611 background-color: #e0e0e0; 1612 margin: 5px 0 50px 5px; 1613 width: 98%; 1614} 1615 1616table.faq tr:nth-child(odd) td { 1617 background-color: #e7eef3; 1618} 1619 1620div.faq_title { 1621 background-color: #e0e0e0; 1622 margin: 1em 0; 1623 padding: .25em; 1624 font-weight: bold; 1625 width: 98%; 1626} 1627 1628div.faq_body { 1629 clear: both; 1630 padding: 0 1em; 1631} 1632 1633.faq_top { 1634 float: right; 1635} 1636 1637/* === Positioning edit, copy, delete links === */ 1638/* General use */ 1639.editfacts { 1640 clear: left; 1641 padding-top: 15px; 1642} 1643 1644/* ======== Indi header ====== */ 1645#indi_header { 1646 overflow: hidden; 1647 border-radius: 3px; 1648 border: 1px solid #b2c7d7; 1649 margin: 0 0 5px; 1650 padding: 10px 0; 1651} 1652 1653#indi_header h3 { 1654 font-size: 90%; 1655 font-weight: bold; 1656 margin: 0; 1657 padding: 0 10px 0 30px; 1658 text-align: left; 1659 overflow: hidden; 1660 position: relative; 1661} 1662 1663#indi_header .name_one { 1664 font-size: 1.5em; 1665} 1666 1667#indi_header h3 .details1 { 1668 font-size: 1.0em; 1669} 1670 1671#indi_header h3 .header_age { 1672 padding: 5px 0 5px 5px; 1673 float: right; 1674 font-weight: normal; 1675 font-size: 65%; 1676} 1677 1678#indi_header h3 a { 1679 display: inline; 1680} 1681 1682#indi_header a { 1683 color: #337; 1684 font-size: 0.75em; 1685 font-weight: normal; 1686} 1687 1688#indi_header a:hover { 1689 color: #f00; 1690} 1691 1692#indi_mainimage { 1693 float: left; 1694 padding: 0 10px; 1695} 1696 1697#header_accordion1 { 1698 padding: 0 10px 0 0; 1699 overflow: hidden; 1700} 1701 1702#header_accordion1 .indi_name_details { 1703 margin: 0; 1704 overflow: hidden; 1705 padding: 5px; 1706} 1707 1708.indi_name_details .name1 { 1709 font-weight: normal; 1710 padding-top: 5px; 1711 font-size: inherit; 1712} 1713 1714#indi_header a.warning { 1715 color: #f00; 1716 font-size: 1em; 1717} 1718 1719#indi_note { 1720 margin: 0 0 5px; 1721} 1722 1723.indi_table { 1724 clear: left; 1725} 1726 1727#sex { 1728 float: right; 1729} 1730 1731#dates { 1732 float: right; 1733} 1734 1735#individual-names .wt-icon-edit, 1736#individual-names .wt-icon-delete { 1737 float: right; 1738} 1739 1740#indi_note .fact_NOTE { 1741 float: left; 1742 margin: 0 5px 0 0; 1743} 1744 1745#indi_note .fact_SOUR { 1746 margin: 3px 0; 1747} 1748 1749#indi_note .fact_SOUR a { 1750 font-size: 100%; 1751} 1752 1753#indi_note .fact_NOTE, 1754#indi_note .fact_SOUR { 1755 clear: both; 1756} 1757 1758/* markdown formatting */ 1759 1760.markdown { 1761 /* Tables and pre-formatted text can break the layout. */ 1762 overflow-x: auto; 1763} 1764 1765.markdown p { 1766 margin: 0 0 0.5em; 1767 white-space: pre-wrap; 1768} 1769 1770.markdown table { 1771 border-collapse: collapse; 1772 margin-bottom: 5px; 1773} 1774 1775.markdown th { 1776 font-weight: bold; 1777} 1778 1779.markdown td, 1780.markdown th { 1781 border: solid thin #000; 1782 padding: 3px; 1783} 1784 1785.odometer { 1786 font-family: courier, monospace; 1787 font-weight: bold; 1788 background: #000; 1789 color: #fff; 1790} 1791 1792/* ======== Indi tabs ======== */ 1793/* Facts & Events tab */ 1794#personal_facts_content .fact_NOTE, 1795#personal_facts_content .fact_SOUR, 1796#family-table .fact_NOTE, 1797#family-table .fact_SOUR { 1798 margin: 5px 3px 5px 0; 1799 clear: both; 1800} 1801 1802.media-display-image { 1803 float: left; 1804} 1805 1806.media-display-title { 1807 float: left; 1808 font-style: italic; 1809 margin: 10px; 1810} 1811 1812/* === jQuery.datatable styling general over-rides === */ 1813.odd { 1814 background-color: #e7eef3; 1815} 1816 1817.even { 1818 background-color: #e6e6e6; 1819} 1820 1821.css_right { 1822 float: left; 1823} 1824 1825.fg-button { 1826 padding: 2px 6px; 1827} 1828 1829.dataTables_paginate { 1830 float: left; 1831 margin-bottom: 3px; 1832} 1833 1834.dataTables_processing { 1835 float: left; 1836} 1837 1838.dataTables_filter { 1839 float: right; 1840 font-weight: normal; 1841} 1842 1843.dataTables_info { 1844 float: left; 1845 font-weight: normal; 1846 padding: 4px; 1847} 1848 1849.dataTables_length { 1850 float: right; 1851 font-weight: normal; 1852} 1853 1854.dataTables_length select, 1855.dataTables_filter input { 1856 font-size: 11px; 1857 padding: 1px; 1858} 1859 1860.dt-clear { 1861 clear: both; 1862} 1863 1864#loading { 1865 text-align: center; 1866} 1867 1868.DataTables_sort_wrapper { 1869 position: relative; 1870 margin: 0 20px; 1871} 1872 1873.DataTables_sort_wrapper span { 1874 left: 0; 1875 margin-left: -20px; 1876 margin-top: -8px; 1877 position: absolute; 1878 top: 50%; 1879} 1880 1881.dataTables_wrapper { 1882 margin-bottom: 10px; 1883} 1884 1885/* ======= Sidebar setup ===== */ 1886#main { 1887 min-width: 600px; 1888 width: 100%; 1889 display: table; 1890 table-layout: fixed; 1891} 1892 1893#indi_left { 1894 display: table-cell; 1895} 1896 1897#tabs { 1898 background-color: #fff; 1899 border-color: #ddd; 1900 margin-left: 0; 1901 overflow: visible; 1902 width: 100%; 1903} 1904 1905/* sidebar */ 1906#sidebar { 1907 width: 20%; 1908 display: table-cell; 1909 vertical-align: top; 1910} 1911 1912/* Sidebar - Family navigator */ 1913.wt-family-navigator-dropdown { 1914 background: #edf7fd; 1915} 1916 1917.wt-family-navigator-dropdown-heading { 1918 font-weight: bold; 1919 font-size: inherit; 1920 color: inherit; 1921} 1922 1923/* Sidebar - Descendants */ 1924#sb_content_descendancy { 1925 margin-top: 5px; 1926} 1927 1928#sb_desc_content { 1929 margin-left: 3px; 1930 font-size: 0.8em; 1931} 1932 1933#sb_desc_content ul { 1934 padding: 0; 1935 margin: 0; 1936} 1937 1938.sb_desc_indi_li { 1939 list-style-type: none; 1940} 1941 1942.desc_tree_div { 1943 display: none; 1944} 1945 1946.desc_tree_div ul { 1947 padding: 0; 1948 margin-left: 10px; 1949 margin-top: 0; 1950 margin-right: 0; 1951} 1952 1953/* Individuals and Families */ 1954#sidebar-content-individuals, 1955#sidebar-content-families { 1956 margin-top: 5px; 1957} 1958 1959.sb_indi_surname_li, 1960.sb_fam_surname_li { 1961 list-style-image: url(webtrees/images/plus.png); 1962} 1963 1964.name_tree_div ul { 1965 padding: 0; 1966 margin: 0; 1967} 1968 1969.name_tree_div li { 1970 list-style: none; 1971 margin: 0; 1972 padding: 0; 1973} 1974 1975/* Clippings */ 1976#sb_clippings_content ul { 1977 padding: 0; 1978 margin: 0; 1979} 1980 1981#sb_clippings_content li { 1982 list-style: none; 1983 margin: 0; 1984 padding: 0; 1985 white-space: nowrap; 1986} 1987 1988/* Extra info */ 1989#sb_content_extra_info { 1990 font-size: 80%; 1991 font-weight: bold; 1992 margin-top: 1px; 1993 overflow: hidden; 1994 padding: 5px; 1995} 1996 1997#sb_content_extra_info .editfacts { 1998 float: right; 1999 margin-top: -30px; 2000} 2001 2002#sb_content_extra_info a { 2003 display: block; 2004} 2005 2006#sb_content_extra_info span { 2007 font-weight: normal; 2008} 2009 2010#sb_content_extra_info span a { 2011 display: inline; 2012} 2013 2014#sb_content_extra_info #hitcounter { 2015 border-top: 1px solid #b2c7d7; 2016 font-weight: bold; 2017 padding-top: 5px; 2018} 2019 2020/* http://www.jacklmoore.com/colorbox */ 2021#colorbox, 2022#cboxOverlay, 2023#cboxWrapper { 2024 position: absolute; 2025 top: 0; 2026 left: 0; 2027 z-index: 9999; 2028 overflow: hidden; 2029} 2030 2031#cboxWrapper { 2032 max-width: none; 2033} 2034 2035#cboxOverlay { 2036 position: fixed; 2037 width: 100%; 2038 height: 100%; 2039 background: #fff; 2040} 2041 2042#cboxContent { 2043 background: #fff; 2044 overflow: hidden; 2045 position: relative; 2046 padding: 0.5rem; 2047 border: 0.25rem solid #ccc; 2048} 2049 2050#cboxLoadingOverlay, 2051#cboxLoadingGraphic { 2052 position: absolute; 2053 top: 0; 2054 left: 0; 2055 width: 100%; 2056 height: 100%; 2057} 2058 2059.cboxPhoto { 2060 float: left; 2061 margin: auto; 2062 border: 0; 2063 display: block; 2064 max-width: none; 2065} 2066 2067#colorbox, 2068#cboxContent, 2069#cboxLoadedContent { 2070 box-sizing: content-box; 2071} 2072 2073#cboxError { 2074 padding: 50px; 2075 border: 1px solid #ccc; 2076} 2077 2078#cboxLoadedContent { 2079 margin-bottom: 28px; 2080} 2081 2082#cboxTitle { 2083 background: #fff; 2084 position: absolute; 2085 bottom: 0.25rem; 2086 left: 0; 2087 margin: 0 3rem; 2088 text-align: center; 2089} 2090 2091#cboxLoadingGraphic { 2092 background: url(images/loading-32x32.gif) no-repeat center center; 2093} 2094 2095#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { 2096 background: none; 2097 border: 0; 2098 cursor: pointer; 2099 font-family: "Font Awesome\ 5 Free", sans-serif; 2100 font-weight: 900; 2101 overflow: visible; 2102 padding: 0; 2103 position: absolute; 2104} 2105 2106#cboxSlideshow { 2107 bottom: 0.25rem; 2108 right: 0.25rem; 2109} 2110 2111#cboxPrevious { 2112 bottom: 0.25rem; 2113 left: 0.25rem; 2114} 2115 2116#cboxNext { 2117 bottom: 0.25rem; 2118 left: 1.5rem; 2119} 2120 2121#cboxClose { 2122 top: 0.25rem; 2123 right: 0.25rem; 2124} 2125 2126/* Stories module */ 2127.story_title { 2128 padding-top: 12px; 2129 font-size: 13px; 2130 height: 32px; 2131 font-weight: bold; 2132} 2133 2134.story_body { 2135 padding: 20px; 2136 white-space: normal; 2137} 2138 2139.story_edit { 2140 padding: 12px; 2141} 2142 2143/* ====== Charts Styles ======== */ 2144#people label { 2145 display: block; 2146} 2147 2148/* Ancestry chart */ 2149.wt-chart-ancestors-list { 2150 background: transparent url(images/vline.png) left top repeat-y; 2151 margin: 0 0 0 15px; 2152 padding: 0; 2153 display: block; 2154} 2155 2156.wt-chart-ancestors-list-item { 2157 margin: 5px 0; 2158} 2159 2160.chart_common li { 2161 list-style: outside none none; 2162} 2163 2164.generations { 2165 background: transparent url(images/vline.png) repeat-y scroll left top; 2166 display: block; 2167 margin: 0 0 0 15px; 2168 padding: 0; 2169} 2170 2171.chart_common table { 2172 padding: 0; 2173 border-spacing: 0; 2174 border-collapse: collapse; 2175 margin: 5px 0; 2176} 2177 2178.chart_common td { 2179 border: 0; 2180 padding: 0; 2181} 2182 2183.chart_common span.details1 div[class^=fact_] { 2184 display: inline-block; 2185} 2186 2187.chart_common span.details1 .date { 2188 color: inherit; 2189} 2190 2191/*-- Family book --*/ 2192#familybook_chart { 2193 margin-left: 10px; 2194} 2195 2196#familybook_chart table { 2197 border-collapse: collapse; 2198 empty-cells: show; 2199} 2200 2201#familybook_chart td { 2202 margin: 0; 2203 padding: 0; 2204} 2205 2206#familybook_chart h2 { 2207 text-align: center; 2208} 2209 2210#familybook_chart .line3, 2211#familybook_chart .pvline, 2212#familybook_chart .spacer { 2213 width: 3px; 2214} 2215 2216#familybook_chart .line4 { 2217 width: 7px; 2218 vertical-align: middle; 2219} 2220 2221[ID^="vline"] { 2222 width: 3px; 2223} 2224 2225#familybook_chart h3 { 2226 color: #006; 2227 font-size: 16px; 2228 text-align: center; 2229} 2230 2231/*-- Fan chart ---- */ 2232.fan_chart_menu { 2233 position: absolute; 2234 display: none; 2235 z-index: 100; 2236} 2237 2238#fan_chart ul { 2239 list-style-type: none; 2240 margin: 0; 2241} 2242 2243/* Lifespans chart */ 2244.wt-lifespans-subtitle { 2245 text-align: center; 2246} 2247 2248.wt-lifespans-scale { 2249 white-space: nowrap; 2250} 2251 2252.wt-lifespans-decade { 2253 width: 70px; 2254 height: 60px; 2255 display: inline-block; 2256 background-image: url(images/lifespan-decade.png); 2257 background-position-y: bottom; 2258 background-repeat: no-repeat; 2259 background-size: 70px 37px; 2260} 2261 2262.wt-lifespans-individuals { 2263 background: #fafafa; 2264} 2265 2266.wt-lifespans-individual { 2267 2268} 2269 2270.wt-lifespans-summary { 2271 background: #ffffff; 2272 border: thin solid #000; 2273 z-index: 1; 2274} 2275 2276.wt-lifespans-summary-link { 2277 font-weight: bold; 2278} 2279 2280/*-- Pedigree ---- */ 2281#pedigree_chart { 2282 position: relative; 2283 margin: 20px auto; 2284} 2285 2286#pedigree_canvas { 2287 color: #81a9cb; 2288 z-index: -1000; 2289} 2290 2291#pedigree-page .shadow { 2292 position: absolute; 2293 white-space: nowrap; 2294} 2295 2296#pedigree-page .layout0 .shadow > div, 2297#pedigree-page .layout1 .shadow > div { 2298 display: inline-block; 2299 vertical-align: middle; 2300} 2301 2302#pedigree-page .spacer { 2303 background-image: url(images/spacer.png); 2304 height: 20px; 2305 width: 1px; 2306} 2307 2308#childarrow, 2309.ancestorarrow { 2310 text-align: center; 2311} 2312 2313#pedigree-page #childarrow { 2314 position: relative; 2315} 2316 2317#pedigree-page #childbox { 2318 border: 1px solid; 2319 background-color: #fff; 2320} 2321 2322#pedigree-page table.list_table { 2323 margin: 0 auto; 2324 width: 500px; 2325} 2326 2327.pedigree_chart_table { 2328 border: 0; 2329 border-collapse: collapse; 2330 padding: 0; 2331 width: 100%; 2332} 2333 2334/*-- timeline --*/ 2335#timeline_chart { 2336 position: relative; 2337 top: 0; 2338 left: 0; 2339} 2340 2341#field_table { 2342 width: 30%; 2343 min-width: 500px; 2344} 2345 2346/* 2347 * Any element that is loaded dynamically has the class wt-ajax-load. 2348 * We can provide a "loading" placeholder for empty elements with this class. 2349 */ 2350.wt-ajax-load:empty { 2351 height: 32px; 2352 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 2353} 2354 2355/* 2356 * Default icons are provided by FontAwesome. 2357 * Some icons get mirrored on RTL pages. Typiclly arrows 2358 */ 2359[dir=rtl] .wt-flip-rtl { 2360 transform: scale(-1, 1); 2361} 2362 2363.wt-icon-anniversary { 2364 content: url(images/anniversary.png); 2365} 2366 2367.wt-icon-arrow-down { 2368 content: url(webtrees/icons/arrow-down.png); 2369} 2370 2371a > .wt-icon-arrow-down:hover { 2372 content: url(webtrees/icons/arrow-down-hover.png); 2373} 2374 2375.wt-icon-arrow-left { 2376 content: url(webtrees/icons/arrow-left.png); 2377} 2378 2379a > .wt-icon-arrow-left:hover { 2380 content: url(webtrees/icons/arrow-left-hover.png); 2381} 2382 2383.wt-icon-arrow-right { 2384 content: url(webtrees/icons/arrow-right.png); 2385} 2386 2387a > .wt-icon-arrow-right:hover { 2388 content: url(webtrees/icons/arrow-right-hover.png); 2389} 2390 2391.wt-icon-arrow-up { 2392 content: url(webtrees/icons/arrow-up.png); 2393} 2394 2395a > .wt-icon-arrow-up:hover { 2396 content: url(webtrees/icons/arrow-up-hover.png); 2397} 2398 2399.wt-icon-coordinates { 2400 content: url(images/coordinates.png) 2401} 2402 2403.wt-icon-reorder { 2404 content: url(images/reorder.png); 2405} 2406 2407.wt-icon-sex-f { 2408 content: url(images/sex-female.png); 2409} 2410 2411.wt-icon-sex-m { 2412 content: url(images/sex-male.png); 2413} 2414 2415.wt-icon-sex-u { 2416 content: url(images/sex-unknown.png); 2417} 2418 2419.wt-icon-sex-x { 2420 content: url(images/sex-unknown.png); 2421} 2422 2423.wt-icon-warning { 2424 content: url(images/warning.png); 2425} 2426 2427.wt-icon-zoom-in { 2428 content: url(webtrees/images/zoomin.png); 2429} 2430 2431.wt-icon-zoom-out { 2432 content: url(webtrees/images/zoomout.png); 2433} 2434 2435/* 2436 * .wt-icon-bing-maps 2437 * .wt-icon-calendar 2438 * .wt-icon-copy 2439 * .wt-icon-delete 2440 * .wt-icon-edit 2441 * .wt-icon-email 2442 * .wt-icon-family 2443 * .wt-icon-help 2444 * .wt-icon-individual 2445 * .wt-icon-google-maps 2446 * .wt-icon-keyboard 2447 * .wt-icon-media 2448 * .wt-icon-note 2449 * .wt-icon-openstreetmap 2450 * .wt-icon-preferences 2451 * .wt-icon-repository 2452 * .wt-icon-source 2453 * .wt-icon-submitter 2454 */ 2455.wt-icon-bing-maps::before { 2456 width: 16px; 2457 height: 16px; 2458 content: url(webtrees/icons/bing-maps.png); 2459} 2460 2461.wt-icon-calendar::before { 2462 width: 19px; 2463 height: 15px; 2464 content: url(webtrees/icons/calendar.png) 2465} 2466 2467.wt-icon-copy::before { 2468 width: 16px; 2469 height: 16px; 2470 content: url(webtrees/icons/copy.png) 2471} 2472 2473.wt-icon-delete::before { 2474 width: 16px; 2475 height: 16px; 2476 content: url(webtrees/icons/delete.png); 2477} 2478 2479.wt-icon-edit::before { 2480 width: 16px; 2481 height: 16px; 2482 content: url(webtrees/icons/edit.png); 2483} 2484 2485.wt-icon-family::before { 2486 width: 14px; 2487 height: 15px; 2488 content: url(webtrees/icons/family.png); 2489} 2490 2491.wt-icon-help::before { 2492 width: 16px; 2493 height: 16px; 2494 content: url(webtrees/icons/help.png); 2495} 2496 2497.wt-icon-google-maps::before { 2498 width: 16px; 2499 height: 16px; 2500 content: url(webtrees/icons/google-maps.png); 2501} 2502 2503.wt-icon-individual::before { 2504 width: 11px; 2505 height: 15px; 2506 content: url(webtrees/icons/individual.png); 2507} 2508 2509.wt-icon-keyboard::before { 2510 width: 30px; 2511 height: 15px; 2512 content: url(webtrees/icons/keyboard.png); 2513} 2514 2515.wt-icon-media::before { 2516 width: 18px; 2517 height: 16px; 2518 content: url(webtrees/icons/media.png); 2519} 2520 2521.wt-icon-note::before { 2522 width: 20px; 2523 height: 20px; 2524 content: url(webtrees/icons/note.png); 2525} 2526 2527.wt-icon-openstreetmap::before { 2528 width: 16px; 2529 height: 16px; 2530 content: url(webtrees/icons/openstreetmap.png); 2531} 2532 2533.wt-icon-preferences::before { 2534 width: 25px; 2535 height: 25px; 2536 content: url(webtrees/icons/preferences.png); 2537} 2538 2539.wt-icon-repository::before { 2540 width: 15px; 2541 height: 15px; 2542 content: url(webtrees/icons/repository.png); 2543} 2544 2545.wt-icon-source::before { 2546 width: 18px; 2547 height: 16px; 2548 content: url(webtrees/icons/source.png); 2549} 2550 2551.wt-icon-submitter::before { 2552 width: 11px; 2553 height: 15px; 2554 content: url(webtrees/icons/individual.png); 2555} 2556 2557[class^="icon-"], 2558[class*=" icon-"] { 2559 display: inline-block; 2560 vertical-align: text-bottom; 2561 background-repeat: no-repeat; 2562 background-size: cover; 2563} 2564 2565.icon-add { 2566 width: 14px; 2567 height: 15px; 2568 background-image: url(images/add.png); 2569} 2570 2571.icon-cfamily { 2572 width: 20px; 2573 height: 20px; 2574 background-image: url(webtrees/images/family.png); 2575} 2576 2577.icon-childless { 2578 width: 25px; 2579 height: 25px; 2580 background-image: url(webtrees/images/childless.png); 2581} 2582 2583.icon-children { 2584 width: 16px; 2585 height: 16px; 2586 background-image: url(webtrees/images/children.png); 2587} 2588 2589.icon-clippings { 2590 width: 22px; 2591 height: 22px; 2592 background-image: url(webtrees/images/clippings.png); 2593} 2594 2595.icon-edit_indi { 2596 width: 20px; 2597 height: 20px; 2598 background-image: url(webtrees/images/edit_indi.png); 2599} 2600 2601.icon-fam-list { 2602 width: 20px; 2603 height: 20px; 2604 background-image: url(webtrees/images/family.png); 2605} 2606 2607.icon-indi-list { 2608 width: 20px; 2609 height: 20px; 2610 background-image: url(webtrees/images/indis.png); 2611} 2612 2613.icon-loading-small { 2614 width: 16px; 2615 height: 16px; 2616 background-image: url(webtrees/images/indicator.gif); 2617} 2618 2619.icon-media { 2620 width: 20px; 2621 height: 20px; 2622 background-image: url(webtrees/images/media.png); 2623} 2624 2625.icon-media-list { 2626 width: 20px; 2627 height: 20px; 2628 background-image: url(webtrees/images/media.png); 2629} 2630 2631.icon-media-next { 2632 width: 20px; 2633 height: 20px; 2634 background-image: url(webtrees/images/rdarrow.png); 2635} 2636 2637.icon-media-play { 2638 width: 20px; 2639 height: 20px; 2640 background-image: url(webtrees/images/rarrow.png); 2641} 2642 2643.icon-media-stop { 2644 width: 20px; 2645 height: 20px; 2646 background-image: url(webtrees/images/stop.png); 2647} 2648 2649.icon-minus { 2650 width: 11px; 2651 height: 11px; 2652 background-image: url(webtrees/images/minus.png); 2653} 2654 2655.icon-mypage { 2656 width: 24px; 2657 height: 24px; 2658 background-image: url(webtrees/images/mypage.png); 2659} 2660 2661.icon-note { 2662 width: 20px; 2663 height: 20px; 2664 background-image: url(webtrees/icons/note.png); 2665} 2666 2667.icon-plus { 2668 width: 11px; 2669 height: 11px; 2670 background-image: url(webtrees/images/plus.png); 2671} 2672 2673.icon-remove { 2674 width: 20px; 2675 height: 20px; 2676 background-image: url(webtrees/images/remove.png); 2677} 2678 2679.icon-resn-confidential { 2680 width: 16px; 2681 height: 16px; 2682 background-image: url(webtrees/images/resn_confidential.png); 2683} 2684 2685.icon-resn-locked { 2686 width: 16px; 2687 height: 16px; 2688 background-image: url(webtrees/images/resn_locked.png); 2689} 2690 2691.icon-resn-none { 2692 width: 16px; 2693 height: 16px; 2694 background-image: url(webtrees/images/resn_none.png); 2695} 2696 2697.icon-resn-privacy { 2698 width: 16px; 2699 height: 16px; 2700 background-image: url(webtrees/images/resn_privacy.png); 2701} 2702 2703.icon-rings { 2704 width: 9px; 2705 height: 9px; 2706 background-image: url(webtrees/images/rings.png); 2707} 2708 2709.icon-selected { 2710 width: 12px; 2711 height: 12px; 2712 background-image: url(webtrees/images/selected.png); 2713} 2714 2715.icon-source { 2716 width: 20px; 2717 height: 20px; 2718 background-image: url(webtrees/images/source.png); 2719} 2720 2721/* Silhouettes on charts */ 2722.icon-silhouette-F { 2723 width: 37px; 2724 height: 50px; 2725 background-image: url(webtrees/images/silhouette_female_small.png); 2726} 2727 2728.icon-silhouette-M { 2729 width: 37px; 2730 height: 50px; 2731 background-image: url(webtrees/images/silhouette_male_small.png); 2732} 2733 2734.icon-silhouette-U { 2735 width: 37px; 2736 height: 50px; 2737 background-image: url(webtrees/images/silhouette_unknown_small.png); 2738} 2739 2740.icon-indis { 2741 width: 20px; 2742 height: 20px; 2743 background-image: url(webtrees/images/indis.png); 2744} 2745 2746.icon-patriarch { 2747 width: 20px; 2748 height: 20px; 2749 background-image: url(webtrees/images/patriarch.png); 2750} 2751 2752.icon-pedigree { 2753 width: 20px; 2754 height: 20px; 2755 background-image: url(webtrees/images/pedigree.png); 2756} 2757 2758.icon-place { 2759 width: 20px; 2760 height: 20px; 2761 background-image: url(webtrees/images/place.png); 2762} 2763 2764.icon-repo-list { 2765 width: 20px; 2766 height: 20px; 2767 background-image: url(webtrees/images/repository.png); 2768} 2769 2770.icon-repository { 2771 width: 20px; 2772 height: 20px; 2773 background-image: url(webtrees/images/repository.png); 2774} 2775 2776.icon-search { 2777 width: 17px; 2778 height: 17px; 2779 background-image: url(webtrees/images/search.png); 2780} 2781 2782.icon-sfamily { 2783 width: 20px; 2784 height: 20px; 2785 background-image: url(webtrees/images/family.png); 2786} 2787 2788.icon-source-list { 2789 width: 20px; 2790 height: 20px; 2791 background-image: url(webtrees/images/source.png); 2792} 2793 2794.icon-user_add { 2795 width: 20px; 2796 height: 20px; 2797 background-image: url(webtrees/images/user_add.png); 2798} 2799 2800/* Census assistant */ 2801.wt-census-assistant-form-control:focus { 2802 min-width: 12rem; 2803} 2804 2805/* 2806 * Drag and drop sortable lists 2807 */ 2808.wt-sortable-list { 2809} 2810 2811.wt-sortable-item { 2812 cursor: move; 2813} 2814 2815/* Some blocks show a reduced version on the right-hand side. */ 2816.wt-side-blocks .wt-side-block-optional { 2817 display: none !important; 2818} 2819 2820/* my page chart enhancements */ 2821.wt-block-content-charts { 2822 flex-flow: column-reverse; 2823 overflow: auto; 2824} 2825 2826.wt-block-content-todays-events-block { 2827 padding: .25rem; 2828} 2829 2830/* Some charts are wider than the page. */ 2831.wt-chart { 2832 overflow-x: auto; 2833 overflow-y: hidden; 2834} 2835 2836/* Fit thumbnail into parent on charts */ 2837.select2-selection.select2-selection--single { 2838 min-height: 36px; 2839 height: auto; 2840 padding: 2px 0; 2841} 2842 2843.select2-container .select2-selection--single .select2-selection__rendered { 2844 padding-left: 2px; 2845} 2846 2847.select2-selection--single .NAME { 2848 padding-left: 4px; 2849} 2850 2851/* 2852 * These selectors control how the short horizontal lines are positioned in the Charts 2853 * Optimized for Win10 and FF, Chrome and Edge browsers 2854 * Ancestors 2855 * Descendants 2856 * amily book 2857 * Hourglass chart 2858 * 2859 */ 2860 2861/* Ascentors */ 2862.wt-chart-ancestors .linea1 { 2863 margin-bottom: 4px; 2864} 2865 2866.wt-chart-ancestors .linea2 { 2867 margin-bottom: 7px; 2868} 2869 2870.wt-chart-ancestors .linea3 { 2871 margin-bottom: 4px; 2872} 2873 2874.wt-chart-ancestors .linea4 { 2875 margin-bottom: 7px; 2876} 2877 2878.wt-chart-ancestors .linea5 { 2879 vertical-align: top; 2880} 2881 2882/* Descendants */ 2883.wt-chart-descendants .lined1 { 2884 margin-bottom: 4px; 2885} 2886 2887.wt-chart-descendants .lined2 { 2888 margin-bottom: 7px; 2889} 2890 2891.wt-chart-descendants .lined3 { 2892 margin-bottom: 4px; 2893} 2894 2895.wt-chart-descendants .lined4 { 2896 margin-bottom: 7px; 2897} 2898 2899.wt-chart-descendants .linea5 { 2900 vertical-align: top; 2901} 2902 2903/* Family book */ 2904.linef1 { 2905 margin-bottom: 3px; 2906} 2907 2908.linef2 { 2909 margin-bottom: 3px; 2910} 2911 2912.linef3 { 2913 margin-bottom: 7px; 2914} 2915 2916/* Hourglass */ 2917.lineh1 { 2918 margin-bottom: 4px; 2919} 2920 2921.lineh2 { 2922 margin-bottom: 4px; 2923} 2924 2925.lineh3 { 2926 margin-bottom: 7px; 2927} 2928 2929/* 2930 * Pedigree chart 2931 * 2932 * wt-chart, wt-chart-pedigree 2933 */ 2934 2935#pedigree_chart { 2936 position: relative; 2937 margin: 20px auto; 2938} 2939 2940#pedigree_canvas { 2941 z-index: -1000; 2942} 2943 2944#childbox-pedigree { 2945 border: 1px solid; 2946 background-color: #fff; 2947} 2948 2949#pedigree-page #childbox-pedigree { 2950 border: 1px solid; 2951 background-color: #fff; 2952} 2953 2954#childbox-pedigree { 2955 padding: 5px; 2956 position: absolute; 2957 display: none; 2958 text-align: start; 2959 white-space: nowrap; 2960 left: auto; 2961 z-index: 9999; 2962} 2963 2964.wt-chart-pedigree, .wt-chart-hourglass { 2965 overflow-y: auto; 2966} 2967 2968.wt-chart-pedigree .spacer { 2969 background-image: url(images/spacer.png); 2970 height: 20px; 2971 width: 1px; 2972} 2973 2974#pedigree-page .shadow { 2975 box-shadow: 0 0 0 !important; /* override vendor css shadow */ 2976} 2977 2978#childarrow, 2979.ancestorarrow { 2980 text-align: center; 2981 display: inline-block; 2982 vertical-align: middle; 2983} 2984 2985.layout3 #childbox-pedigree { 2986 top: auto; 2987} 2988 2989#childbox-pedigree a.name1 { 2990 display: block; 2991 margin-left: 5px; 2992} 2993 2994/* 2995 * Place hierarchy 2996 * 2997 * wt-place-hierarchy-page 2998 */ 2999 3000#place-hierarchy ul { 3001 list-style-type: none; 3002} 3003 3004.d-table-cell { 3005 padding-right: 5px; 3006} 3007 3008/* 3009 * Search 3010 * 3011 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page 3012 */ 3013 3014/* Some menus (e.g. languages) can be longer than a page */ 3015.dropdown-menu { 3016 max-height: 30rem; 3017 overflow-x: hidden; 3018} 3019 3020/* Clipping cart */ 3021.clipping-cart h2 { 3022 margin: 20px; 3023 text-align: center; 3024} 3025 3026.clipping-cart .wt-page-options { 3027 max-width: 25rem; 3028} 3029 3030.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar { 3031 font-size: 1rem; 3032} 3033 3034.clipping-cart .add-to { 3035 text-align: left; 3036} 3037 3038/* Forms */ 3039.col-form-label { 3040 font-weight: bold; 3041} 3042 3043/* Popups */ 3044.popup .nav-link { 3045 display: inline; 3046 vertical-align: top; 3047 padding: 5px; 3048} 3049 3050
