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