/* ============== Set style Variables ============== */
:root {
  --arrow-right: url(../images/arrow.gif);
  --arrow-down: url(../images/arrowdn.gif);
}
/* ============== Basics ============== */

/* ==== Establish styles not addressed by Normalize or Boilerplate ==== */

/* ----Browser defaults for elements
---FIGURE
    display: block;
    margin: 1em 40px;
---FIGCAPTION
    display: block;
---BLOCKQUOTE
    display: block;
    margin: 1em 40px;
---P
    display: block;
    margin: 1em 0;
-------------------------------- */
figure {
  display: block;
  margin: 0;
} /* where needed change to: display: inline-block; */
figcaption {
  display: block;
  /* Default = left. text-align: center; */
}
blockquote {
  display: block;
  margin: 0;
}

/* Boilerplate == html {color: #222;font-size: 1em;line-height: 1.4;}  */
  /* body text == font-family: Georgia, serif; 
  font-weight: 300 or 600 or 700 does not work -- default system Georgia only has regular and bold.
  */
body {
  font-family: Georgia, serif;
	font-size: 1em;
	line-height: 1.5;
}

/* Do I need this still? Firefox does nested quotes fine.
These two have the same result:
q, blockquote {quotes: '“' '”' '‘' '’';}
q, blockquote {quotes: "\201C" "\201D" "\2018" "\2019";}
*/


/* ============== Prep elements for LAYOUT ============== */

/* remove all margins that push apart the layout components */
#banner h1 {margin: 0;}
#mainhead h1 {margin-top: 0;}
#mainhead h2 {margin-bottom: 0;}
#core dl {margin-top: 0;}
/* margin-top of first p and margin-bottom of last p  */
/* Will not change the default margins; and use the gaps for layout:
#mainfoot p:first-child {margin-top: 0;} 
#mainfoot p:last-child {margin-bottom: 0;}
#pagefoot p:first-child {margin-top: 0;}
*/

nav ul,nav ol {
  list-style:none;
  list-style-image:none;
  margin: 0;
  padding: 0;
}

/* box for layout elements -- can use padding and borders.
Remember MARGINS are OUTSIDE the box width */
/*  #site (contains everything) and main (contains CSS Grid) are NOT border-box because I am relying on set width (inside border or padding). */
/* Note: #asides may contain more than one aside element */
#gallery, 
#mainhead, 
#core, 
main aside, 
#mainfoot, 
#mainnav, 
ul.utility,
ul.utility li a {
	box-sizing: border-box;
}
img { 
  box-sizing: content-box;
	max-width: 100%; /* images will shrink to fit their container width 
	(but border and padding are included in this width), 
  but will not get bigger than their full size */
  height: auto !important;
}

/* ============== Primary LAYOUT ============== */


/* ============== temp coloring for testing ==============
#taxon {background-color: gray; }
#site {background-color: white; }
#banner {background-color: #f63; }
#primary {background-color: #f1f; }
#breadcrumb {background-color: #f6f; }
main {background-color: yellow; }
#gallery {background-color: pink; }
#mainhead {background-color: teal; }
#core {background-color: #bbb; }
main aside {background-color: #ff0; }
#mainfoot {background-color: #f55; }
#mainnav {background-color: #ffa; }
#pagefoot {background-color: lime; }
    */


#site {/* DIV wrapper of all page content */
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}

main {
	padding: 0 2% 2%; 
}
/* 
top margin (padding) controlled by #breadcrumb above.
Right padding removed for some 3 column layouts.
 */

#core  {
	padding-bottom: 1em; 
	border-bottom: 1px solid #bbb; /* canceled in 3 column layout */
	margin-bottom: 1em;
}

main aside {
  
} 
main footer {
	border-top: 1px solid #bbb;
}


/* ============== Banner Header, Primary Nav, Breadcrumb ============== */
/* link animation is in the palette CSS  */

#breadcrumb {
	padding: 0.5em 2% 1em;
	font-size: 0.8em; /* 0.9em  */
  line-height: 2.1em; /* for mobile view separation of links in lines; TEST THIS */
}

#banner form {
	padding: 0.8em 1em 0.5em 12px;
}
#banner input[type="search"] {
	width: 13em; 
	font-size: 1.1em;  
}
#banner h1 {
  font-size:2.5em;
  margin:0;
 	padding: 0 0 0.2em 12px;
	line-height: 1.2em;
}

