styled site status banner

lms/static/sass/course/base/_base.scss

@@ -131,6 +131,34 @@ img {
   border: 1px solid #f00;
 }
 
+.site-status {
+  padding: 10px;
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .0)) $pink;
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
+  font-size: 14px;
+
+  .white-error-icon {
+    position: relative;
+    top: -4px;
+    float: left;
+    display: block;
+    width: 27px;
+    height: 24px;
+    margin-right: 15px;
+    background: url(../images/large-white-error-icon.png) no-repeat;
+  }
+
+  .inner-wrapper {
+    margin: auto;
+    max-width: 1180px;
+    min-width: 760px;
+  }
+
+  p {
+    line-height: 1.3;
+    color: #fff;
+  }
+}
 
 .toast-notification {
   position: fixed;

lms/templates/navigation.html

@@ -14,9 +14,15 @@ site_status_msg = get_site_status_msg()
 %>
 
 % if site_status_msg:
-<div class="site-status">${site_status_msg}</div>
+<div class="site-status">
+  <div class="inner-wrapper">
+    <span class="white-error-icon"></span>
+    <p>${site_status_msg}</p>
+  </div>
+</div>
 % endif
-  
+
+
 
 % if course:
   <header class="global slim" aria-label="Global Navigation">