body {
	background: #aaa;
	font-family: 'Segoe UI', sans-serif;
}

#main {
	background: #fff;
	border: 1px solid #fff;
	border-radius: 1em;
	padding: 3%;
	text-align: left;
	margin: 1em auto;
}
#main::after {
	content: " ";
	display: block;
	clear: both;
}
#game {
	float: left;
	max-width: 45%;
}

#gameboard {
	background: #f90;
	border: 0.2em solid #f90;
	border-radius: 0.4em;
	box-shadow: 2px 2px 2px #ccc;
	text-align: center;
}

#gameboard td {
	font: bold 2.5em/100% 'Arial', 'Helvetica', sans-serif;
	background: #fff;
	color: #006;
	width: 1.5em;
	height: 1.5em;
	border: .2em solid;
	border-color: #eee #ddd #bbb #ccc;
	border-radius: 0.2em;
}

#gameboard td.selected {
	background: #9f9;
	border-color: #cfc #6d6 #3c3;
}

#results {
	display: block;
	text-align: left;	
	margin: 0 0 0 5%;
	padding: 0;
	float: left;
	max-width: 50%;
}
#results button {
	background: #f90;
	color: #333;
	border-color: #fc0 #f90 #f90 #fc0;
	border-radius: .3em;
	border-width: 3px;
	font-family: "Segoe UI", sans-serif;
	padding: .2em .8em;
	text-shadow: -1px -1px 2px #fc0;
}
#results #endGameButton {
	display: none;
}
dt, dd {
	display: inline-block;
	margin: 0 1em 0 0;
}
dt {
	font-weight: bold;
}
dd {
	padding: 0;
	min-width: 5%;
}
#words {
	display: block;
	list-style: none;
	padding: 0;
}

#words li {
	display: inline-block;
	background: #ccc;
	padding: 0.3em 0.5em;
	border: 2px solid #bbb;
	border-radius: 0.3em;
	margin: 0 0.5em 0.3em 0;
}

#words li.invalid {
	background: #f66;
	border-color: #c33;
}

#entry {
	font-size: 1.5em;
	font-family: "Arial", "Helvetica", sans-serif;
	color: #006;
	border: 1px solid #ccc;
	border-radius: .2em;
	padding: .5em;
	text-transform: uppercase;
}
#entry::focus {
	border-color: #ccc;
}
footer {
	display: block;
	clear: both;
	font-size: x-small;
	text-align: center;
}
footer a {
	color: #333;
}

@keyframes shake-vertical-normal {0%, 100% { transform: translateY(0); } 10%, 30%, 50%, 70% { transform: translateY(-8px); } 20%, 40%, 60% { transform: translateY(8px); } 80% { transform: translateY(6.4px); } 90% { transform: translateY(-6.4px);} }

.shake { 
    animation: shake-vertical-normal 0.5s ease 0s 1 normal none; 
}