/* Author:		Grzegorz Petri @ 2020
 * Contact:		gpetri13@gmail.com
 */
html {
--primary-color:	#529113;
--primary-text:		#404040;
--secondary-color:	#98dd50;
--accent-color:		#ffff46;
--neutral-color:	#98dd50;
--boxes-active:		#cbc5c5;
--boxes-color:		#808080;
--boxes-text:		#98dd50;
}
.version {
	display: inline-block;
	float: right;
	margin: 0 1rem;
}
.version::after {
	color: var(--secondary-color);
	font-family: Georgia;
	font-size: 2.4rem;
	font-style: italic;
	font-weight: 800;
	line-height: 1rem;
	text-shadow: 1px 1px 1px var(--primary-text);
}
[href='#top'] {
	/*border-top-left-radius: 50% 100%;
	border-top-right-radius: 50% 100%;*/
	border: solid 1px var(--secondary-color);
	border-top: dashed 1px var(--secondary-color);
	border-bottom: solid 3px var(--primary-color);
	display: inline-block;
	float: right;
	font-size: 2.4rem;
	line-height: 2rem;
	margin: 1.4rem;
	text-align: center;
	text-decoration: none;
	width: 2rem;
outline: dashed 0 red;
}
[href='#top']::after { content: "↥"; }/* ⇑ */
[href='#top']:focus, [href='#top']:hover {
	border: solid 1px var(--secondary-color);
	border-bottom: dashed 1px var(--secondary-color);
	border-top: solid 3px var(--primary-color);
}
[href='#top']:focus::after, [href='#top']:hover::after { content: "⤒"; }/* ⇑ */
#timer {
	position: relative;
	/*top: -5rem;*/
	min-height: 520px;
}
#timer::before {
	position: absolute;
	/*background-color: rgba(203,197,197,0.8);
	background-image: url('lost-in-time-by-Lars-Schlosser.jpg');*/
	background-image: url('The_Persistence_of_Memory_by_Salvador_Dali.jpg');
	background-size: contain;
	content: ' ';
	display: block;
	filter: blur(5px);
	opacity: .5;
	min-height: 520px;
	width: 100%;
}
.timers {
	position: relative;
	top: 0rem;
}
/* * * * * * * * * * * * *\
 * Site Header
 * * * * * * * * * * * * */
body {
	background-color: var(--secondary-color);
	font-family: Lato,Verdana,Arial;
	font-size: 20px;
}
body > header {
	background-color: var(--boxes-color);
	border-radius: 16px;
	padding: .5em .8em;
}
body > header > a {	float: left; }
body > header > a img {	border: solid 2px transparent; }
body > header > a:focus img,
body > header > a:hover img {
	border: solid 2px var(--primary-color);
	border-radius: 13px;
}
body > header img {

	margin: 0 1em;
	height: 80px;
	margin-top: -0.75em;
	width: auto;
}
body > header img::after,
body > footer a::after {
	content: '\A';
	white-space: pre;
}
nav a {
	color: var(--accent-color);
	font-weight: 800;
	text-decoration: none;
	/*text-shadow: var(--primary-text) 1px 1px 1px;*/
	padding: .5em 1em;
}
nav a:hover, nav a:focus {
	background-color: var(--boxes-active);
	color:  var(--primary-color);
	text-shadow: none;
}
nav a img {	display: none; }
header + h1 {
	background-color: var(--boxes-active);
	border: dashed 2px var(--boxes-color);
	border-top: solid 0px var(--boxes-color);
	border-radius: 0px 0px 16px 16px;
	color: var(--primary-color);
	font-family: Georgia;
	font-size: 1em;
	font-style: italic;
	line-height: 1em;
	margin: -1em 0px .2em 0px;
	padding-top: 1.2em;
	padding-bottom: .2em;
	position: relative;
	z-index: -1;
}
article a, section a {
	color: var(--secondary-color);
}
article p a, section p a {
	color: var(--primary-color);
	padding: 0 .5rem;
}
article p a:focus, section p a:focus,
article p a:hover, section p a:hover {
	color: var(--secondary-color);
	/*text-shadow: var(--primary-text) 1px 1px 1px;*/
	background-color: var(--boxes-color);
}
/* * * * * * * * * * * * *\
 *  Visual-Style Selector
 * * * * * * * * * * * * */
nav ul {
	border: solid 2px #ffff46;
	border-radius: 16px;
	background-color: #cbc5c5;
	display: inline-block;
	float: right;
	margin: 0px;
	padding-left: 20px;
	height: 42px;
	min-height: 42px;
	width: 42px;
}
nav ul li {
	display: none;
	font-size: 12px;
}
nav ul:hover {	height: auto; }
nav ul:hover li {	display: block; }

