some reset

dabblet.css

/* some reset */
body{font-family:Verdana, Geneva, sans-serif; font-size:small;color:#fff;background: #3a5875}


/* Notice wrapper with Single Image */
.notice-wrap {
	margin-top: 10px; padding: 0 .7em;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #CD0A0A;
	background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
}


/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
	margin-top: 10px; padding: 0 .7em;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #CD0A0A;
	background: url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat;
	background-position: 0 -52px;
}




/* NEW Notice wrapper */
.new-notice-wrap-sprite {
	margin-top: 10px; padding: 0 .7em;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #CD0A0A;
	background: url(http://f.cl.ly/items/0L0W420t1d3D211H3h0i/test-sprite2.png) repeat;
	background-position: 0 -52px;
}




#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}​

dabblet.html

<div class="notice-wrap"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

<BR><BR><BR>


<div class="notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>


<BR><BR><BR>


<div class="new-notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>





<script>
function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}​
</script>



<div id="overlay">
     <div>
          <p>Content you want the user to see goes here.<br>
         Click here to [<a href='#' onclick='overlay()'>close</a>]</p>
     </div>
</div>

<a href='#' onclick='overlay()'>Click here to show the overlay</a>
​

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}