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