* {
	margin:0;
	padding:0;
	border:0;
	outline:none;
	box-sizing:border-box;
}

/*

Logo:				20,80,120
H2 Headlines:		20,80,120
Links Buttons: 		230,90,40



*/

::selection {
	background:rgb(60,160,160);
	background:rgba(60,160,160,0.2);
}

html {
	background:#fff;
	background:#333;
	background:linear-gradient(0deg, #333 50%, #fff 50%) fixed;
	background-size:cover;
	color:#334450;
	font-family:arial, sans-serif;
	font-size:16px;
	line-height:1.5rem;
}

body {
	font-size:1rem;
	line-height:1.5rem;
	background:#fff;
	display:flex;
	flex-wrap:wrap;
}

header {
	width:100%;
	order:1;
	padding:1rem 0;
	background:#fff;
	background:rgba(255,255,255,0.8);
	backdrop-filter:blur(1rem);
	border-bottom:1px solid #ddd;
	position:fixed;
	top:0;
	left:0;
	z-index:2000;
}

header .centered {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	justify-content:flex-start;
	align-items:center;
}

body > .centered {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:6rem 0 0;
	position:relative;
	order:2;
}

main {
	order:2;
	padding:0 0 5rem;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:100%;
}

article {
	order:2;
	width:calc(100% - 20rem);
}

aside {
	order:1;
	width:18rem;
	padding:0 0 1rem;
}

section {
	width:100%;
}

footer {
	width:100%;
	order:3;
	padding:1rem;
	padding:8rem 2rem 2rem;
	background:#15e;
	background:rgb(60,160,160);
	background:#333;
	background:#333 url(/design/images/kwl-white.png) top 3rem center no-repeat;
	background-size:10rem;
	color:#fff;
	text-align:center;
}

h1, h2, h3, p, table {
	margin:0 0 2rem;
}

ol, ul {
	margin:0 0 2rem;
}





/* DESIGN PREVIEW */

.centered {
	width:100%;
	max-width:70rem;
	max-width:64rem;
	margin:auto;
}

#logo {
	display:block;
	width:10rem;
	height:3rem;
	background:url(/design/images/kwl.png) left center no-repeat;
	background-size:contain;
	font-size:0;
	line-height:0;
	margin:0 2rem 0 0;
	margin:0 0.5rem;
}

#navi {
	list-style:none;
	margin:0 0 0 2rem;
	display:flex;
	flex-wrap:wrap;
}

#navi li {
	position:relative;
}

#navi li:after {
	content:'';
	position:absolute;
	top:0%;
	height:100%;
	left:0;
	width:1px;
	background:linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
}

#navi a {
	display:block;
	padding:0.5rem 1.5rem;
	color:inherit;
	text-decoration:none;
	font-weight:500;
}

#navi a:hover {
	color:#28c;
	color:#15e;
	color:rgb(60,160,160);
	color:rgb(230,90,40);
}

#navi li.selected a {
	color:#28c;
	color:#15e;
	color:rgb(60,160,160);
	color:rgb(230,90,160);
	color:rgb(230,90,40);
}

#navi input {
	display:block;
	width:6rem;
	font:inherit;
	color:inherit;
	border:1px solid #ddd;
	padding:0.25rem 0.5rem;
	border-radius:0.5rem;
	font-size:0.8rem;
	line-height:1.5rem;
}

html {
	font-family:"Noto Sans";
}

main a {
	color:rgb(230,90,40);
	text-decoration:none;
	text-decoration-thickness:0.05rem;
	text-underline-offset:0.2rem;
}

main p {
	text-align:justify;
}

main a:hover {
	text-decoration:underline;
}

main ul, 
main ol {
	margin:0 0 2rem 1.5rem;
}

h1 {
	font-size:2rem;
	line-height:2rem;
}

h1 strong {
	display:block;
	font-weight:700;
	font-weight:600;
}

h1 small {
	display:block;
	color:rgb(230,90,40);
	color:rgb(60,160,160);
	margin:0.2rem 0 0;
	font-size:1.1rem;
	line-height:1.5rem;
	font-weight:400;
}

img {
	display:block;
	border-radius:1rem;
	max-width:100%;
}

.tempgreen {
	padding:2rem 2rem 2rem 3rem;
	background:rgba(60,160,160,0.2);
	border-radius:1rem;
	margin:0 0 2rem;
}


#breadcrumbs {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	list-style:none;
	margin:0 0 2rem;
	padding:0;
	font-size:0.8rem;
	line-height:1rem;
}

#breadcrumbs li {
	display:inline-block;
	padding:0 0.5rem 0 0;
}

#breadcrumbs li:after {
	content:'›';
	padding:0 0 0 0.25rem;
}

#breadcrumbs li:last-of-type:after {
	content:'';
	padding:0;
}

