/*
This is the style file for the main tool page.
Programmer: Austin Shawaga (University of Calgary)
*/

#page_head_title{
  max-width:50%;
  font-family:"Lucida Console", "Courier New", monospace;
}
body{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

header{
  padding:20px 10px;
  margin: 0;
  top: 0;
  left:0;
  display: block;
  background-color: lightgrey;
  border-bottom: 2px solid black;

}
#logo{
  max-width: 100px;
  max-height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 1px;
  margin-right: 1px;
  padding: 6px;
  border: 2px solid black;
  transition: background-color 0.4s;
}

#logo:hover{
  background-color: linen;
}

#nav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: dimgrey;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top:0;
}


#nav li{
  float: left;
}

#nav li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* removes underline*/
  background-color: dimgrey;
  color:white;
  transition: background-color 0.5s ease-out;
}

#nav li a.active{
  background-color: green;
}

#nav li a:hover:not(.active){
  background-color: black;
}

.centered_content {
  width:100%;
  display: flex;
  justify-content: center;
}

#API_Selection label, #API_Selection select, #API_Selection input{
  font-size: 17px;
}

#API_Selection select option{
  background-color: lightgrey;
}

.buttons{
  background-image: url('line.png');
  background-size: contain;
  background-repeat: repeat;
}

.buttons button{
  float left;
  margin: 0px 20px;
  padding: 5px;
  font-size: 15px;
  border-radius: 4px;
  border: 1px solid black;
  background-color: rgb(250, 249, 246);
  transition: background-color 0.4s,transform 0.4s;
}
.buttons button.selected{
  background-color: lavender;
}
.buttons button:hover:not(.selected){
  background-color: lightgrey;
  transform: scale(1.1);
}

.row{
  width: 100%;
  max-height: 400px;
}
.column{
  float: left;
  width: 45%;
  margin: 10px;
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
  border: 2px solid blue;
}

footer{
  width: 100%;
  margin: 10px 60px;
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
  border: 2px solid DarkOrange;
}

/*Formats layout for phone screen*/
@media screen and (max-width: 600px) {
    #nav{
      position: static;
    }
    #nav li, .column {
      float: none;
    }

    .column, .row, footer, .centered_content{
      width: 100%;
      height: auto;
      margin: 5px 0;
    }

    .centered_content{
      flex-direction: column;
    }
}

/* Hides content by default
   Should be unhidden via javascript when appropriate*/
#API_Selection,#phase_2,#phase_3{
  display: none;

}