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