Display DARS outage banner

src/app/app.component.html

+<div class="alert-banner">
+  <p>
+    <md-icon class="material-icons info" role="img" aria-hidden="true">info</md-icon>
+    Coming soon!  By Fall 2019, you will be able to run a DARS audit in the Course Search & Enroll app to check your degree progress and see how planned courses apply to your degree requirements!
+  </p>
+</div>
+
 <header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">
   <cse-header></cse-header>
   <cse-navigation></cse-navigation>

src/app/app.component.scss

@@ -4,7 +4,7 @@
 
 header {
   position: absolute;
-  top: 0;
+  top: 44px;
   left: 0;
   width: 100%;
   height: 112px;
@@ -20,7 +20,7 @@ header {
 
 main {
   position: absolute;
-  top: 112px;
+  top: 156px;
   left: 0;
   bottom: 0;
   right: 0;
@@ -32,3 +32,53 @@ main {
   min-width: 360px;
   height: 100vh;
 }
+
+.alert-banner {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: white;
+  p {
+    margin: 13px 0;
+    padding: 0px 15px;
+    font-family: mat-font-family($config);
+    font-size: 14px;
+    line-height: 1.4em;
+    -webkit-font-smoothing: antialiased;
+  }
+  md-icon {
+    font-size: 16px;
+    color: #0479a8;
+    top: 2.5px;
+  }
+  a {
+    text-decoration: none;
+  }
+}
+
+@media screen and (min-width: 650px) and (max-width: 1246px) {
+  main {
+    top: 130px !important;
+  }
+  header {
+    top: 66px !important;
+  }
+}
+
+@media screen and (max-width: 649px) {
+  main {
+    top: 149px !important;
+  }
+  header {
+    top: 85px !important;
+  }
+}
+
+@media screen and (max-width: 440px) {
+  main {
+    top: 166px !important;
+  }
+  header {
+    top: 102px !important;
+  }
+}