general settings for the whole page */
body,
footer,
header {
  display: block;
  background-color: white;
  color: black;
}
body {
  font-family: Helvetica, Arial, sans-serif;
  /*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
  font-size: 18px;
  line-height: 1.5em;
  text-align: justify;
  margin-left: 320px;
  margin-right: auto;
  padding-right: 60px;
  padding-left: 60px;
  max-width: 800px;
  min-width: 300px;
  word-wrap: break-word;
}

/* section headings */
h1, h2, h3, h4, h5 {
  font-family: "American Typewriter", sans-serif;
  font-weight: lighter;
  padding-top: 1em;
  padding-bottom: 0.6em;
  margin-top: 1em;
  line-height: 1.2em;
  text-align: center;
}
/* sizes of headings */

h1 {
  font-size: 2.6em;
}
h1 {
  font-size: 2.3em;
}
h3 {
  font-size: 2em;
}

/* spacing / padding between paragraphs */
p, ol, ul, li {
  /*margin-left: 1em;*/
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  line-height: 1.5em;
}
div.footnotes p {
  padding-bottom: 0;
  padding-top: 0;
}
/* code */
code {
  font-size: 14px;
  line-height: 1;
  padding-bottom: 0;
  padding-top: 0;
}

/* images */

img,
figure, 
div.figure {
  width: 90%;
  display: block;
  clear:both;
  margin-left: 5%;
  margin-top: 1em;
}
img {
  background-color: rgba(0,0,0,0.04);
  border-radius: 5px;
  box-shadow: 2px 2px 5px #000;
  border:gray solid 1px;
}

/* what about captions? */
/* they are provided in @alt (inline images) and <figcaption/> (images separated by empty lines) */
/* if I render HMTL with Pandoc and Marked, images are rendered as <div class="figure">
<img src="img0030.jpg" alt="Fig. 1, Construction works at the new municipality." /><p class="caption">Fig. 1, Construction works at the new municipality.<a href="#fn3" class="footnoteRef" id="fnref3"><sup>3</sup></a></p>
</div>
*/
figure > img, 
div.figure img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  /*background-color: rgba(0,0,0,0.04);
  border-radius: 15px;
  box-shadow: 2px 2px 5px #000;
  border:gray solid 1px;*/
}
figcaption,
p.caption {
  width:100%;
  position:relative;
  display: block;
  margin-top: 1em;
  font-size:0.8em;
  text-align: right;
  font-weight:lighter;
}   

/* tables */
table {
  display: block;
  width:inherit;
  margin-left: auto;
  margin-right: auto;
  padding-top: inherit;
  padding-bottom: inherit;
  border-collapse: collapse;
  /* use smaller font-size than the surrounding text*/
  font-size: 0.7em;
}

tr.header {
  border-bottom: double black;
}
tr {
  border-bottom: 1px solid black;
}
th,
td {
  text-align: left;
  padding-bottom: 0.1em;
  padding-top: 0.1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* links */
a {
  color: orange;
  text-decoration: none;
}

a:visited {
  color: #AB1733;
  text-decoration: none;
}

a:hover, a:active {
  color: #E62347;
  text-decoration: underline;
}
/* footnotes */
a.footnote {
  font-size: 0.7em;
  vertical-align: super;
  display: inline-block;
  padding-left: 0.3em;
}

/* navigation */
nav {
  display: block;
  position: fixed;
  left: -20px;
  /* vertical scrolling */
  overflow-y: auto;
  top: 0px;
  width: 240px;
  height: 100%;
  transition: 0.5s;
  /*background-color: #E3DFE0;*/
  z-index: 100;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.8em;
  text-align: left;
}

/*nav {
left: -320px;
}*/
nav {
  /*background-color: #F0ECEC;*/
  background-color:#AB1733; 
}
nav *{
  color:white;
}
nav a:visited,
nav a:hover,
nav a:active {
  color:white;
  text-decoration: none;
}
/* add button */

nav ul,
nav li {
  list-style: none;
  padding-top: 0.5em;
  padding-bottom: 0;
  /*margin-top: 10px;*/
  line-height: 1.5em;
  /*margin-block-start:0;*/
}
nav ol,
nav ul {
  margin-block-start:0;
  margin-block-end:0;
  /* add indention of nested lists */
  padding-inline-start:20px;
}
/* footer and header */
footer {
  border-top: 1px solid black;
  padding-top: 5px;
  /*fixed display at the bottom of the page */
  display: block;
  position: fixed;
  bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  font-family: "Source Sans Pro",sans-serif;
  font-size: 16px;
}
footer * {
  background-color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin-top:0px;
  margin-bottom: 0px;
}
span.c_info {
  display: block;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: auto;
  margin-right: auto;
}
footer img {
  display: inline;
  background-color: inherit;
  border-radius: 0px;
  box-shadow: none;
  border:none;
  margin-left: 5px;
  margin-right: 5px;
}
span.c_license img {
  width: 60px;
}
/* badges and shields */
#sec-badges {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#sec-badges a,
#sec-badges img {
  display: inline-block;
  /*height: 20px;*/
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 0;
}
#sec-badges img {
  height: 24px;
  background-color: inherit;
  border-radius: 0px;
  box-shadow: none;
  border:none;
}
/* author and date */
p.date:before {
  content: "Last edited: "
} 

/* show urls in print */
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style>
<style type="text/css">
/* these styles mirror oXygen's highlight colours for XML */
pre.sourceCode {
  background-color:white;
}
code.sourceCode {
  font-weight:normal;
}
/* provide a readible font-size */
.sourceCode * {
  font-size: 16px;
}
/* xml element names */
.xml > code > span.kw {
 color: #0F0F9C;
 font-weight: bold;
}
/* xml attribute names */
.xml > code > span.ot {
 color:#FF8041;
}
/* xml attribute values */
.xml > code > span.st {
 color:#993300;
}
/* xml comments */
.xml > code > span.co {
 color:#167116;
 font-style: italic;
}
/* xml computing instructions: not implemented in Pandoc syntax highlighting */
/* .xml > code > span {
  color:#9132CC;
}