/*
Author: Alexa Thomases, May Li, Catie Cassani
Filename: looma-history.css
Verion: 2.0
Date: July 2017
Description:
*/

 
 
 button#fullscreen-control {
     display:inline-block;
 }

 button.speak {
     display:inline-block;
 }

 button.lookup {
     display:inline-block;
 }

 button.show-keyboard {
     display:inline-block;
 }


 /*Framework for the buttons (which generally contain the titles of each event)*/
button {
  border: none;
  outline: none;
}

 button.dropbtn  {
     cursor: pointer;}
 button.dropdate { cursor: default;}

/* Controls the font size of the header so it doesn't change in different Looma themes */
h1 {
  font-size: 3em;
  margin:0 0 0 3vw;
    text-align:left;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*Makes it so that the lines and text of the timeline
  don't stack together and make the timeline look confusing*/
.timeline {
    margin-top:10vh;
  white-space: nowrap;
}

/*Positioning of the timeline in the window*/
.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 18vh 0;
}

/*The display of the line of the timeline*/
.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  left: -20vh;
  width: 30vw;
  height: 0.5vh;
  background: #ff0;
}


/*Aligns each white line segment to be in the proper position,
  relative to the each event point (yellow dot)*/
.timeline ol li:not(:first-child) {
  /*margin-left: 14px; */
}

/*The display of each event point in the timeline*/
.timeline ol li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5vw);
  bottom: 0;
  width: 4vw;
  height: 4vh; /* 1vh is about 4px !!!! */
  transform: translateY(-50%);
  border-radius: 50%; /*Determines the "roundness" of each point*/
  /* background: #ffff00; */
  display:none;
}

/*The positioning of the event information
(in the div of each list item)*/
.timeline ol li div {
  left: calc(100% + 2vw);
  width: 35vw;
  padding: 4vh;
  font-size: 1rem;
  white-space: normal;
  color: black; /*The color of the hover text*/
  /*z-index:2;*/
}

/*Specific position of each odd list item
  --makes the odd list items go above the timeline*/
.timeline ol li:nth-child(odd) div {
  top: -0.1vh;
  transform: translateY(-50%);
}

/*Keeps the timeline within a window*/
 @media screen and (max-device-width:480px) and (orientation:portrait),
 screen and (max-device-width:768px) and (orientation:landscape) {  .timeline ol,
  .timeline ol li {
    width: auto;
  }
}

/*Establishes the dimensions and display of
  the primary div that contains the timeline*/
#playground {
    position:absolute;
    top:20vh;
    padding-left:5vw;
background-color:palegoldenrod;
    border: 0.1vh solid #ccc;
    overflow-x: auto;
    overflow-y: hidden;
    height: 72%;
    max-height: 72%;
    width:96%;
    max-width:96%;
    margin-top: 3vh;
}

::-webkit-scrollbar {
  width: 7vw;
  height: 6vh;
}

input#keywords {display:inline;}

/*Keeps the timeline event buttons centered above the timeline points*/
.timeline li .timeline-description {
  border-radius: 0.2vh;
  float: left;
  padding: 2vh;
  width: 42%;
  left: 0vw;
  position:absolute;
  z-index:10;
}

.dropdown {
  width:100%;
  display: inline-block;
}

 .dropdown-content {
  display: none;
  /* background-color: #ffffff; */
  font: 1.5em "Comic Sans MS", serif, bold;
  border-color: white;
  height:inherit;
  width:inherit;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font: 1.5em;

}

/*The display of the timeline event button*/
.dropbtn {
  padding: 2vh;
  font: 2.5em "Comic Sans MS", serif, bold;
  cursor: pointer;
  width:100%;
  min-width: 8vw;
  height: inherit;
   /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
}

.dropbtn:hover {border:3px solid yellow;}

.dropdate {
  font: 2.2em "Comic Sans MS", serif, bold;
  cursor: pointer;
  min-width: 8vw;
  height: inherit;
  padding: 2vh;
  margin-top: 1vh;
  background: #dadaff;
}

/*Keeps dropdate button the same colors when its hovered over*/
button.dropdate:hover {
  background-color:#dadaff;
  color:black;
  margin: none;
}

/*Keeps the even timeline event buttons
  properly spaced above the hover texts*/
