/* styles.css
 * Better styling for of Nginx FancyIndex page
 * © 2015-17, Lilian Besson (Naereen) and contributors,
 * open-sourced under the MIT License, https://lbesson.mit-license.org/
 * hosted on GitHub, https://GitHub.com/Naereen/Nginx-Fancyindex-Theme
 * modified by The Dark Tangent 2024
 */

@font-face {
    font-family: 'Cascadia';
	src: url('/fancyindex/cascadia-webfont.woff2') format('woff2');
    font-display: swap;
}
* html {
        height: 100%;
}

html {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("/fancyindex/media-header.webp"), url("/fancyindex/background.webp");
    background-repeat: no-repeat, repeat;
    background-position: top center, top left;
    font-family: 'Cascadia', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    color: aliceblue;
    line-height: 1.5em;
}
header {
    display: flex;
    justify-content: center;
    align-content: center;
    min-height: 185px
} 

header h1 {
    display: none;
}
header h2 {
    color: white;
}

label {
    display:none;
}

.header-logo {
    padding: 0 0 0 60px

}

.logo-header h2, .logo-header h4{    
    margin: 0 auto;
    text-align: center
}

a {
	color: lightskyblue;						/* Text color of file names */
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a.clear, a.clear:link, a.clear:visited {
	color: #666;
	padding: 2px 0;
	font-weight: 400;
	font-size: 14px;
	margin: 0 0 0 20px;
	line-height: 14px;
	display: inline-block;
	border-bottom: transparent 1px solid;
	vertical-align: -10px;
	-webkit-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}

input {
	margin: 0 auto;
	vertical-align: middle;
	overflow: visible;
	font-family: 'Cascadia';					/* font-family: 'ORCA', sans-serif; */
	font-weight: 300;
	display: inline-block;
	height: 20px;						/* [20] Height of the search box */
	padding: 4px 32px 4px 6px;				/* The padding inside the box for the text */
	margin-bottom: 9px;
	font-size: 14px;
	line-height: 20px;
	color: #333333;						/* Color for ? */
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 196px;
	background-color: #fff;					/* [fff] Color for ? */
	border: 1px solid #0A7985;				/* Outline color of search box */
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border linear .2s,box-shadow linear .2s;
	-o-transition: border linear .2s,box-shadow linear .2s;
	transition: border linear .2s,box-shadow linear .2s;
}
input:focus {
	outline: 0;
	border-color: rgba(0,0,0,0.8);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.6);
}
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

#skiptocontent a {
  padding: 6px;
  position: absolute;
  top: -40px;
  left: 0px;
  color: white;
  border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background: transparent;
  -webkit-transition: top 1s ease-out, background 1s linear;
  transition: top 1s ease-out, background 1s linear;
  z-index: 100;
}
#skiptocontent a:focus {
  position: absolute;
  left: 0px;
  top: 3px;
  background: #222;
  outline: 0;
  -webkit-transition: top .1s ease-in, background .5s linear;
  transition: top .1s ease-in, background .5s linear;
}

header nav {
    margin-top: 0;
    width: 100%
}


#header-md {
    background-color: rgba(0,0,0,0.5);					/* [0A7985] Background color for HEADER.md*/
    margin: -10px auto 15px;					/* Move the HEADER.md block up 40px */
    border-radius: 10px;					/* rounded corners for HEADER.md */
    box-shadow: #000 1px 1px 2px;				/* drop shadow for HEADER.md */ 
    display: grid;
    grid-template: 1fr / 1fr 3fr;
    grid-gap: 15px;
    font: .8em 'Cascadia', Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    color: #fff;
    min-height: 10px;	
    width: 90%/* [150px] */
}

#header-md h2, #header-md p {
    padding: 0;
    margin: 0;							/* [0] */
}

#header-md h2 {
    padding: 5px 0 10px;
    font-family: 'Cascadia';
        
}

#header-md p {
}

