
@font-face {
  font-family: macintosh-system;
  src: url(mac/ChicagoFLF.ttf);
  font-weight: bold;
}

@font-face {
  font-family: ms-dos;
  src: url(MorePerfectDOSVGA.ttf);
  font-weight: bold;
}

body {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #eee;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file, .folder, .item {
  background-color: white;
  box-shadow: 3px 3px 10px white inset;
}

.file.invisible, .folder.invisible, .item.invisible {
  background-color: #ffc;
  box-shadow: 3px 3px 10px #ffc inset;
  /* display: none; */
}

.file > header, .folder > header, .item > header {
  font-family: monospace;
  cursor: default;
}

.folder > summary {
  font-weight: bold;
}

.folder-children, .subitems {
  display: none;
}

.open > .folder-children, .open > .subitems {
  display: block;
}

.folder > header::before, .file > header::before, .item > header::before {
  font-family: macintosh-system, monospace;
  font-weight: bold;
  font-size: 9pt;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 1em;
  content: "\a0";
}

.folder > header::before, .has-subitems > header::before {
  content: "\25B6";
}

.folder.open > header::before, .has-subitems.open > header::before {
  content: "\25BC";
}

.loading, .itemizing {
  background-size: 30px 30px;
  background-image: linear-gradient(
    135deg,
    rgba(0,0,128, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0,0,128, 0.1) 50%,
    rgba(0,0,128, 0.1) 75%,
    transparent 75%,
    transparent
  );
  animation: animate-stripes 3s linear infinite;             
  background-attachment: fixed;
  cursor: wait;
}

@keyframes animate-stripes {
    0% {background-position: 0 0;} 100% {background-position: 60px 60px;}
}

.folder-children, .subitems {
  min-height: 0.5em;
  background: white;
  margin-left: 1em;
}

.download {
  visibility: hidden;
  text-decoration: none;
}

.file:hover > header .download, .item:hover > header .download {
  visibility: visible;
}

.folder-children pre, .subitems pre {
  max-height: 15em;
  overflow: auto;
  margin: 0;
}

.item-download {
  color: inherit;
  text-decoration: none;
}

.item-download:hover:after {
  color: blue;
  content: ' \1f4be';
  vertical-align: top;
}

.item > header {
  font-family: macintosh-system, monospace;
  font-weight: bold;
  font-size: 9pt;
}

.item.creator-mdos > header, .item.creator-dosa > header {
  font-family: ms-dos, monospace;
  font-weight: bold;
  font-size: 12pt;
}

canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
