/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/*
 * 03feb22edg
 * 02jan19abu
 * (c) Software Lab. Alexander Burger
 */

/* utils */
.left   {float: left}
.right  {float: right}
.clr    {clear: both}
.norm   {text-align: left}
.align  {text-align: right}
.center {text-align: center}
.black  {color: black}
.red    {color: red}
.green  {color: green}
.blue   {color: blue}
.bold   {font-weight: bold}
.mono   {font-family: monospace}
.hide   {display: none;}

.flex-col {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   max-width: 100%;
}

.flex-row {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   margin: 0.2rem;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
}

/* simple responsive container */
.container {
   width: 94%;
   display: block;
   margin: 0 auto;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   font-size: 1rem;
}

/* defaults */
fieldset {
   padding: 0.3em 0.4em 0.7em 0.8em;  /* ie */
}

input, textarea, select {
   font-size: smaller;
   background-color: #eee;
}

input[type=file] {
   margin: 0.8rem 0;
}

body {
   margin: 0;
   font-family: "Verdana", "Arial", "sans-serif";
   font-size: 1rem;
   color: #222;
   background-color: #fcfcfc;
}

h1,h2,h3,h4,h5,h6 {
   color: #43487a;
   text-decoration: none;
   margin-bottom: 1rem;
}

h1 {font-size: 2.4rem;}
h2 {font-size: 2.0rem;}
h3 {font-size: 1.6rem;}
h4 {font-size: 1.4rem;}
h5 {font-size: 1.2rem;}
h6 {font-size: 1.0rem;}

/* menu */
#menu {
   background: #303357;
   background: -o-linear-gradient(290deg, #602223, 5%, #303357);
   background: linear-gradient(160deg, #602223, 5%, #303357);
   -webkit-box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);
           box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -ms-flex-pack: distribute;
       justify-content: space-around;
   position: relative;
   z-index: 5;
   padding-bottom: 0.8rem;
}

/* logo (homepage link) */
#menu a img {
   max-width: 40%;
   height: auto;
   margin: 1.4rem;
}

/* menu links */
#menu a {
   color: #fcfcfc;
   text-transform: uppercase;
   text-decoration: none;
   font-size: smaller;
}

#menu a:hover,
#menu a:focus {
   color: #bfc2df;
}

#menu ul {
   /* remove phantom margin/padding */
   margin: initial;
   padding: initial;
}

#menu ul li {
   list-style: none;
   margin: 0.8rem;
   padding: none;
}

#menuLogin a {
   margin: 0.2rem 0.8rem;
}

/* table styles */
table.wiki, table.wiki td {
   border-collapse: collapse;
   border: 1px midnightblue solid;
   padding: 0.2rem;
}

/* wiki search */
.search {
   border: none;
}

#searchGrp input[type=text],
#searchGrp .submit {
   margin: 0.2rem;
}

#searchGrp input[type=text] {
   color: #222;
   background-color: #fff;
   border-radius: 0.5rem;
   border: none;
   font-size: 0.88rem;
   width: 70%;
   padding: 0.1rem 0.4rem;

}

/* Search Results */
#searchGrp strong {
   color: #6dc066;  /* PL green */
   font-size: small;
   display: block;
}

#searchGrp strong,
#searchGrp a {
   margin: 0 1.25rem;
   text-transform: none;
}

/* wiki document body */
#main {
   line-height: 1.3;
   margin-top: 1rem;
}

#main a {
   color: #6067af;
   font-weight: 400;
   text-decoration: none;
}

#main a:hover,
#main a:focus {
   text-decoration: underline;
}

#main a:active {
   color: #565c9d; /* next darker shade of PL blue */
}

/* list styles */
#main > ul > li {
   list-style-type: square;
}

#main li {
   margin-bottom: 0.5rem;
}

#main img {
   max-width: 100%;
}

/* code highlighting */
.code {
   color: #333;
   font-weight: bold;
   font-family: 'Courier New', monospace;
   background: #efefef;
   border-radius: 0.15rem;
   border: 1px solid #aaa;
   padding: 0.05rem 0.2rem;
   margin-right: 1px;
   overflow-x: auto;
   font-size: smaller;
}

