/* null margins and padding to give good cross-browser baseline */
html,body,div,caption,
h1,h2,hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img {
	border:none;
}

html, body {
	width:100%;
	height:100%;
}

body {
	display:-webkit-flexbox;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	font:normal 87.5%/150% "segoe ui",arial,helvetica,sans-serif;
	min-width:52em; /* for pre-CSS3 browsers */
	text-align:center; /* legacy IE 5.x centering */
}

body,
#pageHeader,
#footer {
	background:#036;
}

a,
a i {
	transition:all 0.3s;
}

.widthWrapper {
	max-width:90em;
	padding:0 1.5em;
	margin:0 auto;
}

.mainSection {
	max-width:72em;
}

* html .widthWrapper {
	/*
		IE6/earlier can't do min/max, so shove a fixed width at them. OH WELL!
		People still using that should be thankful I even BOTHER.
	*/
	width:52em;
}

.heightWrapper {
	background:#FFF;
	background: -moz-linear-gradient(top, #E0F0FF 0%, #F8FCFF 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #E0F0FF), color-stop(100%, #F8FCFF));
	background: -webkit-linear-gradient(top, #E0F0FF 0%, #F8FCFF 100%);
	background: -o-linear-gradient(top, #E0F0FF 0%, #F8FCFF 100%);
	background: -ms-linear-gradient(top, #E0F0FF 0%, #F8FCFF 100%);
	background: linear-gradient(to bottom, #E0F0FF 0%, #F8FCFF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E0F0FF', endColorstr='#F8FCFF', GradientType=0 );
	-webkit-flex:1 0 auto;
	-ms-flex:1 0 auto;
	flex:1 0 auto;
}

#pageHeader,
.heightWrapper,
.subSection {
	clear:both;
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats legacy IE */
}

#pageHeader {
	box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
}

#footer {
	box-shadow:0 -0.125em 0.5em rgba(0,0,0,0.5);
}

#pageHeader .widthWrapper {
	text-align:left;
}

h1 {
	float:left;
	display:inline; /* prevent oddball IE margin doubling */
	position:relative;
	padding-right:102px; /* == .logo width */
	margin-right:0.25em;
	font:bold italic 250%/110% "segoe ui",arial,helvetica,sans-serif;
}

h1 a {
	display:block;
	padding:0.4em 0.25em 0.4em 0;
	text-decoration:none;
	text-transform:uppercase;
	color:#FFF;
	text-shadow:
		0 -1px 2px #000,
		0 -1px 2px #000,
		2px 0 3px #000,
		-2px 0 3px #000;
}

h1 a:active,
h1 a:focus,
h1 a:hover {
	text-shadow:
		0 0 3px #24F;
}

h1 small {
	display:block;
	text-transform:none;
	font:bold 58%/110% "segoe ui",arial,helvetica,sans-serif;
}

h1 a span,
h1 a small {
	color:#BDF;
}

h1 a .logo {
	position:absolute;
	top:50%;
	right:0;
	margin-top:-32px;
	width:102px;
	height:64px;
	background:url(h1LogoLegacy.png) 0 0 no-repeat;
	text-indent:-999em;
}

#mainMenuCheckbox {
	position:absolute;
	left:-999em;
}

#mainMenu {
	list-style:none;
	float:right;
	max-width:20em;
	padding-top:0.9em;
	margin:0;
	text-align:right;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	display:inline-block;
	width:6.25em;
	padding:0.25em 0 0.3em;
	margin:0 0 0.75em 0.15em;
	text-decoration:none;
	text-align:center;
	text-transform:uppercase;
	color:#FFF;
	background:#359;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
	-webkit-box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
	box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
	text-shadow:
		0.25em 0 0.5em rgba(0,0,0,0.25),
		-0.25em 0 0.5em rgba(0,0,0,0.25);
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background:#148;
	-webkit-box-shadow:0 0 0.25em rgba(0,0,0,0.2);
	box-shadow:0 0 0.25em rgba(0,0,0,0.2);
	text-shadow:
		0.25em 0 0.5em #000,
		-0.25em 0 0.5em #000;
}

#mainMenu a.current {
	background:#48C;
	-webkit-box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
	box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
}

