body{
	position: absolute;
	top:0;
	left:0;
	margin:3.5em 1em 1em 1em;
}
.stylesheet{
	display: none;
}

header{
  line-height: 1.4;
  margin-top: -39px;
}
header b{
  font-size: 150%;
}
h1#title{
  font-size: 200%;
  text-align: center;
  border-bottom: 1px dotted black;
  padding-bottom: 1em;
}
h1.foldername{
	margin: 0 0 1em 1.5em;
}

a{
	text-decoration:none;
}

div{
	width: 648px;
	float: left;
	padding: 0 0.5em;
	word-wrap: anywhere;
	text-indent: -1.5em;
}
div.folder, 
div.README{
	float: none;
	padding: 0.5em 1em;
}

div#folder{
	width: 100%;
	float: none;
	display: block;
}
pre{
	white-space: pre-wrap;
	width: 640px;
}

a.dir::before{
	content:"📁";
	font-size:18px;
	padding-right: 1em;
	text-decoration:none;
}
a.text::before{
	content:"☛";
	font-size:18px;
	padding-right: 1em;
	text-decoration:none;
}
a.back::before{
	content:"BACK TO INDEX";
	font-size:18px;
	padding-right: 1.25em;
	text-decoration:none;
}
a.back{
	position: fixed;
	width:100%;
	background-color:#55acee;
	top:0;
	left:0;
	padding:0.2em 1.5em 0.1em;
	font-family: monospace;
	color: white;
}

.image{
	max-width: 100%;
}
.pdf {
	width:100%;
}
video {
	width:640px;
}
.filename{
	display:block;
	font-size:small;
	margin-top:0.5em;
}

figcaption {
	font-family: monospace;
	font-size: 12px;
	margin: 1em 0;
}

@media only screen and (max-width: 600px) {
	body{
		width:calc(100% - 2em);
	}
	div {
		width:calc(100% - 2em);
	}
	div a img{
		width:100%;
	}
}