/*
# Copyright 2022 - 2024 Paul Hänsch
# 
# Permission to use, copy, modify, and/or distribute this software for any
# purpose with or without fee is hereby granted, provided that the above
# copyright notice and this permission notice appear in all copies.
# 
# THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES
# WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
# MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
# SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
# WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
# ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
# IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/

html { min-height: 100%; }

body {
  position: absolute;
  width: 100%;
  min-height: 100%;
  padding-bottom: 6em;
  background-color: #EEE;
  font-size: 12pt;
}

header, footer {
  background-color: #FFF;
  box-shadow: 0 0 .75em;
  width: 100%;
  z-index: 1;
}

footer {
  padding-top: .5em;
  position: absolute;
  bottom: 0;
}

header > :last-child,
main > :last-child {
  margin-bottom: 0;
}

header h1,
header h2,
header .menu,
footer .menu {
  display: inline-block;
}

header .menu,
footer .menu { list-style: none; }

header .menu > ul > li,
header .menu > ol > li,
footer .menu > ul > li,
footer .menu > ol > li {
  display: inline-block;
  margin-right: .5em;
  vertical-align: top;
}

header .menu.dropdown li > ul,
header .menu.dropdown li > ol {
  display: none;
  position: absolute;
  background-color: #FFF;
  margin: 0;
  padding: .25em .5em;
  padding-left: 1.5em;
  box-shadow: 0 0 .75em;
}
header .menu.dropdown li:hover > ul,
header .menu.dropdown li:hover > ol {
  display: table;
}

main .pagemenu {
  list-style: none;
  background-color: #666;
  margin: 0;
  box-shadow: 0 0 .5em;
  padding: .25em 2em;
}
main .pagemenu li {
  display: inline-block;
  margin-right: 1em;
}
main .pagemenu li a { color: #FFF; }

main article,
main > form#renamepage, main > form#movepage,
main > form#deletepage, 
[id$="/[attachment]"] main > form {
  margin: 1em;
  padding: .125em 1em 1em 1em;
  box-shadow: .25em .25em .75em;
  background-color: #FFF;
}

main > form#deletepage label[for=delsub] {
  text-decoration: underline;
}
main > form#deletepage input#delsub:checked + label + ul li.delsub {
  text-decoration: line-through;
}

main > form#movepage input,
main > form#renamepage input {
  min-width: 30em;
  max-width: 100%;
}

[id$="/[revision]"] main .revisions,
[id$="/[attachment]"] main > .attachment.list {
  margin: 1em;
  padding: 1em 2em;
}
[id$="/[revision]"] main .revisions:before,
[id$="/[attachment]"] main > .attachment.list:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: #FFF;
  box-shadow: .25em .25em .75em;
}

main code {
  padding: .125em .25em;
  background-color: #EEE;
}
main pre {
  padding: .5em .5em;
  background-color: #EEE;
  max-width: 100%;
  overflow-x: auto;
}
main pre > code {
  padding: 0;
}

li.task > input[type=checkbox][disabled],
li.task > p > input[type=checkbox][disabled] {
  display: none;
}
li.task > p:first-child { display: inline-block;}

-li.task:before { font-size: 1.125em; }
li.task.pending:before  { content: '\274f  '; color: #222; }
li.task.partial:before  { content: '\25d4  '; color: #880; }
li.task.negative:before { content: '\2718  '; color: #800; }
li.task.done:before     { content: '\2714  '; color: #080; }
li.task.unsure:before   { content: '?  '    ; color: #880; font-weight: bold; padding-left: 2pt; }

/* Alternative Check Symbols, all from "geometric shapes" block */ /*
-li.task.pending:before  { content: '\25a1  '; color: #222; }
-li.task.partial:before  { content: '\25d4  '; color: #880; }
-li.task.negative:before { content: '\25a8  '; color: #800; }
-li.task.done:before     { content: '\25a3  '; color: #080; }
*/

h1 { text-align: center; }
.center { text-align: center; }

