/* ==== Trees of Stanford stylesheet ====

   All CSS (mostly) lovingly hand-crafted in small batches.

   "Note" indicates CSS oddities that are not immediately obvious
   "Todo" indicates items to be revisited

   History:
   tos.css - initial CSS setup (2014)
   tos2.*.css - dispenses with html frames
   tos3.*.css - mobile-friendly & responsive

   tos3.7a.css  - Goes with tos4g.js.
                  specieslist always lists items stacked (not side by side anymore)
                  Tweak 2-column format proportions    
   tos3.7b.css  - Changing main menu styling:
                  Source Sans Pro (wt 300,600) -> Source Sans 3 (wt 400,600)
                  Google Fonts had replaced SS Pro with SS 3. 
                  Make 3 plant index pages' list selector to be sticky on
                  scrolling too.
                  Moved 3 plant index pages' css to main css file.
   tos3.7c.css  - New fam-genus nav on top of taxon entry pages
   tos3.7d.css  - Small entryabout styling changes
   tos3.7e.css  - Start to introduce <figure>, <figcaption>, more entrybout styling
   tos3.7f.css  - Gallery figures now display-block, not float (neater rows)
   tos3.7g.css  - [2025-04-01] Use CSS variable (should be safe since declare html5)
                  Add taxon class for styling taxa in an entry's body if needed.
   tos3.7h.css  - [2025-09-05] styling of sidebar cards - highlight current updates with
                  red bar and lighter background.
                  Separator title introduced past update cards.
                  Move link-button, map-pin, hybrid sign styling etc into this css from
                  individual html files.
   tos3.7i.css  - [2027-02-05] Google is rolling out new design (much taller) of its
                   search engine input box, sigh. Stop showing the input box in the
                   nav bar (for wide screens), now only ever show it when clicking on
                   magnifying glass icon (as we used to do only on mobile up to now.)
                   Also, tweak spacing on footer nav
                  
   Responsive note:
   530px is the media cut-off for "phone" sizes (max-width: 529px)
*/

/* --- Site-wide --- */


/* Each document starts with the HTML5 declaration, so this should be safe. */
:root {
  --stanford-red: #8C1515;
}

/* Use after done with floating elements (otherwise, this div's contents will try to
   fit in among the previous floaters). Note, however, that if you want to set
   the div's margin-top to leave some space between the div and the previous floaters,
   then you need to declare another empty div with this class *before* the div you want
   to space out! If you do that, then no clear'ing is needed for the latter div. */
.clear {
  clear: both;
}

html {
  background-color: white;
  font-size: 100%;

  /* Note: Prevents Safari on iPhone, for example, from greatly increasing the
     body text size in landscape orientation.
     Todo: 100% or none? */
  text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  /*  page min-width, if any, would go here */
}

html, body {
  font-family: Verdana, sans-serif;
  height: 100%; /* Note: part of sticky footer solution */
}

/* Everything that uses Georgia */
h1, h2, h3, h4, #entrysubtitle {
  font-family: Georgia, serif;
  font-weight: normal;
}

p {
  margin-top: 0;
}

h1 {
  font-size: 2em;
  margin-top: 0.2em;
  line-height: 125%;
}

h2 {
  font-size: 1.6em;
  margin-top: 1.2em;
}

h3 {
  font-size: 1.25em;
}

h4 { /* used by legacy ENCYC species titles */
  font-size: 1.25em;
  font-weight: bold;
}

blockquote { /* much smaller margins than the browser defaults */
  margin-left: 1.5em;
  margin-right: 1em;
}

.font-smaller {
  font-size: 90%;
}

.right-align {
    text-align: right;
}
.center-align {
    text-align: right;
}

/* Margins wonky using ::first-letter, so we use an explicit span for each dropcap */
.dropcap {
  float: left;
  font-size: 3.26em;
  line-height: .5em;
  margin: .205em .120em 0 0;
  color: #990100;
}

a {
  text-decoration: none;
}
a:link {
  color: #3D5DF3;
}
a:visited {
  color: #6042CF; /* purple is lightened up so it still stands out from surrounding black text */
}
a:hover {
  text-decoration: underline;
}

/* To highlight taxa in the body of an entry, if needed */
.taxon {
  color: var(--stanford-red);
  font-weight: bold;
}

/* --- Images, figures and captions ---
   Note: if using float for figures or anything else, be sure to clear:both after
   you're done.
*/

