body {
	background:#f6f6f6;
	font: 16px/1.5em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	margin:0;
	padding:0;
	color:#333;
}
#container {
	margin:20px auto; 
	background:#fff;
	width:80%;
	padding:0 5%;
	max-width:600px;
	border:1px solid #c0c0c1;
	border-bottom-color:#a8aaac;
	border-top-color:#ccc;
	box-shadow:0 1px 0 #dfe0e1;
	border-radius:3px;
}
h1, h2 {
	padding:10px 0px;
	border-bottom:1px solid #eee; 
	padding-left:0;
	font-weight:300;
	line-height:1.1em;
}
h1 {color:#018ff3;}
ul {
	list-style-type:none; 
	margin:0; 
	padding:0; 
	position:relative;
}
li {
	margin:1.5em 0; 
	position:relative;
}
form {
	width:100%;
	margin: 20px auto 40px auto;
}
input {
	display:block; 
	width:100%; 
	padding:0.3em 0.1em;
	text-indent:5px;
	border: 1px solid #e1e3e3;
	border-bottom-color:#e5e5e6;
	box-shadow: 0 -1px 0 #a7aaad;
	border-radius:3px;
	font-size:16px;
	font-family:inherit;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
}

button {
	width:80%;
	max-width:300px; 
	margin:20px auto;
	display:block;
	border:1px solid #0c6eb3;
	box-shadow:0 1px 0 #ced0d1, 0 1px 0px #8cd1fd inset;
	padding:10px;
	color:#fff;
	font-weight:bold;
	border-radius:3px;
	background: #159efd; /* Old browsers */
	background: -moz-linear-gradient(top, #159efd 0%, #018ff3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#159efd), color-stop(100%,#018ff3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #159efd 0%,#018ff3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #159efd 0%,#018ff3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #159efd 0%,#018ff3 100%); /* IE10+ */
	background: linear-gradient(top, #159efd 0%,#018ff3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159efd', endColorstr='#018ff3',GradientType=0 ); /* IE6-9 */
}
.suggestion {
	line-height: 1.2em;
	font-weight:bold;
	position:absolute;
	top:-18px;
	left:100px;
	color:#fff; 
	border-radius:5px; 
	box-shadow:0 1px 0px #75797a inset, 0 1px 2px #555; 
	border:1px solid #000;
	font-size:12px;
	display:block;
	padding:8px 10px; /* must be same as li */
	background: #3a3e3f; /* Old browsers */
	background: -moz-linear-gradient(top, #3a3e3f 0%, #323637 50%, #292a2c 51%, #212224 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3e3f), color-stop(50%,#323637), color-stop(51%,#292a2c), color-stop(100%,#212224)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* IE10+ */
	background: linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3e3f', endColorstr='#212224',GradientType=0 ); /* IE6-9 */
}

.suggestion:hover {cursor:pointer;}
.suggestion::after {
	content: "\25BC";
	font-size:12px;
	position:absolute;
	bottom:-10px;
	left:50%;
	color:#000;
}
.suggestion:active, .suggestion:hover {
	background: #34abe8; /* Old browsers */
	background: -moz-linear-gradient(top, #34abe8 0%, #007fd1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34abe8), color-stop(100%,#007fd1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #34abe8 0%,#007fd1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #34abe8 0%,#007fd1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #34abe8 0%,#007fd1 100%); /* IE10+ */
	background: linear-gradient(top, #34abe8 0%,#007fd1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34abe8', endColorstr='#007fd1',GradientType=0 ); /* IE6-9 */
	box-shadow:0 1px 0px #83c7f0 inset, 0 1px 2px #555;
	border:1px solid #0075c0;
	border-left-color:#0168a9;
	border-right-color:#0168a9;
	border-bottom-color:#014773; 
}
.suggestion:active::after, .suggestion:hover::after {
	color:#0075c0;
}