form.newpage, form.search {
  margin-bottom: 1em;
}
form.search { text-align: center; }
input.search, input[type="search"] {
  min-width: 50%;
  max-width: 80%;
  max-width: calc(100%  - 2.5em);
}
p.search.hits { text-align: center; }
ul.search.hits, ol.search.hits {
  margin-left: auto; margin-right: auto;
  width: 100%; max-width: 540pt;
  list-style: none;
  padding-left: 0;
}
.search.hits li {
  padding: 0 .75em;
}
.search.hits li:hover {
  background-color: #F4F4F4;
}
.search.hits li a {
  display: block;
}
.search.hits li p {
  margin: 0 auto .5em auto;
  white-space: pre-line;
}
.search.hits p.path {
  color: #444;
  font-size: .875em;
  margin-top: -.5em;
  margin-left: 1.5ex;
}

table {
  min-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

@media(min-width: 540pt) {
  .half {
    display: inline-block;
    width: 49%; width: calc(50% - .5ex);
    padding-right: 1em;
    vertical-align: top;
  }
  h1.half, h2.half, h3.half, h4.half, h5.half, h6.half {
    width: 100%;
  }
  .right {
    float: right;
    clear: both;
    width: 33%;
    margin: .25em 0 .5em 1em;
  }
  .left {
    float: left;
    clear: both;
    width: 33%;
    margin: .25em 1em .5em 0;
  }
  .left .left, .left .right,
  .right .left, .right .right,
  .half .left, .half .right {
    float: none;
    width: 100%;
    margin: .25em 0 .5em 0;
  }
  pre.half > code.half,
  pre.right > code.right,
  pre.right > code.right {
    float: none;
    width: 100%;
    margin: 0;
  }
  figure.left img.left,
  figure.right img.right {
    margin: 0;
  }
  section.left  > :first-child,
  section.right > :first-child {
    float: none;
    margin: 0 0 .5em 0;
  }
  .left  > section:first-child > :first-child,
  .right > section:first-child > :first-child {
    margin-top: 0;
  }
  .left table, .right table, .half table {
    width: 100%;
  }

  .left  input.search, .left  input[type="search"],
  .right input.search, .right input[type="search"] {
    width: 80%;
    width: calc(100% - 2.5em);
  }
  ul.search.hits, ol.search.hits {
    min-width: 50%;
  }
}


/* === Editor === */

[id$="/[edit]"] main .pagemenu {
  margin-bottom: 1em;
}

.tab[name=edithelp] ~ .tab.editor textarea,
.tab[name=edithelp] ~ .tab.syntax,
.tab[name=edithelp] ~ .tab.attach,
.tab[name=edithelp] ~ .tab.transl {
  background-color: #FFF;
  min-height: 20em; min-height: 50vh;
}

.tab[name=edithelp] ~ .tab.editor textarea {
  width: 100%;
  font-family: monospace;
  font-size: inherit;
}

.tab[name=edithelp] ~ .tab.attach {
  padding-top: 1em;
  padding-left: 7em;
}
.tab[name=edithelp] ~ .tab.attach .aimg img {
  float: left;
  max-height: 4em;
  margin-left: -6em;
}

.tab[name=edithelp] ~ .tab.transl {
  font-family: monospace;
  white-space: pre;
}

.tab[name=edithelp]#editor:checked ~ .tab.editor,
.tab[name=edithelp]#syntax:checked ~ .tab.syntax,
.tab[name=edithelp]#attach:checked ~ .tab.attach,
.tab[name=edithelp]#transl:checked ~ .tab.transl {
  display: block;
}


/* === Attachments === */

.attachment.list button[name=delete] {
  font-size: .75em;
  line-height: 1.25em;
  margin-right: 1.25em;
}
.attachment.list .size,
.attachment.list .date {
  font-size: .875em;
  top: -.25em;
}

.attachment.list .name:after {
  white-space: pre-line;
  content: "\0a";
}
.attachment.list .size {
  margin-right: 1em;
}

.revisions li { margin: 1em 0; }
.revisions li span.hash,
.revisions li span.date {
  margin-right: 1em;
}

