html {
  font-family: "Adobe Caslon Pro", "Palatino Linotype", "Palatino", serif;
  font-size: 12pt;
}
pre.jda-selected {
  border: 2px solid red;
}
pre.jda-copied {
  border: 2px solid #7F7;
}
h1 span.subdir {
  font-size: 70%;
}
h1 span.subdir a {
  text-decoration: none;
  color: #007;
}
h1 span.subdir a:visited {
  color: #007;
}
pre {
  font-family: monospace;
  padding: 1em;
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  background: #2b2b2b;
  color: #f8f8f2;
}
pre > code.language-prose {
  font-family: serif;
}
pre > code {
  padding: 0px;
  white-space: pre-wrap;
  background-color: transparent;
}
code {
  padding: 0.1em;
  background-color: hsla(0,0%,90%,50%);
}
div.maincontent {
  color: black;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  padding-right: 200px;
  width: 70%;
  min-width: 480px;
  border: 1px solid black;
  box-shadow: 5px 5px 5px;
  background-color: white;
}
section {
  font-size: 13pt;
}
div.maincontent img {
  max-width: 512px;
  width: 80%;
  max-height: 512px;
}
body {
  background-color: hsl(240,70%,30%); 
}
footer {
  margin-top: 2em;
  color: hsl(0,0%,80%);
  text-align: center;
}
footer a, footer a:visited {
  color: hsl(0,0%,90%);
  font-style: italic;
  text-decoration: none;
}


/* dialog */
div.popup {
  position: fixed;
  width: 60vw;
  left: 20vw;
  top: 25vh;
}
div.goto-dialog {
  border: 2px solid black;
  background-color: #fea;
  padding: 2em;
  box-shadow: 1em 1em 1em black;
}
div.goto-dialog input {
  font-size: 2em;
  width: 100%;
}

/* utility */
.centre {
  text-align: center;
}

/* 1.1 numbering */
ol { counter-reset: item }
ol ol > li{ display: block }
ol ol > li:before { content: counters(item, ".") ". "; }
ol > li { counter-increment: item; }
ol ol, ol ul, ul ol, ul ul { padding-left: 1em; }

img.bug {
  position: absolute; 
  z-index: 1; 
  right: 3em; 
  top: 1em;
}

header {
  font-family: sans-serif;
  margin: 0.1em;
  background-color: #ffc;
  border: 1px solid black;
  padding: 0.1em;
  padding-left: 1em;
  box-shadow: .5em .5em .5em black;
  position: relative;
  margin-left: 1em;
  margin-right: 1em;
  border-radius: 0.5em;
  margin-bottom: 2em;
}
header h1 {
  text-align: center;
}
ul.navbar {
  padding-left: 0;
  padding-right: 300px;
  list-style-type: none;
}
header ul.navbar li {
  display: inline-block; margin-right: 1em;
}
header a {
  text-decoration: none;
}
header ul.navbar li {
  background-color: #007;
  color: #ddd;
  border: 1px solid black;
  box-shadow: 5px 5px 5px black;
  font-size: 1.1em;
  padding: 0.4em;
}
header ul.navbar li a, header ul.navbar li a:visited {
  color: #eee;
  
}
header ul.navbar li a:hover {
  color: #aaf;
}
header hr {
  display: none;
}
section h1, section h2, section h3, section h4 {
  font-family: sans-serif;
}
img.bug {
  left: auto;
  right: 0px;
}
#content {
  border-radius: 0.5em;
}

/*
Draws too much attention from the content.
*/
/*
section h1, section h2, section h3, section h4 {
  margin: 0.1em;
  background-color: #ffc;
  border: 1px solid black;
  padding: 0.1em;
  padding-left: 1em;
  box-shadow: .1em .1em .1em black;
  position: relative;
  left: -10%;
  border-radius: 0.1em;
  width: 110%;
}
*/

/* CUSTOM ELEMENTS */
div.quotes {
  position: relative;
  text-align:center;
  white-space:pre-wrap;
  line-height:1.5em;
  padding-left: 10%;
  padding-right: 10%;
}

ul.hashtags {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.hashtags li {
  display: inline-block;
  border: 1px solid black;
  box-shadow: 0.3em 0.3em 0.3em black;
  margin: 0.3em;
  padding: 0.3em;
}
ul.hashtags li.other {
  background: white;
  color: black;
}
ul.hashtags li.hashtag {
  background: #ff7;
  color: black;
}
ul.hashtags li.category {
  background: #7f7;
  color: black;
}
ul.hashtags li.user {
  background: #77f;
  color: black;
}
ul.hashtags li:hover {
  box-shadow: 0.4em 0.4em 0.4em black;
  background: #fa0;
}
ul.hashtags li a {
  color: #007;
  text-decoration: none;
}
ul.hashtags li a:hover {
  text-decoration: underline;
}
div.maincontent img {
  max-width: 100%;
}
div.maincontent img.img-asis {
  width: auto;
  height: auto;
  max-width: 100%;
}