style.css.orig

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  background: #fbf9f1;
}

p, button, input {
  font-size: 14pt;
  font-family: "Times New Roman";
}

button {
  background-color: #86193d;
  border-radius: 5px;
  color: white;
  padding: 2%;
}

button:hover {
  cursor: pointer;
  background-color: #c8255b;
}

input {
  margin: 2%;
}

#home-page, #city-page {
  height: 100%;
}

.text-danger {
  color: #86193d;
}

.container {
  margin-left: auto;
  margin-right: auto;
}

.header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.header h1 {
  font-size: 4em;
  font-family: "Apple Chancery";
  color: white;
}

.home {
  background-image: url("pic/beach.jpg");
  height: 60%;
}

.home h1 {
  padding-top: 10%;
}

.mask {
  height: 100%;
  background-color: rgba(10, 66, 148, 0.5);
}

.mask p {
  font-size: 25px;
  color: white;
}

.login {
  width: 30%;
  margin-top: 2%;
  text-align: center;
}

.login button {
  width: 30%;
  margin: 2%;
}

.cities {
  width: 80%;
  height: 30%;
  margin-top: 2%;
  text-align: center;
}

.city-block {
  position: relative;
  width: 20%;
  height: 80%;
  margin: 2%;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#sfo {
  background-image: url("pic/sfo.jpg");
}

#nyc {
  background-image: url("pic/nyc.jpg");
}

#chi {
  background-image: url("pic/chi.jpeg");
}

#la {
  background-image: url("pic/la.jpg");
}

.city-block .mask {
  position: absolute;
  padding: 2%;
  width: 96%;
  height: 20%;
  bottom: 0;
  background-color: rgba(134, 25, 61, 0.6);
}

.city-block:hover>.mask {
  vertical-align: middle;
  height: 95%;
}

.city-block:hover p {
  cursor: pointer;
  padding-top: 30%;
  padding-bottom: 30%;
}

#nav {
  float: right;
  width: 13%;
}

#nav p {
  margin: 3%;
  padding: 5%;
  font-size: 14pt;
  display: inline-block;
}

#nav p:hover {
  cursor: pointer;
  border-radius: 5px;
  background-color: #86193d;
}

.city {
  background-image: url("pic/sfo.jpg");
  height: 25%;
}

.city h1 {
  padding-top: 4%;
}

.city .mask {
  background-color: rgba(10, 66, 148, 0.6);
}

.content {
  width: 70%;
  margin-top: 1%;
}

.sideBar {
  float: left;
  width: 22%;
  height: 350px;
  color: white;
  padding: 2%;
  border-radius: 5px;
  background-color: #86193d;
}

.main {
  float: right;
  width: 73%;
  height: 374px;
}

.main button {
  width: 49%;
}

.main p {
  margin-top: 2%;
}

.trip {
  background-image: url("pic/beach.jpg");
  height: 25%;
}

.trip h1 {
  padding-top: 4%;
  padding-bottom: 1%;
}

#result{
  height: 330px;
  overflow: auto;
}


#depart{
  width:100%;
}

.sideBar input{
  width: 100%;
}

#trip-type input{
  width: auto;
}

#trip-type{
  margin-top:1em;
}

#search{
  margin-top: 1em;
}

#trip-date input{
  font-size: small;
}

#trip-date{
  margin-top:1em;
}

#buttom-b{
  margin-top:0.5em;
  width: 100%;
}

#buttom-b button{
  float: right;
  width: auto;
}

#result button{
  padding: unset;
  width: 3em;
  float: right;
}

.flight{
  overflow: auto;
  width:98%;
}

.flight span{
  vertical-align: middle;
}

#selected1,#selected2{
  background-color:#c8255b;
  width:4em !important;
}

<<<<<<< HEAD

/*------ autocomplete --------------*/

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}


input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  color: black;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
=======
/* TODO: style for restaurant */
#rest-nearby, #rest-nearby, #rest-nearby{ 
/* !!!!!!!!!!: DON KNOW WHY THIS DOES NOT WORK */
	display: inline;
	padding: 10px;
}

.rest-panel{
	width: 560px;
	height: 800px;
	margin-left: 0%;
	padding: 25px;
}
.rest-header{
	padding: 10px;
	background-color: #ffe4b2;
	border-bottom: 2px solid;
    box-shadow: 1px 2px 4px;
	margin-top: 2%;
    border-radius: 3px;
}

/* Set the size of the div element that contains the map */
#map {
	height: 300px;  
	width: 760px;
	margin-top: 1%;
	margin-left: 1%
 }
>>>>>>> 3675d53bb5cea293c403af88f9af7e398c6e34ec