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