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

#logo:hover { filter: invert(1); }

/* CONTENT */
.htmlmain { font-family: 'Open Sans', sans-serif; position: relative; min-height: 100%; }
.articletitle a, #left h1 a { color: #222; }
.md p { margin-bottom: 0.65em; }
.md code { background-color: #f5f5f5; white-space: pre-wrap; font-size: 0.8em; padding: 0.16em 0.5em 0.16em 0.5em; font-family: Consolas,Courier New,monospace; word-wrap: break-word; }
.md pre { background-color: #f5f5f5; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; padding: 0.7em; }
.md pre code { padding: 0; }
.md blockquote { background-color: #fff8dc; padding: 0.75em; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; border-left: 0.1em solid #ffeb8e; }
.md blockquote p { margin-bottom: 0; }
.md ul, .md ol { margin-bottom: 1.5em; padding-left: 2em; }
.md hr { background-color: #ddd; color: #ddd; height: 0.1em; margin-bottom: 1em; margin-top: 1em; border: 0; }
.md h1, .md h2, .md h3 { margin-bottom: 0.5em; }
.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: 0.4em 0.8em; border: 0.1em solid #ddd; }
.md table tr { background-color: #fff; border-top: 0.1em solid #ccc; }
.md table tr:nth-child(2n) { background-color: #f8f8f8; }

.article { margin-bottom: 14em; }
.articletitle a { font-weight: bold; }
h2.articletitle { margin-bottom: 0 !important; }
.article > .articletitle { border-top: 0.2em solid black; }  /* :nth-child(n+3) */
.small { display: inline-block; color: #9EABB3; font-size: 0.9em; padding-bottom: 1em; }
.small a { text-decoration: none; color: #9EABB3; font-size: 0.9em; }
.tag { padding: 0.1em 0.4em 0.2em 0.5em; background-color: rgba(0,0,0,.05); margin-right: 0.5em; color: black; line-height: 2em; }
.tag:hover { background-color: rgba(0,0,0,.12); }
.date { margin-right: 2em; }


/* NAVIGATION */
#left { width: 200px; position: fixed; left: 0; top: 0; height: 100%; overflow: auto; padding: 1.25em; }
#left h1 { margin-bottom: 0.72em; }
#content { margin-left: 250px; top: 0; padding: 0.85em 2em 2em 0.9em; color: #3A4145; }
#footer { position: absolute; bottom: 0; overflow: hidden; display: block !important; padding-bottom: 0.8em !important; }
#nav { display: none; }
#logout { position: fixed; right: 3px; top: 0; color: #9EABB3; }
#booktitle { display: none; }
.hidden { display: none; }
.opened { display: block !important; z-index: 2; }
.otherarticles { background-color: #57A3E8; color: white; padding: 0 1.2em 0 1.2em; line-height: 2.5em; margin-top: 3.5em; display: inline-block; }
.navigation { background-color: #57A3E8; color: white; padding: 0 1.2em 0 1.2em; line-height: 2.5em; margin-bottom: 3.5em; display: inline-block; }

/* MOBILE */
@media (max-width: 800px) {
    #content { margin-left: 230px; }
}

@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; }

/* PRINT */
@media print {
  html { font-size: 0.8em; }
  img { max-height: 75%; max-width: 75%; }
  .article, #booktitle { page-break-after: always; }
  #left, #footer, .twitter-share-button, .navigation, #nav { display: none !important; }
  #content { margin: 0; padding: 0; text-align: justify; }
  pre, h2 { text-align: left !important; }
  #booktitle { display: block; }
  .embed { display: none !important; }
  .embed-thumbnail { display: block !important; margin-top: 2em; margin-bottom: 2em; }
}
.embed-thumbnail { display: none; }

.mysubscribe input[type="email"] { padding: 2px; height: 17px; margin-bottom: 0.5em; }
.mysubscribe input[type="submit"] { height: 25px; background-color: #57A3E8; color: white; vertical-align: middle; border: 0; padding: 0 20px; }