*, *:before, *:after {
  box-sizing: border-box;
}

html {
	background-color: #f0f0f0;
	color: #211F20;
	font-size: 14pt;
	font-family: 'Barlow Semi Condensed', sans-serif;
	/*
		TODO: Attach Barlow font to project.
		Barlow Semi Condensed
	*/
}
/*body*/

#content {
    width:960px;
    margin:auto;
}

#home-button {
    display:flex;
    position:absolute;
    left:10px;
    top:10px;
    z-index:1;
}
#home-button a, #home-button div {
    text-decoration:none;
    color:white;
    margin:0;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0;
    color:#fff;
    text-decoration:none;
    border:2px solid rgba(255,255,255,.0);
    border-radius:2px;
    font-size:18px;
    letter-spacing:1px;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    background-color:#105CAA;
    transition:all .3s ease-out;
    padding:5px;
}
#home-button a:hover,#home-button a.has-tab-focus, #home-button a:focus  {
    transform:scale(1.1);
    background-color:#005CDA;
    border-color:yellow;
    box-shadow: 0 0 5px rgba(255,255,155,1);
}
#home-button:active {
    transform:scale(.95);
    background-color:#006CEF;
}
#home-button img {
    height:20px;
    width:auto;
    margin-right:5px;
}
#home-button a                          :focus  { 
    outline-offset: 2px; 
}

a:focus {
    outline-width: thin ;
    outline-color:yellow;
    outline-offset: 4px; 
    outline-style:solid;
}

button.soil-button:focus {
    
    outline-width: thin;
    outline-color:yellow;
    outline-offset: 0px; 
    outline-style:solid;
}
.screen-reader-only {       
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

.image-replace {
    line-height: 0;
    text-indent: -10000px;
    background-repeat: no-repeat;
    display:block;
}            
            .footer {
    font-family:'Lato', sans-serif;
    padding:10px;
}

.footer p {
    font-size:11px;
    margin:0 0 10px 0;
}

.footer .logos {
    display:flex;
    width:auto;
    align-items: center;
    justify-content: left;
    
}
.footer .logos img {
    height:auto;
    max-width:400px;
    margin:2px;
}

.credits-container, .glossary-container {
    position:relative;
    height:540px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background:url('images/credits-bg.jpg');
    background-size:cover;
    color:#211F20;
}
.credits {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-column-gap: 2em;
}

.credits-container h1 {
    font-style:italic;
    letter-spacing: .1em;
    margin:5px 0;
}
.credits dt {
    margin:18px 0 2px 0;
    letter-spacing: .01em;
    font-size:15px
}
.credits dd {
    margin:2px 0;
    font-family:Lato, sans-serif;
    font-size:16px;
    line-height:18px;
}

.credits-addendum {
  padding: 0em 2em;
  font-size: 15px;
}
.glossary-container {
    height:auto;
    background-image:none;
}
.glossary-container::after {
  content: "";
    background:url('images/credits-bg.jpg');
    background-size:cover;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.glossary-container h1 {
    font-style:italic;
    letter-spacing: .1em;
    margin:5px 0;
}

.glossary {
    padding: 1em 3em 3em 3em;
}

.glossary dd {
    margin:1px auto;
    line-height:1.5;
}
.glossary dt {
    font-weight:bold;
    margin-top:26px;
    font-size:130%;
    letter-spacing: .05em;
    margin-bottom:1px;
}

.link-button {
    display:flex;
    position:absolute;
    color:#fff;
    text-decoration:none;
    padding:5px;
    border:2px solid #fff;
    border-radius:2px;
    font-size:18px;
    letter-spacing:1px;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    background-color:rgba(0,0,0,.0);
    transition:all .3s ease-out;
    z-index:1;
}
.link-button#credits-button {
    right:10px;
    bottom:10px;
}

.link-button#glossary-home-button {
    left:10px;
    bottom:10px;
} 

.link-button:hover, .link-button.has-tab-focus, .link-button:focus  { 
    transform:scale(1.05);
    background-color:rgba(0,0,0,.2);
    border-color:yellow;
    box-shadow: 0 0 5px rgba(255,255,155,1);
    
}
.link-button:active{ 
    transform:scale(.95);
    background-color:rgba(0,0,0,.5);
}

/*SENTINEL*/

#SENTINEL {
	border: 2px solid #fff;
	padding: 0em;
	margin: 0;
	background-color: #054369;
	border-radius: 4px;
	position: relative;
	color: #fff;
    
}

#SENTINEL #INSTRUCTIONS {
	padding: 1em 1.5em 1em;
    background:#054369;
    width:960px;
}

#SENTINEL #INSTRUCTIONS h2 {
    font-size:18px;
    letter-spacing: .1em;
    font-weight:700;
    font-family:'Lato', sans-serif;
    margin:5px auto 10px;
}

#SENTINEL #INSTRUCTIONS p {
        font-size:15px;
    line-height:20px;
    font-family:'Lato', sans-serif;
    margin:0 auto 10px;
}