Untitled

dabblet.css

body{
padding:20px;
background-color:#cfcfcf;
}
#header{
margin:0 auto;
width:95%;
height:40px;


padding:10px;
text-align:center;
border:1px solid gray;
}

#header h2{
color:blue;

}
#puzzle-container{
margin:20px auto;
padding-top:20px;
padding-right:2%;
width:95%;
min-height:1500px;
height:auto;
border: 2px solid black;

}
.text{
float:right;
width:400px;
height:200px;
border: 2px solid red;

}
.puzzles-thumb{
margin-top:20px;
width:25%;
height:400px;

float:left;
clear:both;

border:1px solid gray;


}
.puzzles-thumb a{
margin:10px;
}
.puzzles-thumb p{
margin:12px;
}


.puzzles-thumb img{
width:100%;
height:auto;
float:left;
clear:both;
border:1px solid gray;


}

dabblet.html

<div id="header">
<H2>Jquery Drag and Drop Puzzles </h2>
</div>

<div id="puzzle-container">

<div class="http://jacknorthrup.com/puzzles/puzzles-thumb">
<img src="http://jacknorthrup.com/puzzles/images/jeepney.gif">
<div class="text">
<a href="http://jacknorthrup.com/puzzles/jeepney.html">Jeepney</a>
<p>Click the link above to play the puzzle.</p><p>This drag and drop puzzle is made using jquery code. The complety puzzle with the graphics may be  may be downloaded <a href="jeepney.zip">HERE</a></p>
</div>
</div>

<div class="http://jacknorthrup.com/puzzles/puzzles-thumb">
<img src="http://jacknorthrup.com/puzzles/images/bg.gif">
<div class="text">
<a href="http://jacknorthrup.com/puzzles/flowers.html">Plant</a><p>Click the link above to play the puzzle.</p><p>This is not only drag and drop, but the pieces must be rotated. Double clicking rotates the piece. This puzzle may be downloaded<a href="plant.zip">HERE</a></p>
</div>

<div class="http://jacknorthrup.com/puzzles/puzzles-thumb">
<img src="http://jacknorthrup.com/puzzles/images/chickens.gif">
<div class="text">
<a href="http://jacknorthrup.com/puzzles/chickens.html">Chickens</a><p>Click the link above to play the puzzle.</p><p>This drag and drop puzzle is made using jquery code. The complety puzzle with the graphics may be  may be downloaded <a href="chicken.zip">HERE</a></p>
</div>
</div>

</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"110","seethrough":"","prefixfree":"1","page":"html"}