body{
  padding: 0px;
  margin: 0px;
}

#requestfields{
  width: 100%;
}

#board{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

#leftcol{
  padding-bottom: 125px;
}



#board .gamespace{
  border: 1px solid #666;
  float: left;
  width: calc(4% - 2px);
  text-align: center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-color: #fff;

}

#board .gamespace:before{
  content:'';
    padding:50% 0;/* vertical value as  100% equals width */
    display:inline-block;
    vertical-align:middle; /* or whatever */
    margin: 0px;
}

#board .row{
  clear: both;
  width: 100%;
}

 .W{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-color: #000 !important;
}


.D{
  background-color: #090 !important;
}
.R{
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 background-color: #ccc !important;
 border: 1px solid #ccc !important;
}

.X{
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 background-color: blue !important;
 border: 1px solid #ccc !important;
}

@font-face {
    font-family: hp;
    src: url(/fonts/harry_p/HARRYP__.TTF);
}

.hp {
    font-family: hp;
    font-size: 3em;
    color: yellow;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 2px 2px 3px #ccc ;
}

.navbar{
  height: 10vh;
  background-color: #600;
  align-items: center;
  color: yellow;
  padding: 30px;
  background-image: url("/images/castle.png");
  background-repeat: repeat-x;
  background-position: center;
  background-position: center;
}

.availmove{
  background-color: yellow !important;
}

.curruser{
  font-weight: bold;
}

#playerlist{
  clear: both;
}

.activeplayer{
  font-weight: bold;
}

.nextplayer{
  color: green;
}

.red{
  background-color: #900 !important;
}

.purple{
  background-color: #909 !important;
}
.white{
  background-color: #999 !important;
}

.blue{
  background-color: #009 !important;
}
.green{
  background-color: #030 !important;
}

.yellow{
  background-color: #ffc !important;
}

#gamelog{
  width: 300px;
  height: 50vh;
  float: right;
}





#scoresheet{
  clear:both;
}



.scorenote{
  width: 7em;
}

#main{
height: 100vh;
padding-top: 12vh;

}

.messagelist{
    overflow-y: auto;
    overflow-x: hidden;
    height: 45%;
}


.logmessage{
  list-style-type: circle;
  padding-bottom: 7px;
}

.logmessage:first-of-type{
  font-weight: bold;
}

.sheetlabel{
  border-bottom: 1px solid black;
  padding-top: 3px;
}