* {
	padding: 0;
	margin: 0
}

body {
	color: #000;
	font-size: 14px;
	letter-spacing: 0;
	padding: 20px 20px 100px;
	background: #000;
	font-family: neue-haas-grotesk-display, sans-serif;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	overflow-x: hidden;
	flex-direction: column;
	align-content: space-between;
}

h1 {
	text-align: center;
	padding: 0 15px 15px;
	margin: 0
}

h2 {
	font-size: 16px;
	text-align: center;
	padding: 0 0 12px
}

div {
	display: block;
}

#site-header {
	margin-bottom: 20px;
}

.site-logo {
	width: 130px;
	line-height: 0;
}

.site-main {
	max-width: 900px;
	width: 100%;
	margin: auto;
}

.site-content {
	position: relative;
	background: #fff;
	width: 100%;
	padding: 15px;
	height: 65vh;
	max-height: 516px;
	overflow: auto;
	box-sizing: border-box;
}

#table-container {
	position: absolute;
    width: calc(100% - 30px);
    overflow: auto;
    height: calc(100% - 30px);
}

table {
	position: relative;
	border-spacing: 0;
	width: 100%
}

th {
	color: #61666c;
	cursor: pointer;
	padding: 15px !important;
	font-size: 14px;
	font-weight: 600;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	border-color: #e8e8e8;
	background: #f5f5f5;
	position: sticky;
	top: 0;
}

th:first-of-type {
	border-left-width: 1px;
}

th span {
	position: absolute;
    width: 15px;
    height: 17.5px;
    line-height: 17.5px;
    text-align: center;
	font-family: Helvetiva, sans-serif;
}

th small {
	font-size: 9px
}

td,
th {
	text-align: left;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}

a {
	text-decoration: none
}

td a {
	color: #61666d;
	display: block;
	padding: 15px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}

tbody td {
	border-style: solid;
	border-width: 0 1px 1px 0;
	border-color: #e8e8e8
}

th a {
	padding-left: 0
}

td:first-of-type a {
	background: url(./.images/file.png) no-repeat 10px 50%;
	padding-left: 35px
}

th:first-of-type {
	padding-left: 35px
}

td:not(:first-of-type) a {
	background-image: none !important
}

tr:nth-of-type(odd) {
	background-color: #fff
}

tr:hover td {
	background-color: #f5f5f5
}

tbody td:first-of-type {
	border-style: solid;
	border-width: 0 1px 1px;
	border-color: #e8e8e8
}

tr:last-child {
	border-bottom: none
}

table tr td:first-of-type a[href$=".jpg"],
table tr td:first-of-type a[href$=".png"],
table tr td:first-of-type a[href$=".gif"],
table tr td:first-of-type a[href$=".svg"],
table tr td:first-of-type a[href$=".jpeg"] {
	background-image: url(./.images/image.png)
}

table tr td:first-of-type a[href$=".zip"] {
	background-image: url(./.images/zip.png)
}

table tr td:first-of-type a[href$=".css"] {
	background-image: url(./.images/css.png)
}

table tr td:first-of-type a[href$=".doc"],
table tr td:first-of-type a[href$=".docx"],
table tr td:first-of-type a[href$=".ppt"],
table tr td:first-of-type a[href$=".pptx"],
table tr td:first-of-type a[href$=".pps"],
table tr td:first-of-type a[href$=".ppsx"],
table tr td:first-of-type a[href$=".xls"],
table tr td:first-of-type a[href$=".xlsx"] {
	background-image: url(./.images/office.png)
}

table tr td:first-of-type a[href$=".avi"],
table tr td:first-of-type a[href$=".wmv"],
table tr td:first-of-type a[href$=".mp4"],
table tr td:first-of-type a[href$=".mov"],
table tr td:first-of-type a[href$=".m4a"] {
	background-image: url(./.images/video.png)
}

table tr td:first-of-type a[href$=".mp3"],
table tr td:first-of-type a[href$=".ogg"],
table tr td:first-of-type a[href$=".aac"],
table tr td:first-of-type a[href$=".wma"] {
	background-image: url(./.images/audio.png)
}

table tr td:first-of-type a[href$=".html"],
table tr td:first-of-type a[href$=".htm"],
table tr td:first-of-type a[href$=".xml"] {
	background-image: url(./.images/xml.png)
}

table tr td:first-of-type a[href$=".php"] {
	background-image: url(./.images/php.png)
}

table tr td:first-of-type a[href$=".js"] {
	background-image: url(./.images/script.png)
}

table tr.dir td:first-of-type a {
	background-image: url(./.images/folder.png)
}