/* CSS Resource Document for: Army Sustainment Command   					*
!  Global classes should be defined here		  							*
*  The proponent agency for this source is AMAS-PC							*/

/* Define new font classes */
@font-face { font-family: "GI4"; font-display: swap; src: url("/Portals/54/Includes/fonts/G.I.-400.woff2") format('woff2'), url("/Portals/54/Includes/fonts/G.I.-400.ttf") format('truetype'); }
@font-face { font-family: "GI5"; font-display: swap; src: url("/Portals/54/Includes/fonts/G.I.-530.woff2") format('woff2'), url("/Portals/54/Includes/fonts/G.I.-530.ttf") format('truetype'); }
@font-face { font-family: "GI7"; font-display: swap; src: url("/Portals/54/Includes/fonts/G.I.-750.woff2") format('woff2'), url("/Portals/54/Includes/fonts/G.I.-750.ttf") format('truetype'); }

/* Define routine modifiers */
body {
	font-family: GI4; 
	background: #232323;
	background: -moz-linear-gradient(134.25deg, rgba(75,75,75,1) 0%, rgba(23,23,23,1) 35%, rgba(0,0,0,1) 75%, rgba(45,45,45,1) 100%);
	background: -webkit-linear-gradient(134.25deg, rgba(75,75,75,1) 0%, rgba(23,23,23,1) 35%, rgba(0,0,0,1) 75%, rgba(45,45,45,1) 100%);
	background: linear-gradient(134.25deg, rgba(75,75,75,1) 0%, rgba(23,23,23,1) 35%, rgba(0,0,0,1) 75%, rgba(45,45,45,1) 100%);
}
h1 { 
	font-family: GI7; 
	font-size: 36px; 
	text-transform: uppercase; 
}
h2 { 
	font: small-caps normal 28px GI7; 
}
h3 { 
	font-family: GI7; 
	font-size: 24px; 
}
h4 { 
	font-family: GI5; 
	font-size: 24px; 
}
h5 { 
	font-family: GI5; 
	font-size: 18px; 
}
strong { 
	font-family: GI7; 
}

