.unknown-tag {
  color: #FFDD00;
  font-size: 130%;
}

.blog h2 {
  font-size: 100%;
  color: purple;
  margin-top: 30px;
}

.blog h3 {
  font-size: 120%;
}

.blog h3 a {
  color: black;
  text-decoration: none;
}

.blog h3 a:hover {
  text-decoration: underline;
}

.blog h3 a {
  color: black;
}

.blog blockquote h1 {
  font-size: 150%;
  color: black;
}

.blog blockquote h2 {
  font-size: 120%;
  color: black;
}

.blog img {
  max-width: 100%;
}


.literal {
  font-family: monospace;
  color: #006600;
}

code.tag.element::before {
  content: "<"
}

code.tag.element::after {
  content: "/>"
}

.subtitle {
  font-style: italic;
  font-size: smaller;
}

.keywords {
  font-size: small;
}

nav {
  border-left: 1px solid #ffeebb;
  padding-bottom: 1em;
}

@media (max-width: 700px) {
  nav {
    border-left: none;
  }
}

nav h2 {
  padding: 3px 0px 3px 0px;
  margin: 0px;
  background-color: #ffeebb;
  text-align: center;
  font-size: 100%;
  font-weight: normal;
}

nav p {
  margin-left: 10px;
  margin-right: 10px;
}

nav ul {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0px 0px 15px 0px;
  list-style-type: none;
}

nav ul:last-child {
  margin-bottom: 0px;
}

nav hr {
  border: 0px;
  border-top: 1px #ffeebb solid;
}

.example, .blockquote, .message {
  margin: 20px 40px 20px 40px;
}

.example .body {
  overflow: auto;
  margin: 0px;
  padding: 10px;
  border: 1px #eee5d0 solid;
  background-color: #FFF5E0;
}

.example .body pre {
  padding: 0px;
  margin: 0px;
}


.example .title {
  text-align: center;
  font-weight: bolder;
}

q {
  quotes: '\201C' '\201D' '\2018' '\2019';
  font-style: italic;
}

/* Mozilla knows this, IE doesn't */
p>q, li>q {
  font-style: normal;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

blockquote {
	font-style: italic;
  padding: 10px;
  border: 1px #F0E0D0 dashed;
  background-color: #FFFFE0;
}

.admon {
  padding: 0px 8px 0px 45px;
}

h5.admon {
  display: none;
}

.note {
  background: url(/images/blog/note.png) no-repeat;
  background-position: +10px +.2em;
}

hr.admon {
  border: 0px;
  border-top: 1px #888888 dashed; 
  height: 1px;
}

.variablelist {
  margin-left: 2ex;
}

.person {
  white-space: nowrap;
}

.message {
  padding: 5px;
  background-color: #FFFFE0;
}

.message:hover {
  background-color: #EEEED0;
}
.message .meta {
  margin-top: 0px;
  margin-bottom: 0px;
}

.message .meta time {
  font-size: 70%;
}

.message .meta .person {
  font-weight: bolder;
}

.message .body .person {
  background-color: #ffeebb;
}

.message .body .person:hover {
  background-color: #eeddaa;
}

.message .body .person a {
  text-decoration: none;
  color: #998833;
}

.message .body .person a:hover {
  color: #665522;
}

.message .body a {
  color: blue;
  text-decoration: none;
}

.message .body a:hover {
  color: blue;
  text-decoration: underline;
}

.message .body p:last-child {
  margin-bottom: 5px;
}

.message .body p+p {
  margin-top: 10px;
  margin-bottom: 0px;
}

.message .meta+.body p {
  margin-top: 0px;
}

.message .body span.edited::after {
  content: " (edited)";
  color: #aaaaaa;
  font-size: 70%;
}

.message .reactions .reaction {
  padding: 0px 5px;
  margin: 5px 5px;
  white-space: nowrap;
}

.message .reactions .reaction img {
  height: 1em;
}

.message .reactions .reaction.self {
  border: 1px solid blue;
  border-radius: 8px;
}


mark {
  background-color: yellow;
}

figure {
  margin-left: 0px;
  margin-right: 0px;
  border-left: 3px solid gray;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
}

figcaption {
  font-weight: bold;
}

figure img {
  max-height: 250px;
}

.message figure:last-child {
  margin-bottom: 0px;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: inherit;
}

@media (max-width: 700px) {
  .example, .blockquote, .message {
    margin: 20px 0px 20px 0px;
  }

  .example {
    font-size: 70%;
  }
}