Update alert format and styles

sharedcode/alert.shtml

 <!--#config timefmt="%Y%m%d%H%M" -->
 <!--#if expr="(${DATE_LOCAL} >= 201302211600) && (${DATE_LOCAL} < 20130222)" -->
-<div style="border:2px solid #AF0909; border-radius: 5px; padding: 12px 9px 4px 9px;margin-bottom:9px;">
-<img src="http://www.unl.edu/ucomm/images/sa_icon_winterweather.gif" style="float:right;margin-left:6px;" alt="winter storm icon" />
-  	<span style="font-size: 10px;">ALERT ISSUED 10:00 PM, FEB. 21, 2013</span><br />
-  	<h3 style="color:#C60302;"><strong>UNL to announce Friday plans in morning</strong></h5>
-  	<p>UNL officials continue to monitor the winter storm that moved into the area on Thursday. A decision on closing or re-opening the university on Friday will be made early Friday morning, after an assessment of the storm's intensity and its effects on the university's and city's snow-clearing operations has been made. <strong>If the university is open, it will be announced here</strong>. In the event of a Friday closure, an announcement will be made via this website, via social channels and the UNL Alert system. To sign up for UNL Alert, go to <a href="http://emergency.unl.edu/unlalert">http://emergency.unl.edu/unlalert</a>. Follow <a href="http://twitter.com/unlnews">@UNLNews</a> and <a href="http://twitter.com/unlincoln">@UNLincoln</a> on Twitter and UNL's Facebook page (<a href="http://www.facebook.com/unlincoln">http://www.facebook.com/unlincoln</a>) for more information.</p>
-	<span style="font-size: 10px;"><a href="http://bf.unl.edu/policies/winter-weather-policy-and-procedures">WINTER WEATHER POLICY AND PROCEDURES</a></span>
+<section class="wdn-band splash-alert">
+	<div class="wdn-inner-wrapper wdn-inner-padding-lg">
+		<div class="wdn-grid-set">
+			<div class="bp2-wdn-col-one-seventh">			  	
+				<img src="../splash/images/caution-icon.svg" onerror="this.src=../../splash/images/caution-icon.png">
 			</div>
+			<div class="bp2-wdn-col-six-sevenths">
+				<i class="icon-attention"></i>
+				<h2 class="clear-top"><span class="wdn-subhead">Alert issued 4:30 AM, Feb. 22, 2013 </span>UNL is Open Today</h2>
+			  	<p>The University of Nebraska-Lincoln is open and all activities will be conducted as usual.</p>
+				<p>Although the University is open during periods of adverse conditions, supervisors and department chairs may alter work schedules to make allowances for unique travel problems. This means employees must still account for their normal workday by working or taking vacation leave.</p>
+				<span><a href="http://bf.unl.edu/policies/winter-weather-policy-and-procedures">WINTER WEATHER POLICY AND PROCEDURES</a></span>
+			</div>
+		</div>
+	</div>
+</section>
 <!--#elif expr="(${DATE_LOCAL} >= 201302220430) && (${DATE_LOCAL} <= 201302221000)" -->
-<div style="border:2px solid #AF0909; border-radius: 5px; padding: 12px 9px 4px 9px;margin-bottom:9px;">
-<img src="http://www.unl.edu/ucomm/images/sa_icon_winterweather.gif" style="float:right;margin-left:6px;" alt="winter storm icon" />
-  	<span style="font-size: 10px;">ALERT ISSUED 4:30 AM, FEB. 22, 2013</span><br />
-  	<h3 style="color:#C60302;"><strong>UNL is Open Today</strong></h5>
+<section class="wdn-band splash-alert">
+	<div class="wdn-inner-wrapper wdn-inner-padding-lg">
+		<div class="wdn-grid-set">
+			<div class="bp2-wdn-col-one-seventh">			  	
+				<img src="../splash/images/caution-icon.svg" onerror="this.src=../../splash/images/caution-icon.png">
+			</div>
+			<div class="bp2-wdn-col-six-sevenths">
+				<i class="icon-attention"></i>
+				<h2 class="clear-top"><span class="wdn-subhead">Alert issued 4:30 AM, Feb. 22, 2013 </span>UNL is Open Today</h2>
 			  	<p>The University of Nebraska-Lincoln is open and all activities will be conducted as usual.</p>
 				<p>Although the University is open during periods of adverse conditions, supervisors and department chairs may alter work schedules to make allowances for unique travel problems. This means employees must still account for their normal workday by working or taking vacation leave.</p>
-	<span style="font-size: 10px;"><a href="http://bf.unl.edu/policies/winter-weather-policy-and-procedures">WINTER WEATHER POLICY AND PROCEDURES</a></span>
+				<span><a href="http://bf.unl.edu/policies/winter-weather-policy-and-procedures">WINTER WEATHER POLICY AND PROCEDURES</a></span>
+			</div>
+		</div>
 	</div>
+</section>
 <!--#else -->
 <!--#endif -->
\ No newline at end of file

sharedcode/css/4.0.css

@@ -360,9 +360,6 @@ a[class^="quick-link-"] {
     background-size: 4.499em;
   }
 }
