/* responsive style */

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
background-image:url(http://www.kaesekessel.de/pic/hig.jpg);
font-family:Times New Roman,serif;
color:#663333;
}
#wrapper {
overflow: auto;
margin: 0 auto;
min-height: 100%;
padding:20px;
}
#main {
float: right;
width: calc(100% - 180px);
}
.a11y {
position: absolute;
top: auto;
left: -10000px;
overflow: hidden;
width: 1px;
height: 1px;
}

img {
max-width: 100%;
border: none;
}
a:link {
outline: 0;
text-decoration:underline;
color:#CC0000;
}
a:visited {
text-decoration:underline;
color:#FF6600;
}
a:hover {
text-decoration:none;
color:#CC0000;
}
a:active {
text-decoration:none;
color:#FFFF00;
}
a:focus {
text-decoration:none;
color:#CC0000;
}

#content {
text-align:center;
background-image:url(http://www.kaesekessel.de/pic/hig.jpg);
padding:20px;
}
main {
display: block; /* <= IE 11 */
}

header#top {
margin-bottom:120px;
letter-spacing:3pt;
font-size:150%;
font-family:Times New Roman,serif;
font-weight:bold;
color:#663333;
}


#top a:link {
color:#CC0000;
}
#top a:visited {
color:#FF6600;
}
#top a:hover {
color:#CC0000;
}

h1 {
margin-bottom: 20px;
font-size:120%;
letter-spacing:2pt;
color:#663333;
}
.start h1 {
font-size:200%;
border-bottom:none;
}
h2 {
margin: 25px 0 10px;
font-size:90%;
letter-spacing:1.5pt;
color:#663333;
}
h3 {
font-size:90%;
font-weight:normal;
letter-spacing:1.5pt;
margin-top:0;
}
h2:first-child,
h3:first-child {
margin-top: 0;
}
p {
margin-bottom: 15px;
font-size:90%;
}
.posting .text {
margin-bottom: 15px;
font-size:90%;
}
.posting * .text {
font-size:100%;
}
ol {
margin-bottom: 15px;
padding-left: 20px;
}
ul {
margin-bottom: 15px;
text-indent:0;
list-style-type:none;
line-height:180%;
}
li {
font-size:90%;
margin-bottom:5px;
}
blockquote {
padding:20px;
border:dotted 1px #663333;
background:#EED5B7;
margin:0;
}
pre {
display:block;
padding:10px;
border:dashed 1px #663333;
background:#E2D9D9;
margin:3px 0;
overflow:auto;
}
strong {
color:#663333;
}
.submenu {
font-weight:bold;
color:#663333;
margin-bottom:20px;
}
.submenu a,
.submenu span {
display: inline-block;
white-space: nowrap;
}
div.submenu span,
div.submenu a {
margin: 1px;
padding: 8px 12px;
border: 1px solid #77c;
background-color: #f9ffff;
}
div.submenu span {
border-style: dashed;
background-color: transparent;
}
header.submenu a {
padding: 8px 4px;
border-left: 1px dotted #e6ecf3;
border-right: 1px dotted #e6ecf3;
}
.submenu a {
text-decoration: none;
color:#CC0000;
}
.submenu a:visited {
color:#FF6600;
}
.submenu a:hover {
color:#CC0000;
}
header.submenu a:hover {
background-color: #f9ffff;
border-color: #77c;
}
div.submenu a:hover,
div.submenu a:focus {
background-color: #dfe6e9;
}
.submenu a img {
vertical-align: middle;
}
header#top {
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #77c;
background-color: #e6ecf3;
font-size: 95%;
}


