figure.diagram-container
  margin: 15px 0 15px 0
  text-align: center
  width: 100%
  display: block
  .diagram
    display: block
    width: 50%
    margin-left: auto
    margin-right: auto
    @media screen and (max-width: 630px)
      width: 75%
  .diag12
    float: left
    width: 42%
    margin: 0 2% 0 6%
    @media screen and (max-width: 630px)
      width: 49%
      margin: 0 1% 0 0
  .diag22
    float: left
    width: 42%
    margin: 0 6% 0 2%
    @media screen and (max-width: 630px)
      width: 49%
      margin: 0 0 0 1%
  figcaption
    display: block
    clear: both
    padding-top: 5px
    font-size: 0.8em

p.boxed
  background-color: #FFCC66
  padding: 5px

.warning
  background-color: lightyellow
  color: red
  font-weight: bold

.bigfont
  font-size: 1.2em

.bold
  font-weight: bold

.stageDelimiter
  color: purple

// To show (new) pieces, and/or there values...
figure.showPieces > img
  width: 50px

figure.showPieces > figcaption
  color: #6C6C6C

.section-title
  padding: 0

.section-title > h4
  padding: 5px

ol, ul:not(.browser-default)
  padding-left: 20px

ul:not(.browser-default)
  margin-top: 5px

ul:not(.browser-default) > li
  list-style-type: disc

table.rules
  margin: 15px auto

.italic
  font-style: italic

img.img-center
  display: block
  margin: 0 auto 15px auto