nav#primary {
	text-transform: uppercase; 
	font-size: 0.8em;
	letter-spacing: 0.1em;

}
nav#primary ul {
	line-height: 26px;
	margin: 0;
	padding: 0;
  display: flex;
  flex-flow: row wrap;
}
nav#primary li {
  flex: auto; /* distributes extra space inside of items, makes it look okay when responsive */
}
nav#primary a  {
	display: block; /* need this for the line-height to take effect, also they fill the LI item space */
	padding: 0 0.5em;
  text-align: center;
}
nav#primary li.isOpen a {
	text-transform: uppercase;
  font-weight:700;
}
nav#primary .home a { 
  /* previously was = width: 21px; */
  min-width: 2.9em;
}

/* ============== MAIN GALLERY ============== */
/* see media queries for sizing of images */
/* inline-block elements do not have their adjacent margins collapse */
#gallery { /* FLEX gets rid of white space between images  */
  display: flex;
  flex-flow: row wrap;
}
#gallery img {
	display: block;
	/* max-width: 98%; images with margin-right of 2% will not push out of their narrow container. */
	height: auto !important;
	margin: 0 1.5% 1.5% 0;
}
#gallery > :last-child {
    margin-right: 0;
}

/* ============== MAIN HEADER ============== */
#mainhead {

}
/* Note: line-height of 1em does not include the descenders: g j p q y  */

#mainhead h1 { /* see if this works for all page types */
  margin: 0;
	line-height: 1.3em;
}
/* NOTE: there may be a bigger gap between header#banner and section#core if #core is not tallest column in the grid. 
      Also paragraphs have a top margin and will thus make a gap if the first element in the #core.
*/
/* -----Taxon Pages ----- */
#taxon #mainhead h1 {/* resize for taxon names */
	font-size: 1.6em; 
  margin: 0.2em 0 0 0;
 /* margin: 0.2em 0; */
}
#taxon #mainhead h2 {/* resize for synonyms */
	font-size: 1.2em; 
  margin: 0.5em 0 0.2em 0;
	line-height: 1.2em;
}
h1 span.author {
    font-size: 0.8em;
}


/* ============== MAIN NAV (secondary navigation [left column]) ============== */
/*   Examples of what we are targeting:

<nav id="mainnav" aria-label="Secondary">
  <ul class="utility">
    <li class="guidespan depth-1 isOpen"><span class="isActive" title="Current Page.">Guide</span></li>
    <li class=""><a href="/guide/chicago">Chicago Region</a></li>
  
<nav id="mainnav" aria-label="Secondary">
  <ul>
    <li class="depth-1 isOpen"><a href="/guide/fungi">Fungi</a>
      <ul>
        <li class="depth-2 isOpen"><a href="/guide/fungi/basi">Basidiomycota</a>
          <ul>
            <li class="depth-3 isOpen"><a href="/guide/fungi/basi/agar">Agaricomycetes</a>
        .....................    
                          <li class="depth-5 hasChildren"><a href="/guide/fungi/basi/agar/poly/cerr">Cerrenaceae</a></li>
.
*/
main nav {
	margin: 0.5em 0;
}
main nav li {
padding-left: 5px;
}

main nav a,
main nav span {
  display: block;
  padding: 5px 5px 2px 10px;
}

main nav li.depth-1>a,
main nav li.depth-1>span { 
  font-weight:700;
  text-transform: uppercase;
	letter-spacing: 0.1em;
/*  padding-left: 15px; */

}

main nav li.hasChildren:not(.depth-1) {
background-image: var(--arrow-right);
background-position: 3px 12px;  /* 6px 11px */
background-repeat: no-repeat;
background-size: 6px 9px;
}
main nav li.isOpen:not(.depth-1) {
background-image: var(--arrow-down);
background-position: 1px 14px;  /* 4px 14px */
background-repeat: no-repeat;
background-size: 9px 6px;
}




/* ============== Content Elements ============== */

details summary {
  
}

blockquote {
  margin-left:  2em; /* move over, make room for the " before */
}
  blockquote:before {
  display: block; 
  height: 0; 
  content: "\201C"; 
  margin-left: -.6em; /* this is the distance between right edge of " and left edge of text */
  font: italic 400% Georgia,serif; 
  color: #999;
} /*original had margin-left: -.95em; */


