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