.timeline ol li:nth-child(odd) div .dropdate{
  margin-bottom: -8.7vh;
  margin-top: 0.5vh;
}

.timeline ol li:nth-child(even) div .dropdate{
  margin-top: -9.5vh;
  margin-bottom: 0.5vh;
}

/*Keeps the odd timeline event buttons
  properly spaced above the hover texts*/
.timeline ol li:nth-child(odd) .dropbtn{
  margin-bottom:1vh;
}

/*The display of the left-scrolling button*/
.scrollButtonLeft {
  position: fixed;
  top:2vh;
  right:12vw;
  width: 6vw;
  height: 9.5vh;
  padding: 1vh;
  cursor: pointer;
  min-width: 7.5vw;
  border-radius: 2vh;
}

/*The display of the right-scrolling button*/
.scrollButtonRight {
  position: fixed;
  top:2vh;
  right:3vw;
  width: 6vw;
  height: 9.5vh;
  padding: 1vh;
  cursor: pointer;
  min-width: 7.5vw;
  border-radius: 2vh;
}

/*The display of the return to the leftmost side button*/
.returnToLeftmost {
  position: fixed;
  top:2vh;
  right:21vw;
  width: 7vw;
  height: 10.2vh; /* !!!!! */
  padding: 2vh;
  cursor: pointer;
  min-width: 7.5vw;
  border-radius: 2vh;
  display: none;
}

.returnToLeftmost img, .scrollButtonLeft img, .scrollButtonRight img {height:100%;}

/*The display of the Search label*/
label {
    position:fixed;
    top:8vh;
    left:3vw;
    display:inline;
    font-size:1.5em;
    margin:4vh 0 0 2vw;
}

/*The display of the search bar*/
.searchBar {
  font: 1.5em "Comic Sans MS", serif, bold;
    position:fixed;
    top:8vh;
    left:10vw;
  margin:3vh 15px;
  width: 23vw;;
  height: 7vh;
  border-radius: 2vh;
}

#search-button {
    position:absolute;
    height:7vh;
    width:7vh;
    top:11vh;
    left:35vw;
    border-radius: 2vh;
    background-image: url("../images/looma-search2.png");
    background-size: 100% 100%;
}

/*The display of the prev button (for searching)*/
#previous {
 position: fixed;
  top:11vh;
  right:52vw;
  width: 6vw;
  height:7vh;
  cursor: pointer;
  min-width: 7.5vw;
  border-radius: 2vh;
  font-size: 1.5em;
  display: none;
}

/*The display of the next button (for searching)*/
#next {
 position: fixed;
  top:11vh;
  right:44vw;
  width: 6vw;
  height:7vh;
  cursor: pointer;
  min-width: 7.5vw;
  border-radius: 2vh;
  font-size: 1.5em;
  display: none;
}

.popup {
    font-size: 2.5em;
    font-stretch: 1;
    left: 15%;
    width: 70%;
    overflow-y: visible;
    max-height: 93vh;
    padding: 30px;
    background-color:white;
}

/* Display of the scrollbar in the popup*/
::-webkit-scrollbar {width:40px;}


/* display of media buttons on popup */
button.img.play, button.img.activity {
    font-size: 30px;
    font-weight: bold;
    margin-top: 2vh;
    margin-left: 1vh;
    margin-bottom: 3vh;
}

/*Keeps media buttons from enlarging when hovered over*/
button.img:hover {
    border:3px solid yellow;
  transform: scale(1,1);
}
 button.img .icon {
     position:absolute;
     right:3px;
     bottom:3px;
     height:20%;
     width:8%;
 }

.popup button {
  margin: 3vh;
  display:inline-block;
  margin-left: -55;
}

#dismiss-popup {
    color: white;
    margin-left: 1vh;
    background: red;
    width: 3vw;
}

span.english-keyword {    word-break: break-word;
}

 /* @media for smartphones

 @media screen and (max-device-height:800px) {
    button.img img {display:none;}
 } */
 /* @media for smartphones */

 @media screen and (max-device-height: 480px) and (orientation:landscape) , screen and (max-device-width:480px) and (orientation:portrait) {
    
     .timeline ol li div {font-size: 0.8vw;}
     h1{font-size: 4vw;}
     .searchBar{left: 15vw;}
     .dropbtn{height: 17vh;}
     .button.img.play, button.img.activity {font-size: 3vw}
 }