HTML generic browser update message

browser-update

<style type="text/LESS">
	.browser {
		&-msg {
			position: absolute;
			background-color: #333;
			color: #fff;
			z-index: 999999;
			width: 550px;
			margin: 15% auto;
			display: block;
			top: 0;
			right: 0;
			left: 0;
			bottom: auto;
			padding: 20px;
			border: 1px solid #222;
			h1 {
				font-size: 32px;
				padding: 10px 0;
				margin: 0;
			}
			p {
				margin-top: 20px;
			}
		}
		&-icons {
			overflow: hidden;
			height: 110px;
			width: 520px;
			img {
				width: 100%;
				display: block;
			}
		}
		&-upgrade {
			strong {
				font-weight: bold;
			}
			a {
				text-decoration: underline;
			}
		}
	}
</style>

<!--[if lte IE 8]>
	<script type="text/javascript">
		var showBrowserUpdate = true;
	</script>
	<div class="browser-msg">
		<div class="browser-icons">
			<img src="http://browsehappy.com/content/themes/browsehappy/imgs/browsehappy-sprite.png" width="520px" alt="supported browsers">
		</div>
		<h1>Unsupported browser</h1>
		<p class="browser-upgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience. If you are unable to do so, please visit our main website or contact us using the links below. Thanks.</p>
		<p>&copy; SSP 2015 <span id="vertical-line">|</span> <a href="http://metia.com" data-where="Footer" class="footer-link">SSP Worldwide.com</a> <span id="vertical-line">|</span> <a href="mailto:ssp-broker@metia.com" class="footer-link" data-where="Footer">Contact Us</a></p>
	</div>
<![endif]-->