/* centered image in a card */
.thumb-card {
  border: 1px solid #CCC;
  display: block;  /* Note: This & left/right margins to auto will horizontally center the image */
  max-width: 200px;
  margin: 0.9em auto;
}

/* tiny (50px) left-floated image in a card */
.tinythumb-card {
  margin: 4px 7px 10px 0;
  width: 50px;
  float: left;
  border: none;
  /* padding-right: 7px;  needed for iPhone Safari, which ignores margin for some reason (todo) */
}

/* Right-aligned figure with caption, usu landscape mode */
.figure {
  clear: both; /* Note: we want figures to stack up vertically not horiz */

  width: 300px;

  float: right;
  margin: 3px 0 20px 22px;
}

/* Use class="figure narrow" for narrow figures, usually portrait mode */
.figure.narrow {
  width: 200px;
}

/* Use class="figure left" for left-aligned */
.figure.left {
  float: left;
  margin: 3px 22px 20px 0px;
}

/* On cell phones snap figures to full width */
@media (max-width: 529px) {
  .figure {
    width: 100%;
  }
  .figure.narrow {
    width: 100%; /* todo: perhaps make portrait pix 80% width on narrow screens;
                    portraits shouldn't be given so much more real-estate than landscape! */
  }
}

/* <img> elements within *all* figures take the figure's width */
figure img,
.figure img,
.figure-fullwidth img {
  width: 100%;
}

/* -- full width figures */

figure.fullwidth,
.figure-fullwidth {
  margin: 0 0 20px 0;
}

/* -- figures for galleries */

/* If used float:left instead of display:inline-block for gallery figures, this
   would be needed to get them in top-aligned rows and avoid them fitting into
   nooks and crannies here and there. Adjust for variable width of course.
   
.gallery figure:nth-of-type(4n+1) {
	clear: both; 
}
*/

/* For use with html5 <figure> tag. Note margin needs to be fully specified or else
   browser's stylesheet for <figure>, which is not the same as for <div> (which we
   formerly used for figures), will be applied. */
.gallery figure {
  display: inline-block;
  vertical-align: top; 

  width: 220px;
  margin: 3px 0 20px 22px;
}

.gallery figure.narrow {
  width: 175px; /* More than 165 (3/4 of 220px), but optically looks right  */
}

/* -- captions for figures */

/* So far, same caption styling for any <figure> (or the former <div> model) on this 
   site */
figcaption,
.caption {
  font-size: .83em;
  color: #666;
  line-height: 1.44em;

  text-align: left;
  padding: 5px;
  white-space: normal;
}

figcaption .credit,
.caption-credit {
  font-size: .9em; /* nested within class 'caption' */
  color: #a6a6a6;
}

.nowrap {
    white-space: nowrap;
}

/* --- Photoswipe --- */

.photoswipe-gallery {
  margin-bottom: 10px;
}

.photoswipe-gallery img {
  height: 60px;
}

/* img elements with onclick attribute whose values start with openPhotoSwipe */
img[onclick^="openPhotoSwipe"] {
  cursor: pointer;
}

/* --- */

.excerpt {
  color: gray;
}

/* --- Feedback --- */

/* Helps obscure email addresses */
.dummy {
  display: none;
}

/* --- Top red banner and site name --- */

#banner {
  background-color: var(--stanford-red);
  border-bottom: 1px solid #7A1212; /* poor-man's gradient */
  padding: 5px 0 5px 0;
  overflow: hidden;
}

.container {
 /* Note: this horizontally centers the container: */
  margin: auto;
  width: 90%;
  max-width: 1300px;
}

img.banner-img {
  padding: 5px 15px 6px 0;
  width:  230px;
  float: left;
}
@media (max-width: 529px) {
  img.banner-img {
    width:  215px;
  }
}

/* --- Menu bar --- */

@media (max-width: 420px) {
  .poof-on-mobile {
    display: none;
    transition: 1s;
  }
}

/* The actual height of the menu bar is set in {li a} below */
.mainmenu {
  background-color: #F2F1EB;
/*  border-bottom: 1px solid #e6e6e6;   Light border at the bottom of the gray bar */
} 
.mainmenu ul {
  padding:0;
  margin:0;
}
.mainmenu li {
  display: inline-block;  /* display li's horizontally */
  list-style: none;       /* no bullets */
  margin-right: 24px;
}
.mainmenu li:last-child {
  margin-right: 0; /* last menu item doesn't need this. Plus, it will cause the last
                      item to overflow to the next line unnecessarily */
}

