#popup {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

#p-container {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.2);
  border-radius: 16px 16px 0 0;
  border: 2px solid rgba(120, 120, 120, 0.9);
  display: none;
  height: 120px;
  position: absolute;
  width: 240px;
  z-index: 11;
}

.p-message {
  padding: 2px;
  font-size: 16px;
}

#p-button-container {
  bottom: 0;
  position: absolute;
  right: 0;
}

#p-container button {
  background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#ccc));
  background: -moz-linear-gradient(top, #f0f0f0, #ccc);
  background: linear-gradient(to bottom, #f0f0f0, #ccc);
  border: 1px solid #ccc;
  color: #111;
  float: right;
  font-size: 12px;
  margin: 2px;
  padding: 2px 10px;
  text-align: center;
}

#p-container button:hover,
#p-container button:focus {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background: -moz-linear-gradient(top, #fff, #ddd);
  background: linear-gradient(to bottom, #fff, #ddd);
  border: 1px solid #eee;
}

#p-container button:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ccc));
  background: -moz-linear-gradient(top, #aaa, #ccc);
  background: linear-gradient(to bottom, #aaa, #ccc);
}

#p-title {
  background-color: rgba(200, 200, 200, 0.9);
  border-radius: 16px 16px 0 0;
  box-sizing: border-box;
  font-size: 18px;
  padding: 2px 4px;
  position: relative;
  width: 240px;
}

#p-container::after{
  content: '';
  position: absolute;
  left: 112px;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid rgba(120, 120, 120, 0.9);
  clear: both;
}

.p-ani {
  display: none;
  border: 2px solid cyan;
  border-radius: 16px 16px 0 0;
  bottom: -2px;
  left: -2px;
  top: -2px;
  right: -2px;
  position: absolute;
}

#p-ani-top {
  -webkit-animation: ani-top 2s infinite;
  animation: ani-top 2s infinite;
}

#p-ani-bottom {
  -webkit-animation: ani-bottom 2s infinite;
  animation: ani-bottom 2s infinite;
}

@-webkit-keyframes ani-top {
    0%   { clip: rect(0px, 244px, 2px, 0px); }
    25%  { clip: rect(0px, 244px, 124px, 242px); }
    50%  { clip: rect(122px, 244px, 124px, 0px); }
    75%  { clip: rect(0px, 2px, 120px, 0px); }
    100% { clip: rect(0px, 244px, 2px, 0px);}
}

@keyframes ani-top {
    0%   {clip: rect(0px, 244px, 2px, 0px); }
    25%  {clip: rect(0px, 244px, 124px, 242px); }
    50%  {clip: rect(122px, 244px, 124px, 0px); }
    75%  {clip: rect(0px, 2px, 124px, 0px); }
    100% {clip: rect(0px, 244px, 2px, 0px);}
}

@-webkit-keyframes ani-bottom {
  0%  { clip: rect(122px, 244px, 124px, 0px); }
  25%  { clip: rect(0px, 2px, 120px, 0px); }
  50% { clip: rect(0px, 244px, 2px, 0px);}
  75%   { clip: rect(0px, 244px, 124px, 242px); }
  100%  { clip: rect(122px, 244px, 124px, 0px); }
}

@keyframes ani-bottom {
  0%  { clip: rect(122px, 244px, 124px, 0px); }
  25%  { clip: rect(0px, 2px, 120px, 0px); }
  50% { clip: rect(0px, 244px, 2px, 0px);}
  75%   { clip: rect(0px, 244px, 124px, 242px); }
  100%  { clip: rect(122px, 244px, 124px, 0px); }
}