#breadcrumbs a {
	color:inherit;
	text-decoration:none;
}

#breadcrumbs a:hover {
	color:#28c;
	text-decoration:none;
}

/* DESIGN BLOG / ARTICLE */

#posts {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	list-style:none;
	margin:0 0 2rem;
	padding:0;
	max-width:32rem;
}

#posts li {
	display:block;
	width:100%;
}

#posts a {
	display:flex;
	width:100%;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	color:inherit;
	margin:0 0 2rem;
}

#posts em {
	display:block;
	width:28%;
}

#posts img {
	display:block;
	width:100%;
	height:auto;
	border-radius:0;
}

#posts span {
	width:68%;
}

#posts a strong {
	display:block;
	width:100%;
	color:rgb(20,80,120);
}

#posts span span {
	display:block;
	width:100%;
	font-size:0.8rem;
	line-height:1.2rem;
}


article p b {
	font-weight:600;
	color:#223340;
}

article p i {
	font-weight:500;
}

article cite {
	display:block;
	font-weight:italic;
	color:rgb(60,160,60);
	padding:0 0 0 0.5rem;
	border-left:2px solid rgb(60,160,60);
	font-size:1.1rem;
	line-height:1.5rem;
	margin:0 0 1rem;
}

article li {
	padding:0 0 0 0.5rem;
	padding:0.25rem 0.5rem;
	font-weight:500;
}

article li::marker {
	color:rgb(60,160,60);
	font-weight:500;
}

#birdnav {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	list-style:none;
	margin:0 0 2rem;
	padding:0;
}

#birdnav li {
	display:block;
}

#birdnav a {
	width:2rem;
	text-align:center;
	display:block;
	padding:0.25rem 0;
	font-weight:700;
	margin:0.05rem;
	background:rgba(160,160,60,0.5);
	color:#fff;
	text-decoration:none;
}

#birdnav a:hover {
	background:#334450;
}

#birds {
	display:flex;
	width:100%;
	flex-wrap:wrap;
	justify-content:space-between;
}

#birds h2 {
	width:100%;
}

#birds p {
	display:block;
	width:100%;
}

@media (min-width:720px) {
	
	#birds p {
		width:30%;
	}
}

#birds p a {
	display:block;
	width:100%;
	background:rgba(160,160,60,0.2);
	margin:0 0 2rem;
	color:inherit;
}

#birds strong {
	display:block;
	width:100%;
	padding:1.5rem;
	font-weight:500;
}

#birds img {
	display:block;
	width:100%;
	border-radius:0;
}

.gallery {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	list-style:none;
	margin:0 0 2rem;
}

.gallery li {
	width:49%;
	width:100%;
	margin:0 0 2%;
}

.post-data {
	padding:1rem;
	background:rgba(100,100,100,0.1);
}

