body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#333;
}
#container{
	width:970px;
    max-width: 100%;
	margin:auto;
}

#mainbar{
	float: left;
	width:910px;
	margin-left:-20px;
}

#blogitems{
	background-image:url(/skins/pencil/back.jpg);
	padding:10px 0px 20px 70px;
	width:910px;
}

#blogitemsfooter{
	background-image:url(/skins/pencil/bottom.jpg);
	background-repeat:no-repeat;
	height:100px;
}


#sidebar {
	margin-left: -120px;
	float:left;
	width: 200px;
	margin-top: 200px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

.blogitem{
	width:710px;
}

.blogitem img{
max-width: 100%
}

.blogitem video{
max-width: 100%
}

.paneltop,
.pagetop,
.messagetiteltop{
	background-image:url(/skins/pencil/kader_top.png);
	background-repeat:no-repeat;
	height:20px;
	background-position: -4px;
}

.panelbody,
.page,
.messagebody{
	background-image:url(/skins/pencil/kader_fill.png);
	background-position: left top;
	background-repeat: repeat-y;
	padding:20px 40px 30px 40px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#555;
	line-height: 1.6;
	font-size:14px;
	max-width:710px;
}

.panelbottom,
.pagebottom,
.msgfooter{
	background-image:url(/skins/pencil/kader_bottom.png);
	background-repeat:no-repeat;
	background-position: 2px;
	height:8px;
	margin-bottom:16px;
	
}


.messagebody{
	padding-top:50px;
}

.messagetitel{
	position:absolute;
	padding: 6px 20px;
	font-family: 'Kreon', arial, serif;
	font-size: 30px;
	font-weight: bold;
}

h2 { 
	font-family: 'Kreon', arial, serif;
	font-size: 30px;
	font-weight: bold;
	margin-top:0px;
}


h4,
.formsurface{
	font-family: 'Kreon', arial, serif;
	font-size: 14px;
	font-weight: bold;
	padding-top:10px;
}

h3,
.formsurfacetitle,
.eltitel { 
	font-family: 'Kreon', arial, serif;
	font-size: 20px;
	font-weight: bold;
}

.forminput{
	width:400px;
	margin-left:24px;
}

a:link,
a:visited{
	color:#444;
}

a:hover{
	background-color:#EEE;
}

h2 a:link,
h2 a:visited{
	color:#444;
	text-decoration:none;
}

h2 a:hover{
	text-decoration:underline;
}


.inline {
	border:none;
	float:left;
	padding: 0 12px 0 0 ;
}

.floatreset{
	clear:both;
}

.footer {
	font-size: 11px;
	color: #666;
	padding: 4px 0px 20px 0px;
}

.tagcontainer {
	float: left;
}

.commentcontainer {
	float: right;
}

#submenu a:link,
#submenu a:visited{
	display:block;
	font-weight:bold;
	font-size:15px;
	font-family: 'Kreon', arial, serif;
	text-decoration: none;
	padding-top: 2px;
	padding-bottom: 1px;
	padding-left: 16px;
}

#submenu a:hover{
	text-decoration:underline;
	background:none;
}

#navigation a:link,
#navigation a:visited{
	font-size:15px;
	text-decoration: none;
	padding: 5px;
	margin: 2px;
}


#navigation a:hover{
	color: #FFF;
	background-color: #444;
	margin: 2px;
	padding: 5px;
}

.thispage{
	color: #FFF;
	background-color: #AAA;
	margin: 2px;
	padding: 5px;
}


.codebox {
	font-family: "Lucida Console", Monaco, monospace;
	background-color: #EBEBEB;
	padding: 16px;
	border: 1px solid #999;
	margin: 8px;
	height: 300px;
	overflow: scroll;
	color: #2B3C55;
}

td.footer{
	padding:4px 1px;
}

