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