/* expanding DETAILS element */
details summary {
  background-color: #eee;
  border: 1px solid #ccc;
  padding-left: 1em;
}
details summary:hover {
  cursor: pointer;
}
details summary h3 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: bold;
  line-height: 2em;
  font-size: 1em;
}

.pagecite,
.page-author {font-size: 0.9em;}

.gonext {
  
}

/* ============== MAIN ASIDE ============== */
/* aside - See media queries for width */

/* aside img.map */
aside figure {
	margin: 0 1em 1em 0;
}/* change margins for column layouts */
aside figcaption {
	text-align: center;
}

aside blockquote {
	font-size: 0.8em;
	padding: 1em 1.6em 0.5em 1em;
	border-bottom: 2px solid #ccc;
	}
aside .quote figcaption {
	padding: 0.5em 2em;
	font-size: 0.8em;
	}
  
aside .box {/* width set by CSS Grid below */
	border: 2px solid #ccc;
	margin: 20px 0;
}
aside .box figcaption {
	margin: .6em;
  font-weight: bold;
}
main aside .box p {
	font-size: 0.9em;
  margin:  0.5em 1em;
}

/* ============== page Footer ============== */
#pagefoot {
	margin: 0 2% 4% 3%;
	font-size: 0.9em;
}
p.utility {
	line-height: 2;
}


/* ============== Specific page styles ============== */


/* Taxa pages - Ordered lists */
section#core ol,
section#core ul {
  margin-left: 0;
  padding-left: 1.3em;
}

/* Taxon page - Definition lists */

#taxon dl {
	margin: 0.5em 0; /* normalize.css = 1em 0  */
}
#taxon dt {
  font-weight: bold;
	display: block;
	color: #333;
	padding: 0 0.6em 0 0;
	margin: 0;
	clear: left;
	float: left;
}
#taxon dt.nomen, #taxon dt.taxonlinks {
  float: none;
}/* cannot target a "nested" dt in the dd sibling of a higher dt, because the higher dt is not a parent element */
#taxon dt::after {
    content: ":";
  }

#taxon dd {
	display: block;
	margin: 0 0 0.3em 1em;
	padding: 0;
}
#taxon dd p {
/*	margin: 0;  */
}
#taxon ul.synonyms {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#taxon ul.synonyms ul {
	padding-left: 3%;
}
/*  nomenclature dd  */
#taxon li.current {
	font-size: 1.1em;
} 
#taxon dd.nomen {
  padding-left: 1em ;
  text-indent: -1em ;
} 


/* ----- GUIDE home page ----- */
article.excerpt {
  display: flex;
  flex-flow: row nowrap;
  padding: .7em;
  margin: 0 0 1.5em 0;
}
article.excerpt h1 {
  font-size: 1.5em;
  margin: 0;
}
article.excerpt p {
  margin: 0;
}
article.excerpt div.excerpt-img,
article.excerpt p {
  margin-right: .7em;
}

article.excerpt div.excerpt-img {
  flex: 1 0 28%;
}
article.excerpt div.excerpt-txt {
  flex: 1 1 auto;
}
/* Flex shorthand: 
    First value is flex-grow. Giving this a positive value means the item can grow. 
    Second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. 
    Third value is flex-basis; this is the value the items are using as their base value to grow and shrink from.
*/




/* MOVE THIS TO THE HTML HEAD OF THAT DOC IF IT ONLY APPLIES THERE */
/* Sitemap */
#sitemap ul{list-style-type:disc;} /* Kingdom */
#sitemap ul ul{list-style-type:circle;margin-bottom:0px;} /* Phylum */
#sitemap ul ul ul{list-style-type:square;margin-bottom:0px;} /* Class */
#sitemap ul ul ul ul{list-style-type:disc;margin-bottom:0px;} /* Order */
#sitemap ul ul ul ul ul{list-style-type:circle;margin-bottom:0px;} /* Family */
#sitemap ul ul ul ul ul ul{list-style-type:square;margin-bottom:0px;} /* Genus */
#sitemap ul ul ul ul ul ul ul{list-style-type:decimal-leading-zero;margin-bottom:0px;} /* Species */
/*
ol ol{list-style-type:lower-alpha;margin-bottom:0px;}
ol ol ol{list-style-type:lower-roman;margin-bottom:0px;}
 */


/* ============== Styles or Items Removed ============== */

