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