app-startup-style.css

#smc-startup-banner {
    width: 350px;
    /* bootstrap 3.3 has this line height. fix it, if it changes! */
    line-height: 1.42857143;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 100px;
    margin: auto;
    max-width:100%;
    max-height:100%;
    font-family: sans-serif;
    font-size: 26px;
    color: white;
}

#smc-startup-banner-status {
    font-family: sans-serif;
    color: #666;
    text-align: center;
    position: fixed;
    bottom: 15px;
    left: 0;
    right: 0;
}
#smc-startup-banner img {
    vertical-align: middle;
    width:  282px;   /* original 94px */
    height: 231px;   /* original 77px */
}
#smc-startup-banner .banner-error {
  width: 350px;
  opacity: 0.0;
  animation: banner-error ease-in 31s forwards;
  float: left;
  border-radius: 5px;
  padding: 15px 0;
}
#smc-startup-banner .banner-blink {
  width: 350px;
  border-radius: 5px;
  padding: 15px 0;
  background-color: #4474c0;
  margin-bottom: 5px;
  opacity: 1.0;
  animation: banner-red 31s forwards;
}
@keyframes banner-red {
    0% {background-color: #4474c0;}
   95% {background-color: #4474c0;}
  100% {background-color: #bf1919;}
}
#smc-startup-banner .banner-blink img {
  animation: banner-blink 31s forwards;
}
@keyframes banner-blink {
     0% {opacity: 1.0;}
     5% {opacity:  .1;}
    10% {opacity: 1.0;}
    15% {opacity:  .1;}
    20% {opacity: 1.0;}
    25% {opacity:  .1;}
    30% {opacity: 1.0;}
    35% {opacity:  .1;}
    40% {opacity: 1.0;}
    45% {opacity:  .1;}
    50% {opacity: 1.0;}
    55% {opacity:  .1;}
    60% {opacity: 1.0;}
    65% {opacity:  .2;}
    70% {opacity: 1.0;}
    80% {opacity:  .3;}
    90% {opacity: 0.7;}
    95% {opacity: 0.1;}
   100% {opacity: 1.0;}
}
@keyframes banner-error {
 95% {opacity: 0.0; background-color: #FFFFFF;}
100% {opacity: 1.0; background-color: #bf1919;}
}
#smc-startup-banner .message {
    font-size: 14px;
}
#smc-startup-banner a {
    color: white;
    text-decoration: underline;
}