/* @group links */

a, a:visited {
  color: #4780a0;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #f00;
}

a.clear {
  clear: left;
  display: block;
}

/* insert img to links that leave the site */
a.ext::after {
  display: none;
  font: var(--fa-font-light);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f35d";
}

a.mapzoom::after {
  display: none;
  font: var(--fa-font-light);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f00e";
}

#map-dialog-local::part(body),
#map-dialog-google::part(body) {
  overflow: hidden;
  padding: 0;
}

/* put a link over a div with a span:
   http://stackoverflow.com/questions/796087/make-a-div-into-a-link */
#header a span, a.snip span {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 0;

  /* edit: fixes overlap error in IE7/8, make sure you have an empty gif */
  background-image: url('/img/spacer.gif');
}

#header a, a.snip {
  color: #fff;
}

#header a:hover {
  text-decoration: none;
}

a.snip span:hover {
  /* Converted to RGB from HEX of #4780a0 */
  background-color: rgba(71, 127, 160, 0.5);
  cursor: pointer;
}

/* @end */

/* @group main body div */
div#bd {
  min-height: 100%;
/*  min-width: 960px;*/
  margin: 0 auto -56px;
/*  padding:  10px;*/
}

#bd:after {
  content: "";
  display: block;
}

/* @end */

/* @group content wrapper */
div#main {
  background-color: #fff;
  min-height: 100%;
/*  border: 1px solid #fff !important;*/
}

/* @end */

/* @group header */

div#header {
  color: #fff;
  font-family: "fira-sans", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: xx-large;
/*  font-weight: 700;*/
  position: relative;
}
/* @end */

/* @group menu */
div#menu {
  font-size: medium;
}

/* @end */

/* @group the main stuff */

.center {
  margin: auto;
  width: 75%;
  padding: 10px;
}

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

.fancybox {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

figure.fancygroup, div.fancygroup {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #497498;
  margin: 0 auto;
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 0;
  width: 90%;
}

div.all_posts {
  display: table;
  margin: 0 auto;
}

#details_year {
  width: 100%;
}

@supports (display: flex) {
  div.all_posts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

div.all_by_year,
figure.animals {
  display: inline-block;
  margin-right: 1em;
  vertical-align: top;
  min-width: 200px;
/*  width: 200px;*/
}

figure.animals {
  margin-left: 10%;
  min-width: 300px;
}

figure.animals + p {
  display: none;
}

figure.animals + p + figure.animals {
  margin-left: 0;
}

ul.all_by_year,
figure.animals > ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
  /* fake a hanging indent for too long lines */
  padding-left: 1.5em;
  text-indent: -1.5em;
/*  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;*/
}

figure.animals > ul,
figure.animals > ul > li {
  vertical-align: top;
}

figure.animals_2 {
  min-height: 5em;
}

figure.animals_2 a,
figure.animals_2 figcaption b {
  display: inline-block;
  width: 17em;
  padding-bottom: .1em;
}

/* Mobile version: everything is 100% wide by default */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  figure.animals_2 {
    border: 1px solid black;
  }

  figure.animals_2 figcaption b {
    width: auto;
  }
}

ul.recent {
  list-style: none;
  margin: 0;
  padding: 0;
}

#content{
  background-color: #fff;
}

.content {
  border: 0px;
  margin-left: 1em; /* "column" gutters */
  margin-right: 1em; /* "column" gutters */
  padding: 1em;
  padding-top: 0;
}

.content b {
  display: block;
  font-size: medium;
  margin-bottom: .5em;
}

span.head {
  display: block;
  font-size: medium;
  margin-bottom: .5em;
}

span.head b {
  display: inline-block;
  margin-left: .5em;
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  div.trip {
    width: 100%;
  }
}

div.trip.block > p:not(.summary_links) {
  line-height: 1.25em;
}

div#trip-meta {
  color: #000;
  font-family: "fira-sans", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: small;
  font-weight: 400;
}

div#trip-meta i, div#author i {
  display: table-cell !important;
  min-width: 1.4em;
}

div#transportaion.transportation.block p i {
  display: table-cell !important;
  min-width: 1.4em;
}

