@import url("github-markdown.css");
@import url("rouge-highlight.css");
@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700');


/* 
 * HTML and Body elements
*/

body, html {
  font-family: 'Muli', sans-serif;
  margin: 0;
}

@media screen {
  body {
    background: whitesmoke;
  }
}

@media print {
  html {
    font-size: 12pt;
  }

  @page {
    /* A4 with, for printing presses add a (3mm to each side) bleed here */
    size: 21cm 29.7cm;
    margin: 2cm 1cm;
    orphans:4; 
    widows:4;
    @bottom-center {
      background: whitesmoke;
      font-size: 75%;
      content: counter(page);
      margin-top: 0.25cm;
      height: 1cm;
      width: 1cm; 
      text-align: center;
    }
  }
}

/* 
 * General elements and ground rules
*/

hr {
  border: none;
  border-bottom: 1px solid lightgrey;
}

@media screen {
  p, h1, h2, h3, h4, h5, ul, pre, blockquote, .highlight {
    max-width: 35em;
    max-width: calc(30rem + 5em);
  }
}
@media print {
  p, ul {
    max-width: 12cm;
    max-width: 60vw;
    box-sizing: border-box;
  }
}

h1, h2, h3, h4, h5 {
  page-break-after: avoid;
}
img, code {
  break-inside: avoid;
  page-break-inside: avoid;
  overflow: wrap;
}

@media print {
  ul, ol {
    page-break-inside: avoid;
  }
  ul li, ol li {
    margin: .5em 0;
  }
}

/* 
 * Links
*/

a:link, a:visited {
  text-decoration: underline;
  color: black;
}
a:link {
  text-decoration-color: blue;
}
a:visited {
  text-decoration-color: purple;
}
a:link[href^='#'], a:visited[href^='#'] {
  text-decoration-color: darkgrey;
}
a:hover {
  background: whitesmoke;
}

@media print {
  a:link, a:visited {
    text-decoration: none !important;
  }
  a:link:after, a:visited:after {
    color: grey;
    border-left: 2px solid whitesmoke;
    page-break-inside: avoid;
    break-inside: avoid;
    display: block;
    right: 0;
    width: 6cm;
    width: 30vw;
    margin-right: -7cm;
    margin-right: -30vw;
    padding: 0 0 0.25em .25em;
    margin-bottom: .25em;
    line-height: 1.25;
    text-align: left;
    float: right;
    clear: both;
    text-decoration: none;
    font-weight: normal;
  }
  /* Add `[href^="http"]` for limiting to external sites */
  a[href^="http"]:link {
    color: black;
    text-decoration: underline;
  }
  a[href^="http"]:after {
    content: "" attr(href) "";
    font-size: .75rem;
  }
  a[href^="/"]:after {
    /* content: "" attr(href) "";
    font-size: .75rem; */
    display: none;
  }
  a[href^="#"]:after {
    content: "" target-counter(attr(href), page);
    color: black;
    background-color: whitesmoke;
    width: 1cm;
    padding: 0.2cm;
    text-align: right;
  }
}

/* 
Buttons
*/

button, input {
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 0.5em;
  padding: 0.5em;
  display: inline-block;
  background: none;
  border: 1px solid lightgrey;
  border-radius: 2px;
  white-space: nowrap;
}
input:focus, button:focus {
  border: 1px solid black;
  background: whitesmoke;
}
button:hover {
  background: whitesmoke;
}
button svg {
  vertical-align: -2px;
}

/* 
 * general layout
*/

body>hr {
  margin: 0;
}

@media screen {
  body>nav.theme-nav, body>header, body>footer {
    padding: 1em;
  }
  body>header, body>footer#site-footer {
    background-color: white;
  }
  body>*:not(hr) {
    box-sizing: border-box;
    max-width: 80em;
    margin: auto;
  }
  body.with-site-nav>*:not(hr) {
    max-width: 100em;
  }
}

@media screen and (min-width:68em) {
  body>nav.theme-nav, body>header, body>footer {
    padding: 2em 4em;
  }
}

/* 
 * Foundation Navigation
*/

