html,body,table,select,p,div,span,td,li {
  font-family: Verdana, Tahoma, Helvetica, Arial;
  /*font-size: 14px; */
}

.widebody {
  margin:0px;
}

.monofont {
  font-family: monospace, monospace;
}

.gamewrapperdiv {
  width:500px;
  padding:0px;
  margin:auto;
  /*background-color:red; */
}

.topbar {
  padding-bottom:8px;
  width:360px;
  margin:auto;
}

#summarydiv {
  padding:8px;
  font-weight:bold;
}

.displayframe4 {
  margin:auto;
  width:264px;
  height:392px;
  /* background-color:red; */
  display : grid;
  grid-template-columns: repeat(4, 1fr);
}

.displayframe5 {
  margin:auto;
  width:330px;
  height:392px;
  /* background-color:red; */
  display : grid;
  grid-template-columns: repeat(5, 1fr);
}

.displayframe6 {
  margin:auto;
  width:396px;
  height:392px;
  /* background-color:red; */
  display : grid;
  grid-template-columns: repeat(6, 1fr);
}

/* color of inactive/used cells */

.dispcell {
  border:1px solid #c0c0c0;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  vertical-align:middle;
  font-size:200%;
  font-weight:bold;
  cursor:pointer;
}

/* color of active entry cell */

.cellhighlight {
  background-color: #c0c0f0;
}

/* match state colors */

.exactmatch {
  border-color: transparent;
  background-color:#20c020;
  color:white;
}

.inwordmatch {
  border-color: transparent;
  background-color:#c0c020;
  color:white;
}

.nomatch {
  border-color: transparent;
  background-color:#808080;
  color:white;
}

.keydiv {
  /* background-color:black; */
  padding-top:4px;
}

.keyboardspan {
  display: inline-block;
  border-radius: 5px;
  margin:2px;
  font-weight:bold;
  font-size:120%;
  /* color:white; */
  /*background-color:#c0c0c0; */
  height:48px;
  line-height:48px;
  padding:4px;
  padding-left:14px;
  padding-right:14px;
  text-align:center;
  vertical-align:middle;
  fonr-weight:bold;
  cursor:pointer;
  /* prevent selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.keydefault {
  color:black;
  background-color:#c0c0c0;
}


.buttonrow {
  margin-top:8px;
}

.controlbutton {
  padding:8px;
  background-color:#c0c0c0;
  font-weight:bold;
  border:0px;
  border-radius: 5px;
  cursor:pointer;
}

.buttonlabel {
  color: white;
}

.inversetext {
  color: white;
}

.textbox {
  padding:4px;
}

.bestwordscroll {
  width:200px;
  height:220px;
  overflow-y:auto;
}

.optionsmenu {
  display:none;
  margin-bottom:6px;
}

.myiframe {
  width:100%;
  height:200px;
  overflow-x:scroll;
}

.unusedchar {
  /* background-color: #a0a0a0; */
  border:1px solid #c0c0c0;
}

.usedchar {
  background-color: #20c020;
  color: white;
  
}

.unusedchar,.usedchar {
  width:40px;
  height:40px;
  text-align:center;
  font-size:140%;
  font-weight:bold;
  /* border-radius: 5px; */
}

.gametable {
  border-spacing:4px;
  border-collapse:separate;
}

/* this is enabled for layout debugging */

.displayframe5, .displayframe6, .keydiv, .topbar {
  /* background-color:red; */
}