.timer > label, .timer > input, .timer > button {
	border-color: var(--boxes-color) !important;
}
/* * * * * * * * * * * * *\
 * Sites Main Content
 * * * * * * * * * * * * */
body > article {
	background-color: var(--boxes-color);
	color: var(--secondary-color);
	/*text-shadow: var(--primary-text) 2px 1px 1px;*/
	border-radius: 16px;
}
body > article  {
	padding-top: .1rem;
	padding-bottom: 1rem;
	margin: 7rem 0px;
}
section, aside {
	border: solid 2px #808080;
	display: inline-block;
	float: left;
}
section {
	background-color: var(--secondary-color);
	border-radius: 16px 0px 0px 16px;
	padding: 0.2em;
}
.greyBox {
	background-color: var(--boxes-active);
}
article h2, section h2 {
	color: var(--secondary-color);
	font-style: italic;
	margin: 1rem 4rem;
	text-decoration: underline;
	text-shadow: var(--primary-text) 2px 1px 1px;
}
article h3, section h3 {
	background-color: var(--boxes-active);
	color: var(--primary-color);
	margin: 0px;
	padding: 1rem 2rem 0rem 2rem;
	text-shadow: none;
}
article p, section p {
	background-color: var(--boxes-active);
	color: var(--primary-text);
	margin: 0px;
	padding: 1rem 2rem;
	text-align: justify;
	text-indent: 2.5rem;
	text-shadow: none;
}
h3 span { text-shadow: var(--boxes-color) 2px 1px 1px; }
aside {
	background-color: var(--boxes-color);
	border-radius: 0px 16px 16px 0px;
	text-align: left;
}
aside h2 { text-align: center; }
@media only screen and (max-width: 900px) {
	body > header img {
		margin: 0px;
		height: 60px;
		margin-top: -0.5em;
	}
	nav a {
		padding: 0.5em;
	}
	header + h1 {
		font-size: 0.8em;
		line-height: 0.8em;
		text-align: center;
	}
	aside {
		border-radius: 16px 16px 0 0;
		display: block;
		float: unset;
		/*width: 100%;*/
	}
	section {
		border-radius: 0px ;
		padding: 0.2em 0em;
		min-width: 90%;
	}
	.timers {	width: 90% !important;	}
	.NOcol50prc {	width: 100%; }
	body > footer > ul { float: unset !important; }
}
@media only screen and (min-width: 900px) {
	aside {
		float: right;
		width: 36%;
	}
	section {	width: 60%; }
	.col50prc {	width: 48%; }
}
/* Contents List
 * * * * * * * * * * * * */
section ul {
	list-style-type: none;
	padding-left: 0px;
	margin: 0px 0.5em;
}
aside h1,
.NOTsection > ul > li:first-child {
	background-color: #808080;
	font-style: italic;
	text-align: center;
	padding: 0em 0px;
	min-height: 50px;
}
aside h1, section > ul > li:first-child h1 {
	padding: 0.5em 0px;
	margin: 0px;
}
aside h1 {
	margin: 0px auto;
	min-height: auto;
	width: 80%;
}
section > ol > li,
section > ul > li {
position: relative;
	background-color: #cbc5c5;
	border-bottom: dashed 1px #808080;
	color: var(--primary-text);
	padding: .5rem 1rem;
}
section > ul.mh50px > li {	min-height: 56px; }
#changeLog {
	background-color: var(--boxes-active);
	border-radius: 16px;
}
#changeLog > h3 {
	background-color: #808080;
	color: var(--secondary-color);
	font-style: italic;
	font-weight: 800;
	text-align: center;
	padding: 0;
	margin: 0 .5em;
	line-height: 50px;
	min-height: 50px;
}
#changeLog > ul { height: 310px; }
#changeLog li > div,
#taskList section li > time {
	display: inline-block;
	font-family: Georgia;
	font-size: 1em;
	font-weight: 800;
	margin: 0 .4em;
	text-align: center;
}
#taskList section li > time {
	background-color: #fff;
	display: block;
	border-top: solid 10px #55a0c6;
	float: left;
	font-size: 2em;
	width: 60px;
}
.done {
	color: var(--boxes-active);
	text-decoration: line-through;
	text-decoration-color: var(--primary-color);
}
section li a {
	color: #808080;
}
section li a:hover, section li a:focus {
	color: #4785a4;
}
#taskList li div {
position: absolute;
top: 0px;
right: 0px;
	background-color: #cbc5c5;
	border: solid 3px #808080;
	border-radius: 50%;
	float: right;
	font-size: 2em;
	line-height: 48px;
	margin: 0.2em;
	text-align: center;
	height: 48px;
	width: 48px;
}
#taskList li div:hover {
	background-color: #62b8e3;
	border-color: #55a0c6;
}
#taskList li div + ul {
	display: none;
}
ul ul li {
outline: solid 2px red;
	display: inline-block;
	padding: 1.2em 2em;
}
#taskList li div:hover + ul {
display: block;
position: absolute;
top: 0px;
right: 0px;
}
#formSubject {
	background-color: var(--boxes-active);
	color: var(--primary-color);
	margin: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
