/**
 * Mootools powered puzzle game.
 *  
 * Author: Bas Wenneker
 * Email: <b.wenneker@gmail.com>
 * Website: <http://www.solutoire.com/>  
 */ 
 
#puzzle{
width: 500px;
float:left;
padding:0 0 0 140px;
}

#timer{
text-align:center;
font-family: "Arial Black";
font-size: 2.5em;
font-weight:bold;
}

#game-wrapper{
background:#D2E8FF none repeat scroll 0%;
border:4px solid #B6D9FF;
color:#004892;
margin:5px 0pt;
overflow:hidden;
padding:10px 10px 5px;
}

/* MENU */
#game-menu li a:hover{
background: #1763B5;
color:#fff;
}

#game-menu li a em{
font-size:95%;
font-style: normal;
visibility:hidden;
color: #ccc;
}

#game-menu li a:hover em{
visibility:visible;
}

#game-menu li a span{
font-size:95%;
color: #fff;
}

#game-menu li a:hover span{
color: #ccc;
}

#game-menu{
width: 140px;
background-color: #B6D9FF;
border: 4px solid #004892;
float: right;
list-style-type: none;
margin: 10px 0 0 5px;
}

#game-menu li{
width: 135px;
}

#game-menu li a{
background-color:transparent;
display:block;	
color:#1763B5;
padding:5px 0 5px 5px;
width:135px;
}

/* GAME */
#game-ul{	
float: left;
width: 300px;
list-style-type: none;
margin: 10px 0 10px 10px;
}

#game-ul li{	
width: 96px;
height: 96px;
float:left;
background-image: url(img/bas300.png);
background-repeat: no-repeat;
border: 1px solid #fff
}

.piece-0{background-position: 0px 0px;}
.piece-1{background-position: -100px 0px;}
.piece-2{background-position: -200px 0px;}
.piece-3{background-position: 0px -100px;}
.piece-4{background-position: -100px -100px;}
.piece-5{background-position: -200px -100px;}
.piece-6{background-position: 0px -200px;}
.piece-7{background-position: -100px -200px;}
.piece-8{background-position: -200px -200px;}