.fa-stack.small {
  font-size: 0.5em;
}
.fa-stack.small i {
  vertical-align: middle;
}
.fa-stack.small i.fa-stack-1x {
  top: -2px;
}

.sr-only, .fa-sr-only {
  display: none;
}

div#trip-meta b {
  display: table-cell !important;
  font-size: small;
  min-width: 6em;
}

div#trip-meta p {
  display: table-cell;
  width: 100%;
}

.headline {
  font-family: "fira-sans", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: larger;
  font-weight: 700;
  margin-top:1em;
  margin-bottom: .25em;
}

#author, #countries, #states, #cities, #lodging, #transportation {
  display: table;
  margin-bottom: .25em;
  line-height: 16px;
  height: 16px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: visible;
  width: 120px;
  background-color: rgba(0, 0, 0, .7);
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;

  /* Position the tooltip text to the right */
  top: -5px;
  left: 105%;
  z-index: 7;

  font-size: x-small;
  opacity: 0;
  transition: opacity 1s;
}

.tooltiptext-see {
  visibility: visible !important;
  opacity: 1 !important;
}

#author {
  font-size: large;
  margin-bottom: .5em;
}

#author b {
  font-size: smaller;
}

div#content {
  /* border: 1px solid #f00 !important; */
  color: #000;
  font-family: "fira-sans", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: medium;
  font-weight: 400;
/*  padding: 10px;*/
}

.block h1, .block h2, .block h3, .block h4 {
  font-family: "fira-sans", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-weight: 700;
  scroll-margin-top: unset !important;
}

#overview {
  border: 0px;
  padding-bottom: 0;
  font-size: medium;
}

#extra {
  min-width: 315px;
}

/* From: https://fontawesome.com/docs/web/add-icons/pseudo-elements */
summary.wiki::after {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding-left: .25em;
}

summary.wiki {
  list-style: none !important;
}

summary.wiki b, h3, h4, h5 {
  display: inline-block !important;
  width: 100%;
}

details.wiki p {
  line-height: 1.5;
  margin-bottom: .5em;
}

b.wiki, h3.wiki, h4.wiki, h5.wiki {
  display: inline-block !important;
  line-height: 1.5;
  margin-bottom: 0;
  padding-bottom: .5em;
  scroll-margin-top: unset !important;
  width: auto;
}

b.wiki, h3.wiki, h4.wiki, h5.wiki > i {
  height: 1em;
  text-align: center;
  /* vertical-align: text-bottom; */
  width: 1em;
}

summary.wiki::-webkit-details-marker {
  display: none !important;
}

details summary.wiki::after {
  font: var(--fa-font-light);
  content:"\f32b";
}

/* By using [open] we can define different styles when the disclosure widget is open */
details[open] summary.wiki::after {
  content:"\f329";
}

blockquote.wiki {
  border-left: 10px solid #ccccccA0;
  border-right: 2px solid #ccccccA0;

  border-radius: 3px;
  display: block;
  padding: 1em;
  box-shadow: 2px 2px 15px #ccc;
}

p.summary_links {
  display: inline;
}

p.summary_links wa-icon {
  text-align: center;
  vertical-align: text-bottom;
  width: 1em;
}

p.summary_links i {
  height: 1em;
  text-align: center;
  vertical-align: middle;
  width: 1em;
}

table.summary_links {
  margin-bottom: 0px;
}

table.summary_links th, table.summary_links td {
  /*borders and padding to make the table readable*/
  border:0px;
  margin:0px;
  padding-top:.5em;
  width:10em;
}

/* Mobile version: everything is 100% wide by default */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .trip {
    margin-bottom: 2em;
  }
  .trip.content.block-group {
    margin: 0;
  }
}

/* tablet && desktop version */
@media (min-width: 768px) {
  .trip.content.block-group {
    display: table;
  }

  div.trip.block {
    float: none;
    padding-right: 2em;
    vertical-align: top;
    width: 100%;
  }
  #extra {
    display: table-cell;
  }
  @supports (display: flex) {
    .trip.content.block-group {
      display: flex;
      flex-direction: row;
    }
    #extra {
      display: block;
      flex-basis: 315px;
    }
  }

  #extra #photos, #extra #other-photos, #extra #other-links, #extra #parks-links {
    width: 315px;
  }
}