/* Note that the border-bottom underline adds to the heigh of the gray menu bar */
.mainmenu li a {
  font-family: 'Source Sans 3', Verdana, sans-serif;
  font-weight:400;
  font-size: 15px;
  color: #383838;

  padding: 3px 0 3px 0; /* This gives breathing room on top and bottom */

  display: inline-block;
  text-decoration: none;   /* don't underline link text */

 /* transparent "underline" will be colored in on hover or when item is made active! Note that this placeholder
    needs to be on the <a>'s styling, since that's what will be hovered over */
  border-bottom: 2px solid transparent;
}

.mainmenu li a:hover {
  color: #808080;
  border-bottom: 2px solid #5F574F;  /* see .mainmenu li a */
}

/* The nav bar's "active" class (inserted by js) will be styled this way: underlined in Stanford red
   see .mainmenu li a. */
.mainmenu li a.active {
  border-bottom: 2px solid var(--stanford-red);
}

/* --- Card lists (e.g. site highlights card) --- */

.smaller-sized-text { /* for sidebar "Related" items e.g. in book.html */
  font-size: .87em;
  line-height: 140%;
}

.card-ul {
  list-style-type: none;
  padding: 0 0 8px 8px;
  margin: 0;
  line-height: 120%;
}

.card-ul li {
  padding: 0 0 8px 0;
}

.card-hr {
  background-image: linear-gradient(to right, rgba(170, 170, 170, 0), rgba(170, 170, 170, 1) 10%, rgba(170, 170, 170, 1) 90%, rgba(170, 170, 170, 0));
  height: 1px;
  margin: 14px 18px;
}

/* - smalldot bullet lists (inspired by NYT) */

.smalldot-ul {
  list-style: none; /* no bullet */
  padding-left: 0;
}

.smalldot-ul li {
  position: relative;
  padding-left: 1em; /* left indent of li */
  margin-bottom: 0; /* no extra space between list items */
}

.smalldot-ul li::before {

  /* the actual drawn small-dot */
  content: '';
  background-color: #000;
  border-radius: 2px;
  width: 4px;
  height: 4px;

  /* dot's positioning */
  position: absolute;
  top: 0.7em; /* positions the bullet mid-cap-height */
  left: .25em;
  /* display: block; -- doesn't seem to be needed */
}

/* overrides for sidebar lists (class="smalldot-ul sidebar") */

.smalldot-ul.sidebar li {
  margin-bottom: 8px;    /* space list items out */
}

.smalldot-ul.sidebar li::before {
  /* the actual drawn small-dot */
  border-radius: 1px;
  width: 3px;
  height: 3px;
  top: 0.6em; /* positions the bullet mid-cap-height. Seems like rel to top of dot, hence override needed (todo) */
}


/* --- Encyclopedia index --- */