/* What are the things we need on every page? */
.hero-bg { 
	display: none;
}
@media only screen and (min-width: 1164px) {
	.hero-bg {
		display: block;
		background: linear-gradient(to bottom, #000, #004) no-repeat center/cover;
		height: 250px;
	}
}
.hero-cover { 
	background: rgba(0, 0, 0, 0.5); 
	height: 100%; 
	width: 100%; 
	z-index: 1; 
	position: relative; 
	margin: none; 
	padding: none; 
	text-align: center; 
	display: table; 
}
.hero-txt { 
	display: table-cell; 
	vertical-align: middle; 
	padding: 0 8px;
	font-family: GI7;
	text-align: center;
	color: #FFF;
} 
	.hero-txt h1 { 
		color: #FFCE08; 
		font-size: 36px; 
	} 
	.hero-txt p { 
		font-size: 18px; 
	} 
.main-container {						/* This is if the content edges are too close to the edge */
	padding: 8px;
}
.ope {									/* This is for the footer since we're custom */
	height: 24px;
}
.global-text {
	width: 100%;
	text-align: center; 
	font-family: GI5; 
    font-size: 14px;
	color: #000;
	padding: 4px;
}
	.gt-high {
        background-color: #F00;
    }
    .gt-med {
        background-color: #FFCE08; 
    }
	.gt-low {
		background-color: #09F;
	}
	.gt-clear {
		background-color: #08CC08;
	}
.island-contact,
.infobox {
	width: 100%; 
    margin-left: auto; 
    margin-right: auto;
}
	.infobox th {
		border: 1px solid #FFCE08; 
		background: #3A423A; 
		color: #FFCE08; 
		font-family: GI7;
		margin-left: 12px; 
		padding: 8px;
	}
	.infobox td {
		background-color: #DDD;
		padding: 8px;
	}
	.island-contact th {
		border: 1px solid #FFCE08; 
		background: #3A423A; 
		color: #FFCE08; 
		font-family: GI7;
		margin-left: 12px; 
		padding: 8px;
	}
	.island-contact td {
		padding: 8px;
		font-size: 14px;
		font-family: GI4;
	}
		.island-contact td.more {
			border: 1px solid #FFCE08;
			color: #FFCE08;
			background: #3A423A;
			font-family: GI5; 
			text-transform: uppercase; 
			font-size: 14px; 
			text-align: right;
		}
	.island-contact tbody {
		background: #DDD;
	}
.resource-help {
	text-align: center;
}
	.resource-help h1 {
	    font-family: GI7; 
        font-size: 24px; 
	}
	.resource-help img {
		max-height: 36px;
		min-height: 36px;
		width: auto;
		max-width: 199px;
		padding: 4px 8px;
	}
.binline {
	display: inline-block;
}
.pinline {
	display: inline;
}

/* Things we need sometimes */
.dui-img {
	width: 150px; 
    height: auto;
}
/* Callout Boxes */
.subinfo-box {
	background: #DDD;
	border: 1px solid #3A423A;
	color: #232323;
	width: 99%;
	margin: auto;
	padding: 8px;
}
	.subinfo-box h1 {
		font-family: GI7;
		font-size: 18px;
	}
	.subinfo-box h2 {
		 font-family: GI5;
		 font-size: 14px;
	}
	.subinfo-box p {
		 font-family: GI4;
	}
	.subinfo-box strong,
	.sc-bold {
		 font-family: GI7;
	}
.info-table {
	font-size: 12px; 
    width: 98%; 
    margin-left: auto; 
    margin-right: auto; 
    border-spacing: 8px;
}
/* Unit & Command Crest "More Info" Image Sets */
.smallsig {
	width: 100%;
	font-size: 12px;
}
	.smallsig img {
		height: 75px;
	}
	.smallsig a {
		font-family: GI7;
		text-decoration: none;
	}
		.smallsig a:hover {
			font-family: GI7;
			color: #3A423A;
			text-decoration: none;
			border-bottom: 1px solid #FFCD01;
		}

/* Define the major overrides */
/* Sliders & Rotators */
.top-rotator,
.top-rotator .bottom {
	background: #fafafa;	/* This increases the contrast for Section 508 compliance on the text section */
}
	@media only screen and (max-width: 1164px) {
		.top-rotator .top { display: none; }
	}
	.top-rotator.slideshow .slideTitle { 
		font-family: GI7; 
    }
	.top-rotator a.slide-inner { 
		background-size: contain; 
		background-position: 50% 50%; 
	}
	.top-rotator .slideTitle {	/* This forces the use of the proper font classing for titles */
		color: #000;
		font-family: GI7;
		font-size: 24px;
		font-weight: regular;
	}
	.top-rotator .slideCaption {
		color: #000;			/* This assists with the contrast for S508 */
		font-family: GI5;		/* Lets bolden the text a bit to make it easier to see on the off white background */
	}
	.top-rotator .slideContainer {
		min-height: 660px;
	}
	.top-rotator-imagedistortion {
		width: auto !important;
		height: 100% !important;
	}
	.top-rotator a.page {
		background: #3A423A;
	}
	.top-rotator a.page:hover,
	.top-rotator a.page.activeSlide {
		background: #000;
		font-family: GI7;
		color: #FFCE08;
	}
/* Text areas and buttons */
html, button, input, select, textarea { 
	font-family: GI5; 
}
.df_Default .label,
.df_Default .section .header {
	font-family: GI7;
}
.df_Default .hint {
	font-family: GI5;
}
.df_Default .field {
	font-family: GI4;
}
/* Header */
.skin-title a, 
.skin-title a:hover { 
	text-decoration: none; 
}
.skin-title .title-text { 
	font: small-caps normal 36px GI7; 
}
.skin-title .subtitle-text { 
	font-family: GI7; 
}
.subtitle-text {
	font-size: 18px !important;
	letter-spacing: 6px;
}
.border-wrapper {
	background: rgba(0,0,0,0);
}
/* Sub Navigation */
.skin-breadcrumb,
.skin-breadcrumb-container a, 
.skin-breadcrumb-container a:visited, 
.skin-breadcrumb-container a:link { 
	font-family: GI5; 
}
.otnav ul ul {
	background: #fcfcfc;
	background: -moz-linear-gradient(0deg, rgba(252,252,252,1) 0%, rgba(221,221,221,1) 75%, rgba(185,185,185,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(252,252,252,1) 0%, rgba(221,221,221,1) 75%, rgba(185,185,185,1) 100%);
	background: linear-gradient(0deg, rgba(252,252,252,1) 0%, rgba(221,221,221,1) 75%, rgba(185,185,185,1) 100%);
}
/* Header & Footer */
.flinks {
	width: 100%;
}
	.flinks td {
		width: 50%;
		text-align: left;
		vertical-align: top;
	}
.flinks 
.footer { 
	color: #FFF;
}
	.footer .stitle {
		color: #FFCE08; 
		width: 100%; 
		border-bottom: 1px solid #FFF; 
		text-align: left; 
		font-family: GI7;
		font-size: 14px;
		text-transform: none;
	}
	.footer p {
		font-family: GI5;
		font-size: 12px;
	}
	.footer a {
		color: #FFF;
		transition: all 0.3s ease-in-out;
	}
		.footer a:hover {
			color: #FFCE08;
			text-decoration: none;
		}
	.footer img {
		filter: grayscale(100%);
		transition: filter 0.3s ease-in-out;
	}
		.footer img:hover {
			filter: grayscale(0%);
		}
.usm {
	text-align: center;
}
	.usm a {
		font-size: 36px;
	}
		.usm a:hover {
			font-size: 36px;
			color: #3A423A;
		}
	.usm p {
		font-size: 12px;
	}
	.usm strong {
		font-family: GI7;
	}
.skin-footer-content {	/* Adjusts the head padding of the footer to a fixed amount, since we don't use the seal. */
	padding-top: 24px;
}
.header_banner_container {
	background-color: #232323 !important;
}
/* We don't need everything that AFPIMS has in it to be displayed, so this removes elements that we don't need. */
.skin-footer-banner,	/* Overrides footer on some AFPIMS pages for VCL, note: this must be added elsewhere */
.skin-footer-seal,		/* Overrides the seal on each page...we know we're the Army... */
.skin-social-header,	/* These two override the "Staying Connected" Links, but need to be added elsewhere */
.skin-social-links,
.skin-footer-top,
.skin-footer-bottom {	
	content-visibility: hidden;
	display: none;
}
.skin-footer-background,
.skin-header-background {
	background-size: cover;
	background-image: none !important;
	background: rgba(0,0,0,0);
}