#announcement
{
   background-color: #fff;
   border: .075em solid #000;
   box-shadow: .0625em .0625em #000,
               .125em  .125em  #000,
               .1875em .1875em #000,
               .25em   .25em   #000,
               .3125em .3125em #000;
   color: #41A62A;
   cursor: default;
   font-family: source;
   font-size: 2em;
   padding: 1em 2em;
   position: absolute;
   text-align: right;
   white-space: nowrap;
   top: 23.5%;
   right: 10%;
   z-index: 6;
}

#announcement.visible
{
   opacity: 1;
/* toggle visibility and transition opacity */
   -webkit-transition: opacity 250ms ease-out;
      -moz-transition: opacity 250ms ease-out;
       -ms-transition: opacity 250ms ease-out;
        -o-transition: opacity 250ms ease-out;
           transition: opacity 250ms ease-out;
   transform: scale(1);
   visibility: visible;
}

#announcement.hidden
{
   opacity: 0;
/* delay visibility toggle until opacity transition has finished to obviate the need for a JS callback */
   -webkit-transition: visibility 0ms linear 500ms, opacity 500ms ease-out, -webkit-transform 500ms ease-out;
      -moz-transition: visibility 0ms linear 500ms, opacity 500ms ease-out, -moz-transform 500ms ease-out;
       -ms-transition: visibility 0ms linear 500ms, opacity 500ms ease-out, -ms-transform 500ms ease-out;
        -o-transition: visibility 0ms linear 500ms, opacity 500ms ease-out, -o-transform 500ms ease-out;
           transition: visibility 0ms linear 500ms, opacity 500ms ease-out, transform 500ms ease-out;
   -webkit-transform: scale(0);
      -moz-transform: scale(0);
       -ms-transform: scale(0);
        -o-transform: scale(0);
           transform: scale(0);
   -webkit-transform-origin: 50% 25%;
      -moz-transform-origin: 50% 25%;
       -ms-transform-origin: 50% 25%;
        -o-transform-origin: 50% 25%;
           transform-origin: 50% 25%;
   visibility: hidden;
}

#announcement > div
{
   color: #f00;
}

#announcement > #close-button
{
   background-color: #fff;
   border: .125em solid #000;
   border-radius: 100%;
   box-shadow: .0625em .0625em #000,
               .125em  .125em  #000,
               .1875em .1875em #000,
               .25em   .25em   #000,
               .3125em .3125em #000;
   color: #09f;
   font-size: 75%;
   position: absolute;
   right: -.75em;
   top: -.75em;
   width: 1.5em;
   height: 1.5em;
}

#announcement > #close-button:before
{
   color: #000;
   content: "\d7";      /* × */
   font-family: "Courier New", courier, monospace;
   font-size: 325%;
   line-height: 0;
   position: relative;
   top: .18em;
   left: -.1em;
}

@media screen and (max-width: 500px) and (orientation: portrait),
                  (max-height: 500px) and (orientation: landscape)
{
   #announcement
   {
      font-size: 1.5em;
   }

   #announcement > #close-button
   {
      font-size: 100%;
   }

   #announcement > #close-button:before
   {
      top: .19em;
      left: -.1em;
   }
}

@media screen and (max-width: 360px) and (orientation: portrait),
                  (max-height: 360px) and (orientation: landscape)
{
   #announcement
   {
      font-size: 1.25em;
   }
}