pre.code {
   padding: 0.1rem 0.2rem;
   border-radius: 0.25rem;
   background: -webkit-gradient(linear, left top, right bottom, from(#efefef), color-stop(90%), to(#dfdfdf));
   background: -o-linear-gradient(top left, #efefef, 90%, #dfdfdf);
   background: linear-gradient(to bottom right, #efefef, 90%, #dfdfdf);
   -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
           box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
}

/* wiki document login/edit forms */
.edit, .login, .dialog {
   position: relative;
   background: #efeff7;
   background: -o-linear-gradient(284deg, #efeff7, 86%, #efefef);
   background: linear-gradient(166deg, #efeff7, 86%, #efefef);
   color: #222;
   border-radius: 0.8rem;
   border: 1px solid #aaa;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin: 0 auto;
   -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
           box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
}

.dialog input[type=text],
.edit input[type=text] {
   margin: 0 0.4rem;
   max-width: 80%;
}

.dialog textarea,
.edit textarea {
   max-width: 98%;
}

.edit input[type=text], textarea {
   color: #222;
   background: #fff;
   border: 1px solid #9fa3cf;
   border-radius: 0.5rem;
   padding: 0.2rem;
}

/* same as above, don't know the proper css selector */
.dialog input[type=text], textarea {
   color: #222;
   background: #fff;
   border: 1px solid #9fa3cf;
   border-radius: 0.5rem;
   padding: 0.2rem;
}

.dialog .grid input[type=text] {
   width: 100%;
}

.edit hr {
   color: #efeff7;
}

.login input[type=text], input[type=password] {
   background: #fff;
   color: #222;
   border: 1px solid #9fa3cf;
   border-radius: 0.5rem;
   padding: 0.2rem;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
}

.login .grid {
   margin-top: 0.5rem;
   width: 100%;
}

/* form buttons */
.search .submit,
.dialog .submit,
.alert .submit,
.edit .submit,
.login .submit {
   font-weight: bold;
   color: #222;
   background-color: #D0D0D0;
   background: -o-linear-gradient(64deg, #efefef, 66%, #ccc);
   background: linear-gradient(26deg, #efefef, 66%, #ccc);
   border: 1px solid #888;
   border-radius: 0.5rem;
   padding: 0 0.5rem;
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
           box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   cursor: pointer;
}

.search .submit:hover,
.dialog .submit:hover,
.alert .submit:hover,
.edit .submit:hover,
.login .submit:hover {
   background: -o-linear-gradient(64deg, #fcfcfc, 66%, #ccc);
   background: linear-gradient(26deg, #fcfcfc, 66%, #ccc);
}

.search .submit:active,
.dialog .submit:active,
.alert .submit:active,
.edit .submit:active,
.login .submit:active {
   border: 1px solid #666;
   -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,.3) inset;
           box-shadow: 0 0 2px 1px rgba(0,0,0,.3) inset;
   position: relative;
   top: 1px;
}

/* media grid */
.media-grid {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
}

.media-grid .chart {
   margin: 0 1rem 0.5rem 0;
}

/* From 'form' GUI */
.chart {
   white-space: nowrap;
}

.chart td {
   color: #222;
   background-color: #dfe0ef;
   padding: 0 0.2rem 0.25rem;
   border-radius: 0.25rem;
}

.chart td.T {
   background-color: #cfd1e7;
}

.chart td.nil {
   background-color: white;
}

.btn {
   width: 1em;
}

/* errors */
.error {
   color: #903334;
   border: 1px solid #903334;
   background: #facccc;
   padding: 0.2rem 0.5rem;
   border-radius: 0.5rem;
   margin: 0.25rem 0;
   font-size: small;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
}

.edit .error {
   position: absolute;
   /* top: 1rem; */
   bottom: 0.75rem;
   margin: 0;
}

/* tiny text / buttons */
.tiny {
   font-size: xx-small;
}

input[type=submit].tiny {
   padding: 0.1rem 0.25rem;
   font-weight: bold;
   border-radius: 0.8rem;
}

/* dialog stuff */
.note, .ask {
   font-weight: bold;
}

.alert {
   display: inline;
   padding: 1ex;
   margin: 1ex 0 1ex 5em;
   color: #903334;
   background-color: #fcdddd;
   border: 1px solid #903334;
   border-radius: 0.8rem;
   -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
           box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
}

/* errors */
.error {
   color: #903334;
   background: #fcdddd;
   padding: 0.2rem 0.5rem;
   border-radius: 0.5rem;
   margin: 0.25rem 0;
   font-size: small;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
}

.alert input {
   margin-top: 1ex;
}

/* hints */
.hint {
   font-size: small;
   /* font-family: sans-serif; */
   line-height: 140%;
   background-color: rgba(112,112,112,0.3);
}

.hints {
   font-size: small;
   color: black;
   padding-left: 0.4em;
   padding-top: 2px;
   padding-bottom: 2px;
   border: 1px solid;
   background-color: white;
   cursor: default;
}


/* media queries */
@media screen and (min-width: 900px) {
   .container {
      max-width: 768px;
   }
}

@media screen and (min-width: 2000px) {
   .container {
      font-size: 1.2rem;
      max-width: 900px;
   }
}

@media screen and (max-width: 700px) {
   /* proper edit form display on mobile */
   fieldset.edit, fieldset.login, fieldset.dialog {
      display: contents;
   }
   form .login, form .dialog {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
   }
   .container form {
      padding: 0.8rem;
      background: -webkit-gradient(linear, left top, right bottom, from(#efeff7), color-stop(86%), to(#eee));
      background: -o-linear-gradient(top left, #efeff7, 86%, #eee);
      background: linear-gradient(to bottom right, #efeff7, 86%, #eee);
      color: #222;
      border-radius: 0.8rem;
      border: 1px solid #aaa;
      -webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.1);
              box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.1);
   }
   #menuLogin {
      margin: 1rem 0;
   }
   .edit .error {
      position: unset;
   }
}

/* better edit form layout on mobile */
@media screen and (max-width: 500px) {
   .flex-row input[type=text], input[type=file] {
      width: 50%;
   }
}

/* alternate menu for large screens - fixed in left margin */
@media screen and (min-width: 1376px) {
   #menu {
      position: fixed;
      top: 0;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-shadow: 2px 0 8px 0 rgba(0,0,0,0.2);
              box-shadow: 2px 0 8px 0 rgba(0,0,0,0.2);
      background: -o-linear-gradient(64deg, #303357, 95%, #903334);
      background: linear-gradient(26deg, #303357, 95%, #903334);
   }
   #menuLogin {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin: 1rem 0 1rem 0.5rem;
   }
   body #menu ul {
      display: initial;
      margin-left: 0.5rem;
   }
}

@media screen and (min-width: 1376px) and (max-width: 3200px) {
   .container {
      margin: 0 36%;
   }
}