xref: /webtrees/resources/css/minimal.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 minimal 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: #888888;
28  --sex-m-fg: #888888;
29  --sex-u-fg: #888888;
30  --sex-f-bg: #ffffff;
31  --sex-m-bg: #ffffff;
32  --sex-u-bg: #ffffff;
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	/* Avoid extremes of black and white.  It is better for users with dyslexia. */
90	color: #0a0a0a;
91	background-color: #f9f9f9;
92}
93
94.wt-header-wrapper {
95}
96
97.wt-header-container {
98	margin-top: 1rem;
99}
100
101.wt-header-content {
102}
103
104.wt-accessibility-links {
105}
106
107.wt-site-logo {
108	display: none;
109}
110
111.wt-site-title {
112	order: 1;
113	flex: 1 1 0;
114	font-size: 1.75rem;
115}
116
117.wt-header-search {
118	order: 3;
119	flex: 0 0 15rem;
120}
121
122.wt-header-search-form {
123}
124
125.wt-header-search-field {
126}
127
128.wt-header-search-button {
129}
130
131.wt-secondary-navigation {
132	order: 2;
133	flex: 0 0 0;
134	white-space: nowrap;
135}
136
137.wt-user-menu {
138	flex-wrap: nowrap;
139}
140
141.wt-user-menu .nav-link {
142	padding: 0.5rem;
143}
144
145.wt-primary-navigation {
146	order: 4;
147	/* Extend to full page width */
148	flex: 0 1 100vw;
149	max-width: 100vw;
150	/* Recalculate margins for content */
151	margin: 0 calc(50% - 50vw);
152	padding: 0 calc(50vw - 50%);
153	border-bottom: 2px solid #aaa;
154}
155
156.wt-genealogy-menu {
157	justify-content: center;
158}
159
160.wt-genealogy-menu .nav-link {
161	padding: 0.5rem;
162}
163
164.wt-main-container {
165	/* Space between the header/footer and the main content. */
166	padding-top: 1rem;
167	padding-bottom: 1rem;
168}
169
170.wt-main {
171}
172
173.wt-messages {
174}
175
176.wt-page-title {
177	text-align: center;
178}
179
180.wt-page-content {
181	margin-top: 1rem;
182}
183
184.wt-footers {
185}
186
187.wt-footer {
188}
189
190.wt-footer-contact {
191}
192
193.wt-footer-cookies {
194	background: #aaa;
195	color: #fff;
196	transition: height 0.5s;
197}
198
199.wt-footer-page-views {
200}
201
202.wt-footer-powered-by {
203}
204
205.wt-footer-powered-by-webtrees {
206}
207
208/*
209 * The tree/user home pages
210 *
211 * wt-home-page / wt-user-page
212 * +---wt-main-blocks
213 * |   +---wt-block, wt-block-AAA
214 * |   +---wt-block, wt-block-BBB
215 * |   +---wt-block, wt-block-CCC
216 * +---wt-side-blocks
217 *     +---wt-block, wt-block-XXX
218 *     +---wt-block, wt-block-YYY
219 *     +---wt-block, wt-block-ZZZ
220 *
221 * Each block as the structure
222 * wt-block, wt-block-XXX
223 * +---wt-block-header, wt-block-header-XXX
224 * +---wt-block-content, wt-block-content-XXX
225 */
226
227.wt-block {
228	border: solid #000 1px;
229}
230
231.wt-block-header {
232	background-color: #fff;
233}
234
235.wt-block-content {
236}
237
238.wt-block-content .list_table {
239	border-spacing: 1px;
240	border: solid #000 1px;
241	border-right: 0;
242}
243
244.wt-block-content .list_value,
245.wt-block-content .list_value_wrap {
246	border: 0;
247	border-top: solid #000 1px;
248	border-right: solid #000 1px;
249}
250
251/*
252 * The individual page.
253 *
254 * wt-route-individual
255 * +---wt-header-wrapper
256 */
257
258.wt-individual-silhouette {
259	content: url(images/individual-silhouette-unknown.png);
260}
261
262.wt-individual-silhouette-f {
263	content: url(images/individual-silhouette-female.png);
264}
265
266.wt-individual-silhouette-m {
267	content: url(images/individual-silhouette-male.png);
268}
269
270/*
271 * Chart-boxes are used to build the various charts.
272 * Each type of chart will set its own size and hide/show content.
273 *
274 * wt-chart-box
275 * +--- wt-chart-box-thumbnail
276 * +--- wt-chart-box-extra
277 *      +--- wt-chart-box-zoom
278 *           +--- wt-chart-box-icon
279 *           +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown
280 *      +--- wt-chart-box-links
281 *           +--- wt-chart-box-icon
282 *           +--- wt-chart-box-dropdown wt-chart-box-links-dropdown
283 * +--- wt-chart-box-name
284 * +--- wt-chart-box-lifespan
285 * +--- wt-chart-box-facts
286 *     +--- wt-chart-box-fact
287 */
288.wt-chart-box,
289.wt-chart-box-menu {
290	background: var(--sex-u-bg);
291	border: dashed var(--sex-u-fg) thin;
292}
293
294.wt-chart-box {
295	height: 5rem;
296	padding: 2px;
297	line-height: 1.1;
298}
299
300.wt-chart-box-f,
301.wt-chart-box-f .wt-chart-box-dropdown {
302	background: var(--sex-f-bg);
303	border: solid var(--sex-f-fg) thin;
304}
305
306.wt-chart-box-m,
307.wt-chart-box-m .wt-chart-box-dropdown {
308	background: var(--sex-m-bg);
309	border: solid var(--sex-m-fg) thin;
310}
311
312/* ---Pending edits--- */
313.wt-new {
314	outline: solid thin blue;
315}
316
317.wt-old {
318	outline: solid thin red;
319}
320
321.list_value,
322.list_value_wrap {
323	border: solid #000 1px;
324	vertical-align: top;
325	padding: 4px;
326}
327
328/* ---Find special characters--- */
329
330.gedcom_favorites_block,
331.user_favorites_block {
332	overflow: visible !important;
333}
334
335.list_table {
336	margin: 0 auto;
337}
338
339#reportengine-page .report-type {
340	overflow: hidden;
341	margin: auto;
342	width: 180px;
343}
344
345#reportengine-page .report-type div {
346	float: left;
347	margin: 0 20px;
348}
349
350#reportengine-page .report-type p {
351	margin: 0;
352	text-align: center;
353}
354
355/* ======== List styles ====== */
356.source-list,
357.note-list,
358.repo-list,
359.media-list,
360.indi-list,
361.fam-list {
362	margin: 5px auto;
363	width: 98%;
364}
365
366.recent_changes_block,
367.upcoming_events_block,
368.todays_events_block,
369.todo_block {
370	width: 98%;
371}
372
373.surname-list,
374.givn-list {
375	margin: 5px auto;
376}
377
378.source-list table,
379.note-list table,
380.repo-list table,
381.media-list table,
382.indi-list table,
383.fam-list table {
384	width: 100%;
385}
386
387.source-list td,
388.note-list td,
389.repo-list td,
390.media-list td,
391.indi-list td,
392.fam-list td,
393.recent_changes_block td,
394.upcoming_events_block td,
395.surname-list td,
396.givn-list td {
397	padding: 2px 5px;
398}
399
400.indi-list td,
401.fam-list td {
402	color: #555;
403}
404
405.surname-list td {
406	vertical-align: top;
407}
408
409.indi-list .stats,
410.fam-list .stats {
411	margin: 0 auto;
412	width: auto;
413}
414
415.source-list th,
416.note-list th,
417.repo-list th,
418.media-list th,
419.indi-list th,
420.fam-list th,
421.wt-table-changes th,
422.wt-table-events th,
423.wt-table-tasks th,
424.wt-table-yahrzeits th,
425.surname-list th,
426.givn-list th {
427	cursor: pointer;
428	font-weight: 600;
429	padding: 2px 4px;
430	white-space: nowrap;
431}
432
433.source-list th:last-child,
434.note-list th:last-child,
435.repo-list th:last-child {
436	margin: 0 -2px 1px 1px;
437	padding: 3px 0 4px;
438	width: 24px;
439}
440
441.givn-list th {
442	cursor: pointer;
443	white-space: nowrap;
444	padding: 2px;
445	text-align: center;
446}
447
448#source-details h2,
449#sourcelist-page h2,
450#note-details h2,
451#notelist-page h2,
452#repo-details h2,
453#repolist-page h2,
454#media-details h2,
455#statistics-page h2 {
456	margin-bottom: 20px;
457	text-align: center;
458}
459
460#source-tabs,
461#note-tabs,
462#repo-tabs,
463#media-tabs {
464	visibility: hidden;
465}
466
467#statistics_chart {
468	visibility: hidden;
469}
470
471#source-edit,
472#note-edit,
473#repo-edit,
474#media-edit {
475	overflow-x: auto;
476}
477
478.media-list td img {
479	display: block;
480	height: 40px;
481	width: auto;
482	margin: 3px auto;
483}
484
485.filtersH,
486.filtersF {
487	margin: 4px;
488}
489
490.filtersH img {
491	margin-bottom: 2px;
492}
493
494.list-charts {
495	text-align: center;
496}
497
498#search-result-tabs,
499#places-tabs {
500	margin: auto;
501	width: 98%;
502	visibility: hidden;
503}
504
505#search-result-tabs h3 {
506	text-align: center;
507}
508
509#searchAccordion-indi,
510#searchAccordion-fam,
511#searchAccordion-source,
512#searchAccordion-note {
513	margin: auto;
514	width: 99%;
515}
516
517#place-hierarchy h2,
518#place-hierarchy h4 {
519	text-align: center;
520}
521
522/* ======== Block styles ===== */
523#index_main_blocks {
524	clear: none;
525	width: 60%;
526	float: left;
527}
528
529#index_small_blocks {
530	clear: none;
531	width: 40%;
532	float: right;
533}
534
535#index_full_blocks {
536	clear: none;
537	width: 100%;
538}
539
540.block {
541	background-color: #fff;
542	color: #555;
543	border: solid #ccc 1px;
544	padding: 3px;
545	vertical-align: top;
546}
547
548.blockcontent {
549	margin: 5px;
550	overflow: auto;
551}
552
553.blockcontent .list_table {
554	border-spacing: 0;
555	border: solid #555 1px;
556	border-right: 0;
557}
558
559.blockcontent .list_value,
560.blockcontent .list_value_wrap {
561	border: 0;
562	border-top: solid #555 1px;
563	border-right: solid #555 1px;
564}
565
566.blockheader {
567	font-weight: bold;
568}
569
570/* end Block styles */
571
572#main_select,
573#available_select,
574#right_select {
575	min-width: 150px;
576}
577
578.user_welcome_block table,
579.gedcom_block_block table {
580	margin: auto;
581}
582
583.user_welcome_block td,
584.gedcom_block_block td {
585	width: 33%;
586	text-align: center;
587	vertical-align: top;
588}
589
590.user_welcome_block i,
591.gedcom_block_block i {
592	background-image: none;
593	height: 0;
594	width: 0;
595}
596
597/* === Who is online block === */
598.logged_in_list {
599	margin: 5px 0 0;
600	padding: 0;
601	line-height: 20px;
602}
603
604/* Table of genealogical facts */
605
606.wt-facts-table caption {
607	caption-side: top;
608}
609
610.wt-facts-table th {
611	border: 1px solid #000;
612	font-weight: normal;
613	min-width: 20%;
614}
615
616.wt-facts-table td {
617	border: solid #000 1px;
618}
619
620a {
621	color: #333;
622	text-decoration: none;
623}
624
625a:hover {
626	color: #333;
627	text-decoration: underline;
628}
629
630a:hover {
631    text-decoration: underline!important;
632}
633
634/* ==== Theme select block === */
635.theme_form ul {
636	margin: -10px auto;
637}
638
639.theme_form li {
640	visibility: hidden;
641}
642
643.theme_form li ul li {
644	display: inline-block;
645	padding: 10px;
646	visibility: visible;
647}
648
649/* ==== FAQ table styles ===== */
650table.faq {
651	background-color: #ddd;
652	margin: 5px 0 50px 5px;
653	width: 98%;
654}
655
656table.faq tr:nth-child(odd) td {
657	background-color: #fff;
658}
659
660div.faq_title {
661	background-color: #ddd;
662	margin: 1em 0;
663	padding: .25em;
664	font-weight: bold;
665	width: 98%;
666}
667
668div.faq_body {
669	clear: both;
670	padding: 0 1em;
671}
672
673.faq_top {
674	float: right;
675}
676
677/* === Positioning edit, copy, delete links === */
678/* General use */
679.editfacts {
680	clear: left;
681	padding-top: 15px;
682}
683
684/* ======== Indi header ====== */
685#indi_header {
686	overflow: hidden;
687	margin: 0 4px 5px;
688	width: 98%;
689}
690
691#indi_header h3 {
692	color: #555;
693	font-size: 90%;
694	font-weight: bold;
695	margin: 0;
696	padding: 0 10px 0 30px;
697	text-align: left;
698	overflow: hidden;
699	position: relative;
700}
701
702#indi_header .name_one {
703	font-size: 1.5em;
704}
705
706#indi_header h3 .details1 {
707	font-size: 1.0em;
708	border: 1px solid #888;
709}
710
711#indi_header h3 .header_age {
712	padding: 5px 0 5px 5px;
713	color: #666;
714	float: right;
715	font-weight: normal;
716	font-size: 65%;
717}
718
719#indi_header h3 a {
720	display: inline;
721}
722
723#indi_header a {
724	font-weight: normal;
725}
726
727#indi_header a:hover {
728	color: #333;
729}
730
731#indi_mainimage {
732	float: right;
733}
734
735#header_accordion1 {
736	padding: 0 10px 0 0;
737	overflow: hidden;
738}
739
740#header_accordion1 .indi_name_details {
741	background: none #fff;
742	border: 0;
743	margin: 0;
744	overflow: hidden;
745	padding: 5px;
746}
747
748.indi_name_details .name1 {
749	font-weight: normal;
750	padding-top: 5px;
751	font-size: inherit;
752}
753
754#indi_header a.warning {
755	color: #f00;
756	font-size: 1em;
757}
758
759#indi_note {
760	margin: 0 0 5px;
761}
762
763.indi_table {
764	clear: left;
765}
766
767#sex {
768	float: right;
769}
770
771#dates {
772	color: #666;
773	float: right;
774}
775
776.label {
777	font-weight: bold;
778}
779
780#individual-names .wt-icon-edit,
781#individual-names .wt-icon-delete {
782	float: right;
783}
784
785#indi_note .fact_NOTE {
786	float: left;
787	margin: 0 5px 0 0;
788}
789
790#indi_note .fact_SOUR {
791	margin: 3px 0;
792}
793
794#indi_note .fact_SOUR a {
795	font-size: 100%;
796}
797
798#indi_note .fact_NOTE,
799#indi_note .fact_SOUR {
800	clear: both;
801}
802
803/* markdown formatting */
804
805.markdown {
806	/* Tables and pre-formatted text can break the layout. */
807	overflow-x: auto;
808}
809
810.markdown p {
811	margin: 0 0 0.5em;
812	white-space: pre-wrap;
813}
814
815.markdown table {
816	border-collapse: collapse;
817	font-size: 10px;
818	margin-bottom: 5px;
819}
820
821.markdown th {
822	font-weight: bold;
823}
824
825.markdown td,
826.markdown th {
827	border: solid thin #000;
828	padding: 3px;
829}
830
831.odometer {
832	font-family: courier, monospace;
833	font-weight: bold;
834	background: #000;
835	color: #fff;
836}
837
838/* ======== Indi tabs ======== */
839/* Facts & Events tab */
840.media-display-image {
841	float: left;
842}
843
844.media-display-title {
845	float: left;
846	font-style: italic;
847	margin: 10px;
848}
849
850.upcoming_events_block button,
851.todays_events_block button {
852	margin: 0 20px;
853}
854
855/* Sidebar - Family navigator */
856
857/* Sidebar - Descendants */
858#sb_content_descendancy {
859	margin-top: 5px;
860}
861
862#sb_desc_content {
863	margin-left: 3px;
864	font-size: 0.8em;
865}
866
867#sb_desc_content ul {
868	padding: 0;
869	margin: 0;
870}
871
872.sb_desc_indi_li {
873	list-style-type: none;
874}
875
876/* Individuals and Families */
877#sidebar-content-individuals,
878#sidebar-content-families {
879	margin-top: 5px;
880}
881
882.sb_indi_surname_li,
883.sb_fam_surname_li {
884	list-style-image: url(minimal/images/plus.png);
885}
886
887.name_tree_div ul {
888	padding: 0;
889	margin: 0;
890}
891
892.name_tree_div li {
893	list-style: none;
894	margin: 0;
895	padding: 0;
896}
897
898/* Clippings */
899#sb_clippings_content ul {
900	padding: 0;
901	margin: 0;
902}
903
904#sb_clippings_content li {
905	list-style: none;
906	margin: 0;
907	padding: 0;
908	white-space: nowrap;
909}
910
911/* Extra info */
912#sb_content_extra_info {
913	font-size: 80%;
914	font-weight: bold;
915	margin-top: 1px;
916	overflow: hidden;
917	padding: 5px;
918}
919
920#sb_content_extra_info .editfacts {
921	float: right;
922	margin-top: -10px;
923}
924
925#sb_content_extra_info a {
926	display: block;
927}
928
929#sb_content_extra_info span {
930	font-weight: normal;
931}
932
933#sb_content_extra_info span a {
934	display: inline;
935}
936
937#sb_content_extra_info #hitcounter {
938	border-top: 1px solid #b2c7d7;
939	font-weight: bold;
940	padding-top: 5px;
941}
942
943/* http://www.jacklmoore.com/colorbox */
944#colorbox,
945#cboxOverlay,
946#cboxWrapper {
947	position: absolute;
948	top: 0;
949	left: 0;
950	z-index: 9999;
951	overflow: hidden;
952}
953
954#cboxWrapper {
955	max-width: none;
956}
957
958#cboxOverlay {
959	position: fixed;
960	width: 100%;
961	height: 100%;
962	background: #fff;
963}
964
965#cboxContent {
966	background: #fff;
967	overflow: hidden;
968	position: relative;
969	padding: 0.5rem;
970	border: 0.25rem solid #ccc;
971}
972
973#cboxLoadingOverlay,
974#cboxLoadingGraphic {
975	position: absolute;
976	top: 0;
977	left: 0;
978	width: 100%;
979	height: 100%;
980}
981
982.cboxPhoto {
983	float: left;
984	margin: auto;
985	border: 0;
986	display: block;
987	max-width: none;
988}
989
990#colorbox,
991#cboxContent,
992#cboxLoadedContent {
993	box-sizing: content-box;
994}
995
996#cboxError {
997	padding: 50px;
998	border: 1px solid #ccc;
999}
1000
1001#cboxLoadedContent {
1002	margin-bottom: 28px;
1003}
1004
1005#cboxTitle {
1006	background: #fff;
1007	position: absolute;
1008	bottom: 0.25rem;
1009	left: 0;
1010	margin: 0 3rem;
1011	text-align: center;
1012}
1013
1014#cboxLoadingGraphic {
1015	background: url(images/loading-32x32.gif) no-repeat center center;
1016}
1017
1018#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
1019	background: none;
1020	border: 0;
1021	cursor: pointer;
1022	font-family: "Font Awesome\ 5 Free", sans-serif;
1023	font-weight: 900;
1024	overflow: visible;
1025	padding: 0;
1026	position: absolute;
1027}
1028
1029#cboxSlideshow {
1030	bottom: 0.25rem;
1031	right: 0.25rem;
1032}
1033
1034#cboxPrevious {
1035	bottom: 0.25rem;
1036	left: 0.25rem;
1037}
1038
1039#cboxNext {
1040	bottom: 0.25rem;
1041	left: 1.5rem;
1042}
1043
1044#cboxClose {
1045	top: 0.25rem;
1046	right: 0.25rem;
1047}
1048
1049/* Stories module */
1050.story_title {
1051	padding-top: 12px;
1052	font-size: 13px;
1053	height: 32px;
1054	font-weight: bold;
1055}
1056
1057.story_body {
1058	padding: 20px;
1059	white-space: normal;
1060}
1061
1062.story_edit {
1063	padding: 12px;
1064}
1065
1066/* Stories module */
1067.story_title {
1068	padding-top: 12px;
1069	font-size: 13px;
1070	height: 32px;
1071	font-weight: bold;
1072}
1073
1074.story_body {
1075	padding: 20px;
1076	white-space: normal;
1077}
1078
1079.story_edit {
1080	padding: 12px;
1081}
1082
1083/* ====== Charts Styles ======== */
1084
1085#people label {
1086	display: block;
1087}
1088
1089/*-- Fan chart ---- */
1090.fan_chart_menu {
1091	background: #fff;
1092	position: absolute;
1093	display: none;
1094	z-index: 100;
1095}
1096
1097#fan_chart ul {
1098	list-style-type: none;
1099	margin: 0;
1100}
1101
1102/* Lifespans chart */
1103.wt-lifespans-subtitle {
1104	text-align: center;
1105}
1106
1107.wt-lifespans-scale {
1108	white-space: nowrap;
1109}
1110
1111.wt-lifespans-decade {
1112	width: 70px;
1113	height: 60px;
1114	display: inline-block;
1115	background-image: url(images/lifespan-decade.png);
1116	background-position-y: bottom;
1117	background-repeat: no-repeat;
1118	background-size: 70px 37px;
1119}
1120
1121.wt-lifespans-individuals {
1122	background: #fafafa;
1123}
1124
1125.wt-lifespans-individual {
1126
1127}
1128
1129.wt-lifespans-summary {
1130	background: #ffffff;
1131	border: thin solid #000;
1132	z-index: 1;
1133}
1134
1135.wt-lifespans-summary-link {
1136	font-weight: bold;
1137}
1138
1139/*-- Pedigree ---- */
1140.tvertline {
1141	vertical-align: bottom;
1142}
1143
1144.optionbox, .descriptionbox {
1145	border: solid #000 1px;
1146	vertical-align: top;
1147	padding: 3px;
1148}
1149
1150#childbox {
1151	padding: 5px;
1152	position: absolute;
1153	display: none;
1154	text-align: start;
1155	white-space: nowrap;
1156	top: 20px;
1157	left: 0;
1158}
1159
1160.layout3 #childbox {
1161	top: auto;
1162	bottom: 20px;
1163}
1164
1165#childbox a.name1 {
1166	display: block;
1167	margin-left: 5px;
1168}
1169
1170.person0, .person1, .person2, .person3, .person4, .person5 {
1171	border:outset #555 1px;
1172	vertical-align:top;
1173}
1174.person0{
1175	background-color:#eee;
1176}
1177
1178.person1{
1179	background-color:#bfbfbf;
1180}
1181
1182.person2{
1183	background-color:#999;
1184}
1185
1186.person3{
1187	background-color:#dfdfdf;
1188}
1189
1190.person4{
1191	background-color:#eee;
1192}
1193
1194.person5{
1195	background-color:#fefefe;
1196}
1197
1198/*-- timeline  --*/
1199#timeline_chart {
1200	position: relative;
1201	top: 0;
1202	left: 0;
1203}
1204
1205/*
1206 * Any element that is loaded dynamically has the class wt-ajax-load.
1207 * We can provide a "loading" placeholder for empty elements with this class.
1208 */
1209.wt-ajax-load:empty {
1210	height: 32px;
1211	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
1212}
1213
1214/*
1215 * Default icons are provided by FontAwesome.
1216 * Some icons get mirrored on RTL pages.  Typiclly arrows
1217 */
1218[dir=rtl] .wt-flip-rtl {
1219	transform: scale(-1, 1);
1220}
1221
1222.wt-icon-anniversary {
1223}
1224
1225.wt-icon-arrow-down {
1226}
1227
1228a > .wt-icon-arrow-down:hover {
1229}
1230
1231.wt-icon-arrow-left {
1232}
1233
1234a > .wt-icon-arrow-left:hover {
1235}
1236
1237.wt-icon-arrow-right {
1238}
1239
1240a > .wt-icon-arrow-right:hover {
1241}
1242
1243.wt-icon-arrow-up {
1244}
1245
1246a > .wt-icon-arrow-up:hover {
1247}
1248
1249.wt-icon-collapse {
1250}
1251
1252.wt-icon-coordinates {
1253}
1254
1255.wt-icon-expand {
1256}
1257
1258.wt-icon-reorder {
1259}
1260
1261.wt-icon-sex-f {
1262	color: var(--sex-m-fg);
1263}
1264
1265.wt-icon-sex-m {
1266	color: var(--sex-m-fg);
1267}
1268
1269.wt-icon-sex-u {
1270	color: var(--sex-u-fg);
1271}
1272
1273.wt-icon-sex-x {
1274	color: var(--sex-u-fg);
1275}
1276
1277.wt-icon-warning {
1278}
1279
1280.wt-icon-zoom-in {
1281}
1282
1283.wt-icon-zoom-out {
1284}
1285
1286/*
1287 * .wt-icon-bing-maps
1288 * .wt-icon-calendar
1289 * .wt-icon-copy
1290 * .wt-icon-delete
1291 * .wt-icon-edit
1292 * .wt-icon-email
1293 * .wt-icon-family
1294 * .wt-icon-help
1295 * .wt-icon-individual
1296 * .wt-icon-google-maps
1297 * .wt-icon-keyboard
1298 * .wt-icon-media
1299 * .wt-icon-note
1300 * .wt-icon-openstreetmap
1301 * .wt-icon-preferences
1302 * .wt-icon-repository
1303 * .wt-icon-source
1304 * .wt-icon-submitter
1305 */
1306[class^="icon-"],
1307[class*=" icon-"] {
1308	display: inline-block;
1309	vertical-align: middle;
1310	background-repeat: no-repeat;
1311	background-size: cover;
1312}
1313
1314.icon-add {
1315	width: 14px;
1316	height: 15px;
1317	background-image: url(images/add.png);
1318}
1319
1320.icon-cfamily {
1321}
1322
1323.icon-childless {
1324	width: 25px;
1325	height: 25px;
1326	background-image: url(minimal/images/childless.png);
1327}
1328
1329.icon-children {
1330	width: 16px;
1331	height: 16px;
1332	background-image: url(minimal/images/children.png);
1333}
1334
1335.icon-clippings {
1336	width: 22px;
1337	height: 22px;
1338	background-image: url(minimal/images/clippings.png);
1339}
1340
1341.icon-edit_indi {
1342	width: 20px;
1343	height: 20px;
1344	background-image: url(minimal/images/edit_sm.png);
1345}
1346
1347.icon-fam-list {
1348	width: 20px;
1349	height: 20px;
1350	background-image: url(minimal/icons/family.png);
1351}
1352
1353.icon-indi-list {
1354	width: 20px;
1355	height: 20px;
1356	background-image: url(minimal/images/indis.png);
1357}
1358
1359.icon-loading-small {
1360	width: 16px;
1361	height: 16px;
1362	background-image: url(minimal/images/indicator.gif);
1363}
1364
1365.icon-loading-large {
1366	width: 32px;
1367	height: 32px;
1368	background-image: url(images/loading-32x32.gif);
1369}
1370
1371.icon-media {
1372	width: 20px;
1373	height: 20px;
1374	background-image: url(minimal/images/media.png);
1375}
1376
1377.icon-media-list {
1378	width: 20px;
1379	height: 20px;
1380	background-image: url(minimal/images/media.png);
1381}
1382
1383.icon-media-next {
1384	width: 20px;
1385	height: 20px;
1386	background-image: url(minimal/images/rdarrow.png);
1387}
1388
1389.icon-media-play {
1390	width: 20px;
1391	height: 20px;
1392	background-image: url(minimal/images/rarrow.png);
1393}
1394
1395.icon-media-stop {
1396	width: 16px;
1397	height: 17px;
1398	background-image: url(minimal/images/stop.png);
1399}
1400
1401.icon-minus {
1402	width: 11px;
1403	height: 11px;
1404	background-image: url(minimal/images/minus.png);
1405}
1406
1407.icon-mypage {
1408	width: 24px;
1409	height: 24px;
1410	background-image: url(minimal/images/mypage.png);
1411}
1412
1413.icon-note {
1414	width: 20px;
1415	height: 20px;
1416	background-image: url(minimal/icons/note.png);
1417}
1418
1419.icon-plus {
1420	width: 11px;
1421	height: 11px;
1422	background-image: url(minimal/images/plus.png);
1423}
1424
1425.icon-remove {
1426	width: 14px;
1427	height: 15px;
1428	background-image: url(minimal/images/remove.png);
1429}
1430
1431.icon-resn-confidential {
1432	width: 16px;
1433	height: 16px;
1434	background-image: none;
1435}
1436
1437.icon-resn-locked {
1438	background-image: none;
1439}
1440
1441.icon-resn-none {
1442	background-image: none;
1443}
1444
1445.icon-resn-privacy {
1446	background-image: none;
1447}
1448
1449.icon-rings {
1450	width: 9px;
1451	height: 9px;
1452	background-image: url(minimal/images/rings.png);
1453}
1454
1455.icon-selected {
1456	width: 12px;
1457	height: 12px;
1458	background-image: url(minimal/images/selected.png);
1459}
1460
1461.icon-sfamily {
1462	width: 24px;
1463	height: 24px;
1464	background-image: url(minimal/images/sfamily.png);
1465}
1466
1467.icon-source {
1468	width: 20px;
1469	height: 20px;
1470	background-image: url(minimal/images/source.png);
1471}
1472
1473/* Silhouettes on charts */
1474.icon-silhouette-F {
1475	width: 37px;
1476	height: 50px;
1477	background-image: url(minimal/images/silhouette_female_small.png);
1478}
1479
1480.icon-silhouette-M {
1481	width: 37px;
1482	height: 50px;
1483	background-image: url(minimal/images/silhouette_male_small.png);
1484}
1485
1486.icon-silhouette-U {
1487	width: 37px;
1488	height: 50px;
1489	background-image: url(minimal/images/silhouette_unknown_small.png);
1490}
1491
1492.icon-indis {
1493	width: 24px;
1494	height: 24px;
1495	background-image: url(minimal/images/indis.png);
1496}
1497
1498.icon-pedigree {
1499	width: 24px;
1500	height: 24px;
1501	background-image: url(minimal/images/pedigree.png);
1502}
1503
1504.icon-search {
1505	width: 24px;
1506	height: 24px;
1507	background-image: url(minimal/images/search.png);
1508}
1509
1510/* Census assistant */
1511.wt-census-assistant-form-control:focus {
1512	min-width: 12rem;
1513}
1514
1515/*
1516 * Drag and drop sortable lists
1517 */
1518.wt-sortable-list {
1519}
1520
1521.wt-sortable-item {
1522	cursor: move;
1523}
1524
1525/* Some blocks show a reduced version on the right-hand side. */
1526.wt-side-blocks .wt-side-block-optional {
1527	display: none !important;
1528}
1529
1530/* my page chart enhancements */
1531.wt-block-content-charts {
1532	flex-flow: column-reverse;
1533	overflow: auto;
1534}
1535
1536.wt-block-content-todays-events-block {
1537	padding: .25rem;
1538}
1539
1540/* Some charts are wider than the page. */
1541.wt-chart {
1542	overflow-x: auto;
1543	overflow-y: hidden;
1544}
1545
1546/* Fit thumbnail into parent on charts */
1547.select2-selection.select2-selection--single {
1548	min-height: 36px;
1549	height: auto;
1550	padding: 2px 0;
1551}
1552
1553.select2-container .select2-selection--single .select2-selection__rendered {
1554	padding-left: 2px;
1555}
1556
1557.select2-selection--single .NAME {
1558	padding-left: 4px;
1559}
1560
1561/*
1562 *  These selectors control how the short horizontal lines are positioned in the Charts
1563 *  Optimized for Win10 and FF, Chrome and Edge browsers
1564 *  	Ancestors
1565 *  	Descendants
1566 *  	amily book
1567 *
1568 */
1569
1570/* Ascentors */
1571.wt-chart-ancestors .linea1 {
1572	margin-bottom: 4px;
1573}
1574
1575.wt-chart-ancestors .linea2 {
1576	margin-bottom: 7px;
1577}
1578
1579.wt-chart-ancestors .linea3 {
1580	margin-bottom: 4px;
1581}
1582
1583.wt-chart-ancestors .linea4 {
1584	margin-bottom: 7px;
1585}
1586
1587.wt-chart-ancestors .linea5 {
1588	vertical-align: top;
1589}
1590
1591/* Descendants */
1592.wt-chart-descendants .lined1 {
1593	margin-bottom: 4px;
1594}
1595
1596.wt-chart-descendants .lined2 {
1597	margin-bottom: 7px;
1598}
1599
1600.wt-chart-descendants .lined3 {
1601	margin-bottom: 4px;
1602}
1603
1604.wt-chart-descendants .lined4 {
1605	margin-bottom: 7px;
1606}
1607
1608.wt-chart-descendants .linea5 {
1609	vertical-align: top;
1610}
1611
1612/*
1613 * Place hierarchy
1614 *
1615 * wt-place-hierarchy-page
1616 */
1617
1618#place-hierarchy ul {
1619	list-style-type: none;
1620}
1621
1622.d-table-cell {
1623	padding-right: 5px;
1624}
1625
1626/* Some menus (e.g. languages) can be longer than a page */
1627.dropdown-menu {
1628	max-height: 30rem;
1629	overflow-x: hidden;
1630}
1631
1632/* Forms */
1633.col-form-label {
1634	font-weight: bold;
1635}
1636