/*
 Airy 2 green for ZANACMS html layout
 Original design copyright: Rolf Zavelberg and Gordon Axmann
*/

:root {
	--airy-body-bg:#eef7e0;
	--airy-body:#172d03;
	--airy-h1:#333334;
	--airy-footer:#333332;
	--airy-header-bg:#8e933c;
	--airy-border:#b5dca0;
	--airy-menu:#699636;
	--airy-menu-hover-bg:#fffffe;
	--airy-menu-hover:#284906;
	--airy-menu-link:#559535;
	--airy-column:#559533;
	--airy-column-link:#559532;
	--airy-column-hover:#000001;
	--airy-content-hover:#559536;
	--airy-content-link:#000002;
	--airy-content-p:#1d3802;
	--airy-header-image:url(green.jpg);
}

body {
	margin:0;
	background-color:var(--airy-body-bg);
	font-size:76%;
	font-family:verdana, arial, helvetica, tahoma, sans-serif;
	color:var(--airy-body);
	text-align:center;
	line-height:1.5em;
}

body {
    --design-notice: "This is a commercial design. Use on a public or private website requires a valid design license. See LICENSE in the design folder";
}

body::after {
    content: var(--design-notice);
    display: block;
    margin: 0 0 2em 0;
    padding: 0.5em;
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.75;
    text-align: center;
}

h1 {
	font-size:1.1em;
	font-weight:bold;
	color:var(--airy-h1);
	margin-top:57px;
	margin-bottom:30px;
	letter-spacing:0.5px;
}

h2 {
	font-size:1em;
	margin:1.8em 0 1.2em 0;
	font-weight:bold;
}

h3, h4, h5, h6 {
	font-size:0.8em;
	margin:1.8em 0 1.8em 0;
	font-weight:bold;
}

#containerfull {
	margin:0 auto;
	width:calc(100% - 2rem);
	max-width:800px;
	text-align:left;
}

#mainbody {
	width:100%;
}

#header {
	margin:21px 0 0 0;
	min-height:100px;
	background-color:var(--airy-header-bg);
	background-image:var(--z-layoutimg, var(--airy-header-image));
	background-repeat:no-repeat;
	background-position:var(--z-layoutimg-pos, center center);
	background-size:cover;
	color:#fff;
	font-size:2em;
}

.airy-headtext {
	padding:40px 24px 24px 24px;
}

.airy-headtext a, .airy-headtext a:link, .airy-headtext a:active, .airy-headtext a:visited {
	background-color:transparent;
	color:#fff;
	text-decoration:none;
	font-size:1em;
	font-weight:normal;
	letter-spacing:1px;
}

.airy-headtext a:hover {
	border-bottom:1px dashed #fff;
}

.airy-headtext span {
	display:block;
	font-size:0.45em;
	line-height:1.35em;
	letter-spacing:0;
	margin-top:0.4em;
}

.bartop {
	min-height:1.5em;
	margin:17px 0 0 0;
	border-top:1px solid var(--airy-border);
	border-bottom:1px solid var(--airy-border);
}

#menu {
	width:100%;
	color:var(--airy-menu);
}

#menu ul {
	margin:0;
	padding:0;
	list-style:none;
}

#menu > ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	padding-right:4px;
}

#menu li {
	position:relative;
	line-height:1.25em;
	list-style:none;
	color:var(--airy-border);
}

#menu li a, #menu li a:link, #menu li a:active, #menu li a:visited {
	display:block;
	padding:1px 12px 2px 12px;
	background-color:transparent;
	color:var(--airy-menu-link);
	text-decoration:none;
	font-family:verdana, arial, sans-serif;
	font-size:0.85em;
	letter-spacing:0.05em;
	font-weight:bold;
}

#menu li a:hover, #menu li a:focus, #menu li a[aria-current=page] {
	background-color:var(--airy-menu-hover-bg);
	color:var(--airy-menu-hover);
}

#menu li ul {
	visibility:hidden;
	position:absolute;
	top:100%;
	right:0;
	z-index:80;
	height:0;
	min-width:15em;
	overflow:hidden;
	background-color:var(--airy-body-bg);
	border:1px solid var(--airy-border);
}

#menu li:hover > ul, #menu li:focus-within > ul {
	visibility:visible;
	height:auto;
	overflow:visible;
}

#menu li ul li a, #menu li ul li a:link, #menu li ul li a:active, #menu li ul li a:visited {
	text-align:left;
	line-height:1.5em;
	padding:2px 12px 3px 12px;
	white-space:nowrap;
}

#menu li ul li ul {
	top:-1px;
	right:100%;
}

#mainarea {
	display:flex;
	align-items:flex-start;
}

#column {
	order:1;
	flex:0 0 160px;
	box-sizing:border-box;
	margin-top:25px;
	margin-bottom:20px;
	padding:12px 15px;
	text-align:left;
	background-color:transparent;
	color:var(--airy-column);
	border-left:1px solid var(--airy-border);
}

#column:empty {
	display:none;
}

#column p {
	font-size:0.9em;
	line-height:1.4em;
	text-align:left;
	padding-bottom:0.1em;
}

