Messages


	<ul class="messages">
		<li class="success-msg">
			<ul>
				<li><span>Success message.</span></li>
			</ul>
		</li>
		<li class="error-msg">
			<ul>
				<li><span>Error message.</span></li>
			</ul>
		</li>
		<li class="note-msg">
			<ul>
				<li><span>Note message.</span></li>
			</ul>
		</li>
		<li class="notice-msg">
			<ul>
				<li><span>Notice message.</span></li>
			</ul>
		</li>
	</ul>



.messages { 
	overflow:hidden;
	width:100%; 
	&, ul {
		list-style:none !important; 
		argin:0 !important; 
		padding:0 !important;
	}
	li {
		margin:0 0 10px;
		li {
			margin:0 0 3px;
		}
	}
}

.error-msg, .success-msg,
.note-msg, .notice-msg { 
	border-style:solid !important; 
	border-width:1px !important; 
	background-position:10px 9px !important; 
	background-repeat:no-repeat !important; 
	min-height:24px !important; 
	padding:8px 8px 8px 32px !important; 
	font-size:11px !important; 
	font-weight:bold !important;
}
.error-msg { 
	border-color:#f16048; 
	background-color:#faebe7; 
	background-image:url(../images/i_msg-error.gif); 
	color:#df280a;
}
.success-msg { 
	border-color:#446423; 
	background-color:#eff5ea; 
	background-image:url(../images/i_msg-success.gif); 
	color:#3d6611;
}
.note-msg, .notice-msg { 
	border-color:#fcd344; 
	background-color:#fafaec; 
	background-image:url(../images/i_msg-note.gif); 
	color:#3d6611;
}

.success { color:#3d6611; font-weight:bold; }
.error { color:#f00; font-weight:bold; }
.notice { color:#ccc; }

Noscript Notice


	<div class="global-site-notice noscript">
        <div class="notice-inner">
            <p>
                <strong>JavaScript seems to be disabled in your browser.</strong><br>
                You must have JavaScript enabled in your browser to utilize the functionality of this website.
            </p>
        </div>
    </div>


.noscript { 
	border:1px solid #ddd; 
	border-width:0 0 1px; 
	background:#ffff90; 
	font-size:12px; 
	line-height:1.25; 
	text-align:center; 
	color:#2f2f2f; 
	.noscript-inner { 
		width:1000px; 
		margin:0 auto; 
		padding:12px 0 12px; 
		background:url(../images/i_notice.gif) 20px 50% no-repeat; 
	}
	p { margin:0; }
}

Demo Notice


	<div class="global-site-notice demo-notice">
	    <div class="notice-inner">
	    	<p>This is a demo store. Any orders placed through this store will not be honored or fulfilled.</p>
	    </div>
	</div>


.demo-notice { margin:0; padding:6px 10px; background:#d75f07; font-size:12px; line-height:1.15; text-align:center; color:#fff; }