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