stylized panel messages for Floppers

roarFloppers.htm

<div style="left: 10px; top: 10px;" class="roar-body">
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
	<div id="shipyard-hrtypyw7" style="opacity: 1;" class="roar warning"><div style="" class="roar-bg"></div><div class="roar-icon"></div><h3>Install Add-on Builder Helper</h3><p>To test this add-on, please install the <a id="install_addon_helper" href="https://addons.mozilla.org/firefox/downloads/latest/182410?src=external-builder">Add-on Builder Helper add-on</a></p></div>
</div>


<!--
<div style="left: 1270px; top: 10px;" class="roar-body"><div id="shipyard-hrtz4uqb" style="opacity: 1; right: 0px; top: 0px;" class="roar message"><div style="" class="roar-bg"></div><h3>Add-on Builder</h3><p>Add-on uninstalled</p></div></div>
-->

<style>
/*Roar.css*/
.roar-body
{
	position:				absolute;
	font:					12px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
	color:					#fff;
	text-align:				left;
	z-index:				999;
}

.roar
{
	position:				relative;
	width:					300px;
	cursor:					pointer;
	display:				inline-block;
	margin-top: 11px;
	margin-left: 7px;
}
.roar-bg
{
	position:				absolute;
	z-index:				1000;
	width:					100%;
	height:					100%;
	left:					0;
	top:					0;
	background-color:		#000;
	-moz-border-radius:		10px;
	-webkit-border-radius:	5px;
	-webkit-box-shadow:		0 0 5px rgba(0, 0, 0, 0.5);
}
.roar-body-ugly .roar
{
	background-color:		#333;
}
.roar-body-ugly .roar-bg
{
	display:				none;
}
.roar-icon {	
	height: 100%;
	width: 18%;
	position: absolute;
	background: url(https://abs.twimg.com/a/1392431509/img/t1/bird-topbar-blue.png) 50% 50% no-repeat;
	padding-right: 9px; /*must equal the padding left of h3 and p otherwise icon is not centered looking on the x*/
	z-index: 1002;
}
.roar h3
{
	position:				relative;
	padding:				15px 10px 0;
	margin:					0;
	border:					0;
	font-size:				13px;
	color:					#fff;
	z-index:				1002;
	margin-left: 18%; /*must equal width of icon div*/
}
.roar p
{
	position:				relative;
	padding:				10px 10px 15px;
	margin:					0;
	font-size:				12px;
	color:					#fff;
	z-index:				1002;
	margin-left: 18%; /*must equal width of icon div*/
}



/*FlightDeck.Roar.css*/
.roar-bg {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
	opacity: 0.9 !important;
}

.message .roar-bg {
	background: -moz-linear-gradient(270deg, #C4F2AC, #98CF7B);
	border-top: solid 1px ##DCF8CE;
}

.warning .roar-bg {
	background: -moz-linear-gradient(270deg, #4E91E7, #184A95);
	border-top: solid 1px #8FBBF1;
}

.error .roar-bg {
	background: -moz-linear-gradient(270deg, #C23738, #6E1616);
	border-top: solid 1px #D4989C;
}

.roar h3,
.roar p {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.message.roar h3,
.message.roar p {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
	color: #136B00;
}

.roar h3 {
	padding: 10px 9px 0;
	font-size: 12px;
	font-weight: bold;
}

.roar p {
	padding: 5px 9px 10px;
	font-size: 11px;
}

.roar p a {
	color: #fff;
	text-decoration: underline;
}

	.roar p a:hover {
		text-decoration: none;
	}

.roar-bg {
	border-radius: 5px;
}
</style>

delete