/* -----------------------------------------------------------------------------
	
	
	#	KOLJA-REICHERT.DE
	
	Author: Roman Klein
	Website: https://github.com/twiro
	
	Version 2.0.2
	Date: 13.06.2020
	
	
	##	FONTS
	
	13.06.2020 – replaced original webfont 'Minion Pro' with 'Amiri' 
	
	Amiri					400, 700
	
	
----------------------------------------------------------------------------- */




body {
	color: #111;
	font-family: "Amiri", "Minion Pro", "Times New Roman", Times, Georgia, serif;
	font-size: 100%; /* 16px */
	line-height: 1.375em; /* 22px */
}

.hidden {display: none;}
	


* ::-moz-selection {
	background: #EEE url(img/bg-selection.jpg) repeat;
	color: #555;
	background: #A56024;
	color: #FFF;
}

* ::-webkit-selection {
	background: #A56024;
	color: #FFF;
}

* ::selection {
	background: #F49300;
	color: #FFF;
	background: #A56024;
	color: #FFF;
}


.hyphenate {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}



/* CONTAINER
-------------------------------------------------------------- */

#header {
	position: fixed;
	top: 0;
	left: 0;
	padding: 4em 2em 2em 4em;
	width: 13em;
	background: #D4D4D4 url(img/grid.gif);
	min-height: 100%;
}

	
#content {
	display: block;
	position: relative;
	float: left;
	padding: 4em 6em 2em 2em;
}

#tags {
	display: block;
	position: fixed;
	left: 940px;
	padding: 10em 2em 2em 2em;
	margin-left: 2em;
	margin-bottom: 2em;
}

#special {
	display: block;
	position: fixed;
	left: 1008px;
	top: 63px;
	z-index: 1000;
	line-height: 12px;
}

#footer {
	float: none;
	clear: both;
	padding: 0 2em;		
}

#content,
#footer {
	width: 30em;
	margin-left: 21em;
}



body#home-page #content {
	width: auto;
	max-width: 50em;
}



/* LINKS
-------------------------------------------------------------- */

a {
	color: #111;
    text-decoration: none;
}


a.special {
	display: inline-block;
	font-size: 10px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 12px;
	letter-spacing: -0.005em;
	color: #2EA2BF;
	margin-bottom: 12px;
}


	
a:hover,
a.special:hover,
#footer a:hover {
	color: #34C7E2;
	color: #A56024;
	color: #2EA2BF;
}




/* NAVIGATION
-------------------------------------------------------------- */

