xref: /webtrees/resources/css/clouds.css (revision 9d627a9e6c00d03faa5d6a39e801ab0bb6f45d6d)
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/* ==== Favourites block ===== */
1623.add_fav_head {
1624	font-weight: 900;
1625	margin: 5px 0;
1626}
1627
1628.add_fav_head i {
1629	margin: 0 5px 1px;
1630}
1631
1632.add_fav_ref label {
1633	display: inline-block;
1634	min-width: 100px;
1635}
1636
1637.add_fav_ref input {
1638	margin: 0 5px;
1639}
1640
1641/* === Who is online block === */
1642.logged_in_list {
1643	margin: 5px 0 0;
1644	padding: 0;
1645	line-height: 20px;
1646}
1647
1648/* ==== Theme select block === */
1649.theme_form ul {
1650	margin: -10px auto;
1651}
1652
1653.theme_form li {
1654	visibility: hidden;
1655}
1656
1657.theme_form li ul li {
1658	display: inline-block;
1659	padding: 10px;
1660	visibility: visible;
1661}
1662
1663/* ==== FAQ table styles ===== */
1664table.faq {
1665	background-color: #eee;
1666	margin: 5px 0 50px 5px;
1667	width: 98%;
1668}
1669
1670table.faq tr:nth-child(odd) td {
1671	background-color: #eee;
1672}
1673
1674div.faq_title {
1675	background-color: #eee;
1676	margin: 1em 0;
1677	padding: .25em;
1678	font-weight: bold;
1679	width: 98%;
1680}
1681
1682div.faq_body {
1683	clear: both;
1684	padding: 0 1em;
1685}
1686
1687.faq_top {
1688	float: right;
1689}
1690
1691/* === Positioning edit, copy, delete links === */
1692/* General use */
1693.editfacts {
1694	clear: left;
1695	padding-top: 15px;
1696}
1697
1698/* ======== Indi header ====== */
1699#indi_header {
1700	overflow: hidden;
1701	margin: 0 0 5px;
1702}
1703
1704#indi_header h3 {
1705	color: #006;
1706	font-size: 90%;
1707	font-weight: bold;
1708	margin: 0;
1709	padding: 0 10px 0 30px;
1710	text-align: left;
1711	overflow: hidden;
1712	position: relative;
1713}
1714
1715#indi_header .name_one {
1716	font-size: 1.5em;
1717}
1718
1719#indi_header h3 .details1 {
1720	font-size: 1.0em;
1721}
1722
1723#indi_header h3 .header_age {
1724	padding: 5px 0 5px 5px;
1725	float: right;
1726	font-weight: normal;
1727	font-size: 65%;
1728}
1729
1730#indi_header h3 a {
1731	display: inline;
1732}
1733
1734#indi_header a {
1735	color: #337;
1736	font-size: 0.75em;
1737	font-weight: normal;
1738}
1739
1740#indi_header a:hover {
1741	color: #f00;
1742}
1743
1744#indi_mainimage {
1745	float: left;
1746}
1747
1748#header_accordion1 {
1749	overflow: hidden;
1750}
1751
1752#header_accordion1 .indi_name_details {
1753	margin: 0;
1754	overflow: hidden;
1755	padding: 5px;
1756}
1757
1758.indi_name_details .name1 {
1759	font-weight: normal;
1760	padding-top: 5px;
1761	font-size: inherit;
1762}
1763
1764#indi_header a.warning {
1765	color: #f00;
1766	font-size: 1em;
1767}
1768
1769#indi_note {
1770	margin: 0 0 5px;
1771}
1772
1773.indi_table {
1774	clear: left;
1775}
1776
1777#sex {
1778	float: right;
1779}
1780
1781#dates {
1782	color: #333;
1783	float: right;
1784}
1785
1786#individual-names .wt-icon-edit,
1787#individual-names .wt-icon-delete {
1788	float: right;
1789}
1790
1791#indi_note .fact_NOTE {
1792	float: left;
1793	margin: 0 5px 0 0;
1794}
1795
1796#indi_note .fact_SOUR {
1797	margin: 3px 0;
1798}
1799
1800#indi_note .fact_SOUR a {
1801	font-size: 100%;
1802}
1803
1804#indi_note .fact_NOTE,
1805#indi_note .fact_SOUR {
1806	clear: both;
1807}
1808
1809/* markdown formatting */
1810
1811.markdown {
1812	/* Tables and pre-formatted text can break the layout. */
1813	overflow-x: auto;
1814}
1815
1816.markdown p {
1817	margin: 0 0 0.5em;
1818	white-space: pre-wrap;
1819}
1820
1821.markdown table {
1822	border-collapse: collapse;
1823	margin-bottom: 5px;
1824}
1825
1826.markdown th {
1827	font-weight: bold;
1828}
1829
1830.markdown td,
1831.markdown th {
1832	border: solid thin #000;
1833	padding: 3px;
1834}
1835
1836.odometer {
1837	font-family: courier, monospace;
1838	font-weight: bold;
1839	background: #000;
1840	color: #fff;
1841}
1842
1843/* ======== Indi tabs ======== */
1844/* Facts & Events tab */
1845#personal_facts_content .fact_NOTE,
1846#personal_facts_content .fact_SOUR,
1847#family-table .fact_NOTE,
1848#family-table .fact_SOUR {
1849	margin: 5px 3px 5px 0;
1850	clear: both;
1851}
1852
1853.media-display-image {
1854	float: left;
1855}
1856
1857.media-display-title {
1858	float: left;
1859	font-style: italic;
1860	margin: 10px;
1861}
1862
1863/* === jQuery.datatable styling general over-rides === */
1864.odd {
1865	background-color: #d9eaf7;
1866}
1867
1868.even {
1869	background-color: #fafafa;
1870}
1871
1872.css_right {
1873	float: left;
1874}
1875
1876.fg-button {
1877	padding: 2px 6px;
1878}
1879
1880.dataTables_paginate {
1881	float: left;
1882	margin-bottom: 3px;
1883}
1884
1885.dataTables_processing {
1886	float: left;
1887}
1888
1889.dataTables_filter {
1890	float: right;
1891	font-weight: normal;
1892}
1893
1894.dataTables_info {
1895	float: left;
1896	font-weight: normal;
1897	padding: 4px;
1898}
1899
1900.recent_changes_block .dataTables_info,
1901.upcoming_events_block .dataTables_info,
1902.todays_events_block .dataTables_info,
1903.todo_block .dataTables_info,
1904.yahrzeit_block .dataTables_info {
1905	padding: 0;
1906}
1907
1908.upcoming_events_block .dataTables_info,
1909.todays_events_block .dataTables_info {
1910	padding: 2px 0 0;
1911}
1912
1913.upcoming_events_block button,
1914.todays_events_block button {
1915	margin: 0 20px;
1916}
1917
1918.dataTables_length {
1919	float: right;
1920	font-weight: normal;
1921}
1922
1923.dataTables_length select,
1924.dataTables_filter input {
1925	font-size: 11px;
1926	padding: 1px;
1927}
1928
1929.dt-clear {
1930	clear: both;
1931}
1932
1933#loading {
1934	text-align: center;
1935}
1936
1937.DataTables_sort_wrapper {
1938	position: relative;
1939	margin: 0 20px;
1940	white-space: normal;
1941}
1942
1943.DataTables_sort_wrapper span {
1944	left: 0;
1945	margin-left: -20px;
1946	margin-top: -8px;
1947	position: absolute;
1948	top: 50%;
1949}
1950
1951.dataTables_wrapper {
1952	margin-bottom: 10px;
1953}
1954
1955/* ======= Sidebar setup ===== */
1956#main {
1957	min-width: 600px;
1958	width: 100%;
1959	display: table;
1960	table-layout: fixed;
1961}
1962
1963#indi_left {
1964	display: table-cell;
1965}
1966
1967#tabs {
1968	background-color: #fff;
1969	width: 100%;
1970	overflow: visible;
1971	padding-top: 0.2em;
1972}
1973
1974/* sidebar */
1975#sidebar {
1976	width: 20%;
1977	display: table-cell;
1978	vertical-align: top;
1979}
1980
1981/* Sidebar - Family navigator */
1982.wt-family-navigator-dropdown-heading {
1983	font-weight: bold;
1984	font-size: inherit;
1985	color: inherit;
1986}
1987
1988/* Sidebar - Descendants */
1989#sb_content_descendancy {
1990	margin-top: 0;
1991}
1992
1993#sb_desc_content {
1994	margin-left: 3px;
1995	font-size: 0.8em;
1996}
1997
1998#sb_desc_content ul {
1999	padding: 0;
2000	margin: 0;
2001}
2002
2003.sb_desc_indi_li {
2004	list-style-type: none;
2005	margin-left: 5px;
2006}
2007
2008.desc_tree_div {
2009	display: none;
2010}
2011
2012.desc_tree_div ul {
2013	padding: 0;
2014	margin-left: 10px;
2015	margin-top: 0;
2016	margin-right: 0;
2017}
2018
2019/* Individuals and Families */
2020#sidebar-content-individuals,
2021#sidebar-content-families {
2022	margin-top: 0;
2023}
2024
2025.sb_indi_surname_li,
2026.sb_fam_surname_li {
2027	list-style-image: url(clouds/images/plus.png);
2028}
2029
2030.name_tree_div ul {
2031	padding: 0;
2032	margin: 0;
2033}
2034
2035.name_tree_div li {
2036	list-style: none;
2037	margin: 0;
2038	padding: 0;
2039}
2040
2041/* Clippings */
2042#sb_clippings_content ul {
2043	padding: 0;
2044	margin: 0;
2045}
2046
2047#sb_clippings_content li {
2048	list-style: none;
2049	margin: 0;
2050	padding: 0;
2051	white-space: nowrap;
2052}
2053
2054/* Extra info */
2055#sb_content_extra_info {
2056	font-size: 80%;
2057	font-weight: bold;
2058	margin-top: 0;
2059	overflow: hidden;
2060	padding: 5px;
2061}
2062
2063#sb_content_extra_info .editfacts {
2064	float: right;
2065	margin-top: -30px;
2066}
2067
2068#sb_content_extra_info a {
2069	display: block;
2070}
2071
2072#sb_content_extra_info span {
2073	font-weight: normal;
2074}
2075
2076#sb_content_extra_info span a {
2077	display: inline;
2078}
2079
2080#sb_content_extra_info #hitcounter {
2081	border-top: 1px solid #bcd;
2082	font-weight: bold;
2083	padding-top: 5px;
2084}
2085
2086#addmedia-page input[type="text"][id*="PAGE"],
2087#addmedia-page input[type="text"][id*="_UID"] {
2088	width: 350px;
2089}
2090
2091#addmedia-page input[type="text"][id*="SOUR"],
2092#addmedia-page input[type="text"][id*="REPO"],
2093#addmedia-page input[type="text"][id*="OBJE"],
2094#addmedia-page input[type="text"][id*="FAMC"],
2095#addmedia-page input[type="text"][id*="ASSO"],
2096#addmedia-page input[type="text"][id^="AGE"],
2097#addmedia-page input[type="text"][id*="SHARED_NOTE"] {
2098	width: 70px;
2099}
2100
2101#addmedia-page input[id*="TEXT"] {
2102	height: 140px;
2103	width: 440px;
2104}
2105
2106/* http://www.jacklmoore.com/colorbox */
2107#colorbox,
2108#cboxOverlay,
2109#cboxWrapper {
2110	position: absolute;
2111	top: 0;
2112	left: 0;
2113	z-index: 9999;
2114	overflow: hidden;
2115}
2116
2117#cboxWrapper {
2118	max-width: none;
2119}
2120
2121#cboxOverlay {
2122	position: fixed;
2123	width: 100%;
2124	height: 100%;
2125	background: #fff;
2126}
2127
2128#cboxContent {
2129	background: #fff;
2130	overflow: hidden;
2131	position: relative;
2132	padding: 0.5rem;
2133	border: 0.25rem solid #ccc;
2134}
2135
2136#cboxLoadingOverlay,
2137#cboxLoadingGraphic {
2138	position: absolute;
2139	top: 0;
2140	left: 0;
2141	width: 100%;
2142	height: 100%;
2143}
2144
2145.cboxPhoto {
2146	float: left;
2147	margin: auto;
2148	border: 0;
2149	display: block;
2150	max-width: none;
2151}
2152
2153#colorbox,
2154#cboxContent,
2155#cboxLoadedContent {
2156	box-sizing: content-box;
2157}
2158
2159#cboxError {
2160	padding: 50px;
2161	border: 1px solid #ccc;
2162}
2163
2164#cboxLoadedContent {
2165	margin-bottom: 28px;
2166}
2167
2168#cboxTitle {
2169	background: #fff;
2170	position: absolute;
2171	bottom: 0.25rem;
2172	left: 0;
2173	margin: 0 3rem;
2174	text-align: center;
2175}
2176
2177#cboxLoadingGraphic {
2178	background: url(images/loading-32x32.gif) no-repeat center center;
2179}
2180
2181#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
2182	background: none;
2183	border: 0;
2184	cursor: pointer;
2185	font-family: "Font Awesome\ 5 Free", sans-serif;
2186	font-weight: 900;
2187	overflow: visible;
2188	padding: 0;
2189	position: absolute;
2190}
2191
2192#cboxSlideshow {
2193	bottom: 0.25rem;
2194	right: 0.25rem;
2195}
2196
2197#cboxPrevious {
2198	bottom: 0.25rem;
2199	left: 0.25rem;
2200}
2201
2202#cboxNext {
2203	bottom: 0.25rem;
2204	left: 1.5rem;
2205}
2206
2207#cboxClose {
2208	top: 0.25rem;
2209	right: 0.25rem;
2210}
2211
2212/* Stories module */
2213.story_title {
2214	padding-top: 12px;
2215	font-size: 13px;
2216	height: 32px;
2217	font-weight: bold;
2218}
2219
2220.story_body {
2221	padding: 20px;
2222	white-space: normal;
2223}
2224
2225.story_edit {
2226	padding: 12px;
2227}
2228
2229/* ====== Charts Styles ======== */
2230#people label {
2231	display: block;
2232}
2233
2234/* Ancestry chart */
2235.wt-chart-ancestors-list {
2236	background: transparent url(images/vline.png) left top repeat-y;
2237	margin: 0 0 0 15px;
2238	padding: 0;
2239	display: block;
2240}
2241
2242.wt-chart-ancestors-list-item {
2243	margin: 5px 0;
2244}
2245
2246.chart_common li {
2247	list-style: outside none none;
2248}
2249
2250.generations {
2251	background: transparent url(images/vline.png) repeat-y scroll left top;
2252	display: block;
2253	margin: 0 0 0 15px;
2254	padding: 0;
2255}
2256
2257.chart_common table {
2258	padding: 0;
2259	border-spacing: 0;
2260	border-collapse: collapse;
2261	margin: 5px 0;
2262}
2263
2264.chart_common td {
2265	border: 0;
2266	padding: 0;
2267}
2268
2269.chart_common span.details1 div[class^=fact_] {
2270	display: inline-block;
2271}
2272
2273.chart_common span.details1 .date {
2274	color: inherit;
2275}
2276
2277/*-- Family book  --*/
2278#familybook_chart {
2279	margin-left: 10px;
2280}
2281
2282#familybook_chart table {
2283	border-collapse: collapse;
2284	empty-cells: show;
2285}
2286
2287#familybook_chart td {
2288	margin: 0;
2289	padding: 0;
2290}
2291
2292#familybook_chart h2 {
2293	text-align: center;
2294}
2295
2296#familybook_chart .line3,
2297#familybook_chart .pvline,
2298#familybook_chart .spacer {
2299	width: 3px;
2300}
2301
2302#familybook_chart .line4 {
2303	width: 7px;
2304	vertical-align: middle;
2305}
2306
2307[ID^="vline"] {
2308	width: 3px;
2309}
2310
2311#familybook_chart h3 {
2312	color: #006;
2313	font-size: 16px;
2314	text-align: center;
2315}
2316
2317/*-- Fan chart ---- */
2318.fan_chart_menu {
2319	position: absolute;
2320	display: none;
2321	z-index: 100;
2322}
2323
2324#fan_chart ul {
2325	list-style-type: none;
2326	margin: 0;
2327}
2328
2329/* Lifespans chart */
2330.wt-lifespans-subtitle {
2331	text-align: center;
2332}
2333
2334.wt-lifespans-scale {
2335	white-space: nowrap;
2336}
2337
2338.wt-lifespans-decade {
2339	width: 70px;
2340	height: 60px;
2341	display: inline-block;
2342	background-image: url(images/lifespan-decade.png);
2343	background-position-y: bottom;
2344	background-repeat: no-repeat;
2345	background-size: 70px 37px;
2346}
2347
2348.wt-lifespans-individuals {
2349	background: #fafafa;
2350}
2351
2352.wt-lifespans-individual {
2353
2354}
2355
2356.wt-lifespans-summary {
2357	background: #ffffff;
2358	border: thin solid #000;
2359	z-index: 1;
2360}
2361
2362.wt-lifespans-summary-link {
2363	font-weight: bold;
2364}
2365
2366/*-- Pedigree ---- */
2367#pedigree_chart {
2368	position: relative;
2369	margin: 20px auto;
2370}
2371
2372#pedigree_canvas {
2373	color:   #81a9cb;
2374	z-index: -1000;
2375}
2376
2377#pedigree-page .shadow {
2378	position: absolute;
2379	white-space: nowrap;
2380}
2381
2382#pedigree-page .layout0 .shadow > div,
2383#pedigree-page .layout1 .shadow > div {
2384	display: inline-block;
2385	vertical-align: middle;
2386}
2387
2388#pedigree-page .spacer {
2389	background-image: url(images/spacer.png);
2390	height: 20px;
2391	width: 1px;
2392}
2393
2394#childarrow,
2395.ancestorarrow {
2396	text-align: center;
2397}
2398
2399#pedigree-page #childarrow {
2400	position: relative;
2401}
2402
2403#pedigree-page #childbox {
2404	border: 1px solid;
2405	background-color: #fff;
2406}
2407
2408#pedigree-page table.list_table {
2409	margin: 0 auto;
2410	width: 500px;
2411}
2412
2413.pedigree_chart_table {
2414	border: 0;
2415	border-collapse: collapse;
2416	padding: 0;
2417	width: 100%;
2418}
2419
2420/*-- timeline  --*/
2421#timeline_chart {
2422	position: relative;
2423	top: 0;
2424	left: 0;
2425}
2426
2427#field_table {
2428	width: 30%;
2429	min-width: 500px;
2430}
2431
2432[class^="icon-"],
2433[class*=" icon-"] {
2434	display: inline-block;
2435	vertical-align: middle;
2436	background-repeat: no-repeat;
2437	background-size: cover;
2438}
2439
2440.icon-add {
2441	width: 14px;
2442	height: 15px;
2443	background-image: url(images/add.png);
2444}
2445
2446.icon-cfamily {
2447	width: 22px;
2448	height: 22px;
2449	background-image: url(clouds/images/cfamily.png);
2450}
2451
2452.icon-childless {
2453	width: 25px;
2454	height: 25px;
2455	background-image: url(clouds/images/childless.png);
2456}
2457
2458.icon-children {
2459	width: 16px;
2460	height: 16px;
2461	background-image: url(clouds/images/children.png);
2462}
2463
2464.icon-clippings {
2465	width: 22px;
2466	height: 22px;
2467	background-image: url(clouds/images/clippings.png);
2468}
2469
2470.icon-edit_indi {
2471	width: 22px;
2472	height: 22px;
2473	background-image: url(clouds/images/edit_indi.png);
2474}
2475
2476.icon-fam-list {
2477	width: 22px;
2478	height: 22px;
2479	background-image: url(clouds/images/sfamily.png);
2480}
2481
2482.icon-indi-list {
2483	width: 22px;
2484	height: 22px;
2485	background-image: url(clouds/images/indis.png);
2486}
2487
2488.icon-loading-small {
2489	width: 16px;
2490	height: 16px;
2491	background-image: url(clouds/images/indicator.gif);
2492}
2493
2494.icon-media {
2495	width: 32px;
2496	height: 32px;
2497	background-image: url(clouds/images/media.png);
2498}
2499
2500.icon-media-list {
2501	width: 32px;
2502	height: 32px;
2503	background-image: url(clouds/images/media.png);
2504}
2505
2506.icon-media-next {
2507	width: 20px;
2508	height: 20px;
2509	background-image: url(clouds/images/rdarrow.png);
2510}
2511
2512.icon-media-play {
2513	width: 20px;
2514	height: 20px;
2515	background-image: url(clouds/images/rarrow.png);
2516}
2517
2518.icon-media-stop {
2519	width: 20px;
2520	height: 20px;
2521	background-image: url(clouds/images/stop.png);
2522}
2523
2524.icon-minus {
2525	width: 11px;
2526	height: 11px;
2527	background-image: url(clouds/images/minus.png);
2528}
2529
2530.icon-mypage {
2531	width: 22px;
2532	height: 22px;
2533	background-image: url(clouds/images/mypage.png);
2534}
2535
2536.icon-note {
2537	width: 22px;
2538	height: 22px;
2539	background-image: url(clouds/icons/note.png);
2540}
2541
2542.icon-plus {
2543	width: 11px;
2544	height: 11px;
2545	background-image: url(clouds/images/plus.png);
2546}
2547
2548.icon-remove {
2549	width: 16px;
2550	height: 16px;
2551	background-image: url(clouds/images/delete.png);
2552}
2553
2554.icon-resn-confidential {
2555	width: 16px;
2556	height: 16px;
2557	background-image: url(clouds/images/resn_confidential.png);
2558}
2559
2560.icon-resn-locked {
2561	width: 16px;
2562	height: 16px;
2563	background-image: url(clouds/images/resn_locked.png);
2564}
2565
2566.icon-resn-none {
2567	width: 16px;
2568	height: 16px;
2569	background-image: url(clouds/images/resn_none.png);
2570}
2571
2572.icon-resn-privacy {
2573	width: 16px;
2574	height: 16px;
2575	background-image: url(clouds/images/resn_privacy.png);
2576}
2577
2578.icon-rings {
2579	width: 9px;
2580	height: 9px;
2581	background-image: url(clouds/images/rings.png);
2582}
2583
2584.icon-selected {
2585	width: 12px;
2586	height: 12px;
2587	background-image: url(clouds/images/selected.png);
2588}
2589
2590.icon-source {
2591	width: 25px;
2592	height: 25px;
2593	background-image: url(clouds/images/source.png);
2594}
2595
2596/* Silhouettes on charts */
2597.icon-silhouette-F {
2598	width: 37px;
2599	height: 45px;
2600	background-image: url(clouds/images/silhouette_female_small.png);
2601}
2602
2603.icon-silhouette-M {
2604	width: 37px;
2605	height: 45px;
2606	background-image: url(clouds/images/silhouette_male_small.png);
2607}
2608
2609.icon-silhouette-U {
2610	width: 37px;
2611	height: 45px;
2612	background-image: url(clouds/images/silhouette_unknown_small.png);
2613}
2614
2615/* Tbl hdrs and Light Text */
2616.descriptionbox,
2617.topbottombar,
2618.topbottombar a,
2619.list_label,
2620.list_label a {
2621	background-color: #95b8e0;
2622	color: #039;
2623}
2624
2625/* Base Color */
2626.descriptionbox .submenu a,
2627.blockcontent,
2628.list_value,
2629.list_value_wrap,
2630.news_box,
2631.submenuitem_hover {
2632	background: inherit;
2633}
2634
2635#topMenu {
2636	background: #acf;
2637	clear: both;
2638	height: 31px;
2639	width: 100%;
2640}
2641
2642#topMenu ul {
2643	margin: 0;
2644	padding: 0;
2645}
2646
2647/* Set stack level for top two header menu rows */
2648.hsearch {
2649    display: block;
2650    float: right;
2651    padding-right: 10px;
2652    padding-top: 5px;
2653}
2654
2655.search-icon {
2656	height: 17px;
2657	vertical-align: top;
2658}
2659
2660.logo {
2661	text-align: center;
2662}
2663
2664footer .error {
2665	color: #d00;
2666	font-weight: bold;
2667}
2668
2669.user_links {
2670	white-space: nowrap;
2671}
2672
2673/*
2674 * Any element that is loaded dynamically has the class wt-ajax-load.
2675 * We can provide a "loading" placeholder for empty elements with this class.
2676 */
2677.wt-ajax-load:empty {
2678	height: 32px;
2679	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
2680}
2681
2682/*
2683 * Default icons are provided by FontAwesome.
2684 * Some icons get mirrored on RTL pages.  Typiclly arrows
2685 */
2686[dir=rtl] .wt-flip-rtl {
2687	transform: scale(-1, 1);
2688}
2689
2690.wt-icon-anniversary {
2691	content: url(images/anniversary.png);
2692}
2693
2694.wt-icon-arrow-down {
2695	content: url(clouds/icons/arrow-down.png);
2696}
2697
2698a > .wt-icon-arrow-down:hover {
2699	content: url(clouds/icons/arrow-down-hover.png);
2700}
2701
2702.wt-icon-arrow-left {
2703	content: url(clouds/icons/arrow-left.png);
2704}
2705
2706a > .wt-icon-arrow-left:hover {
2707	content: url(clouds/icons/arrow-left-hover.png);
2708}
2709
2710.wt-icon-arrow-right {
2711	content: url(clouds/icons/arrow-right.png);
2712}
2713
2714a > .wt-icon-arrow-right:hover {
2715	content: url(clouds/icons/arrow-right-hover.png);
2716}
2717
2718.wt-icon-arrow-up {
2719	content: url(clouds/icons/arrow-up.png);
2720}
2721
2722a > .wt-icon-arrow-up:hover {
2723	content: url(clouds/icons/arrow-up-hover.png);
2724}
2725
2726.wt-icon-coordinates {
2727	content: url(images/coordinates.png)
2728}
2729
2730.wt-icon-reorder {
2731	content: url(images/reorder.png);
2732}
2733
2734.wt-icon-sex-f {
2735	content: url(images/sex-female.png);
2736}
2737
2738.wt-icon-sex-m {
2739	content: url(images/sex-male.png);
2740}
2741
2742.wt-icon-sex-u {
2743	content: url(images/sex-unknown.png);
2744}
2745
2746.wt-icon-sex-x {
2747	content: url(images/sex-unknown.png);
2748}
2749
2750.wt-icon-warning {
2751	content: url(images/warning.png);
2752}
2753
2754.wt-icon-zoom-in {
2755	content: url(clouds/images/zoomin.png);
2756}
2757
2758.wt-icon-zoom-out {
2759	content: url(clouds/images/zoomout.png);
2760}
2761
2762/*
2763 * .wt-icon-bing-maps
2764 * .wt-icon-calendar
2765 * .wt-icon-copy
2766 * .wt-icon-delete
2767 * .wt-icon-edit
2768 * .wt-icon-email
2769 * .wt-icon-family
2770 * .wt-icon-help
2771 * .wt-icon-individual
2772 * .wt-icon-google-maps
2773 * .wt-icon-keyboard
2774 * .wt-icon-media
2775 * .wt-icon-note
2776 * .wt-icon-openstreetmap
2777 * .wt-icon-preferences
2778 * .wt-icon-repository
2779 * .wt-icon-source
2780 * .wt-icon-submitter
2781 */
2782.wt-icon-bing-maps::before {
2783	width: 16px;
2784	height: 16px;
2785	content: url(clouds/icons/bing-maps.png);
2786}
2787
2788.wt-icon-calendar::before {
2789	width: 19px;
2790	height: 15px;
2791	content: url(clouds/icons/calendar.png)
2792}
2793
2794.wt-icon-copy::before {
2795	width: 16px;
2796	height: 16px;
2797	content: url(clouds/icons/copy.png)
2798}
2799
2800.wt-icon-delete::before {
2801	width: 16px;
2802	height: 16px;
2803	content: url(clouds/icons/delete.png);
2804}
2805
2806.wt-icon-edit::before {
2807	width: 16px;
2808	height: 16px;
2809	content: url(clouds/icons/edit.png);
2810}
2811
2812.wt-icon-family::before {
2813	width: 14px;
2814	height: 15px;
2815	content: url(clouds/icons/family.png);
2816}
2817
2818.wt-icon-help::before {
2819	width: 16px;
2820	height: 16px;
2821	content: url(clouds/icons/help.png);
2822}
2823
2824.wt-icon-google-maps::before {
2825	width: 16px;
2826	height: 16px;
2827	content: url(clouds/icons/google-maps.png);
2828}
2829
2830.wt-icon-individual::before {
2831	width: 11px;
2832	height: 15px;
2833	content: url(clouds/icons/individual.png);
2834}
2835
2836.wt-icon-keyboard::before {
2837	width: 30px;
2838	height: 15px;
2839	content: url(clouds/icons/keyboard.png);
2840}
2841
2842.wt-icon-media::before {
2843	width: 18px;
2844	height: 16px;
2845	content: url(clouds/icons/media.png);
2846}
2847
2848.wt-icon-note::before {
2849	width: 20px;
2850	height: 20px;
2851	content: url(clouds/icons/note.png);
2852}
2853
2854.wt-icon-openstreetmap::before {
2855	width: 16px;
2856	height: 16px;
2857	content: url(clouds/icons/openstreetmap.png);
2858}
2859
2860.wt-icon-preferences::before {
2861	width: 25px;
2862	height: 25px;
2863	content: url(clouds/icons/preferences.png);
2864}
2865
2866.wt-icon-repository::before {
2867	width: 15px;
2868	height: 15px;
2869	content: url(clouds/icons/repository.png);
2870}
2871
2872.wt-icon-source::before {
2873	width: 18px;
2874	height: 16px;
2875	content: url(clouds/icons/source.png);
2876}
2877
2878.wt-icon-submitter::before {
2879	width: 11px;
2880	height: 15px;
2881	content: url(clouds/icons/individual.png);
2882}
2883
2884.icon-indis {
2885	width: 22px;
2886	height: 22px;
2887	background-image: url(clouds/images/indis.png);
2888}
2889
2890.icon-patriarch {
2891	width: 25px;
2892	height: 25px;
2893	background-image: url(clouds/images/patriarch.png);
2894}
2895
2896.icon-pedigree {
2897	width: 22px;
2898	height: 22px;
2899	background-image: url(clouds/images/pedigree.png);
2900}
2901
2902.icon-place {
2903	width: 22px;
2904	height: 22px;
2905	background-image: url(clouds/images/place.png);
2906}
2907
2908.icon-repo-list {
2909	width: 22px;
2910	height: 22px;
2911	background-image: url(clouds/images/repository.png);
2912}
2913
2914.icon-repository {
2915	width: 22px;
2916	height: 22px;
2917	background-image: url(clouds/images/repository.png);
2918}
2919
2920.icon-search {
2921	width: 16px;
2922	height: 16px;
2923	background-image: url(clouds/images/go.png);
2924}
2925
2926.icon-sfamily {
2927	width: 22px;
2928	height: 22px;
2929	background-image: url(clouds/images/sfamily.png);
2930}
2931
2932.icon-source-list {
2933	width: 25px;
2934	height: 25px;
2935	background-image: url(clouds/images/source.png);
2936}
2937
2938.icon-user_add {
2939	width: 22px;
2940	height: 22px;
2941	background-image: url(clouds/images/user_add.png);
2942}
2943
2944/* Census assistant */
2945.wt-census-assistant-form-control:focus {
2946	min-width: 12rem;
2947}
2948
2949/*
2950 * Drag and drop sortable lists
2951 */
2952.wt-sortable-list {
2953}
2954
2955.wt-sortable-item {
2956	cursor: move;
2957}
2958
2959/* Some blocks show a reduced version on the right-hand side. */
2960.wt-side-blocks .wt-side-block-optional {
2961	display: none !important;
2962}
2963
2964/* my page chart enhancements */
2965.wt-block-content-charts {
2966	flex-flow: column-reverse;
2967	overflow: auto;
2968}
2969
2970.wt-block-content-todays-events-block {
2971	padding: .25rem;
2972}
2973
2974/* Some charts are wider than the page. */
2975.wt-chart {
2976	overflow-x: auto;
2977	overflow-y: hidden;
2978}
2979
2980/* Fit thumbnail into parent on charts */
2981.select2-selection.select2-selection--single {
2982	min-height: 36px;
2983	height: auto;
2984	padding: 2px 0;
2985}
2986
2987.select2-container .select2-selection--single .select2-selection__rendered {
2988	padding-left: 2px;
2989}
2990
2991.select2-selection--single .NAME {
2992	padding-left: 4px;
2993}
2994
2995/*
2996 *  These selectors control how the short horizontal lines are positioned in the Charts
2997 *  Optimized for Win10 and FF, Chrome and Edge browsers
2998 *  	Ancestors
2999 *  	Descendants
3000 *  	amily book
3001 *  	Hourglass chart
3002 *
3003 */
3004
3005/* Ascentors */
3006.wt-chart-ancestors .linea1 {
3007	margin-bottom: 4px;
3008}
3009
3010.wt-chart-ancestors .linea2 {
3011	margin-bottom: 7px;
3012}
3013
3014.wt-chart-ancestors .linea3 {
3015	margin-bottom: 4px;
3016}
3017
3018.wt-chart-ancestors .linea4 {
3019	margin-bottom: 7px;
3020}
3021
3022.wt-chart-ancestors .linea5 {
3023	vertical-align: top;
3024}
3025
3026/* Descendants */
3027.wt-chart-descendants .lined1 {
3028	margin-bottom: 4px;
3029}
3030
3031.wt-chart-descendants .lined2 {
3032	margin-bottom: 7px;
3033}
3034
3035.wt-chart-descendants .lined3 {
3036	margin-bottom: 4px;
3037}
3038
3039.wt-chart-descendants .lined4 {
3040	margin-bottom: 7px;
3041}
3042
3043.wt-chart-descendants .linea5 {
3044	vertical-align: top;
3045}
3046
3047/* Family book */
3048.linef1 {
3049	margin-bottom: 3px;
3050}
3051
3052.linef2 {
3053	margin-bottom: 3px;
3054}
3055
3056.linef3 {
3057	margin-bottom: 7px;
3058}
3059
3060/* Hourglass */
3061.lineh1 {
3062	margin-bottom: 4px;
3063}
3064
3065.lineh2 {
3066	margin-bottom: 4px;
3067}
3068
3069.lineh3 {
3070	margin-bottom: 7px;
3071}
3072
3073/*
3074 * Pedigree chart
3075 *
3076 * wt-chart, wt-chart-pedigree
3077 */
3078
3079#pedigree_chart {
3080	position: relative;
3081	margin: 20px auto;
3082}
3083
3084#pedigree_canvas {
3085	z-index: -1000;
3086}
3087
3088#childbox-pedigree {
3089	border: 1px solid;
3090	background-color: #fff;
3091}
3092
3093#pedigree-page #childbox-pedigree {
3094	border: 1px solid;
3095	background-color: #fff;
3096}
3097
3098#childbox-pedigree {
3099	padding: 5px;
3100	position: absolute;
3101	display: none;
3102	text-align: start;
3103	white-space: nowrap;
3104	left: auto;
3105	z-index: 9999;
3106}
3107
3108.wt-chart-pedigree, .wt-chart-hourglass {
3109	overflow-y: auto;
3110}
3111
3112.wt-chart-pedigree .spacer {
3113	background-image: url(images/spacer.png);
3114	height: 20px;
3115	width: 1px;
3116}
3117
3118#pedigree-page .shadow {
3119	box-shadow: 0 0 0 !important; /* override vendor css shadow  */
3120}
3121
3122#childarrow,
3123.ancestorarrow {
3124	text-align: center;
3125	display: inline-block;
3126	vertical-align: middle;
3127}
3128
3129.layout3 #childbox-pedigree {
3130	top: auto;
3131}
3132
3133#childbox-pedigree a.name1 {
3134	display: block;
3135	margin-left: 5px;
3136}
3137
3138/*
3139 * Place hierarchy
3140 *
3141 * wt-place-hierarchy-page
3142 */
3143
3144#place-hierarchy ul {
3145	list-style-type: none;
3146}
3147
3148.d-table-cell {
3149	padding-right: 5px;
3150}
3151
3152/*
3153 * Search
3154 *
3155 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page
3156 */
3157
3158/* Some menus (e.g. languages) can be longer than a page */
3159.dropdown-menu {
3160	max-height: 30rem;
3161	overflow-x: hidden;
3162}
3163
3164/* Clipping cart */
3165.clipping-cart h2 {
3166	margin: 20px;
3167	text-align: center;
3168}
3169
3170.clipping-cart .wt-page-options {
3171	max-width: 25rem;
3172}
3173
3174.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar {
3175	font-size: 1rem;
3176}
3177
3178.clipping-cart .add-to {
3179	text-align: left;
3180}
3181
3182/* Forms */
3183.col-form-label {
3184	font-weight: bold;
3185}
3186
3187/* Popups */
3188.popup .nav-link {
3189	display: inline;
3190	vertical-align: top;
3191	padding: 5px;
3192}
3193
3194