style.css

html, body {
	background-color: #caccce;
	margin-top: 45px; 
}

.mainContainer {
  display: flex;
  justify-content: center;
}

.mainContainer > div {
  flex: 1; /*grow*/
}

.leftContainer {
	text-align: right;
}

.rightContainer {
	text-align: left;
	padding-right: 30px; 
}

.gindex {
	border-radius: 3px;
	font-size: 18px;
	padding: 4px 6px 4px 6px;
	margin-top: 1px;
	position: relative;
	left: 1px; 
	overflow: hidden;  
}

.gindex-low {
	background-color: #009933;
}
.gindex-medium {
	background-color: #ff9933;
}
.gindex-high {
	background-color: #cc0000;
}

.displayedIndex {
	position: absolute;
	right: 4px;         
}

.displayedName {
	padding-right: 3px;
	overflow: hidden;   
	float: left; 
	width: 97%;  
	line-height: normal;
}

.myheader {
	text-align: center;
	margin-bottom: 80px; 
	margin-top: 55px;
	background-color: #caccce;
} 

 .input-group {
	width: 92%;  
	margin:0 auto;
	margin-bottom: 80px;
} 

 .results-container {
	width: 92%; 
	margin:0 auto;
} 

.glyphicon {
	color: red;	
} 

#textInput {
	height: 46px;
	padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
	text-indent: 15px; 
} 

.footerContainer {
	position: fixed;
	bottom: 0px;  
	width: 100%;
	text-align: center;
	padding-top: 5px;
	font-size: 12px;
	opacity: 1;
	background-color: #caccce;
}   

.dot {
	border-radius: 50%;
	width: 35px;
	height: 35px; 
	margin-right: 5px;
}
.dot-greenDot {
	color: #009933;
	background-color: #009933;
} 
.dot-orangeDot {
	color: #ff9933;
	background-color: #ff9933;
}
.dot-redDot {
	color: #cc0000;
	background-color: #cc0000;
}