.catlist,
.taglist {
	line-height: 1.1875em; /* 19px */
	text-transform: lowercase;
	font-style: italic;
	margin-bottom: 1.25em; /* 20px */
}

	.catlist li,
	.taglist li {
		display: inline-block;
		margin-bottom: 0.0625em; /* 1px */
		-webkit-transition: background 0.25s linear;
	}
	
	.catlist li:after,
	.taglist li:after {
  		clear: both;
  		content: ".";
  		display: block;
  		height: 0;
  		visibility: hidden;
	}
	
	/* Hides from IE-mac \*/ 
	* html .catlist li, * html .taglist li { height: 1%; }
	.catlist li, .taglist li { display: block; }
	/* End hide from IE-mac */

		.catlist a,
		.catlist b,
		.taglist a,
		.taglist b {		
			display: block;
			position: relative;
			float: left;
			font-size: 0.8125em; /* 13px */
			padding: 0 0.33em;
			color: #888;
			background: rgba(255,255,255,1);
			-webkit-transition: background 0.25s linear, color 0.25s linear;
		}
		
		.catlist li a:first-child {color: #111;}
		.catlist b {padding: 0;}
		.taglist a {background: #FFF; color: #CCC;}
		.taglist b {display: none;}
		
		#tags:hover li a {color: #111;}
			
			.taglist a:hover {				
				background: #EEE url(img/grid2.gif);
				-webkit-transition: background 0s linear, color 0s linear;
			}
			
			.catlist li:hover a,
			.catlist li:hover b {				
				background: rgba(255,255,255,0);
				-webkit-transition: background 0s linear, color 0s linear;
			}

			.catlist a:hover,
			.taglist a:hover,
			a.active {
				color: #34C7E2 !important;
				color: #A56024 !important;
				color: #2EA2BF !important;
			}
		
		
		
					
			


/* TYPOGRAPHY
-------------------------------------------------------------- */


/* Height: n*33px + 33px */
h1, h2, .md--l {
	font-family: Helvetica, "Helvetica Neue", Arial, Sans-serif;
	font-size: 1.875em; /* 30px */
	line-height: 1.1; /* 33px */
	letter-spacing: -0.025em;
	margin-bottom: 1.1em; /* 33px */
}


/* Height: n*22px + 44px */
h3, .md--m {
	font-family: Helvetica, "Helvetica Neue", Arial, Sans-serif;
	color: #888;
	font-size: 1em; /* 20px */
	margin-bottom: 2.2em; /* 44px */
}	
	

/* Height: n*22px + 44px */
h4 {
	padding-top: 0.6875em; /* 11px */
	margin-bottom: 0.6875em; /* 11px */
}
	
	h1, h4 {font-weight: bold;}
	h2, h3 {font-weight: normal;}

	h1 a {display: block; color: #111 !important;}
	h1 a:hover {
		color:#34C7E2 !important;
		color: #A56024 !important;
		color: #2EA2BF !important;
	}

h5 {	
	font-family: Helvetica, "Helvetica Neue", Arial, Sans-serif;
	font-size: 0.625em; /* 10px */
	font-size: 10px !important;
	line-height: 1.1; /* 11px */
	color: #888;
}

#footer .inner {	
	font-family: Helvetica, "Helvetica Neue", Arial, Sans-serif;
	font-size: 0.625em; /* 10px */
	font-size: 10px !important;
	line-height: 1.1; /* 11px */
	color: #888;
	text-indent: 0.1em;
}

h2 a {
	display: block;
	color: #fff;
	font-weight: bold;
	letter-spacing: -0.05em;
}

/* Height: 33px */
h2 .affix {
	font-weight: normal;
	display: block;
	padding: 0.3em 0 1.7em 0;
	font-size: 0.3333em; /* 10px */
	line-height: 1.1; /* 11px */
	color: #888;
	letter-spacing: 0;
	text-indent: 0.1em;
}

/* Height: n*11px + 33px */
article h5 {	
	margin-bottom: 3.3em; /* 33px */
}


/* Height: n*22px + 22px */
article p,
.md p {
	margin-bottom: 1.375em; /* 22px */
}

article b {font-weight:bold;}
article em {font-style: italic;}







.listItem p {
	margin-bottom: 1.375em; /* 22px */
}

/* Height: n*11px + 33px */
.listItem h5 {	
	margin-bottom: 4.4em; /* 33px */
}

.listItem h3 {
	font-size: 1.875em; /* 30px */
	line-height: 1.1; /* 33px */
	letter-spacing: -0.025em;
	font-weight: bold;
	margin-bottom: 0.7333em; /* 22px */
}

.listItem h3 a {display: block; color: #111;}
.listItem h3 a:hover {
	color: #34C7E2;
	color: #A56024 !important;
	color: #2EA2BF !important;
}

	.listItem h3 a:hover span {
		opacity: 0.5;
	}







#footer a {
	color: #888;
}

		#footer .inner {
			padding: 1em 0 0 0;
		}





/* TYPOGRAPHY
-------------------------------------------------------------- */


.md {
	font-family: Helvetica, "Helvetica Neue", Arial, Sans-serif;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.md--l {
	font-size: 1.875em; /* 30px */
	line-height: 1.1; /* 33px */
	letter-spacing: -0.025em;
	margin-bottom: 1.1em;
}


.md--m {
	font-size: 1em; /* 20px */
	margin-bottom: 2.2em; /* 44px */
}	


.md--l p,
.md--l ul,
.md--l ol {
	margin-bottom: 1.1em; 
}



.md a {
	color: #AAA;
	text-decoration: underline;
}


.md a:hover {
	color: rgb(46, 162, 191);
}




/* @iPhone && Anything < 480px
-------------------------------------------------------------- */



@media screen and (max-width: 1200px) {

	#content {float: none;}
	
	#tags {
		float: none;
		width: auto;
		margin-left: 21em;
		padding: 0 2em 2em 2em;
		width: 34em;
	}
	
		#tags .taglist {
			padding-top: 2em;
			border-top: 1px solid #CCC;
		}
	
			.taglist li {float: left;}
			
			.taglist b {
				font-size: 19px;
				line-height: 19px;
			}
			
				.taglist a {color: #888; padding: 0;}
				
	.taglist b {display: inline;}
				
}


@media screen and (max-width: 960px) {
	
	#header {padding: 3em 2em 2em 2em;}
	#content {width: auto; padding: 3em 4em 2em 0;}
	#tags {width: auto; padding: 3em 4em 2em 0;}
	#footer {width: auto; padding: 2em 4em 2em 0;}
	
}


@media screen and (max-width: 800px) {

	#header {padding: 2em;}	
	#content {margin-left: 17em; padding: 2em;}	
	#tags {margin-left: 17em; padding: 2em;}	
	#footer {margin-left: 17em; padding: 2em;}
}


@media screen and (max-width: 680px) {

	body {padding-top: 0;}
	
	#header {
		position: relative;
		width: auto;
		top: 0;
		left: 0;
		padding: 2em 0 0 0;
	}
	
	#content {margin-left: 0;}	
	#tags {margin-left: 0;}
	#footer {margin-left: 0;}
	
	
	h1, h2 {
		margin-bottom: 0.3666em; /* 11px */
	}
	
	h2 {
		padding: 0 1.0666em; /* 32px */
	}
	
	.catlist {
		margin-bottom: 0;
		border-top: 1px solid #CCC;
	}
	
	#navi {
		border-bottom: 1px solid #CCC;
	}
	
	#admin-navi {
		display: none;
	}
	
	
	.catlist li {
		margin-bottom: 0;
		border-bottom: 1px dotted #DDD;
	}
	.catlist li:last-child {
		border-bottom: 0;
	}
	
		.catlist a {
			padding: 5px 0;
			width: 50%;
			text-indent: 32px;
		}
		
		#navi .catlist:last-child a {width: 100%;}
		
		
		
		.catlist b {
			display: none;
		}
		
		-webkit-text-size-adjust: none;
}



@media screen and (max-width: 480px) {	
	
	#header {padding: 1em 0 0 0;}
	#content {padding: 1em;}	
	#tags {padding: 1em;}
	#footer {padding: 1em;}
	
	h1, h2 {
		font-size: 1.5em; /* 24px */
	}
	
	h2 {
		padding: 0 0.5033em; /* 16px */
	}
	
	h3 {margin-bottom: 1.3333em; /* 20px */}
	
	article h5 {	
		margin-bottom: 2em; /* 20px */
	}

	.catlist a {
		text-indent: 16px;
	}
	
}