/* Main style */

:root {
	--bar:  #5c7f48;
	--txt: Black;
	--drk:  #41493b;
	--ddrk: #20241d;
	--d3rk: #10120e;
	--d4rk: #070a06;
	--lgt:  #cfd1b4;
	--l3gt:  #f6edd9;
	--lnk: Blue;
	--lnv: DarkGreen;
	--pnk:  #fec7d0;
	--blu:  #c5d6fe;
	--bgd:  var(--l3gt);
	--brd:  var(--lgt);
}

body {
	color: var(--txt);
	background: var(--bgd);
	font-family: sans-serif;
	line-height: 1.5;
}

/* Link text */
a {
	color: var(--lnk);
}
a:visited {
	color: var(--lnv);
}

/* Link icons */

a[href$=".pdf"] { 
	padding-right: 18px;
	background: transparent url(pdf.gif) no-repeat center right;
}

a[href^="mailto:"]::after {
	content: "📧";
}

@media screen {
	:not(nav) > a[href*="pedigreem.html"]::after {
	content: "🗺";
	}
}

/* Add external link icon to absolute external links */

a[href^="http"]:not([href*="aegilops.com"])::after {
	content: "↗︎";
}

a[href^="http"][href*="ancestry.com"]::after, a[href^="http"][href*="myheritage.com"]::after {
	content: "↗︎$";
}

a[href^="http"][href*="archion.de"]::after {
	content: "↗︎€";
}

.pedis a[href^="http"]:not([href*="aegilops.com"])::after {
	content: "";
}

/* Horizontal rule */
hr {
	height: 4px;
	background-color: var(--bar);
	border-width: 0px;
}

.barchart a, .barchart .bar {
	background-color: var(--bar);
	font: 10px sans-serif;
	text-align: left;
	padding: 3px;
	margin: 1px;
	box-sizing: border-box;
	text-decoration: none;
	color: var(--l3gt);
	display: block;
	text-shadow: 1px 1px var(--drk);
	width: 60%;
	height: 22px;
}

.pedis {
	line-height: 1;
}
a.pedis, .pedis a, .pedis > .nolink {
	display: inline-block;
	text-decoration: none;
	border: 2px solid var(--brd);
	margin: 3px;
}
.pedis .caption {
	display: block;
	text-align: center;
	color: var(--txt);
	background: var(--brd);
	font-weight: bold;
}
.pedis img, .pedis .barchart {
	height: 96px;
	width: 96px;
	vertical-align: bottom;
	display: inline-block;
}

.pedis .button, .symbol, .pedis form {
	height: 96px;
	width: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
}

input {
	width: 100%;
}

