* { border: 0; outline: 0; padding: 0; margin: 0; }
a { text-decoration: none; color: #57A3E8; }
img, video { max-width: 100%;  }
h1 { line-height: 1em; }
h2 { font-size: 32px; letter-spacing: -1px; font-weight: bold; }

/* INDEX */
.htmlmain { font-family: 'Open Sans', sans-serif; position: relative; min-height: 100%; }
.articletitle a, #left h1 a { color: #222; }
.md li { margin-left: 20px; }
.md code { font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif; word-wrap: break-word; }
.md p code { background-color: #f5f5f5; white-space: pre-wrap; padding: 3px 5px; font-size: 13px; }
.md pre { background-color: #f5f5f5; padding: 5px; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; font-size: 13px; }
.md blockquote { background-color: #fff8dc; padding: 10px; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; border-left: 2px solid #ffeb8e; }
.md blockquote p { margin-bottom: 0; }
.md hr { background-color: #ddd; color: #ddd; height: 1px; margin-bottom: 15px; margin-top: 15px; }
.md h1, .md h2, .md h3 { margin-bottom: 0.5em; }
.md p, .md ol { margin-bottom: 1em; }
.md ul { margin-bottom: 1.5em; line-height: 1.25; }
.md img { max-width: 100%; max-height: 100%; }
.md table { display: block; width: 100%; overflow: auto; border-collapse: collapse; margin-bottom: 0.5em; }
.md table th { font-weight: bold; }
.md table th, .md table td { padding: 6px 13px; border: 1px solid #ddd; }
.md table tr { background-color: #fff; border-top: 1px solid #ccc; }
.md table tr:nth-child(2n) { background-color: #f8f8f8; }
.article { margin-bottom: 6em; }
.articletitle a { font-weight: bold; }
h2.articletitle { margin-bottom: 0 !important; }
.small { display: inline-block; color: #9EABB3; font-size: 0.9em; padding-bottom: 1em; }
.small a { text-decoration: none; color: #9EABB3; font-size: 0.9em; }
.hidden { display: none; }
.opened { display: block !important; z-index: 2; }
.navigation { background-color: #57A3E8; color: white; padding: 0 1.2em 0 1.2em; line-height: 2.5em; margin-bottom: 3.5em; display: inline-block; }
.tag { padding: 1px 6px 3px 7px; background-color: rgba(0,0,0,.05); margin-right: 6px; color: black; line-height: 2em; }
.tag:hover { background-color: rgba(0,0,0,.12); }
.date { margin-right: 25px; }
.otherarticles { background-color: #57A3E8; color: white; padding: 0 1.2em 0 1.2em; line-height: 2.5em; margin-top: 3.5em; display: inline-block; }

#left { width: 230px; position: fixed; left: 0; top: 0; height: 100%; overflow: auto; padding: 20px; }
#left h1 { margin-bottom: 0.72em; }
#content { margin-left: 250px; top: 0; padding: 20px 40px 0px 20px; font-size: 1.05em; color: #3A4145; padding-bottom: 2em; }
#footer { position: absolute; bottom: 0; overflow: hidden; display: block !important; padding-bottom: 0.8em !important; }
#nav { display: none; }
#logout { position: fixed; right: 3px; top: 0px; color: #9EABB3; }

@media (max-width: 600px) {
    #left { display: none; background-color: white; width: 170px; border-right: 1px solid #f5f5f5; }
    #content { margin-left: 0; padding-left: 40px; padding-top: 70px; }
    #nav { display: block; position: fixed; top: 0; left: 0; width: 35px; height: 35px; background-color: black; cursor: pointer; }
    .hamburger-body { height: 3px; margin: 16px 6px; background: white; position: relative; }
    .hamburger-body:before, .hamburger-body:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: white; }
    .hamburger-body:before { transform: translateY(-8px); }
    .hamburger-body:after { transform: translateY(8px); }
}

/* EDITOR */
.htmleditor { overflow: hidden; height: 100%; }
.fullheight { height: 100%; }
.editor { background-color: #333; color: white; font-family: monospace; padding-left: 10px; box-sizing: border-box; vertical-align: top; /* or display: block; */ } 
#main { width: 100%; height: calc(100% - 6em); resize: none; padding: 10px; }
#date { width: calc(100% - 10em); height: 2em; }
#tags { width: calc(100% - 10em); height: 1.8em;  }
#url { width: calc(100% - 10em); height: 2.2em; }
#submitbtn { padding: 5px 10px; position: fixed; bottom: 0; right: 0; height: 6em; cursor: pointer; width: 12em; }
#smallcommands { position: fixed; bottom: 5.3em; right: 0.5em; }
#smallcommands a { font-family: sans-serif; font-size: 0.6em; color: #aaa; margin-left: 2em; }