Mind-Repository: CABS Chat

dabblet.css

/*
 * Mind-Repository: CABS Chat
 */
body {
	background: #e5e5e5;
}
div.message {
	padding-bottom: 60px;
	margin-left: 50px;
	min-width: 200px;
	max-width: 400px;
	display: block;
}
#avatar-l {
	float: left;
	margin-left: -40px;
	margin-top: -25px;
	position: relative;
	z-index: 1;
	height: 60px;
	}
#avatar-r {
	float: right;
	margin-right: -40px;
	margin-top: -25px;
	position: relative;
	z-index: 1;
	height: 60px;
	} 
 
#message-body {
	background: #fff;
	padding: 12px 25px;
	bottom: 2px;
	position: relative;
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 14px;
	z-index:0;
	color: #444;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}	
.n-shadow {
	box-shadow: 0px 3px rgba( 0, 0, 0, 0.4 );
}
.p-shadow {
	box-shadow: 0px 3px rgba( 228, 0, 144, 0.4 );
}
.b-shadow {
	box-shadow: 0px 3px rgba( 0, 140, 210, 0.4 );
}

.r {
	right: 3px;
	text-align: right;
}

.l {
	left: 3px;
}

dabblet.html

<div class="message">
		<div id="message-body" class="r n-shadow">C'mon, throw in a buck!</div>
		<img id="avatar-r" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/niceguyeddieavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l p-shadow">Uh-uh, I don't tip.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrpinkavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="r n-shadow">You don't tip?</div>
		<img id="avatar-r" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/niceguyeddieavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l p-shadow">Nah, I don't believe in it.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrpinkavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="r n-shadow">You don't believe in tipping?</div>
		<img id="avatar-r" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/niceguyeddieavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l b-shadow">You know what these chicks make? They make shit.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrblueavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l p-shadow">Don't give me that. She don't make enough money then she can quit.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrpinkavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="r n-shadow">I don't even know a fucking Jew who'd have the balls to say that. Let me get this straight: you don't ever tip?</div>
		<img id="avatar-r" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/niceguyeddieavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l p-shadow">I don't tip because society says I have to. All right, if someone deserves a tip, if they really put forth an effort, I'll give them something a little something extra. But this tipping automatically, it's for the birds. As far as I'm concerned, they're just doing their job.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrpinkavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l b-shadow">Hey, our girl was nice.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrblueavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l p-shadow">She was okay. She wasn't anything special.</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrpinkavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="l b-shadow">What's special? Take you in the back and suck your dick?</div>
		<img id="avatar-l" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/mrblueavatar.png" alt="" />
</div>

<div class="message">
		<div id="message-body" class="r n-shadow">I'd go over 12 percent for that.</div>
		<img id="avatar-r" src="http://www.eriklindemann.com/wp-content/uploads/2014/06/niceguyeddieavatar.png" alt="" />
</div>

dabblet.js

// alert('Hello world!');

settings.json

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