@media screen {
  nav.theme-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    background: none;
  }
}
@media screen and (min-width:400px) {
  nav.theme-nav {
    padding: 1rem;
  }
}
@media screen and (min-width:64em) {
  nav.theme-nav {
    padding: 1rem 4em;
  }
}
@media print {
  nav.theme-nav {
    display: block;
  }
  nav.theme-nav ul {
    display: none;
  }
}

nav.theme-nav ul {
  list-style: none;
  margin: 0;
}
nav.theme-nav ul li {
  padding: 0;
  display: inline-block;
}

nav.theme-nav a:link, header a:visited {
  font-weight: normal;
  border-bottom: none;
}
@media screen {
  nav.theme-nav a:link, header a:visited {
    padding: 1rem;
  }
}
@media print {
  nav.theme-nav a:link:after, header a:visited:after {
    display: none;
  }
}

nav.theme-nav a.logo-mark {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  text-decoration: none;
}

@media screen and (min-width:500px) {
  nav.theme-nav a.logo-mark {
    font-size: 2em;
  }
}
@media screen and (min-width:400px) and (max-width:500px) {
  nav.theme-nav a.logo-mark {
    font-size: 1.5em;
  }
}
nav.theme-nav a.logo-mark>img {
  height: 2em;
  margin-right: 0.5em;
}
nav.theme-nav a.logo-mark>p {
  font-weight: bold;
  margin: 0;
}

@media print {
  nav.theme-nav+hr {
    display: none;
  }
  nav.theme-nav a.logo-mark {
    font-size: 1.5em;
  }
  nav.theme-nav a.logo-mark>img {
    margin-right: 0.9rem;
  }
}

/* 
 * Site header
*/

@media screen {
  header .site-title {
    padding: 1em 1rem;
    font-size: 1.5em;
  }
}
@media screen and (min-width:400px) {
  header .site-title {
    font-size: 2em;
    padding: 1.5em 2rem;
  }
}
@media screen and (min-width:700px) {
  header .site-title.home {
    font-size: 4em;
  }
}

header .site-title a {
  text-decoration: none;
}
header .site-title a:hover {
  text-decoration: underline;
}

@media print {
  header .site-title a:after {
    display: none;
  }
  header .site-title {
    font-size: 1.5em;
    margin-left: 3.5rem;
  }
  header+hr {
    margin: 2em 0;
  }
}

/* 
 * Site navigation
*/

input#show-site-nav {
  display: none;
}
input#show-site-nav ~ label:before {
  content: 'Open '
}
input#show-site-nav:checked ~ label:before {
  content: 'Close '
}

nav#site-nav {
  padding: 1rem;
}
nav#site-nav>ul {
  display: none;
}
label[for=show-site-nav] {
  display: block;
}
nav#site-nav a.active {
  font-weight: bold;
}

input#show-site-nav ~ label {
  margin: 1em;
  padding: 1rem;
  text-decoration: none;
  border: 1px solid grey;
  border-radius: 2px;
  display: block;
}
input#show-site-nav ~ label:hover, input#show-site-nav:checked ~ label {
  background: lightgrey;
}
input#show-site-nav:checked ~ ul {
  display: block;
}

@media print {
  nav#site-nav, input#show-site-nav {
    display: none !important;
    /* Hide navigation from all print */
  }
}

/* 
 * Main content
*/

@media screen {
  main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: white;
  }
  main>* {
    padding: 2rem;
    box-sizing: border-box;
    max-width: 100%;
    order: 2;
  }
  main>*>* {
    max-width: 100%;
  }
  main #theme-breadcrumbs {
    flex-basis: 100%;
    order: 0;
  }
  main>h1 {
    flex-basis: 100%;
    margin: 0;
    order: 1;
  }
  main .content {
    flex: 2 2 60%;
  }
  main .page-information {
    flex: 1 1 33%;
    order: 3;
  }
}

@media screen and (min-width:68em) {
  main {
    padding: 4em;
  }
  main>h1 {
    font-size: 3em;
    margin-bottom: .25em;
  }
}

@media print {
  main {
    display: block !important;
    page-break-after: always;
  }
  main+hr {
    display: none;
  }
  main>h1 {
    padding: 1em 3.5rem;
    font-size: 3em;
  }
  main .page-information {
    page-break-after: always;
  }
}