/* ----- Javascript button 
.back-to-top {
	position: fixed;
	bottom: 2em;
	right: 0px;
	text-decoration: none;
	color: #000;
	background-color: rgba(235, 235, 235, 0.60);
	font-size: 0.8em;
	padding: 1em;
	display: none;
}
.back-to-top:hover { 
	background-color: rgba(215, 215, 215, 0.80);
}
-------------------- */





	/* MAIN padding-bottom: 1em; without padding here the lowermost contained element's bottom margin is ignored */



/* add this to code....... only screen and

@media only screen and (min-width: 35em) {

*/


/* ============== Media queries ==============  */
/* 
http://css-tricks.com/why-ems/
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
 */

@media only screen and (max-width: 640px) { /* NOTE = a MAX-width */
/* from Kirby site -- test this, Rocky says text size is perfect on his phone */
  html { font-size: 90%; }
  #banner h1 {padding: 0 0 0.2em 12px;}
  
  div.excerpt-img{
    display: none;
  }
}

@media only screen and (max-width: 484px) {
  .back-to-top {bottom:1em;font-size:0.7em;}
}

/* ========= Mobile FIRST======== */

/* phone styles [no @media rule] */

/*  code may change if this actual image changes size
aside.maps .chicago img{
	max-width: 320px;  
  width: 100%; 
} */
/* height is automatic ----width: 22em; about 317px */
/* -- this now covered by the following:  */

/* ====== aside child elements
most pages max-width: 300px;
Taxon pages max-width: 200px; 
==========*/
#mainaside.boxes figure {
  display: inline-block;
  max-width: 300px;
}

aside.taxphotos figure,
aside.maps figure  {
  display: inline-block;
  max-width: 250px;
}

#gallery.singlepic img {
    width: 100%;
  	max-width: 720px;
}



@media screen and (min-width: 485px) {
/* start of medium tablet styles - and larger devices */
  #banner {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
	#banner h1 {
    order: -1;
 	  padding: 0 0 0.2em 0.3em;
  }
  #gallery.threepics img {
    width: 48%;
  	max-width: 350px;
  }
}


@media screen and (min-width: 770px) {
/* start of large tablet styles - and larger devices */

	#banner h1 {
 	  padding: 0 0 0.2em 1em;
  }
  #gallery.threepics img {
    width: 32%;
  	max-width: 350px;
  }
  #gallery {
    grid-area: gallery;
  }
  #mainhead {
    grid-area: header;
    text-align: center;
  }
  #core {
    grid-area: section;
  }
  #core p:first-child {
    margin-top: .5em;
  }
  #mainaside {
    grid-area: aside;
  }
  #mainfoot {
    grid-area: footer;
  }
  #mainnav {
    grid-area: nav;
  }

  main {
    display: grid;
    grid-template-columns: 220px auto;
    grid-template-rows: auto;
    grid-template-areas: 
      "gallery gallery"
      "header header"
      "nav section"
      "aside aside"
      "footer footer";
    grid-column-gap: 20px;
    grid-row-gap: 10px;
  }
  #guide main {
    grid-template-columns: 130px auto;
    grid-template-areas: 
      "header header"
      "nav section"
      "nav footer";
  }
  #guide #mainhead {
    text-align: center;
    line-height: 1em;
  }
}

@media screen and (min-width: 900px) {
/* adjust this to where Grid 3 columns starts working */
/* start of desktop styles == 992px */

  #mainhead {
    text-align: left;
  }
  #general main {
    padding-right: 0; 
  }
  main {
    display: grid;
    grid-template-columns: 170px auto 304px;
    grid-template-rows: minmax(min-content, min-content) minmax(min-content, min-content) 1fr minmax(min-content, min-content);
    grid-template-areas: 
      "gallery gallery aside"
      "nav header aside"
      "nav section aside"
      "nav footer aside";
    grid-column-gap: 20px;
    grid-row-gap: 10px;
  }
  #taxon main {
    grid-template-columns: 220px auto 200px;
    grid-template-areas: 
      "gallery gallery aside"
      "nav header aside"
      "nav section aside"
      "nav footer aside";
  }
  #taxon.species main {
    grid-template-columns: 220px auto 200px;
    grid-template-areas: 
      "gallery gallery gallery"
      "nav header header"
      "nav section aside"
      "nav footer aside";
  }

  
  aside figure {
    margin: 0 0 2em 0;
  }/* change margins for column layouts */
  aside.maps figure, aside.maps figcaption, aside.maps img  {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #core  {
    border-bottom: 0; /* canceled in 3 column layout */
    margin-bottom: 0;
  }

}