examples.css

/* Unrelated to chessground; only for the examples page */

body {
  background: #1c1c1c;
  color: #b0b0b0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

a {
  color: #bbbbdd;
  text-decoration: none;
}

h4 {
  text-align: center;
}

div {
}

select,
input {
  margin: 4px;
  background-color: black;
  color: #cccccc;
  border-radius: 3px;
  border: 1px solid #555;
  padding-left: 2px;
}

#Search {
  background-color: lightgrey;
  color: black;
}

.addWhite {
  color: lightgrey;
  background-color: #666;
  width: 42px;
  height: 34px;
  border-radius: 3px;
  background-image: linear-gradient(rgb(44, 44, 44), rgb(40, 40, 40) 100%);
  border: 1px solid #555;
  text-shadow: 0 1px 0 #000;
  font-size: large;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.addBlack {
  color: black;
  background-color: #666;
  width: 42px;
  height: 34px;
  border-radius: 3px;
  background-image: linear-gradient(rgb(44, 44, 44), rgb(40, 40, 40) 100%);
  border: 1px solid #555;
  text-shadow: 0 -1px 0 #999;
  font-size: large;
  margin: 0;
}

.editButtons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.inputs {
  background-color: #222;
  border-radius: 3px;
  padding: 2px;
  margin: 2px 2px;
}

.explorer {
  width: 32px;
  height: 32px;
  border: 1px solid #333;
  border-radius: 2px;
  background-color: grey;
}

.explorer:hover{
  border: 1px solid #aaa;
}

.win {
  background-color: green;
}

.drawn {
  background-color: gold;
}

.lose {
  background-color: red;
}

.explorerContainer {
  width: 256px;
  height: 256px;
  min-width: 256px;
  min-height: 256px;
  background-image: linear-gradient(rgb(44, 44, 44), rgb(40, 40, 40) 100%);
  border: 1px solid #555;
  border-radius: 2px;
}

.status {
  margin-top: 4px;
  background-image: linear-gradient(rgb(44, 44, 44), rgb(40, 40, 40) 100%);
  border: 1px solid #555;
  border-radius: 2px;
  text-shadow: 0 1px 0 #000;
  padding: 10px;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 100%;
}

.all {
  width: 744px;
  display: grid;
  grid-template-columns: 464px 260px;
  position: absolute;
  margin: auto;
  top: 20;
  right: 0;
  left: 0;
}

.cellleft {
  width: 100%;
}

.cellright {
  width: 100%;
  background-image: linear-gradient(rgb(44, 44, 44), rgb(40, 40, 40) 100%);
  border: 1px solid #555;
  border-radius: 2px;
  text-shadow: 0 1px 0 #000;
  padding: 10px;
}

.fen {
  display: block;
  margin-left: 0;
  margin-right: auto;
  width: 96%;
}