h2 {
    -webkit-margin-before: 0.1em;
    -webkit-margin-after: 0.1em;
}

div#menu {
    min-width: 320px;
    max-width: 500px;
    margin: 0 auto;
}

div#menu button {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 5px -2px #111, inset 0 2px 5px 0 rgba(255, 255, 255, 0.3);
    font-size: 1.5em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    width: 160px;
    
    border: 1px solid #8EBF45;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
    color: #6a6340;
}

div#menu button:hover {
    border: 1px solid #a14714;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    background-color: #d64b4b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c)); 
    background-image: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); 
    background-image:    -moz-linear-gradient(top, #d64b4b, #ab2c2c); 
    background-image:     -ms-linear-gradient(top, #d64b4b, #ab2c2c); 
    background-image:      -o-linear-gradient(top, #d64b4b, #ab2c2c); 
    color: #801111;
}

div#menu button.disabled {
    border: 1px solid #888;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#888)); 
    background-image: -webkit-linear-gradient(top, #BBB, #888); 
    background-image:    -moz-linear-gradient(top, #BBB, #888); 
    background-image:     -ms-linear-gradient(top, #BBB, #888); 
    background-image:      -o-linear-gradient(top, #BBB, #888); 

    color: #333;

    cursor: not-allowed;
}

div#content {
    text-align: center;
    z-index: 20;
    position: relative;
    background-color: rgba(255,255,255,.7);
}

div.chessnutContainer {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

div.chessnutBoardContainer {
    float: left;
    width: 400px;
    height: 400px;
    background-color: #7c2d00; /* #CCC; */
}

div.chessnutBoardContainer .chessnutBoard {
    width: 360px;
    height: 360px;
    background-color: #C4895B; /* #CCC; */
    margin: 20px;
}

div.chessnutContainer .chessnutMove {
    float: left;
    width: 400px;
    line-height: 2em;
    font-size: 20pt;
    background-color: rgba(255,255,255,.8);
}

div.chessnutContainer .chessnutClear {
    clear: both;
    position: absolute;
    width: 400px;
}

div.chessnutModal {
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, .75);
    z-index: 800;
}

div.chessnutModalMessage {
    position: relative;
    text-align: center;
    background-color: rgba(255, 255, 255, .75);
}

div.chessnutPromotion {
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, .75);
    z-index: 800;
}

div.chessnutPromotionChoice {
    position: relative;
    text-align: center;
    background-color: rgba(255, 255, 255, .75);
}

div.chessnutPromotionChoice img:hover {
    background-color: #8fe980;
    cursor: pointer;
}

div.tile {
    float: left;
    width: 45px;
    height: 45px;
    margin: 0px;
}

div.tile.black {
    background-color: #a14714; /* #888; */
}

div.tile.white {
    background-color: #e6caa2; /* #fff; */
}

div.tile.white.selected {
    background-color: #8fe980;
}

div.tile.black.selected {
    background-color: #8fe980;
}

div.tile.white.possibleMove {
    background-color: #80bfe9;
}

div.tile.black.possibleMove {
    background-color: #6394b4;
}

div.tile.moved {
    background-color: #88FF88;
}


img.piece {
    width: 45px;
    height: 45px;
    background-image: url('../images/pieces.svg');
}

img.piece.canMove {
    cursor: pointer;
}
img.piece.canMove:hover {
    background-color: rgba(255,128,0,.7);
}
div.tile.possibleMove:hover {
    background-color: rgba(255,255,0,.7);
    cursor: pointer;
}
div.tile.selected img.piece.canMove {
    background-color: transparent;
}




img.piece.white.king {
    background-position: 0px 0px;
}

img.piece.white.queen {
    background-position: -45px 0px;
}

img.piece.white.bishop {
    background-position: -90px 0px;
}

img.piece.white.knight {
    background-position: -135px 0px;
}

img.piece.white.rook {
    background-position: -180px 0px;
}

img.piece.white.pawn {
    background-position: -225px 0px;
}

img.piece.black.king {
    background-position: 0px -45px;
}

img.piece.black.queen {
    background-position: -45px -45px;
}

img.piece.black.bishop {
    background-position: -90px -45px;
}

img.piece.black.knight {
    background-position: -135px -45px;
}

img.piece.black.rook {
    background-position: -180px -45px;
}

img.piece.black.pawn {
    background-position: -225px -45px;
}

div#footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 0;
}
div#footer div.innerFooter {
    z-index: 0;
    margin: 0 auto;
    min-width: 320px;
    max-width: 770px;
    text-align: center;
    font-size: .7em;
    position: inline-block;
}

a.titleLink {
    color: #000;
    text-decoration: none;
}

a.titleLink:hover {
    color: #888;
}



.ribbonbox {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
}


.ribbon {
  position: absolute;
  top: 25px;
  right: -100px;
  width: 300px;

  padding: 2px 0;
  font: bold 15px Sans-Serif;

  text-align: center;
  text-shadow: rgba(214,92,92,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);

  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  
  color: #6a6340;

  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}


.ribbon.test {
  background-color: #d64b4b;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c)); 
  background-image: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); 
  background-image:    -moz-linear-gradient(top, #d64b4b, #ab2c2c); 
  background-image:     -ms-linear-gradient(top, #d64b4b, #ab2c2c); 
  background-image:      -o-linear-gradient(top, #d64b4b, #ab2c2c); 
  
  color: #801111;

}

.ribbon.development {
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  background-color: #d4c94c;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d4c94c), to(#aba02c)); 
  background-image: -webkit-linear-gradient(top, #d4c94c, #aba02c); 
  background-image:    -moz-linear-gradient(top, #d4c94c, #aba02c); 
  background-image:     -ms-linear-gradient(top, #d4c94c, #aba02c); 
  background-image:      -o-linear-gradient(top, #d4c94c, #aba02c); 
  
  color: #807712;
}

.ribbon .ribbon-stitches-top {
  margin-bottom: 2px;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}

.ribbon .ribbon-stitches-bottom {
  margin-top: 2px;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}