Info bar

dabblet.css

/**
 * Info bar
 */

* { margin:0; padding:0 } 
body { font:100%/1.4 'proxima nova', sans-serif; padding:40px }

.info-bar { text-align:center; padding:6px 20px;
	font-size:28px; font-weight:600; color:#222;
	text-shadow:0 1px 0 rgba(255,255,255,0.4);
	border:1px solid #fff; box-shadow:0 1px 4px 0 rgba(0,0,0,.3);
	background:#9cc221;
	background:linear-gradient(#b4d32a 0%, #a5c221 50%, #8cbf19 52%, #82b60e 100%) }
.info-bar.collections { background:#7dd7ff;
	background:linear-gradient(#91ddff 0%, #7bd7ff 50%, #6cd2ff 52%, #35bffc 100%) } 
.info-bar a { display:inline-block; padding:8px 24px 6px; line-height:1;
	 border-radius:6px; margin-left:10px; vertical-align:3px;
	 background:#f9f9f9;
	 background:linear-gradient(#fdfdfd 0%, #f7f7f7 52%, #f1f1f1 53%, #d6d6d6 100%);
	 text-decoration:none; font-size:18px; color:#444;
	 text-shadow:0 1px 0 rgba(255,255,255,0.4);
	 border:1px solid #a0a0a0; box-shadow:0 1px 1px 0 #fff }
.info-bar a:hover { background:#fbfbfb;
	 background:linear-gradient(#fff 0%, #fbfbfb 52%, #f5f5f5 53%, #dadada 100%) }
.info-bar a:active { background:#fbfbfb;
	 background:linear-gradient(#ebebeb 0%, #f1f1f1 52%, #f7f7f7 53%, #fdfdfd 100%);
	 box-shadow:0 1px 1px 0 rgba(255,255,255,0.6), inset 0 0 2px 0 #bbb }

dabblet.html

<aside class="info-bar collections">So you think you can register? <a href="">Give it a shot</a></aside>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}