a:link { color: #000050; }
a:visited { color: #0000f0; }
body { background-color: #508f6d; font-family: "Special Elite", sans-serif; font-size: 12px; }
h1   { color: #000050; font-family: "Special Elite", sans-serif; font-size: 24px; text-align: center; }
li   { color: #000050; margin-bottom: 2px; }
ul   { padding-left: 10px; }
ol   { padding-left: 10px; }
p    { color: #000050; font-family: sans-serif; font-size: 12px; }
td   { color: #000050; font-family: sans-serif; font-size: 12px; vertical-align: top; padding: 3px; }
td.nice { background: rgba(139, 232, 183, 0.7); border: 1px solid #cde2f5; border-radius: 8px; }
.quote { color: #0000f0; font-style: italic; font-size: smaller; }
.menuitem { color: #0000f0; font-weight: bold; }

    .accordion > input[name="collapse"] { display: none; }
    .accordion .content
    { background: #fff;
      overflow: hidden;
      height: 0;
      transition: 0.5s;
      box-shadow: 1px 2px 4px #2a4374;
    }
    .accordion label
    { color: #101010;
      cursor: pointer;
      font-weight: normal;
      padding: 5px;
      background: #e0e0e0;
    }
     
    .accordion label:hover,
    .accordion label:focus { background: #f0f0f0; }
     
    .accordion .handle label:before
    { font-family: sans-serif;
      content: '\25BC';
      color: #2a4374;
      display: inline-block;
      margin-right: 10px;
      font-size: 1.25em;
      vertical-align: middle;
      transition: 0.4s;
    }
     
    .accordion > input[name="collapse"]:checked ~ .handle label:before
    { transform: rotate(180deg);
      transform-origin: center;
      transition: 0.4s;
    }
    .accordion > input[name="collapse"]:checked ~ .content
    { height: auto;
      padding: 6px;
      background: #f0f0f0;
      transition: height 0.5s;
    }

 /* Popup container only for position */
.popup {
    position: fixed;
    left:0px;
    top:0px;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: whitesmoke;
    color: #604040;
    text-align: center;
    border-radius: 3px;
    padding: 8px 0;
    position: absolute;
    z-index: 2;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    box-shadow:0px 0px 10px 5px #a0f0a0;

}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}