#mygame-container { background-image: url('/Resources/images/background.jpg'); background-size: cover; -webkit-box-shadow: -1px 1px 3px 5px rgba(0,0,0,0.50); -moz-box-shadow: -1px 1px 3px 5px rgba(0,0,0,0.50); box-shadow: -1px 1px 3px 5px rgba(0,0,0,0.50); }
#buttonsGroup { padding: 20px; text-align: center; }
#help { visibility: visible; }
#board, #pieces { margin: auto; }
#board, #pieces { margin-top: 20px; margin-bottom: 20px; }

.form-control { padding: 4px 12px; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

input { margin-right: 12px; }
select { text-align: center; }
#board { border: 3px solid #d3d3d3; border: 6px solid transparent; border-image: url(/Resources/images/border.png) 10; border-spacing: 3px; padding: 0px; }
#pieces { border: 1px dotted #d3d3d3; border: 6px solid transparent; border-image: url(/Resources/images/border.png) 10; border-spacing: 3px; }
#board td { height: 3em; width: 3em; text-align: center; }
#pieces td { height: 3em; width: 3em; text-align: center; border: 3px solid #a09d9d; padding-left: 3px; padding-right: 3px; }
.piece { color: #c3b9b9; }
.pieceOk { color: #11d4ec; font-weight: bold; }
.pieceError { color: red; font-weight: bold; }
.locNormal { border: 3px solid #d3d3d3; }
.locHighlightedUp { border: 3px dashed #d3d3d3; border-top: 2px solid transparent; }
.locHighlightedDown { border: 3px dashed #d3d3d3; border-bottom: 2px solid transparent; }
.locHighlightedRight { border: 3px dashed #d3d3d3; border-right: 2px solid transparent; }
.locHighlightedLeft { border: 3px dashed #d3d3d3; border-left: 2px solid transparent; }
.locLinkedUp { border: 3px solid #11d4ec; border-top: 2px solid transparent; }
.locLinkedDown { border: 3px solid #11d4ec; border-bottom: 2px solid transparent; }
.locLinkedRight { border: 3px solid #11d4ec; border-right: 2px solid transparent; }
.locLinkedLeft { border: 3px solid #11d4ec; border-left: 2px solid transparent; }
.locErrorUp { border: 3px solid red; border-top: 2px solid transparent; }
.locErrorDown { border: 3px solid red; border-bottom: 2px solid transparent; }
.locErrorRight { border: 3px solid red; border-right: 2px solid transparent; }
.locErrorLeft { border: 3px solid red; border-left: 2px solid transparent; }
.locSolvedUp { border: 3px solid #66f166; border-top: 2px solid transparent; }
.locSolvedDown { border: 3px solid #66f166; border-bottom: 2px solid transparent; }
.locSolvedRight { border: 3px solid #66f166; border-right: 2px solid transparent; }
.locSolvedLeft { border: 3px solid #66f166; border-left: 2px solid transparent; }

.button::-moz-focus-inner { border: 0; padding: 0; }
.button { display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow: visible; font: bold 13px arial, helvetica, sans-serif; text-decoration: none; white-space: nowrap; color: #555; background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); -webkit-transition: background-color .2s ease-out; -moz-transition: background-color .2s ease-out; -ms-transition: background-color .2s ease-out; -o-transition: background-color .2s ease-out; transition: background-color .2s ease-out; background-clip: padding-box; /* Fix bleeding */ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; text-shadow: 0 1px 0 rgba(255,255,255, .9); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    .button:hover { background-color: #eee; color: #555; }
    .button:active { background: #e9e9e9; position: relative; top: 1px; text-shadow: none; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; }
    .button[disabled], .button[disabled]:hover, .button[disabled]:active { border-color: #eaeaea; background: #fafafa; cursor: default; position: static; color: #999; /* Usually, !important should be avoided but here it's really needed :) */ -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; }
.button { margin-top: 5px;}

@media (max-width:767px) {
    #board, #pieces { margin-top: 0px; margin-bottom: 10px; }
}