#contentWrapper {
	float:left;
	width:100%;
}

#content {
	padding:1em 17em 0 0;
}

#extras {
	float:left;
	width:16em;
	margin-left:-16em;
	padding-top:1em;
}

.subSection {
	background:#F8FCFF;
	background:rgba(255,255,255,0.85);
	margin-bottom:1em;
	border:1px solid #CDE;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}

#content .subSection {
	overflow:hidden;
}

#extras .subSection {
	text-align:center;
	padding:0.75em 1em 1em;
}

.subSection h2,
.tagList caption {
	padding-bottom:0.66em;
	font:bold 125%/120% "segoe ui",arial,helvetica,sans-serif;
	color:#048;
}

.subSection h2 a {
	text-decoration:none;
}

#footer {
	flex-shrink:0;
	padding:1em 0;
	letter-spacing:0.05em;
	text-align:left;
	color:#FFF;
	border-top:2px solid #000;
	text-shadow:
		1px 0 3px rgba(0,0,0,0.5),
		-1px 0 3px rgba(0,0,0,0.5);
}

#footer .social {
	float:right;
	list-style:none;
	padding-top:1.75em;
}

#footer .social li {
	display:inline;
}

#footer .social a {
	position:relative;
	float:right;
	overflow:hidden;
	width:32px;
	height:32px;
	margin:-16px 0 0 8px;
	text-align:center;
	vertical-align:bottom;
	font-size:100%; /* prevent IE and FF reverse inheritance bugs */
}

#footer .social a span {
	vertical-align:middle;
	font:normal 9px/12px arial,helvetica,sans-serif;
}

#footer .social a span span {
	display:block;
}

#footer .social a i {
	position:absolute;
	top:0;
	left:0;
	width:32px;
	height:32px;
	-webkit-border-radius:1.5em;
	border-radius:1.5em;
	-webkit-box-shadow:0 0.25em 0.75em rgba(0,0,0,0.75);
	box-shadow:0 0.25em 0.75em rgba(0,0,0,0.75);
	background-image:url(socialIconsLegacy.png);
}

#footer .social a:active i,
#footer .social a:focus i,
#footer .social a:hover i {
	-webkit-box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
	box-shadow:0 0.125em 0.5em rgba(0,0,0,0.5);
}

#footer .social .mail a i {
	background-color:#999;
	background-position:top center;
}

#footer .social .mail a:active i,
#footer .social .mail a:focus i,
#footer .social .mail a:hover i {
	background-color:#777;
}

#footer .social .facebook a i {
	background-color:#07E;
}

#footer .social .facebook a:active i,
#footer .social .facebook a:focus i,
#footer .social .facebook a:hover i {
	background-color:#06C;
}

#footer .social .googlePlus a i {
	background-color:#D44;
	background-position:center left;
}

#footer .social .googlePlus a:active i,
#footer .social .googlePlus a:focus i,
#footer .social .googlePlus a:hover i {
	background-color:#F44;
}

#footer .social .twitter a i {
	background-color:#0AB;
	background-position:bottom left;
}

#footer .social .twitter a:active i,
#footer .social .twitter a:focus i,
#footer .social .twitter a:hover i {
	background-color:#0CD;
}

#bestViewed {
	padding-bottom:1em;
}

#bestViewed img {
	display:block;
	width:100%;
	height:auto;
	margin:0 auto;
	box-shadow:0 0.25em 0.75em rgba(0,0,0,0.5);
}

/* start JDIR CSS */

table {
	border-collapse:collapse;
	width:100%;
}

caption {
	font:bold 125%/120% "segoe ui",helvetica,sans-serif;
	padding:0.5em 0;
	color:#040;
	-webkit-border-radius:0.4em 0.4em 0 0;
	border-radius:0.4em 0.4em 0 0;
}

thead,
tfoot {
	font:bold 100%/150% "segoe ui",helvetica,sans-serif;
}

tfoot {
	font-weight:normal;
}

tbody {
	font:normal 100%/150% consolas,"courier new",courier,monospace;
}

th,
td {
	text-align:center;
	padding:4px 0.75em;
	vertical-align:middle;
}