/* * * * * * * * * * * * *\
 * Site Footer
 * * * * * * * * * * * * */
body > footer {
	border-top: solid 4px var(--primary-color);
	border-radius: 0px 0px 16px 16px;
	background-color: #808080;
	margin-top: 2em;
	padding: .5em .8em;
	text-align: center;
}
body > footer strong {
	background-color: var(--boxes-active);
	border-right: solid 5px var(--primary-color);
	color: var(--boxes-color);
	font-weight: 800;
	text-shadow: none;
	padding: .2em;
}
body > footer span {	font-family: Georgia; }
body > footer p:first-child {	float: left; }
body > footer p {
	color: var(--boxes-text);
	display: inline-block;
	font-size: .8em;
	font-weight: 400;
	text-shadow: var(--primary-text) 2px 1px 1px;
	margin: .5rem 0px;
	vertical-align: top;
}
body > footer > ul {
	float: right;
	margin: 0px;
}
body > footer a {
	color: var(--boxes-text);
	float: right;
	font-size: .7em;
	font-weight: 800;
}
body > footer a:before {
	content: '/';
	font-size: 2em;
	font-weight: 800;
	text-decoration: none;
	margin: 0px 1em;
}
/* * * * * * * * * * * * *\
 * Additions
 * * * * * * * * * * * * */
.dspBlk, .dspCBlk > * { display: block; }
.dspInl, .dspCInl > * { display: inline; }
.dspIB, .dspCIB > * { display: inline-block; }
.putLeft { float: left; }
.putRight { float: right; }
.noPts {
	list-style: none;
	padding-left: 0px;
}
.clrFix::after,
body > article::after,
body > footer a::after {
	display: block;
	content: '';
	clear: both;
}
.scrllView { overflow: auto; }
.scrllView-y { overflow-y: auto; }
.lsCust {
	list-style-type: none;
	/*padding-left: 0px;*/
}
.lsCust > li::before {
	color: var(--primary-color);
	display: inline-block;
	font-size: 2rem;
	/*line-height: 1.5rem;*/
	text-align: center;
	margin-left: -30px;
	width: 30px;
}
.lsCust.liDiame > li::before {	content: '⋄'; }
.lsCust.liDiams > li::before {	content: '♦'; }
.lsCust.liCheck > li::before {	content: '✓'; }
.lsCust.liCross > li::before {	content: '✗'; }
.lsCust.liMulti > li::before {	content: '⨯'; }
.lsCust.liClubs > li::before {	content: '♣'; }
.lsCust.liLowast > li::before {	content: '∗'; }
.lsCust.liOast > li::before {	content: '⊛'; }
.lsCust.liOfcr > li::before {	content: '⦿'; }
.lsCust.liSect > li::before {	content: '§'; }
.lsCust.liSung > li::before {	content: '♪'; }
.lsCust.liStars > li::before {	content: '★'; }
.lsCust.liTarget > li::before {	content: '⌖'; }
.lsCust.liXotime > li::before {	content: '⦿'; }
.lnh08, .lnh08c > * {	line-height: .8rem; }
.lnh10, .lnh10c > * {	line-height: 1.0rem; }
.lnh12, .lnh12c > * {	line-height: 1.2rem; }
.lnh15, .lnh15c > * {	line-height: 1.5rem; }
.lnh20, .lnh20c > * {	line-height: 2.0rem; }
.lnh30, .lnh30c > * {	line-height: 3.0rem; }
.txtShdw > *,
.txtShdwFc > *:first-child,
.liShdw > li::before {	text-shadow: var(--primary-text) 1px 1px 1px; }
.childsTxtCol { color: var(--primary-text); }
.NOfliHdr > li:first-child {
	background-color: #808080;
	color: var(--secondary-color);
	font-style: italic;
	font-weight: 800;
	text-align: center;
	padding: 0em 0px;
	line-height: 50px;
	min-height: 50px;
}
.msg {
	background-color: rgba(255,255,255,0.5);
	border: solid 2px #808080;
	display: inline-block;
	text-align: center;
	margin: 0.4em auto;
	padding: 0.4em;
}
.msgAlert {	border: solid 2px yellow; }
.msgError {	border: solid 2px red; }
.msgInfo {	border: solid 2px blue; }
.msgSuccess {	border: solid 2px green; }