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