thead th,
tfoot td {
	padding:0.4em 0;
	background:#036;
	color:#FFF;
}

thead th.filename {
	text-align:left;
	padding-left:28px;
	text-indent:0.4em;
}

thead th a,
thead th a:visited {
	display:block;
	text-decoration:none;
	color:#FFF;
}

thead th a:active,
thead th a:focus,
thead th a:hover {
	color:#DEF;
	text-shadow:0 0 4px #08F;
}

tfoot td {
	padding:0.4em 0.5em;
	text-align:left;
}

tfoot div {
	float:right;
}


tbody th {
	padding:2px 0.5em 2px 4px;
	text-align:left;
	word-wrap:break-word;
}

tbody th span {
	display:inline-block;
	font-size:1px; /* prevent IE minimum size screwups */
	width:20px;
	height:24px;
	margin-left:4px;
	background:url(fileIcons.png) 0 0 no-repeat;
	vertical-align:bottom;
}

tbody th a {
	display:block;
	text-decoration:none;
	word-wrap:break-word;
	color:#369;
}

tbody th a:visited {
	color:124;
}

tbody th a:active,
tbody th a:focus,
tbody th a:hover {
	color:#48F;
}


tbody th b {
	display:inline-block;
	font-size:1px;
	width:8px;
	margin-right:-8px;
}

td.size {
	text-align:right;
}

tbody td {
	width:1%;
	white-space:nowrap;
}

tbody td,
tbody th {
	background:#FFF;
	background:rgba(255,255,255,0.8);
	border-bottom:1px solid #DEF;
}

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td {
	background:#DEF;
	background:rgba(0,16,32,0.03);
}

.icon_DIRUp,
.icon_DIR,
.icon_EXE,
.icon_COM,
.icon_MSI {
	color:#00F;
}

.icon_JPG,
.icon_JPEG,
.icon_PNG, 
.icon_BMP,
.icon_PCX,
.icon_GIF {
	color:#0048;
}

.icon_PAS,
.icon_PP,
.icon_HTML,
.icon_PHP,
.icon_JS,
.icon_C,
.icon_H,
.icon_PDF {
	color:#C00;
}

.icon_ZIP,
.icon_RAR,
.icon_7Z,
.icon_ARC,
.icon_GZ,
.icon_TAR,
.icon_ARJ,
.icon_MHT {
	color:#C60;
}

.icon_TXT th span {
	background-position:0 -24px;
}

.icon_DIR th span {
	background-position:0 -48px;
}

.icon_DIRUp th span {
	background-position:0 -48px;
}

.icon_JPG th span,
.icon_JPEG th span,
.icon_PNG th span, 
.icon_BMP th span,
.icon_PCX th span,
.icon_GIF th span {
	background-position:0 -72px;
}

.icon_PAS th span,
.icon_PP th span,
.icon_HTML th span,
.icon_HTM th span,
.icon_PHP th span,
.icon_JS th span,
.icon_C th span {
	background-position:0 -96px;
}

.icon_CSS th span,
.icon_H th span {
	background-position:0 -120px;
}

.icon_ARC th span {
	background-position:0 -144px;
}

.icon_ZIP th span,
.icon_ARJ th span,
.icon_MHT th span {
	background-position:0 -168px;
}

.icon_RAR th span {
	background-position:0 -192px;
}

.icon_7Z th span {
	background-position:0 -216px;
}

.icon_COM th span {
	background-position:0 -240px;
}

.icon_PDF th span {
	background-position:0 -264px;
}

.icon_GZ th span,
.icon_TAR th span {
	background-position:0 -288px;
}

.icon_EXE th span,
.icon_MSI th span {
	background-position:0 -312px;
}

