/* Colours used in this interface are as described below. Note that when this was done (October 2019) Stefan attempted to follow the University of
   Illinois brand guidelines at https://brand.illinois.edu/. Unfortunately though those guidelines seem to be a work in progress, and are not
   really being followed by any of the other U. of Illinois websites (e.g. I found sites using dozens of slight variations on the RGB codes
   for the official blue and orange brand colours). Nor was there any real consistency between the various different U. of Illinois websites,
   or any consistent use of specific fonts. So I've tried to stay as near as possible to the current guidelines, but have also borrowed from
   other U. of Illinois websites, most of which don't seem to be following the official guidelines.

     Dark blue = #13294b (the "official" blue, according the brand guidelines).
     Slightly less dark blue = #17325b (used in the "blog" theme for the brand.illinois.edu site).
     Orange = #e84a27 (the "official" orange, according to the brand guidelines).

   Bootstrap has been modified for this collection so both the "primary" and "warning" colors have been changed to Illinois orange (#e84a27).
*/

/* Override occurences of "primary bootstrap colour" that appear in veridian.css. This basically means replacing all the occurences of #4f6f19 in
   veridian.css with #e84a27. */

a:hover svg, button:enabled:hover svg
{
  fill: #b02f13;  /* Bootstrap's "brand-primary" colour, darkened by 15% */
}

.btn-primary, .btn-primary:hover
{
  color: white;
}

/* ---- Main banner styles (excluding the main navigation bar but including the "collapsed" navigation controls that appear on small screens) ---- */

#header
{
  background-color: #13294b;
}

