/*	Basic
	================================================ */

		div[suggestions] {
			border: 1px solid rgb(127, 157, 185);
			font-family: sans-serif;
			font-size: 1em;
			cursor: default;
			box-sizing: border-box;
		}

		div[suggestions] p {
			margin: 0;
			padding: .5em .5em;
		}

		div[suggestions] p.hover {
			background-color: lightblue;
		}

/*	Form
	================================================ */

		form#sample {
			padding: 1em;
			border: thin solid #ccc;
			background-color: #ddd;
			box-shadow:
				1px 1px 1px #666 inset,
				-1px -1px 1px #fff inset;
			border-radius: 8px;
		}

		form#sample input {
			box-sizing: border-box;
			width: 100%;
			font-size: 1.2em;
border: thin solid #666;
border-radius: 4px;
box-shadow: inset 1px 1px 1px #666;
			padding: .5em 1em;;
		}
		label {
			font-wieght: bold;
			color: #666;
			font-size: 1.5em;
			text-shadow:
				2px 2px 4px #888,
				0 1px 1px white;
		}

		form#sample button {
			border: thin solid #999;
			font-size: 1.2em;
			padding: .5em .75em;
			padding: calc(.5em + 2px) .75em calc(.5em - 2px);
			border-radius: .25em;
			background-color: #eee;
	    background-image: linear-gradient(to bottom,#eee,#bbb);
			background-size: 100% 200%;
			background-position: 0 0%;
			transition: background-position 1s;
	    color: #666;
			font-weight: bold;
			text-shadow: 0 1px 1px #fff;
			width: 100%;
			box-shadow:
				-1px -1px 1px #333 inset,
				1px 1px 1px white inset;
			position: relative;
		}

		form#sample button:active {
			background-position: 0 100%;
			box-shadow:
				-1px -1px 1px #ddd inset,
				1px 1px 1px #333 inset;
			top: 1px;
			animation: none !important;
		}

		form#sample button:hover {
			animation: pulse-gradient 2s infinite alternate;
		}

		@keyframes pulse-gradient {
			from {
				background-position: 0 0;
			}
			to {
				background-position: 0 100%;
			}
		}

/*	Suggestions
	================================================ */

		div[suggestions] p {

		}

		div[suggestions] p {

		}