.box {
padding:20px;
border:solid 2px #FF9933;
background:#FFCC99;
margin-bottom:20px;
text-align:left;
}
.box > :last-child,
.box > :last-child > :last-child {
margin-bottom: 0;
}
.message {
padding:20px;
border:solid 2px #FF9933;
background:#FFCC99;
margin-bottom:20px;
text-align:center;
}
.message p {
margin-bottom: 0;
}
.profile {
width:440px;
margin:0 auto 20px;
}
.form, form div.box {
width:507px;
margin:0 auto 20px;
}
.posting > header {
font-weight:bold;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:solid 1px #663333;
color:#663333;
}
.posting > header h2,
.posting > header h3 {
overflow: auto;
margin: 0;
background-image:url(http://www.kaesekessel.de/pic/trenner/blu_2a.gif);
background-repeat:no-repeat;
background-position:center;
font-size: 90%;
letter-spacing: 0.05em;
}
.posting .number {
float: right;
margin-left: 8px;
}
.posting .number a:link {
color:#CC0000;
}
.posting .number a:visited {
color:#FF6600;
}
.posting .number a:hover {
color:#CC0000;
}
.posting > footer {
overflow: auto;
padding-top: 5px;
border-top: 1px solid #666;
}
.date {
font-weight:bold;
text-align:right;
font-size:80%;
color:#663333;
}
table {
margin-bottom: 20px;
width:100%;
border:solid 6px;
border-color:#FF9933;
border-style:double;
border-collapse: collapse;
text-align:left;
}
table td,th {
padding:10px;
font-size:90%;
border:solid 1px #663333;
background:#FFCC99;
}
caption {
padding:10px;
font-size:120%;
letter-spacing:1.5pt;
color:#663333;
font-weight:bold;
}
caption h2 {
margin: 0;
}
th {
color:#663333;
}
*.left {
text-align:left;
}
*.right {
text-align:right;
}
*.center {
text-align:center;
}
input, textarea {
border-style:solid;
border-width:2px 1px 1px 2px;
border-color:#663333;
padding:2px;
font-family:Verdana,sans-serif;
font-size:95%;
;
}
textarea {
width:500px;
}
input {
max-width:500px;
}
button {
margin-bottom: 5px;
padding: 5px 6px 5px 7px;
border: 1px solid #633;
border-radius: 5px;
background-color:#F4A460;
font-size: 100%;
letter-spacing: 1px;
color:#663333;
}
button.main-btn {
background-color: #b6ccd9;
}
button:hover {
background-color: #fff;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}

.signature {
border-top:dashed 1px #77c;
padding-top:10px;
}

input.radio {
border:none;
}
input.checkbox {
border:none;
}
button:hover {
background-image:url(http://www.kaesekessel.de/pic/hig.jpg);
cursor:pointer;
}
button:focus {
background-image:url(http://www.kaesekessel.de/pic/hig.jpg);
border-width:0 1px 1px;
}
input.readonly {
border-width:1px 0 0 1px;
background-image:url(http://www.kaesekessel.de/pic/hig.jpg);
}

#sidebar {
display: none;
}
#main-menu {
display: none;
}
#sidebar-mobile {
padding: 0 10px;
width: 100%;
height: 60px;
box-sizing: border-box;
text-align: center;
}
#sidebar-nav {
position: relative;
margin: 20px auto 0;
padding: 10px 10px 0;
width: 160px;
border: 1px solid #77c;
background-color: #f3f9fc;
font-weight: bold;
}
#main-menu-heading {
display: block;
font-size: 15px;
color: #55f;
}
#main-menu-heading:hover {
cursor: pointer;
}
#main-menu-heading span,
#main-menu-heading img {
line-height: 15px;
vertical-align: middle;
}
#sidebar-nav ul {
margin-bottom: 0;
text-align: left;
font-size: 95%;
color: #555;
}
#sidebar-nav li {
margin-bottom: 0;
font-size: 100%;
}
#sidebar-nav > ul > li {
margin-bottom: 8px;
}
#sidebar-nav li img {
display: block;
}
#sidebar-nav li a,
#sidebar-nav li span {
display: block;
padding: 10px 0;
width: 158px;
border: 1px solid #77c;
background-color: #f9ffff;
background:#E2D9D9;
text-align: center;
}
#sidebar-nav li span {
background-color: #dfe6e9;
}
#sidebar-nav a {
text-decoration: none;
color: #44f;
}
#sidebar-nav li li:not(:last-child) > a,
#sidebar-nav li li:not(:last-child) > span {
border-bottom: none;
}
#sidebar-nav a:visited {
color: #55a;
}
#sidebar-nav a:hover,
#sidebar-nav a:focus {
background-color: #dfe6e9;
}
#sidebar-nav .logo img {
display: none;
}
#sidebar-nav .logo img + span {
border: none;
display: block;
}

#main-footer {
text-align:center;
margin:20px 0 0;
font-size:90%;
}
#main-footer li {
display: inline-block;
margin: 0 10px 10px;
white-space: nowrap;
}

.col-forum {
width:18%;
}
.col-user {
width:18%;
}
.col-number {
width:7%;
text-align:center;
}
.col-date {
width:17%;
text-align:right;
}
.col-status {
width:18%;
text-align:center;
}


div.sitemap ul {
margin:0;
padding:0;
text-indent:0;
list-style-type:none;
line-height:200%;
font-weight:bold;
color:#663333;
}
div.sitemap li ul li {
display:inline;
padding-right:15px;
font-weight:normal;
}

div.box img.smilie {
border:none;
width:17px;
height:17px;
}

