/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */

/* Form style */

/* 
 * Optional: Makes the sample page fill the window. 
 */

/* ############################################# */
/* MAIN STYLE
/* ############################################# */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  bottom: 70px;
  background: #ffffff;
}

#footer {
  position: fixed;
  overflow: hidden;
  bottom: 0;
  width: 100%;
  vertical-align: middle;
  height: 65px;   /* Height of the footer */
  background: #327ba4;
}

/* ############################################# */
/* FAT Search, Results, and Profile
/* ############################################# */

.map-wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

#search-box{
    background: #ffffff;
    position: fixed;
    overflow:hidden;
    padding-top: 4px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    border-color: coral;

    width: 400px;
    top: 0;
    height: 40px;
    opacity: 1;
    
    color: #000000;
    
    /*extra stuff you need*/
    top: 16px; bottom: 16px; left: 10px;/*or if you want to go to the edges switch from 16px to 0*/
}
#search-results{
    background: #ffffff;
    position: fixed;
    overflow: scroll;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    border-color: coral;

    width: 400px;
    top: 0;
    height: auto;
    opacity: 1;
    filter: alpha(opacity=90);
    color: #000000;
    
    /*extra stuff you need*/
    top: 66px; bottom: 16px; left: 10px;/*or if you want to go to the edges switch from 16px to 0*/
}

#quick-profile{
    background: #ffffff;
    position: fixed;
    overflow: scroll;
    padding-top: 0px;
    padding-left: 2px;
    border: 1px solid #000;
    border-radius: 5px;
    border-color: coral;

    width: 400px;
    top: 0;
    height: auto;
    opacity: 1;
    filter: alpha(opacity=90);
    color: #000000;
    
    /*extra stuff you need*/
    top: 16px; bottom: 16px; left: 430px;/*or if you want to go to the edges switch from 16px to 0*/
}


/* ############################################# */
/* FROM GOOGLE */
/* ############################################# */
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


/* ############################################# */
/* Form fields and button style */
/* ############################################# */

input[type=text]
{
  width: 330px;
  padding: 0px 5px;
  margin: 0px 0;
  height: 36px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 60px;
  height: 36px;
  background-color: #4CAF50;
  color: white;
  padding: 0px 5px;
  margin: 0px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}