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