/* e.g. "Acer (Maple) Notes" */
.note-entry {
  font-size: 90%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ====== STYLING of 3 PLANT INDEX PAGES (list by scientific name, etc) ====== */

/* styling for "LIST BY:" */
.index-menu-intro {
	font-family: 'Source Sans 3', Verdana, sans-serif;
  	font-weight: 600;
  	font-size: 13px;
    color: var(--stanford-red);
    letter-spacing: .03em;
}

/* class index-menu: Overrides for class mainmenu */
.index-menu {
  	background-color: white;
  	border-bottom: 1px solid #a3a2a2;
}

.index-menu li a {
    color: #808080;
    font-weight: 600;
    padding: 0;
}

.index-menu li a:hover {
    color: #A0A0A0;
}

.index-menu li a.active {
    color: var(--stanford-red);
} 

.index-menu li {
  margin-right: 15px;
}
/* iPhone SE is 375px. For anything narrower than that, squish a bit */
@media (max-width: 374px) {
  .index-menu li {
    margin-right: 12px;
  }
}

/* class index-section-lead: the "A", "B" etc headers.

   A-Z nav will line-wrap to multiple rows; index-section-lead needs to take this 
   into account for neat layout. position:sticky is a bit odd in this regard; it 
   simply overlays its div over the text, we have to try to adjust around it.
   
   Setting letter-nav in a webfont (Source Sans 3) allows us to predict precise
   widths at which the letters will wrap. */
.index-section-lead {
  font-weight: bold;
  color: var(--stanford-red);

  padding-top: 5.1em;
  margin-top: -5.1em;

  /* Line below the section letter */
  margin-bottom: 0.5em;
  border-bottom: 1px solid #D7D5D3;
}
@media (max-width: 860px) { /* 2 rows for A-Z */
	.index-section-lead {
		padding-top: 7.1em;
		margin-top: -7.1em;
	}
}
@media (max-width: 441px) { /* 3 rows for A-Z */
	.index-section-lead {
		padding-top: 9.0em;
		margin-top: -9.0em;
	}
}
/* encyc index section letter */
.index-section-lead {
}
/* class sticky-nav */

.sticky-nav {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

/* The A-Z sticky navigation div, inspired by plato.stanford.edu */
.letters-nav {
	font-family: 'Source Sans 3', Verdana, sans-serif;

	padding: 5px 0;
	background-color: white;
	line-height: 200%;
	border-bottom: 1px solid #D7D5D3;
}

.letters-nav ul {
  padding:0;
  margin:0;
}
.letters-nav li {
  display: inline-block;  /* display li's horizontally */
  list-style: none;       /* no bullets */
  margin-right: 6px;
}
.letters-nav li:last-child {
  margin-right: 0; /* last menu item doesn't need this. Plus, it will cause the last
                      item to overflow to the next line unnecessarily */
}

.letters-nav a:link {
  color: black;
}

/* visited link */
.letters-nav a:visited {
  color: black;
}

.letters-nav a {
	font-size: 15px;

	background:#EDEBE9;
	border: 1px solid #D7D5D3;
	/* margin: 0 5px 5px 0; */
	padding: 2px 6px;
	border-radius: 5px;
	transition: background 0.4s ease; /* unhover */
}

.letters-nav a:hover {
	text-decoration: none; /* no underline on hover */

	background: var(--stanford-red);
    color: #ffffff;
    border-color:#C0BBB5;
    
	transition: background 0.4s ease; /* hover */
}

.plant-list2 {
  /* These 2 lines effect indent before all but first line */
  margin: 0 0 0 20px;
  text-indent: -20px;

  padding: 0 0 8px 0;
  list-style-type: none;     /* no bullets */
  line-height: 135%;      /* kicks in when a list item wraps lines */
}

.plant-list2 li {
  margin-bottom: 0.3em;  /* spaces list items out a bit */
/*  display: inline-block;
  padding-right: 0.5em; */
}

/* hr separator between genus groupings */
.plant-list2 hr {
  height: 1px;
  border: none;
  background-image: linear-gradient(to right, rgb(215, 213, 211, 0),
                                              rgb(215, 213, 211, 1) 10%,
                                              rgb(215, 213, 211, 1) 30%,
                                              rgb(215, 213, 211, 0));

  max-width: 40em;
  text-align:left;
  margin-left:0;

  margin-top: 0.7em;
  margin-bottom: 0.6em;
}

/* class family-list */
.family-list {
  margin: 0;
  padding: 0;
  list-style-type: none;     /* no bullets */
  line-height: 120%;      /* kicks in when a list item wraps lines */
}

.family-list .family-name {
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: .085em;
	color: #a81919;
}

.family-list ul {
	margin: 0;
	padding: 0;
	list-style-type: none;     /* no bullets */
	line-height: 120%;      /* kicks in when a list item wraps lines */
}

.family-list dt {
  	margin-bottom: 0.35em;  /* spaces list items out */
}

.family-list dd {
	margin-inline-start: 2em;
  	margin-bottom: 1em;
}

.family-list li {
  margin-bottom: 0.35em;  /* spaces list items out */
}

.tag_syn {
  font-size: .8em;
  color: #606060;
}

.tag_pdf {
  font-size: .8em;
  text-transform: uppercase;
  color: #606060;
}

/* end of ============== STYLING of 3 PLANT INDEX PAGES ============== */



/* --- Encyclopedia entry --- */

h1.articletitle {
  font-size: 1.75em;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

h1#entrytitle {
  font-size: 1.75em;
  clear: both;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 10px;
  line-height: 130%;
}

#entrysubtitle {
  color: gray;
  font-size: 1.1em; /* Makes Georgia approx same x-height as Verdana body text */
  clear: both;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 25px;
}

.entrylead {
  font-size: .75em;
  font-weight: bold;
  text-transform: uppercase;
}

.caps {
  text-transform: uppercase;
}

.alignleft {
  float: left;
}
.alignright {
  float: right;
}

/* The famName > genus nav at top of entries */
.fam-genus-nav {
  line-height: 125%;
  color: gray;
  font-family: 'Source Sans 3', Verdana, sans-serif; 
  font-size: 95%;
  margin-top: -2px;
  margin-bottom: 11px;
}
.fam-genus-nav a {
  text-decoration: none;
}
.fam-genus-nav a:link,
.fam-genus-nav a:visited {
  color: #6a7ac0; /* #7687b9; */
}
.fam-genus-nav a:hover {
  color: #3D5DF3;
  text-decoration: underline;
}

.fam-genus-separator {
  padding: 0 0.3em;
  font-size: 1.3em;
}

.title-ornament {
  margin-right: 8px;
  vertical-align: 1px;
}

.svg-floral {
  width: 12px;
}

.sci-name {
  margin-right: 10px;
}

.comnames {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 1.25rem;
}

.comnames-grp {
  display: inline-block;
}

/* iPhone Pro Max 14 is 430px wide */
@media (max-width: 450px) {
  .poof-on-wide-mobile {
    display: none;
  }
}

.natrange {
  margin-right: 5px; /* don't let the syn get too close */
  float: left;
}

.synonym {
  float: right;
}

/* on anything narrower than ~iPad Mini, let syn float left (line after famname) */
@media (max-width: 700px) {
  .synonym {
    clear: both;
    float: left;
  }
}

/* For when natural range is on same line as species & common name e.g. Arbutus 'Marina' */
.natrange-inline {
  font-size: 0.7em;
  color: gray;
}

@media (max-width: 420px) {
  #content img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* References and About this Entry section */
div.entryabout {
  clear: both;   /* Don't mix this up with any previous floating items */
  
  font-size: .83em;
  color: gray;
  line-height: 155%;

  margin-top: 38px;  /* For this to be respected after floating elements, need an
                        empty div with clear:both before this entryabout div! */
  margin-bottom: 25px;
}

/* New Reference style */
.entryabout .smalldot-ul {
  margin-block-start: .4em;
}
.entryabout a:link,
.entryabout a:visited {
  color: #6a7ac0; /* Don't distinguish between visited/unvisited links */
}
.entryabout a:hover {
  color: #3D5DF3;
  text-decoration: underline;
}
.entryabout .smalldot-ul li::before {
  /* the actual drawn small-dot */
  background-color: gray;
  border-radius: 1.66px;
  width: 3.32px;
  height: 3.32px;
} 

/* --- Bottom nav --- */

div.bottomnav {
  clear: both;
  font-size: 75%;
  margin: 0;
  line-height: 150%;
  text-align: center;
}

div.bottomnav-hr {
  background-color: #AAA;
  height: 1px;
  margin-top: 30px;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 30px;
}

/* --- Content: everything but the top/bottom nav bars, the main "white" part of the page --- */

#content {
  line-height: 155%;

  padding: 15px 0px 0px 0px; /* padding-top is 0 to allow for top-of-the-page splash pictures to
                                  touch the bottom of the topnav banner, & also so that h1, h2 etc
                                  don't need to have explicit margins/paddings */
  overflow: hidden; /* Note: This allows this div to expand in height to fit its contents!! I think this
                       is because its contents float, otherwise this shouldn't be needed */
}

/* --- Search --- */

#search-icon {
  padding-top: 9px;
  width: 16px;
  height: 16px;
  float: right;
  cursor: pointer;

  display: inline;  /* always */
}

