html, body {
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /********************/
    /* board background */
    /********************/
    background: #333;
}

html, body, div, ul, li, canvas { margin: 0; padding: 0; }

.hide { display: none; }

.clear { clear: both; }

/*== Jigsaw puzzle ==*/
div#canvas-wrap {
    width: 100%;
    height: 100%;
}

canvas#canvas, canvas#buffer, canvas#image-preview {
    position: absolute;
    top: 45px;
    left: 0;
}

canvas#canvas { z-index: 100; }
canvas#canvas.loading { background: url(../fonts/loader.svg) no-repeat center; }
canvas#buffer { z-index: 70; }
canvas#image-preview.show {
    left: 50%;
    opacity: .5;
    z-index: 40;
}



/*== Options bar ==*/
div#game-options ul { margin: 0 auto;  }
div#game-options  { min-width:490px; background: #333; z-index: 500; top: 0; left: -20px; position: fixed; border-bottom: 1px solid #000; padding: 5px 10px 5px 30px; width: 100%; height: 32px; -moz-box-shadow: 0 0 5px black; -webkit-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; }

div#game-options ul li { float:left; list-style:none; }
div#game-options ul li b { margin: 0 10px; }

/*== Clock ==*/
#clock { width:60px; display:block; text-align:center; margin-right:2px !important; }

/*== Select ==*/
div#game-options div.styled-select select { width:auto; padding:4px 0px 5px 5px; font-size:14px; border:none; height:28px; appearance:none; }

div#game-options div.styled-select { width: 100px; height: 28px; margin-right: 10px; overflow: hidden; border: 1px solid #333; }



/*== Crear puzzle ==*/
#image-error { color: red; margin: 0 10px; display: none; }
#dnd { display: none; color:grey; }

#game-options #create { display: none; right: 25px; position: absolute; }

/*UPLOAD IMAGE BUTTON*/
#game-options #create .add {  }



/*== Modal window ==*/

div#congrat { text-align: center; }

div#help { font-size: 15px; }

div#help ul { margin-left: 10px; }


div.modal a.close{ position: absolute; top: 5px; right: 5px; text-decoration: none; padding: 0 3px; color: #000; display: block; }

div#congrat { text-align: center; }
div#help { margin-left: -30px; top: 50px; width: 400px; font-size: 15px; }
div#help li { margin: 10px; }

a.button, b.button { padding:5px 7px; background:#333; color:#eee; text-decoration:none; display:inline-block; outline:none; font-weight:bold; font-size:16px; }
a.button:hover { color:orange; }
a.button:active { color:yellow; }

a.left, a.middle  { margin: 0; }

div.bg { width:35px; height:35px; margin:3px 5px 9px 0; border:2px solid grey; display:inline-block; }

footer { width:1px; height:1px; overflow:hidden; }