Dropdown notification box with multiple borders

dabblet.css

/**
 * Dropdown notification box with multiple borders
 */
 
 * {padding: 0; margin: 0;}
 
 #dropdown {
 	margin-top: -3em;
 	background: url("http://tsironis.isnap.gr/images/grain.png");
 	border-bottom:3px solid #444444;
 	box-shadow: 0px -1px 6px #000;
 	font-family: 'Arial', sans-serif;
 	color: #ddd;
 	text-shadow: 1px 0px 1px #ccc;
 	text-align: center;
 	line-height: 3em;
 	transition: all .2s ease-in-out;
 }

#dropdown:hover {
	margin-top: 0;
}

#inside{
	border-bottom: 1px solid #222;
	width: 100%;
}

#dropdown a {
	color: #333;
}

#message {
	font: 150%/1.5 Monaco,Consolas,Inconsolata,'Deja Vu Sans Mono','Droid Sans Mono','Andale Mono','Lucida Console',monospace;
	position: absolute;
	top: 15%;
	right: 30%;
}

#message img {
	display: block;
	margin: 0 auto;
}

dabblet.html

<div id="dropdown">
	<div id="inside">
		This is a dropdown notification. Take some <a href="http://www.google.com/">action</a> or just stay where you are!
	</div>
</div>


<div id="message">
<img src="http://tsironis.isnap.gr/images/arrow.png">
	Hover this bar above and you'll be like "WOW"!
</div>

settings.json

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