Working on CSS and icons

55 files changed, 560 insertions, 409 deletions

diff --git a/resources/css/clouds.css b/resources/css/clouds.css
index 99565396ad..819de61763 100755
--- a/resources/css/clouds.css
+++ b/resources/css/clouds.css
@@ -15,6 +15,16 @@
 
 /* The clouds theme */
 
+/* Colors for chart boxes, etc. */
+:root {
+  --sex-f-fg: #aaaaaa;
+  --sex-m-fg: #aaaaaa;
+  --sex-u-fg: #aaaaaa;
+  --sex-f-bg: #ffdddd;
+  --sex-m-bg: #ddddff;
+  --sex-u-bg: #ffffff;
+}
+
 /* Override Bootstrap formatting */
 
 .table-given-name {
@@ -53,10 +63,24 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+	content: url(images/sex-F.png);
+}
+
+.wt-icon-sex-m {
+	content: url(images/sex-M.png);
+}
+
+.wt-icon-sex-u {
+	content: url(images/sex-U.png);
+}
+
+.wt-icon-sex-x {
+	content: url(images/sex-U.png);
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -239,7 +263,7 @@ a > .wt-icon-arrow-up:hover::before {
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -260,11 +284,22 @@ a > .wt-icon-arrow-up:hover::before {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
 .wt-global {
+	/* Prevent redraws when dynamic content requires a scrollbar. */
+	overflow-y: scroll;
+	/* Keep the page as tall as the window, so the footer can remain at the bottom. */
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	/* Any wide content will have its own horizontal scrollbar */
+	overflow-x: hidden;
 	background: #c8e7ff url(clouds/images/background.png) repeat-x fixed top left;
 	color: #006;
 }
@@ -287,9 +322,6 @@ a > .wt-icon-arrow-up:hover::before {
 .wt-header-content {
 }
 
-.wt-block-content {
-}
-
 .wt-accessibility-links {
 }
 
@@ -311,6 +343,12 @@ a > .wt-icon-arrow-up:hover::before {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 	order: 2;
 	flex: 0 0 0;
@@ -735,22 +773,32 @@ a > .wt-icon-arrow-up:hover::before {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
 }
 
-.wt-footer-content {
+.wt-footer {
 }
 
-.wt-contact-links {
+.wt-footer-contact {
+}
+
+.wt-footer-cookies {
+	background: #666;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -2758,7 +2806,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(clouds/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2854,6 +2902,7 @@ div.faq_body {
 	display: inline-block;
 	vertical-align: middle;
 	background-repeat: no-repeat;
+	background-size: cover;
 }
 
 .icon-add {
@@ -3012,42 +3061,6 @@ div.faq_body {
 	background-image: url(clouds/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(clouds/images/sex_f_15x15.png);
-}
-
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(clouds/images/sex_f_9x9.png);
-}
-
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(clouds/images/sex_m_15x15.png);
-}
-
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(clouds/images/sex_m_9x9.png);
-}
-
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(clouds/images/sex_u_15x15.png);
-}
-
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(clouds/images/sex_u_9x9.png);
-}
-
 .icon-source {
 	width: 25px;
 	height: 25px;
@@ -3370,11 +3383,3 @@ footer .error {
 	height: 22px;
 	background-image: url(clouds/images/user_add.png);
 }
-
-.cookie-warning {
-	background: #666;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
diff --git a/resources/css/clouds/images/sex_f_9x9.png b/resources/css/clouds/images/sex_f_9x9.png
deleted file mode 100644
index e35e46ccd4..0000000000
--- a/resources/css/clouds/images/sex_f_9x9.png
+++ /dev/null
diff --git a/resources/css/clouds/images/sex_m_9x9.png b/resources/css/clouds/images/sex_m_9x9.png
deleted file mode 100644
index 32a8484b1f..0000000000
--- a/resources/css/clouds/images/sex_m_9x9.png
+++ /dev/null
diff --git a/resources/css/clouds/images/sex_u_9x9.png b/resources/css/clouds/images/sex_u_9x9.png
deleted file mode 100644
index d113a1898c..0000000000
--- a/resources/css/clouds/images/sex_u_9x9.png
+++ /dev/null
diff --git a/resources/css/colors.css b/resources/css/colors.css
index 10782df472..7b9860859e 100644
--- a/resources/css/colors.css
+++ b/resources/css/colors.css
@@ -13,7 +13,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* The colors theme */
+/* The colors theme is based on the clouds theme */
+
+/* Colors for chart boxes, etc. */
+:root {
+}
 
 /* Override Bootstrap formatting */
 
@@ -94,10 +98,24 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+	content: url(images/sex-F.png);
+}
+
+.wt-icon-sex-m {
+	content: url(images/sex-M.png);
+}
+
+.wt-icon-sex-u {
+	content: url(images/sex-U.png);
+}
+
+.wt-icon-sex-x {
+	content: url(images/sex-U.png);
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -284,7 +302,7 @@ i[class*="wt-icon-media"] {
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -305,21 +323,28 @@ i[class*="wt-icon-media"] {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
-.wt-block-header::before {
-	content: url(colors/images/block-header-disk.png);
-}
-
 .wt-global {
+	/* Prevent redraws when dynamic content requires a scrollbar. */
+	overflow-y: scroll;
+	/* Keep the page as tall as the window, so the footer can remain at the bottom. */
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	/* Any wide content will have its own horizontal scrollbar */
+	overflow-x: hidden;
 	background: #fff; /* Override clouds */
 	color: #333;
 }
 
 .wt-header-wrapper {
-	background: inherit none;
+	background: #acf none;
 }
 
 .wt-header-wrapper .dropdown-item.active {
@@ -341,7 +366,6 @@ i[class*="wt-icon-media"] {
 }
 
 .wt-site-logo {
-	display: none;
 }
 
 .wt-site-title {
@@ -360,6 +384,12 @@ i[class*="wt-icon-media"] {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 	order: 2;
 	flex: 0 0 0;
@@ -749,22 +779,32 @@ i[class*="wt-icon-media"] {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
+}
+
+.wt-footer {
 }
 
-.wt-footer-content {
+.wt-footer-contact {
 }
 
-.wt-contact-links {
+.wt-footer-cookies {
+	background: #aaa;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -786,6 +826,10 @@ i[class*="wt-icon-media"] {
  * +---wt-block-content, wt-block-content-XXX
  */
 
+.wt-block-header::before {
+	content: url(colors/images/block-header-disk.png);
+}
+
 /*
  * Pending changes page
  *
@@ -2588,7 +2632,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(colors/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2843,41 +2887,6 @@ div.faq_body {
 	background-image: url(colors/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(colors/images/sex_f_15x15.png);
-}
-
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(colors/images/sex_f_9x9.png);
-}
-
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(colors/images/sex_m_15x15.png);
-}
-
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(colors/images/sex_m_9x9.png);
-}
-
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(colors/images/sex_u_15x15.png);
-}
-
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(colors/images/sex_u_9x9.png);
-}
 
 .icon-source {
 	width: 32px;
@@ -3148,15 +3157,3 @@ footer {
 	height: 25px;
 	background-image: url(colors/images/user_add.png);
 }
-
-.cookie-warning {
-	background: #aaa;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
-.cookie-warning.hidden {
-	height: 0;
-	overflow: hidden;
-}
diff --git a/resources/css/colors/images/lifespan-chunk.png b/resources/css/colors/images/lifespan-chunk.png
deleted file mode 100644
index 1eb0f30490..0000000000
--- a/resources/css/colors/images/lifespan-chunk.png
+++ /dev/null
diff --git a/resources/css/colors/images/sex_f_15x15.png b/resources/css/colors/images/sex_f_15x15.png
deleted file mode 100644
index 2d3abae32a..0000000000
--- a/resources/css/colors/images/sex_f_15x15.png
+++ /dev/null
diff --git a/resources/css/colors/images/sex_f_9x9.png b/resources/css/colors/images/sex_f_9x9.png
deleted file mode 100644
index e35e46ccd4..0000000000
--- a/resources/css/colors/images/sex_f_9x9.png
+++ /dev/null
diff --git a/resources/css/colors/images/sex_m_15x15.png b/resources/css/colors/images/sex_m_15x15.png
deleted file mode 100644
index 4ac7956421..0000000000
--- a/resources/css/colors/images/sex_m_15x15.png
+++ /dev/null
diff --git a/resources/css/colors/images/sex_m_9x9.png b/resources/css/colors/images/sex_m_9x9.png
deleted file mode 100644
index 32a8484b1f..0000000000
--- a/resources/css/colors/images/sex_m_9x9.png
+++ /dev/null
diff --git a/resources/css/colors/images/sex_u_15x15.png b/resources/css/colors/images/sex_u_15x15.png
deleted file mode 100644
index 158c3f9a10..0000000000
--- a/resources/css/colors/images/sex_u_15x15.png
+++ /dev/null
diff --git a/resources/css/colors/images/sex_u_9x9.png b/resources/css/colors/images/sex_u_9x9.png
deleted file mode 100644
index d113a1898c..0000000000
--- a/resources/css/colors/images/sex_u_9x9.png
+++ /dev/null
diff --git a/resources/css/common.css b/resources/css/common.css
index b595543bc8..cd7869f8ef 100755
--- a/resources/css/common.css
+++ b/resources/css/common.css
@@ -13,15 +13,142 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* Bootstrap4-beta2 provides text-nowrap, but not text-wrap.  We need to wrap long buttons */
-.text-wrap {
-	white-space: normal !important;
+/* Common styling */
+
+/* Colors for chart boxes, etc. */
+:root {
+}
+
+/* Override Bootstrap formatting */
+.btn-link {
+}
+
+/*
+ * Any element that is loaded dynamically has the class wt-ajax-load.
+ * We can provide a "loading" placeholder for empty elements with this class.
+ */
+.wt-ajax-load:empty {
+}
+
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+}
+
+.wt-icon-sex-m {
+}
+
+.wt-icon-sex-u {
+}
+
+.wt-icon-sex-x {
+}
+
+/*
+ * .wt-icon-arrow-down
+ * .wt-icon-arrow-end (right on LTR, left on RTL)
+ * .wt-icon-arrow-start (left on LTR, right on RTL)
+ * .wt-icon-arrow-up
+ * .wt-icon-bing-maps
+ * .wt-icon-calendar
+ * .wt-icon-copy
+ * .wt-icon-delete
+ * .wt-icon-edit
+ * .wt-icon-email
+ * .wt-icon-family
+ * .wt-icon-help
+ * .wt-icon-individual
+ * .wt-icon-google-maps
+ * .wt-icon-keyboard
+ * .wt-icon-media
+ * .wt-icon-note
+ * .wt-icon-openstreetmap
+ * .wt-icon-preferences
+ * .wt-icon-repository
+ * .wt-icon-source
+ * .wt-icon-submitter
+ */
+.wt-icon-arrow-down::before {
+}
+
+a > .wt-icon-arrow-down:hover::before {
+}
+
+.wt-icon-arrow-end::before {
+}
+
+a > .wt-icon-arrow-end:hover::before {
+}
+
+.wt-icon-arrow-start::before {
+}
+
+a > .wt-icon-arrow-start:hover::before {
+}
+
+.wt-icon-arrow-up::before {
+}
+
+a > .wt-icon-arrow-up:hover::before {
+}
+
+.wt-icon-bing-maps::before {
+}
+
+.wt-icon-calendar::before {
+}
+
+.wt-icon-coordinates::before {
+}
+
+.wt-icon-copy::before {
+}
+
+.wt-icon-delete::before {
+}
+
+.wt-icon-edit::before {
+}
+
+.wt-icon-family::before {
+}
+
+.wt-icon-help::before {
+}
+
+.wt-icon-google-maps::before {
+}
+
+.wt-icon-individual::before {
+}
+
+.wt-icon-keyboard::before {
+}
+
+.wt-icon-media::before {
+}
+
+.wt-icon-note::before {
+}
+
+.wt-icon-openstreetmap::before {
+}
+
+.wt-icon-preferences::before {
+}
+
+.wt-icon-repository::before {
+}
+
+.wt-icon-source::before {
+}
+
+.wt-icon-submitter::before {
 }
 
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -30,6 +157,8 @@
  *     |       +---wt-site-title
  *     |       +---wt-header-search
  *     |       |   +---wt-header-search-form
+ *     |       |       +---wt-header-search-field
+ *     |       |       +---wt-header-search-button
  *     |       +---wt-secondary-navigation
  *     |       |   +---wt-secondary-menu
  *     |       +---wt-primary-navigation
@@ -40,8 +169,11 @@
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
 .wt-global {
@@ -65,8 +197,6 @@
 }
 
 .wt-accessibility-links {
-	/* When we focus on the links, they should appear without changing the layout. */
-	position: fixed;
 }
 
 .wt-site-logo {
@@ -92,6 +222,12 @@
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 }
 
@@ -133,23 +269,22 @@
 	text-align: center;
 }
 
-.wt-footer-container {
+.wt-footers {
 }
 
-.wt-footer-content {
-	text-align: center;
+.wt-footer {
 }
 
-.wt-contact-links {
+.wt-footer-contact {
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies {
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
diff --git a/resources/css/fab.css b/resources/css/fab.css
index 5ec35e5c2f..83243ce795 100755
--- a/resources/css/fab.css
+++ b/resources/css/fab.css
@@ -15,6 +15,16 @@
 
 /* The FAB theme */
 
+/* Colors for chart boxes, etc. */
+:root {
+  --sex-f-fg: #9c3163;
+  --sex-m-fg: #31639c;
+  --sex-u-fg: #319c43;
+  --sex-f-bg: #ffdddd;
+  --sex-m-bg: #ddddff;
+  --sex-u-bg: #ddffdd;
+}
+
 /* Override Bootstrap formatting */
 .btn-link {
 	padding-left: 0.25rem;
@@ -43,10 +53,24 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f::before {
+	color: var(--sex-f-fg);
+}
+
+.wt-icon-sex-m::before {
+	color: var(--sex-m-fg);
+}
+
+.wt-icon-sex-u::before {
+	color: var(--sex-u-fg);
+}
+
+.wt-icon-sex-x::before {
+	color: var(--sex-u-fg);
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -70,28 +94,11 @@ table {
  * .wt-icon-source
  * .wt-icon-submitter
  */
-.wt-icon-bing-maps::before {
-	width: 16px;
-	height: 16px;
-	content: url(fab/icons/bing-maps.png);
-}
-
-.wt-icon-google-maps::before {
-	width: 16px;
-	height: 16px;
-	content: url(fab/icons/google-maps.png);
-}
-
-.wt-icon-openstreetmap::before {
-	width: 16px;
-	height: 16px;
-	content: url(fab/icons/openstreetmap.png);
-}
 
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -112,11 +119,22 @@ table {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
 .wt-global {
+	/* Prevent redraws when dynamic content requires a scrollbar. */
+	overflow-y: scroll;
+	/* Keep the page as tall as the window, so the footer can remain at the bottom. */
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	/* Any wide content will have its own horizontal scrollbar */
+	overflow-x: hidden;
 	color: #555;
 }
 
@@ -130,9 +148,6 @@ table {
 .wt-header-content {
 }
 
-.wt-block-content {
-}
-
 .wt-accessibility-links {
 }
 
@@ -155,6 +170,12 @@ table {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 	order: 2;
 	flex: 0 0 0;
@@ -238,22 +259,31 @@ table {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
 }
 
-.wt-footer-content {
+.wt-footer {
 }
 
-.wt-contact-links {
+.wt-footer-contact {
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies {
+	background: #aaa;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
+}
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -2201,7 +2231,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(fab/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2304,6 +2334,7 @@ div.faq_body {
 	display: inline-block;
 	vertical-align: middle;
 	background-repeat: no-repeat;
+	background-size: cover;
 }
 
 .icon-add {
@@ -2474,42 +2505,6 @@ div.faq_body {
 	background-image: url(fab/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(fab/images/sex_f_15x15.png);
-}
-
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(fab/images/sex_f_9x9.png);
-}
-
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(fab/images/sex_m_15x15.png);
-}
-
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(fab/images/sex_m_9x9.png);
-}
-
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(fab/images/sex_u_15x15.png);
-}
-
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(fab/images/sex_u_9x9.png);
-}
-
 .icon-slide_close {
 	width: 22px;
 	height: 20px;
@@ -2799,14 +2794,3 @@ footer {
 	background-image: url(fab/images/user_add.png);
 }
 
-.cookie-warning {
-	background: #aaa;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
-.cookie-warning.hidden {
-	height: 0;
-	overflow: hidden;
-}
diff --git a/resources/css/fab/icons/bing-maps.png b/resources/css/fab/icons/bing-maps.png
deleted file mode 100644
index 400627cf16..0000000000
--- a/resources/css/fab/icons/bing-maps.png
+++ /dev/null
diff --git a/resources/css/fab/icons/google-maps.png b/resources/css/fab/icons/google-maps.png
deleted file mode 100644
index 12ab0c14d5..0000000000
--- a/resources/css/fab/icons/google-maps.png
+++ /dev/null
diff --git a/resources/css/fab/icons/openstreetmap.png b/resources/css/fab/icons/openstreetmap.png
deleted file mode 100644
index 899e2a58b6..0000000000
--- a/resources/css/fab/icons/openstreetmap.png
+++ /dev/null
diff --git a/resources/css/fab/images/lifespan-chunk.png b/resources/css/fab/images/lifespan-chunk.png
deleted file mode 100644
index 1eb0f30490..0000000000
--- a/resources/css/fab/images/lifespan-chunk.png
+++ /dev/null
diff --git a/resources/css/fab/images/sex_f_15x15.png b/resources/css/fab/images/sex_f_15x15.png
deleted file mode 100644
index 2d3abae32a..0000000000
--- a/resources/css/fab/images/sex_f_15x15.png
+++ /dev/null
diff --git a/resources/css/fab/images/sex_f_9x9.png b/resources/css/fab/images/sex_f_9x9.png
deleted file mode 100644
index e35e46ccd4..0000000000
--- a/resources/css/fab/images/sex_f_9x9.png
+++ /dev/null
diff --git a/resources/css/fab/images/sex_m_15x15.png b/resources/css/fab/images/sex_m_15x15.png
deleted file mode 100644
index 4ac7956421..0000000000
--- a/resources/css/fab/images/sex_m_15x15.png
+++ /dev/null
diff --git a/resources/css/fab/images/sex_m_9x9.png b/resources/css/fab/images/sex_m_9x9.png
deleted file mode 100644
index 32a8484b1f..0000000000
--- a/resources/css/fab/images/sex_m_9x9.png
+++ /dev/null
diff --git a/resources/css/fab/images/sex_u_15x15.png b/resources/css/fab/images/sex_u_15x15.png
deleted file mode 100644
index 158c3f9a10..0000000000
--- a/resources/css/fab/images/sex_u_15x15.png
+++ /dev/null
diff --git a/resources/css/fab/images/sex_u_9x9.png b/resources/css/fab/images/sex_u_9x9.png
deleted file mode 100644
index d113a1898c..0000000000
--- a/resources/css/fab/images/sex_u_9x9.png
+++ /dev/null
diff --git a/resources/css/clouds/images/lifespan-chunk.png b/resources/css/images/lifespan-decade.png
index 1eb0f30490..1eb0f30490 100644
--- a/resources/css/clouds/images/lifespan-chunk.png
+++ b/resources/css/images/lifespan-decade.png
diff --git a/resources/css/clouds/images/sex_f_15x15.png b/resources/css/images/sex-F.png
index 2d3abae32a..2d3abae32a 100644
--- a/resources/css/clouds/images/sex_f_15x15.png
+++ b/resources/css/images/sex-F.png
diff --git a/resources/css/clouds/images/sex_m_15x15.png b/resources/css/images/sex-M.png
index 4ac7956421..4ac7956421 100644
--- a/resources/css/clouds/images/sex_m_15x15.png
+++ b/resources/css/images/sex-M.png
diff --git a/resources/css/clouds/images/sex_u_15x15.png b/resources/css/images/sex-U.png
index 158c3f9a10..158c3f9a10 100644
--- a/resources/css/clouds/images/sex_u_15x15.png
+++ b/resources/css/images/sex-U.png
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index d46d7be2d0..ae6140feb5 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -15,6 +15,16 @@
 
 /* The minimal theme */
 
+/* Colors for chart boxes, etc. */
+:root {
+  --sex-f-fg: #888888;
+  --sex-m-fg: #888888;
+  --sex-u-fg: #888888;
+  --sex-f-bg: #dddddd;
+  --sex-m-bg: #dddddd;
+  --sex-u-bg: #dddddd;
+}
+
 /* Override Bootstrap formatting */
 .btn-link {
 	padding-left: 0.25rem;
@@ -43,10 +53,24 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+	color: var(--sex-m-fg);
+}
+
+.wt-icon-sex-m {
+	color: var(--sex-m-fg);
+}
+
+.wt-icon-sex-u {
+	color: var(--sex-u-fg);
+}
+
+.wt-icon-sex-x {
+	color: var(--sex-u-fg);
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -70,28 +94,11 @@ table {
  * .wt-icon-source
  * .wt-icon-submitter
  */
-.wt-icon-bing-maps::before {
-	width: 16px;
-	height: 16px;
-	content: url(minimal/icons/bing-maps.png);
-}
-
-.wt-icon-google-maps::before {
-	width: 16px;
-	height: 16px;
-	content: url(minimal/icons/google-maps.png);
-}
-
-.wt-icon-openstreetmap::before {
-	width: 16px;
-	height: 16px;
-	content: url(minimal/icons/openstreetmap.png);
-}
 
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -112,8 +119,11 @@ table {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
 .wt-global {
@@ -122,6 +132,9 @@ table {
 	background-color: #f9f9f9;
 }
 
+.wt-header-wrapper {
+}
+
 .wt-header-container {
 	margin-top: 1rem;
 }
@@ -150,6 +163,12 @@ table {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 	order: 2;
 	flex: 0 0 0;
@@ -199,22 +218,32 @@ table {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
+}
+
+.wt-footer {
 }
 
-.wt-footer-content {
+.wt-footer-contact {
 }
 
-.wt-contact-links {
+.wt-footer-cookies {
+	background: #aaa;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -1937,7 +1966,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(minimal/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2091,6 +2120,7 @@ div.faq_body {
 	display: inline-block;
 	vertical-align: middle;
 	background-repeat: no-repeat;
+	background-size: cover;
 }
 
 .icon-add {
@@ -2246,42 +2276,6 @@ div.faq_body {
 	background-image: url(minimal/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(minimal/images/sex_f_15x15.png);
-}
-
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(minimal/images/sex_f_9x9.png);
-}
-
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(minimal/images/sex_m_15x15.png);
-}
-
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(minimal/images/sex_m_9x9.png);
-}
-
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(minimal/images/sex_u_15x15.png);
-}
-
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(minimal/images/sex_u_9x9.png);
-}
-
 .icon-sfamily {
 	width: 24px;
 	height: 24px;
@@ -2673,14 +2667,3 @@ footer {
 	background-image: url(minimal/images/search.png);
 }
 
-.cookie-warning {
-	background: #aaa;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
-.cookie-warning.hidden {
-	height: 0;
-	overflow: hidden;
-}
diff --git a/resources/css/minimal/icons/bing-maps.png b/resources/css/minimal/icons/bing-maps.png
deleted file mode 100644
index cdb327946a..0000000000
--- a/resources/css/minimal/icons/bing-maps.png
+++ /dev/null
diff --git a/resources/css/minimal/icons/google-maps.png b/resources/css/minimal/icons/google-maps.png
deleted file mode 100644
index 32a3957445..0000000000
--- a/resources/css/minimal/icons/google-maps.png
+++ /dev/null
diff --git a/resources/css/minimal/icons/openstreetmap.png b/resources/css/minimal/icons/openstreetmap.png
deleted file mode 100644
index 899e2a58b6..0000000000
--- a/resources/css/minimal/icons/openstreetmap.png
+++ /dev/null
diff --git a/resources/css/minimal/images/lifespan-chunk.png b/resources/css/minimal/images/lifespan-chunk.png
deleted file mode 100644
index 1eb0f30490..0000000000
--- a/resources/css/minimal/images/lifespan-chunk.png
+++ /dev/null
diff --git a/resources/css/minimal/images/sex_f_15x15.png b/resources/css/minimal/images/sex_f_15x15.png
deleted file mode 100644
index 196c9549d5..0000000000
--- a/resources/css/minimal/images/sex_f_15x15.png
+++ /dev/null
diff --git a/resources/css/minimal/images/sex_f_9x9.png b/resources/css/minimal/images/sex_f_9x9.png
deleted file mode 100644
index 9bc0dd7ae2..0000000000
--- a/resources/css/minimal/images/sex_f_9x9.png
+++ /dev/null
diff --git a/resources/css/minimal/images/sex_m_15x15.png b/resources/css/minimal/images/sex_m_15x15.png
deleted file mode 100644
index 34de9d351c..0000000000
--- a/resources/css/minimal/images/sex_m_15x15.png
+++ /dev/null
diff --git a/resources/css/minimal/images/sex_m_9x9.png b/resources/css/minimal/images/sex_m_9x9.png
deleted file mode 100644
index b74f8d8749..0000000000
--- a/resources/css/minimal/images/sex_m_9x9.png
+++ /dev/null
diff --git a/resources/css/minimal/images/sex_u_15x15.png b/resources/css/minimal/images/sex_u_15x15.png
deleted file mode 100644
index f613fab065..0000000000
--- a/resources/css/minimal/images/sex_u_15x15.png
+++ /dev/null
diff --git a/resources/css/minimal/images/sex_u_9x9.png b/resources/css/minimal/images/sex_u_9x9.png
deleted file mode 100644
index 724d334097..0000000000
--- a/resources/css/minimal/images/sex_u_9x9.png
+++ /dev/null
diff --git a/resources/css/webtrees.css b/resources/css/webtrees.css
index cd2b2118a5..dc6ea63775 100755
--- a/resources/css/webtrees.css
+++ b/resources/css/webtrees.css
@@ -15,6 +15,16 @@
 
 /* The webtrees theme */
 
+/* Colors for chart boxes, etc. */
+:root {
+  --sex-f-fg: #ff2080;
+  --sex-m-fg: #81a9cb;
+  --sex-u-fg: #81a9cb;
+  --sex-f-bg: #e9daf1;
+  --sex-m-bg: #edf7fd;
+  --sex-u-bg: #ffffff;
+}
+
 /* Override Bootstrap formatting */
 .btn-link {
 	padding-left: 0.25rem;
@@ -43,10 +53,20 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+}
+
+.wt-icon-sex-m {
+}
+
+.wt-icon-sex-u {
+}
+
+.wt-icon-sex-x {
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -229,7 +249,7 @@ a > .wt-icon-arrow-up:hover::before {
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -250,11 +270,22 @@ a > .wt-icon-arrow-up:hover::before {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
 .wt-global {
+	/* Prevent redraws when dynamic content requires a scrollbar. */
+	overflow-y: scroll;
+	/* Keep the page as tall as the window, so the footer can remain at the bottom. */
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	/* Any wide content will have its own horizontal scrollbar */
+	overflow-x: hidden;
 	color: #555;
 }
 
@@ -298,6 +329,12 @@ a > .wt-icon-arrow-up:hover::before {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
+.wt-header-search-button {
+}
+
 .wt-secondary-navigation {
 	order: 2;
 	white-space: nowrap;
@@ -713,22 +750,31 @@ a > .wt-icon-arrow-up:hover::before {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
 }
 
-.wt-footer-content {
+.wt-footer {
 }
 
-.wt-contact-links {
+.wt-footer-contact {
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies {
+	background: #aaa;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
+}
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -2627,7 +2673,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(webtrees/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2717,12 +2763,31 @@ div.faq_body {
 	min-width: 500px;
 }
 
+/* Customize the default (font-awesome) icons */
+.wt-icon-sex-f {
+	content: url(images/sex-F.png);
+}
+
+.wt-icon-sex-m {
+	content: url(images/sex-M.png);
+}
+
+.wt-icon-sex-u {
+	content: url(images/sex-U.png);
+}
+
+.wt-icon-sex-x {
+	content: url(images/sex-U.png);
+}
+
+
 /* ====== Common Icons ========= */
 [class^="icon-"],
 [class*=" icon-"] {
 	display: inline-block;
 	vertical-align: text-bottom;
 	background-repeat: no-repeat;
+	background-size: cover;
 }
 
 .icon-add {
@@ -2881,42 +2946,6 @@ div.faq_body {
 	background-image: url(webtrees/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(webtrees/images/sex_f_15x15.png);
-}
-
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(webtrees/images/sex_f_9x9.png);
-}
-
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(webtrees/images/sex_m_15x15.png);
-}
-
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(webtrees/images/sex_m_9x9.png);
-}
-
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(webtrees/images/sex_u_15x15.png);
-}
-
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(webtrees/images/sex_u_9x9.png);
-}
-
 .icon-source {
 	width: 20px;
 	height: 20px;
@@ -3186,15 +3215,3 @@ footer {
 	height: 20px;
 	background-image: url(webtrees/images/user_add.png);
 }
-
-.cookie-warning {
-	background: #aaa;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
-.cookie-warning.hidden {
-	height: 0;
-	overflow: hidden;
-}
diff --git a/resources/css/webtrees/images/lifespan-chunk.png b/resources/css/webtrees/images/lifespan-chunk.png
deleted file mode 100644
index 1eb0f30490..0000000000
--- a/resources/css/webtrees/images/lifespan-chunk.png
+++ /dev/null
diff --git a/resources/css/webtrees/images/sex_f_15x15.png b/resources/css/webtrees/images/sex_f_15x15.png
deleted file mode 100644
index 2d3abae32a..0000000000
--- a/resources/css/webtrees/images/sex_f_15x15.png
+++ /dev/null
diff --git a/resources/css/webtrees/images/sex_f_9x9.png b/resources/css/webtrees/images/sex_f_9x9.png
deleted file mode 100644
index e35e46ccd4..0000000000
--- a/resources/css/webtrees/images/sex_f_9x9.png
+++ /dev/null
diff --git a/resources/css/webtrees/images/sex_m_15x15.png b/resources/css/webtrees/images/sex_m_15x15.png
deleted file mode 100644
index 4ac7956421..0000000000
--- a/resources/css/webtrees/images/sex_m_15x15.png
+++ /dev/null
diff --git a/resources/css/webtrees/images/sex_m_9x9.png b/resources/css/webtrees/images/sex_m_9x9.png
deleted file mode 100644
index 32a8484b1f..0000000000
--- a/resources/css/webtrees/images/sex_m_9x9.png
+++ /dev/null
diff --git a/resources/css/webtrees/images/sex_u_15x15.png b/resources/css/webtrees/images/sex_u_15x15.png
deleted file mode 100644
index 158c3f9a10..0000000000
--- a/resources/css/webtrees/images/sex_u_15x15.png
+++ /dev/null
diff --git a/resources/css/webtrees/images/sex_u_9x9.png b/resources/css/webtrees/images/sex_u_9x9.png
deleted file mode 100644
index d113a1898c..0000000000
--- a/resources/css/webtrees/images/sex_u_9x9.png
+++ /dev/null
diff --git a/resources/css/xenea.css b/resources/css/xenea.css
index 1f753b6d6e..829261c7cb 100755
--- a/resources/css/xenea.css
+++ b/resources/css/xenea.css
@@ -15,6 +15,16 @@
 
 /* The xenea theme */
 
+/* Colors for chart boxes, etc. */
+:root {
+  --sex-f-fg: #ff2080;
+  --sex-m-fg: #84beff;
+  --sex-u-fg: #008080;
+  --sex-f-bg: #fff0f0;
+  --sex-m-bg: #f0f9ff;
+  --sex-u-bg: #ffffff;
+}
+
 /* Override Bootstrap formatting */
 .btn-link {
 	padding-left: 0.25rem;
@@ -43,10 +53,20 @@ table {
 	background: url(images/loading-32x32.gif) no-repeat 50% 50%;
 }
 
+/* Default icons are provided by FontAwesome. */
+.wt-icon-sex-f {
+}
+
+.wt-icon-sex-m {
+}
+
+.wt-icon-sex-u {
+}
+
+.wt-icon-sex-x {
+}
+
 /*
- * Icons use FontAwesome by default, but have additional classes to
- * allow them to be overridden
- *
  * .wt-icon-arrow-down
  * .wt-icon-arrow-end (right on LTR, left on RTL)
  * .wt-icon-arrow-start (left on LTR, right on RTL)
@@ -229,7 +249,7 @@ a > .wt-icon-arrow-up:hover::before {
 /*
  * Pages have the following high-level structure:
  *
- * wt-global
+ * wt-global wt-theme-<THEME> wt-route-<ROUTE>
  * +---wt-header-wrapper
  *     +---wt-header-container
  *     |   +---wt-header-content
@@ -250,11 +270,22 @@ a > .wt-icon-arrow-up:hover::before {
  *     |       +---wt-page-title
  *     |       +---wt-page-options wt-page-options-xxxxx
  *     |       +---wt-page-content
- *     +---wt-footer-container
- *         +---wt-footer-content
+ *     +---wt-footers
+ *         +---wt-footer wt-footer-contact
+ *         +---wt-footer wt-footer-cookies
+ *         +---wt-footer wt-footer-page-views
+ *         +---wt-footer wt-footer-powered-by
  */
 
 .wt-global {
+	/* Prevent redraws when dynamic content requires a scrollbar. */
+	overflow-y: scroll;
+	/* Keep the page as tall as the window, so the footer can remain at the bottom. */
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	/* Any wide content will have its own horizontal scrollbar */
+	overflow-x: hidden;
 	color: #006;
 }
 
@@ -293,6 +324,9 @@ a > .wt-icon-arrow-up:hover::before {
 .wt-header-search-form {
 }
 
+.wt-header-search-field {
+}
+
 .wt-header-search-button {
 	color: #000;
 	background: #ddd;
@@ -712,22 +746,32 @@ a > .wt-icon-arrow-up:hover::before {
 	margin-top: 1rem;
 }
 
-.wt-footer-container {
+.wt-footers {
 }
 
-.wt-footer-content {
+.wt-footer {
 }
 
-.wt-contact-links {
+.wt-footer-contact {
 }
 
-.wt-powered-by-webtrees {
+.wt-footer-cookies {
+	background: #aaa;
+	color: #fff;
+	height: 3em;
+	line-height: 2.5em;
+	transition: height 0.5s;
+}
+
+.wt-footer-cookies.hidden {
+	height: 0;
+	overflow: hidden;
 }
 
-.wt-page-views {
+.wt-footer-page-views {
 }
 
-.wt-cookie-warning {
+.wt-footer-powered-by {
 }
 
 /*
@@ -2530,7 +2574,7 @@ div.faq_body {
 	width: 70px;
 	height: 60px;
 	display: inline-block;
-	background-image: url(xenea/images/lifespan-chunk.png);
+	background-image: url(images/lifespan-decade.png);
 	background-position-y: bottom;
 	background-repeat: no-repeat;
 	background-size: 70px 37px;
@@ -2626,6 +2670,7 @@ div.faq_body {
 	display: inline-block;
 	vertical-align: text-bottom;
 	background-repeat: no-repeat;
+	background-size: cover;
 }
 
 .icon-add {
@@ -2784,40 +2829,37 @@ div.faq_body {
 	background-image: url(xenea/images/selected.png);
 }
 
-.icon-sex_f_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(xenea/images/sex_f_15x15.png);
+.wt-icon-sex-f {
+	width: 1rem;
+	height: 1rem;
+	background-image: url(images/sex-F.png);
 }
 
-.icon-sex_f_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(xenea/images/sex_f_9x9.png);
+small > .wt-icon-sex-f {
+	width: 0.6rem;
+	height: 0.6rem;
 }
 
-.icon-sex_m_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(xenea/images/sex_m_15x15.png);
+.wt-icon-sex-m {
+	width: 1rem;
+	height: 1rem;
+	background-image: url(images/sex-M.png);
 }
 
-.icon-sex_m_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(xenea/images/sex_m_9x9.png);
+small > .wt-icon-sex-m {
+	width: 0.6rem;
+	height: 0.6rem;
 }
 
-.icon-sex_u_15x15 {
-	width: 15px;
-	height: 15px;
-	background-image: url(xenea/images/sex_u_15x15.png);
+.wt-icon-sex-u {
+	width: 1rem;
+	height: 1rem;
+	background-image: url(images/sex-U.png);
 }
 
-.icon-sex_u_9x9 {
-	width: 9px;
-	height: 9px;
-	background-image: url(xenea/images/sex_u_9x9.png);
+small > .wt-icon-sex-u {
+	width: 0.6rem;
+	height: 0.6rem;
 }
 
 .icon-source {
@@ -3086,15 +3128,3 @@ footer {
 	height: 25px;
 	background-image: url(xenea/images/user_add.png);
 }
-
-.cookie-warning {
-	background: #aaa;
-	color: #fff;
-	height: 3em;
-	line-height: 2.5em;
-	transition: height 0.5s;
-}
-.cookie-warning.hidden {
-	height: 0;
-	overflow: hidden;
-}
diff --git a/resources/css/xenea/images/lifespan-chunk.png b/resources/css/xenea/images/lifespan-chunk.png
deleted file mode 100644
index 1eb0f30490..0000000000
--- a/resources/css/xenea/images/lifespan-chunk.png
+++ /dev/null
diff --git a/resources/css/xenea/images/sex_f_15x15.png b/resources/css/xenea/images/sex_f_15x15.png
deleted file mode 100644
index 2d3abae32a..0000000000
--- a/resources/css/xenea/images/sex_f_15x15.png
+++ /dev/null
diff --git a/resources/css/xenea/images/sex_f_9x9.png b/resources/css/xenea/images/sex_f_9x9.png
deleted file mode 100644
index e35e46ccd4..0000000000
--- a/resources/css/xenea/images/sex_f_9x9.png
+++ /dev/null
diff --git a/resources/css/xenea/images/sex_m_15x15.png b/resources/css/xenea/images/sex_m_15x15.png
deleted file mode 100644
index 4ac7956421..0000000000
--- a/resources/css/xenea/images/sex_m_15x15.png
+++ /dev/null
diff --git a/resources/css/xenea/images/sex_m_9x9.png b/resources/css/xenea/images/sex_m_9x9.png
deleted file mode 100644
index 32a8484b1f..0000000000
--- a/resources/css/xenea/images/sex_m_9x9.png
+++ /dev/null
diff --git a/resources/css/xenea/images/sex_u_15x15.png b/resources/css/xenea/images/sex_u_15x15.png
deleted file mode 100644
index 158c3f9a10..0000000000
--- a/resources/css/xenea/images/sex_u_15x15.png
+++ /dev/null
diff --git a/resources/css/xenea/images/sex_u_9x9.png b/resources/css/xenea/images/sex_u_9x9.png
deleted file mode 100644
index d113a1898c..0000000000
--- a/resources/css/xenea/images/sex_u_9x9.png
+++ /dev/null