+// Menu:
+
+#menuBar
+ background: linear-gradient(#e66465, #9198e5)
+ height: 29px
+ margin-bottom: 10px
+ @media screen and (max-width: 767px)
+ height: 100%
+ margin-bottom: 0
+ @media screen and (min-width: 768px)
+ width: 100%
+ overflow: hidden
+
+a#homeLink
+ margin-left: 10px
+ margin-top: 2px
+ color: black
+ display: inline-block
+ @media screen and (max-width: 767px)
+ display: block
+ margin: 5px 0 0 12px
+
+.info-container
+ display: inline-block
+ vertical-align: top
+ padding: 0
+ box-sizing: border-box
+ a
+ text-decoration: none
+ color: black
+ a, p
+ display: inline-block
+ padding: 0 3px
+ border: 1px solid black;
+ margin: 1px 0 0 15px
+ @media screen and (max-width: 767px)
+ margin-top: 10px
+ display: block
+
+#userMenu, #settings
+ @media screen and (min-width: 768px)
+ float: right
+ .info-container
+ p
+ padding: 0 3px
+ margin: 1px 0 0 15px
+
+#flagMenu
+ @media screen and (min-width: 768px)
+ margin-top: 1px
+ float: right
+ margin: 0 15px
+ @media screen and (max-width: 767px)
+ margin: 25px 5px 0 15px
+ img
+ display: inline-block
+ margin: 0
+ height: 25px
+
+label.drawer-toggle
+ padding: 0
+ &::before
+ font-size: 2em;
+ max-height: 32px;
+ top: -7px;
+ left: 5px
+
+// Game section:
+
+td.highlight-lm
+ background-color: plum
+
+button.play
+ height: 24px
+ margin: 0
+ padding: 0 10px 24px 10px
+ box-sizing: border-box
+ border: 1px solid brown
+button.play.spaceleft
+ margin-left: 15px
+button.play.spaceright
+ margin-right: 15px
+button.play.big-spaceleft
+ margin-left: 25px
+button.play.big-spaceright
+ margin-right: 25px
+
+.aboveboard-wrapper
+ width: 80vh
+ margin: 0 auto
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
+
+button.above-board
+ margin-left: 15px
+ margin-right: 15px
+
+i.material-icons
+ font-size: 24px
+
+.indic-left
+ border: 1px solid brown
+ float: left
+ margin: 0 0 var(--universal-margin) 10vh
+ @media screen and (max-width: 767px)
+ margin-left: 20px
+
+.indic-right
+ border: 1px solid brown
+ float: right
+ margin: 0 10vh var(--universal-margin) 0
+ @media screen and (max-width: 767px)
+ margin-right: 20px
+
+.my-chatmsg
+ color: black
+
+.opp-chatmsg
+ color: blue
+
+// TODO: this fix is not good (button height 0 if chat overflow window height)
+#sendChatBtn
+ min-height: 42px
+
+.connected
+ background-color: green
+
+.disconnected
+ background-color: red
+
+.white-turn
+ background-color: white
+
+.black-turn
+ background-color: black
+
+button.playing
+ background-color: #ffcc99
+ &:hover
+ background-color: #ffcc99
+
+button.seek
+ background-color: #cc99ff
+ &:hover
+ background-color: #cc99ff
+
+.game.reserve-div
+ margin-bottom: 18px
+
+.reserve-count
+ padding-left: 40%
+
+.reserve-row-1
+ margin-bottom: 15px
+
+div.board
+ float: left
+ height: 0
+ display: inline-block
+ position: relative
+
+div.board8
+ width: 12.5%
+ padding-bottom: 12.5%
+
+div.board10
+ width: 10%
+ padding-bottom: 10%
+
+div.board11
+ width: 9.09%
+ padding-bottom: 9.1%
+
+// NOTE: no variants with reserve of size != 8
+
+.game
+ width: 80vh
+ margin: 0 auto
+ .board
+ cursor: pointer
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
+
+#choices
+ margin: 0 auto 0 auto
+ position: relative
+ z-index: 300
+ overflow-y: inherit
+ background-color: rgba(0,0,0,0)
+ img
+ cursor: pointer
+ background-color: #e6ee9c
+ &:hover
+ background-color: skyblue
+ &.choice-piece
+ width: 100%
+ height: auto
+ display: block
+
+img.piece
+ width: 100%
+
+img.piece, img.mark-square
+ max-width: 100%
+ height: auto
+ display: block
+
+img.mark-square
+ opacity: 0.6
+ width: 76%
+ position: absolute
+ top: 12%
+ left: 12%
+ opacity: .7
+
+img.ghost
+ position: absolute
+ opacity: 0.4
+ top: 0
+
+.highlight
+ background-color: #00cc66 !important
+
+.in-shadow
+ filter: brightness(50%)
+
+.incheck
+ background-color: #cc3300 !important
+
+.light-square.lichess
+ background-color: #f0d9b5;
+.dark-square.lichess
+ background-color: #b58863;
+
+.light-square.chesscom
+ background-color: #e5e5ca;
+.dark-square.chesscom
+ background-color: #6f8f57;
+
+.light-square.chesstempo
+ background-color: #fdfdfd;
+.dark-square.chesstempo
+ background-color: #88a0a8;
+
+.light-square-diag
+ background-color: #e5e5ca
+.dark-square-diag
+ background-color: #6f8f57
+
+#fen-string
+ margin-top: 0
+ margin-bottom: 10px
+
+#pgn-game
+ margin-top: 0
+ margin-bottom: 0
+
+#downloadBtn
+ display: block
+ margin-left: auto
+ margin-right: auto
+
+#pgn-div > a
+ display: none
+
+//#fen-div > p
+ margin-left: 0
+ margin-right: 0
+
+#modal-eog+div .card
+ overflow: hidden
+
+#actions
+ margin: 10px 0
+
+// Rules section:
+
+.warn
+ padding: 3px
+ color: red
+ background-color: lightgrey
+ font-weight: bold
+
+figure.diagram-container
+ margin: 15px 0 15px 0
+ text-align: center
+ width: 100%
+ display: block
+ .diagram
+ display: block
+ width: 40%
+ min-width: 240px
+ margin-left: auto
+ margin-right: auto
+ .diag12
+ float: left
+ margin-left: calc(10% - 20px)
+ margin-right: 40px
+ @media screen and (max-width: 630px)
+ float: none
+ margin: 0 auto 10px auto
+ .diag22
+ float: left
+ margin-right: calc(10% - 20px)
+ @media screen and (max-width: 630px)
+ float: none
+ margin: 0 auto
+ figcaption
+ display: block
+ clear: both
+ padding-top: 5px
+ font-size: 0.8em
+
+p.boxed
+ background-color: #FFCC66
+ padding: 5px
+
+.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
+
+// Problems section:
+
+.newproblem-form input, .newproblem-form textarea
+ width: 100%
+
+.emphasis
+ font-style: italic
+
+#newpbInstructions
+ margin-bottom: var(--universal-margin);
+
+.center-btn
+ margin-left: 40%
+
+//TODO?
+.center-inline
+ text-align: center
+.center-block
+ margin-left: auto
+ margin-right: auto
+
+.mistake-newproblem
+ color: #663300
+
+#solution-div h3
+ background-color: lightgrey
+ padding: 3px 5px
+
+.newproblem-form, .newproblem-preview
+ max-width: 90%
+
+#problemControls
+ width: 75%
+ margin: 0 auto
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
+
+.problem
+ margin: 10px 0
+
+.only-mine
+ background-color: yellow
+ &:hover
+ background-color: yellow