body, #container {background-color: black;color: white;}
#container {min-height: calc(100vh - 110px);}
#container .top {background-color: black; height: 100px; color: white}
#container .top h1,#container .top h2 {font-size: 1.5rem; padding: 10px;}
#container .top p {font-size: 0.85rem; padding: 0px 10px 10px 10px;}
#container .middle {background-color: #1a1a1a; min-height: 400px;}
#container .middle .sidebar {display: inline-block;vertical-align: top; width: 200px; background-color: #333333; padding: 10px 0px;}
#container .middle .sidebar ul {padding: 0px;}
#container .middle .sidebar ul.children {padding-left: 10px;}
#container .middle .sidebar ul li {list-style-type: none; padding: 2px 0px; margin: 2px 10px}
#container .middle .sidebar ul li a {padding: 2px 5px;}
#container .middle .sidebar ul li a.active {background-color: white; color: black;}
#container .middle .article {display: inline-block;vertical-align: top; width: calc(100% - 250px);margin-left: 15px;}
#container .middle .article.sidebarHidden {width: calc(100% - 20px);}
#container .middle .article .header {padding: 10px;word-wrap:break-word;}
#container .middle .article .posts {text-align: center;}
#container .middle .article .posts .post {background-color: #26292d; color: white; margin-bottom: 40px; text-align: center; padding: 15px 0px;}
#container .middle .article .posts .post .title {padding: 10px;word-wrap:break-word; font-size: 0.75rem;}
#container .middle .article .posts .post .image {padding: 10px;}
#container .middle .article .posts .post .image img {max-width: 100%;}

#container .middle .article .post-single {text-align: center; background-color: #26292d;}
#container .middle .article .post-single img {max-width: 100%;}
#container .middle .article .post-single .description {margin: 10px 0px; padding: 10px;text-align: left; border: 5px solid #26292d; border-top: 0px; background-color: #1a1a1a; color: #aaaaaa; }
#container .middle .article .comments {background-color: #26292d; padding: 10px;}
#container .middle .article .comments form {background-color: #4a4a4a; padding: 10px; border: 1px solid #aaaaaa}
#container .middle .article .comments h3 {margin: 20px 0px;}
#container .middle .article .comments .list {margin-top: 10px;}
#container .middle .article .comments .list .item {border-top: 1px dotted #aaaaaa; margin-top: 10px; margin-bottom: 5px;}
#container .middle .article .comments .list .item header {padding: 10px 0px}
#container .middle .article .comments .list .item header .date {float: right;}
#container .middle .article .comments .list .item header .nickname {}
#container .middle .article .comments .list .item article {font-style: italic;}
#container .middle .article .page {padding: 10px 10px 20px 10px;}
#container .middle .article .page p {padding: 5px 0px; font-size: 0.9rem; line-height: 20px}
#container .middle .article .page h3 {padding: 10px 0px;}
#container .middle .article .paginator {text-align: center; margin: 20px 0px;}
#container .middle .article .paginator .nav, #container .middle .article .paginator .step {margin: 0px 10px 10px 0px;border: 1px solid #888888; background-color: black; padding: 2px 4px; min-width: 20px; height: 20px; display: inline-block; vertical-align: top; color: white;}
#container .middle .article .paginator a {color: #aaaaaa;}
#container .middle .article .paginator .active {background-color: grey; color: white;}
footer {height: 100px;background-color: black;text-align: center; }
footer .box {width: 300px; padding: 10px 5px;display: inline-block;vertical-align: top; margin-top: 20px;}
@media all and (max-width: 639px) {
    #container .middle .sidebar {display: block; width: 100%; }
    #container .middle .article {width: 100%; display: block; margin-left: 0px;}
    .hamburger {border: 1px solid #e0e0e0; background-color: #404040; margin: 10px 10px -10px 10px; }
    .hamburger:after {content: '='; font-size: 3rem; cursor: pointer; padding: 0px 15px;}
    .hamburger.open {background-color: #808080; color: white;}
    .mobilator {z-index: 1000; width: calc(100% - 30px);margin: 20px 4px 10px 4px !important; padding: 20px 10px 20px 10px !important;position: absolute; display: block; border: 1px solid #a0a0a0; background-color: #203040;float: inherit;text-align: inherit;}
    footer {height: auto;}
}

.padding-10 {padding: 10px;}
.errors {border: 1px solid red; background-color: pink; padding: 2px 10px; line-height: 20px;color: black;}
.success {border: 1px solid green; background-color: yellowgreen; padding: 2px 10px; line-height: 20px;color: black;}
.button-default {border: 1px solid #dddddd; display: inline-block;vertical-align: top; padding: 5px 10px; background-color: #aaffaa; color: black}
.abuse {position: absolute; color: red; margin: -30px 0px 0px -20px}
.abuse:after {content: '!';border: 2px solid red; border-radius: 20px; width: 20px; display: inline-block;text-align: center;cursor: pointer; font-weight: bold;}
.verify #code, .verify input { display: inline-block; min-width: 20px; max-width: 100px; padding: 2px 2px; margin: 2px 2px;}
.verify .space {color: #4a4a4a;}
.verify .font {display: inline-block;vertical-align: top;}
.verify .font-0 {padding-top: 4px;}
.verify .font-1 {padding-bottom: 2px; color: pink;}
.verify .font-2 {color: yellowgreen;}
.verify .font-3 {padding-top: 4px;color: orchid;}
.verify .font-4 {color: lightblue;}