/* Basic Normalizations */

* {
  box-sizing: border-box;
}

/* removes the silly dotted outline on link clicks and makes it easier to hit the target on mobile*/
.header a, #scrollnavinfo a {
    outline: 0;
    display: inline-block;     
    position: relative;
    padding: 0.5em;     
    margin: -0.5em; 
}


/* Note: There are a few places where the "minimum width" is defined. This
is the minimum width that the website will be responsive down to. Below that,
it will just stay the same width. This should be updated everywhere it appears
if we change it!! */

/* General Settings */
body {
  background-color: #bfcccc;
  color: #666699;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 0.75em;
  padding: 0px;
  margin:0px;
}

/* general link behavior */
a {
  text-decoration:none;
  color: #666699;
}

/* using a media query stops this from being funky on mobile */
@media (hover) {
    a:hover {
	color: #fff;
    }
}


/* Styles related to the header */

/* The "sticky" style is how it stays locked to the top of the page */
.header {
  background: #bfcccc;
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  padding: 20px 25px 15px 25px;
  overflow: auto;
  top: 0;
  width: 100%;
  min-width: 320px;
}

/* Style for the main logo text (could be replaced with an image, etc.) */
.header h1 {
  font-size: 1.5em;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  letter-spacing: 0.5px;
  margin: 0px;
  padding:0px;
  margin-bottom:15px;
}

/* color and styling for name at top */
.header h1 a{
  text-decoration:none;
  color: #ff0099;
}

@media (hover) {
    .header h1 a:hover{
	text-decoration:none;
	color: #ffffff;
    }

}

/*Homepage*/

body.homepage {
    background-color:#00504f;
    color:#fff;
}

.header.homepage {
    background-color:#00504f;
}

.homepage ul.nav a, .homepage .infolink a, .homepage .newslink a, .homepage .creditlink a {
  color: #fff;
}

.homepage #news a, .homepage #info a, .homepage #credit a {
   color: #b5d5af; 
}

.homepage .active a, .homepage ul.nav a.active {
    color: #ff0099;
}

.header.homepage h1 a {
    color: #b5d5af;
}

@media (hover) {
    .homepage ul.nav a:hover, .homepage .infolink a:hover, .homepage .creditlink a:hover, .homepage .newslink a:hover, .homepage ul.nav a.active:hover, .header.homepage h1 a:hover {
	color: #b5d5af;
    }
}

.homepage #scrollnavinfo {
    display: block;
    overflow: scroll;
    height: 20vh;
    min-height: 150px; /* for tiny tiny viewports */
    flex-grow: 1;
    scrollbar-width: none; /* for firefox */
    -ms-overflow-style: none; /* for IE */
}

.homepage #scrollnavinfo::-webkit-scrollbar {
    display: none; /* for webkit browsers */
}

.homepage #scrollcontent {
    max-height: 100vw;
    flex-grow: 100; /* Only it grows until it hits max-height */
}

.newslink, .infolink, .creditlink {
    margin-bottom: 16px;
    width: 100%;
    font-weight: 800;
    letter-spacing: 0.5px;
}

#info, #news, #credit {
    margin-top: -5px; /*50px;*/
    display: none;
    margin-bottom: 20px;
}

#credit {
    margin-bottom: 30px;
}

@media (hover) {
    #news a:hover, #credit a:hover{
	color: #fff;
    }
}


/* This defines the look of the navbar links */

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.nav li {
  margin: 0 10px 5px 0;
  float:left;
}

ul.nav a {
  text-decoration:none;
  color: #666699;
  font-weight: 800;
  letter-spacing: 0.5px;
}

@media (hover) {
    ul.nav a:hover{
	color: #ffffff;
	
    }
    ul.nav a.active:hover{
	color: #ffffff;
    }

}

ul.nav a.active{
  color: #ff0099;
}





ul.nav li.lastnav {
    margin-right: 12.5px;
}

ul.nav li.preyears {
    margin: 0 20px 5px 0;
}

ul.nav li.archiveyear {
    margin-right: 15px;
}






/* Styling the basic layout for the non-single-image pages */


/* This is the top-level div that everything lives in */
#content{
    padding: 15px 25px 15px 25px;
    min-width:320px;
}

/* For Desktop */
@media only screen and (min-width: 501px) and (min-height: 401px) {  

  /* make the margins larger on screens that aren't teensy tiny.
     This is mostly an example of how to make a change like this */
  #content{
      padding: 25px 50px 25px 50px;
  }

  .header {
      padding: 40px 50px 20px 50px;
  }

}







/* Now the styles relating to the archive index page */



/* This creates the proper offset to account for the header when the
links are clicked. Don't futz with it unless you change the header 
height! I have made it so a little bit of the image above shows,
I think this makes the jump less disorienting */
.archivegrouping::before, .archivethumbbox::before {
  display: block; 
  content: " "; 
  margin-top: -175px;
  height: 175px;
  visibility: hidden; 
  pointer-events: none;
}

/* These divs are just here to make the "back to archive" behavior work as
expected. don't touch these styles! */
.archivethumbboxbox {
    float:left;
    width:100%;
    pointer-events: none;
}

.archivethumbbox a {
    pointer-events: auto;
}