h2 {
	display:block;
	margin:4rem 0 2rem;
	padding:0 0 1rem;
	color:inherit;
	text-decoration:none;
	font-weight:500;
	background:linear-gradient(90deg, #334450 1px, rgba(0,0,0,0) 0) 100%/4px 1px repeat-x;
	background-position:bottom;
	color:rgb(60,160,160);
	color:rgb(20,80,120);
	pointer-events:none;
	position:relative;
}

h2 a {
	border-top:1px solid rgba(0,0,0,0);
	display:block;
	position:absolute;
	margin-top:-7rem;
}

.contentlist {
	background:rgba(210,240,240);
	background:rgba(230,90,40,0.2);
	background:rgba(60,160,160,0.2);
	position:sticky;
	top:6rem;
	overflow-y:auto;
	max-height:calc(100vh - 7rem);
}

.contentlist p {
	padding:1.5rem;
	font-weight:600;
	margin:0;
}

.contentlist ol {
	margin:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0.5rem 1rem 1rem;
	counter-reset:contentlist;
	background:rgba(255,255,255,0.5);
}

.contentlist li {
	display:block;
	position:relative;
	padding:0 1rem 0 2rem;
	width:100%;
	background:linear-gradient(90deg, #334450 1px, rgba(0,0,0,0) 0) 100%/4px 1px repeat-x;
	background-position:bottom;
}

@media (min-width:720px) { .contentlist li { width:calc(100%); } }

.contentlist li a:before {
	position:absolute;
	left:0.5rem;
	color:rgb(230,90,40);
	color:rgb(60,160,160);
	font-weight:500;
	display:inline-block;
	padding:0 0.5rem 0 0;
	counter-increment:contentlist;
	content:"0" counter(contentlist) ".";
}

.contentlist li a {
	display:block;
	padding:1rem;
	font-size:0.9rem;
	line-height:1.3rem;
	color:inherit;
	text-decoration:none;
	
}

.contentlist li a:hover {
	color:inherit;
	text-decoration:underline;
	text-decoration-thickness:0.05rem;
	text-underline-offset:0.2rem;
}

.birds {
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	justify-content:space-between;
}

.birds li {
	display:block;
	width:48%;
	margin:0 0 1rem;
}

@media (min-width:720px) { .birds li { width:calc(30%); } }


.birds li a {
	display:block;
	position:relative;
	color:#fff;
	text-decoration:none;
}

.birds strong {
	display:block;
	background:#667780;
	border-top-left-radius:1rem;
	border-top-right-radius:1rem;
	padding:0.5rem 1rem;
	font-weight:600;
}

.birds img {
	display:block;
	border-radius:0;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
}

.birds em {
	position:absolute;
	top:-0.5rem;
	right:-0.5rem;
	padding:0.25rem;
	min-width:calc(2rem + 4px);
	text-align:center;
	background:#28c;
	color:#fff;
	border-radius:5rem;
	font-style:normal;
	font-weight:600;
	border:2px solid #fff;
	box-shadow:0 1px 1px rgba(0,0,0,0.2);
}

.intro {
	list-style:none;
	display:block;
	margin:0 0 2rem;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	text-align:center;
}

.intro li {
	width:30%;
}

.intro a {
	color:inherit;
	text-decoration:none;
}

.intro em {
	display:block;
	font-size:3rem;
	line-height:4rem;
	font-weight:700;
	background:#f5f5f5;
	color:rgb(60,160,160);
	box-shadow:0 0 0px 8px #fff, 0 0 0px 9px #ccc;
	width:4rem;
	height:4rem;
	font-style:normal;
	border-radius:4rem;
	margin:0 auto 1rem;
	color:#ddd;
	text-shadow:2px 2px 0px #fff;
}

.intro strong {
	display:block;
	margin:0 0 1rem;
}

code {
	display:block;
	padding:0.5rem;
	padding:1rem;
	background:#def;
	border:1px solid rgba(100,150,200,0.2);
	color:#15e;
	background:rgba(60,160,160,0.1);
	border:1px solid rgba(60,160,160,0.2);
	color:rgb(60,160,160);
	
	background:rgba(0,0,0,0.02);
	border:1px solid rgba(0,0,0,0.1);
	color:#666;
	font-size:0.8rem;
	line-height:1rem;
	margin:0 0 2rem;
}



/* OPENLAYERS STYLE */

#map {
}

#wrapper {
	position:relative;
	margin:0 0 1rem;
}

#scale {
	display:block;
	padding:0.5rem 1rem;
	background:#e0effa;
	margin-top:-2.5rem;
	border-bottom-left-radius:1rem;
	border-bottom-right-radius:1rem;
	border-bottom:1px solid #999;
	border:1px solid #999;
}

#location {
	padding:0.5rem 1rem;
}

#nodelist {
	margin:0 0 2rem;
}

.keywords {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	list-style:none;
	margin:0 0 2rem;
}

.keywords a {
	display:block;
	text-decoration:none;
	color:#fff;
	background:rgb(60,160,160);
	padding:0.5rem 1rem;
	border-radius:0.5rem;
	margin:0 0.5rem 0.5rem 0;
	font-weight:500;
}

.keywords a:hover {
	text-decoration:none;
	background:rgba(60,160,160,0.8);
}

/* BLOG */





@media (max-width:720px) {
	.centered aside {
		width:100%;
	}

	header {
		order:1;
		position:relative;
	}
	
	#logo {
		margin:auto;
	}
	
	#navi {
		position:absolute;
		position:relative;
		top:0;
		left:0;
		width:100%;
		background:#234;
		margin:0;
		margin:1rem 0;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	
	#navi li {
		display:block;
		width:100%;
	}
	
	#navi li a {
		display:block;
		width:100%;
		color:#fff;
	}
	
	main {
		width:100%;
		padding:2rem 1rem;
	}

	article {
		width:100%;
	}

	main p {
		text-align:left;
	}
	
	main code {
		display:block;
		max-width:100%;
		overflow:auto;
	}

	body > .centered {
		padding:0;
	}
	
	h1 {
		font-size:1.6rem;
		line-height:1.8rem;
	}
	
	h1 small {
		line-height:1.25rem;
	}
	
	h2 {
		margin:0 0 1.5rem;
	}
	
	h2 a {
		font-size:1.2rem;
		line-height:1.5rem;
		padding:0 0 0.5rem;
		margin:3rem 0 1.5rem;
	}

	.contentlist {
		position:inherit;
		top:inherit;
	}
	
	
}

ul ul,
ol ol,
ul ol,
ol ul {
	margin:0 0 0.5rem 2rem;
}

.deco-table {
	border-collapse:collapse;
	margin:0 0 2rem;
}

.deco-table td {
	padding:1rem;
	border:1px solid #ccc;
}