#smc-startup-banner {
width: 350px;
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;
height: 231px;
}
#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;
}