/* This div groups images in the archive (by year). Doing this makes sure
that the sections of the archive stay separated from each other by line
breaks */
.archivegrouping::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

/* The text labels for each archive group */
.dates{
    margin-top: 35px;
    margin-bottom: 10px;
}

.firstdate {
    margin-top:0px;
}

.dates a{
  text-decoration:none;
  color: #fff;  
  font-weight: 400;
  text-decoration:none;
  font-size: 1.5em; 
}

/* This defines the style for the individual thumbnail images in the archive.
On mobile, this is: full width, with no defined height. */
.archivethumb {
  display:block;
  padding: 15px;
  object-fit:contain;
  width:100%;
  max-width:450px; /* this keeps the images reasonably sized on chonky but small screens which are still in mobile view */
  margin-left: auto;
  margin-right: auto;
}

li.lastnav::after {
    content: "";
    clear: both;
    float:left;
    display: table;
}



@media only screen and (min-width: 650px) {

  /* On desktop or tablets, we change the image size to be a fixed height,
   and whatever the width is for the particular image's aspect ratio*/
    
  .archivethumb {
     width:auto;
     height:300px;
     /* max-height: 300px;
     height: 33vw;*/
     max-width:100%;
     object-fit:contain;
  }

  .archivethumbboxbox {
      width: auto;
  }

      
}






/* Style for the single image view 8?


/* This box contains everything (header, infobox, and artwork),
and is set as a flex container and at the full display size. */

#flexcontainer {
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  width:100vw;
  height:100vh;
  position:absolute;
  min-width:320px;
  min-height: 300px;
}

/* Changes that should be made to the header when in this configuration */
#flexcontainer .header {
  position:static;
  width: 320px;
  flex-grow:0;
}

/* This box contains the navigation arrows as well as the info. */
#scrollnavinfo {
  padding: 25px 60px 25px 50px;
  display:flex;
  flex-wrap: wrap;
  width:320px
}


/* Now we have some css to help display the navigation arrows properly */

#leftarrow {
    width: 50%;
    text-align: left;
    padding-bottom: 25px;
}

#rightarrow {
    width: 50%;
    text-align: right;
    padding-bottom: 20px;
}

/* Make it easy to do both images or svgs for the arrows */
#leftarrow img, #leftarrow svg, #rightarrow img, #rightarrow svg {
    width: 35px;
}
/* This defines the region of the page where the caption will live. This
div is inside the scrollnavinfo */
#information {
    width:100%;
}

/* Margin for the title */

#title {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
}

/* Margin for medium, etc.. */

#medium {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

/* Margin for back */

#back {
    margin-top: 25px;
    margin-left: 0px;
}

#back a{
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* This container defines ther region of this page where the image will live,
which we mostly just want to be filling up the rest of the room */
#scrollcontent {
    width:calc(100% - 320px);
    text-align:center;
    height:100%;
    padding: 40px 50px 50px 20px;
}


#fillimgbox {
    width:100%;
    height:100%;
    position:relative;
    text-align:center;
}


/* A generic class to fill whatever container its in but preserve aspect ratio.
This is used to display the image inside the scrollcontent */
.fillimg {
  width: 100%;
  height:100%;
  object-fit: contain;
  top:0;
  bottom:0;
  left:0;
  right:0;
  position:absolute;
  margin:auto;
}



/* Things that need to be changed for mobile */ 
@media screen and (orientation: portrait), screen and (max-width: 550px) {


    /* Years get placed on newline by default in archive  */
    ul.nav li.preyears {
	margin: 0 0 0 0;
	clear:left;
    }

    #mobilesignal{
	display: inline;
    }
	
    /* minimum height for this configuration */
    #flexcontainer {
	min-height: 400px;
    }
    
    /* We place the scroll content before the info and set it to full width */
    #scrollcontent {
	order: 1;
	width: 100%;
	height: 0px;
	flex-grow: 1; /* This is what tells the browser that this one can be variable size */
	padding: 10px 50px 0px 50px;
    }

    /* The scrollnavinfo goes below the content, also at full width */
    #scrollnavinfo {
	order: 2;
	width: 100%;
	height:auto;
    }

    /* And we put the navigation arrows below the information */
    #leftarrow, #rightarrow, #back{
	margin-top: 20px;
	padding-bottom:10px;
    }

    #leftarrow {
	order: 1;
	width: auto;
		
    }

    #rightarrow {
	margin-left:25%;
	order: 2;
	width: auto;
    }

    #back {
	padding-top:3px; /* a hack for vertical alignment, don't kill me! */
	text-align: right;
	margin-right: 15px;
	order: 3;
	flex-grow: 1;
    }
	
    

}


/* and for very narrow mobile */
@media only screen and (max-width: 500px) {
    
    #scrollcontent {
	padding: 15px 25px 0px 25px;
    }

    #scrollnavinfo {
	padding: 15px 25px 15px 25px;
    }


    

}

/* for very short but wide mobile */
@media only screen and (max-height: 400px) and (orientation: portrait) {
    #scrollcontent {
	padding: 20px 25px 20px 25px;
    }
    
    #scrollnavinfo {
	padding: 15px 25px 15px 25px;
    }

}