/* Our wrapper for Google search box */
#nav-search {
  width: 300px;
  margin-top: 4px; /* Breathing space for the site logo above it */
  
  clear: both;
  float: left;
  display: none;    /* changed by script run when search-icon clicked */
}

/* We let go of the desire to super-customize Google CSE search widgets, since Google
   keeps changing them, and constructs them to be maddeningly non-precise. Also,
   with the new (Apr 2019) mobile style for CSE, mobile looks different from desktop.
   And in Feb 2026, the search input box suddenly became much taller and the magnifying
   glass icon moved within it (instead of on its right) -- what's more, the new design
   appeared sometimes but not always, e.g. it switched back and forth with the older
   designs with subsequent refreshes; and it wasn't clear how to modify the CSS to make
   it less tall. 
   
   So at this point it won't be shown on every page but displayed only if the magnifying
   glass icon is tapped (just as it used to be on mobile only).
   
   Still, there are a couple of things we can customize, and we do it here: */


/* Bring search input & search button closer (in nav bar only) 
   TODO: this may not be relevant anymore. */
#nav-search form.gsc-search-box {
  margin: 0 !important;
}

/* Make search button narrower (in nav bar only)
   TODO: this may not be relevant anymore. */
#nav-search .gsc-search-button-v2 {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#nav-search .gsc-input-box {

 /* CSE mobile results in rounded corners which makes this look strange in the red nav bar since
    the search icon button next to it is white with red background, making for an input box with
    only the left corners rounded! Looks fine on search results page, since that has a white
    background. */
  border-radius: 0 !important;

  /* Results in mobile search input not as tall, though more work is needed to get this to have
     less red background around it (search widgets are taking up too much vertical space) */
  padding: 0 !important; 
}