/* 
 * Content
 */

#bpmn-canvas {
  height: 50vh;
  border: 1px solid lightgrey;
  border-radius: 2px;
  max-width: 50em;
  max-height: 50vw;
  margin-bottom: 1em;
  page-break-inside: avoid;
}
#bpmn-canvas .bjs-powered-by {
  display: none;
}

main .content>article>:first-child:not(h1):not(h2):not(ol):not(ul) {
  font-size: 1.15em;
}

/*
 * Markdown content
 */

@media print {
  .markdown-body {
    font-family: "Muli"
  }
  
  .markdown-body h1, .markdown-body h2, .markdown-body h3 {
    font-weight: normal; 
    position: relative;
  }
  .markdown-body h1 {
    font-size: 1.5cm;
    border-bottom: none;
  }
  .markdown-body h2 {
    font-size: 1.5em;
  }
  .markdown-body h3 {
    font-size: 1em;
    font-weight: bold;
  }
  .markdown-body h4 {
    font-size: 1em;
    font-weight: normal;
  }
  .markdown-body h4 {
    font-weight: bold;
  }
}

/*
 * Page information section
 */

 @media screen {
  main section.page-information {
    flex: 1 2 300px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
}

/*
 * Table of contents
*/

/*
 * Navigation lists
*/

@media screen {
  nav#site-nav>ul:before {
    color: lightgrey;
    text-align: center;
    font-size: 1em;
    line-height: 2;
    display: block;
    border-bottom: 1px solid;
  }
  ol.table-of-contents, nav#site-nav>ul {
    list-style: none;
    flex: 1 1 auto;
    overflow: hidden;
    margin: 0 0;
    padding: 0;
    box-sizing: border-box;
  }

  ol.table-of-contents li, nav#site-nav>ul li {
    margin: .5em 0;
  }
  ol.table-of-contents>li, nav#site-nav>ul>li {
    font-size: 1.15rem;
    padding-bottom: 0.5em;
  }
  ol.table-of-contents>li ol, nav#site-nav>ul>li ul {
    padding-left: 1em;
    list-style: none;
  }
  ol.table-of-contents>li>ol>li, nav#site-nav>ul>li>ul>li {
    font-size: 1rem;
  }
}

@media print {
  nav#site-nav>ul:before {
    font-size: 1.5em;
    font-weight: bold;
    padding-left: 0;
  }
}

/*
 * Breadcrumbs
 */

#theme-breadcrumbs {
  padding-top: 0;
  padding-bottom: 0;
  background-color: white;
}

#theme-breadcrumbs ul {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 2em;
}
#theme-breadcrumbs li {
  display: inline-block;
  margin: -1.15em 0;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#theme-breadcrumbs li::after {
  content: '›';
  display: inline-block;
  opacity: 0.3;
  font-size: 1em;
  padding: .5em;
  line-height: 0;
}

@media print {
  #theme-breadcrumbs {
    display: none;
  }
}

/* 
 * Edit links
*/

main .edit-links {
  padding-left: 0;
}
main .edit-links li {
  list-style-type: none;
}
main .edit-links li a {
  margin-bottom: 0.5em;
  padding: 0.5em;
  text-decoration: none;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid lightgrey;
}
main .edit-links li a:link {
  border-bottom: 1px solid blue;
}
main .edit-links li a:visited {
  border-bottom: 1px solid purple;
}
main .edit-links a svg {
  vertical-align: -2px;
}
@media print {
  h3#page-edit-links, main .edit-links {
    display: none;
  }
}

/*
 * Metadata display
 */

.metadata tbody {
  width: 100%;
}
.metadata tr {
  margin: .25em 0 0 0;
}
.metadata .expired {
  color: red;
}
.metadata td, .metadata th {
  padding: 0, 0.5em, 0.5em, 0;
  text-align: left;
  vertical-align: top;
}

/* 
 * Footer
 */

@media screen {
  footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem;
  }
  footer section {
    padding: 1rem;
    max-width: 20rem;
  }
  #search-repository>button {
    border-bottom-color: blue;
  }
}
@media print {
  footer {
    page-break-after: always;
  }
  #search-repository {
    display: none;
  }
}