#crossword {
    width: 100%;
}

.square {
   float:left;
   position: relative;
   width: 7.14%;
   padding-bottom: 7.14%; /* = width for a 1:1 aspect ratio */
   margin:0%;
   overflow:hidden;
}

.content {
   position:absolute;
   height:100%;
   width:100%;
   border:1px solid black;
}

.contentlarge {
   position:absolute;
   height:100%;
   width:100%;
   border:1px solid black;
}


.contentwhitebackground {
   position:absolute;
   height:100%;
   width:100%;
   background-color:#ffffff;
   border:1px solid black;
   text-align:center
   }

.contentblackbackground {
   position:absolute;
   height:100%;
   width:100%;
   border:1px solid black;
   background-color:#000;
}

.contentbluebackground {
   position:absolute;
   height:100%;
   width:100%;
   background-color:#00ccff;
   border:1px solid black;
   text-align:center;
}

.contentgreenbackground {
   position:absolute;
   height:100%;
   width:100%;
   background-color:#0000ff;
   border:1px solid black;
   text-align:center;
}

.contentsabsolutetopleft {
   position:absolute;
   border-style: none;
   height:90%;
   width:90%;
}

.contentsabsolutetop {
   display:table-cell;
   vertical-align: top;
   height:100%;
   width:100%;
}

input[type=input] {

   position:absolute;
   text-transform:uppercase;
   outline: none;
   background-color:#0099ff;
   border-style: none;
   border-radius: 0 0 0 0;
   border:0 0 0 0;
   height:100%;
   width:100%;
   font-size:1em;
   text-align:center;
}

.inputfont {
  font-size:100%;
  vertical-align:middle;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   color:    #000000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #000000;
  opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #000000;
  opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:   #000000;
}



.contentsrelative {
   position:relative;
   border-style: none;
   height:100%;
   width:100%;
}


.table{
   display:table;
   height:100%;
   width:100%;
}

.textcell {
   height:100%;
   width:100%;
   position:relative;   
}

.textcell  .text{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.textcell  .number{
   position: absolute;
   top: 2%;
   left: 2%;
   font-size:50%;
}