@font-face 	{ font-family: 'light';  src: url('./font/NunitoSans-Light.ttf') 	format('truetype'); } 
@font-face 	{ font-family: 'normal'; src: url('./font/NunitoSans-Regular.ttf') 	format('truetype'); } 
@font-face 	{ font-family: 'bold'; 	 src: url('./font/NunitoSans-Bold.ttf') 	format('truetype'); } 
@font-face 	{ font-family: 'xbold';  src: url('./font/NunitoSans-ExtraBold.ttf') 	format('truetype'); } 
@font-face 	{ font-family: 'italic'; src: url('./font/FiraSans-Italic.ttf') 	format('truetype'); } 


body		{ color: #000; font-family: "normal"; min-width:560px;  margin: 0px auto; background-color: rgba(236, 236, 236,  1);}
	
* 		{ padding: 0px; margin:0px; }
	
a		{ text-decoration: none; }
a:link 		{ color: #000; }	 	/* unvisited link */
a:visited 	{ color: #000; } 		/* visited link */
a:hover 	{ font-family: 'xbold'; } 	/* mouse over link */
a:active  	{ color: blue; } 		/* selected link */

nav			{
			margin: 0px auto;
			width:100%;
			height: 40px;
			position: fixed;
			padding: 10px 0px 0px 5px;
			top: 0px;
			left: 0px;
			right: 0px;
			background: #86b8ea;
			border-color: none;
			opacity: 0.9;
			}

nav div 	{ margin: 0px auto; max-width:1000px; height:30px;}
nav span	{ float:right; padding: 8px 20px 0px 0px; color: #fff; font-size: 14px; }
nav span mark	{ background: none; color: #fff; font-family: 'xbold'; }
nav img         { float:right; height:30px; width:30px; margin-right: 10px; padding: 0px;}
nav ul img      { float:none; height:auto; width:auto; margin: 0px; padding: 0px;}

nav audio { width:58px; height:30px; background-color: rgba(1, 1, 1,  .5);}
nav audio::-webkit-media-controls-panel { width: calc(100% + 10px)}

nav ul 		{ margin: 0px auto; max-width: 1000px;}
	
nav ul li img 	{
		background-image: url("logo_v2_trans.png");
             	background-position: 0%;
		background-repeat: no-repeat; 
		background-size: contain;
		height:35px;
	 	}
			
nav ul li 	{ list-style-type: none; float:left; width: 50px; font-size:24px; }

	
nav a:link 	{ color: #ffffff; }	/* unvisited link */
nav a:visited 	{ color: #ffffff; } 	/* visited link */
nav a:hover 	{ color: #dd0000; } 	/* mouse over link */
nav a:active  	{ color: #dd0000; } 	/* selected link */
	

header 	{
	        margin: 0px auto;
		width: 100%;
		height: 100%;
		padding: 0px 0px 0px 0px;
		top: 0px;
		left: 0px;
		right: 0px;
		background: #72a2d6;
		border-color: none;
		opacity: 1;			  
	        }

	        

header p 	{ padding-top:58px; max-width: 1000px; margin: 0px auto; height: 100%; padding-bottom:3px;} /*padding-top 53px bündig um aber passend zu den Kacheln darzustellen +5px als optisch oberen Rand*/
header p:after  { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
header p .test  { font-size: 20px; transform: rotate(180deg); writing-mode: vertical-rl ;  text-orientation: sideways; font-family:light;}

header .bg	  	{width:559px; float:right;  margin:0px 0px 5px 0px; }	
header .tile 	  	{width:90px; height:90px; margin:0px 5px 5px 0px; float:left; color: #ececec; background-color: #ffffff; padding:5px;}
header #wind  	        {width:195px; }
header .tile .top   	{font-size:12px; color: #666666; font-family: "bold"; display:inline-block; line-height:20px;}
header .tile .value 	{font-size:28px; color: #72a2d6; font-family: "xbold"; width:100%; text-align:center; vertical-align:middle; line-height:50px; display:inline-block;}
header .tile .unit 	{font-size:18px; color: #a9a8a8; font-family: "xbold"; width:100%; text-align:right; vertical-align:middle; line-height:20px; display:inline-block;}
header .tile svg 	{vertical-align:middle; fill:#72a2d6; margin:0px auto; height:50px; width:50px; }
header .tile img 	{vertical-align:middle; margin:0px auto; height:50px; width:50px; }
header .tile_info 	{width:555px; float:right; margin:0px 0px 5px 0px; height:22px; font-size:14px; line-height:22px;  text-align:center; color: #666666; background-color: #ffffff; font-family: "bold"; padding: 2px; }
header .tile_info svg 	{display:inline; vertical-align:middle; margin-left:40px;}
header .tile_info:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.icon 		  	{fill:#a9a8a8; width:24px; height: 24px; }

footer {
	  margin: 0px auto;
	  color: #fff;
	  max-width: 1000px;
	  margin-top: 0px;
	  border: 0px solid seagreen;
          background-color: rgba(255, 255, 255, 1);
	}
	
	footer div{
    height:63px;
    position:relative;
    overflow:hidden;
} 
footer div:before{
    content:'';
    position:absolute;
    
    width:100%; height:100%;
    margin-top:40px;
    background-color: rgba(134, 184, 234,  1);
    border-top:20px solid rgba(114, 164, 214, 1);
    
    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    transform-origin:100% 100%;
    
    -webkit-transform:skewY(2deg);
    -ms-transform:skewY(2deg);
    transform:skewY(2deg);overflow: visible;
}
footer p { padding: 5px; text-align: justify; font-family: light; font-size: 12px; background-color: rgba(134, 184, 234,  1);}

footer a:link 	 { color: #ffffff; }	/* unvisited link */
footer a:visited { color: #ffffff; } 	/* visited link */
footer a:hover 	 { color: #ffffff; } 	/* mouse over link */
footer a:active  { color: #ffffff; } 	/* selected link */

	/* 
	        footer:before{
    content:'';
    position:absolute;
    top:95%; 
    width:100%; height:*;
    background-color: rgba(46, 46, 46, 1);
    border-top:30px solid rgba(30, 30, 30, .7);
    border-bottom:0px;
    padding-left:0px;
    max-width: 1000px;
    height:50px;
    
    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    transform-origin:100% 100%;
    
    -webkit-transform:skewY(-3deg);
    -ms-transform:skewY(-3deg);
    transform:skewY(-3deg);
    overflow:hidden;
}*/
	h1 { font-family:bold;  font-size:12pt; color: #666666; margin:5px 0px 0px 0px; border-bottom:2px solid #ececec; }
	h1 mark { background-color: rgba(236, 236, 236, 1); width:200px; color: #666666; display:inline-block; font-weight: bold; padding:2px 0px 0px 15px; } /* top right bottom left */

	main{
	  margin: 0px auto;
	  max-width: 1000px;
	  height: auto;
	  border: 0px solid hotpink;
	  background-color: rgba(255, 255, 255,  1);
	}
	
	#left_panel {
	margin: 0px auto;
	padding-left:8px;
	padding-right:14px;
	width: 310px;
 	background-color: ;
	float:left;
	}

	#status {width: 295px; margin:0px auto; scrollbar-width: none; margin-right:3px; padding:15px 15px 5px 15px; border:0px; text-align:justify; color:#3f3f3f; background:#ffffff repeat-x; font-size:12px; max-height:350px; border-bottom: 2px solid #ececec; }	
	#status::-webkit-scrollbar { width: 0px; background: transparent;}
	#status {overflow-y: scroll;}
	#status p {display:block; margin-bottom:15px;}

	#left_panel table {width:100%;  margin:15px 0px 15px 15px; color: #666666; font-size:14px;}
	#left_panel table .value {font-family: "bold";}
	#left_panel table svg {display:inline; vertical-align:middle; fill:#666666; height:30px;}

	#left_panel #temp {width:100%; text-align:center;  font-size:12px;}
	#left_panel #temp .value {font-size:18px;}
	
	#left_panel #rain {width:100%; text-align:center;  font-size:12px;}
	#left_panel #rain .top {font-size:18px;}
	#left_panel #rain .data {font-family: "bold";}

	#left_panel #solluna {width:100%; text-align:center;  font-size:12px;}
	#left_panel #solluna .value {font-size:15px;}

	#left_panel .value_top {background-color: none; line-height:45px; height:45px; color: #666666; margin:5px 0px 0px 15px; font-size:12px; font-family:bold;}
	#left_panel .value_top img {height:35px;  vertical-align: middle;}
	#left_panel .value_top svg {display:inline; vertical-align:middle; fill:#a9a8a8; height:30px;}
	
	#left_panel hr { border:0px; border-top: 2px solid #ececec;}

	#main_panel {
	margin: 0px auto;
	width: 647px;
 	background-color: ;
	float:left;
	}
	
	#stuff table {width:100%;  margin:0px auto; color: #666666; font-family:light;}
	#stuff table td {width:50%; vertical-align:top; margin:0px 0px 0px 10px; padding-right:15px;}
	#stuff table ul {margin:0px 0px 0px 15px;}
	#stuff .contact {background-image:url(icons/contact.png); background-repeat:no-repeat; padding:0px; width:300px; height:30px; color: #ffffff; text-align: left;}
	
	#main_panel img {margin-top:5px;}
	article{
	  margin: 0px auto;
	  padding: 20px;
	  border: 0px solid purple;
	  text-align: justify;
	}
	section{
	  border: 2px solid slateblue;
	}
	aside{
	  border: 2px solid tomato;
	}

@media screen and (max-width: 979px) { 
 
body			{min-width:520px;}
header .tile 		{width:46vw; margin:0px 0px 5px 5px;} 
header .bg   		{width:97vw; float:none;}
header .tile_info 	{width:94.4vw; float:left; margin:0px 0px 5px 5px;}
header #wind  	        {width:93.7vw;  }

#left_panel 		{width:100vw;}
#status 		{width:90vw; margin:0px;}
}

@media screen and (max-width: 980px) { 
.jgrp {width:979px;}
}

@media screen and (max-width: 900px) { 
.jgrp {width:96vw;}
#main_panel img		{width:96vw;}
}