/* --- Basic main column + sidebar styles --- */

/* col1 and col 2 are specified as percentages within the container */
.col1 {
  float: left;
  width: 68%; /* also see media query */
}

/* col2 used for asides, species list, new modules, etc. 

   col2 takes on the responsibility of setting the gutter between the two columns.

   We used to have a "narrow-gutter" glass that overrides col2, which fattens the
   col2 sidebar and narrows the gutter, keeping col1 the same width.
   But with tos3.7 we dispense with narrow-gutter; all sidebars are a bit fatter to
   accomodate common  names now being added to entry sidebars species lists.
*/
.col2 {
  float: left;

  /* These change with @media */
  margin-left: 3%;
  width: 29%;
}

.card {
  background-color: #efefe8; /* #F2F1EB; */
  font-size: .85em;
  line-height: 160%;
  border: 1px solid;
  border-color: #c0c0bb #989894 #989894 #c0c0bb;
  margin: 0px 0px 17px 0px;
  padding: 0 15px 0px 15px;

  display: inline-block;
}

/* card type: highlight (for currently relevant cards)
   red bar on top, lighter color to distinguish from past cards */

.highlight {
  position: relative;                /* anchor the bar */
  background-color: #f9f9f6;
  padding-top: 4px;
}

.highlight::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 5px;
  background: var(--stanford-red);
  pointer-events: none;
}

/* card type: heading-separator
   Header to separate current update cards from past ones */

.heading-separator {
  background: #fff;
  border: none;
  padding-top: 18px;
}

/* card type: specieslist
   List of taxa in entry sidebars */

.specieslist {
  background-color: #F2F1EB;
  border: 1px solid;
  border-color: #E8E7E2 #D9D8D6 #D9D8D6 #E8E7E2;
}

.specieslist ul {
  /* These 2 lines effect indent before all but first line */
  margin: 4px 0 0 20px;
  text-indent: -20px;
  
  padding: 4px 0 5px 0;
  list-style-type: none;    /* no bullets */
  line-height: 135%;		/* when a long taxon line wraps */
}
.specieslist li {
  margin-bottom: 0.6em;		/* distance between taxa */
}

/* --- */

/* col2 will float below col1, and be full-width, for tablet (portrait) and smaller */
@media (max-width: 991px) {
  .col1 {
    width: 100%;
  }
  .col2 {
    margin-top: 20px; /* more space to separate asides from main article in this media view */
    width: 100%;
    margin-left: auto;
  }
}

@media (max-width: 991px) {
  /* Used to arrange cards in 2 columns on medium-range/tablet widths, but that juxtaposed
     new with older blurbs side by side. This is better: keep update-style cards in a single column but
     limit their width */
  .blurb {
    max-width: 380px;   /* limit width */
    margin-left: auto;
    margin-right: auto; /* centers horiz. */
    display: block;     /* ensure block-level so auto margins work */
  }

  .heading-separator {
    display: block;                  /* ensure block formatting context */
    width: min(380px, 100%);         /* same visual width as other cards */
    margin-left: auto;               /* center */
    margin-right: auto;
  }

}

/* For some reason overriding class "card" with margin-left:auto; margin-right:auto" as needed for horizontally centering this button doesn't work [actually, see 'blurb'], so duplicating "card" stuff here and setting width and margin: */
.link-button {
  width: 250px; /* needs a specific width to center horizontally */
  background-color: #f9f9f6;
  font-size: .85em;
  line-height: 160%;
  border: 1px solid #c6c5c4;      
  margin: 0px auto 20px auto;
  padding: 10px 15px 0px 15px;
}

