xref: /webtrees/resources/css/minimal.css (revision 9d627a9e6c00d03faa5d6a39e801ab0bb6f45d6d)
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/* ==== Favourites block ===== */
741.add_fav_head {
742	font-weight: 900;
743	margin: 5px 0;
744}
745
746.add_fav_head i {
747	margin: 0 5px 1px;
748}
749
750.add_fav_ref label {
751	display: inline-block;
752	min-width: 100px;
753}
754
755.add_fav_ref input {
756	margin: 0 5px;
757}
758
759/* === Who is online block === */
760.logged_in_list {
761	margin: 5px 0 0;
762	padding: 0;
763	line-height: 20px;
764}
765
766/* Table of genealogical facts */
767
768.wt-facts-table caption {
769	caption-side: top;
770}
771
772.wt-facts-table th {
773	border: 1px solid #000;
774	font-weight: normal;
775	min-width: 20%;
776}
777
778.wt-facts-table td {
779	border: solid #000 1px;
780}
781
782a {
783	color: #333;
784	text-decoration: none;
785}
786
787a:hover {
788	color: #333;
789	text-decoration: underline;
790}
791
792a:hover {
793    text-decoration: underline!important;
794}
795
796.nameZoom {
797    font-size: 16px;
798    font-weight: bold;
799}
800
801/* ==== Theme select block === */
802.theme_form ul {
803	margin: -10px auto;
804}
805
806.theme_form li {
807	visibility: hidden;
808}
809
810.theme_form li ul li {
811	display: inline-block;
812	padding: 10px;
813	visibility: visible;
814}
815
816/* ==== FAQ table styles ===== */
817table.faq {
818	background-color: #ddd;
819	margin: 5px 0 50px 5px;
820	width: 98%;
821}
822
823table.faq tr:nth-child(odd) td {
824	background-color: #fff;
825}
826
827div.faq_title {
828	background-color: #ddd;
829	margin: 1em 0;
830	padding: .25em;
831	font-weight: bold;
832	width: 98%;
833}
834
835div.faq_body {
836	clear: both;
837	padding: 0 1em;
838}
839
840.faq_top {
841	float: right;
842}
843
844/* === Positioning edit, copy, delete links === */
845/* General use */
846.editfacts {
847	clear: left;
848	padding-top: 15px;
849}
850
851/* ======== Indi header ====== */
852#indi_header {
853	overflow: hidden;
854	margin: 0 4px 5px;
855	width: 98%;
856}
857
858#indi_header h3 {
859	color: #555;
860	font-size: 90%;
861	font-weight: bold;
862	margin: 0;
863	padding: 0 10px 0 30px;
864	text-align: left;
865	overflow: hidden;
866	position: relative;
867}
868
869#indi_header .name_one {
870	font-size: 1.5em;
871}
872
873#indi_header h3 .details1 {
874	font-size: 1.0em;
875	border: 1px solid #888;
876}
877
878#indi_header h3 .header_age {
879	padding: 5px 0 5px 5px;
880	color: #666;
881	float: right;
882	font-weight: normal;
883	font-size: 65%;
884}
885
886#indi_header h3 a {
887	display: inline;
888}
889
890#indi_header a {
891	font-weight: normal;
892}
893
894#indi_header a:hover {
895	color: #333;
896}
897
898#indi_mainimage {
899	float: right;
900}
901
902#header_accordion1 {
903	padding: 0 10px 0 0;
904	overflow: hidden;
905}
906
907#header_accordion1 .indi_name_details {
908	background: none #fff;
909	border: 0;
910	margin: 0;
911	overflow: hidden;
912	padding: 5px;
913}
914
915.indi_name_details .name1 {
916	font-weight: normal;
917	padding-top: 5px;
918	font-size: inherit;
919}
920
921#indi_header a.warning {
922	color: #f00;
923	font-size: 1em;
924}
925
926#indi_note {
927	margin: 0 0 5px;
928}
929
930.indi_table {
931	clear: left;
932}
933
934#sex {
935	float: right;
936}
937
938#dates {
939	color: #666;
940	float: right;
941}
942
943.label {
944	font-weight: bold;
945}
946
947#individual-names .wt-icon-edit,
948#individual-names .wt-icon-delete {
949	float: right;
950}
951
952#indi_note .fact_NOTE {
953	float: left;
954	margin: 0 5px 0 0;
955}
956
957#indi_note .fact_SOUR {
958	margin: 3px 0;
959}
960
961#indi_note .fact_SOUR a {
962	font-size: 100%;
963}
964
965#indi_note .fact_NOTE,
966#indi_note .fact_SOUR {
967	clear: both;
968}
969
970/* markdown formatting */
971
972.markdown {
973	/* Tables and pre-formatted text can break the layout. */
974	overflow-x: auto;
975}
976
977.markdown p {
978	margin: 0 0 0.5em;
979	white-space: pre-wrap;
980}
981
982.markdown table {
983	border-collapse: collapse;
984	font-size: 10px;
985	margin-bottom: 5px;
986}
987
988.markdown th {
989	font-weight: bold;
990}
991
992.markdown td,
993.markdown th {
994	border: solid thin #000;
995	padding: 3px;
996}
997
998.odometer {
999	font-family: courier, monospace;
1000	font-weight: bold;
1001	background: #000;
1002	color: #fff;
1003}
1004
1005/* ======== Indi tabs ======== */
1006/* Facts & Events tab */
1007#personal_facts_content .fact_NOTE,
1008#personal_facts_content .fact_SOUR,
1009#family-table .fact_NOTE,
1010#family-table .fact_SOUR {
1011	margin: 5px 3px 5px 0;
1012	clear: both;
1013}
1014
1015.media-display-image {
1016	float: left;
1017}
1018
1019.media-display-title {
1020	float: left;
1021	font-style: italic;
1022	margin: 10px;
1023}
1024
1025/* === jQuery.datatable styling general over-rides === */
1026.odd {
1027	background-color: #dcdcdc;
1028}
1029
1030.even {
1031	background-color: #fff;
1032}
1033
1034.css_right {
1035	float: left;
1036}
1037
1038.fg-button {
1039	padding: 2px 6px;
1040}
1041
1042.fg-toolbar {
1043	background-color: #fff;
1044	border-color: #aaa;
1045}
1046
1047.dataTables_paginate {
1048	float: left;
1049	margin-bottom: 3px;
1050}
1051
1052.dataTables_processing {
1053	float: left;
1054}
1055
1056.dataTables_filter {
1057	float: right;
1058	font-weight: normal;
1059}
1060
1061.dataTables_info {
1062	float: left;
1063	font-weight: normal;
1064	padding: 4px;
1065}
1066
1067.recent_changes_block .dataTables_info,
1068.upcoming_events_block .dataTables_info,
1069.todays_events_block .dataTables_info,
1070.todo_block .dataTables_info,
1071.yahrzeit_block .dataTables_info {
1072	padding: 0;
1073}
1074
1075.upcoming_events_block .dataTables_info,
1076.todays_events_block .dataTables_info {
1077	padding: 2px 0 0;
1078}
1079
1080.upcoming_events_block button,
1081.todays_events_block button {
1082	margin: 0 20px;
1083}
1084
1085.dataTables_length {
1086	float: right;
1087	font-weight: normal;
1088}
1089
1090.dataTables_length select,
1091.dataTables_filter input {
1092	padding: 1px;
1093}
1094
1095.dt-clear {
1096	clear: both;
1097}
1098
1099#loading {
1100	text-align: center;
1101}
1102
1103.DataTables_sort_wrapper {
1104	position: relative;
1105	margin: 0 20px;
1106}
1107
1108.DataTables_sort_wrapper span {
1109	left: 0;
1110	margin-left: -20px;
1111	margin-top: -8px;
1112	position: absolute;
1113	top: 50%;
1114}
1115
1116.dataTables_wrapper {
1117	margin-bottom: 10px;
1118}
1119
1120/* ======= Sidebar setup ===== */
1121#main {
1122	min-width: 600px;
1123	width: 100%;
1124	display: table;
1125	table-layout: fixed;
1126}
1127
1128#indi_left {
1129	display: table-cell;
1130}
1131
1132#tabs {
1133	background-color: #fff;
1134	border-color: #ddd;
1135	padding-bottom: 0;
1136	margin-bottom: 0;
1137	width: 98%;
1138	overflow: visible;
1139}
1140
1141/* sidebar */
1142#sidebar {
1143	width: 20%;
1144	display: table-cell;
1145	vertical-align: top;
1146}
1147
1148/* Sidebar - Family navigator */
1149
1150/* Sidebar - Descendants */
1151#sb_content_descendancy {
1152	margin-top: 5px;
1153}
1154
1155#sb_desc_content {
1156	margin-left: 3px;
1157	font-size: 0.8em;
1158}
1159
1160#sb_desc_content ul {
1161	padding: 0;
1162	margin: 0;
1163}
1164
1165.sb_desc_indi_li {
1166	list-style-type: none;
1167}
1168
1169.desc_tree_div {
1170	display: none;
1171}
1172
1173.desc_tree_div ul {
1174	padding: 0;
1175	margin-left: 10px;
1176	margin-top: 0;
1177	margin-right: 0;
1178}
1179
1180/* Individuals and Families */
1181#sidebar-content-individuals,
1182#sidebar-content-families {
1183	margin-top: 5px;
1184}
1185
1186.sb_indi_surname_li,
1187.sb_fam_surname_li {
1188	list-style-image: url(minimal/images/plus.png);
1189}
1190
1191.name_tree_div ul {
1192	padding: 0;
1193	margin: 0;
1194}
1195
1196.name_tree_div li {
1197	list-style: none;
1198	margin: 0;
1199	padding: 0;
1200}
1201
1202/* Clippings */
1203#sb_clippings_content ul {
1204	padding: 0;
1205	margin: 0;
1206}
1207
1208#sb_clippings_content li {
1209	list-style: none;
1210	margin: 0;
1211	padding: 0;
1212	white-space: nowrap;
1213}
1214
1215/* Extra info */
1216#sb_content_extra_info {
1217	font-size: 80%;
1218	font-weight: bold;
1219	margin-top: 1px;
1220	overflow: hidden;
1221	padding: 5px;
1222}
1223
1224#sb_content_extra_info .editfacts {
1225	float: right;
1226	margin-top: -10px;
1227}
1228
1229#sb_content_extra_info a {
1230	display: block;
1231}
1232
1233#sb_content_extra_info span {
1234	font-weight: normal;
1235}
1236
1237#sb_content_extra_info span a {
1238	display: inline;
1239}
1240
1241#sb_content_extra_info #hitcounter {
1242	border-top: 1px solid #b2c7d7;
1243	font-weight: bold;
1244	padding-top: 5px;
1245}
1246
1247/* ===== Edit interface pop-ups ===== */
1248#edit_interface-page h4 {
1249	color: #555;
1250	margin: 5px;
1251}
1252
1253#edit_interface-page .optionbox span {
1254	margin: 0 5px;
1255}
1256
1257#edit_interface-page #LATI,
1258#edit_interface-page #LONG,
1259#edit_interface-page #SPFX,
1260#edit_interface-page #NSFX,
1261#edit_interface-page #NPFX {
1262	line-height: 18px;
1263	margin: 0 5px;
1264	width: 88px;
1265}
1266
1267#edit_interface-page #GIVN,
1268#edit_interface-page #SURN,
1269#edit_interface-page #_MARNM {
1270	line-height: 18px;
1271	margin: 0 5px;
1272	width: 180px;
1273}
1274
1275#edit_interface-page input[type="text"],
1276#edit_interface-page #NAME_display {
1277	line-height: 18px;
1278	margin: 0 5px;
1279	vertical-align: top;
1280	width: 240px;
1281}
1282
1283#edit_interface-page input[type="text"][id*="PAGE"],
1284#edit_interface-page input[type="text"][id*="_UID"] {
1285	width: 350px;
1286}
1287
1288#edit_interface-page input[type="text"][id*="SOUR"],
1289#edit_interface-page input[type="text"][id*="REPO"],
1290#edit_interface-page input[type="text"][id*="OBJE"],
1291#edit_interface-page input[type="text"][id*="FAMC"],
1292#edit_interface-page input[type="text"][id*="ASSO"],
1293#edit_interface-page input[type="text"][id^="AGE"],
1294#edit_interface-page input[type="text"][id*="SHARED_NOTE"] {
1295	width: 250px;
1296}
1297
1298#edit_interface-page input[type="text"][id$="DATE"] {
1299	width: 160px;
1300}
1301
1302#edit_interface-page input[type="text"][id*="OBJE_FILE"] {
1303	width: 200px;
1304}
1305
1306#edit_interface-page input[type="text"][id*="SOUR_TITL"] {
1307	width: 250px;
1308}
1309
1310#edit_interface-page input[id*="TEXT"] {
1311	height: 140px;
1312	width: 440px;
1313}
1314
1315#edit_interface-page textarea {
1316	margin: 0 5px;
1317	width: 440px;
1318}
1319
1320#edit_interface-page textarea[id*="NOTE"] {
1321	height: 240px;
1322}
1323
1324#edit_interface-page textarea[id*="TEXT"],
1325#edit_interface-page textarea[id*="PUBL"] {
1326	height: 140px;
1327}
1328
1329#edit_interface-page textarea[id^="newgedrec"] {
1330	line-height: 18px;
1331	width: 605px;
1332}
1333
1334#edit_interface-page textarea#gedcom {
1335	height: 364px;
1336}
1337
1338#edit_interface-page textarea[id*="ADDR"],
1339#edit_interface-page input[id*="ADDR"] {
1340	height: 80px;
1341	width: 300px;
1342}
1343
1344#edit_interface-page,
1345#addmedia-page {
1346	margin-bottom: 50px;
1347}
1348
1349/* ===== Addmedia pop-ups ===== */
1350#addmedia-page input[type="text"] {
1351	line-height: 18px;
1352	margin: 0 5px;
1353	width: 350px;
1354}
1355
1356#addmedia-page .optionbox select {
1357	margin: 0 5px;
1358}
1359
1360#addmedia-page .optionbox p.sub {
1361	margin: 0 5px;
1362	font-size: 11px;
1363}
1364
1365#addmedia-page input[type="text"][id*="PAGE"],
1366#addmedia-page input[type="text"][id*="_UID"] {
1367	width: 350px;
1368}
1369
1370#addmedia-page input[type="text"][id*="SOUR"],
1371#addmedia-page input[type="text"][id*="REPO"],
1372#addmedia-page input[type="text"][id*="OBJE"],
1373#addmedia-page input[type="text"][id*="FAMC"],
1374#addmedia-page input[type="text"][id*="ASSO"],
1375#addmedia-page input[type="text"][id^="AGE"],
1376#addmedia-page input[type="text"][id*="SHARED_NOTE"] {
1377	width: 70px;
1378}
1379
1380#addmedia-page input[id*="TEXT"] {
1381	height: 140px;
1382	width: 440px;
1383}
1384
1385#addmedia-page textarea {
1386	margin: 0 5px;
1387	width: 440px;
1388}
1389
1390#addmedia-page textarea[id*="NOTE"] {
1391	height: 240px;
1392}
1393
1394#addmedia-page textarea[id*="TEXT"],
1395#addmedia-page textarea[id*="PUBL"] {
1396	height: 140px;
1397}
1398
1399/* http://www.jacklmoore.com/colorbox */
1400#colorbox,
1401#cboxOverlay,
1402#cboxWrapper {
1403	position: absolute;
1404	top: 0;
1405	left: 0;
1406	z-index: 9999;
1407	overflow: hidden;
1408}
1409
1410#cboxWrapper {
1411	max-width: none;
1412}
1413
1414#cboxOverlay {
1415	position: fixed;
1416	width: 100%;
1417	height: 100%;
1418	background: #fff;
1419}
1420
1421#cboxContent {
1422	background: #fff;
1423	overflow: hidden;
1424	position: relative;
1425	padding: 0.5rem;
1426	border: 0.25rem solid #ccc;
1427}
1428
1429#cboxLoadingOverlay,
1430#cboxLoadingGraphic {
1431	position: absolute;
1432	top: 0;
1433	left: 0;
1434	width: 100%;
1435	height: 100%;
1436}
1437
1438.cboxPhoto {
1439	float: left;
1440	margin: auto;
1441	border: 0;
1442	display: block;
1443	max-width: none;
1444}
1445
1446#colorbox,
1447#cboxContent,
1448#cboxLoadedContent {
1449	box-sizing: content-box;
1450}
1451
1452#cboxError {
1453	padding: 50px;
1454	border: 1px solid #ccc;
1455}
1456
1457#cboxLoadedContent {
1458	margin-bottom: 28px;
1459}
1460
1461#cboxTitle {
1462	background: #fff;
1463	position: absolute;
1464	bottom: 0.25rem;
1465	left: 0;
1466	margin: 0 3rem;
1467	text-align: center;
1468}
1469
1470#cboxLoadingGraphic {
1471	background: url(images/loading-32x32.gif) no-repeat center center;
1472}
1473
1474#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
1475	background: none;
1476	border: 0;
1477	cursor: pointer;
1478	font-family: "Font Awesome\ 5 Free", sans-serif;
1479	font-weight: 900;
1480	overflow: visible;
1481	padding: 0;
1482	position: absolute;
1483}
1484
1485#cboxSlideshow {
1486	bottom: 0.25rem;
1487	right: 0.25rem;
1488}
1489
1490#cboxPrevious {
1491	bottom: 0.25rem;
1492	left: 0.25rem;
1493}
1494
1495#cboxNext {
1496	bottom: 0.25rem;
1497	left: 1.5rem;
1498}
1499
1500#cboxClose {
1501	top: 0.25rem;
1502	right: 0.25rem;
1503}
1504
1505/* Stories module */
1506.story_title {
1507	padding-top: 12px;
1508	font-size: 13px;
1509	height: 32px;
1510	font-weight: bold;
1511}
1512
1513.story_body {
1514	padding: 20px;
1515	white-space: normal;
1516}
1517
1518.story_edit {
1519	padding: 12px;
1520}
1521
1522/* Stories module */
1523.story_title {
1524	padding-top: 12px;
1525	font-size: 13px;
1526	height: 32px;
1527	font-weight: bold;
1528}
1529
1530.story_body {
1531	padding: 20px;
1532	white-space: normal;
1533}
1534
1535.story_edit {
1536	padding: 12px;
1537}
1538
1539/* ====== Charts Styles ======== */
1540
1541#people label {
1542	display: block;
1543}
1544
1545/* Ancestry chart */
1546.wt-chart-ancestors-list {
1547	background: transparent url(images/vline.png) left top repeat-y;
1548	margin: 0 0 0 15px;
1549	padding: 0;
1550	display: block;
1551}
1552
1553.wt-chart-ancestors-list-item {
1554	margin: 5px 0;
1555}
1556
1557.chart_common li {
1558	list-style: outside none none;
1559}
1560
1561.generations {
1562	background: transparent url(images/vline.png) repeat-y scroll left top;
1563	display: block;
1564	margin: 0 0 0 15px;
1565	padding: 0;
1566}
1567
1568.chart_common table {
1569	padding: 0;
1570	border-spacing: 0;
1571	border-collapse: collapse;
1572	margin: 5px 0;
1573}
1574
1575.chart_common td {
1576	border: 0;
1577	padding: 0;
1578}
1579
1580.chart_common span.details1 div[class^=fact_] {
1581	display: inline-block;
1582}
1583
1584.chart_common span.details1 .date {
1585	color: inherit;
1586}
1587
1588/*-- Family book  --*/
1589#familybook_chart {
1590	margin-left: 10px;
1591}
1592
1593#familybook_chart table {
1594	border-collapse: collapse;
1595	empty-cells: show;
1596}
1597
1598#familybook_chart td {
1599	margin: 0;
1600	padding: 0;
1601}
1602
1603#familybook_chart h2 {
1604	text-align: center;
1605}
1606
1607#familybook_chart .line3,
1608#familybook_chart .pvline,
1609#familybook_chart .spacer {
1610	width: 3px;
1611}
1612
1613#familybook_chart .line4 {
1614	width: 7px;
1615	vertical-align: middle;
1616}
1617
1618[ID^="vline"] {
1619	width: 3px;
1620}
1621
1622#familybook_chart h3 {
1623	color: #006;
1624	font-size: 16px;
1625	text-align: center;
1626}
1627
1628/*-- Fan chart ---- */
1629.fan_chart_menu {
1630	position: absolute;
1631	display: none;
1632	z-index: 100;
1633}
1634
1635#fan_chart ul {
1636	list-style-type: none;
1637	margin: 0;
1638}
1639
1640/*-- Hourglass ---- */
1641#hourglass_chart img.line4 {
1642	vertical-align: middle;
1643}
1644
1645#hourglass_chart table,
1646.charts_block table {
1647	border-collapse: collapse;
1648}
1649
1650#hourglass_chart td,
1651.charts_block td {
1652	padding: 0;
1653	empty-cells: show;
1654}
1655
1656/* Lifespans chart */
1657.wt-lifespans-subtitle {
1658	text-align: center;
1659}
1660
1661.wt-lifespans-scale {
1662	white-space: nowrap;
1663}
1664
1665.wt-lifespans-decade {
1666	width: 70px;
1667	height: 60px;
1668	display: inline-block;
1669	background-image: url(images/lifespan-decade.png);
1670	background-position-y: bottom;
1671	background-repeat: no-repeat;
1672	background-size: 70px 37px;
1673}
1674
1675.wt-lifespans-individuals {
1676	background: #fafafa;
1677}
1678
1679.wt-lifespans-individual {
1680
1681}
1682
1683.wt-lifespans-summary {
1684	background: #ffffff;
1685	border: thin solid #000;
1686	z-index: 1;
1687}
1688
1689.wt-lifespans-summary-link {
1690	font-weight: bold;
1691}
1692
1693/*-- Pedigree ---- */
1694#pedigree_canvas {
1695	color:   #555;
1696}
1697
1698
1699.tvertline {
1700	vertical-align: bottom;
1701}
1702
1703.optionbox, .descriptionbox {
1704	border: solid #000 1px;
1705	vertical-align: top;
1706	padding: 3px;
1707}
1708
1709#childbox {
1710	padding: 5px;
1711	position: absolute;
1712	display: none;
1713	text-align: start;
1714	white-space: nowrap;
1715	top: 20px;
1716	left: 0;
1717}
1718
1719.layout3 #childbox {
1720	top: auto;
1721	bottom: 20px;
1722}
1723
1724#childbox a.name1 {
1725	display: block;
1726	margin-left: 5px;
1727}
1728
1729.person0, .person1, .person2, .person3, .person4, .person5 {
1730	border:outset #555 1px;
1731	vertical-align:top;
1732}
1733.person0{
1734	background-color:#eee;
1735}
1736
1737.person1{
1738	background-color:#bfbfbf;
1739}
1740
1741.person2{
1742	background-color:#999;
1743}
1744
1745.person3{
1746	background-color:#dfdfdf;
1747}
1748
1749.person4{
1750	background-color:#eee;
1751}
1752
1753.person5{
1754	background-color:#fefefe;
1755}
1756
1757/*-- Pedigree ---- */
1758#pedigree_chart {
1759	position: relative;
1760	margin: 20px auto;
1761}
1762
1763#pedigree_canvas {
1764	color:   #555;
1765	z-index: -1000;
1766}
1767
1768#pedigree-page .shadow {
1769	position: absolute;
1770	white-space: nowrap;
1771}
1772
1773#pedigree-page .layout0 .shadow > div,
1774#pedigree-page .layout1 .shadow > div {
1775	display: inline-block;
1776	vertical-align: middle;
1777}
1778
1779#pedigree-page .spacer {
1780	background-image: url(images/spacer.png);
1781	height: 20px;
1782	width: 1px;
1783}
1784
1785#childarrow,
1786.ancestorarrow {
1787	text-align: center;
1788}
1789
1790#pedigree-page #childarrow {
1791	position: relative;
1792}
1793
1794#pedigree-page #childbox {
1795	border: 1px solid;
1796	background-color: #fff;
1797}
1798
1799#pedigree-page table.list_table {
1800	margin: 0 auto;
1801	width: 500px;
1802}
1803
1804.pedigree_chart_table {
1805	border: 0;
1806	border-collapse: collapse;
1807	padding: 0;
1808	width: 100%;
1809}
1810
1811/*-- timeline  --*/
1812#timeline_chart {
1813	position: relative;
1814	top: 0;
1815	left: 0;
1816}
1817
1818/*
1819 * Any element that is loaded dynamically has the class wt-ajax-load.
1820 * We can provide a "loading" placeholder for empty elements with this class.
1821 */
1822.wt-ajax-load:empty {
1823	height: 32px;
1824	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
1825}
1826
1827/*
1828 * Default icons are provided by FontAwesome.
1829 * Some icons get mirrored on RTL pages.  Typiclly arrows
1830 */
1831[dir=rtl] .wt-flip-rtl {
1832	transform: scale(-1, 1);
1833}
1834
1835.wt-icon-anniversary {
1836}
1837
1838.wt-icon-arrow-down {
1839}
1840
1841a > .wt-icon-arrow-down:hover {
1842}
1843
1844.wt-icon-arrow-left {
1845}
1846
1847a > .wt-icon-arrow-left:hover {
1848}
1849
1850.wt-icon-arrow-right {
1851}
1852
1853a > .wt-icon-arrow-right:hover {
1854}
1855
1856.wt-icon-arrow-up {
1857}
1858
1859a > .wt-icon-arrow-up:hover {
1860}
1861
1862.wt-icon-coordinates {
1863}
1864
1865.wt-icon-reorder {
1866}
1867
1868.wt-icon-sex-f {
1869	color: var(--sex-m-fg);
1870}
1871
1872.wt-icon-sex-m {
1873	color: var(--sex-m-fg);
1874}
1875
1876.wt-icon-sex-u {
1877	color: var(--sex-u-fg);
1878}
1879
1880.wt-icon-sex-x {
1881	color: var(--sex-u-fg);
1882}
1883
1884.wt-icon-warning {
1885}
1886
1887.wt-icon-zoom-in {
1888}
1889
1890.wt-icon-zoom-out {
1891}
1892
1893/*
1894 * .wt-icon-bing-maps
1895 * .wt-icon-calendar
1896 * .wt-icon-copy
1897 * .wt-icon-delete
1898 * .wt-icon-edit
1899 * .wt-icon-email
1900 * .wt-icon-family
1901 * .wt-icon-help
1902 * .wt-icon-individual
1903 * .wt-icon-google-maps
1904 * .wt-icon-keyboard
1905 * .wt-icon-media
1906 * .wt-icon-note
1907 * .wt-icon-openstreetmap
1908 * .wt-icon-preferences
1909 * .wt-icon-repository
1910 * .wt-icon-source
1911 * .wt-icon-submitter
1912 */
1913[class^="icon-"],
1914[class*=" icon-"] {
1915	display: inline-block;
1916	vertical-align: middle;
1917	background-repeat: no-repeat;
1918	background-size: cover;
1919}
1920
1921.icon-add {
1922	width: 14px;
1923	height: 15px;
1924	background-image: url(images/add.png);
1925}
1926
1927.icon-cfamily {
1928}
1929
1930.icon-childless {
1931	width: 25px;
1932	height: 25px;
1933	background-image: url(minimal/images/childless.png);
1934}
1935
1936.icon-children {
1937	width: 16px;
1938	height: 16px;
1939	background-image: url(minimal/images/children.png);
1940}
1941
1942.icon-clippings {
1943	width: 22px;
1944	height: 22px;
1945	background-image: url(minimal/images/clippings.png);
1946}
1947
1948.icon-edit_indi {
1949	width: 20px;
1950	height: 20px;
1951	background-image: url(minimal/images/edit_sm.png);
1952}
1953
1954.icon-fam-list {
1955	width: 20px;
1956	height: 20px;
1957	background-image: url(minimal/icons/family.png);
1958}
1959
1960.icon-indi-list {
1961	width: 20px;
1962	height: 20px;
1963	background-image: url(minimal/images/indis.png);
1964}
1965
1966.icon-loading-small {
1967	width: 16px;
1968	height: 16px;
1969	background-image: url(minimal/images/indicator.gif);
1970}
1971
1972.icon-loading-large {
1973	width: 32px;
1974	height: 32px;
1975	background-image: url(images/loading-32x32.gif);
1976}
1977
1978.icon-media {
1979	width: 20px;
1980	height: 20px;
1981	background-image: url(minimal/images/media.png);
1982}
1983
1984.icon-media-list {
1985	width: 20px;
1986	height: 20px;
1987	background-image: url(minimal/images/media.png);
1988}
1989
1990.icon-media-next {
1991	width: 20px;
1992	height: 20px;
1993	background-image: url(minimal/images/rdarrow.png);
1994}
1995
1996.icon-media-play {
1997	width: 20px;
1998	height: 20px;
1999	background-image: url(minimal/images/rarrow.png);
2000}
2001
2002.icon-media-stop {
2003	width: 16px;
2004	height: 17px;
2005	background-image: url(minimal/images/stop.png);
2006}
2007
2008.icon-minus {
2009	width: 11px;
2010	height: 11px;
2011	background-image: url(minimal/images/minus.png);
2012}
2013
2014.icon-mypage {
2015	width: 24px;
2016	height: 24px;
2017	background-image: url(minimal/images/mypage.png);
2018}
2019
2020.icon-note {
2021	width: 20px;
2022	height: 20px;
2023	background-image: url(minimal/icons/note.png);
2024}
2025
2026.icon-plus {
2027	width: 11px;
2028	height: 11px;
2029	background-image: url(minimal/images/plus.png);
2030}
2031
2032.icon-remove {
2033	width: 14px;
2034	height: 15px;
2035	background-image: url(minimal/images/remove.png);
2036}
2037
2038.icon-resn-confidential {
2039	width: 16px;
2040	height: 16px;
2041	background-image: none;
2042}
2043
2044.icon-resn-locked {
2045	background-image: none;
2046}
2047
2048.icon-resn-none {
2049	background-image: none;
2050}
2051
2052.icon-resn-privacy {
2053	background-image: none;
2054}
2055
2056.icon-rings {
2057	width: 9px;
2058	height: 9px;
2059	background-image: url(minimal/images/rings.png);
2060}
2061
2062.icon-selected {
2063	width: 12px;
2064	height: 12px;
2065	background-image: url(minimal/images/selected.png);
2066}
2067
2068.icon-sfamily {
2069	width: 24px;
2070	height: 24px;
2071	background-image: url(minimal/images/sfamily.png);
2072}
2073
2074.icon-source {
2075	width: 20px;
2076	height: 20px;
2077	background-image: url(minimal/images/source.png);
2078}
2079
2080/* Silhouettes on charts */
2081.icon-silhouette-F {
2082	width: 37px;
2083	height: 50px;
2084	background-image: url(minimal/images/silhouette_female_small.png);
2085}
2086
2087.icon-silhouette-M {
2088	width: 37px;
2089	height: 50px;
2090	background-image: url(minimal/images/silhouette_male_small.png);
2091}
2092
2093.icon-silhouette-U {
2094	width: 37px;
2095	height: 50px;
2096	background-image: url(minimal/images/silhouette_unknown_small.png);
2097}
2098
2099.icon-indis {
2100	width: 24px;
2101	height: 24px;
2102	background-image: url(minimal/images/indis.png);
2103}
2104
2105.icon-pedigree {
2106	width: 24px;
2107	height: 24px;
2108	background-image: url(minimal/images/pedigree.png);
2109}
2110
2111.icon-search {
2112	width: 24px;
2113	height: 24px;
2114	background-image: url(minimal/images/search.png);
2115}
2116
2117/* Census assistant */
2118.wt-census-assistant-form-control:focus {
2119	min-width: 12rem;
2120}
2121
2122/*
2123 * Drag and drop sortable lists
2124 */
2125.wt-sortable-list {
2126}
2127
2128.wt-sortable-item {
2129	cursor: move;
2130}
2131
2132/* Some blocks show a reduced version on the right-hand side. */
2133.wt-side-blocks .wt-side-block-optional {
2134	display: none !important;
2135}
2136
2137/* my page chart enhancements */
2138.wt-block-content-charts {
2139	flex-flow: column-reverse;
2140	overflow: auto;
2141}
2142
2143.wt-block-content-todays-events-block {
2144	padding: .25rem;
2145}
2146
2147/* Some charts are wider than the page. */
2148.wt-chart {
2149	overflow-x: auto;
2150	overflow-y: hidden;
2151}
2152
2153/* Fit thumbnail into parent on charts */
2154.select2-selection.select2-selection--single {
2155	min-height: 36px;
2156	height: auto;
2157	padding: 2px 0;
2158}
2159
2160.select2-container .select2-selection--single .select2-selection__rendered {
2161	padding-left: 2px;
2162}
2163
2164.select2-selection--single .NAME {
2165	padding-left: 4px;
2166}
2167
2168/*
2169 *  These selectors control how the short horizontal lines are positioned in the Charts
2170 *  Optimized for Win10 and FF, Chrome and Edge browsers
2171 *  	Ancestors
2172 *  	Descendants
2173 *  	amily book
2174 *  	Hourglass chart
2175 *
2176 */
2177
2178/* Ascentors */
2179.wt-chart-ancestors .linea1 {
2180	margin-bottom: 4px;
2181}
2182
2183.wt-chart-ancestors .linea2 {
2184	margin-bottom: 7px;
2185}
2186
2187.wt-chart-ancestors .linea3 {
2188	margin-bottom: 4px;
2189}
2190
2191.wt-chart-ancestors .linea4 {
2192	margin-bottom: 7px;
2193}
2194
2195.wt-chart-ancestors .linea5 {
2196	vertical-align: top;
2197}
2198
2199/* Descendants */
2200.wt-chart-descendants .lined1 {
2201	margin-bottom: 4px;
2202}
2203
2204.wt-chart-descendants .lined2 {
2205	margin-bottom: 7px;
2206}
2207
2208.wt-chart-descendants .lined3 {
2209	margin-bottom: 4px;
2210}
2211
2212.wt-chart-descendants .lined4 {
2213	margin-bottom: 7px;
2214}
2215
2216.wt-chart-descendants .linea5 {
2217	vertical-align: top;
2218}
2219
2220/* Family book */
2221.linef1 {
2222	margin-bottom: 3px;
2223}
2224
2225.linef2 {
2226	margin-bottom: 3px;
2227}
2228
2229.linef3 {
2230	margin-bottom: 7px;
2231}
2232
2233/* Hourglass */
2234.lineh1 {
2235	margin-bottom: 4px;
2236}
2237
2238.lineh2 {
2239	margin-bottom: 4px;
2240}
2241
2242.lineh3 {
2243	margin-bottom: 7px;
2244}
2245
2246/*
2247 * Pedigree chart
2248 *
2249 * wt-chart, wt-chart-pedigree
2250 */
2251
2252#pedigree_chart {
2253	position: relative;
2254	margin: 20px auto;
2255}
2256
2257#pedigree_canvas {
2258	z-index: -1000;
2259}
2260
2261#childbox-pedigree {
2262	border: 1px solid;
2263	background-color: #fff;
2264}
2265
2266#pedigree-page #childbox-pedigree {
2267	border: 1px solid;
2268	background-color: #fff;
2269}
2270
2271#childbox-pedigree {
2272	padding: 5px;
2273	position: absolute;
2274	display: none;
2275	text-align: start;
2276	white-space: nowrap;
2277	left: auto;
2278	z-index: 9999;
2279}
2280
2281.wt-chart-pedigree, .wt-chart-hourglass {
2282	overflow-y: auto;
2283}
2284
2285.wt-chart-pedigree .spacer {
2286	background-image: url(images/spacer.png);
2287	height: 20px;
2288	width: 1px;
2289}
2290
2291#pedigree-page .shadow {
2292	box-shadow: 0 0 0 !important; /* override vendor css shadow  */
2293}
2294
2295#childarrow,
2296.ancestorarrow {
2297	text-align: center;
2298	display: inline-block;
2299	vertical-align: middle;
2300}
2301
2302.layout3 #childbox-pedigree {
2303	top: auto;
2304}
2305
2306#childbox-pedigree a.name1 {
2307	display: block;
2308	margin-left: 5px;
2309}
2310
2311/*
2312 * Place hierarchy
2313 *
2314 * wt-place-hierarchy-page
2315 */
2316
2317#place-hierarchy ul {
2318	list-style-type: none;
2319}
2320
2321.d-table-cell {
2322	padding-right: 5px;
2323}
2324
2325/*
2326 * Search
2327 *
2328 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page
2329 */
2330
2331/* Some menus (e.g. languages) can be longer than a page */
2332.dropdown-menu {
2333	max-height: 30rem;
2334	overflow-x: hidden;
2335}
2336
2337/* Clipping cart */
2338.clipping-cart h2 {
2339	margin: 20px;
2340	text-align: center;
2341}
2342
2343.clipping-cart .wt-page-options {
2344	max-width: 25rem;
2345}
2346
2347.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar {
2348	font-size: 1rem;
2349}
2350
2351.clipping-cart .add-to {
2352	text-align: left;
2353}
2354
2355/* Forms */
2356.col-form-label {
2357	font-weight: bold;
2358}
2359
2360/* Popups */
2361.popup .nav-link {
2362	display: inline;
2363	vertical-align: top;
2364	padding: 5px;
2365}
2366
2367