/* -*- coding: utf-8 -*- */
/* * DOS.sass ->
 * * www.opimedia.be/DS/grenier/MS-DOS/online-DOS/_css/DOS.css (April 24, 2020)
 * *
 * * (c) Olivier Pirson
 * * http://www.opimedia.be/
 * */
main section {
  border-top: 1px solid black;
  padding: 0 0 1em;
}
main section:first-child {
  border-top: 0;
}
main section code.block-html {
  background-color: black;
  color: white;
  display: block;
  padding: 1ex;
  white-space: pre;
}
main section div.super-container {
  height: 480px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 640px;
}
main section div.super-container > div.dosbox-container {
  background-color: #505050;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 100;
}
main section div.super-container > div.dosbox-container > canvas {
  background-color: black;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
main section div.super-container > div.dosbox-container > div.message {
  align-items: center;
  color: #f2e648;
  display: flex;
  font-family: monospace;
  font-size: large;
  height: 100%;
  justify-content: center;
  line-height: 3ex;
  text-align: center;
}
main section div.super-container > div.loading {
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
  height: 100%;
  left: 0;
  line-height: 480px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 0;
  vertical-align: middle;
  width: 100%;
  z-index: 1000;
}
main section div.super-container > div.loading > img {
  opacity: 0.8;
  pointer-events: none;
  vertical-align: middle;
}
main section div.info-container {
  text-align: center;
}
main section div.keyboard-container {
  font-size: small;
  margin: 0 auto;
  width: 640px;
}
main section div.keyboard-container > div.simple-keyboard > div.hg-row > div.hg-button {
  height: 3ex;
}
main section header {
  margin: 1ex 0;
  text-align: center;
}
main ul.buttons {
  background-color: #f0f0f0;
  list-style-type: none;
  margin: 1ex 0 0;
  padding: 0.5ex 0;
}
main ul.buttons > li {
  display: inline-block;
  margin: 0 1ex;
}
main ul#programs-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
main ul#programs-list > li {
  background-color: #e0e0ff;
  display: inline-block;
  margin-top: 1ex;
  padding: 1ex;
  text-align: center;
  vertical-align: top;
}
main ul#programs-list > li > figure > img {
  cursor: pointer;
  max-height: 100px;
}
main ul#programs-list > li > figure > img:hover {
  outline-style: outset;
  outline-width: 3px;
}
main ul#programs-list > li > figure > img.click {
  outline-style: inset;
  outline-width: 5px;
}
main ul#programs-list > li.mine {
  background-color: #e0ffe0;
}
main ul#programs-list > li.stop {
  background-color: #f0f0f0;
  cursor: pointer;
}
main ul#programs-list > li.stop > figure:hover > img {
  outline-style: outset;
  outline-width: 3px;
}
main ul#programs-list > li.stop > figure:hover.click > img {
  outline-style: inset;
  outline-width: 3px;
}

/*# sourceMappingURL=DOS.css.map */