@media (min-width:1px) { /* sneaky trick for targeting CSS3 browsers */
	h1 {
		padding-right:3em;
	}
	h1 a .logo {
		margin-top:-1em;
		width:3em;
		height:2em;
		background:url(h1Logo.png) 0 0 no-repeat;
		background-size:100%;
	}
	.subSection {
		border:0;
		-webkit-box-shadow:
			0px 0.25em 1em rgba(0,0,0,0.3);
		box-shadow:
			0px 0.25em 1em rgba(0,0,0,0.3);
	}
	pre {
		border:0;
		-webkit-box-shadow:
			0px 1px 3px rgba(0,32,64,0.4),
			inset 0 32px 128px #F0F8FF;
		box-shadow:
			0px 1px 3px rgba(0,32,64,0.4),
			inset 0 32px 128px #F0F8FF;
	}
	#footer .social a {
		float:none;
		display:inline-table;
		width:3.5em;
		height:3.5em;
		margin:-1.75em 0 0 -0.5em;
		font-size:100%; /* prevent IE and FF reverse inheritance bugs */
	}
	#footer .social a span {
		display:table-cell;
	}
	#footer .social a i {
		position:absolute;
		top:0.5em;
		left:0.5em;
		width:2.5em;
		height:2.5em;
		background-image:url(socialIcons.png);
		background-size:7.5em 7.5em;
		-webkit-border-radius:1.5em;
		border-radius:1.5em;
	}
}

@media (max-width:52em) {
	body {
		min-width:192px;
	}
	#contentWrapper,
	#extras {
		float:none;
		width:auto;
		margin:0;
	}
	#content {
		padding:0;
	}
	.mainSection {
		padding:0;
	}
	.subSection {
		padding:0;
		margin:0 0 1em;
		border-radius:0;
		border-bottom:2px solid #000;
	}
	#extras .subSection {
		padding:0.5em 0.5em 1em;
	}
	#bestViewed {
		margin:0 auto;
		max-width:16em;
	}
}

@media (max-width:45em) {
	h1 {
		float:none;
		padding:0;
		margin:0;
	}
	h1 a {
		position:relative;
		width:11em;
		overflow:hidden;
		padding:0.25em;
		margin:0 auto;
	}
	#mainMenu {
		float:none;
		max-width:99em;
		padding:0.5em 0 0;
		margin:0 auto;
		text-align:center;
	}
	#mainMenu a {
		width:auto;
		padding:0.75em 1.5em;
		margin:0 0.2em 0.75em;
	}
}

@media (max-width:38em) {
	#mainMenu {
		max-width:24em;
	}
	.trailingLogo,
	.leadingImg,
	.trailingImg,
	.leadingPlate,
	.trailingPlate {
		float:none;
		margin:1em;
	}
}

@media (max-width:30em) {
	h1 a {
		width:auto;
		text-align:center;
	}
	h1 a .logo {
		display:none;
	}
	.iconTrailing {
		display:none;
	}
	table {
		border-collapse:collapse;
	}
	thead,
	thead th,
	tbody,
	tbody th,
	tbody .directory th,
	caption {
		display:block;
	}
	thead:before {
		display:block;
		content:"Sort By";
		background:#048;
		color:#FFF;
		padding:0.5em;
	}
	thead tr,
	tbody tr {
		width:100%;
		display:flexbox;
		display:-webkit-flex;
		-webkit-flex-wrap:wrap;
		-webkit-flex-direction:row;
		-webkit-align-self:stretch;
		display:flex;
		flex-flow:row wrap;
	}
	thead th.filename,
	thead th {
		padding:0;
		flex:1 1 50%;
		background:#024;
	}
	thead tr {
		padding:0.25em 0.25em 0 0;
		background:#024;
	}
	thead a {
		padding:1em 0.25em !important;
		margin:0 0 0.25em 0.25em;
		background:#036;
	}
	tfoot td {
		text-align:center;
	}
	tfoot div {
		float:none;
	}
	tfoot b:before {
		content:"";
		display:block;
	}
	tbody th {
		flex:100%;
		padding-top:0.5em;
		border-top:solid #ACE;
		border-width:1px 0 0;
	}
	tbody td {
		flex:1 1 auto;
		text-align:right;
		border:0;
	}
	tbody td.size {
		text-align:left;
	}
	tbody td.size:before {
		content:"Size: ";
	}
	thead a {
		display:block;
		padding:0.25em 0.5em;
		text-align:center;
	}
	thead th a:hover {
		background:#048;
	}
	tbody td.extension,
	tbody .directory td {
		display:none !important;
	}
}

@media (max-width:20em) {
	h1 {
		font-size:180%;
	}
}