styles.css

/*Created By: Yuserah Din, Chandni Patel, John Roxas
	Date: 04/22/2019
	Business Finder
	Software Capstone Class

	Yuserah Din: Implemented the API. Added a searchbox and functionality to 
    search for businesses based on input location.
    
    Chandni Patel: Expanded the app to include the capability to search for
    various businesses. (Originally, it was only a restaurant finder.)

    John Roxas: Added searchbox and functionality for radius-based search. 
    Added a homepage and store addresses for each location. 
*/

h1 {
	font-family: Serif;
	font-size: 7em;
	color: white;
	text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;

}

#indexpage {
	background-color: #ecf0f1;
	background-image: url("city.jpeg");	/*Photo by Fancycrave.com from Pexels*/
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

html {
    height: 100%;
}

.button1 {
	border: 4px solid black;
	height: 70px;
	width: 250px;
	font-size: 24px;
	font-family: Open Sans;
	font-weight: bold;
	border-radius: 15px;
}

.button1:hover {
	background-color: #3498db;
	color: white;
}

.center {
	margin: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#mainpage, #map {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#input {
	height: 8%;
	position: absolute;
	left: 15%;
}

#tbl{
	height: 100%;
	width: 100%;
	text-align: center;
	font-size: 100%;
	background-color: #ffffff;
}

#searchBox, #searchBox2, #startSearch {
	height: 50%;
	width: 100%;
	text-align: center;
	font-size: 100%;
}

#map{
	height: 90%;
	width: 85%;
	position: absolute;
	top: 10%;
	left: 15%;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 15%;
	background-color: #f1f1f1;
	position: fixed;
	height: 100%;
	overflow: auto;
	font-family:verdana;
}

li a {
	display: block;
	color: #000;
	padding: 8px 16px;
	text-decoration: none;
}

li a:hover {
	background-color: #4CAF50;
	color: white;
}

li b{
	display: block;
	color: #000;
	padding: 10% 16px;
	text-decoration: none;
	background-color: #cccccc;
}

#searchword{
	font-family:verdana;
	color:#4CAF50;
	font-size: 100%;
}

.button2 {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 100%;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.button2:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}