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