@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Gentium+Book+Basic&subset=latin,latin-ext);

div.crossword {
    padding: 16px;
}

div.crossword table {
  border-collapse: collapse;
  table-layout: fixed; 
  margin: 0 auto;
  box-shadow:  7px 7px 10px 0px rgba(50, 50, 50, 0.75);
}
div.crossword td {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  height: 80px;
  min-height: 80px;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align: center;
  border: 1px solid #000000;
  overflow: hidden;
}
div.crossword td.writing  input {
  font-family: 'Shadows Into Light Two', cursive;
  font-size: 48px;
  color: #444480;
}
div.crossword td.printed   {
  font-family: 'Gentium Book Basic', serif;
  font-size: 12px;
}
div.crossword td.solution {
  background-color: #F7F3B5;
}
div.crossword td.symbol {
  background-color: #D6D7D6;
  font-weight: bolder;
}
div.crossword td.none {
  border: none;
}
div.crossword td.clue {
  background-color: #D6D7D6;
  color: #000000;
  word-wrap: break-word;
  text-overflow: hidden;
}
div.crossword td.letter {
  background-color: #FFFFFF;
}
div.crossword td.selected {
  background-color: #FFC0C0;
}
div.crossword td.active {
  background-color: #FFE1E1;
}	
div.crossword td.clue div.sep  {
  border-top: 1px solid #000000;
  margin-top: 3px;
  padding-top: 1px;
}
div.crossword td.clue div.vert,
div.crossword td.clue div.hor {
  padding: 3pt 4px;
  line-height: 1;
}

div.crossword td span.num {
	position: absolute;
	margin: 2px 0 0 6px;
	font-family: 'Gentium Book Basic', serif;
	font-size: 20px;
}


div.crossword input{
	width: 80px;
	outline: none;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	text-align: center;
	vertical-align: middle;
}

div.crossword .numletters {
	display: flex;	
	margin-top: 16px;
	padding: 16px 10%;
	flex-wrap: wrap;
}

div.crossword .numletters > div {
	display: inline-block;
	border: 1px solid #A0A0A0;
	margin: 2px;
}

div.crossword .numletters > div > span {
	width: 32px;
	display: inline-block;
	text-align: right;
	padding-right: 8px;
	border-right: 1px solid #A0A0A0;
	font-family: 'Gentium Book Basic', serif;
	font-size: 18px;
}

div.crossword .numletters input {
	width: 38px;
	display: inline-block;
	font-family: 'Shadows Into Light Two', cursive;
	font-size: 22px;
	color: #444480;
}