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