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