/* Theme: EMTT theme */
/* Version: 0.1.5 */
/* Source: richi */

/*
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&subset=latin-ext');
*/

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: local('Roboto Light'), local('Roboto-Light'),
    url('Roboto-Light.woff2') format('woff2'),
    url('Roboto-Light.woff') format('woff'),
    url('Roboto-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: local('Roboto'), local('Roboto-Regular'),
    url('Roboto-Regular.woff2') format('woff2'),
    url('Roboto-Regular.woff') format('woff'),
    url('Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 800;
  font-style: bold;
  src: local('Roboto'), local('Roboto-Bold'),
    url('Roboto-Bold.woff2') format('woff2'),
    url('Roboto-Bold.woff') format('woff'),
    url('Roboto-Bold.ttf') format('truetype');
}

@media screen {
	
	html {
		font-family: "Roboto", Helvetica, sans-serif;
		font-size: 100%;
	}

	html, body, div, form, pre, span, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;
	}

	body {
		color: #4f585e;
		background-color: #fff;
		font-weight: 300;
		line-height: 1.5;
	}
	
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		padding: 0;
		font-weight: 400;
	}
	
	h1 {
		margin-top: 1.75rem;
		margin-bottom: 1.75rem;
	}

	h2, h3, h4, h5, h6 {
		margin-top: 1.75rem;
		margin-bottom: 1rem;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.25rem; }
	h3 { font-size: 1.125rem; }
	h4 { font-size: 1rem; }
	h5 { font-size: .875rem; }
	h6 { font-size: .85rem; }

	p {
		margin: 1rem 0 1rem 0;
		padding: 0;
	}
	
	ul, ol {
		margin: 1rem 0 1rem 0;
		padding: 0;
	}
	
	ul ul, ol ol {
		margin-top: 0;
		margin-bottom: 0;
	}

	li {
		margin-left: 2em;
		margin-top: .5em;
		margin-bottom: .5em;
	}

	strong, em {
		font-weight: 400;
	}

	a {
		color: #628cac;
		text-decoration: none;
		word-wrap: break-word;
	}

	a:hover {
		color: #628cac;
		text-decoration: underline;
	}

	a, img {
		border: none;
	}
	
	hr {
		height: 1px;
		border: none;
		color: #aaa;
		background-color: #aaa;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}

	.page {
		padding: 0;
		margin: 0;
	}
	
	.navigation {
		text-align: center;
	}

	.navigation a,
	.navigation li a {
		color: #fff;
		text-decoration: none;
	}	

	.navigation a.active,
	.navigation li a.active { 
		background: #af1630;
		text-decoration: none;
	}
	
	.navigation ul {
		margin: 0 0 1em 0;
		padding: 0;
		list-style: none;
	}

	.navigation li {
		margin: 0;
		padding: 0;
		display: block;
	}

	.navigation li a {
		padding: 0.5em 0.5em;
		display: block;
		border: 1px solid #aaa;
	}

	.navigation li:not(:last-child) > a {
		border-bottom: none;
	}

	.navigation p {
		margin-bottom: 0.5em;
	}

	.navigation .search-form input {
		max-width: 95%;
	}
	
	.container {
		padding: 0 1em;
	}
	
	.header {
		padding-top: 1em;
	}

	.sitename {
		display: none;
	}

	.sitename-banner {
		display: block;
		padding-bottom: 15%;
		background-image: url(emtt-header.svg);
		background-repeat: no-repeat;
		background-size: contain; 
	}

	.main {
		margin: 1em 0 1.75rem 0;
		border-top: 1px solid #aaa;
	}
	
	.footer {
		padding-top: 1em;
		padding-bottom: 1em;
		border-top: 1px solid #aaa;
		clear: both;
	}

	.footer-banner {
		clear: both;
	}

	.left {
		float: left;
		margin: 0 1em 0 0;
	}

	.center {
		display: block;
		margin: 0 auto;
	}

	.right {
		float: right;
		margin: 0 0 0 1em;
	}
	
	.border {
		border: .5em solid #af1630;
	}
	
	.shadow {
		box-shadow: 5px 5px 5px #ccc;		
	}

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

	/* Content */

	.content a {
		text-decoration: underline;
	}
	
	.content h1 a {
		text-decoration: none;
	}
	
	.content .entry:not(:last-of-type)  {
		padding-bottom: .5em;
		border-bottom: 1px solid #aaa;
	}

	.content .entry .entry-meta {
		margin-top: -1.75rem;
		margin-bottom: 1.75rem;
	}

	.content table {
		border-spacing: 0;
		border-collapse: collapse;
	}

	.content th {
		text-align: left;
		padding: 0.3em;
		border-bottom: 1px solid #aaa;
	}

	.content td {
		text-align: left;
		padding: 0.3em;
		border-top: 1px solid #aaa;
	}

	.content .flexible {
		position: relative;
		padding-top: 0;
		padding-bottom: 56.25%;
	}

	.content .flexible iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content .toc {
		list-style: none;
	}

	.content .toc li {
		margin-left: 1em;
	}

	.content .pagination {
		margin: 1em 0;
	}

	.content blockquote {
		margin: 1.75rem 0 1.75rem 0;
		padding-left: 1em;
		border-left: .5em solid #af1630;
	}

	.content blockquote blockquote {
		margin-left: -1.5em;
		border-left: .5em solid #00a;
	}

	.content blockquote blockquote blockquote {
		border-color: #0a0;
	}

	.content code {
		padding: 0.15em 0.4em;
		margin: 0;
		background: inherit;
		border-radius: 3px;
	}

	.content code, pre {
		font-family: Consolas, Menlo, Courier, monospace;
		font-size: 90%;
	}

	.content pre>code {
		padding: 0;
		margin: 0;
		white-space: pre;
		background: inherit;
		border: 0;
		font-size: inherit;
	}

	.content pre {
		padding: 1em;
		overflow: auto;
		line-height: 1.45;
		background: inherit;
		border-radius: 3px;
	}

	.content .flickity img {
		margin: .25em;
	}
	
	.content .photoswipe img {
		margin: 0 0.125em;
		padding: 0;
		border: 1px solid #aaa;
	}

	.content form {
		margin: 1em 0;
	}
	
	/* Forms and buttons */

	.form-control {
		margin: 0;
		padding: 2px 4px;
		display: inline-block;
		background-color: white;
		color: #4f585e;
		border: 1px solid #aaa;
		border-radius: 0;
		font-size: 1em;
		font-family: inherit;
		font-weight: normal;
		line-height: 1em;
	}

	.btn {
		margin: 0;
		padding: 4px 22px;
		min-width: 7em;
		color: #628cac;
		background-color: #eaeaea;
		background-image: linear-gradient(to bottom, #f8f8f8, #e1e1e1);
		border: 1px solid #aaa;
		border-radius: 0;
		font-size: 1em;
		font-family: inherit;
		font-weight: normal;
		line-height: 1em;
		text-align: center;
		text-decoration: none;
	}

	.btn:hover, .btn:focus, .btn:active {
		color: #628cac;
		background-image: none;
		text-decoration: none;
	}

	.btn:active {
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.yellow-bar {
		margin: 0;
		padding: .5em .5em 0 .5em;
		color: black;
		background: yellow;
		z-index: 2;
	}
}

.navigation {
	display: none;
	opacity: 0;
	overflow: hidden;
	
	-webkit-transition: opacity .3s ease;
	-moz-transition: opacity .3s ease;
	-ms-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

/* Burger menu */

@media screen and (max-width: 46em) {

	#burger-icon {
		display: block;
	}

	#burger-icon span {
		background-color: #628cac;
	}
	
	.navigation {		
		display: block;	
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		padding: 36px 36px 20px 36px;
		z-index: 999998;
		pointer-events: none;

		color: gray;
		font-size: 1.5em;
		line-height: 2;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.82);
		box-shadow: 0 10px 5px rgba(0, 0, 0, .5);
	}
	
	.burger-active .navigation {
		bottom: auto;
		pointer-events: all;
		opacity: 1;
	}

	.navigation li a {
		display: block;
		margin: 0;
		padding: 0 .5em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.navigation p {
		margin: 0;
		padding: 0;
	}

	.header {
		padding-top: 16px;
	}
	
	.footer-right a {
		margin-right: 1em;
	}
}

/* Side menu */
	
@media screen and (min-width: 46em) {

	body {
		margin: 0 auto;
		max-width: 1112px;
		background-color: #d1d0d0;
	}

	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.25rem; }
	h4 { font-size: 1.125rem; }
	h5 { font-size: 1rem; }
	h6 { font-size: .875rem; }

	.page {
		background-color: #628cac;
		background-image: url(hintergrund-bleu5.svg);
		background-attachment: scroll;
		background-position: right top;
		background-repeat: repeat;
		background-size: 33em;
		 
 		min-height: 100vh;
	}

 	.container {
		margin-right: 16em;

		background-color: #fff;
 		min-height: 100vh;
	}

	.navigation {
		float: right;
 		text-align: left;
 		
 		display: block;
		width: 14em;
		margin-bottom: -1em;
		padding: 1em 1em 0 1em;
		opacity: 1;
		color: black;
	}

	.burger-active .navigation {
		display: none;
	}

	.navigation ul {
		margin-bottom: 1.5em;
	}

	.navigation a:hover,
	.navigation li a:hover {
		text-decoration: underline;
	}

	.wikitags ul, .blogtags ul {
		padding: .5em;
		border: 1px solid #aaa;
		text-align: left;
	}
	
	.wikitags li, .blogtags li {
		font-size: 0.9em;
		display: inline;
	}

	.wikitags li a, .blogtags li a {
		display: inline;
		padding: 0;
		margin-right: 0.5em;
		border: none;
	}

	.footer-left {
		float: left;
	}

	.footer-right {
		float: right;
	}

	.footer-right a {
		margin-left: 1em;
	}
}

