﻿.home:before
{
   position: absolute;
   content: "";
   opacity: 0.15;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background-image: url("/images/USAREUR-AF_Shoulder_Sleeve_Insignia.png");
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: 40%;
   z-index: 1;
}

.home { display: flex; flex-direction: column; position: relative; color: black; font-size: 1.25em; height: 100%; overflow-y: auto; }

.home > .title { margin-left: auto; margin-right: auto; margin-top: 1em; font-size: 3em; color: #131279; }
.home-panels { flex: 1 1 40%; display: flex; flex-direction: row; margin-left: 5em; margin-right: 5em; z-index: 2; }
.home-block { flex: 3; margin: 0 1em; color: black; display: flex; flex-direction: column; }
.home-block > a { align-self: center; }
.home-block-lbl { font-size: 1.2em; }
.home-block > ol > li { color: red; }
.home-block2 { flex: 2; margin: 0 1em; color: black; }
.home-block2 > ul > li > a { position: relative; }

.home > .announcements { display: flex; flex: 1 1 auto; margin-left: 2em; margin-right: 2em; margin-top: .1em; margin-bottom: .25em; height: 120px; }

.home > .announcements > .notices { width: 50%; margin-right: .5em; border: 1px solid red; background-color: white; color: red; overflow-y: auto; height: 100%; z-index: 2; }
   .home > .announcements > .notices > legend
   {
      font-size: 1em;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      width: 14rem;
      padding-left: 1em;
      padding-right: 0;
      margin-bottom: 0;
      border-left: 1px solid red;
      border-right: 1px solid red;
      border-top: 1px solid red;
      border-bottom: none;
      color: red;
      background-color: white;
   }
.home > .announcements > .daily { width: 50%; border: 1px solid black; margin-left: .5em; overflow-y: auto; height: 100%; z-index: 2; }
   .home > .announcements > .daily > legend
   {
      font-size: 1em;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      width: 15rem;
      padding-left: 1rem;
      padding-right: 0;
      margin-bottom: 0;
      border-left: 1px solid black;
      border-right: 1px solid black;
      border-top: 1px solid black;
      border-bottom: none;
      color: green;
   }

   .blinking
   {
      animation-name: blink;
      animation-duration: 1s;
      animation-delay: 1.5s;
      animation-iteration-count: 3;
      animation-timing-function: ease;
      opacity: 1;
   }

   @keyframes blink
   {
      0% { opacity: 1;}
      50% { opacity: 0; color: black; }
      100% { opacity: 1;}
   }

.announcements-list { font-size: .9em; }
.announcements-row { margin-left: .5rem; margin-right: .5rem; margin-bottom: .25rem; margin-top: 0; }
.announcements-row > span { margin-left: 1rem; }