.link-button h3 {
  font-size: 1.3em;
  margin: 5px 0 8px 0;
}

/* Appears on tablet (portrait) width and smaller sizes */
@media (max-width: 991px) {
  .appear-on-tablet {
    display: block !important;
  }
}

/* --- Styling of × (times/hybrid sign) */
.hyb, .times {
  font-size: 0.85em;

  /* raise a tad  */
  position: relative;
  top: -0.03em; 
}
/* Insert narrow no-break space after ×
   In future, may need "white-space: pre" to indicate no-break */
.hyb::after {
  content: "\202F";  
}

/* Map pin marker */
.map-pin::after {
  content: "📍";
}

/* meta-titles of cards in red */
.meta {
  font-family: 'Source Sans 3', Verdana, sans-serif;
  font-weight: 600;
  font-size: .92em;
  text-transform: uppercase;
  color: var(--stanford-red);
  line-height: 140%;
}

/* card - see link-button notes above on duplicating some values for now */
.card .meta {
  padding-top: 10px;
}

.card h3 {
  font-size: 1.3em;
  margin: 6px 0 9px 0;
}

.card p {
  margin: 1px 0 7px 0;
}

/* If <p> is last thing in card, has more space after it */
.card p:last-child {
  margin-bottom: 11px;
}

/* If <p> is first thing in card, has more space before */
.card p:first-child {
  margin-top: 8px;
}

.card-ul {
  padding: 0 0 0 8px;
  margin: -3px 0 -3px 0; /* hack? to reduce top & bottom space */
}

/* --- Footer & sticky footer stuff --- */

/* page-wrap needed for sticky footer */
#page-wrap {
  min-height: 100%;
  margin-bottom: -100px;  /* Note: 60+40 (negative) Keep same as #footer metrics! */
}
#page-wrap:after {
  content: "";
  display: block;
}

/* Note: Keep same as #page-wrap metrics! */
#footer, #page-wrap:after {
  margin-top: 40px;
  height: 60px;
}

#footer {
  font-size: .75em;
  background-color: var(--stanford-red);
  border-top: 1px solid #C0C0C0; /* gray */
}

.footerlist {
  margin: 0;
  padding: 20px 0 2px 0;
  list-style-type: none;     /* no bullets */
}
.footerlist li {
  display: inline-block;     /* display horizontally */
  margin-right: 22px;
}
.footerlist li:last-child {
  margin-right: 0;           /* last menu item doesn't need this */
}

/* div of social media icons in footer */
.social-footer {
  float: left;
  padding: 14px 0 0 30px; /* generous on left to separate from 'Contact Us' */
}
.social-footer img {
  width: 30px;
  padding-left: 3px;
}
.social-footer a:hover {
  opacity: 0.7;
}

/* div of social media icons in content */
.social {
  padding: 7px 0 2px 0;
}
.social img {
  width: 33px;
}
.social a:hover {
  opacity: 0.7;
}

#footer a:link,#footer a:visited {
  color: white;
}

/* --- Maps --- */

.mapname {
  font-weight: bold;
  color: var(--stanford-red);
}

/* --- Tables --- */

/* - "house" table */

table.house, table.house th, table.house td {
  border: 1px solid #D9D9D9;
}

table.house {
  table-layout: fixed;
  font-size: 90%;
  line-height: 140%;
  margin: 25px 0 0 0;
  border-collapse: collapse; /* make tbody same size as table (Firefox) */
  /* specify width in the <table> tag itself, since it depends on the table */
  /* makes the table horizontally centered: */
  margin-left: auto;
  margin-right: auto;
}

table.house th, table.house td {
  padding: 3px 5px;
  vertical-align: top;
}

table.house th {
  font-weight: normal;
  background-color: #FBFBF8;
}

/* For phone-size screens */
@media (max-width: 529px) {
  table.house {
    width: 100% !important;
  }
}

/* - table for Timeline */

table.timeline {
  border-collapse: collapse; /* make tbody same size as table (Firefox) */
}

table.timeline td {
  vertical-align: top;
  padding-bottom: .5em;
}

table.timeline td:nth-child(1) {
  color: var(--stanford-red);
  padding-right: .5em;
}