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