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