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

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: 122px;
    left: 0;
}

canvas#canvas { z-index: 100; }

canvas#canvas.loading { background: url(../images/loader.gif) no-repeat center; }

canvas#buffer { z-index: 70; }

canvas#image-preview.show {
    left: 50%;
    opacity: .5;
    z-index: 40;
}

/* -- HEADER
------------------------------------------------------------- */

 #nav{	margin-right:20px!important;}
	 nav ul { float: left; overflow: hidden; padding: 0 1em 0 1em; border-left: 1px solid #ddd; line-height: 1.5em; font-weight:bold; font-size:11px!important;margin-top:20px!important;
				margin-left:0px!important; }
nav a, menu a { text-decoration: none; color: #555;  }
.navactive { color: #0078CF; }
.fright{display:block; overflow:hidden;}
.fright{float:right;}

/*== Options bar ==*/
div#game-options ul {
    margin: 0 auto;
				margin-top:71px;
				margin-left:120px;
				
}


.logo{position:absolute; z-index:1; margin-top:0!important; padding-top:0!important; border:0!important; text-decoration:none!important;}
.logo img {border:0!important;}
.logo:hover {background: none;}
.logo:active {background: none; text-decoration:none!important;}
	.logo a:focus{
width:0px!important;height:0px!important;outline:0px!important;
}

div#game-options  {
	

				background-color: rgba(223,223,223,0.5);
    z-index: 500;
    top: 0;
    left: -20px;
    position:absolute;
				border-bottom:1px #cccccc solid;
    
    padding: 5px 10px 5px 30px;
    width: 100%;
    height: 104px;
  
}

.face{
	position:absolute!important;
	top:28px!important;
 right:300px!important;
	}
	_42ft _4jy0 _56zw _4jy3 _4jy1 selected{margin-left:200px!important;}
	_42ft _4jy0 _56zx _4jy3 _517h{margin-left:200px!important;}
	


div#game-options ul li { 
    float: left;
    list-style: none;
    line-height: 25px;
}

div#game-options ul li b {
    margin: 0 10px;
}

/*== Clock ==*/
#clock {
    width: 60px;
    display: block;
    text-align: center;
}

/*== Select ==*/
div#game-options div.styled-select select {
    outline: none;
    background: transparent;
    width: 125px;
    padding: 5px;
    font-size: 13px;
    border: none;
    height: 28px;
    -webkit-appearance: none;
}

div#game-options div.styled-select {
    width: 100px;
    height: 28px;
    margin-right: 10px;
    overflow: hidden;
    background: url(../images/arrow.png) right no-repeat #f3f3f3;
    border: 1px solid #333;
}

/*== Share buttons ==*/
#share-twitter, #share-facebook {
    text-indent: -10000px;
    width: 32px;
    height: 32px;
    display: block;
    cursor:pointer;
}

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

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

#game-options #create .add {
    background: url(../images/plus.png)  10px 6px no-repeat #f3f3f3;
    padding-left: 30px;
						display:none;
}


/*== Modal window ==*/

div#congrat { text-align: center; }

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

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

/* -- FOOTER
------------------------------------------------------------- */
footer  { position:fixed!important; width:100%;  color:#999; bottom:0!important; margin-top:70px!important; z-index:90!important;}

footer a {color: #999;}
footer li { float: left; margin-right: 1em; padding-right: 1em; font-size: 0.7em; }

	


/*== mobile ==*/
@media screen and (max-width: 960px) {
    div#game-options { left: -30px; }
    #clock { width: 50px; margin-left: }
    #SHOW_EDGE, #SHOW_MIDDLE, #SHOW_ALL { display: none; }
}

@media screen and (max-width: 479px) {
    #SHOW_HELP, #clock { display: none; }
    #JIGSAW_SHUFFLE { margin-left: 15px; }
    #SHOW_PREVIEW { margin-right: 10px; }
				
				
