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