.blogimagethumbwithlink,
.blogimagethumb{
	-webkit-box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.6);
	box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.6);
	margin: 6px 0;
}
@media (max-width: 950px) {

    #graphictitle{
        height: auto;
    }

    html {
        box-sizing: border-box;
    }
    *, *:before, *:after {
        box-sizing: inherit;
    }

    #titel{
        max-width: 100%;
    }

    .panelbody,
    .page,
    .messagebody{
           max-width: 710px;
    }

    #sidebar {
        display: none;
    }

    #blogitems{
        width: 100%;
        background-size: contain;
    }


    #mainbar{
        float: none;
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 730px) {
    #blogitems{
        padding: 10px 0;
    }

    .panelbody,
    .page,
    .messagebody{
        max-width: 100% ;
    }

    .blogitem{
        width: 100%;
    }

    img,
    iframe{
        max-width: 100%;
    }

    .paneltop, .pagetop, .messagetiteltop{
        background-size: 100% 20px;
    }

    .panelbottom, .pagebottom, .msgfooter{
        background-size: 100%;
    }

    .panelbody, .page, .messagebody{
        background-size: 100%;
    }
}



/* Node version: same pencil artwork, with a self-contained responsive layout. */
body { margin: 0; background: #fff; }
#container { display: flex; align-items: flex-start; max-width: 100%; }
#mainbar { flex: 1; min-width: 0; }
#graphictitle { max-width: 100%; height: auto; }
#sidebar { position: relative; z-index: 1; }
#blogitemsfooter { clear: both; }
.blogitem { margin-bottom: 16px; }
.panelbody { overflow-wrap: anywhere; }
.panelbody::after { content: ''; display: block; clear: both; }
audio, video, iframe { max-width: 100%; }
video { height: auto; }
.attachment { max-width: 150px !important; max-height: 500px; object-fit: contain; }
.attachment-big { max-width: 100%; height: auto; display: block; margin-bottom: 1rem; }
.comment { border-top: 1px solid #ddd; padding: 12px 0; }
.comment p { white-space: normal; }
.comment footer, .archive-note, small { color: #666; font-size: .85em; }
#comments { clear: both; margin-top: 32px; }
#comments:target { scroll-margin-top: 20px; }
.search { margin: 24px 0; }
.search label, .search input { display: block; }
.search input { box-sizing: border-box; width: 100%; max-width: 180px; margin: 8px 0; }
.years { display: flex; flex-wrap: wrap; gap: 8px; }
.years a { min-width: 35px; }
figure { margin: 16px 0; }
figure img { max-height: 350px; }
.bare #container { max-width: 1100px; gap: 30px; padding: 20px; box-sizing: border-box; }
.bare #mainbar { float: none; width: auto; margin: 0; }
.bare #sidebar { float: none; margin: 0; width: 180px; flex-shrink: 0; }
.bare #blogitems { width: auto; padding: 0; background: none; }
.bare .blogitem { width: auto; }
.bare .panelbody { background: none; padding: 20px 0; }
.bare .paneltop, .bare .panelbottom, .bare #blogitemsfooter { display: none; }
.bare #titel { max-width: 650px; }
@media (max-width: 950px) {
  #container { display: block; width: 100%; }
  #mainbar { float: none; width: 100%; margin: 0; }
  #blogitems { width: 100%; padding: 10px 0; box-sizing: border-box; }
  #sidebar { float: none; width: auto; margin: 20px; max-width: 710px; }
  .blogitem { max-width: 710px; margin-left: auto; margin-right: auto; }
  #blogitemsfooter { background-size: 100%; }
  .bare #sidebar { width: auto; }
}
@media (max-width: 500px) {
  .panelbody { padding: 14px 20px; }
  h2 { font-size: 25px; }
  .tagcontainer, .commentcontainer { float: none; display: block; margin: 8px 0; }
  .inline.attachment { float: none; display: block; padding: 0; margin-bottom: 12px; }
  .paneltop, .panelbottom { background-size: 100%; }
}