#extra div {
  margin-bottom: 1em;
}

#other-photos div {
  display: inline-block;
}

img.small_thumb {
  height: 100px;
  width: 100px;
}

img.medium_thumb {
  height: 150px;
  width: 150px;
}

#extra #other-links {
  vertical-align: middle;
}

#extra #other-links img {
  vertical-align: middle !important;
}

#other-links div {
  display: inline-block;
  font-size: small;
}

.link-div {
  height: 300px;
  position: absolute;
  width: 320px;
  z-index: 15;
}

/* @end */

/* @group searching */

#search::part(base) {
  background-color: #6590A7;
}

#search:focus-within::part(base) {
  background-color: var(--wa-form-control-background-color);
}

#search::part(input) {
  color: #fff;
}

#search::part(input)::placeholder {
  color: #c5d5de;
}

#search:focus-within::part(input) {
  color: #000;
  background-color: var(--wa-form-control-background-color);
}

#search-dropdown::part(menu) {
  min-width: var(--menu-width, 14em);
}

/* @end */

/* @group footer */

#footer, #bd:after {
  height: 56px;
}
#footer {
  background-color: #497498;
  color: black;
  line-height: 16px;
  padding: 20px;
  text-align: center;
}

div#footer a, div#footer a:visited {
  color: black;
  text-decoration: none;
}

div#footer a:hover {
  text-decoration: underline;
}

/* @end */

/* @group cover image */
/* From: http://nicolasgallagher.com/flexible-css-cover-images/ */
/*! suit-flex-embed v1.4.0 | MIT License | github.com/suitcss */

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  display: block;
  width: 100%;
}

.FlexEmbed--3by1:before {
  padding-bottom: 33.33333%;
}

.FlexEmbed--2by1:before {
  padding-bottom: 50%;
}

.FlexEmbed--16by9:before {
  padding-bottom: 56.25%;
}

.FlexEmbed--4by3:before {
  padding-bottom: 75%;
}

.CoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto 1em;
  max-height: 400px;
  color: #fff;
}

.SnipCoverImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto 1em;
  max-height: 250px;
  color: #fff;
}

.SnipCoverImage .trip-data, .CoverImage .trip-data {
  position: absolute;
  left: 20px;
  font-family: "fira-sans", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-weight: 700;
  bottom: 30px;
  text-shadow: 0 0 3px #000;
  white-space: nowrap;
}

.SnipCoverImage .trip-data h1, .CoverImage .trip-data h1 {
  font-size: xx-large;
  margin: 0px;
}

.SnipCoverImage .trip-data h2, .CoverImage .trip-data h2 {
  font-size: x-large;
  margin: 0px;
}

.SnipCoverImage .trip-data h3, .CoverImage .trip-data h3 {
  font-size: small;
  margin: 0px;
}

/* Table of contents (page-toc Eleventy transform) */
.page-toc {
  border-left: 3px solid var(--wa-color-brand-500);
  padding: 0.4rem 1rem;
  margin: 1rem 0;
  background: var(--wa-color-neutral-50);
  border-radius: 0 4px 4px 0;
}
.page-toc ul {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}
.page-toc li {
  margin: 0.15rem 0;
  font-size: 0.95em;
}
.page-toc a {
  color: inherit;
  text-decoration: none;
}
.page-toc a:hover {
  text-decoration: underline;
}

/* Map markers by place type - FontAwesome icons */
.marker {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  font-size: 18px;
  /* drop-shadow works on both SVG icons (FA kit) and font icons; text-shadow only works on font */
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}
.marker::before {
  display: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
}
.marker.marker-geo                      { color: #374151; }  /* dark slate - cities/countries */
.marker.marker-beer                     { color: #d97706; }  /* amber - breweries */
.marker.marker-food                     { color: #16a34a; }  /* green - restaurants */
.marker.marker-museum                   { color: #7c3aed; }  /* purple - museums */
.marker.marker-stay, .marker.marker-hotel { color: #dc2626; }  /* red - lodging */
.marker.marker-park, .marker.marker-parks { color: #65a30d; }  /* lime - parks */
.marker.marker-airport                  { color: #4338ca; }  /* indigo - airports */

/* @end */