.revisions .diff span {
  font-family: monospace;
  display: block;
  white-space: pre;
  line-height: 1.375em;
}
.revisions .diff span.linenum { color: #D60; }
.revisions .diff span.linedel { color: #A00; }
.revisions .diff span.lineadd { color: #0A0; }
.revisions .diff span.linenote { color: #AAA; }


[id$="/[attachment]"] input[type=radio].tab ~ div.tab {
  display: block;
  padding-top: 1em;
}
[id$="/[attachment]"] input[type=radio].tab ~ div.tab ul.attachment.list {
  list-style: none;
  margin-left: 0;
}

.tab ul li input[name=select],
.tab ul li label.name,
.tab ul li a.name,
.tab ul li input.name {
  display: none;
}

[id$="/[attachment]"] input[type=radio].tab#tview:checked ~ div.tab ul li a.name,
[id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ div.tab ul li input[name=select],
[id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ div.tab ul li label.name,
[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab ul li input[name=select],
[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab ul li label.name {
  display: inline;
}
[id$="/[attachment]"] input[type=radio].tab#tren:checked ~ .tab ul li input.name {
  display: block;
}

[id$="/[attachment]"] label[for=moveto], [id$="/[attachment]"] input#moveto,
[id$="/[attachment]"] button[name=action] { display: none; }

[id$="/[attachment]"] .upload button[name=action] { display: inline-block; }
[id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ div.tab button[name=action][value=delete],
[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab label[for=moveto],
[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab input#moveto,
[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab button[name=action][value=move],
[id$="/[attachment]"] input[type=radio].tab#tren:checked  ~ div.tab button[name=action][value=rename] {
  display: inline;
}


/* === Macros === */

.macro.toc {
  display: inline-block;
  list-style-position: inside;
  margin-left: 0;
  background-color: #DDD;
  background-color: rgba(0, 0, 0, .125);
  padding: .75em 1em;
  border: 1pt solid;
  border-radius: 2pt;
}
.macro.toc li.h2 { margin-left: 1.25em; }
.macro.toc li.h3 { margin-left: 2.5em; }
.macro.toc li.h4 { margin-left: 3.75em; }
.macro.toc li.h5 { margin-left: 5em; }
.macro.toc li.h6 { margin-left: 6.25em; }


.macro.gallery {
  text-align: center;
  margin: 2em 0;
  padding: .5em .125em;
  background-color: #444;
  clear: both;
}
.macro.gallery img {
  max-height: 9em;
  margin: 0 .25em;
}


ul.macro.tag { padding: 0; }
.macro.tag li.tag {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  font-size: .875em;
  padding: 0 .5em;
  margin: .25em .25em 0 0;
  border-radius: .375em;
}


.macro.taglist li {
  display: inline-block;
  margin-right: .75em;
}
.macro.taglist.cloud li[rel="0"] { font-size: 6pt; }
.macro.taglist.cloud li[rel="1"] { font-size: 7.5pt; }
.macro.taglist.cloud li[rel="2"] { font-size: 9pt; }
.macro.taglist.cloud li[rel="3"] { font-size: 11.5pt; }
.macro.taglist.cloud li[rel="4"] { font-size: 13pt; }
.macro.taglist.cloud li[rel="5"] { font-size: 14.5pt; }
.macro.taglist.cloud li[rel="6"] { font-size: 16pt; }
.macro.taglist.cloud li[rel="7"] { font-size: 17.5pt; }
.macro.taglist.cloud li[rel="8"] { font-size: 19pt; }
.macro.taglist.cloud li[rel="9"] { font-size: 21.5pt; }


.macro.changes td .date {
  display: block;
  font-size: .75em;
}
.macro.changes td.outdated,
.macro.changes td.current,
.macro.changes td.missing {
  text-align: center;
}
.macro.changes th { background-color: #EEF; }
.macro.changes td { background-color: #DFF; }
.macro.changes td.outdated { background-color: #FFD; }
.macro.changes td.current  { background-color: #DFD; }
.macro.changes td.missing  { background-color: #FDD; }


.macro.calendar.cal_month {
  border: 1pt solid #AAA;
  -box-shadow: .25em .25em .75em #AAA;
}
.macro.calendar.cal_month td {
  padding: 0 .25em;
  vertical-align: top;
}
.macro.calendar.cal_month td > label {
  display: block;
  background-color: #F4F4F4;
  text-align: center;
  margin-right: 0;
}
.macro.calendar.cal_month td > ul {
  padding: .25em 1em;
  margin-bottom: .125em;
}
.macro.calendar.cal_month td > ul > li {
  display: block;
}