body {

  font-family: 'Noto Sans', sans-serif;

  background: #f7f7f7;
}
.br {
  border: 1px solid;
}
.controls{
  background:#F7F7F7;
}
ul.controls {
  margin: 20px;
  background-color: #EEEEEE;
  float: left;
  list-style-type: none;
}
.controls ul li {
  display:inline-block;
  margin: 0;
  list-style: none;
  background-image: url("/images/control.png");
}
.controls ul li img {
  display: block;
  margin: 0;
  padding:0;
}

/*Timeboard*/

.text-center{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scoreboard {
  border: 1px solid #e2e2e2;
  padding: 5px;
}
.timeon {
  background: #F7F7F7;
  border: 1px solid #e2e2e2;
  color:#707070;;
}
.timeon-c {
  background: #d7d7d7;
  border: 1px solid #e2e2e2;
  color:#404040;
}
.timeon h2 {
  color:#707070;
  font-weight: bold;
  font-family: 'Noto Sans', sans-serif;
}
.timeboard {
  margin-top:5px;
}
.timeboard h2{
  margin: 2px;
}
.fa-circle {
  margin-left: 10px;
  margin-right: 10px;
}
.username {
  border: 1px solid #e2e2e2;
  margin-top: 5px;
}
.username h5 {
  color: #747474;
  margin: 5px;
}
.moves {
  height: 250px;
  border: 1px solid #e2e2e2;
  margin-top: 5px;
  overflow-y:scroll;
}
.scores {
  margin: 2px;
  width: 98%;
}
.scores tr td:nth-child(1){
  border: 0;
  width: 18%;
  background:#EEEEEE;
  color:#707070;
  padding: 4px;
  overflow-x: hidden;
}
.scores tr td:nth-child(2){
  border: 0;
  width: 39%;
  color:#707070;
}
.scores tr td:hover:nth-child(2){
  border: 0;
  background: #EEEEEE;
  width: 39%;
  color:#707070;
}
.scores tr td:nth-child(3){
  border: 0;
  width: 39%;
  color:#707070;
}
.scores tr td:hover:nth-child(3){
  border: 0;
  background: #EEEEEE;
  width: 39%;
  color:#707070;
}
.progresblock {
  width: 100%;
  background-color: #ddd;
}

.progresbar {
  width: 11%;
  height: 5px;
  background-color: #139818;
}
.on {
  width: 10px;
  height: 10px;
  border-radius: 200px 200px 200px 200px;
  -moz-border-radius: 200px 200px 200px 200px;
  -webkit-border-radius: 200px 200px 200px 200px;
  background: #8eaa30;
  margin: 0px auto;
}
.blockon {
  width: 25px;
  display: inline-block;

}
.blockuser {
  display: inline-block;
}

/*Controls*/

/* DivTable.com */
/*.divTable1{*/
/*display: table;*/
/*width: 100%;*/
/*}*/
/*.divTableRow1 {*/
/*display: table-row;*/
/*}*/
/*.divTableHeading1 {*/
/*background-color: #EEE;*/
/*display: table-header-group;*/
/*}*/
/*.divTableCell1, .divTableHead1 {*/
/*border: 1px solid #edecec;*/
/*display: table-cell;*/
/*width: 30px;*/
/*height: 30px;*/
/*}*/
/*.divTableHeading1 {*/
/*background-color: #EEE;*/
/*display: table-header-group;*/
/*font-weight: bold;*/
/*}*/
/*.divTableFoot1 {*/
/*background-color: #EEE;*/
/*display: table-footer-group;*/
/*font-weight: bold;*/
/*}*/
/*.divTableBody1 {*/
/*display: table-row-group;*/
/*}*/
/*.divTableRow1 .divTableCell1 img {*/
/*display: block;*/
/*margin-left:auto;*/
/*margin-right:auto;*/
/*width:30px;*/
/*height:30px;*/
/*}*/
.board {
  margin-top: 5px;
}

/* DivTable.com */
.divTable2{
  display: table;
  width: 300px;
  border: 1px solid;
}
.divTableRow2 {
  display: table-row;
}
.divTableHeading2 {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell2, .divTableHead2 {
  display: table-cell;
  width: 30px;
  height: 30px;
  background-image: url("../images/control.png");
  background-repeat: no-repeat;
}
.divTableHeading2 {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot2 {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody2 {
  display: table-row-group;
}
.divTableRow2 .divTableCell2 i {
  display: block;
  margin-left:auto;
  margin-right:auto;
  width:30px;
  height:30px;
}

.main_board_cnt {
  position: relative;
  margin: auto;

}

@media (min-width: 100px) and (max-width: 400px) {
  .main_board_cnt{ width: 95%;}
}
@media (min-width: 400px) and (max-width: 600px) {
  .main_board_cnt{ width: 90%;}
}
@media (min-width: 600px) and (max-width: 800px) {
  .main_board_cnt{ width: 50%;}
}
@media (min-width: 800px) {
  .main_board_cnt{ width: 35%;}
}