xref: /webtrees/resources/css/clouds.css (revision 89d880da80f202b08b9fe837f38a87b48c6d2a97)
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	background: #fff;
2205	position: absolute;
2206	display: none;
2207	z-index: 100;
2208}
2209
2210#fan_chart ul {
2211	list-style-type: none;
2212	margin: 0;
2213}
2214
2215/* Lifespans chart */
2216.wt-lifespans-subtitle {
2217	text-align: center;
2218}
2219
2220.wt-lifespans-scale {
2221	white-space: nowrap;
2222}
2223
2224.wt-lifespans-decade {
2225	width: 70px;
2226	height: 60px;
2227	display: inline-block;
2228	background-image: url(images/lifespan-decade.png);
2229	background-position-y: bottom;
2230	background-repeat: no-repeat;
2231	background-size: 70px 37px;
2232}
2233
2234.wt-lifespans-individuals {
2235	background: #fafafa;
2236}
2237
2238.wt-lifespans-individual {
2239
2240}
2241
2242.wt-lifespans-summary {
2243	background: #ffffff;
2244	border: thin solid #000;
2245	z-index: 1;
2246}
2247
2248.wt-lifespans-summary-link {
2249	font-weight: bold;
2250}
2251
2252/*-- Pedigree ---- */
2253#pedigree_chart {
2254	position: relative;
2255	margin: 20px auto;
2256}
2257
2258#pedigree_canvas {
2259	color:   #81a9cb;
2260	z-index: -1000;
2261}
2262
2263#pedigree-page .shadow {
2264	position: absolute;
2265	white-space: nowrap;
2266}
2267
2268#pedigree-page .layout0 .shadow > div,
2269#pedigree-page .layout1 .shadow > div {
2270	display: inline-block;
2271	vertical-align: middle;
2272}
2273
2274#pedigree-page .spacer {
2275	background-image: url(images/spacer.png);
2276	height: 20px;
2277	width: 1px;
2278}
2279
2280#childarrow,
2281.ancestorarrow {
2282	text-align: center;
2283}
2284
2285#pedigree-page #childarrow {
2286	position: relative;
2287}
2288
2289#pedigree-page #childbox {
2290	border: 1px solid;
2291	background-color: #fff;
2292}
2293
2294#pedigree-page table.list_table {
2295	margin: 0 auto;
2296	width: 500px;
2297}
2298
2299.pedigree_chart_table {
2300	border: 0;
2301	border-collapse: collapse;
2302	padding: 0;
2303	width: 100%;
2304}
2305
2306/*-- timeline  --*/
2307#timeline_chart {
2308	position: relative;
2309	top: 0;
2310	left: 0;
2311}
2312
2313#field_table {
2314	width: 30%;
2315	min-width: 500px;
2316}
2317
2318[class^="icon-"],
2319[class*=" icon-"] {
2320	display: inline-block;
2321	vertical-align: middle;
2322	background-repeat: no-repeat;
2323	background-size: cover;
2324}
2325
2326.icon-add {
2327	width: 14px;
2328	height: 15px;
2329	background-image: url(images/add.png);
2330}
2331
2332.icon-cfamily {
2333	width: 22px;
2334	height: 22px;
2335	background-image: url(clouds/images/cfamily.png);
2336}
2337
2338.icon-childless {
2339	width: 25px;
2340	height: 25px;
2341	background-image: url(clouds/images/childless.png);
2342}
2343
2344.icon-children {
2345	width: 16px;
2346	height: 16px;
2347	background-image: url(clouds/images/children.png);
2348}
2349
2350.icon-clippings {
2351	width: 22px;
2352	height: 22px;
2353	background-image: url(clouds/images/clippings.png);
2354}
2355
2356.icon-edit_indi {
2357	width: 22px;
2358	height: 22px;
2359	background-image: url(clouds/images/edit_indi.png);
2360}
2361
2362.icon-fam-list {
2363	width: 22px;
2364	height: 22px;
2365	background-image: url(clouds/images/sfamily.png);
2366}
2367
2368.icon-indi-list {
2369	width: 22px;
2370	height: 22px;
2371	background-image: url(clouds/images/indis.png);
2372}
2373
2374.icon-loading-small {
2375	width: 16px;
2376	height: 16px;
2377	background-image: url(clouds/images/indicator.gif);
2378}
2379
2380.icon-media {
2381	width: 32px;
2382	height: 32px;
2383	background-image: url(clouds/images/media.png);
2384}
2385
2386.icon-media-list {
2387	width: 32px;
2388	height: 32px;
2389	background-image: url(clouds/images/media.png);
2390}
2391
2392.icon-media-next {
2393	width: 20px;
2394	height: 20px;
2395	background-image: url(clouds/images/rdarrow.png);
2396}
2397
2398.icon-media-play {
2399	width: 20px;
2400	height: 20px;
2401	background-image: url(clouds/images/rarrow.png);
2402}
2403
2404.icon-media-stop {
2405	width: 20px;
2406	height: 20px;
2407	background-image: url(clouds/images/stop.png);
2408}
2409
2410.icon-minus {
2411	width: 11px;
2412	height: 11px;
2413	background-image: url(clouds/images/minus.png);
2414}
2415
2416.icon-mypage {
2417	width: 22px;
2418	height: 22px;
2419	background-image: url(clouds/images/mypage.png);
2420}
2421
2422.icon-note {
2423	width: 22px;
2424	height: 22px;
2425	background-image: url(clouds/icons/note.png);
2426}
2427
2428.icon-plus {
2429	width: 11px;
2430	height: 11px;
2431	background-image: url(clouds/images/plus.png);
2432}
2433
2434.icon-remove {
2435	width: 16px;
2436	height: 16px;
2437	background-image: url(clouds/images/delete.png);
2438}
2439
2440.icon-resn-confidential {
2441	width: 16px;
2442	height: 16px;
2443	background-image: url(clouds/images/resn_confidential.png);
2444}
2445
2446.icon-resn-locked {
2447	width: 16px;
2448	height: 16px;
2449	background-image: url(clouds/images/resn_locked.png);
2450}
2451
2452.icon-resn-none {
2453	width: 16px;
2454	height: 16px;
2455	background-image: url(clouds/images/resn_none.png);
2456}
2457
2458.icon-resn-privacy {
2459	width: 16px;
2460	height: 16px;
2461	background-image: url(clouds/images/resn_privacy.png);
2462}
2463
2464.icon-rings {
2465	width: 9px;
2466	height: 9px;
2467	background-image: url(clouds/images/rings.png);
2468}
2469
2470.icon-selected {
2471	width: 12px;
2472	height: 12px;
2473	background-image: url(clouds/images/selected.png);
2474}
2475
2476.icon-source {
2477	width: 25px;
2478	height: 25px;
2479	background-image: url(clouds/images/source.png);
2480}
2481
2482/* Silhouettes on charts */
2483.icon-silhouette-F {
2484	width: 37px;
2485	height: 45px;
2486	background-image: url(clouds/images/silhouette_female_small.png);
2487}
2488
2489.icon-silhouette-M {
2490	width: 37px;
2491	height: 45px;
2492	background-image: url(clouds/images/silhouette_male_small.png);
2493}
2494
2495.icon-silhouette-U {
2496	width: 37px;
2497	height: 45px;
2498	background-image: url(clouds/images/silhouette_unknown_small.png);
2499}
2500
2501/* Tbl hdrs and Light Text */
2502.descriptionbox,
2503.topbottombar,
2504.topbottombar a,
2505.list_label,
2506.list_label a {
2507	background-color: #95b8e0;
2508	color: #039;
2509}
2510
2511/* Base Color */
2512.descriptionbox .submenu a,
2513.blockcontent,
2514.list_value,
2515.list_value_wrap,
2516.news_box,
2517.submenuitem_hover {
2518	background: inherit;
2519}
2520
2521#topMenu {
2522	background: #acf;
2523	clear: both;
2524	height: 31px;
2525	width: 100%;
2526}
2527
2528#topMenu ul {
2529	margin: 0;
2530	padding: 0;
2531}
2532
2533/* Set stack level for top two header menu rows */
2534.hsearch {
2535    display: block;
2536    float: right;
2537    padding-right: 10px;
2538    padding-top: 5px;
2539}
2540
2541.search-icon {
2542	height: 17px;
2543	vertical-align: top;
2544}
2545
2546.logo {
2547	text-align: center;
2548}
2549
2550footer .error {
2551	color: #d00;
2552	font-weight: bold;
2553}
2554
2555.user_links {
2556	white-space: nowrap;
2557}
2558
2559/*
2560 * Any element that is loaded dynamically has the class wt-ajax-load.
2561 * We can provide a "loading" placeholder for empty elements with this class.
2562 */
2563.wt-ajax-load:empty {
2564	height: 32px;
2565	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
2566}
2567
2568/*
2569 * Default icons are provided by FontAwesome.
2570 * Some icons get mirrored on RTL pages.  Typiclly arrows
2571 */
2572[dir=rtl] .wt-flip-rtl {
2573	transform: scale(-1, 1);
2574}
2575
2576.wt-icon-anniversary {
2577	content: url(images/anniversary.png);
2578}
2579
2580.wt-icon-arrow-down {
2581	content: url(clouds/icons/arrow-down.png);
2582}
2583
2584a > .wt-icon-arrow-down:hover {
2585	content: url(clouds/icons/arrow-down-hover.png);
2586}
2587
2588.wt-icon-arrow-left {
2589	content: url(clouds/icons/arrow-left.png);
2590}
2591
2592a > .wt-icon-arrow-left:hover {
2593	content: url(clouds/icons/arrow-left-hover.png);
2594}
2595
2596.wt-icon-arrow-right {
2597	content: url(clouds/icons/arrow-right.png);
2598}
2599
2600a > .wt-icon-arrow-right:hover {
2601	content: url(clouds/icons/arrow-right-hover.png);
2602}
2603
2604.wt-icon-arrow-up {
2605	content: url(clouds/icons/arrow-up.png);
2606}
2607
2608a > .wt-icon-arrow-up:hover {
2609	content: url(clouds/icons/arrow-up-hover.png);
2610}
2611
2612.wt-icon-coordinates {
2613	content: url(images/coordinates.png)
2614}
2615
2616.wt-icon-reorder {
2617	content: url(images/reorder.png);
2618}
2619
2620.wt-icon-sex-f {
2621	content: url(images/sex-female.png);
2622}
2623
2624.wt-icon-sex-m {
2625	content: url(images/sex-male.png);
2626}
2627
2628.wt-icon-sex-u {
2629	content: url(images/sex-unknown.png);
2630}
2631
2632.wt-icon-sex-x {
2633	content: url(images/sex-unknown.png);
2634}
2635
2636.wt-icon-warning {
2637	content: url(images/warning.png);
2638}
2639
2640.wt-icon-zoom-in {
2641	content: url(clouds/images/zoomin.png);
2642}
2643
2644.wt-icon-zoom-out {
2645	content: url(clouds/images/zoomout.png);
2646}
2647
2648/*
2649 * .wt-icon-bing-maps
2650 * .wt-icon-calendar
2651 * .wt-icon-copy
2652 * .wt-icon-delete
2653 * .wt-icon-edit
2654 * .wt-icon-email
2655 * .wt-icon-family
2656 * .wt-icon-help
2657 * .wt-icon-individual
2658 * .wt-icon-google-maps
2659 * .wt-icon-keyboard
2660 * .wt-icon-media
2661 * .wt-icon-note
2662 * .wt-icon-openstreetmap
2663 * .wt-icon-preferences
2664 * .wt-icon-repository
2665 * .wt-icon-source
2666 * .wt-icon-submitter
2667 */
2668.wt-icon-bing-maps::before {
2669	width: 16px;
2670	height: 16px;
2671	content: url(clouds/icons/bing-maps.png);
2672}
2673
2674.wt-icon-calendar::before {
2675	width: 19px;
2676	height: 15px;
2677	content: url(clouds/icons/calendar.png)
2678}
2679
2680.wt-icon-copy::before {
2681	width: 16px;
2682	height: 16px;
2683	content: url(clouds/icons/copy.png)
2684}
2685
2686.wt-icon-delete::before {
2687	width: 16px;
2688	height: 16px;
2689	content: url(clouds/icons/delete.png);
2690}
2691
2692.wt-icon-edit::before {
2693	width: 16px;
2694	height: 16px;
2695	content: url(clouds/icons/edit.png);
2696}
2697
2698.wt-icon-family::before {
2699	width: 14px;
2700	height: 15px;
2701	content: url(clouds/icons/family.png);
2702}
2703
2704.wt-icon-help::before {
2705	width: 16px;
2706	height: 16px;
2707	content: url(clouds/icons/help.png);
2708}
2709
2710.wt-icon-google-maps::before {
2711	width: 16px;
2712	height: 16px;
2713	content: url(clouds/icons/google-maps.png);
2714}
2715
2716.wt-icon-individual::before {
2717	width: 11px;
2718	height: 15px;
2719	content: url(clouds/icons/individual.png);
2720}
2721
2722.wt-icon-keyboard::before {
2723	width: 30px;
2724	height: 15px;
2725	content: url(clouds/icons/keyboard.png);
2726}
2727
2728.wt-icon-media::before {
2729	width: 18px;
2730	height: 16px;
2731	content: url(clouds/icons/media.png);
2732}
2733
2734.wt-icon-note::before {
2735	width: 20px;
2736	height: 20px;
2737	content: url(clouds/icons/note.png);
2738}
2739
2740.wt-icon-openstreetmap::before {
2741	width: 16px;
2742	height: 16px;
2743	content: url(clouds/icons/openstreetmap.png);
2744}
2745
2746.wt-icon-preferences::before {
2747	width: 25px;
2748	height: 25px;
2749	content: url(clouds/icons/preferences.png);
2750}
2751
2752.wt-icon-repository::before {
2753	width: 15px;
2754	height: 15px;
2755	content: url(clouds/icons/repository.png);
2756}
2757
2758.wt-icon-source::before {
2759	width: 18px;
2760	height: 16px;
2761	content: url(clouds/icons/source.png);
2762}
2763
2764.wt-icon-submitter::before {
2765	width: 11px;
2766	height: 15px;
2767	content: url(clouds/icons/individual.png);
2768}
2769
2770.icon-indis {
2771	width: 22px;
2772	height: 22px;
2773	background-image: url(clouds/images/indis.png);
2774}
2775
2776.icon-patriarch {
2777	width: 25px;
2778	height: 25px;
2779	background-image: url(clouds/images/patriarch.png);
2780}
2781
2782.icon-pedigree {
2783	width: 22px;
2784	height: 22px;
2785	background-image: url(clouds/images/pedigree.png);
2786}
2787
2788.icon-place {
2789	width: 22px;
2790	height: 22px;
2791	background-image: url(clouds/images/place.png);
2792}
2793
2794.icon-repo-list {
2795	width: 22px;
2796	height: 22px;
2797	background-image: url(clouds/images/repository.png);
2798}
2799
2800.icon-repository {
2801	width: 22px;
2802	height: 22px;
2803	background-image: url(clouds/images/repository.png);
2804}
2805
2806.icon-search {
2807	width: 16px;
2808	height: 16px;
2809	background-image: url(clouds/images/go.png);
2810}
2811
2812.icon-sfamily {
2813	width: 22px;
2814	height: 22px;
2815	background-image: url(clouds/images/sfamily.png);
2816}
2817
2818.icon-source-list {
2819	width: 25px;
2820	height: 25px;
2821	background-image: url(clouds/images/source.png);
2822}
2823
2824.icon-user_add {
2825	width: 22px;
2826	height: 22px;
2827	background-image: url(clouds/images/user_add.png);
2828}
2829
2830/* Census assistant */
2831.wt-census-assistant-form-control:focus {
2832	min-width: 12rem;
2833}
2834
2835/*
2836 * Drag and drop sortable lists
2837 */
2838.wt-sortable-list {
2839}
2840
2841.wt-sortable-item {
2842	cursor: move;
2843}
2844
2845/* Some blocks show a reduced version on the right-hand side. */
2846.wt-side-blocks .wt-side-block-optional {
2847	display: none !important;
2848}
2849
2850/* my page chart enhancements */
2851.wt-block-content-charts {
2852	flex-flow: column-reverse;
2853	overflow: auto;
2854}
2855
2856.wt-block-content-todays-events-block {
2857	padding: .25rem;
2858}
2859
2860/* Some charts are wider than the page. */
2861.wt-chart {
2862	overflow-x: auto;
2863	overflow-y: hidden;
2864}
2865
2866/* Fit thumbnail into parent on charts */
2867.select2-selection.select2-selection--single {
2868	min-height: 36px;
2869	height: auto;
2870	padding: 2px 0;
2871}
2872
2873.select2-container .select2-selection--single .select2-selection__rendered {
2874	padding-left: 2px;
2875}
2876
2877.select2-selection--single .NAME {
2878	padding-left: 4px;
2879}
2880
2881/*
2882 *  These selectors control how the short horizontal lines are positioned in the Charts
2883 *  Optimized for Win10 and FF, Chrome and Edge browsers
2884 *  	Ancestors
2885 *  	Descendants
2886 *  	amily book
2887 *  	Hourglass chart
2888 *
2889 */
2890
2891/* Ascentors */
2892.wt-chart-ancestors .linea1 {
2893	margin-bottom: 4px;
2894}
2895
2896.wt-chart-ancestors .linea2 {
2897	margin-bottom: 7px;
2898}
2899
2900.wt-chart-ancestors .linea3 {
2901	margin-bottom: 4px;
2902}
2903
2904.wt-chart-ancestors .linea4 {
2905	margin-bottom: 7px;
2906}
2907
2908.wt-chart-ancestors .linea5 {
2909	vertical-align: top;
2910}
2911
2912/* Descendants */
2913.wt-chart-descendants .lined1 {
2914	margin-bottom: 4px;
2915}
2916
2917.wt-chart-descendants .lined2 {
2918	margin-bottom: 7px;
2919}
2920
2921.wt-chart-descendants .lined3 {
2922	margin-bottom: 4px;
2923}
2924
2925.wt-chart-descendants .lined4 {
2926	margin-bottom: 7px;
2927}
2928
2929.wt-chart-descendants .linea5 {
2930	vertical-align: top;
2931}
2932
2933/* Family book */
2934.linef1 {
2935	margin-bottom: 3px;
2936}
2937
2938.linef2 {
2939	margin-bottom: 3px;
2940}
2941
2942.linef3 {
2943	margin-bottom: 7px;
2944}
2945
2946/* Hourglass */
2947.lineh1 {
2948	margin-bottom: 4px;
2949}
2950
2951.lineh2 {
2952	margin-bottom: 4px;
2953}
2954
2955.lineh3 {
2956	margin-bottom: 7px;
2957}
2958
2959/*
2960 * Pedigree chart
2961 *
2962 * wt-chart, wt-chart-pedigree
2963 */
2964
2965#pedigree_chart {
2966	position: relative;
2967	margin: 20px auto;
2968}
2969
2970#pedigree_canvas {
2971	z-index: -1000;
2972}
2973
2974#childbox-pedigree {
2975	border: 1px solid;
2976	background-color: #fff;
2977}
2978
2979#pedigree-page #childbox-pedigree {
2980	border: 1px solid;
2981	background-color: #fff;
2982}
2983
2984#childbox-pedigree {
2985	padding: 5px;
2986	position: absolute;
2987	display: none;
2988	text-align: start;
2989	white-space: nowrap;
2990	left: auto;
2991	z-index: 9999;
2992}
2993
2994.wt-chart-pedigree, .wt-chart-hourglass {
2995	overflow-y: auto;
2996}
2997
2998.wt-chart-pedigree .spacer {
2999	background-image: url(images/spacer.png);
3000	height: 20px;
3001	width: 1px;
3002}
3003
3004#pedigree-page .shadow {
3005	box-shadow: 0 0 0 !important; /* override vendor css shadow  */
3006}
3007
3008#childarrow,
3009.ancestorarrow {
3010	text-align: center;
3011	display: inline-block;
3012	vertical-align: middle;
3013}
3014
3015.layout3 #childbox-pedigree {
3016	top: auto;
3017}
3018
3019#childbox-pedigree a.name1 {
3020	display: block;
3021	margin-left: 5px;
3022}
3023
3024/*
3025 * Place hierarchy
3026 *
3027 * wt-place-hierarchy-page
3028 */
3029
3030#place-hierarchy ul {
3031	list-style-type: none;
3032}
3033
3034.d-table-cell {
3035	padding-right: 5px;
3036}
3037
3038/*
3039 * Search
3040 *
3041 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page
3042 */
3043
3044/* Some menus (e.g. languages) can be longer than a page */
3045.dropdown-menu {
3046	max-height: 30rem;
3047	overflow-x: hidden;
3048}
3049
3050/* Clipping cart */
3051.clipping-cart h2 {
3052	margin: 20px;
3053	text-align: center;
3054}
3055
3056.clipping-cart .wt-page-options {
3057	max-width: 25rem;
3058}
3059
3060.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar {
3061	font-size: 1rem;
3062}
3063
3064.clipping-cart .add-to {
3065	text-align: left;
3066}
3067
3068/* Forms */
3069.col-form-label {
3070	font-weight: bold;
3071}
3072
3073/* Popups */
3074.popup .nav-link {
3075	display: inline;
3076	vertical-align: top;
3077	padding: 5px;
3078}
3079
3080