.left, .right {
    padding: 14px;
}

.left {							/* The left image in the HEADER.md box */
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.right {							/* The rights side of the HEADER.md box */
}

.scale {
    max-width: 85%;
    height:auto;
    margin: 10px 15px 0;					/* [10 15 0] */	
}


#search {
	color: #000000;					/* [000000] Font color inside the search box */
	background-color: lightskyblue;			/* [61EA53] Background color of the search box */
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 250px;
	margin-top: 0px;				/* [10] Space above the search box */
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
	-webkit-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}

input::-webkit-input-placeholder {
    color: #000 !important;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #000 !important;  
}

input::-moz-placeholder {  /* Firefox 19+ */
    color: #000 !important;  
}

table {
	border-collapse: collapse;
	font-size: 0.9em;
	min-width: 260px;
	margin: 10px 14px;	/* [20] Space below the search box */
}

tr {
	outline: 0;
	border: 0;
}
tr:hover td {
	color: #FFFFFF;					/* [FFFFFF] Color of file listings size and date text when you hover over it */
	background: #3D4351;				/* [3D4351] Background of text when you hover */
}
tr td:first-of-type {
	padding-left: 0;				/* [10] Padding for file listings */
	padding-right: 20px;
}
tr.parent a {
	color: #9099A3;					/* [9099A3] ? */
}

th {

	text-align: left;
	font-size: .75em;
	padding-right: 10px;
}
th + th {
	width: 5%;
}
th + th + th + th {
	width: 5%;
}

td {
	padding: 5px 0;
	outline: 0;
	border: 0;
	border-bottom: 1px solid #edf1f5;
	vertical-align: middle;
	text-align: left;
	-webkit-transition: background 300ms ease-in;
	-ms-transition: background 300ms ease-in;
	-o-transition: background 300ms ease-in;
	transition: background 300ms ease-in;
}
td:last-child,th:last-child {
	text-align: right;
	padding-right: 0;
}
td a {
	display: block;
}

table#list {
    max-width: 1280px;
    min-width: 260px;
}

.size {
    font-size: .8em
}

.date {
    font-size: .8em
}

.parent a:hover {
	color: #2a2a2a;				/* [2a2a2a] */
}

menu {
	font-size:12px;
	text-align:center;
}

menu a {
	text-decoration: underline;
	color:#000000;				/* [#000000] */
}



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




/* ========================== from infocon media-styles.css ================== */


.scale {
    max-width:100%;
    height:auto;
}

a {
        text-decoration: none;
        outline: none;
        border: none;
        text-shadow: black .7px .7px .7px;
}



a:hover {
        color: #FFFFFF;						/* [000000] Color when overing over file listings text */
}

img {
        border: none;
}

h1, h2, h3, h4, h5, h6 {
        line-height: 1.3em;
        letter-spacing: -.02em;
        color: #ffffff;
        padding: 15px 0 0 0;;
        margin: 0 0 0 20px;
        z-index: 0;
        text-shadow: black 1.5px 1.5px 1.5px;
}

h1 {
        font-size: 2.5em;
        font-weight: 500;
}

h2 {
        font-size: 1.6em;
        font-weight: 800;
}

h3 {
        font-size: 1.55em;
        font-weight: 500;
}

h4 {
        font-size: 1.2em;
}

h5 {
        font-size: .95em;

}

h6 {
        font-size: .8em;
}

strong {
        color: #ffffff;
        text-shadow: black .7px .7px .7px;
}

/* END TAGS */

/* BEGIN CLASS SELECTORS */

.container {
        margin: 0 auto;
        width: 100%;						/* [100%] Width of the overall display area */
        max-width: 1280px;
        min-width: 260px
}

/* END CLASS SELECTORS */

.soc-icon-box {
    width: 100%;
    height: 30px;
    margin: 20px 0;    
    
    
}
.socIcon {
    margin: 0 5px;
    height: 30px;
    width: 30px;
}

