body {
	font-family: sans-serif;
	color:#555555;
	line-height: 1.5em;
}

a {
	text-decoration: none;
	color: #555555;
	font-weight: bold;
}

a:hover {
	color:red;
}

p {
	margin: 8px;
}

h4 {
	margin: 10px 0px;
}

#input-label,input{
	font-size: 20pt;
	color:#555555;
}

input[type="text"]{
	width: 75%;
	height: 40px;
	padding-left: 15px;
	border-radius: 40px;
	border: 3px solid #bbb;
	-webkit-transition: 0.5s;
	box-sizing: border-box;
}

input:focus{
	border: 3px solid #999;
	outline: none;
}
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.container{
	width: 75%;
	margin: auto;
}

.left-panel{
	float: left;
	width: 60%;
	padding-right: 15px;
	box-sizing: border-box;
}

.right-panel{
	float: left;
	width: 40%;
	box-sizing: border-box;
}

.bottom-panel{
	margin-top: 230px;
}

hr{
	margin-block-start:1em;
	margin-block-end:1em;
}

table{
	border-spacing: 0px;
	width: 100%;
}

th,td{
	padding: 0px;
	font-weight: normal;
	text-align: left;
}

footer{
	text-align: center;
	font-size: small;
	margin-top: 60px;
}

#transcript{
	float: left;
	width: 60%;
	padding: 10px;
	box-sizing: border-box;
}

#results{
	float: left;
	width: 40%;
	padding: 10px
	box-sizing: border-box;
}

.button {
	padding: 5px 10px;
	border: 3px solid #ddd;
	border-radius: 40px;
	font-size: 16;
	-webkit-transition: 0.5s;
}

.button:hover {
	background:#aaa;
	border: 3px solid #aaa;
	color:white;
	-webkit-transition: 0.5s;
}
