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