xref: /webtrees/resources/css/xenea.css (revision b8fc901f205cd6af65496b916bf63547a3065a2f)
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-help .nav-link::before {
339	content: url(xenea/menu/help.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(xenea/images/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 * Some icons get mirrored on RTL pages.  Typiclly arrows
1637 */
1638[dir=rtl] .wt-flip-rtl {
1639	transform: scale(-1, 1);
1640}
1641
1642.wt-icon-anniversary {
1643	content: url(images/anniversary.png);
1644}
1645
1646.wt-icon-arrow-down {
1647	content: url(xenea/icons/arrow-down.png);
1648}
1649
1650a > .wt-icon-arrow-down:hover {
1651	content: url(xenea/icons/arrow-down-hover.png);
1652}
1653
1654.wt-icon-arrow-left {
1655	content: url(xenea/icons/arrow-left.png);
1656}
1657
1658a > .wt-icon-arrow-left:hover {
1659	content: url(xenea/icons/arrow-left-hover.png);
1660}
1661
1662.wt-icon-arrow-right {
1663	content: url(xenea/icons/arrow-right.png);
1664}
1665
1666a > .wt-icon-arrow-right:hover {
1667	content: url(xenea/icons/arrow-right-hover.png);
1668}
1669
1670.wt-icon-arrow-up {
1671	content: url(xenea/icons/arrow-up.png);
1672}
1673
1674a > .wt-icon-arrow-up:hover {
1675	content: url(xenea/icons/arrow-up-hover.png);
1676}
1677
1678.wt-icon-collapse {
1679}
1680
1681.wt-icon-coordinates {
1682	content: url(images/coordinates.png)
1683}
1684
1685.wt-icon-expand {
1686}
1687
1688.wt-icon-reorder {
1689	content: url(images/reorder.png);
1690}
1691
1692.wt-icon-sex-f {
1693	content: url(images/sex-female.png);
1694}
1695
1696.wt-icon-sex-m {
1697	content: url(images/sex-male.png);
1698}
1699
1700.wt-icon-sex-u {
1701	content: url(images/sex-unknown.png);
1702}
1703
1704.wt-icon-sex-x {
1705	content: url(images/sex-unknown.png);
1706}
1707
1708.wt-icon-warning {
1709	content: url(images/warning.png);
1710}
1711
1712.wt-icon-zoom-in {
1713	content: url(xenea/images/zoomin.png);
1714}
1715
1716.wt-icon-zoom-out {
1717	content: url(xenea/images/zoomout.png);
1718}
1719
1720/*
1721 * .wt-icon-bing-maps
1722 * .wt-icon-calendar
1723 * .wt-icon-copy
1724 * .wt-icon-delete
1725 * .wt-icon-edit
1726 * .wt-icon-email
1727 * .wt-icon-family
1728 * .wt-icon-help
1729 * .wt-icon-individual
1730 * .wt-icon-google-maps
1731 * .wt-icon-keyboard
1732 * .wt-icon-media
1733 * .wt-icon-note
1734 * .wt-icon-openstreetmap
1735 * .wt-icon-preferences
1736 * .wt-icon-repository
1737 * .wt-icon-source
1738 * .wt-icon-submitter
1739 */
1740.wt-icon-bing-maps::before {
1741	width: 16px;
1742	height: 16px;
1743	content: url(xenea/icons/bing-maps.png);
1744}
1745
1746.wt-icon-calendar::before {
1747	width: 19px;
1748	height: 15px;
1749	content: url(xenea/icons/calendar.png)
1750}
1751
1752.wt-icon-copy::before {
1753	width: 16px;
1754	height: 16px;
1755	content: url(xenea/icons/copy.png)
1756}
1757
1758.wt-icon-delete::before {
1759	width: 16px;
1760	height: 16px;
1761	content: url(xenea/icons/delete.png);
1762}
1763
1764.wt-icon-edit::before {
1765	width: 16px;
1766	height: 16px;
1767	content: url(xenea/icons/edit.png);
1768}
1769
1770.wt-icon-family::before {
1771	width: 14px;
1772	height: 15px;
1773	content: url(xenea/icons/family.png);
1774}
1775
1776.wt-icon-help::before {
1777	width: 16px;
1778	height: 16px;
1779	content: url(xenea/icons/help.png);
1780}
1781
1782.wt-icon-google-maps::before {
1783	width: 16px;
1784	height: 16px;
1785	content: url(xenea/icons/google-maps.png);
1786}
1787
1788.wt-icon-individual::before {
1789	width: 11px;
1790	height: 15px;
1791	content: url(xenea/icons/individual.png);
1792}
1793
1794.wt-icon-keyboard::before {
1795	width: 30px;
1796	height: 15px;
1797	content: url(xenea/icons/keyboard.png);
1798}
1799
1800.wt-icon-media::before {
1801	width: 18px;
1802	height: 16px;
1803	content: url(xenea/icons/media.png);
1804}
1805
1806.wt-icon-note::before {
1807	width: 20px;
1808	height: 20px;
1809	content: url(xenea/icons/note.png);
1810}
1811
1812.wt-icon-openstreetmap::before {
1813	width: 16px;
1814	height: 16px;
1815	content: url(xenea/icons/openstreetmap.png);
1816}
1817
1818.wt-icon-preferences::before {
1819	width: 25px;
1820	height: 25px;
1821	content: url(xenea/icons/preferences.png);
1822}
1823
1824.wt-icon-repository::before {
1825	width: 15px;
1826	height: 15px;
1827	content: url(xenea/icons/repository.png);
1828}
1829
1830.wt-icon-source::before {
1831	width: 18px;
1832	height: 16px;
1833	content: url(xenea/icons/source.png);
1834}
1835
1836.wt-icon-submitter::before {
1837	width: 11px;
1838	height: 15px;
1839	content: url(xenea/icons/individual.png);
1840}
1841
1842[class^="icon-"],
1843[class*=" icon-"] {
1844	display: inline-block;
1845	vertical-align: text-bottom;
1846	background-repeat: no-repeat;
1847	background-size: cover;
1848}
1849
1850.icon-add {
1851	width: 14px;
1852	height: 15px;
1853	background-image: url(images/add.png);
1854}
1855
1856.icon-cfamily {
1857	width: 25px;
1858	height: 25px;
1859	background-image: url(xenea/images/cfamily.png);
1860}
1861
1862.icon-childless {
1863	width: 25px;
1864	height: 25px;
1865	background-image: url(xenea/images/childless.png);
1866}
1867
1868.icon-children {
1869	width: 16px;
1870	height: 16px;
1871	background-image: url(xenea/images/children.png);
1872}
1873
1874.icon-clippings {
1875	width: 22px;
1876	height: 22px;
1877	background-image: url(xenea/images/clippings.png);
1878}
1879
1880.icon-edit_indi {
1881	width: 25px;
1882	height: 25px;
1883	background-image: url(xenea/images/edit_indi.png);
1884}
1885
1886.icon-fam-list {
1887	width: 25px;
1888	height: 25px;
1889	background-image: url(xenea/images/cfamily.png);
1890}
1891
1892.icon-indi-list {
1893	width: 20px;
1894	height: 20px;
1895	background-image: url(xenea/images/indis.png);
1896}
1897
1898.icon-loading-small {
1899	width: 16px;
1900	height: 16px;
1901	background-image: url(xenea/images/indicator.gif);
1902}
1903
1904.icon-media {
1905	width: 20px;
1906	height: 20px;
1907	background-image: url(xenea/images/media.png);
1908}
1909
1910.icon-media-list {
1911	width: 20px;
1912	height: 20px;
1913	background-image: url(xenea/images/media.png);
1914}
1915
1916.icon-media-next {
1917	width: 20px;
1918	height: 20px;
1919	background-image: url(xenea/images/rdarrow.png);
1920}
1921
1922.icon-media-play {
1923	width: 20px;
1924	height: 20px;
1925	background-image: url(xenea/images/rarrow.png);
1926}
1927
1928.icon-media-stop {
1929	width: 20px;
1930	height: 20px;
1931	background-image: url(xenea/images/stop.png);
1932}
1933
1934.icon-minus {
1935	width: 11px;
1936	height: 11px;
1937	background-image: url(xenea/images/minus.png);
1938}
1939
1940.icon-mypage {
1941	width: 24px;
1942	height: 24px;
1943	background-image: url(xenea/images/mypage.png);
1944}
1945
1946.icon-note {
1947	width: 22px;
1948	height: 22px;
1949	background-image: url(xenea/icons/note.png);
1950}
1951
1952.icon-plus {
1953	width: 11px;
1954	height: 11px;
1955	background-image: url(xenea/images/plus.png);
1956}
1957
1958.icon-remove {
1959	width: 20px;
1960	height: 20px;
1961	background-image: url(xenea/images/remove.png);
1962}
1963
1964.icon-resn-confidential {
1965	width: 16px;
1966	height: 16px;
1967	background-image: url(xenea/images/resn_confidential.png);
1968}
1969
1970.icon-resn-locked {
1971	width: 16px;
1972	height: 16px;
1973	background-image: url(xenea/images/resn_locked.png);
1974}
1975
1976.icon-resn-none {
1977	width: 16px;
1978	height: 16px;
1979	background-image: url(xenea/images/resn_none.png);
1980}
1981
1982.icon-resn-privacy {
1983	width: 16px;
1984	height: 16px;
1985	background-image: url(xenea/images/resn_privacy.png);
1986}
1987
1988.icon-rings {
1989	width: 9px;
1990	height: 9px;
1991	background-image: url(xenea/images/rings.png);
1992}
1993
1994.icon-selected {
1995	width: 12px;
1996	height: 12px;
1997	background-image: url(xenea/images/selected.png);
1998}
1999
2000.icon-source {
2001	width: 20px;
2002	height: 20px;
2003	background-image: url(xenea/images/source.png);
2004}
2005
2006/* Silhouettes on charts */
2007.icon-silhouette-F {
2008	width: 37px;
2009	height: 50px;
2010	background-image: url(xenea/images/silhouette_female_small.png);
2011}
2012
2013.icon-silhouette-M {
2014	width: 37px;
2015	height: 50px;
2016	background-image: url(xenea/images/silhouette_male_small.png);
2017}
2018
2019.icon-silhouette-U {
2020	width: 37px;
2021	height: 50px;
2022	background-image: url(xenea/images/silhouette_unknown_small.png);
2023}
2024
2025.icon-indis {
2026	width: 25px;
2027	height: 25px;
2028	background-image: url(xenea/images/indis.png);
2029}
2030
2031.icon-patriarch {
2032	width: 25px;
2033	height: 25px;
2034	background-image: url(xenea/images/patriarch.png);
2035}
2036
2037.icon-pedigree {
2038	width: 25px;
2039	height: 25px;
2040	background-image: url(xenea/images/pedigree.png);
2041}
2042
2043.icon-place {
2044	width: 25px;
2045	height: 25px;
2046	background-image: url(xenea/images/place.png);
2047}
2048
2049.icon-repo-list {
2050	width: 25px;
2051	height: 25px;
2052	background-image: url(xenea/images/repository.png);
2053}
2054
2055.icon-repository {
2056	width: 25px;
2057	height: 25px;
2058	background-image: url(xenea/images/repository.png);
2059}
2060
2061.icon-search {
2062	width: 25px;
2063	height: 25px;
2064	background-image: url(xenea/images/search.png);
2065}
2066
2067.icon-sfamily {
2068	width: 25px;
2069	height: 25px;
2070	background-image: url(xenea/images/sfamily.png);
2071}
2072
2073.icon-source-list {
2074	width: 25px;
2075	height: 25px;
2076	background-image: url(xenea/images/source.png);
2077}
2078
2079.icon-user_add {
2080	width: 25px;
2081	height: 25px;
2082	background-image: url(xenea/images/user_add.png);
2083}
2084
2085/* Census assistant */
2086.wt-census-assistant-form-control:focus {
2087	min-width: 12rem;
2088}
2089
2090/*
2091 * Drag and drop sortable lists
2092 */
2093.wt-sortable-list {
2094}
2095
2096.wt-sortable-item {
2097	cursor: move;
2098}
2099
2100/* Some blocks show a reduced version on the right-hand side. */
2101.wt-side-blocks .wt-side-block-optional {
2102	display: none !important;
2103}
2104
2105/* my page chart enhancements */
2106.wt-block-content-charts {
2107	flex-flow: column-reverse;
2108	overflow: auto;
2109}
2110
2111.wt-block-content-todays-events-block {
2112	padding: .25rem;
2113}
2114
2115/* Some charts are wider than the page. */
2116.wt-chart {
2117	overflow-x: auto;
2118	overflow-y: hidden;
2119}
2120
2121/* Fit thumbnail into parent on charts */
2122.select2-selection.select2-selection--single {
2123	min-height: 36px;
2124	height: auto;
2125	padding: 2px 0;
2126}
2127
2128.select2-container .select2-selection--single .select2-selection__rendered {
2129	padding-left: 2px;
2130}
2131
2132.select2-selection--single .NAME {
2133	padding-left: 4px;
2134}
2135
2136/*
2137 * Place hierarchy
2138 *
2139 * wt-place-hierarchy-page
2140 */
2141
2142#place-hierarchy ul {
2143	list-style-type: none;
2144}
2145
2146.d-table-cell {
2147	padding-right: 5px;
2148}
2149
2150/* Some menus (e.g. languages) can be longer than a page */
2151.dropdown-menu {
2152	max-height: 30rem;
2153	overflow-x: hidden;
2154}
2155
2156/* Forms */
2157.col-form-label {
2158	font-weight: bold;
2159}
2160