body
{
   width : 80%;
   padding-left: 10%;
   margin-top:0px;
   margin-bottom:0px;
   border-top: 0px;
   background-color: black; /*#fff9e6;*/
}

body,td, h4
{
   font-family : Verdana, Arial;
   font-size : 10pt;
   text-align: left;
}

td, h4
{
   font-family : Verdana;
}
.content
{
   /* width : %; */
   margin-top:0px;
   margin-bottom:0px;
   padding-top: 3%;
   padding-bottom:0px;
   border-top: 0px;
   padding-left: 5%;
   padding-right: 5%; 
   background-color: #ffffff;
   border-right: 1px solid lightgray;
   border-left: 1px solid lightgray;
   border-top: 1px solid lightgray;
   border-bottom: 1px solid lightgray;
   border-radius: 5px 5px 5px 5px;

}
.banner
{
   height: 130px;
 /*  width:100%; */
   padding-top:40px;
   padding-left:4%;
 /*  background-color: 	#d2b48c; */ /*black;*/
   background: url("banner.png") no-repeat fixed; 
 /*  border-radius: 0px 0px 15px 15px; */
}
.footer
{
   margin-top:0px;
   height: 20px;
   width:100%;
   text-align:right;
   color: gray;
   padding-top:4px;
/*   border-top: 1px solid lightgray; */
   font-size : 9pt;
}
.img-right
{
    float:right;
    border: 1px solid black;
}
.black-border
{
    /*float:left;*/
    border: 1px solid black; 
}

.menu
{
/*    float:right; */
    margin-left:25px;
    margin-right:20px;
    margin-top:10px;
    color:white;
}


.menu a
{
    color:white;
    padding-right: 20px;
    text-decoration: none;
}    
.menu .aselected
{
    color:lightgray;
    padding-right: 20px;
}
.content a
{
    padding-right: 20px;
    text-decoration: none;
    padding-right:0px;
}    
.content a {color:#CFA959;}      /* unvisited link */
.content a:visited {color:#daa520;}  /* visited link */
.content a:hover {color:#b22222;}  /* mouse over link */
.content a:active {color:#CFA959;}  /* selected link */

.large-text
{
   font-size:12pt;
}
.italic 
{
   font-style: italic;
}
.attrib 
{
   font-style: italic;
   font-size: 7pt;
}
h1
{
    color: white;
    font-variant: dropcaps;
   font-family : Calibri, Verdana, Arial;
   font-size: 36pt;
   padding-left: 20px;
   padding-top:50px;

   padding-bottom:0px;
   margin-bottom:0px;
}
h3 
{

   font-weight: bold;
   font-size: 16pt;
   color:#CFA959;
}

h4 
{

   font-weight: bold;
    padding-bottom:0px; 
    margin-bottom:0px;
}
table 
{
    border-collapse: collapse;
}
td
{
   border-top: 1px solid lightgray;
   border-left: 1px solid lightgray;
   border-right: 1px solid lightgray;
   border-bottom: 1px solid lightgray;
   padding: 2px 1px 1px 2px;
   font-size : 10pt;
   text-align: left;
}
th
{
   border-top: 1px solid lightgray;
   border-left: 1px solid lightgray;
   border-right: 1px solid lightgray;
   border-bottom: 1px solid lightgray;
   font-family : Verdana;
   font-size : 9pt;
   font-weight : bold;
   text-align: center;
   background-color: #f2f2f2;
   padding: 2px 1px 1px 2px;
}

.noborder 
{
   border: 0px solid lightgray;
}
.noborder td
{
   padding: 2px 5px 2px 5px;
   text-align: left;
   vertical-align:top;
   border: 0px solid lightgray;
}
.noborder th
{
   text-align: right;
   background-color: #f2f2f2;
   padding: 2px 5px 2px 5px;
   border: 0px solid lightgray;
}

.std {   border: 1px solid lightgray; }
.std td {   border: 1px solid lightgray; }
.std th {   border: 1px solid lightgray; }

.inner_border td
{
   border: 0px solid lightgray;
}
.tpreservation td
{
   font-size: 9pt;
}

.np, .comment
{
   background-color: #f2f2f2;
   color: #f2f2f2;
}
.ok
{
   background-color: #e6ffcc;
   color: #000000;
   text-align: center;
}
.extinct
{
   background-color: #000000;
   color: #FFFFFF;
   text-align: center;
}
.endangered
{
   background-color: #FF0000;
   color: #FFFFFF;
   text-align: center;
}
.threatened
{
   background-color: #ff704d;
   color: #000000;
   text-align: center;
}
.critically
{
   background-color: #6600cc;
   color: #FFFFFF;
   text-align: center;
}
.near
{
   background-color: #fff5cc;
   color: #000000;
   text-align: center;
}
.vulnerable
{
   background-color: #ffa64d;
   color: #000000;
   text-align: center;
}
.genus
{
   border-bottom: 1pt solid black;
   padding-top : 8px;
   font-weight: bold;
}


.preservation a
{
   padding-left: 20px;
}

.nopad a
{
padding-left:0px;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}