a.footnote {
   text-decoration:none;
   background-color: #FEF6BB;
   padding-left: 2px;
   padding-right: 2px;
   margin-right: 2px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
} 

a.footnote span {
   z-index: -1;
   opacity: 0;
   position: fixed;
   left: 15px; 
   bottom: 20px;
   margin-left: 0px;
   margin-right: 18px;
   padding:14px 20px;
   border-radius:4px; box-shadow: 5px 5px 8px #CCC;
   border:1px solid #DCA;
   background-color: #FEF6BB;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}

a.footnote:hover span {
   z-index: 9;
   opacity: 1;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}  

/*
Crimson: #DC143C
Emerald Green: #50C878
Royal Blue: #4169E1
Goldenrod: #DAA520
Magenta: #FF00FF
Turquoise: #40E0D0
Tangerine: #FFA500
Teal: #008080
Chartreuse: #7FFF00
Cerulean: #007BA7
Fuchsia: #FF00FF
Indigo: #4B0082
*/
.footnote-2 {color: #DC143C; }
.footnote-3 {color: #50C878; }
.footnote-4 {color: #4169E1; }
.footnote-5 {color: #DAA520; }
.footnote-6 {color: #FF00FF; }
.footnote-7 {color: #40E0D0; }
.footnote-8 {color: #FFA500; }
.footnote-9 {color: #008080; }
.footnote-10 {color: #7FFF00; }
.footnote-11 {color: #007BA7; }
.footnote-12 {color: #FF00FF; }
.footnote-13 {color: #4B0082; }
.footnoteText {display: none; color: #ff0000; font-size: 12pt; }
    .footnote:focus + .footnoteText {display: block;}
    .close:focus .footnoteText {display: none;}