#puzzle-wrapper {
	font: 62.5%/1.3em Helvetica, sans-serif;
	width: 90.3%;
	margin: 10px auto;
}
table#puzzle  {
	border-collapse: collapse;
	border-spacing: 0;
	max-width: 100%;
	border: 6px solid grey;
    margin-left: auto;
    margin-right: auto;
}
table#puzzle  tr {
	width: 100%;
}
table#puzzle td {
	width: 5em;
	height: 5em;
	border: 1px solid #cdcdcd;
	padding: 0;
	margin: 0;
	background-color: #333;
	position: relative;
	min-width: auto !important;
}
#puzzle td input {
	width: 100%;
	height: 100%;
	padding: 0em;
	border: none;
	text-align: center;
	font-size: 3em;
	color: #666;
	background-color: #f4f4f4;
    overflow: hidden;
}
#puzzle td input:focus {
	background-color: rgb(254, 246, 5);
}
#puzzle td span {
	color: #444;
	font-size: 1.1em;
	position: absolute;
	top: -1px;
	left: 1px;
	font-weight: bold;
}
#puzzle td input.done {
	font-weight: bold;
	color: green;
}
#puzzle td input.active, .clues-active {
	background-color: rgb(249, 237, 101);
}
.clue-done {
	color: #999;
	text-decoration: line-through;
}

#puzzle-wrapper {
	float: none;
	width: 100%;
}


#puzzle-clues {
	float: none;
	width: 100%;
}
 @media screen and (min-width:950px) {
#puzzle-wrapper {
	float: left;
	width: 54%;
	margin: 0%;
	margin-right:3%;
}
#puzzle-clues {
	float: left;
	width: 40%;
}
}
 
#puzzle-clues ul li {
	font-size: 1.2em !important;
    margin: 0.2em !important;
    line-height: 1.6em !important;
    list-style: none;
    padding: 0.3em !important;
    border-radius: 9px;
}

#wordbank div{
    display: inline-block;
    padding: 8px;
    background: #EEEEEE;
    margin: 8px;
	border-radius: 8px;
}
input {
	border-radius: 0px;
}