nav td.current {
	color: Black;
	background: var(--lgt);
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.fadegrow {
	display: inline-block;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.appear { display: none; opacity: 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.pedis .fade, .pedis .draw, .pedis .fadegrow, .pedis .shake {
		transition: all 0.25s linear;
		opacity: 0.5;
		transform: scale(0.9);
	}
	.pedis .fadex {
		transition: all 0.25s linear;
		opacity: 0.5;
		transform: scale(0.2, 1.0);
	}
	.pedis .fader {
		transition: all 0.25s linear;
		opacity: 0.5;
		transform: scale(0.9) rotateY(180deg);
	}
	.pedis a:hover .fade, .pedis a:hover .fadex, .pedis a:hover .fader, .pedis .nolink:hover input.fade, .pedis input:focus { opacity: 1; transform: scale(1.0); }
	.pedis a:hover .fadegrow { opacity: 1; transform: scale(3); }
	.pedis a:hover .current { transition: all 0.25s linear; transform: scale(1.2); }
	.pedis .shade { filter: brightness(75%); text-shadow: 0px 0px 20px Black; }
	.pedis a:hover .shade { filter: brightness(100%); text-shadow: 0px 0px 20px LightYellow; }
	.pedis .appear { opacity: 0; transition: all 0.5s linear; }
	.pedis a:hover .appear { opacity: 1; }
	.pedis a:hover .draw {
		animation: drawn 2s cubic-bezier(.36,.07,.19,.97) both;
	}
	@keyframes drawn {
	   0% { transform: matrix(0.9, 0, 0, 0.9, 0, 0); opacity: 0.5; }
	  10% { transform: matrix(0.93, 0, 0, 0.9, -1, 0); opacity: 0.7; }
	  20% { transform: matrix(0.96, 0, 0, 0.9,  2, 1 );  opacity: 0.9;    }
	  30%, 70% { transform: translate(-3px, -2px); opacity: 1; }
	  40%, 60% { transform: translate( 3px, 2px); opacity: 1; }
	  50% { transform: translate(-3px, 2px); opacity: 1; }
	  80% { transform: translate( 2px, 1px); opacity: 1; }
	  90% { transform: translateX(-1px); opacity: 1; }
	 100% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; }
	}
	.pedis a:hover .barchart .growbar { width: 80%; transition: width 0.5s linear; }
	.pedis a:hover .shake {
		animation: shaken 2s linear both;
	}
	@keyframes shaken {
	    0% { transform: scale(0.9); opacity: 0.5; }
	    5% { transform: scale(0.92) skewX( 5deg); transform-origin: 50% 100%; opacity: 0.6; }
	   10% { transform: scale(0.95) skewX(-5deg); transform-origin: 50% 100%; opacity: 0.75; }
	   20% { transform: scale(0.98) skewX( 3deg); transform-origin: 50% 100%; opacity: 0.9; }
	   30% { transform: scale(1)    skewX(-3deg); transform-origin: 50% 100%; opacity: 1; }
	   40% { transform:             skewX( 1deg); transform-origin: 50% 100%; opacity: 1; }
	   50% { transform:             skewX(-1deg); transform-origin: 50% 100%; opacity: 1; }
	   60% { transform:             skewX( 0deg); opacity: 1; }
	  100% { transform:             skewX( 0deg); opacity: 1; }
	}
}

.pedis table {
	height: 100%;
	width: 100%;
	font-family: sans-serif;
	font-size: 10px;
	text-align: center;
	table-layout: fixed; 
}
.pedis td {
	border: 1px solid var(--bar);
	height: 17px;
	color: Black;
	background: White;
}

.pedis .symbol {
	text-align: center;
	display: table-cell;
	font-size: 72px;
	font-family: sans-serif;
	color: var(--txt);
	vertical-align: bottom;
	overflow: hidden;
}

.daypage {
	width: 86px;
	height: 86px;
	display: inline-block;
	text-align: center;
	border: 2px solid var(--brd);
	margin: 3px;
	font-family: sans-serif;
	color: var(--txt);
	vertical-align: bottom;
}
.daypagetop {
	font-size: 18px;
	background: var(--bar);
	width: 100%;
	height: 25%;
	color: var(--bgd);
	display: flex;
	align-items: center;
	justify-content: center;
}
.daypagebot {
	font-size: 60px;
	width: 100%;
	height: 75%;
	color: Black;
	background: White;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bbox, .bbox2, .pbox, .pbox2, .abox {
	width: 0.5em;
	height: 0.5em;
	display: inline-block;
	margin: 0;
}

.bbox, .bbox2 {
	border: 1px solid blue;
	background: 
		linear-gradient(to top,
		var(--blu) 0%,
		var(--blu) calc(50% - 1px),
		blue 50%,
		var(--blu) calc(50% + 1px),
		var(--blu) 100%);
}

.pbox, .pbox2 {
	border: 1px solid red;
	background-color: var(--pnk);
}

.bbox2, .pbox2 {
    transform: scaleX(0.5);
}

.abox {
	border: 1px solid gray;
	background: 
		linear-gradient(to right,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0) calc(50% - 1px),
		black 50%,
		rgba(0,0,0,0) calc(50% + 1px),
		rgba(0,0,0,0) 100%),
	linear-gradient(to top,
		rgba(220,220,220,1.0) 0%,
		rgba(220,220,220,1.0) calc(50% - 1px),
		black 50%,
		rgba(220,220,220,1.0) calc(50% + 1px),
		rgba(220,220,220,1.0) 100%);
}

h2.bar {
	overflow: hidden;
	text-align: center;
	background: var(--bgd);
}
h2.bar:before,
h2.bar:after {
	background: var(--bar);
	content: "";
	display: inline-block;
	height: .5em;
	position: relative;
	vertical-align: middle;
	width: 50%;
	margin-bottom: .15em;
}
h2.bar:before {
	right: 0.5em;
	margin-left: -50%;
}
h2.bar:after {
	left: 0.5em;
	margin-right: -50%;
}

@media screen {
	h2.bar {
		position: sticky;
		top: 0px;
	}
}


.tablestock, .tablesticky { border-collapse: collapse; border-width: 1px; border-style: solid; border-color: var(--brd);}
@media screen { .tablesticky th { position: sticky; top: 0; } }
.tablestock th, .tablesticky th { background-color: var(--bar); color: var(--bgd); }
.tablestock td, .tablesticky td { border-width: 0px 1px; border-style: solid; border-color: var(--brd); }
.tablestock tr:nth-child(odd) td, .tablesticky tr:nth-child(odd) td { background-color: var(--brd); border-color: var(--bgd); }
/* .tablesticky tr:nth-child(odd of :not([hidden])) td { background-color: var(--brd); border-color: var(--bgd); } */
@media print { input { display: none; } }

ul.genul {
	list-style-type: none;
	margin-left: 0em;
	padding-left: 0em;
}
ul.genul li:before {
	display: inline-block; 
	width: 1em;
	text-align: center; /* change this for different bullet position */
}
.w4em { display: inline-block; width: 4em; text-align: right; }

ul.genul li.a:before { content: "*"; }
ul.genul li.c:before { content: "~"; }
ul.genul li.e:before { content: "Y"; }
ul.genul li.g:before { content: "✏︎"; }
ul.genul li.h:before { content: "⚑"; }
ul.genul li.i:before { content: "⚭"; }
ul.genul li.j:before { content: "▥"; }
ul.genul li.k:before { content: "⌂"; }
ul.genul li.m:before { content: "⚓︎"; }
ul.genul li.n:before { content: "☆"; }
ul.genul li.o:before { content: "⌚︎"; }
ul.genul li.q:before { content: "✝︎"; }
ul.genul li.s:before { content: "⚰︎"; }

.coloricon {
	font-size: 300%;
	color: var(--bar);
	vertical-align:middle;
	font-weight: normal;
}

blockquote {  padding: 0 50px;  margin-left: 0;  border-left: 2px solid var(--bar); }

@media (prefers-color-scheme: dark) {
	:root {
		--bgd:  var(--d4rk);
		--lnk: LightBlue;
		--lnv: LightGreen;
/*		--txt:  #f5f8f3; */
		--txt:  #e8ddcb;
		--brd:  #172112;
/*		--bar:  #2e4024; */
	}
	img {
		opacity: 0.75;
		transition: opacity 0.5s ease-in-out;
	}
	img:hover { opacity: 1; }
	nav td.current a { color: Black; }
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

footer   {
  text-align: center;
  padding: 3px;
  border-radius: 25px;
  border: 4px solid var(--bar);
  padding: 0.5em;
}