#column a, #column a:link, #column a:active, #column a:visited {
	background-color:transparent;
	color:var(--airy-column-link);
	font-size:1em;
	text-decoration:none;
	border-bottom:1px dashed var(--airy-column-link);
}

#column a:hover {
	color:var(--airy-column-hover);
	border-bottom:1px dashed var(--airy-column-hover);
	background-color:#fff;
}

#column > a {
	border-bottom:0;
	background-color:transparent;
}

#column img {
	border:0;
	max-width:100%;
	height:auto;
	margin:0 0 1rem 0;
}

#content {
	order:2;
	flex:1 1 auto;
	min-width:0;
	padding-left:55px;
	padding-top:32px;
	padding-bottom:20px;
	background-color:transparent;
	margin:0;
}

#content p {
	text-align:justify;
	font-size:1em;
	color:var(--airy-content-p);
	padding-bottom:0.2em;
}

#content a, #content a:link, #content a:active, #content a:visited {
	text-decoration:none;
	border-bottom:1px dashed var(--airy-content-link);
	font-family:verdana, arial, sans-serif;
	font-size:1em;
	font-weight:normal;
	color:var(--airy-content-link);
}

#content a:hover {
	color:var(--airy-content-hover);
	border-bottom:1px dashed var(--airy-content-hover);
	background-color:#fff;
}

#content a.gallery, #content a.gallery:link, #content a.gallery:visited {
	border:1px solid #666;
}

#content img, #content video, #content iframe {
	max-width:100%;
}

#content img, #content video {
	height:auto;
}

table {
	border-collapse:collapse;
	border:0;
}

td {
	font-size:1em;
}

pre {
	max-width:100%;
	overflow:auto;
}

#footer {
	font-size:0.9em;
	color:var(--airy-footer);
	padding:2px 18px 4px 0;
	text-align:right;
	clear:both;
	line-height:1.15em;
}

#footer a, #footer a:link, #footer a:active, #footer a:visited {
	background-color:transparent;
	color:var(--airy-menu-link);
	text-decoration:none;
	font-family:verdana, arial, sans-serif;
	font-size:1em;
	font-weight:normal;
}

#footer a.edit, #footer a.edit:link, #footer a.edit:active, #footer a.edit:visited {
	color:#ccc;
	font-size:0.65em;
}

#footer a.edit:hover {
	color:#9fcb88;
}

#after {
	height:40px;
}

.plain {
	font-size:1em;
	color:var(--airy-body);
	line-height:1.5em;
	font-weight:normal;
	font-family:verdana, arial, helvetica, tahoma, sans-serif;
	letter-spacing:0;
}

.liplain {
	font-size:1.1em;
	color:var(--airy-body);
	font-weight:normal;
}

.small {
	font-size:0.85em;
}

.big {
	font-size:1.15em;
}

.bold {
	font-weight:bold;
}

.upper {
	text-transform:uppercase;
}

.nowrap {
	white-space:nowrap;
}

@media (max-width:700px) {
	body {
		font-size:82%;
	}

	#containerfull {
		width:calc(100% - 1.5rem);
	}

	#header {
		margin-top:0.75rem;
		min-height:84px;
	}

	.airy-headtext {
		padding:28px 18px 18px 18px;
	}

	#menu > ul {
		justify-content:flex-start;
		padding:4px 0;
	}

	#menu li a, #menu li a:link, #menu li a:active, #menu li a:visited {
		padding:4px 10px 5px 10px;
	}

	#menu li ul {
		position:absolute;
		top:100%;
		right:auto;
		left:0;
		visibility:hidden;
		height:0;
		min-width:12em;
		overflow:hidden;
		border:1px solid var(--airy-border);
		padding-left:0;
		background-color:var(--airy-body-bg);
	}

	#menu li:hover > ul, #menu li:focus-within > ul {
		visibility:visible;
		height:auto;
		overflow:visible;
	}

	#menu li ul li a, #menu li ul li a:link, #menu li ul li a:active, #menu li ul li a:visited {
		white-space:normal;
	}

	#menu li ul li ul {
		top:-1px;
		right:auto;
		left:100%;
	}

	#mainarea {
		display:flex;
		flex-direction:column;
	}

	#column {
		order:2;
		width:100%;
		box-sizing:border-box;
		margin:1rem 0 0 0;
		padding:1rem 0;
		border-left:0;
		border-top:1px solid var(--airy-border);
		border-bottom:1px solid var(--airy-border);
	}

	#column p {
		padding-right:0;
		padding-left:0;
	}

	#column img {
		display:block;
		max-width:100%;
		margin-left:0;
		margin-right:0;
	}

	#content {
		order:1;
		padding:1.5rem 0 1rem 0;
	}

	h1 {
		margin-top:0;
		margin-bottom:1.5rem;
	}

	#content p {
		text-align:left;
	}

	#footer {
		padding-right:0;
		text-align:left;
	}
}

@media print {
	body {
		background-color:#fff;
		color:#000;
	}

	#header, #menu, #column, #after {
		display:none;
	}

	#containerfull, #mainbody, #content {
		width:auto;
		max-width:none;
		padding:0;
		margin:0;
	}

	#content p {
		font-size:9pt;
		color:#000;
	}

	#footer {
		color:#000;
		text-align:left;
	}
}