.puzzle-container{width:425px;height:475px;overflow:hidden}
.puzzle{overflow:hidden;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;position:relative;width:425px;height:475px;background-color:#222;font-family:sans-serif;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;}
.puzzle .overlay-container{width:425px;height:425px;position:absolute;top:0;left:0;z-index:10;background-color:rgba(32,32,32,0.25);}
.puzzle .overlay-container .overlay{width:100px;height:100px;position:absolute;top:162.5px;left:162.5px;z-index:20;background-color:#202020;opacity:.8;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;line-height:100px;color:#ccc;text-align:center}
.puzzle .control-bar{margin-top:430px;padding:0 5px;}
.puzzle .control-bar .shuffle-button,.puzzle .control-bar .solve-button{float:left;font-weight:bold;font-size:15px}
.puzzle .control-bar .shuffle-button{color:#556;border:1px solid #7f7f6d;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;background-image:-ms-linear-gradient:top;;background-image:-o-linear-gradient(top,#dbdbd5,#b7b7ab);background-image:-moz-linear-gradient(top,#dbdbd5,#b7b7ab);background-image:-webkit-linear-gradient(top,#dbdbd5,#b7b7ab);background-image:-ms-linear-gradient(top,#dbdbd5,#b7b7ab);box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-o-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-ms-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);text-shadow:#f6f6f5 1px 1px 2px,#9c9c8b -1px -1px 2px;width:122.5px;height:38px;line-height:38px;text-align:center;}
.puzzle .control-bar .shuffle-button:hover{color:#828297}
.puzzle .control-bar .shuffle-button:active{background-image:-ms-linear-gradient:top;;background-image:-o-linear-gradient(top,#b7b7ab,#939381);background-image:-moz-linear-gradient(top,#b7b7ab,#939381);background-image:-webkit-linear-gradient(top,#b7b7ab,#939381);background-image:-ms-linear-gradient(top,#b7b7ab,#939381);text-shadow:#d2d2cb 1px 1px 2px,#747464 -1px -1px 2px;box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-o-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-ms-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25)}
.puzzle .control-bar .title-text{float:left;text-align:center;width:166px;line-height:inner-controller-height;font-size:30px;color:#999;font-family:Satisfy,serif;text-shadow:#737373 0 -1px 1px,#bfbfbf 0 1px 1px}
.puzzle .control-bar .solve-button{color:#d80;border:1px solid #471414;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;background-image:-ms-linear-gradient:top;;background-image:-o-linear-gradient(top,#832525,#6b1f1f);background-image:-moz-linear-gradient(top,#832525,#6b1f1f);background-image:-webkit-linear-gradient(top,#832525,#6b1f1f);background-image:-ms-linear-gradient(top,#832525,#6b1f1f);box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-o-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-ms-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);text-shadow:#952a2a 1px 1px 2px,#591919 -1px -1px 2px;width:122.5px;height:38px;line-height:38px;text-align:center;}
.puzzle .control-bar .solve-button:hover{color:#ffba4d}
.puzzle .control-bar .solve-button:active{background-image:-ms-linear-gradient:top;;background-image:-o-linear-gradient(top,#6b1f1f,#531818);background-image:-moz-linear-gradient(top,#6b1f1f,#531818);background-image:-webkit-linear-gradient(top,#6b1f1f,#531818);background-image:-ms-linear-gradient(top,#6b1f1f,#531818);text-shadow:#7d2424 1px 1px 2px,#411313 -1px -1px 2px;box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-o-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25);-ms-box-shadow:inset -3px -3px 3px 0px rgba(255, 255, 255, 0.15), inset 3px 3px 3px rgba(0, 0, 0, 0.25)}
.puzzle .cell{position:absolute;font-size:35px;}
.puzzle .cell.dark{color:#d80;border:1px solid #471414;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;background-image:-ms-linear-gradient:top;;background-image:-o-linear-gradient(top,#832525,#6b1f1f);background-image:-moz-linear-gradient(top,#832525,#6b1f1f);background-image:-webkit-linear-gradient(top,#832525,#6b1f1f);background-image:-ms-linear-gradient(top,#832525,#6b1f1f);box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-o-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-ms-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);text-shadow:#952a2a 1px 1px 2px,#591919 -1px -1px 2px;width:98px;height:98px;line-height:98px;text-align:center;}
.puzzle .cell.light{color:#556;border:1px solid #7f7f6d;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;background-image:-ms-linear-gradient:top;;background-image:-o-linear-gradient(top,#dbdbd5,#b7b7ab);background-image:-moz-linear-gradient(top,#dbdbd5,#b7b7ab);background-image:-webkit-linear-gradient(top,#dbdbd5,#b7b7ab);background-image:-ms-linear-gradient(top,#dbdbd5,#b7b7ab);box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-o-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);-ms-box-shadow:inset 3px 3px 3px 0px rgba(255, 255, 255, 0.15), inset -3px -3px 3px rgba(0, 0, 0, 0.25);text-shadow:#f6f6f5 1px 1px 2px,#9c9c8b -1px -1px 2px;width:98px;height:98px;line-height:98px;text-align:center;}