xref: /webtrees/resources/css/colors.css (revision 1f1ffa65b3b51df2b95b5c68894525436855964a)
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-search-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.name1 {
824}
825
826.name2 {
827}
828
829a:hover .name1, a:hover .name2 {
830	color: #f00;
831	font-weight: bold;
832	font-size: 12px;
833}
834
835.details2 {
836	font-size: 12px;
837}
838
839.details_label {
840	font-weight: bold;
841}
842
843.name_head {
844	color: #333;
845	font-size: 16px;
846	font-weight: bold;
847	line-height: 2;
848	padding: 0 5px;
849}
850
851.date {
852	color: #333;
853}
854
855.label {
856	font-weight: bold;
857}
858
859.error {
860	font-weight: bold;
861}
862
863.largeError {
864	color: #d00;
865	font-size: large;
866	font-weight: bold;
867}
868
869.warning {
870	color: #f00;
871	font-weight: bold;
872}
873
874.indent {
875	padding-left: 7px;
876}
877
878.image {
879	height: 150px;
880	padding: 5px;
881	margin: 2px;
882}
883
884.thumbnail {
885	height: auto;
886	padding: 3px;
887}
888
889.icon {
890	border: 0;
891	padding: 0 5px;
892}
893
894.submenu .icon {
895	vertical-align: middle;
896	width: 20px;
897	height: 20px;
898}
899
900.subheaders {
901	font-weight: bold;
902	font-size: 15px;
903	margin-top: 15px;
904	vertical-align: bottom;
905}
906
907.parentdeath {
908	border: thin solid #888;
909	padding: 1px;
910}
911
912.source_citations {
913	display: none;
914}
915
916.selected-option {
917	background-color: #edf7fd;
918}
919
920.border1 {
921	border: solid #000 1px;
922}
923
924.menuitem {
925	text-decoration: none;
926	font-size: 11px;
927	padding: 1px;
928}
929
930.menuitem_hover {
931	text-decoration: none;
932	font-size: 11px;
933	padding: 1px;
934}
935
936.menuitem .icon, .menuitem_hover .icon {
937	width: 50px;
938	height: 50px;
939}
940
941.submenu {
942	text-decoration: none;
943	font-size: 11px;
944	background-color: #fff;
945	border: solid #ccc 1px;
946	visibility: hidden;
947	position: absolute;
948	padding: 5px;
949}
950
951.submenuitem  {
952	vertical-align: middle;
953	font-size: 11px;
954	height: 20px;
955	text-decoration: none;
956	background-color: #fff;
957	padding: 1px;
958	white-space: nowrap;
959}
960
961.submenuitem_hover {
962	vertical-align: middle;
963	height: 20px;
964	font-size: 11px;
965	background-color: #fff;
966	border: 1px solid #ccc;
967	white-space: nowrap;
968	padding: 1px;
969}
970
971.submenuitem a,
972.submenuitem_hover a {
973	display: inline-block;
974	vertical-align: middle;
975}
976
977.journal_box {
978	padding: 3pt;
979	border: thin solid #aaa;
980	overflow: visible;
981}
982
983.news_box {
984	border-top: solid #ccc 1px;
985}
986
987.news_title {
988	font-weight: bold;
989}
990
991.news_date {
992	margin-bottom: 12px;
993}
994
995.current_day {
996	font-weight: bold;
997	font-size: 16px;
998}
999
1000.cal_day {
1001	float: left;
1002	font-weight: bold;
1003}
1004
1005.rtl_cal_day {
1006	direction: rtl;
1007	float: right;
1008	color: #00f;
1009	font-weight: bold;
1010}
1011
1012.helpcontent {
1013	margin-left: 10px;
1014	margin-right: 10px;
1015}
1016
1017.helpcontent dt {
1018	clear: both;
1019}
1020
1021#user-page h1 {
1022	margin: 0.25em auto 0.6em;
1023}
1024
1025.tvertline {
1026	vertical-align: bottom;
1027}
1028
1029#childbox {
1030	padding: 5px;
1031	position: absolute;
1032	display: none;
1033	text-align: start;
1034	white-space: nowrap;
1035	top: 20px;
1036	left: 0;
1037}
1038
1039.layout3 #childbox {
1040	top: auto;
1041	bottom: 20px;
1042}
1043
1044#childbox a.name1 {
1045	display: block;
1046	margin-left: 5px;
1047}
1048
1049.person0 {
1050	background-color: #ddf;
1051	border: outset #999 1px;
1052	vertical-align: top;
1053}
1054
1055.person1 {
1056	background-color: #afa;
1057	border: outset #afa 1px;
1058	vertical-align: top;
1059}
1060
1061.person2 {
1062	background-color: #faa;
1063	border: outset #faa 1px;
1064	vertical-align: top;
1065}
1066
1067.person3 {
1068	background-color: #aad;
1069	border: outset #55f 1px;
1070	vertical-align: top;
1071}
1072
1073.person4 {
1074	background-color: #f55;
1075	border: outset #f55 1px;
1076	vertical-align: top;
1077}
1078
1079.person5 {
1080	background-color: #5f5;
1081	border: outset #5f5 1px;
1082	vertical-align: top;
1083}
1084
1085.listlog {
1086	line-height: 20pt;
1087}
1088
1089.starredname {
1090	text-decoration: underline;
1091}
1092
1093.search_hit {
1094	background-color: #ff0;
1095}
1096
1097.search_item {
1098	font-weight: 600;
1099}
1100
1101.descriptionbox {
1102	font-size: 1rem;
1103	color: #333;
1104	border: 1px solid #999;
1105	vertical-align: top;
1106	padding: 3px;
1107}
1108
1109.optionbox {
1110	font-size: 1rem;
1111	color: #333;
1112	border: 1px solid #999;
1113	vertical-align: top;
1114	white-space: nowrap;
1115	padding: 3px;
1116}
1117
1118.optionbox .list_value {
1119	background-color: #fff;
1120	border: 1px solid #999;
1121	border-radius: 3px;
1122}
1123
1124.vmiddle {
1125	vertical-align: middle;
1126}
1127
1128.red {
1129	color: #f00;
1130}
1131
1132.wt-relation-fact,
1133.wt-historic-fact {
1134	opacity: 0.8;
1135}
1136
1137.messagebox {
1138	background-color: #c2ceef;
1139	border: solid #ccc 1px;
1140}
1141
1142/* ---Pending edits--- */
1143.wt-new {
1144}
1145
1146.wt-old {
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/* --- reportengine.php --- */
1206#reportengine-page table {
1207	margin: 20px auto;
1208}
1209
1210#reportengine-page .report-type {
1211	overflow: hidden;
1212	margin: auto;
1213	width: 180px;
1214}
1215
1216#reportengine-page .report-type div {
1217	float: left;
1218	margin: 0 20px;
1219}
1220
1221#reportengine-page .report-type p {
1222	margin: 0;
1223	text-align: center;
1224}
1225
1226/* styles for popup menus */
1227.itr {
1228	position: absolute;
1229	line-height: 1.5;
1230}
1231
1232.popup {
1233	position: absolute;
1234	top: 21px;
1235	right: 0;
1236	left: auto;
1237	visibility: hidden;
1238	opacity: 0;
1239	transition: visibility 0s ease .25s,opacity .25s ease;
1240	z-index: 9999;
1241	box-shadow: 5px 5px 5px 0 rgba(0,0,0,.4);
1242}
1243
1244.popup ul {
1245	white-space: nowrap;
1246	list-style: none;
1247	margin: 0;
1248	padding: 0 10px;
1249}
1250
1251.popup > ul {
1252	padding: 2px 10px;
1253}
1254
1255.popup li .NAME {
1256	padding: 0 5px;
1257}
1258
1259.itr:hover .popup {
1260	visibility: visible;
1261	opacity: 1;
1262	transition-delay: 0s;
1263}
1264
1265/* styles for FindFacts pop-up */
1266#layDefinedTags,
1267#tabDefinedTagsShow {
1268	width: 450px;
1269}
1270
1271#tabDefinedTags {
1272	width: 430px;
1273}
1274
1275#layDefinedTags {
1276	margin-left: auto;
1277	margin-right: auto;
1278	height: 285px;
1279	overflow: auto;
1280}
1281
1282#tabDefinedTags {
1283	border-collapse: collapse;
1284}
1285
1286#tabDefinedTags th,
1287#tabDefinedTags td {
1288	border: solid 1px #000;
1289	margin: 0;
1290	padding: 3px;
1291}
1292
1293#tabDefinedTags tbody th {
1294	text-align: left;
1295	font-weight: bold;
1296}
1297
1298#tabDefinedTags tr.sel {
1299	background-color: #d1d9ef;
1300	color: #888;
1301}
1302
1303#tabDefinedTags tr.unsel {
1304	background-color: #fff;
1305	color: #888;
1306}
1307
1308#tabDefinedTagsShow {
1309	margin-left: auto;
1310	margin-right: auto;
1311}
1312
1313#tabDefinedTagsShow td {
1314	width: 50%;
1315	text-align: center;
1316}
1317
1318#tabFilterAndCustom {
1319	margin-left: auto;
1320	margin-right: auto;
1321}
1322
1323#tabAction {
1324	margin-left: auto;
1325	margin-right: auto;
1326}
1327
1328#tabAction td {
1329	width: 50%;
1330	text-align: center;
1331}
1332
1333/* ======== List styles ====== */
1334.surname-list,
1335.givn-list {
1336	margin: 5px auto;
1337}
1338
1339.source-list table,
1340.note-list table,
1341.repo-list table,
1342.media-list table,
1343.indi-list table,
1344.fam-list table {
1345	width: 100%;
1346}
1347
1348.source-list td,
1349.note-list td,
1350.repo-list td,
1351.media-list td,
1352.indi-list td,
1353.fam-list td,
1354.recent_changes_block td,
1355.upcoming_events_block td,
1356.surname-list td,
1357.givn-list td {
1358	padding: 2px 5px;
1359}
1360
1361.surname-list td {
1362	vertical-align: top;
1363}
1364
1365.indi-list .stats,
1366.fam-list .stats {
1367	margin: 0 auto;
1368	width: auto;
1369}
1370
1371.source-list th,
1372.note-list th,
1373.repo-list th,
1374.media-list th,
1375.indi-list th,
1376.fam-list th,
1377.wt-table-changes th,
1378.wt-table-events th,
1379.wt-table-tasks th,
1380.wt-table-yahrzeits th,
1381.surname-list th,
1382.givn-list th {
1383	cursor: pointer;
1384	font-weight: 600;
1385	padding: 2px 4px;
1386	white-space: nowrap;
1387}
1388
1389.source-list th:last-child,
1390.note-list th:last-child,
1391.repo-list th:last-child {
1392	margin: 0 -2px 1px 1px;
1393	padding: 3px 0 4px;
1394	width: 24px;
1395}
1396
1397.givn-list th {
1398	cursor: pointer;
1399	white-space: nowrap;
1400	padding: 2px;
1401	text-align: center;
1402}
1403
1404#source-details h2,
1405#sourcelist-page h2,
1406#note-details h2,
1407#notelist-page h2,
1408#repo-details h2,
1409#repolist-page h2,
1410#media-details h2,
1411#statistics-page h2 {
1412	margin-bottom: 20px;
1413	text-align: center;
1414}
1415
1416#source-edit,
1417#note-edit,
1418#repo-edit,
1419#media-edit {
1420	overflow-x: auto;
1421}
1422
1423.media-list td img {
1424	display: block;
1425	height: 40px;
1426	width: auto;
1427	margin: 3px auto;
1428}
1429
1430.filtersH,
1431.filtersF {
1432	margin: 4px;
1433}
1434
1435.filtersH img {
1436	margin-bottom: 2px;
1437}
1438
1439.list-charts {
1440	text-align: center;
1441}
1442
1443#search-result-tabs h3 {
1444	text-align: center;
1445}
1446
1447#searchAccordion-indi,
1448#searchAccordion-fam,
1449#searchAccordion-source,
1450#searchAccordion-note {
1451	margin: auto;
1452	width: 99%;
1453}
1454
1455#place-hierarchy h2,
1456#place-hierarchy h4 {
1457	text-align: center;
1458}
1459
1460#main_select,
1461#available_select,
1462#right_select {
1463	min-width: 150px;
1464}
1465
1466/* === Who is online block === */
1467.logged_in_list {
1468	margin: 5px 0 0;
1469	padding: 0;
1470	line-height: 20px;
1471}
1472
1473/* ==== Theme select block === */
1474.theme_form ul {
1475	margin: -10px auto;
1476}
1477
1478.theme_form li {
1479	visibility: hidden;
1480}
1481
1482.theme_form li ul li {
1483	display: inline-block;
1484	padding: 10px;
1485	visibility: visible;
1486}
1487
1488/* ==== FAQ table styles ===== */
1489table.faq {
1490	background-color: #e0e0e0;
1491	margin: 5px 0 50px 5px;
1492	width: 98%;
1493}
1494
1495table.faq tr:nth-child(odd) td {
1496	background-color: #e7eef3;
1497}
1498
1499div.faq_title {
1500	background-color: #e0e0e0;
1501	margin: 1em 0;
1502	padding: .25em;
1503	font-weight: bold;
1504	width: 98%;
1505}
1506
1507div.faq_body {
1508	clear: both;
1509	padding: 0 1em;
1510}
1511
1512.faq_top {
1513	float: right;
1514}
1515
1516/* === Positioning edit, copy, delete links === */
1517/* General use */
1518.editfacts {
1519	clear: left;
1520	padding-top: 15px;
1521}
1522
1523/* ======== Indi header ====== */
1524#indi_header {
1525	overflow: hidden;
1526	margin: 0 0 5px;
1527}
1528
1529#indi_header h3 {
1530	color: #555;
1531	font-size: 90%;
1532	font-weight: bold;
1533	margin: 0;
1534	padding: 0 10px 0 30px;
1535	text-align: left;
1536	overflow: hidden;
1537	position: relative;
1538}
1539
1540#indi_header .name_one {
1541	font-size: 1.5em;
1542}
1543
1544#indi_header h3 .details1 {
1545	font-size: 1.0em;
1546}
1547
1548#indi_header h3 .header_age {
1549	padding: 5px 0 5px 5px;
1550	float: right;
1551	font-weight: normal;
1552	font-size: 65%;
1553}
1554
1555#indi_header h3 a {
1556	display: inline;
1557}
1558
1559#indi_header a {
1560	color: #337;
1561	font-size: 0.75em;
1562	font-weight: normal;
1563}
1564
1565#indi_header a:hover {
1566	color: #f00;
1567}
1568
1569#indi_mainimage {
1570	float: left;
1571	padding: 0 2px;
1572}
1573
1574#header_accordion1 {
1575	padding: 0;
1576	overflow: hidden;
1577}
1578
1579#header_accordion1 .indi_name_details {
1580	margin: 0;
1581	overflow: hidden;
1582	padding: 5px;
1583}
1584
1585.indi_name_details .name1 {
1586	font-weight: normal;
1587	padding-top: 5px;
1588	font-size: inherit;
1589}
1590
1591#indi_header a.warning {
1592	color: #f00;
1593	font-size: 1em;
1594}
1595
1596#indi_note {
1597	margin: 0 0 5px;
1598}
1599
1600.indi_table {
1601	clear: left;
1602}
1603
1604#sex {
1605	float: right;
1606}
1607
1608#dates {
1609	float: right;
1610}
1611
1612#individual-names .wt-icon-edit,
1613#individual-names .wt-icon-delete {
1614	float: right;
1615}
1616
1617#indi_note .fact_NOTE {
1618	float: left;
1619	margin: 0 5px 0 0;
1620}
1621
1622#indi_note .fact_SOUR {
1623	margin: 3px 0;
1624}
1625
1626#indi_note .fact_SOUR a {
1627	font-size: 100%;
1628}
1629
1630#indi_note .fact_NOTE,
1631#indi_note .fact_SOUR {
1632	clear: both;
1633}
1634
1635/* markdown formatting */
1636
1637.markdown {
1638	/* Tables and pre-formatted text can break the layout. */
1639	overflow-x: auto;
1640}
1641
1642.markdown p {
1643	margin: 0 0 0.5em;
1644	white-space: pre-wrap;
1645}
1646
1647.markdown table {
1648	border-collapse: collapse;
1649	margin-bottom: 5px;
1650}
1651
1652.markdown th {
1653	font-weight: bold;
1654}
1655
1656.markdown td,
1657.markdown th {
1658	border: solid thin #000;
1659	padding: 3px;
1660}
1661
1662.odometer {
1663	font-family: courier, monospace;
1664	font-weight: bold;
1665	background: #000;
1666	color: #fff;
1667}
1668
1669/* ======== Indi tabs ======== */
1670/* Facts & Events tab */
1671.media-display-image {
1672	float: left;
1673}
1674
1675.media-display-title {
1676	float: left;
1677	font-style: italic;
1678	margin: 10px;
1679}
1680
1681/* === jQuery.datatable styling general over-rides === */
1682.odd {
1683	background-color: lightgray;
1684}
1685
1686.even {
1687	background-color: #fafafa;
1688}
1689
1690.css_right {
1691	float: left;
1692}
1693
1694.fg-button {
1695	padding: 2px 6px;
1696}
1697
1698/* Sidebar - Family navigator */
1699.wt-family-navigator-dropdown-heading {
1700	font-weight: bold;
1701	font-size: inherit;
1702	color: inherit;
1703}
1704
1705/* Sidebar - Descendants */
1706#sb_content_descendancy {
1707	margin-top: 2px;
1708}
1709
1710#sb_desc_content {
1711	margin-left: 3px;
1712	font-size: 0.8em;
1713}
1714
1715#sb_desc_content ul {
1716	padding: 0;
1717	margin: 0;
1718}
1719
1720.sb_desc_indi_li {
1721	list-style-type: none;
1722}
1723
1724.desc_tree_div {
1725	display: none;
1726}
1727
1728.desc_tree_div ul {
1729	padding: 0;
1730	margin-left: 10px;
1731	margin-top: 0;
1732	margin-right: 0;
1733}
1734
1735/* Individuals and Families */
1736#sidebar-content-individuals,
1737#sidebar-content-families {
1738	margin-top: 2px;
1739}
1740
1741.sb_indi_surname_li,
1742.sb_fam_surname_li {
1743	list-style-image: url(colors/images/plus.png);
1744}
1745
1746.name_tree_div ul {
1747	padding: 0;
1748	margin: 0;
1749}
1750
1751.name_tree_div li {
1752	list-style: none;
1753	margin: 0;
1754	padding: 0;
1755}
1756
1757/* Clippings */
1758#sb_clippings_content ul {
1759	padding: 0;
1760	margin: 0;
1761}
1762
1763#sb_clippings_content li {
1764	list-style: none;
1765	margin: 0;
1766	padding: 0;
1767	white-space: nowrap;
1768}
1769
1770/* Extra info */
1771#sb_content_extra_info {
1772	font-size: 80%;
1773	font-weight: bold;
1774	margin-top: 1px;
1775	overflow: hidden;
1776	padding: 5px;
1777}
1778
1779#sb_content_extra_info .editfacts {
1780	float: right;
1781	margin-top: -30px;
1782}
1783
1784#sb_content_extra_info a {
1785	display: block;
1786}
1787
1788#sb_content_extra_info span {
1789	font-weight: normal;
1790}
1791
1792#sb_content_extra_info span a {
1793	display: inline;
1794}
1795
1796#sb_content_extra_info #hitcounter {
1797	border-top: 1px solid #b2c7d7;
1798	font-weight: bold;
1799	padding-top: 5px;
1800}
1801
1802/* http://www.jacklmoore.com/colorbox */
1803#colorbox,
1804#cboxOverlay,
1805#cboxWrapper {
1806	position: absolute;
1807	top: 0;
1808	left: 0;
1809	z-index: 9999;
1810	overflow: hidden;
1811}
1812
1813#cboxWrapper {
1814	max-width: none;
1815}
1816
1817#cboxOverlay {
1818	position: fixed;
1819	width: 100%;
1820	height: 100%;
1821	background: #fff;
1822}
1823
1824#cboxContent {
1825	background: #fff;
1826	overflow: hidden;
1827	position: relative;
1828	padding: 0.5rem;
1829	border: 0.25rem solid #ccc;
1830}
1831
1832#cboxLoadingOverlay,
1833#cboxLoadingGraphic {
1834	position: absolute;
1835	top: 0;
1836	left: 0;
1837	width: 100%;
1838	height: 100%;
1839}
1840
1841.cboxPhoto {
1842	float: left;
1843	margin: auto;
1844	border: 0;
1845	display: block;
1846	max-width: none;
1847}
1848
1849#colorbox,
1850#cboxContent,
1851#cboxLoadedContent {
1852	box-sizing: content-box;
1853}
1854
1855#cboxError {
1856	padding: 50px;
1857	border: 1px solid #ccc;
1858}
1859
1860#cboxLoadedContent {
1861	margin-bottom: 28px;
1862}
1863
1864#cboxTitle {
1865	background: #fff;
1866	position: absolute;
1867	bottom: 0.25rem;
1868	left: 0;
1869	margin: 0 3rem;
1870	text-align: center;
1871}
1872
1873#cboxLoadingGraphic {
1874	background: url(images/loading-32x32.gif) no-repeat center center;
1875}
1876
1877#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
1878	background: none;
1879	border: 0;
1880	cursor: pointer;
1881	font-family: "Font Awesome\ 5 Free", sans-serif;
1882	font-weight: 900;
1883	overflow: visible;
1884	padding: 0;
1885	position: absolute;
1886}
1887
1888#cboxSlideshow {
1889	bottom: 0.25rem;
1890	right: 0.25rem;
1891}
1892
1893#cboxPrevious {
1894	bottom: 0.25rem;
1895	left: 0.25rem;
1896}
1897
1898#cboxNext {
1899	bottom: 0.25rem;
1900	left: 1.5rem;
1901}
1902
1903#cboxClose {
1904	top: 0.25rem;
1905	right: 0.25rem;
1906}
1907
1908/* Stories module */
1909.story_title {
1910	padding-top: 12px;
1911	font-size: 13px;
1912	height: 32px;
1913	font-weight: bold;
1914}
1915
1916.story_body {
1917	padding: 20px;
1918	white-space: normal;
1919}
1920
1921.story_edit {
1922	padding: 12px;
1923}
1924
1925/* ====== Charts Styles ======== */
1926#people label {
1927	display: block;
1928}
1929
1930/* Ancestry chart */
1931.wt-chart-ancestors-list {
1932	background: transparent url(images/vline.png) left top repeat-y;
1933	margin: 0 0 0 15px;
1934	padding: 0;
1935	display: block;
1936}
1937
1938.wt-chart-ancestors-list-item {
1939	margin: 5px 0;
1940}
1941
1942.chart_common li {
1943	list-style: outside none none;
1944}
1945
1946.generations {
1947	background: transparent url(images/vline.png) repeat-y scroll left top;
1948	display: block;
1949	margin: 0 0 0 15px;
1950	padding: 0;
1951}
1952
1953.chart_common table {
1954	padding: 0;
1955	border-spacing: 0;
1956	border-collapse: collapse;
1957	margin: 5px 0;
1958}
1959
1960.chart_common td {
1961	border: 0;
1962	padding: 0;
1963}
1964
1965.chart_common span.details1 div[class^=fact_] {
1966	display: inline-block;
1967}
1968
1969.chart_common span.details1 .date {
1970	color: inherit;
1971}
1972
1973/*-- Family book  --*/
1974#familybook_chart {
1975	margin-left: 10px;
1976}
1977
1978#familybook_chart table {
1979	border-collapse: collapse;
1980	empty-cells: show;
1981}
1982
1983#familybook_chart td {
1984	margin: 0;
1985	padding: 0;
1986}
1987
1988#familybook_chart h2 {
1989	text-align: center;
1990}
1991
1992#familybook_chart .line3,
1993#familybook_chart .pvline,
1994#familybook_chart .spacer {
1995	width: 3px;
1996}
1997
1998#familybook_chart .line4 {
1999	width: 7px;
2000	vertical-align: middle;
2001}
2002
2003[ID^="vline"] {
2004	width: 3px;
2005}
2006
2007#familybook_chart h3 {
2008	color: #333;
2009	font-size: 16px;
2010	text-align: center;
2011}
2012
2013/*-- Fan chart ---- */
2014.fan_chart_menu {
2015	background: #fff;
2016	position: absolute;
2017	display: none;
2018	z-index: 100;
2019}
2020
2021#fan_chart ul {
2022	list-style-type: none;
2023	margin: 0;
2024}
2025
2026/* Lifespans chart */
2027.wt-lifespans-subtitle {
2028	text-align: center;
2029}
2030
2031.wt-lifespans-scale {
2032	white-space: nowrap;
2033}
2034
2035.wt-lifespans-decade {
2036	width: 70px;
2037	height: 60px;
2038	display: inline-block;
2039	background-image: url(images/lifespan-decade.png);
2040	background-position-y: bottom;
2041	background-repeat: no-repeat;
2042	background-size: 70px 37px;
2043}
2044
2045.wt-lifespans-individuals {
2046	background: #fafafa;
2047}
2048
2049.wt-lifespans-individual {
2050
2051}
2052
2053.wt-lifespans-summary {
2054	background: #ffffff;
2055	border: thin solid #000;
2056	z-index: 1;
2057}
2058
2059.wt-lifespans-summary-link {
2060	font-weight: bold;
2061}
2062
2063/*-- Pedigree ---- */
2064#pedigree_chart {
2065	position: relative;
2066	margin: 20px auto;
2067}
2068
2069#pedigree_canvas {
2070	color:   #81a9cb;
2071	z-index: -1000;
2072}
2073
2074#pedigree-page .shadow {
2075	position: absolute;
2076	white-space: nowrap;
2077}
2078
2079#pedigree-page .layout0 .shadow > div,
2080#pedigree-page .layout1 .shadow > div {
2081	display: inline-block;
2082	vertical-align: middle;
2083}
2084
2085#pedigree-page .spacer {
2086	background-image: url(images/spacer.png);
2087	height:           20px;
2088	width:            1px;
2089}
2090
2091#childarrow,
2092.ancestorarrow {
2093	text-align: center;
2094}
2095
2096#pedigree-page #childarrow {
2097	position: relative;
2098}
2099
2100#pedigree-page #childbox {
2101	border:           1px solid;
2102	background-color: #fff;
2103}
2104
2105#pedigree-page table.list_table {
2106	margin: 0 auto;
2107	width:  500px;
2108}
2109
2110.pedigree_chart_table {
2111	border:          0;
2112	border-collapse: collapse;
2113	padding:         0;
2114	width:           100%;
2115}
2116
2117/*-- timeline  --*/
2118#timeline_chart {
2119	position: relative;
2120	top: 0;
2121	left: 0;
2122}
2123
2124#field_table {
2125	width: 30%;
2126	min-width: 500px;
2127	border: 1px solid #ddd;
2128}
2129
2130[class^="icon-"],
2131[class*=" icon-"] {
2132	display: inline-block;
2133	vertical-align: middle;
2134	background-repeat: no-repeat;
2135}
2136
2137.icon-add {
2138	width: 14px;
2139	height: 15px;
2140	background-image: url(images/add.png);
2141}
2142
2143.icon-cfamily {
2144	width: 32px;
2145	height: 32px;
2146	background-image: url(colors/images/cfamily.png);
2147}
2148
2149.icon-childless {
2150	width: 25px;
2151	height: 25px;
2152	background-image: url(colors/images/childless.png);
2153}
2154
2155.icon-children {
2156	width: 16px;
2157	height: 16px;
2158	background-image: url(colors/images/children.png);
2159}
2160
2161.icon-clippings {
2162	width: 32px;
2163	height: 32px;
2164	background-image: url(colors/images/clippings.png);
2165}
2166
2167.icon-edit_indi {
2168	width: 22px;
2169	height: 22px;
2170	background-image: url(colors/images/edit_indi.png);
2171}
2172
2173.icon-fam-list {
2174	width: 32px;
2175	height: 32px;
2176	background-image: url(colors/images/sfamily.png);
2177}
2178
2179.icon-indi-list {
2180	width: 32px;
2181	height: 32px;
2182	background-image: url(colors/images/indis.png);
2183}
2184
2185.icon-loading-small {
2186	width: 16px;
2187	height: 16px;
2188	background-image: url(colors/images/indicator.gif);
2189}
2190
2191.icon-media {
2192	width: 32px;
2193	height: 32px;
2194	background-image: url(colors/images/media.png);
2195}
2196
2197.icon-media-list {
2198	width: 32px;
2199	height: 32px;
2200	background-image: url(colors/images/media.png);
2201}
2202
2203.icon-media-next {
2204	width: 20px;
2205	height: 20px;
2206	background-image: url(colors/images/rdarrow.png);
2207}
2208
2209.icon-media-play {
2210	width: 20px;
2211	height: 20px;
2212	background-image: url(colors/images/rarrow.png);
2213}
2214
2215.icon-media-stop {
2216	width: 20px;
2217	height: 20px;
2218	background-image: url(colors/images/stop.png);
2219}
2220
2221.icon-minus {
2222	width: 11px;
2223	height: 11px;
2224	background-image: url(colors/images/minus.png);
2225}
2226
2227.icon-mypage {
2228	width: 22px;
2229	height: 25px;
2230	background-image: url(colors/images/mypage.png);
2231}
2232
2233.icon-note {
2234	width: 33px;
2235	height: 35px;
2236	background-image: url(colors/icons/note.png);
2237}
2238
2239.icon-plus {
2240	width: 11px;
2241	height: 11px;
2242	background-image: url(colors/images/plus.png);
2243}
2244
2245.icon-remove {
2246	width: 16px;
2247	height: 16px;
2248	background-image: url(colors/images/delete.png);
2249}
2250
2251.icon-resn-confidential {
2252	width: 16px;
2253	height: 16px;
2254	background-image: url(colors/images/resn_confidential.png);
2255}
2256
2257.icon-resn-locked {
2258	width: 16px;
2259	height: 16px;
2260	background-image: url(colors/images/resn_locked.png);
2261}
2262
2263.icon-resn-none {
2264	width: 16px;
2265	height: 16px;
2266	background-image: url(colors/images/resn_none.png);
2267}
2268
2269.icon-resn-privacy {
2270	width: 16px;
2271	height: 16px;
2272	background-image: url(colors/images/resn_privacy.png);
2273}
2274
2275.icon-rings {
2276	width: 9px;
2277	height: 9px;
2278	background-image: url(colors/images/rings.png);
2279}
2280
2281.icon-selected {
2282	width: 12px;
2283	height: 12px;
2284	background-image: url(colors/images/selected.png);
2285}
2286
2287
2288.icon-source {
2289	width: 32px;
2290	height: 32px;
2291	background-image: url(colors/images/source.png);
2292}
2293
2294/* Silhouettes on charts */
2295.icon-silhouette-F {
2296	width: 37px;
2297	height: 45px;
2298	background-image: url(colors/images/silhouette_female_small.png);
2299}
2300
2301.icon-silhouette-M {
2302	width: 37px;
2303	height: 45px;
2304	background-image: url(colors/images/silhouette_male_small.png);
2305}
2306
2307.icon-silhouette-U {
2308	width: 37px;
2309	height: 45px;
2310	background-image: url(colors/images/silhouette_unknown_small.png);
2311}
2312
2313/*
2314 * Any element that is loaded dynamically has the class wt-ajax-load.
2315 * We can provide a "loading" placeholder for empty elements with this class.
2316 */
2317.wt-ajax-load:empty {
2318}
2319
2320/*
2321 * Default icons are provided by FontAwesome.
2322 * Some icons get mirrored on RTL pages.  Typiclly arrows
2323 */
2324[dir=rtl] .wt-flip-rtl {
2325}
2326
2327.wt-icon-anniversary {
2328}
2329
2330.wt-icon-arrow-down {
2331	content: url(colors/icons/arrow-down.png);
2332}
2333
2334a > .wt-icon-arrow-down:hover {
2335	content: url(colors/icons/arrow-down-hover.png);
2336}
2337
2338.wt-icon-arrow-left {
2339	content: url(colors/icons/arrow-left.png);
2340}
2341
2342a > .wt-icon-arrow-left:hover {
2343	content: url(colors/icons/arrow-left-hover.png);
2344}
2345
2346.wt-icon-arrow-right {
2347	content: url(colors/icons/arrow-right.png);
2348}
2349
2350a > .wt-icon-arrow-right:hover {
2351	content: url(colors/icons/arrow-right-hover.png);
2352}
2353
2354.wt-icon-arrow-up {
2355	content: url(colors/icons/arrow-up.png);
2356}
2357
2358a > .wt-icon-arrow-up:hover {
2359	content: url(colors/icons/arrow-up-hover.png);
2360}
2361
2362.wt-icon-coordinates {
2363}
2364
2365.wt-icon-reorder {
2366}
2367
2368.wt-icon-sex-f {
2369}
2370
2371.wt-icon-sex-m {
2372}
2373
2374.wt-icon-sex-u {
2375}
2376
2377.wt-icon-sex-x {
2378}
2379
2380.wt-icon-warning {
2381}
2382
2383.wt-icon-zoom-in {
2384	content: url(colors/images/zoomin.png);
2385}
2386
2387.wt-icon-zoom-out {
2388	content: url(colors/images/zoomout.png);
2389}
2390
2391/*
2392 * .wt-icon-bing-maps
2393 * .wt-icon-calendar
2394 * .wt-icon-copy
2395 * .wt-icon-delete
2396 * .wt-icon-edit
2397 * .wt-icon-email
2398 * .wt-icon-family
2399 * .wt-icon-help
2400 * .wt-icon-individual
2401 * .wt-icon-google-maps
2402 * .wt-icon-keyboard
2403 * .wt-icon-media
2404 * .wt-icon-note
2405 * .wt-icon-openstreetmap
2406 * .wt-icon-preferences
2407 * .wt-icon-repository
2408 * .wt-icon-source
2409 * .wt-icon-submitter
2410 */
2411.wt-icon-bing-maps::before {
2412	width: 16px;
2413	height: 16px;
2414	content: url(colors/icons/bing-maps.png);
2415}
2416
2417.wt-icon-calendar::before {
2418	width: 19px;
2419	height: 15px;
2420	content: url(colors/icons/calendar.png)
2421}
2422
2423.wt-icon-copy::before {
2424	width: 16px;
2425	height: 16px;
2426	content: url(colors/icons/copy.png)
2427}
2428
2429.wt-icon-delete::before {
2430	width: 16px;
2431	height: 16px;
2432	content: url(colors/icons/delete.png);
2433}
2434
2435.wt-icon-edit::before {
2436	width: 16px;
2437	height: 16px;
2438	content: url(colors/icons/edit.png);
2439}
2440
2441.wt-icon-family::before {
2442	width: 14px;
2443	height: 15px;
2444	content: url(colors/icons/family.png);
2445}
2446
2447.wt-icon-help::before {
2448	width: 16px;
2449	height: 16px;
2450	content: url(colors/icons/help.png);
2451}
2452
2453.wt-icon-google-maps::before {
2454	width: 16px;
2455	height: 16px;
2456	content: url(colors/icons/google-maps.png);
2457}
2458
2459.wt-icon-individual::before {
2460	width: 11px;
2461	height: 15px;
2462	content: url(colors/icons/individual.png);
2463}
2464
2465.wt-icon-keyboard::before {
2466	width: 30px;
2467	height: 15px;
2468	content: url(colors/icons/keyboard.png);
2469}
2470
2471.wt-icon-media::before {
2472	width: 18px;
2473	height: 16px;
2474	content: url(colors/icons/media.png);
2475}
2476
2477.wt-icon-note::before {
2478	width: 20px;
2479	height: 20px;
2480	content: url(colors/icons/note.png);
2481}
2482
2483.wt-icon-openstreetmap::before {
2484	width: 16px;
2485	height: 16px;
2486	content: url(colors/icons/openstreetmap.png);
2487}
2488
2489.wt-icon-preferences::before {
2490	width: 25px;
2491	height: 25px;
2492	content: url(colors/icons/preferences.png);
2493}
2494
2495.wt-icon-repository::before {
2496	width: 15px;
2497	height: 15px;
2498	content: url(colors/icons/repository.png);
2499}
2500
2501.wt-icon-source::before {
2502	width: 18px;
2503	height: 16px;
2504	content: url(colors/icons/source.png);
2505}
2506
2507.wt-icon-submitter::before {
2508	width: 11px;
2509	height: 15px;
2510	content: url(colors/icons/individual.png);
2511}
2512
2513i[class*="wt-icon-media"] {
2514	opacity: 0.5;
2515}
2516
2517.icon-indis {
2518	width: 25px;
2519	height: 25px;
2520	background-image: url(colors/images/mypage.png);
2521}
2522
2523.icon-patriarch {
2524	width: 20px;
2525	height: 20px;
2526	background-image: url(colors/images/patriarch.png);
2527}
2528
2529.icon-pedigree {
2530	width: 25px;
2531	height: 25px;
2532	background-image: url(colors/images/pedigree.png);
2533}
2534
2535.icon-place {
2536	width: 20px;
2537	height: 20px;
2538	background-image: url(colors/images/place.png);
2539}
2540
2541.icon-repo-list {
2542	width: 20px;
2543	height: 20px;
2544	background-image: url(colors/images/repository.png);
2545}
2546
2547.icon-repository {
2548	width: 20px;
2549	height: 20px;
2550	background-image: url(colors/images/repository.png);
2551}
2552
2553.icon-search {
2554	width: 17px;
2555	height: 17px;
2556	background-image: url(colors/images/search.png);
2557}
2558
2559.icon-sfamily {
2560	width: 22px;
2561	height: 22px;
2562	background-image: url(colors/images/sfamily.png);
2563}
2564
2565.icon-source-list {
2566	width: 20px;
2567	height: 20px;
2568	background-image: url(colors/images/source.png);
2569}
2570
2571.icon-user_add {
2572	width: 25px;
2573	height: 25px;
2574	background-image: url(colors/images/user_add.png);
2575}
2576
2577/* Census assistant */
2578.wt-census-assistant-form-control:focus {
2579}
2580
2581/*
2582 * Drag and drop sortable lists
2583 */
2584.wt-sortable-list {
2585}
2586
2587.wt-sortable-item {
2588}
2589
2590/* Some blocks show a reduced version on the right-hand side. */
2591.wt-side-blocks .wt-side-block-optional {
2592	display: none !important;
2593}
2594
2595/* my page chart enhancements */
2596.wt-block-content-charts {
2597	flex-flow: column-reverse;
2598	overflow: auto;
2599}
2600
2601.wt-block-content-todays-events-block {
2602	padding: .25rem;
2603}
2604
2605/* Some charts are wider than the page. */
2606.wt-chart {
2607	overflow-x: auto;
2608	overflow-y: hidden;
2609}
2610
2611/* Fit thumbnail into parent on charts */
2612.select2-selection.select2-selection--single {
2613	min-height: 36px;
2614	height: auto;
2615	padding: 2px 0;
2616}
2617
2618.select2-container .select2-selection--single .select2-selection__rendered {
2619	padding-left: 2px;
2620}
2621
2622.select2-selection--single .NAME {
2623	padding-left: 4px;
2624}
2625
2626/*
2627 *  These selectors control how the short horizontal lines are positioned in the Charts
2628 *  Optimized for Win10 and FF, Chrome and Edge browsers
2629 *  	Ancestors
2630 *  	Descendants
2631 *  	amily book
2632 *  	Hourglass chart
2633 *
2634 */
2635
2636/* Ascentors */
2637.wt-chart-ancestors .linea1 {
2638	margin-bottom: 4px;
2639}
2640
2641.wt-chart-ancestors .linea2 {
2642	margin-bottom: 7px;
2643}
2644
2645.wt-chart-ancestors .linea3 {
2646	margin-bottom: 4px;
2647}
2648
2649.wt-chart-ancestors .linea4 {
2650	margin-bottom: 7px;
2651}
2652
2653.wt-chart-ancestors .linea5 {
2654	vertical-align: top;
2655}
2656
2657/* Descendants */
2658.wt-chart-descendants .lined1 {
2659	margin-bottom: 4px;
2660}
2661
2662.wt-chart-descendants .lined2 {
2663	margin-bottom: 7px;
2664}
2665
2666.wt-chart-descendants .lined3 {
2667	margin-bottom: 4px;
2668}
2669
2670.wt-chart-descendants .lined4 {
2671	margin-bottom: 7px;
2672}
2673
2674.wt-chart-descendants .linea5 {
2675	vertical-align: top;
2676}
2677
2678/* Family book */
2679.linef1 {
2680	margin-bottom: 3px;
2681}
2682
2683.linef2 {
2684	margin-bottom: 3px;
2685}
2686
2687.linef3 {
2688	margin-bottom: 7px;
2689}
2690
2691/* Hourglass */
2692.lineh1 {
2693	margin-bottom: 4px;
2694}
2695
2696.lineh2 {
2697	margin-bottom: 4px;
2698}
2699
2700.lineh3 {
2701	margin-bottom: 7px;
2702}
2703
2704/*
2705 * Pedigree chart
2706 *
2707 * wt-chart, wt-chart-pedigree
2708 */
2709
2710#pedigree_chart {
2711	position: relative;
2712	margin: 20px auto;
2713}
2714
2715#pedigree_canvas {
2716	z-index: -1000;
2717}
2718
2719#childbox-pedigree {
2720	border: 1px solid;
2721	background-color: #fff;
2722}
2723
2724#pedigree-page #childbox-pedigree {
2725	border: 1px solid;
2726	background-color: #fff;
2727}
2728
2729#childbox-pedigree {
2730	padding: 5px;
2731	position: absolute;
2732	display: none;
2733	text-align: start;
2734	white-space: nowrap;
2735	left: auto;
2736	z-index: 9999;
2737}
2738
2739.wt-chart-pedigree, .wt-chart-hourglass {
2740	overflow-y: auto;
2741}
2742
2743.wt-chart-pedigree .spacer {
2744	background-image: url(images/spacer.png);
2745	height: 20px;
2746	width: 1px;
2747}
2748
2749#pedigree-page .shadow {
2750	box-shadow: 0 0 0 !important; /* override vendor css shadow  */
2751}
2752
2753#childarrow,
2754.ancestorarrow {
2755	text-align: center;
2756	display: inline-block;
2757	vertical-align: middle;
2758}
2759
2760.layout3 #childbox-pedigree {
2761	top: auto;
2762}
2763
2764#childbox-pedigree a.name1 {
2765	display: block;
2766	margin-left: 5px;
2767}
2768
2769/*
2770 * Place hierarchy
2771 *
2772 * wt-place-hierarchy-page
2773 */
2774
2775#place-hierarchy ul {
2776	list-style-type: none;
2777}
2778
2779.d-table-cell {
2780	padding-right: 5px;
2781}
2782
2783/*
2784 * Search
2785 *
2786 * wt-search-page, wt-general-search-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page
2787 */
2788
2789/* Some menus (e.g. languages) can be longer than a page */
2790.dropdown-menu {
2791	max-height: 30rem;
2792	overflow-x: hidden;
2793}
2794
2795/* Clipping cart */
2796.clipping-cart h2 {
2797	margin: 20px;
2798	text-align: center;
2799}
2800
2801.clipping-cart .wt-page-options {
2802	max-width: 25rem;
2803}
2804
2805.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar {
2806	font-size: 1rem;
2807}
2808
2809.clipping-cart .add-to {
2810	text-align: left;
2811}
2812
2813/* Forms */
2814.col-form-label {
2815	font-weight: bold;
2816}
2817
2818/* Popups */
2819.popup .nav-link {
2820	display: inline;
2821	vertical-align: top;
2822	padding: 5px;
2823}
2824
2825