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