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

*/

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

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

/* --- Images, figures and captions --- */

/* 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 {
  width: 100%;
}

.figure-fullwidth {
  margin-bottom: 20px;
}

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

.caption {
  font-size: .83em;
  color: #666;
  line-height: 1.44em;

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

.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: #8C1515;        /* Stanford red */
  border-bottom: 1px solid #7A1212; /* poor-man's gradient */
  padding: 5px 0 0 0;
  overflow: hidden;
}

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

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

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

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

/* for some reason, mainmenu has to be a class & not an id for the rules to "take" (todo: why?) */
.mainmenu {
  background-color: #F2F1EB;
  font-family: 'Source Sans Pro', Verdana, sans-serif;
  font-weight:300;
  font-size: 20px;
/*  border-bottom: 1px solid #e6e6e6; */
} 
.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 */
}

.mainmenu li a {
/*  color: #353535; */
  color: black;
  display: inline-block;
  font-size: 90%;
  padding: 1px 0 3px 0;
  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;
}
@media (max-width: 529px) {
  .mainmenu li a {
  font-size: 80%;   /* decrease menu's font size on phones */
  }
}

.mainmenu li a:hover {
  color: #696969;
  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 #8C1515; /* 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-color: #AAA; /*#FFFFFF;*/
  height: 1px;
  margin: 8px 20px;
}

/* - 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;
}
.note-entry::before {
  content: "» ";
}
.note-entry::after {
  content: " «";
}

/* encyc index section letter */
.index-section-lead {
  font-weight: bold;
  color: #8C1515;
}

.plant-list {
  margin: 0;
  padding: 0;
  list-style-type: none;     /* no bullets */
  line-height: 120%;   /* this is how high the side border will be */
}
.plant-list li {
  margin-bottom: 0.35em;
  display: inline-block;
  padding-right: 0.5em;
}
.plant-list li:not(:first-child) {
  border-left: 1px solid #a2a9b1;
  padding-left: 0.5em;
}

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

h1.articletitle {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
  margin-bottom: 22px;
}

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

/* todo: should this be h1 or h2? */
#entrysubtitle {
  font-size: 1.2em;
  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;
}

.comnames {
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.10em;
  font-size: .93em;
}

.famname, .famdesc, .natrange {
  color: gray;
}

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

.natrange {
  float: right;
}

/* on phones, let natrange float left (line after famname) */
@media (max-width: 529px) {
  .natrange {
    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;
  }
}

div.entryabout {
  font-size: .83em;
  color: gray;
  line-height: 155%;

  margin-top: 25px;
  margin-bottom: 25px;
}

.specieslist ul {
  margin: 4px 0 0 0;
  padding: 4px 0 5px 0;
  list-style-type: none;     /* no bullets */
  line-height: 120%;
}
.specieslist li {
  margin-bottom: 0.5em;
}

/* "side by side" list items when the aside is below main. */
@media  (max-width: 991px) {
  .specieslist li {
    display: inline-block;
    padding-right: 0.5em;
  }
  .specieslist li:not(:first-child) {
    border-left: 1px solid #a2a9b1;
    padding-left: 0.5em;
  }
}

/* --- 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: 7px;
  width: 16px;
  height: 16px;
  float: right;
  cursor: pointer;

  display: none;  /* changes with @media */
}

/* display changes with @media */
#nav-search {
  width: 220px;
  padding-top: 1px; /* Vertically center within the red banner */
  float: right; /* changes with @media */
/*  transition: display 2s; */
}
/* For phone-size screens, the search icon appears & Google CSE disappears */
@media (max-width: 529px) {
  #search-icon {
    display: inline;
  }
  #nav-search {
    display: none;
    float: left;
    /* width: 100%; */
  }
}
@media (min-width: 530px) {
  #nav-search {
    display: inline !important; /* overrides any DOM changes -> display:none by the search icon onclick */
  }
}

/* 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.
   Any customizations we make have to take all the above into account.
   We focus on customizing only the CSE search widgets in the nav bar (#nav-search),
   and not the one that appears on the search.html (results) page. */


/* Bring search input & search button closer (in nav bar only) */
#nav-search .gsc-input {
  padding-right: 0 !important;
}

/* Make search button narrower (in nav bar only) */
#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; 
}

/* --- Home page styles --- */

.col1 {
  float: left;
  width: 75%; /* also see media query */
}

.col2 {
  float: left;

  /* These change with @media, and also .narrow-gutter: */
  margin-left: 5%;  /* col2 takes on the responsibility of setting the gutter between
                       the two columns. */
  width: 20%;

}

/* Modifies col2: Narrow the gutter, e.g. for the home page. Sidebar gets fatter.
   Numbers should add to 25% to keep col1 same width */
.narrow-gutter {
  margin-left: 3%;
  width: 22%;
}

.card {
  background-color: #F2F1EB;
  font-size: .85em;
  line-height: 160%;
  border: 1px solid;
  border-color: #E8E7E2 #D9D8D6 #D9D8D6 #E8E7E2;
  margin: 0px 0px 15px 0px;
  padding: 0 15px 0px 15px;

  display: inline-block;
}

/* 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 (min-width: 530px) and (max-width: 991px) {
  /* Divs appear in 2 columns only in medium-range/tablet widths, otherwise 1 column: */
  .side-by-side {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

/* meta-titles of cards in red */
.meta {
  font-family: 'Source Sans Pro', Verdana, sans-serif;
  font-weight: 600;
  font-size: 1em;
  text-transform: uppercase;
  color: #8C1515;
  line-height: 140%;
}

.card .meta {
  padding-top: 10px;
}

.card h3 {
  font-size: 1.5em;
  margin: 5px 0 8px 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: #8C1515; /* 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 14px;
}
.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: #8C1515;
}

/* --- 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: #8C1515;
  padding-right: .5em;
}