/* Copyright (c) 2019, Peter Ljung <peter@uniplex.se> */

/* general */

body {
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 14px;
  background: #f8f8f8;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.0em; }

div#main {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  min-width: 300px;
  min-height: 640px;
}

form.pure-form label {
  display: block;
  float: left;
  min-width: 8em;
}

/* upload */

#dropzone {
  border-style: solid;
  border-width: 2px;
  border-radius: 20px;
  border-color: lightgrey;
  width: 50%;
  height: 200px;
  padding-left: 10px;
  margin-top: 20px;
}

#uploaded img, #uploaded audio, #uploaded video {
  max-width: 80%;
  max-height: 600px;
}

#linkText { width: 25em; }

/* all page */

li.page { margin-bottom: 0.4em; margin-bottom: 0.4em; }
ul.links { margin-bottom: 0.4em; margin-bottom: 0.4em; }
li.page:has(input.more)         .links { display: none; }
li.page:has(input.more:checked) .links { display: block; }

/* hack to enable toggle visibility without inline JS */
input.more {
  appearance: none;
  padding: 8px;
  margin-left: 5px;
  margin-right: 5px;
}

input.more         { background-image: url(/images/icons/plus-circle.svg); }
input.more:checked { background-image: url(/images/icons/dash-circle.svg); }

/* Editor */

#markup textarea { width: 100%; }

div.actions { 
  margin-top: 1em; 
  margin-bottom: 1em;
}
.actions input {
  margin: 0.5em;
  min-width: 5em;
}

.toolbar ul {
  margin: 10px;
  padding: 0;
}

.toolbar li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  padding: 5px;
  margin-right: 10px;
}
.toolbar li:hover {
  background-color: lightgray;
}

li#wf-template      { background-image: url(/images/editor/layout-text-window-reverse.svg); }
li#md-h1            { background-image: url(/images/editor/type-h1.svg); }
li#md-h2            { background-image: url(/images/editor/type-h2.svg); }
li#md-bold          { background-image: url(/images/editor/type-bold.svg); }
li#md-italic        { background-image: url(/images/editor/type-italic.svg); }
li#md-citation      { background-image: url(/images/editor/quote.svg); }
li#md-list          { background-image: url(/images/editor/list-ul.svg); }
li#md-list-numbered { background-image: url(/images/editor/list-ol.svg); }
li#md-code          { background-image: url(/images/editor/code-square.svg); }
li#md-link          { background-image: url(/images/editor/link-45deg.svg); }
li#md-link-page     { background-image: url(/images/editor/file-earmark-plus.svg); }
li#md-link-image    { background-image: url(/images/editor/file-earmark-image.svg); }
li#wf-section       { background-image: url(/images/editor/view-list.svg); }
li#md-table         { background-image: url(/images/editor/table.svg); }
li#md-help          { background-image: url(/images/editor/info-circle.svg); }

/* header */

div#header {
  height: 80px;
}

div#logo {
  float: left;
  margin-left: 50px;
  margin-top: 0px;
}

div#logo img {
  height: 60px;
}

div#menu-header {
  float: right;
  margin-right: 50px;
  margin-top: 20px;
}

div#menu-header li { border-bottom: 8px solid #f8f8f8; }
div#menu-header li.pure-menu-selected { border-bottom: 8px solid lightgrey; }

/* contents */

div#contents-outer {
  background: white;
  border: 1px solid #e0e0e0;
}

div#contents {
  padding-left: 80px;
  padding-top: 20px;
  padding-bottom: 30px;
  max-width: 640px;
  min-height: 400px;
}

div.with-sub-menu {
  margin-left: 6em;
}

div#menu-sub {
  float: left;
  margin: 2em;
}

/* footer */

div#footer {
  padding: 1em;
  padding-left: 2em;
}

/* other */

div.screenshot { font-size: 0; }
img.screenshot {
  max-width: 100%;
}

div.flowing img {
  float:right; 
  margin-left: 2em;
  height: 180px;
  box-shadow: -4px 4px 8px -4px rgba(0,0,0,0.75);
}

/* responsive */

@media screen and (max-width: 800px) {
  div#contents {
    padding: 0.5em;
  }
}

@media screen and (max-width: 600px) {
  div#menu-header {
    display: none;
  }
}