/*
 * This is the defaults stylesheet for FUZ-moto trips
 *
 *    see trip_mobile.css for additions to make it fit a phone screen better
 *    see trip_desktop.css for additions to make it fit a wide desktop screen better
 */

div.map_with_track_and_camera_icons {
  position: relative; 
}

img { 
  height: auto;
}

p { margin-top: 0; }

.cam_icon {
    position: absolute;
}

div.map_with_pics {
    position: relative;
}
div.slideshow_box {
    position: absolute;
    /* border: 3px solid #73AD21; */
    border: 3px solid #000;
    padding: 3px;
    background-color: #fff;
    text-align: center;
}

div#the_slide {
/*    width: 280px;*/
}
svg.arrow_on_map {
    position: relative;
    top: 0px;
    left: 0px;
    background-color: transparent;
}
div.arrow {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: transparent;
}

.map_ctrl_left {
    left: 5px;
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
}
.map_ctrl_right {
    right: 5px;
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
}
.map_ctrl_close {
    top: 5px;
    position: absolute;
    right: 5px;
}
.map_ctrl_info {
    bottom: 8px;
    left: 5px;
    position: absolute;
    /* transform: translate(0, -100%); */
}
.map_ctrl_full {
    bottom: 8px;
    right: 5px;
    position: absolute;
    /* transform: translate(0, -100%); */
}

.slide_box {
    position: relative;
}
.map_slide_caption {
    position: relative;
}

.ocaption {  /* overlayed caption text in full-screen mode */
  position: absolute; /* Allows positioning over the image */
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 33%;
  overflow: auto;  /* add scrollbar if info string is too long */
  background-color: rgba(0, 0, 0, 0.5); /* Black background with 50% opacity */
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}
.ssb:hover .ocaption {
  background-color: rgba(0, 0, 0, 0.7); /* Slightly darker on hover */
}



.mbox {  /* media box, image, video, etc */
  display: inline-block;
  font-family: arial;
  font-size: 20px;
  margin: 20px;
  outline: dashed 1px black;
}

.photosphere_thumbnail_link {
  display: inline-block;
  font-family: arial;
  font-size: 20px;
  margin: 20px;
  outline: dashed 4px red;
  padding: 3px;
}

.mbox>p {  /* paragraphs below a media box */
  text-align: center;
  padding: 2px;
}

.navbtns3 {
  width: 100%;
}
.navbtn {
  height: 80px;
}

p {
  font-family: arial;
  font-size: 20px;
}
li {
  font-family: arial;
  font-size: 20px;
}
td {
  font-family: arial;
  font-size: 20px;
}