/* BEGIN ID SELECTORS */

#header {
        padding: 0;
        margin: 0 auto;
        z-index: 10;
}


#wrapper {
        padding-top: 6px;
        z-index: 1000;
}

.logoTitle {
    height: 100%;
    min-height: 200px;
        margin: 0 auto;
        top: 0;
}

.logo {
    min-width: 200px;
    margin: 0 auto;
    padding: 0 0 0 15px;
}

.logo-left {
    margin-left: 100px;
}

.page-title {
}

nav {
    display: grid;
    grid-template: 1fr 1fr / 1fr;
    margin: 0;
    width: 100%;
    font-size: .9em;
}

.nav {
        margin: 10px;
        background-color: rgba(0,0,0,0.80);
        padding: 10px 30px;
        border-radius: 20px;
        list-style-type: none;
        text-align: center;
}

.nav li {
        display: inline-block;
}

section.page-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

section.changeLog {
        margin: -75px auto 0;					/* [10px] Padding above the Recent Additions box */
        min-height: 55px;
}

.changeLog h3 {
        font-size: .9em;
        padding: 10px 15px 15px 10px;				/* [10 15 15 10] Padding space above "Recent Aditions" text, ?, height of "recent Additions" above the box, ? */
        margin: 0;
        color: #61EA53;
        text-align: left;
        z-index: 0;
}

.changeLog p {
        background-color: #000;
        font-size: .65em;
        border-radius: 10px;
        padding: 3%;
        z-index: 0;
        margin-top: -15px;					/* -15px */
        line-height: 1.3em
}

#content {
        background: rgba(0,0,0,0.40);
        width: 100%;
        margin: 0 auto;
        padding: 0;
        z-index: 5;
        border-radius: 10px;
}

#content p {
    position: relative;
        margin: 10px 0 5px 15px;
        padding: 0 15px 10px 10px;
        z-index: 2;
        width: 100%;
        max-width: 93%;
}

#content h4 {
        padding-bottom: 0;
        margin-bottom: 0;
}


/* -----Add----- */

#content hr {
        color: #333366;
        background-color: #333366;
        border-color: #333366;
        border-style: none;
        height: 2px;
        text-align: left;
        margin: 0 20px 10px 0;
}



.clear {
        clear: both;
}

h1.breadcrumb {
        font-family: 'Cascadia', monospace;
        font-size: 1em;
	text-align: left;
        padding-left: 0;
        margin: 0 0 10px 14px;
        }

a.homeLink {
        font-family: 'Cascadia', monospace;
        font-size: 1em;
        margin-top: 10px;
}

.webBanner {
        display: block;
        width: 100%;
        max-width: 150px;
        margin: 20px auto;
}

.supImage {width: 100%; max-width: 325px; border-radius: 10px; margin: 0 25px}

.floatLeft {float: left;}



@media only screen and (max-width:768px){
    
body {
    background-image: url("/fancyindex/media-header-768.webp"), url("/fancyindex/background.webp");
    background-repeat: no-repeat, repeat;
    background-position: top center, top left;
}

nav {
    padding-top: 0px;
    margin: 0 10px
        }
    

header {
    display: flex;
    justify-content: center;
    align-content: center;
    min-height: 185px
} 
    
    
.header-logo {
    padding: 0 0 0 55px

}
    
th + th {
	width: 3%;
}
th + th + th + th {
	width: 3%;
}
    
table {
	font-size: .9em;
    padding: 10px 5px;
}

footer {
    display: flex;
    justify-content: center;
    align-content: center;
	font-size:12px;
	text-align:center;
    padding: 20px 0;
    margin: 0 auto 20px;
}

}

@media only screen and (max-width:480px) {
    
body {
    background-image: url("/fancyindex/media-header-480.webp"), url("/fancyindex/background.webp");
    background-repeat: no-repeat, repeat;
    background-position: top center, top left;    
}

.header-logo {
    padding: 0;
}
}