Untitled

dabblet.css

body { margin:0;padding:0; }

#tickers {	bottom:0;	position:fixed;	width:100%;	z-index:20;}
.ticker-wrap {	display:none;	height:25px;	overflow:hidden;}
.ticker-wrap.active {	display:block;}
.ticker-wrap:before,
.ticker-wrap:after {
background-position:top left;
content:' ';
display:block;
height:25px;
position:absolute;
width:60px;
z-index:2;}
.ticker-wrap:before {
	float:left;	left:0;
}
.ticker-wrap:after {
	background-position:top right;	float:right;	right:0;}
.ticker {
	height:25px;	list-style:none;	margin:0;	padding:0;	position:relative;	text-align:center;	text-transform:uppercase;	white-space:nowrap;
}
.ticker h2,
.ticker p {
	color:#fff;	display:inline;	font-family:Arial,sans-serif;	font-size:12px;
}
.ticker h2 {
	font-weight:bold;}
.ticker li {
	float:left;	margin-right:20px;
}
#hr-ticker-wrap {background-color:#6BA342;}
#hr-ticker-wrap:before,
#hr-ticker-wrap:after {
	background-color:yellow;
}
#it-ticker-wrap {
	background-color:#395687;
}
#it-ticker-wrap:before,
#it-ticker-wrap:after {
	background-color:red;
}

dabblet.html

  <div id="tickers">
	  <div class="ticker-wrap active" id="hr-ticker-wrap">
		  <ul class="ticker">
		  	<li>
		  		<h2>Margarita Party!</h2>
		  		<p>Please join us tonight on the first floor at 5:30 PM.</p>
			</li>
		  </ul>
	  </div>
	  <div class="ticker-wrap active" id="it-ticker-wrap">
		  <ul class="ticker">
			<li>
		  		<h2>Scheduled Maintenance</h2>
		  		<p>Please be aware that the Internet may be down after 6:00 PM today for scheduled maintenance.</p>
			</li>
		  </ul>
	  </div>
  </div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}