<!DOCTYPE html>
<html lang="en">

<head>

<style>

/*
* {
	outline: 1px solid black;
}
*/
body 
{
	padding: 0;
	margin: 0;
}
img 
{
	margin: 0;
	padding: 0;
}
figure 
{
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
.picture 
{
	padding: 0;
	margin: 0;
	width: 100%;
    height: 100%;
}
main 
{
	margin: 0 auto;
	width: 1110px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
div.headline
{
	font-family:arial;
	color: DarkCyan;
}
div.date
{
	font-family:arial;
	color: black;
}
div.headline_small
{
	font-family:arial;
	/*color: #096062;*/
	color: DarkCyan;
}	
div.text_black		/*-------different text types-BEGIN---------*/
{
	font-family:arial;
	color: black;
}
div.text_blue
{
	font-family:arial;
	color: blue;
}
div.text_red
{
	font-family:arial;
	color: darkred;
}
div.text_green
{
	font-family:arial;
	color: green;
}
div.text_orange
{
	font-family:arial;
	color: black;
	background-color: orange;
}					/*-------different text types-END---------*/
div.link 	 
{
	font-family:arial;
	color: black;
}
div.menulink1	 
{
	font-family:Arial;	
	color: Black;
}	
div.dropmenulink 
{
	font-family:Arial;	
}	
div.menulink_dead
{
	font-family:Arial;	
	color: #096062;
}
div.next_post_l
{
	display: inline-block;
	margin: 30px 10px 0px 0px;
}
div.next_post_r
{
	display: inline-block;
	margin: 0px 10px 0px 0px;
}
div.blog_image
{
	display: inline-block;
	padding: 0px 0px 10px 40px;
}


@media screen and (min-width: 1135px) 
{
	main 
	{
		margin-top: 90px;		/* :D */
	}
	
	.menucontainer
	{
		width: 100%;
		background-color: white;
		list-style-type: none;
		padding: 0;
 		overflow: visible;
 		position: fixed;
 		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
		
	}


	html body .menucontainer > * {
		margin-right: 40px;
	}

	.menucontainer_mobile
	{
		display: none;
	}
	
	div.date
 	{
		font-size:80%;
		margin: 10px 0px 10px 40px;
 	}
	
 	div.text_black 	{ margin: 10px 0px 10px 40px; }
	div.text_blue 	{ margin: 10px 0px 10px 40px; }
	div.text_red 	{ margin: 10px 0px 10px 40px; }
	div.text_green 	{ margin: 10px 0px 10px 40px; }
	div.text_orange { margin: 10px 0px 10px 40px; }
	
	div.menulink1
 	{
		/*cursor: pointer;  */
		font-size:100%;
		float: left;  
		/*margin: 25px 5px 0px 30px;*/
		background-color: white;
	}
	div.dropmenulink
 	{
		/*cursor: pointer; */ 
		font-size:100%;
		float: left;  
		margin: 10px 10px 10px 10px;
		background-color: white;
	}
	div.menulink_dead
	{
		cursor: context-menu;
		font-size:100%;
		float: left;
		background-color: white;
	}
	.whitecontainer
	{
		top: 0;
		background-color: white;
		position: fixed;
		height: 80px;
		width: 100%;	
		display: none;
	}
	a.logolink 
	{
		display: block;
		cursor: pointer;
		float: left;
		margin: 10px 10px 0px 10px;
		background-color: white;
		width: 300px;		/*500px*/
	}
	a.logolink img 
	{
		/*width: 100%;*/
		border: 0;
		display: block;
		margin: 5px 0px 5px 5px;
	}
	div.dropdown-content 
	{
		background-color: white;
  		display: none;
  		position: absolute;
  		min-width: 180px;

  		z-index: 1;
		box-shadow: 0 3px 3px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.20);
	}
	.dropbtn 
	{
		color: black;
 		background-color: white;
  		padding: 0px;
  		font-size: 100%;
  		border: none;
  		cursor: context-menu;
	}
	.dropdown 
	{
  		position: relative;
  		display: inline-block;
	}
 	div.link
 	{
		display: inline-block;
		margin: 0px 0px 0px 10px;
		padding-bottom: 20px;
 	}
	div.headline
	{
		font-size:300%;	
		margin: 0px 0px 20px 40px;
 	}
	div.headline_small
	{
		font-size:150%;
		font-weight: bold;
		margin: 40px 0px 10px 40px;
 	}
	img
	{
		width: 300px;
    	/*height: auto;*/
		/*margin: 0px 0px 0px 40px;*/
		border: 1px solid #ddd;
 		border-radius: 4px;
  		padding: 5px;
	}
	div.picture
	{
		width: 250px;
    	height: auto;
		/*margin: 0px 0px 0px 40px;*/
	}
	div.picture img
	{
		width: 100%;
		height: 100%;
		display: block;
	}
	.arrow-right
	{
		display: inline-block;
		margin: 0px 0px -4px 40px;
  		width: 0; 
  		height: 0; 
  		border-top: 10px solid transparent;
  		border-bottom: 10px solid transparent;
  		border-left: 10px solid darkcyan;
	}
}

/* MOBILE CSS START */
@media screen and (max-width: 1134px)   /*  max-width: 1079px  */
{
	main 
	{
		/*margin: 0 auto;*/
		width: 100%;
		/*height: 100%;*/
		margin-top: 100px;
	}
	.menucontainer
	{
		/*visibility: hidden;*/
		/*background-color: white;*/
		list-style-type: none;
		padding: 0;
 		overflow: hidden;
 		position: fixed;
 		top: 0;
		left: 50%;
		
 		/*width: 650px;*/
		transform: translate(-50%, +1%);
		/*margin: 0 auto;*/
	}
	a.logolink 
	{
		display: block;
		cursor: pointer;
		float: left;
		margin: 10px 10px 0px 10px;
		background-color: white;
		width: 300px;		/*200px*/
	}
	div.date
 	{
		font-size:60%;
		margin: 20px 0px 20px 20px;
 	}
	
	div.text_black 	{ margin: 20px 0px 20px 20px; }
	div.text_blue 	{ margin: 20px 0px 20px 20px; }
	div.text_red 	{ margin: 20px 0px 20px 20px; }
	div.text_green 	{ margin: 20px 0px 20px 20px; }
	div.text_orange { margin: 20px 0px 20px 20px; }

	a.logolink img 
	{
		/*width: 100%;*/
		border: 0;
		display: block;
		margin: 5px 0px 0px 0px;
	}
	.menucontainer_mobile
	{
		position: fixed;
		/*overflow: hidden;*/
		/*background-color: white;*/
		top: 60px;
		width: 50px; /*50px*/
		/*margin-top: -80px;
		margin-top: 4%;		*/		/*Less% means less x distance*/
		
		left: 50%;
		transform: translate(-50%, +1%);
		height: 50px;
	}
	.whitecontainer
	{
		top: 0;
		background-color: white;
		position: fixed;
		width: 100%;
		height: 90px; 	/* Safari browser displays it wrong, so it needs more height for all browsers*/
		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	}
  	div.link	 
	{
		display: inline-block;
		margin: 0px 0px 0px 10px;
		padding-bottom: 20px;
 	}
	div.blog_image
	{
		margin: 0px 0px 5px 20px;
		padding: 5px 5px 1px 5px;
		border: 1px solid #ddd;
 		border-radius: 4px;
	}
 	div.menulink1	/*For wide screens*/
 	{
		display: none;
	}
	div.menulink2	/*For mobile screens*/
 	{
		/*visibility: hidden;*/
		/*cursor: pointer;  */
		font-size:60%;
		float: left;
		margin: 0px 10px 0px 0px;
		border: 5px solid white;
		background-color: white;
	}
	div.dropmenulink
 	{
		/*visibility: hidden;*/
		/*cursor: pointer;  */
		font-size:100%;
		float: left;
		margin: 0px 0px 0px 0px;
		border: 10px solid white;
		background-color: white;
	}
	div.dropmenulink:nth-child(2n) /* Every second child will be right alinged */
	{
		float:right;
	}
	div.menulink_dead
	{
		display: none;
	}
 	div.headline
  	{
		font-size:200%;
		margin: 0px 0px 0px 20px;
 	}
	div.headline_small
  	{
		font-weight: bold;
		font-size:100%;
		margin: 50px 0px 5px 20px;
 	}
  	div.picture
 	{
    	width: 170px;
    	height: auto;
 	}
	div.picture img
 	{
		width: 100%;
		height: 100%;
		display: block;
	}
	div.logo  /*Hardwaredesign Picture*/
	{
		position: fixed;
    	width: 70%;
		max-width: 300px;
    	/*height: 80%;*/
		top: 10px;
		left: 50%;
		transform: translate(-50%, +1%);
	}
	div.dropdown-content
	{
		display: none;
    	position: absolute;
    	min-width: 240px;
    	z-index: 1;
    	/* left: -90px; */
    	background: white;
    	left: 50%;
    	transform: translate(-50%, -1%);
		box-shadow: 0 3px 3px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.19);
	}
	.dropbtn
	{
		color: black;
 		background-color: white;
  		padding: 0px;
  		font-size: 130%;
  		border: none;
  		cursor: context-menu;
	}
	.dropdown
	{
  		position: relative;
  		display: inline-block;
	}
	.arrow-right 
	{
		display: inline-block;
		margin: 0px 0px -4px 20px;
  		width: 0; 
  		height: 0; 
  		border-top: 10px solid transparent;
  		border-bottom: 10px solid transparent;
  		border-left: 10px solid darkcyan;
	}
}
	


	
a:link, a:visited 
{
 	font-family:arial;
 	color: black;
 	padding: 0px 0px 0px 0px;
 	margin: 0px 0px 0px 0px;
 	text-align: center;
 	text-decoration: none;
 	display: inline-block;
}
a:hover, a:active 
{
 	font-family:arial;
 	color: DarkCyan;
}
.dropdown-content a 
{
	/*left: 100%;
	margin-left: 0.125rem;*/
  	color: black;
  	padding: 0px 16px 0px 16px;
  	text-decoration: none;
  	display: block;
}
.dropdown:hover .dropdown-content 
{
  	display: block;
}
.dropdown-content a:hover
{
	/*background-color: #f1f1f1*/
	color: DarkCyan;
}
.dropdown:hover .dropbtn 
{
   	color: DarkCyan;
}	
	

	
	
	
	
	
</style>	
</head>	