@media(max-width:767px){
  #wrapper {
	margin:auto;
	width:100% !important;
	box-sizing: border-box;
    padding: 0px 4px 0px 4px !important;
  }
}

@media(max-width:767px) {
  #sidebar { display: none; }
  #sidebar-mobile { display: block !important; }
}

#sidebar-mobile { display: none; }

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #FFFFFFFF; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 0px; /* Place content 0px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 36px;
    margin-left: 50px;
}

#wrapper {
	margin:auto;
	width:960px;
}

#main {
	float:left;
	width:640px;
	margin-right:20px;
}

#sidebar {
	float:right;
	width:270px;
}

#login {
	border: 1px solid #AEAEAE;
	margin: 100px auto 0;
	padding: 0;
	width: 300px;
}

#adminmenu {
	padding-left: 0;
}

#adminmenu li {
	float: left;
	list-style: none;
	margin-right: 20px;
}

html {
    position: relative;
    min-height: 100%;
}

.pagination {
    flex-wrap: wrap;
}

.navbar ul {
    margin:  0;
    padding: 0;
}
.navbar li a {
}

.navbar-nav .dropdown-menu {
    background-color:#323b43;
}

.navbar-nav .dropdown-menu a {
    color: rgba(255,255,255,.5);
}

.navbar li a:hover {
    background-color: #111;
}

.navbar .dropdown-item li a:hover {
    background-color: #111;
}

.col .suggestion {
    margin: 6px;
}

.size {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.caption {
    font-size: 20px;
    color: white;
    text-align: center;
}

.header {
    margin-bottom: 0.4em;
}

.footer {
    width: 100%;
    height: 40px; /* Set the fixed height of the footer here */
    line-height: 40px; /* Vertically center the text there */
    background-color: #f5f5f5;
}

.no-pad {
    padding-left: 0;
    padding-right: 0;
}

.disclaimer {
    font-size: 13px;
}

.error {
	padding: 0.75em;
	margin: 0.75em;
	border: 1px solid #990000;
	max-width: 400px;
	color: #990000;
	background-color: #FDF0EB;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
}

/* The section that styles the actual post
 */
code.block {
    display:block;
    white-space:pre-wrap
}

figure.image {
    display: inline-block;
    border: 1px solid gray;
    margin: 0 2px 0 1px;
    padding: 0.2em;
    max-width: 100%;
    background: #f5f2f0;
}

figure.align-left {
    float: left;
}

figure.align-right {
    float: right;
}

figure.image img {
    max-width: 100%;
    height: auto;
}

figure.image figcaption {
    margin: 6px 8px 6px 8px;
    text-align: center;
}

code.shell {
    background-color: black;
    color: white;
    font-size: medium ;
    font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
    width: 100%;
    display: inline-block;
}

/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
    border: 1px solid gray;
}

.mce-toc h2 {
    margin: 4px;
}

.mce-toc li {
    list-style-type: none;
}

/* making the TOC work with our header bar */
h2::before {
    display: block;
    content: " ";
    margin-top: -58px;
    height: 58px;
    visibility: hidden;
    pointer-events: none;
}

h3::before {
    display: block;
    content: " ";
    margin-top: -58px;
    height: 58px;
    visibility: hidden;
    pointer-events: none;
}

.mce-toc ul {
    margin-top: 0.2em;
}

.cc-window {
    /* Ensure the cookieconsent is always ontop of everything */
    z-index: 1500000;
}

p,li {
	color: #555555;
	font-size: 16px;
	line-height: 1.5em;
    word-break: break-word;
}

a {
	color: #EF1F2F;
	text-decoration: none;
}
/* Prevent images from overflowing the main container */
img {
    max-width: 100%;
}

/* Automatically adjust the height of images in blog posts when the width is messed with */
.post img {
    height: auto;
}

pre.box {
    max-height: 50vh;
    overflow-y: auto;
}

form input {
	border: 1px solid #999999;
	border-bottom-color: #cccccc;
	border-right-color: #cccccc;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	margin: 2px;
}

table {width:98%; text-align:left; border:1px solid #DDDDDD; font-size:12px; color:#000;background:#fff; margin-bottom:10px;}
table th {background-color:#E5E5E5; border:1px solid #BBBBBB; padding:3px 6px; font-weight:normal; color:#000;}
table tr td {border:1px solid #DDDDDD; padding:5px 6px;}
table tr.alt td {background-color:#E2E2E2;}
table tr:hover {background-color:#F0F0F0; color:#000;}