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