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