Bubble Orchestra

dabblet.css

/**
 * Bubble Orchestra
 */

/* demo */
.bubble { top:20px }
.quote { left:200px }
.autocomplete { left:600px }

/* resets */
a { text-decoration:none; color:#B7DE44 }
body { font-family:'proxima nova'; background:#eee }
blockquote, menu, p { margin:0; padding:0 }


/* prototype */
.bubble { padding:14px; position:absolute; border-radius:9px;
 box-shadow:0 2px 5px 0 rgba(0, 0, 0,.3) }
	.bubble:after { content:''; height:0; width:0;
	position:absolute; border:14px solid transparent;
	border-bottom-color:#000; bottom:100%; left:50%;
	margin-left:-14px }
.bubble p { margin-bottom:.9em }
.bubble p:last-child { margin:0 }

/* .like */
.bubble.like { background-color:#000; font:11px/.3 'proxima nova';
 color:#fff }
	.bubble.like:after { border-bottom-color:#000; }

/* .quote */
.bubble.quote { background-color:#fff; font:12px/14px 'georgia';
 color:#000; max-width:23em; border:2px solid #888;
 padding-left:3em }
	.bubble.quote:before { content:''; height:0; width:0;
	position:absolute; bottom:100%; left:50%;
	border:17px solid transparent; border-bottom-color:#888;
	margin-left:-17px }
	.bubble.quote:after { border-bottom-color:#fff; }
	
.bubble.quote q:before,
.bubble.quote q:after { font-size:5em; position:absolute;
color:#bbb;/* text-shadow: 0px 1px 1px #888*/ }
.bubble.quote q:before { content:'“'; top:.44em; left:.14em }
.bubble.quote q:after { content:'”'; margin-top:.36em;
margin-left:.06em }

.bubble.quote cite { display:block; margin-top:1em;
font-style:normal }

.bubble.quote a { color:#000; font-weight:bold }
.bubble.quote a:hover { text-decoration:underline }
.bubble.quote a[rel="book"] { font-style:italic }


/* .autocomplete */
.autocomplete { background:#aae916; padding:5px 10px;
border:2px solid #fff; margin:0 }
	.autocomplete:before { content:''; height:0; width:0;
	position:absolute; bottom:100%; left:50%;
	border:17px solid transparent; border-bottom-color:#fff;
	margin-left:-17px }
	.autocomplete:after { border-bottom-color:#aae916; }

.autocomplete a { display:block; color:#222; font-size:13px;
line-height:29px; margin:0 4px; padding-right:10px }
.autocomplete a:hover { background:#c3ff37; border-radius:4px;
margin:0 -4px 0 -4px; padding:0 18px 0 8px;  }
.autocomplete a+a { border-top:1px solid #c2ef58; 
box-shadow: 0px -1px 0px 0px #99d30f }
.autocomplete a:hover+a,
.autocomplete a+a:hover { border:none; box-shadow:none;
padding-top:1px }

dabblet.html

<aside class="bubble like">
<p>Add to <a href="/user/storyboard">your Storyboard</a>
<p>456 others like this too</p>
</aside>

<blockquote class="bubble quote">
<q>Cat by the name of <a rel="topic">Charlie Parker</a>. On the Dial label." "I mean, what do you call this kind of music?" Junior grinned. ... Now, you wanna stick to the big band sound, you go on and stick to it, that's up to you</q>
<cite>— <a rel="author">George P. Pelecanos</a>, <a rel="book">The Big Blowdown</a></cite>
</blockquote>

<menu type=list class="bubble autocomplete">
<a href="">Yo-Yo <em>Ma</em></a>
<a href=""><em>Ma</em> Barker</a>
<a href=""><em>Ma</em> Baker</a>
<a href=""><em>Ma</em>xim Litvinov</a>
<a href=""><em>Ma</em>x Schmeling</a>
<a href="">David <em>Ma</em>met</a>
<a href=""><em>Ma</em>ry Shelley</a>
<a href="">Pig (radioactive <em>ma</em>terial transfer device)</a>
<a href="">The Dancing Wu Li <em>Ma</em>sters</a>
<a href=""><em>Ma</em>ry, Mary</a>
</menu>

settings.json

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