img.counter {
position:absolute;
bottom:62px;
float:left;
border:2px ridge;
border-color:#E8E8E8 #CFCFCF #CFCFCF #E8E8E8;
vertical-align:middle;
left:14px;
}

.profile {
margin:0 auto 20px;
width:507px;
}
.profile img {
float:right;
max-width:120px;
max-height:120px;
}
.profile h3 {
clear:both;
margin-top:30px;
}

.infobox {
max-height:100px;
overflow:auto;
padding:10px;
border:1px solid #77c;
background-color:#fff;
font-size:85%;
}

.submit-group {
overflow: auto;
margin-top:10px;
width:100%;
font-size:90%;
}
.submit {
float:right;
margin-left:10px;
}
.submit p {
margin-top:0;
}


.profile h2 {
margin-top:0;
}

.plus {
text-align:right;
}

/* RESPONSIVE */

@media (min-width: 767px) {
#oben {
position:absolute;
width:100%;
top:0px;
right:0;
left:0;
height:36px;
background-image:url(http://www.kaesekessel.de/pic/start/o.jpg);
}
img.lio {
width:169px;
height:36px;
position:absolute;
float:left;
left:0;
top:0;
}
img.reo {
width:31px;
height:36px;
position:absolute;
float:right;
right:0;
top:0;
}
body>img.reo {
position:fixed;
}

#links {
position:absolute;
height:2000px;
top:36px;
left:0;
width:169px;
background-image:url(http://www.kaesekessel.de/pic/start/li.jpg);
background-repeat:repeat-y;
background-position:left;
}
img.leiste1 {
position:relative;
margin-top:50px;
left:0;
float:left;
border:0;
}
img.leiste {
position:relative;
margin-top:22px;
left:0;
float:left;
border:0;
}
#rechts {
position:absolute;
height:2000px;
top:36px;
right:0;
width:31px;
background-image:url(http://www.kaesekessel.de/pic/start/re.jpg);
background-repeat:repeat-y;
background-position:right;
}
#unten {
position:absolute;
visibility:hidden;
width:100%;
bottom:0px;
right:0px;
height:24px;
background-image:url(http://www.kaesekessel.de/pic/start/u.jpg);
}
img.liu {
width:169px;
height:24px;
position:absolute;
float:left;
left:0;
bottom:0;
}
img.reu {
width:31px;
height:24px;
position:absolute;
float:right;
right:0;
bottom:0;
}
body>div#links {
position:fixed;
height:100%;
}
body>div#oben {
position:fixed;
}
body>div#oben img {
position:static;
}
body>div#rechts {
position:fixed;
height:100%;
}
body>div#unten {
position:fixed;
visibility:visible;
}

#textkk {
padding-left:180px;
margin-top:55px;
margin-right:36px;
margin-bottom:30px;
}
} /* min-width: 767px */

@media (max-width: 767px) {
#main {
float: none;
width: 100%;
}
div#links,
div#rechts,
div#oben,
div#unten {
display: none;
}
} /* max-width: 767px */

@media (max-width: 599px) {
#wrapper {
padding: 5px;
}
#content {
padding: 10px;
}

h1 {
font-size: 100%;
letter-spacing: 0.15em;
}
.start h1 {
font-size: 125%;
}

/* forms  */

.form,
form .box, 
.submit-group,
#bbcode-buttons {
width: auto;
}
#bbcode-buttons {
clear: right;
}
textarea {
width: 100%;
}
input {
max-width: 100%;
}

.video {
max-width: 100%;
}
.profile {
width: auto;
}
.profile img {
float: none;
}

/* tables */

table {
border-width: 0 0 1px;
}
th {
display: none;
}
caption {
background-color: #d9dfe6;
border-bottom: none;
}
td {
display: block;
border-bottom: none;
}
td br {
display: none;
}
td:first-child {
background-color: #e9eff6;
}
td:first-child a {
text-decoration: none;
font-weight: bold;
color: #55f;
}
td:first-child a:visited {
color: #66b;
}
td:first-child a:hover,
td:first-child a:focus {
text-decoration: underline;
}
td.col-date,
td.col-user, 
td.col-forum {
width: auto;
text-align: left;
}
td.col-date:before, 
td.col-user:before, 
td.col-forum:before {
font-size: 90%;
color: #333;
}
td.col-date:before {
content: 'Letzter Beitrag: '
}
td.col-user:before {
content: 'Autor: '
}
td.col-forum:before {
content: 'Forum: '
}
td.col-number,
td.col-status {
display: none;
}
} /* max-width: 599px */