<style>
.preview {
	background-color: #f7f2e1;
	color: #937227;
	border-bottom: 2px solid;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;
	padding: 0.5rem 0.5rem 0.5rem 2rem;
	position:fixed;
	width: 100%;
	text-align:center;
	z-index: 9999;
	height: 40px;
	text-wrap: none;
}
.preview-spacer {
	height: 40px;
}
.preview span {
	font-size: 0.9rem;
	display: inline-block;
	padding-left: 5px;
}
.preview svg {
	fill: #937227;
	display: inline-block;
	vertical-align: middle;
}
</style>
<div class="preview">
	<span>This is a preview version of the site and is for internal use only. This page can be shared with your colleagues.</span>
</div>
<div class="preview-spacer"></div>
<div class="message-bar message-bar--preview">
	<span class="message-bar__tag">PREVIEW</span><span class="message-bar__text">This is a preview version of the site and is for internal use only. This page can be shared with your colleagues.</span>
</div>
Use new markup for preview bar
Use new markup for preview bar