/* Side menu landscape */

@media screen and (min-width: 46em) and (max-width: 1112px) and (max-height: 48rem) {

	.sitename-banner {
		padding-bottom: 10%;
		}

	h1 { font-size: 1.25rem; }
	h2 { font-size: 1.125rem; }
	h3 { font-size: 1.1rem; }
	h4 { font-size: 1rem; }
	h5 { font-size: .875rem; }
	h6 { font-size: .85rem; }

	h1 {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	
	.content .entry .entry-meta {
		margin-top: -1rem;
	}
}

@media (prefers-color-scheme: dark) {
	body,
	.container {
	  font-weight: 400;
		background-color: #888;
		color: #fff;
	}
	
	body{
		background-color: #777;
	}
	
	a {
		color: #b23;
	}

	a:hover {
		color: #b23;
	}

	#burger-icon span {
		background-color: #b23;
	}
}

/* Asus Kiosk */

@media screen and (min-width: 1600px) and (max-width: 1600px) {
	body,
	.container {
	  font-weight: 800;
	}
	
	body {
		max-width: 1600px;
	}
}

@media print {

	body {
		color: black;
		background-color: white;
	}

    h1, h2, h3, h4, h5, h6 
    {
	    page-break-after: avoid
    }

	a {
		color: black;
		text-decoration: none;
	}

	a[href^="http://"]:after {
		content: " (" attr(href) ")";
		font-size: 90%;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	.navigation, .sitename-banner, .footer-right {
		display: none;
	}
}

.sidebar {
	display: none;
}