* { padding: 0; margin: 0; vertical-align: top; }

body {
    front-family: verdana, arial, sans-serif;
    margin:10px;
    padding: 5px;
    background-color: #FFFDED;
    border:10px;
 }	   
a { color: #069; }
a:hover { color: #28b; }

button { font-size: 12px; padding: 1px 3px; background-color: #FF5733;} /* +/- buttons in years menu and at bottom of map*/

#aou { width:280px}
#map { width: 740px; height: 480px;}
.container { position: relative;}
.topright { position: absolute; top: 1px; right: 1px; font-size: 18px;}

.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } 
.info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } 
.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

#content { width: 250px; /*880px; */
	margin: 0 auto;	padding: 1px; z-index:2;}

.dirli { margin: 0px 0px 0px 25px; line-height: 16px; padding: 0px 0px; font-size: 14px; font-style:italic; background-color:#9ee;}

.demo-container {
	box-sizing: border-box;
	width: 260px; /* 850px; */
	height: 240px; /* 450px; */
        z-index:2;
	padding: 1px 1px 1px 1px;  /* 20px 15px 15px 15px; */
	margin: auto auto auto auto /* 15px auto 30px auto; */
	border: 1px solid #ddd;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder { width: 100%; height: 100%; font-size: 8px; line-height: 1.2em; z-index:2;}

.dropbtn {  background-color:DarkBlue /* #008CBA*/;  color: white;  padding: 4px;  font-size: 12px;  border: none; font-family: veranda, arial, sans-serif;}
.dropdown {  position: relative;  display: inline-block; color:yellow; }
.dropdown-content {  display: none;  position: absolute;  color: white; background-color: #f1f1f1; 
                     min-width: 240px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
                     padding:4px; z-index: 1;}
.dropdown-content a {  color: black;  padding: 2px 2px;  text-decoration: none;  display: block; font-size: 12px; font-family: verdana, arial, sans-serif;}
.dropdown-content a:hover { color: white;  background-color: DarkGreen /*#4caf50*/; font-size: 12px;}
.dropdown:hover .dropdown-content {display: block; }
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.legend table {	border-spacing: 5px;}

#ms { font-size: 14px; }
#speciesLabel { background-color: #f8f; height:32px;}

.navbar { overflow: hidden; background-color: #333; color:green;}

.navbar a { float: left; font-size: 16px; color: yellow; text-align: center; padding: 3px 3px; text-decoration: none;}

.subnav { float: left; overflow: hidden; z-index:1}

/* Data Scale Years drop-down menus */
.subnav { font-size: 14px; border: none; outline: none; color: white; padding: 5px 5px; background-color: #333; /* inherit */;
  font-family: inherit; margin: 0; }

.subnavbtn { font-size: 14px; border: none; outline: none; color: white; padding: 5px 5px; background-color: red;
  font-family: inherit; margin: 0; }

.navbar a:hover, .subnav:hover .subnavbtn { background-color: violet;}

.subnav-content { display: none; position: absolute; left: 0; color: white; font-weight:bold; 
                  font-size:14px; background-color: yellow; width: 100%; z-index: 1; padding: 5px 2px;}

.subnav-content li { padding-left:12
				      px;}

.subnav-content a { float: left; color: white; text-decoration: none;}

.subnav-content a:hover { background-color: green/*#eee*/; color: black;}

.subnav:hover .subnav-content { display: block;}

#table { z-index=3;}

#details {font-size: 8px;}
.dot { height: 20px; width: 20px; background-color: blue; border-radius: 50%; display: inline-block;}
#dot2 { background-color: red;}
#dot3 { background-color:yellow;}