/* ==== 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  - [2026-02-05 to 2026-07-26]
                  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.)
                  Allow <figure> to be styled outside galleries same as <div class="figure">
                  Also, tweak spacing on footer nav, etc.
                  
   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;
}

h3.page-section {
  margin-top: 1.7em;
}

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.
*/

/* centers the "main" image (thumb is a bit of a misnomer) in a card, though limit
   how wide it can get */
.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 14px 3px 0;
  width: 50px;
  float: left;
  border: none;
}

/* ----- Article and gallery figures ----- */

/* -- Article figures --
   Default: right-floated, landscape width.
   Modifiers: left, narrow, fullwidth (combinable, e.g. class="left narrow")
   
   Gallery figures — any figure that's a descendant of .gallery — are excluded via
   :not(.gallery figure), wrapped in :where() to keep specificity flat & predictable.
*/
:where(figure:not(.gallery figure), .figure) {
  clear: both; /* 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 */
:where(figure:not(.gallery figure), .figure).narrow {
  width: 200px;
}

/* Use class="figure left" for left-aligned */
:where(figure:not(.gallery figure), .figure).left {
  float: left;
  margin: 3px 22px 20px 0;
}

/* Full width article figures */
:where(figure:not(.gallery figure)).fullwidth,
.figure-fullwidth {
  /* float and width:100% are essentially contradictory instructions, leading to different
     sizing algorithms. So set float to none here (we don't want text to wrap around
     this!) */
  width: 100%;
  float: none;
  clear: both;
  margin: 0 0 20px 0;
}

/* On cell phones snap article figures to full width.
   (Need to call out narrow, left, etc since those had explicitly set widths) */
@media (max-width: 529px) {
  :where(figure:not(.gallery figure), .figure),
  :where(figure:not(.gallery figure), .figure).left {

	/* float and width:100% are essentially contradictory instructions, leading to
	   different sizing algorithms. So set float:none here (we don't want text to wrap
	   around this!).
	   
	   Setting float:none, however, means that L and R margins also need to be
	   explicitly set to 0, otherwise obscure rules kick in to do with width and margin
	   calculations. (The figures that were right-floated on wider media, and had thick
	   left margins, will show that thick left margin here even at 100% width, unless
	   that margin is set to 0! (Even odder, this does not not happen with left-floated
	   figures, due to obscure CSS2.1 §10.3.3 rules!!)) */

    width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Portrait images should not acquire substantially more visual weight
     than landscape images merely because of their aspect ratio. */
  :where(figure:not(.gallery figure), .figure).narrow {
    width: 78%;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* <img> always takes the width of its figure container, including in galleries.
   Intended for true figures (with captions), not for thumbnails or icons */
figure img,
.figure img,
.figure-fullwidth img {
  width: 100%;
  
  /* Not needed for our layout, but just in case. The display default of 'inline' may
     result in a phantom gap if the img is ever used inline, to account for text
     descenders for example */
  display: block; 
}

/* -- Gallery figures -- */

/* Using float:left (instead of display:inline-block) for gallery figures wasn't working,
   since floats have no concept of a shared baseline or row; each one is independently
   seeking the highest available slot and so they were being tucked into nooks and
   crannies of our variable-height rows of images. The float layout algorithm's job is
   to place each floated box as high as geometrically possible while still clearing
   previously floated boxes on that side. It doesn't think in terms of "rows" at all.
   
   Still, if we were to use float:left, something like this would be needed to get them
   in top-aligned rows, forcing a break every 4 items:
   
     .gallery figure:nth-of-type(4n+1) {
	   clear: both; 
     }
     
   Inline layout genuinely does have the concept of a line/row — items flow left to
   right along a line box, and once one doesn't fit, the whole next item wraps to a new
   line box below, determined by the tallest item in the current line, not by gap-seeking.
*/

/* 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; /* see extended comments above */
  vertical-align: top; 

  width: 220px;
  margin: 3px 0 20px 22px; /* Note that browsers may insert some small whitespace between
                              figures for inline-block, prob swallowed up by this 22 px */
}

.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;
}

/* 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);
}


/* --- Table of Contents --- */

.toc {
  --toc-border: #d8d8d8;
  --toc-accent: #4a4a4a;
  --toc-bg: #f7f7f5;
  border: 1px solid var(--toc-border);
  background: var(--toc-bg);
  padding: 0.9rem 1rem;
  border-radius: 3px;
  font-size: 0.87rem;
  width: fit-content; /* snug fit (set by longest entry in toc) */
}

.toc-title {
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--toc-accent);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;          /* switch to 2 if you prefer: e.g., 2 */
  column-gap: 2rem;
}

.toc-list li + li { margin-top: 0.25rem; }

.toc a {
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,0.25);
}

.toc a:hover,
.toc a:focus {
  border-bottom-style: solid;
  outline: none;
}


/* --- 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;
}