client/src/styles/_rules.sass

   1 figure.diagram-container
   2   margin: 15px 0 15px 0
   3   text-align: center
   4   width: 100%
   5   display: block
   6   .diagram
   7     display: block
   8     width: 50%
   9     margin-left: auto
  10     margin-right: auto
  11     @media screen and (max-width: 630px)
  12       width: 75%
  13   .diag12
  14     float: left
  15     width: 42%
  16     margin: 0 2% 0 6%
  17     @media screen and (max-width: 630px)
  18       width: 49%
  19       margin: 0 1% 0 0
  20   .diag22
  21     float: left
  22     width: 42%
  23     margin: 0 6% 0 2%
  24     @media screen and (max-width: 630px)
  25       width: 49%
  26       margin: 0 0 0 1%
  27   figcaption
  28     display: block
  29     clear: both
  30     padding-top: 5px
  31     font-size: 0.8em
  32
  33 p.boxed
  34   background-color: #FFCC66
  35   padding: 5px
  36
  37 .warning
  38   background-color: lightyellow
  39   color: red
  40   font-weight: bold
  41
  42 .bigfont
  43   font-size: 1.2em
  44
  45 .bold
  46   font-weight: bold
  47
  48 .stageDelimiter
  49   color: purple
  50
  51 // To show (new) pieces, and/or there values...
  52 figure.showPieces > img
  53   width: 50px
  54
  55 figure.showPieces > figcaption
  56   color: #6C6C6C
  57
  58 .section-title
  59   padding: 0
  60
  61 .section-title > h4
  62   padding: 5px
  63
  64 ol, ul:not(.browser-default)
  65   padding-left: 20px
  66
  67 ul:not(.browser-default)
  68   margin-top: 5px
  69
  70 ul:not(.browser-default) > li
  71   list-style-type: disc
  72
  73 table.rules
  74   margin: 15px auto
  75
  76 .italic
  77   font-style: italic
  78
  79 img.img-center
  80   display: block
  81   margin: 0 auto 15px auto