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