/*
	  -------------------------------------------------------------------------
	  CSS-Stylesheet für
	  hobby-elektroniker.de                       
	  -------------------------------------------------------------------------
	  Teil: BASE-Style
	  -------------------------------------------------------------------------
	  Autor: Torsten Just
	  Datum: 1.4.2018
	  Alle Rechte vorbehalten.
	  -------------------------------------------------------------------------
	*/
	
	
	/*
	  +-- *, html,body -------------------------------------------------------+
	  |       +-- .main ----------------------------------------------+       |
	  |       |+-- .navibox -----------------------------------------+|       |
	  |       ||+-- nav --------------------------------------------+||       |
	  |       |||                                                   |||       |
	  |       ||+---------------------------------------------------+||       |
	  |       |+-----------------------------------------------------+|       |
	  |       |+-- header -------------------------------------------+|       |
	  |       ||                                                     ||       |
	  |       |+-----------------------------------------------------+|       |
	  |       |+-- article -------------------------+ +-- aside -----+|       |
	  |       ||+-- section -----------------------+| |              ||       |
	  |       |||                                  || |              ||       |
	  |       ||+----------------------------------+| |              ||       |
	  |       ||+-- section -----------------------+| |              ||       |
	  |       |||                                  || |              ||       |
	  |       ||+----------------------------------+| |              ||       |
	  |       ||+-- section -----------------------+| |              ||       |
	  |       |||                                  || |              ||       |
	  |       ||+----------------------------------+| |              ||       |
	  |       |+------------------------------------+ +--------------+|       |
	  |       |+-- footer -------------------------------------------+|       |
	  |       ||                                                     ||       |
	  |       |+-----------------------------------------------------+|       |
	  |       +-------------------------------------------------------+       |
	  +-----------------------------------------------------------------------+
	*/
	
	
	
	/* Boxmodell vereinheitlichen */
	* {
		margin: 					0;
		padding: 					0;
		box-sizing: 				border-box;
	}
	
	/* Grundeinstellungen für Seite */
	html, 
	body {
		width: 						100%;
		height:						100%;
		margin:						0;
		padding: 					0;
		font-family: 				'Roboto', sans-serif;
		font-size: 					1em;
	}

	/* Streifen-Hintergrund für Body */
	body {
		background-image: 			repeating-linear-gradient(45deg, #333 0%, #333 5px, #555 5px, #555 10px, #333 10px);
		background-attachment: 		fixed;
		overflow-y: 				scroll;
	}

	/* Platzhalter für Navigationsleiste formatieren */
	.navibox {
		width: 						100%;
		max-width: 					998px;
		position: 					fixed;
		z-index: 					900;
		padding: 					0px;
		font-family: 				'Roboto', sans-serif;
		font-style: 				italic;
		font-size: 					0.8em;
		background-color: 			#555;
		border-bottom: 				1px solid black;	
	}
	
	/* Blog-Bereich formatieren */
	.main {
		width: 						100%;
		max-width: 					1000px;
		height: 					auto;
		min-height: 				100%;
		margin: 					0 auto;
		padding-bottom: 			2.5em;
		padding: 					0;
		background-color: 			#aaa;
		border:						1px solid #444;
		border-width:				0 1px 0 1px;
		box-shadow: 				0 -6px 20px 0 rgba(0,0,0,0.8);
	}

	/* Homepage-Überschrift / Logo */

	header {
		width: 						auto;
		text-align: 				center;
		font-size: 					1em;
		padding-top: 				30px;
		padding-bottom: 			20px;
		background-image: 			linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
	}

	header h1 {
		line-height: 				160%;
		font-size: 					3em;
		color: 						white;
		margin-top: 				20px;
		margin-bottom: 				20px;
		text-shadow: 				-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 1px 2px black;
	}

	/* Beitragsbereich */
	
	article {
		display: 					block;
		width: 						66%;
		float:						left;
		padding: 					20px;
		margin-top:					30px;
		font-size: 					0.9em;
		line-height: 				160%;
	}

	article h2{
		font-weight: 				normal;
		line-height: 				120%;
		margin-bottom: 				0px;
		color: 						#eee;
		text-shadow: 				-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	}
	
	article h4{
		font-weight: 				normal;
		margin-bottom: 				0px;
		color: 						#eee;
		font-size: 					0.7em;
	}

	article p {
		padding-bottom: 			30px;
		text-align: 				justify;
	}
	
	article p.break {
		clear: 						both;
		padding-bottom: 			0px;
	}
	
	article p span {
		background-color: 			#888;
		color: 						white;
		border: 					1px solid #555;
		font-size: 					0.9em;
		border-radius: 				5px;
		padding: 					2px 5px;
		white-space: 				nowrap;
	}
	
	article ul,
	section ul	{
		list-style-type:			none;
		text-align: 				left;
	}
	
	article ul li,
	section ul li {
		padding-left: 				1em; 
		text-indent: 				-1em;
	}
	
	article a{
		color: 						#2076cc;
		text-decoration: 			none;
		font-weight: 				bold;
	}
	
	article a:hover{
		color: 						#dedede;
	}
	
	article a:after {
		content: 					'\0025BA '; 
		display: 					inline-block; 
		position: 					relative; 
	}
	
	article img.fullimg,
	article img.leftimg,
	article img.rightimg,
	article img.avatar {
		margin-top: 				5px;
		margin-bottom: 				15px;
		border: 					1px solid black;
		box-shadow: 				6px 6px 15px 0 rgba(0,0,0,0.8);
	}
	
	article img.fullimg {
		width: 						90%;
		margin-left: 				5%;
		margin-right: 				5%;
	}
	
	article img.leftimg {
		width: 						48%;
		margin-right: 				2%;	
		float:						left;
	}
	
	article img.rightimg {
		width: 						48%;
		margin-left: 				2%;
		float:						right;
	}
	
	article img.avatar {
		position:					relative;
		float:						right;
		width: 						40%; 
		max-width:					180px;
		top:						-50px;
		margin:						5px 0 -50px 2%;
		border-radius:				50%;		
	}

	article img.avacontact {
		margin-bottom: 				-100px; 
		z-index:					888;
	}
	
	.bubble {
		position: 					relative; 
		float: 						right;  
		width: 						60%;
		max-width: 					50%;
		top:						-40px; 
		left:						50px;
		padding: 					10px 20px; 
		text-align: 				center;		
		background: 				#eee; 
		border-radius: 				50vh; 
		z-index: 					889;
		border: 					1px solid black;
		box-shadow: 				6px 6px 10px 0 rgba(0,0,0,0.6);
	}
  
	/* Linkbereich */
  
	aside {
		display: 					inline-block;
		width: 						33%;
		font-size: 					0.9em;
		line-height: 				200%;
		text-align: 				right;
		padding: 					20px;
		margin-top:					30px;
	}

	aside p {
		padding-bottom: 			30px;
	}

	aside h3 {
		color: 						#ededed;
		text-shadow: 				-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 2px 2px #555;
	}
	
	aside a {
		color: 						#000;
		text-decoration: 			none;
		font-weight: 				bold;
	}
	
	aside a:hover{
		color: 						#2076cc;
	}
	
	aside a:hover:before {
		content: 					'\0025BA '; 
		display: 					inline-block; 
		position: 					relative; 
	}
	  
	/* Fußzeile */
	
    footer {
		clear: 						both;
		position: 					relative;
		width:						100%; 
		max-width:					998px;
		height:						2.5em;
		bottom: 					0px;
		font-style: 				italic;
		font-size: 					0.7em;
		font-weight: 				normal;
		text-align: 				center;
		color: 						#aaa;
		padding: 					8px 20px;
		margin: 					0 auto; 
		margin-top: 				-2.5em;
		background-color: 			#555;
		border-top: 				1px solid black;
	}
	
	/* Allgemeine Gestaltungsmittel */
	
	h1,h2,h4,h5,h6 {
		font-family: 				'Prosto One', sans-serif;
	}
	
	/* HR Linie abgeleitet von https://codepen.io/ibrahimjabbari/pen/ozinB */

	hr {
		border: 					0px;
		border-top: 				1px dashed #dedede;
		height: 					20px;
	}
	
	aside hr {
		width: 						70%;
		margin-left: 				30%;
	}

	hr:after { 
		content: 					'\0025BC'; 
		display: 					inline-block; 
		position: 					relative; 
		top: 						-12px; 
		left: 						-0px; 
		color: 						#dedede; 
		font-size: 					20px; 
		padding: 					0; 
		background: 				rgba(0,0,0,0);
	}
	
	button,
	input[type='submit'],
	input[type='button']	{
		font-size: 					0.8em;
		color: 						white;
		padding: 					3px 20px;
		margin-top: 				4px;
		background-color: 			#555;
		border-radius: 				4px;
		border: 					1px solid #000;
	}
	
	button:hover , 
	input[type='submit']:hover
	input[type='button']:hover	{ 
		box-shadow: 				0 3px 4px 0 rgba(0,0,0,0.24), 0 6px 20px 0 rgba(0,0,0,0.19);
	}
	
	textarea, input[type='text']{
		width: 						100%;
		max-width: 					500px;
		font-family: 				'Roboto', sans-serif;
		font-size: 					0.8em;
		padding: 					5px;
		margin-top: 				2px;
		margin-bottom: 				4px;
		background-color: 			#efefef;
		-webkit-box-sizing: 		border-box;
		-moz-box-sizing: 			border-box;
		box-sizing: 				border-box;
		border-radius: 				4px;
		border: 					1px solid #555;
	}
	
	.shortet {
		max-height: 				500px;
	}
	
	/* Kommentardarstellung */
	
	div.comment {
		width:						100%; 
		background: 				#cfcfcf; 
		border-radius: 				4px; 
		font-size:					1em; 
		padding: 					10px; 
		margin-bottom: 				10px;
	}
	div.comment table {
		width:						100%;
		margin-bottom: 				5px;
		border: 					0px;
	}
	
	div.comment table tr td:first-child {
		width: 						50px;
	}
	
	div.comment table tr td:first-child  div{
		width: 						40px; 
		height: 					40px; 
		font-size:					30px; 
		font-weight:				bold; 
		text-align: 				center;
		color:						white;
		padding-top: 				0px;
		text-shadow: 				-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
		border: 					1px solid black; 
		box-shadow: 				2px 2px 6px 0 rgba(0,0,0,0.5);
	}
	
	div.comment table tr td:nth-child(2) {
		font-size:					0.7em; 
		border-radius: 				20px; 
		padding-left: 				15px; 
		background: 				-moz-linear-gradient(left, rgba(122,122,122,0.65) 0%, rgba(0,0,0,0) 100%); 			/* Firefox */
		background: 				-webkit-linear-gradient(left, rgba(122,122,122,0.65) 0%,rgba(0,0,0,0) 100%); 		/* Chrome, Safari */
		background: 				linear-gradient(to right, rgba(122,122,122,0.65) 0%,rgba(0,0,0,0) 100%); 			/* W3C  */
		filter: 					progid:DXImageTransform.Microsoft.gradient( startColorstr='#a67a7a7a', endColorstr='#00000000',GradientType=1 );
	}
	
	div.comment p {
		padding-bottom: 			0px;
		text-align: 				left;
	}
	
	#commentScreen {
		display: 					none; /* wird durch Javascript eingeblendet */
		width:						100%; 
		height: 					100%; 
		position:					fixed; 
		top:						0; 
		left:						0; 
		background: 				rgba(200,200,200,0.8); 
		z-index:					998;
	}
	
	#commentBox {
		display: 					none; /* wird durch Javascript eingeblendet (flex) */
		flex-direction: 			column; 
		width:						100%; 
		height: 					100%; 
		position:					fixed; 
		top:						0; 
		left:						0; 
		z-index:					999; 
		justify-content: 			center;
	}
	
	#commentBox  div{
		width:						80%; 
		max-width: 					600px; 
		margin: 					auto; 
		background: 				#ccc; 
		border-radius: 				15px; 
		padding: 					20px; 
		border: 					1px solid black; 
		box-shadow: 				2px 2px 6px 0 rgba(0,0,0,0.5);
	}
	
	#commentBox  div h2{
		text-decoration: 			none;
		font-weight: 				normal;
		line-height: 				120%;
		margin-bottom: 				0px;
		color: 						#eee;
		text-shadow: 				-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	}
	
	#topscrollbutton {
		display: none;
		position: fixed;
		width: 50px;
		height: 50px;
		bottom: 20px;
		right: 20px;
		z-index: 901;
		font-size: 24px;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
		border: 1px solid #777;
		background-color: #555;
		color: white;
		cursor: pointer;
		padding: 5px;
		padding-top: 7px;
		border-radius: 10px;
		box-shadow: 				2px 2px 6px 0 rgba(0,0,0,0.5);
	}
	
	#topscrollbutton img {
		width: 30px;
		height: 30px;
	}
	
	#topscrollbutton:hover {
		border: 1px solid #ccc;
		background-color: #aaa;
		box-shadow: 				2px 2px 12px 0 rgba(0,0,0,0.5);
	}
	
	/* Anpassung für kleinere Bildschirme */
	
	@media screen and (max-width: 1000px) {
		.navibox { 
			position: 				relative; 
		}
		
		article {
			width: 					100%; 
			float: 					inherit;
		}
		
		aside  {
			width: 					100%; 
			float: 					inherit; 
			text-align: 			center;
		}
		
		aside hr {
			width: 					70%; 
			margin-left: 			15%; 
			margin-right: 			15%;
		}
	}
	
	@media screen and (max-width: 640px) {
		
		article img.fullimg,
		article img.leftimg,
		article img.rightimg,
		article img.avatar,
		.bubble {
			width: 					90%;
			max-width: 				inherit;
			float: 					inherit;
			position: 				inherit;
			margin:					0 5% 15px 5%;
		}
		
		article img.avatar {
			width: 					70%;
			margin-left: 			15%;
			margin-right: 			15%;
			z-index: 				1;
			margin-bottom: 			15px;
		}
		
		
		header p{
			font-size: 				0.8em;
		}
		
		header h1 {
			font-size: 				2em;
			color: 					white;
			margin-top: 			10px;
			margin-bottom: 			25px;
		}
		
		article, aside {
			font-size: 				0.8em;
		}
	}
	
	/* Anpassung für Drucker */
	
	@media print {
		.navibox,
		aside,
		#commentBox ,
		#commentBox div,
		#commentBox div h2{
			display:				none;
		}
		
		article {
			width: 					100%; 
			float: 					inherit; 
			font-size: 				0.7em;
		}
		
		.shortet {
			max-height: 			inherit;
		}
		
		.main {
			border: 				0px;
		}

		code {
			white-space:			pre-wrap;
		}			
	}