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