/* CSS for How To sections */
.howto {
  display: none;
  height: 70%;
  left: 20%;
  position: absolute;
  top: 16%;
  width: 60%;
  z-index: 100;
}

#iframe {
  border: none;
  height: 100%;
  overflow: auto; 
  position: absolute; 
  top: 0%;
  width: 100%;
}

.closebtn {
  border: none;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5vh;
  line-height: 3.5vh;
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 100;
}

/* Custom CSS for How To sections */
.backgammon-c {
  background: #a8e6cf;
  color: #2ab7ca;
}

.battleship-c {
  background: lightgray;
  color: black;
}
.boggle-c {
  background: white;
  color: #f57921;
}

.TEMPLATE-cardsHowTo-c {
  color: darkgreen;
}

.catan-c {
  background: #f9ce05;
  color: #c61e2b;
}

.checkers-c, .scrabble-c {
  background-image: url(resources/objects/backgroundWoodLightLarge.png);
  color: black;
}

.black {
  color: black;
}

.chess-c, .chinesecheckers-c, .monopoly-c {
  background: white;
  color: black;
}

.clue-c {
  background: #a4be91;
  color: #54181b;
}

.connectfour-c {
  background: gold;
  color: blue;
}

.euchre-c {
  background: #949599;
  color:  #f8e00e;
}

.index-c {
  background: #064789;
  color: #679436;
}

.kanoodle-c {
  color: black;
}

.memory-c {
  background: #122463;
  color: #c61e2b;
}

.mexicanTrainHowTo-c {
  background: #452925;
  color: #be302f;
}

.mona-c {
  color: darkblue;
}

.monopolyDeal-c {
  background: black;
  color: #E1423C;
}

.sequence-c {
  background: #122463;
  color: white;
}

.skipbo-c {
  background: #250F57;
  color: #d72a84;
}

.uno-c {
  background: black;
  color: yellow;
}

.war-c {
  background: red;
}

.white-c {
  color: white;
}

.red-x {
  color: red;
}

.blue-x {
  color: #292c7b;
}