/* Additions for tree.js and the static gallery slider; everything else is the old dove2 CSS. */
/* Lightbox in the look of the old Widgetkit one: white 5px frame, light backdrop, round close button on the corner. */
.tree-lightbox { padding: 0; border: 0; background: #fff; max-width: 90vw; max-height: 90vh; overflow: visible; box-shadow: 0 0 10px rgba(0,0,0,.3); }
.tree-lightbox::backdrop { background: rgba(0,0,0,.4); }
.tree-lightbox figure { margin: 0; padding: 5px; }
.tree-lightbox img { display: block; max-width: calc(90vw - 10px); max-height: calc(90vh - 10px); }
.tree-lightbox figcaption { padding: 5px 0 0; text-align: center; color: #444; }
.tree-lightbox figcaption:empty, .tree-lightbox figcaption.blank { display: none; }
.tree-lightbox button { position: absolute; border: 0; cursor: pointer; }
.tree-lightbox-close { top: -8px; right: -8px; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: #fff; color: #444; font-size: 16px; line-height: 16px; box-shadow: 0 0 3px rgba(0,0,0,.4); }
.tree-lightbox-prev, .tree-lightbox-next { top: 0; bottom: 0; width: 30%; background: none; color: #fff; font-size: 40px; opacity: 0; transition: opacity .2s; text-shadow: 0 0 4px rgba(0,0,0,.6); }
.tree-lightbox-prev { left: 0; text-align: left; padding-left: 15px; }
.tree-lightbox-next { right: 0; text-align: right; padding-right: 15px; }
.tree-lightbox-prev:hover, .tree-lightbox-next:hover { opacity: 1; }

/* Widgetkit gallery-slider (postcard): items share total_width 700 with 3px spacing; the hovered one opens to 400px. */
.wk-gallery-slider { max-width: 700px; }
.wk-gallery-slider ul.slides { display: flex; gap: 3px; }
.wk-gallery-slider ul.slides li { flex: 0 1 347px; min-width: 0; float: none; transition: flex-basis .4s; }
.wk-gallery-slider ul.slides li:hover { flex: 0 0 400px; }
.wk-gallery-slider ul.slides li > a { width: auto !important; }
/* Widgetkit spotlight "bottom": the caption slides up over the image on hover (measured on the old site). */
.wk-gallery-slider ul.slides li > a { position: relative; display: block; overflow: hidden; }
.wk-gallery-slider ul.slides .overlay { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; font: 300 16px/22px "Open Sans", Helvetica, Arial, sans-serif; transform: translateY(100%); transition: transform .3s; }
.wk-gallery-slider ul.slides li:hover .overlay { transform: none; }
/* Language switcher under the footer menu: the subnav's own 10px top + the menu's 20px bottom gave 30px; the old footer used 22px between rows. */
.tm-footer .tm-languages { margin-top: -8px; }
/* English menu labels are wider than zh/ja: at 22px the menu is 811px and drops under the logo when the container is 980px (1026-1279) or the viewport is 768-959. 1280 and wider keep the old size. */
@media (max-width: 1279px) {
  :lang(en) .uk-navbar-nav > li { margin: 0 8px; }
  :lang(en) .uk-navbar-nav > li > a { font-size: 17px; }
}
@media (max-width: 1025px) {
  :lang(en) .uk-navbar-nav > li { margin: 0 6px; }
  :lang(en) .uk-navbar-nav > li > a { font-size: 15px; }
}