div, li {border:0 solid red;}

/* layout 
======================================== */
body {margin: 0;background-color: #e7e7e7; overflow-x: hidden;}
#bg {position: absolute;z-index: 1;top: 0;left: 0;width: 99vw; height: 250vh;opacity: 0.2;background-color: #fff;}
.container {margin:0 auto;max-width: 92%;}
.entry-content img {float: left;}
.entry-title {height: 30px;margin-top: 20px;}
legend {display:none;}
fieldset {border: 0;padding: 0;}
h3 {margin:0 10px 0 0;padding:0;}
hr {height: 10px;color: #00000000;border-width: 0;clear: both;margin-top: 20px;}
.left {float: left;}
.left-title {float: left;margin:10px 20px 20px 0;}
#links {position: fixed;z-index: 4;top: 60px;left: 5px;width: 94%; white-space: nowrap;}
#links li {white-space: nowrap;width:19.5%;height: 32!important;float: left;text-align: right;}
#links li span {width:17%;}
#links li img {width: 32px;height: 32px;}
#logo {position: fixed; z-index: 5700; top: 0;left: center;max-width:800px; height: auto;opacity: 0.9;clip-path: polygon(2% 7%, 97% 0, 100% 96%, 3% 100%);}
#logo:hover {opacity: 1;transition: opacity 0.2s ease-in-out;}
li, ul {list-style: none;}
main {margin:116px auto 0 auto;width: 100%;}
main img {margin:0 10px 10px 0;float: left;max-width: 100%;height: auto;}
main p {clear: both;}
nav {height: auto;margin-bottom: 20px;text-align: left; width:100px; }
nav img {margin: 0;padding: 0;}
.published {margin:5px 20px 0 0;float: right;}
ul, ul li {margin: 0;padding: 0;}
.wrapper {position: absolute;z-index: 4;display: block;height: auto;margin: 0;overflow: hidden;}


/* typography 
======================================== */
@font-face {font-family: 'Roboto';src: url('../../../typeface/RobotoCondensed-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;}
.bars, #close {font-size: 40px;margin: 0;line-height:30px;}
body {font:20px Roboto, sans-serif;color: #003;}
body p {padding: 0;margin:0 0 0.5em 0;}
.container {text-align: left;}
.edit {font-size: 20px;padding: 5px;}
.left-title {text-transform: uppercase;}
input.comSubmit {font-size:20px;}
#links li {font-size: 200%;}
#links a {letter-spacing:-0.05em;}
#links big {line-height:15px;}
main {font-size:85%;}
.published, .small {font-size:10px;}
#site-slogan {font-size: 12px;color: #333;}
.wrapper {text-align: center;}


/* links 
======================================== */
a, a:visited {text-decoration: none;color: #000;border-bottom:1px dotted #888;font-weight: bold;}
a:hover {border-radius:11px;}
a:hover, #links li a:hover {background:rgba(255,255,255,1);transition: background-color 0.2s ease-in-out;}
.bars a, .bars a:active, .bars a:visited, .bars {border:none;}
.edit a {font-weight: normal;}
#links li a:hover {color: #000;}
#links li a {font-weight: normal; text-transform: uppercase;padding:0 15px 0 8px;color: #000;border: 0;}
a#show, a#hide {text-transform: lowercase;border: none;}


/* buttons & forms
======================================== */
textarea .comTextarea {width: 100%;max-width:100%;}
input.comSubmit {margin: 7px 0 0 0;height: 35px;background: #7dbbf6;color: white;border-radius: 11px;border: none;padding:4px 12px 12px;border:1px solid #4787c4;}
input.comSubmit:hover {background: #98cdff;transition: background-color 0.2s ease-in-out;}


/* radio und hilfe 
======================================== */
#radiozeugs main {width:100%;}
#radiozeugs .wrapper {width:100%;}



/* Additional layout for screen media 800px and up
========================================================================== */
@media only screen and (min-width: 48em) {
body {font-size: 20px;}
.container {width: 100%;max-width: 800px;}
hr {height: 10px;}
#links {left: 0;float: left;left: variable;text-align: right;max-width:17%;}
#links li {float: none;margin-top: 5px;width: 100%;}
#links li a {padding:0 15px 0 14px;}
#logo, #logo img {left: center;max-width: 800px;}
main {width:100%;max-width: 600px;}
nav {width:70px; float: left;}
.wrapper {width:100%;}
}