div#headertopcell
{
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Same width as the user links */
div#illinois-banner-cell
{
  width: 145px;
}

div#headertopcell img
{
  width: 50px;
}

div#headertopcell a:hover
{
  text-decoration: none;
}

/* Must be centered on the screen - Small Graphic Change Request for IDNC (2022/09/01) */
div.illinois-banner-text
{
  text-align: center;
}

div.illinois-banner-text a
{
  text-decoration: none;
}

div.illinois-banner-text p
{
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 4px;
  margin: 0;
}

div.illinois-banner-text p.big
{
  font-size: 1.5rem;
  margin: 0.25rem 0;
}

div#userlinks
{
  text-transform: uppercase;
}

div#userlinks a
{
  color: #fff;
  font-size: 0.75rem;
}

div#userlinks a:hover
{
  text-decoration: none;
  color: #e84a27;
}

div#userlinks a.loginlink,
div#userlinks a.logoutlink
{
  margin-left: 1rem;
}

/* Override "flex:2" that's set in veridian.css */
div#navbarcollapsed
{
  flex: initial;
}

/* Hide the "down" arrow beside the burger icon. */
div#navbarcollapsed .dropdown-toggle::after
{
  display: none;
}

/* Increase the size of the burger icon and change its color. */
div#navbarcollapsed a.dropdown-toggle svg.touchclickable
{
  fill: #fff;
  height: 3.5rem;
  width: 3.5rem;
}
div#navbarcollapsed a.dropdown-toggle:hover svg.touchclickable
{
  fill: #e84a27;
}

@media (max-width: 700px)
{
  /* Same width as the navbar collapsd */
  div#illinois-banner-cell
  {
    width: 64px;
  }

  /* Hide the userlinks completely, so that the compressed navigation bar rides up against the right side of the screen */
  div.userlinksdiv
  {
    display: none;
  }
}

/* Media queries to adjust the main banner on small screens */
@media (max-width: 550px)
{
  div#headertopcell img
  {
    margin-right: 0.5rem;
    width: 40px;
  }
  div.illinois-banner-text p
  {
    font-size: 0.75rem;
  }
  div.illinois-banner-text p.big
  {
    font-size: 1rem;
  }
  div#navbarcollapsed a.dropdown-toggle svg.touchclickable
  {
    height: 2.5rem;
    width: 2.5rem;
  }
}
@media (max-width: 350px)
{
  div.illinois-banner-text p.big
  {
    font-size: 0.9rem;
  }
}

/* ---- Main navigation bar styles (but not the "collapsed" version). ---- */

div#navbar
{
  width: 100%; /* Navbar entries are spread out evenly */
  background-color: #17325b;
}
ul#navbarentries li.nav-item
{
  flex-grow: 1;
  text-align: center;
}
ul#navbarentries a.nav-link
{
  color: #fff;
}

ul#navbarentries a.nav-link.active,
ul#navbarentries a.nav-link:hover
{
  color: #13294b;
  background-color: #fff;
}

/* Adjust main navigation a little at smaller/intermediate screen sizes, to ensure it doesn't wrap */
@media (max-width: 800px)
{
  ul#navbarentries a.nav-link
  {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ---- Footer styles ---- */

div#footercontent
{
  align-items: start;
  padding: 0.5rem;
  background-color: #13294b;
  color: #fff;
  min-height: unset;
}

div#footercontent > div
{
  text-align: center;
  width: 33%;
}

footer#footer a
{
  text-decoration: none;
  color: #fff;
}

footer#footer a:hover
{
  color: #e84a27;
}

div.illinois-footer-column1
{
  order: 1;
}

div.illinois-footer-column1 p
{
  margin-bottom: 0px;
  font-size: 0.9rem;
}

div.illinois-footer-column2
{
  order: 2;
}

div.illinois-footer-column2 div
{
  padding-top: 10px;
}

div.illinois-footer-column3
{
  order: 3;
  font-size: 1rem;
}

div.illinois-poweredby-link
{
  font-size: 0.8rem;
  padding-top: 10px;
}

div#footercontent div#footersocialbookmarks
{
  margin-top: 0;
  margin-bottom: 1rem;
}

div#footercontent.illinois-minimal-footer
{
  padding: 0.25rem;
}

div#footercontent.illinois-minimal-footer > div > div
{
  margin: 0;
}

@media (max-width: 800px)
{
  div#footercontent
  {
    display: block;
  }

  div#footercontent > div
  {
    width: 100%;
    margin-bottom: 2rem;
  }

  div#footercontent.illinois-minimal-footer > div
  {
    margin-bottom: 0;
  }
}

/* ---- Static pages styles ---- */

/* The "illinois-descriptive-page" style is used to style pages like the "acknowledgements" and "faq" pages. */
#illinois-descriptive-page h2
{
  margin-top: 1.5rem;
  font-size: 1.125rem;
  text-decoration: underline;
}
#illinois-descriptive-page h3
{
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

#illinois-descriptive-page h3::before
{
  content: "» "
}

/* ---- "collections" page styles ---- */

.illinois-collectionspecifictext
{
  margin-bottom: 25px;
}

ul.illinois-collectionspecificlist li
{
  font-size: 0.9rem;
  font-weight: bold;
}

img.collectionslogo
{
  margin: 10px;
  float: right; 
  width: 100%; 
  max-width: 400px;
  display: inline;
}
@media (max-width: 460px)
{
  img.collectionslogo
  {
    margin: auto;
    float: none; 
    max-width: 365px;
    display: block;
  }
}

/* ---- "home" page styles ---- */

div#illinois-home-page-center-pane
{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

div#homepagebrowse
{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
div.homepagebrowseicon
{
  flex-grow: 1;
  flex-shrink: 0;
}

div#homepagesamplerplaceholder
{
  margin-bottom: 1rem;
}

/* Non-centered Top 10 Text Correctors text */
div#homepagetextcorrectscoreboardmoreinfo
{
  text-align: initial;
}

#homepagecontent #illinois-home-page-left-pane
{
  width: 67%;
}

#homepagecontent #mapcontainer
{
  max-width: 800px;
}

#homepagecontent .card
{
  flex-basis: 30%;
}

#homepagecontent #illinois-home-page-right-pane.card
{
  flex-grow: 1;  
}

#homepagecontent .widescreenonly
{
  display: initial;
}

#homepagecontent .mobileonly
{
  display: none;
}

@media (max-width: 1200px)
{
  #homepagecontent
  {
    flex-wrap: wrap;
  }

  #homepagecontent .card
  {
    flex-basis: 35%;
    flex-grow: 1;
    flex-shrink: 0;
  }

  div#illinois-home-page-center-pane
  {
    margin-right: 0;
  }

  #illinois-home-page-right-pane
  {
    margin-top: 20px;
    width: 100%;
  }
  
  #illinois-home-page-right-pane .card-body
  {
     width: 100%;
  }
}

@media (max-width: 800px)
{
  #homepagecontent .card
  {
    min-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
  }

  #homepagecontent .widescreenonly
  {
    display: none;
  }

  #homepagecontent .mobileonly
  {
    display: initial;
  }

  #homepagecontent #illinois-home-page-right-pane
  {
    order: -1;
  }

  #homepagecontent #illinois-home-page-left-pane
  {
    order: 1;
  }
}

/* ---- Dates Page styles ---- */

ul#publicationbrowsedecadelist 
{
  margin-bottom: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- County map and region/county browser styles ---- */

div.widthrestrictioncountybrowser 
{
  margin: auto;
  max-width: 1200px;
}

#illinois-countybrowser
{
  display: flex;
}

#mapcontainer
{
  width: 100%;
  max-width: 540px; /* The map of Illinois is nearly twice as high as it is wide, so we limit the width to prevent it from being excessively large */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

#illinois-county-title-list
{
  background-color: #f7f7f9;
  border: 1px solid #17325b;
  border-radius: .25rem;
  padding: 1rem;
}

#illinois-county-title-list ul
{
  margin: 0;
  padding: 0;
}

#illinois-county-title-list li
{
  list-style: none;
}

#illinois-county-list
{
  columns: 2;
  list-style: none;
}

#illinois-county-list li
{
  padding-right: 1rem;
}
#illinois-county-list li::before 
{
  content: "\25AB";
  color: #E84A27;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

@media (max-width: 600px)
{
  #illinois-countybrowser
  {
    display: block;
  }

  #illinois-county-title-list
  {
    margin-bottom: 1rem;
  }
}

/* Set svg image to fit its parent div's width */
#mapcontainer svg 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/*** Digitized area hover color and transition */
#mapcontainer .fil0.digitized 
{
  transition: .4s fill;
  cursor: pointer;
}
#mapcontainer .fil0.digitized:hover, 
#mapcontainer .fil0.digitized.highlighted
{
  fill: rgba(232, 74, 39, 1);
}

/* Digitized area name hover color and transition */
#mapcontainer .text0.digitized 
{
  cursor: pointer;
}
#mapcontainer .text0.digitized:hover,
#mapcontainer .text0.digitized.highlighted 
{
  fill: #CCC;
}

/*** Selected digitized area color */
#mapcontainer .fil0.digitized.selected 
{
  fill: rgba(232, 74, 39, 1);
  stroke-width: 50;
}
#mapcontainer .text0.selected 
{
  fill: #fff;
}

/* ---- Search page styles ---- */

/* Navy Blue search year graph title (same as the navigation bar) */
div#searchresultyeargraphtitle
{
  background-color: #13294b;
}

div#notification
{
  background-color: #f7f7f9;
  color: #212529;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}