xref: /webtrees/resources/css/minimal.css (revision e16a1bfdc151cca06b727ccf08cd4f43ed7d6e55)
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/* Lifespans chart */
1371.wt-lifespans-subtitle {
1372	text-align: center;
1373}
1374
1375.wt-lifespans-scale {
1376	white-space: nowrap;
1377}
1378
1379.wt-lifespans-decade {
1380	width: 70px;
1381	height: 60px;
1382	display: inline-block;
1383	background-image: url(images/lifespan-decade.png);
1384	background-position-y: bottom;
1385	background-repeat: no-repeat;
1386	background-size: 70px 37px;
1387}
1388
1389.wt-lifespans-individuals {
1390	background: #fafafa;
1391}
1392
1393.wt-lifespans-individual {
1394
1395}
1396
1397.wt-lifespans-summary {
1398	background: #ffffff;
1399	border: thin solid #000;
1400	z-index: 1;
1401}
1402
1403.wt-lifespans-summary-link {
1404	font-weight: bold;
1405}
1406
1407/*-- Pedigree ---- */
1408.tvertline {
1409	vertical-align: bottom;
1410}
1411
1412.optionbox, .descriptionbox {
1413	border: solid #000 1px;
1414	vertical-align: top;
1415	padding: 3px;
1416}
1417
1418#childbox {
1419	padding: 5px;
1420	position: absolute;
1421	display: none;
1422	text-align: start;
1423	white-space: nowrap;
1424	top: 20px;
1425	left: 0;
1426}
1427
1428.layout3 #childbox {
1429	top: auto;
1430	bottom: 20px;
1431}
1432
1433#childbox a.name1 {
1434	display: block;
1435	margin-left: 5px;
1436}
1437
1438.person0, .person1, .person2, .person3, .person4, .person5 {
1439	border:outset #555 1px;
1440	vertical-align:top;
1441}
1442.person0{
1443	background-color:#eee;
1444}
1445
1446.person1{
1447	background-color:#bfbfbf;
1448}
1449
1450.person2{
1451	background-color:#999;
1452}
1453
1454.person3{
1455	background-color:#dfdfdf;
1456}
1457
1458.person4{
1459	background-color:#eee;
1460}
1461
1462.person5{
1463	background-color:#fefefe;
1464}
1465
1466/*-- timeline  --*/
1467#timeline_chart {
1468	position: relative;
1469	top: 0;
1470	left: 0;
1471}
1472
1473/*
1474 * Any element that is loaded dynamically has the class wt-ajax-load.
1475 * We can provide a "loading" placeholder for empty elements with this class.
1476 */
1477.wt-ajax-load:empty {
1478	height: 32px;
1479	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
1480}
1481
1482/*
1483 * Default icons are provided by FontAwesome.
1484 * Some icons get mirrored on RTL pages.  Typiclly arrows
1485 */
1486[dir=rtl] .wt-flip-rtl {
1487	transform: scale(-1, 1);
1488}
1489
1490.wt-icon-anniversary {
1491}
1492
1493.wt-icon-arrow-down {
1494}
1495
1496a > .wt-icon-arrow-down:hover {
1497}
1498
1499.wt-icon-arrow-left {
1500}
1501
1502a > .wt-icon-arrow-left:hover {
1503}
1504
1505.wt-icon-arrow-right {
1506}
1507
1508a > .wt-icon-arrow-right:hover {
1509}
1510
1511.wt-icon-arrow-up {
1512}
1513
1514a > .wt-icon-arrow-up:hover {
1515}
1516
1517.wt-icon-collapse {
1518}
1519
1520.wt-icon-coordinates {
1521}
1522
1523.wt-icon-expand {
1524}
1525
1526.wt-icon-reorder {
1527}
1528
1529.wt-icon-sex-f {
1530	color: var(--sex-m-fg);
1531}
1532
1533.wt-icon-sex-m {
1534	color: var(--sex-m-fg);
1535}
1536
1537.wt-icon-sex-u {
1538	color: var(--sex-u-fg);
1539}
1540
1541.wt-icon-sex-x {
1542	color: var(--sex-u-fg);
1543}
1544
1545.wt-icon-warning {
1546}
1547
1548.wt-icon-zoom-in {
1549}
1550
1551.wt-icon-zoom-out {
1552}
1553
1554/*
1555 * .wt-icon-bing-maps
1556 * .wt-icon-calendar
1557 * .wt-icon-copy
1558 * .wt-icon-delete
1559 * .wt-icon-edit
1560 * .wt-icon-email
1561 * .wt-icon-family
1562 * .wt-icon-help
1563 * .wt-icon-individual
1564 * .wt-icon-google-maps
1565 * .wt-icon-keyboard
1566 * .wt-icon-media
1567 * .wt-icon-note
1568 * .wt-icon-openstreetmap
1569 * .wt-icon-preferences
1570 * .wt-icon-repository
1571 * .wt-icon-source
1572 * .wt-icon-submitter
1573 */
1574[class^="icon-"],
1575[class*=" icon-"] {
1576	display: inline-block;
1577	vertical-align: middle;
1578	background-repeat: no-repeat;
1579	background-size: cover;
1580}
1581
1582.icon-add {
1583	width: 14px;
1584	height: 15px;
1585	background-image: url(images/add.png);
1586}
1587
1588.icon-cfamily {
1589}
1590
1591.icon-childless {
1592	width: 25px;
1593	height: 25px;
1594	background-image: url(minimal/images/childless.png);
1595}
1596
1597.icon-children {
1598	width: 16px;
1599	height: 16px;
1600	background-image: url(minimal/images/children.png);
1601}
1602
1603.icon-clippings {
1604	width: 22px;
1605	height: 22px;
1606	background-image: url(minimal/images/clippings.png);
1607}
1608
1609.icon-edit_indi {
1610	width: 20px;
1611	height: 20px;
1612	background-image: url(minimal/images/edit_sm.png);
1613}
1614
1615.icon-fam-list {
1616	width: 20px;
1617	height: 20px;
1618	background-image: url(minimal/icons/family.png);
1619}
1620
1621.icon-indi-list {
1622	width: 20px;
1623	height: 20px;
1624	background-image: url(minimal/images/indis.png);
1625}
1626
1627.icon-loading-small {
1628	width: 16px;
1629	height: 16px;
1630	background-image: url(minimal/images/indicator.gif);
1631}
1632
1633.icon-loading-large {
1634	width: 32px;
1635	height: 32px;
1636	background-image: url(images/loading-32x32.gif);
1637}
1638
1639.icon-media {
1640	width: 20px;
1641	height: 20px;
1642	background-image: url(minimal/images/media.png);
1643}
1644
1645.icon-media-list {
1646	width: 20px;
1647	height: 20px;
1648	background-image: url(minimal/images/media.png);
1649}
1650
1651.icon-media-next {
1652	width: 20px;
1653	height: 20px;
1654	background-image: url(minimal/images/rdarrow.png);
1655}
1656
1657.icon-media-play {
1658	width: 20px;
1659	height: 20px;
1660	background-image: url(minimal/images/rarrow.png);
1661}
1662
1663.icon-media-stop {
1664	width: 16px;
1665	height: 17px;
1666	background-image: url(minimal/images/stop.png);
1667}
1668
1669.icon-minus {
1670	width: 11px;
1671	height: 11px;
1672	background-image: url(minimal/images/minus.png);
1673}
1674
1675.icon-mypage {
1676	width: 24px;
1677	height: 24px;
1678	background-image: url(minimal/images/mypage.png);
1679}
1680
1681.icon-note {
1682	width: 20px;
1683	height: 20px;
1684	background-image: url(minimal/icons/note.png);
1685}
1686
1687.icon-plus {
1688	width: 11px;
1689	height: 11px;
1690	background-image: url(minimal/images/plus.png);
1691}
1692
1693.icon-remove {
1694	width: 14px;
1695	height: 15px;
1696	background-image: url(minimal/images/remove.png);
1697}
1698
1699.icon-resn-confidential {
1700	width: 16px;
1701	height: 16px;
1702	background-image: none;
1703}
1704
1705.icon-resn-locked {
1706	background-image: none;
1707}
1708
1709.icon-resn-none {
1710	background-image: none;
1711}
1712
1713.icon-resn-privacy {
1714	background-image: none;
1715}
1716
1717.icon-rings {
1718	width: 9px;
1719	height: 9px;
1720	background-image: url(minimal/images/rings.png);
1721}
1722
1723.icon-selected {
1724	width: 12px;
1725	height: 12px;
1726	background-image: url(minimal/images/selected.png);
1727}
1728
1729.icon-sfamily {
1730	width: 24px;
1731	height: 24px;
1732	background-image: url(minimal/images/sfamily.png);
1733}
1734
1735.icon-source {
1736	width: 20px;
1737	height: 20px;
1738	background-image: url(minimal/images/source.png);
1739}
1740
1741/* Silhouettes on charts */
1742.icon-silhouette-F {
1743	width: 37px;
1744	height: 50px;
1745	background-image: url(minimal/images/silhouette_female_small.png);
1746}
1747
1748.icon-silhouette-M {
1749	width: 37px;
1750	height: 50px;
1751	background-image: url(minimal/images/silhouette_male_small.png);
1752}
1753
1754.icon-silhouette-U {
1755	width: 37px;
1756	height: 50px;
1757	background-image: url(minimal/images/silhouette_unknown_small.png);
1758}
1759
1760.icon-indis {
1761	width: 24px;
1762	height: 24px;
1763	background-image: url(minimal/images/indis.png);
1764}
1765
1766.icon-pedigree {
1767	width: 24px;
1768	height: 24px;
1769	background-image: url(minimal/images/pedigree.png);
1770}
1771
1772.icon-search {
1773	width: 24px;
1774	height: 24px;
1775	background-image: url(minimal/images/search.png);
1776}
1777
1778/* Census assistant */
1779.wt-census-assistant-form-control:focus {
1780	min-width: 12rem;
1781}
1782
1783/*
1784 * Drag and drop sortable lists
1785 */
1786.wt-sortable-list {
1787}
1788
1789.wt-sortable-item {
1790	cursor: move;
1791}
1792
1793/* Some blocks show a reduced version on the right-hand side. */
1794.wt-side-blocks .wt-side-block-optional {
1795	display: none !important;
1796}
1797
1798/* my page chart enhancements */
1799.wt-block-content-charts {
1800	flex-flow: column-reverse;
1801	overflow: auto;
1802}
1803
1804.wt-block-content-todays-events-block {
1805	padding: .25rem;
1806}
1807
1808/* Some charts are wider than the page. */
1809.wt-chart {
1810	overflow-x: auto;
1811	overflow-y: hidden;
1812}
1813
1814/* Fit thumbnail into parent on charts */
1815.select2-selection.select2-selection--single {
1816	min-height: 36px;
1817	height: auto;
1818	padding: 2px 0;
1819}
1820
1821.select2-container .select2-selection--single .select2-selection__rendered {
1822	padding-left: 2px;
1823}
1824
1825.select2-selection--single .NAME {
1826	padding-left: 4px;
1827}
1828
1829/*
1830 *  These selectors control how the short horizontal lines are positioned in the Charts
1831 *  Optimized for Win10 and FF, Chrome and Edge browsers
1832 *  	Ancestors
1833 *  	Descendants
1834 *  	amily book
1835 *
1836 */
1837
1838/* Ascentors */
1839.wt-chart-ancestors .linea1 {
1840	margin-bottom: 4px;
1841}
1842
1843.wt-chart-ancestors .linea2 {
1844	margin-bottom: 7px;
1845}
1846
1847.wt-chart-ancestors .linea3 {
1848	margin-bottom: 4px;
1849}
1850
1851.wt-chart-ancestors .linea4 {
1852	margin-bottom: 7px;
1853}
1854
1855.wt-chart-ancestors .linea5 {
1856	vertical-align: top;
1857}
1858
1859/* Descendants */
1860.wt-chart-descendants .lined1 {
1861	margin-bottom: 4px;
1862}
1863
1864.wt-chart-descendants .lined2 {
1865	margin-bottom: 7px;
1866}
1867
1868.wt-chart-descendants .lined3 {
1869	margin-bottom: 4px;
1870}
1871
1872.wt-chart-descendants .lined4 {
1873	margin-bottom: 7px;
1874}
1875
1876.wt-chart-descendants .linea5 {
1877	vertical-align: top;
1878}
1879
1880/*
1881 * Place hierarchy
1882 *
1883 * wt-place-hierarchy-page
1884 */
1885
1886#place-hierarchy ul {
1887	list-style-type: none;
1888}
1889
1890.d-table-cell {
1891	padding-right: 5px;
1892}
1893
1894/* Some menus (e.g. languages) can be longer than a page */
1895.dropdown-menu {
1896	max-height: 30rem;
1897	overflow-x: hidden;
1898}
1899
1900/* Forms */
1901.col-form-label {
1902	font-weight: bold;
1903}
1904