-.wdn-video-band .mejs-overlay-button {
-  display: none;
-}
 .wdn-video-band img {
   display: block;
 }
@@ -453,6 +450,27 @@ a[class^="quick-link-"] {
     display: none;
   }
 }
+.splash-alert {
+  background: url(../../splash/images/caution-border.png), url(../../splash/images/caution-border.png);
+  background: url(../../splash/images/caution-border.svg), url(../../splash/images/caution-border.svg);
+  background-color: #d4440b;
+  background-repeat: repeat-x, repeat-x;
+  background-position: 50% 0, 50% 100%;
+  color: #fff;
+}
+.splash-alert img {
+  padding-top: 0.563em;
+}
+.splash-alert h2 {
+  color: #fff;
+}
+.splash-alert h2 .wdn-subhead {
+  color: #fff;
+}
+.splash-alert a {
+  color: #fff;
+  border-bottom: 1px dotted #fff;
+}
 .splash-intro {
   background-color: #453e2b;
 }
@@ -511,7 +529,6 @@ a[class^="quick-link-"] {
 .splash-academic-colleges figure {
   position: absolute;
   z-index: 1;
-  margin-bottom: 0;
 }
 .splash-academic-colleges figure img {
   display: block;

sharedcode/less/4.0.less

@@ -193,7 +193,6 @@ p.small {
 	background-size: cover;
 }
 
-
 // GLOBAL
 
 .framed-text-box {
@@ -334,7 +333,6 @@ form .input-group :last-child button {
     display: none
 }
 
-
 // QUICK LINKS
 
 a[class^="quick-link-"] {
@@ -381,7 +379,6 @@ a[class^="quick-link-"] span {
 	}
 }
 
-
 // Quick Link Icons (alphabetized)
 .quick-link-apply {
 	background: transparent url(../../images/icons/png/quick-links-icon-apply.png) 50% 0 no-repeat;
@@ -452,8 +449,6 @@ a[class^="quick-link-"] {
 
 .wdn-video-band {
 
-	.mejs-overlay-button { display: none; }
-
 	img {
 		display: block;
 
@@ -542,6 +537,32 @@ a[class^="quick-link-"] {
 
 // SPLASH
 
+.splash-alert {
+	background: url(../../splash/images/caution-border.png), url(../../splash/images/caution-border.png);
+	background: url(../../splash/images/caution-border.svg), url(../../splash/images/caution-border.svg);
+	background-color: #d4440b;
+	background-repeat: repeat-x, repeat-x;
+	background-position: 50% 0, 50% 100%;
+	color: #fff;
+
+	img {
+		padding-top: 0.563em;
+	}
+
+	h2 {
+		color: #fff;
+
+		.wdn-subhead {
+			color: #fff;			
+		}
+	}
+
+	a {
+		color: #fff;
+		border-bottom: 1px dotted #fff;
+	}
+}
+
 .splash-intro {
 	background-color: #453e2b;
 
@@ -607,7 +628,6 @@ a[class^="quick-link-"] {
 	figure {
 		position: absolute;
 		z-index: 1;
-		margin-bottom: 0;
 	
 		img {
 			display: block;
@@ -692,6 +712,7 @@ a[class^="quick-link-"] {
 			text-align: left;
 		}
 	}
+
 }
 
 .splash-college-architecture {

splash/images/caution-border.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16"><rect x="16" width="33" height="16" fill="none"/><rect x="16" width="28" height="16" fill="none"/><polygon points="12,0 4,16 20,16 28,0" fill="none"/><polygon fill="#C13E0A" points="0,0 0,16 4,16 12,0"/><polygon fill="#C13E0A" points="28,0 20,16 32,16 32,0"/></svg>
\ No newline at end of file

splash/images/caution-icon.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88"><path fill="#fff" d="M86.8 72.155l-38.22-60.568c-2.517-3.991-6.637-3.991-9.154 0l-38.228 60.568c-2.52 3.981-.714 7.251 3.997 7.251h77.607c4.719 0 6.519-3.27 3.998-7.251zm-47.287-44.964c0-2.478 2.013-4.488 4.489-4.488 2.478 0 4.488 2.01 4.488 4.488v26.656c0 2.488-2.01 4.495-4.488 4.495-2.475 0-4.489-2.007-4.489-4.495v-26.656zm4.491 45.4c-2.488 0-4.511-2.007-4.511-4.511 0-2.488 2.023-4.495 4.511-4.495 2.485 0 4.501 2.007 4.501 4.495 0 2.505-2.016 4.511-4.501 4.511z"/></svg>
\ No newline at end of file