#legend{
		  opacity:30%;
		  position: absolute;
		  bottom:-100px;
		  left:-90px;
		  width:400px;
		  height:580px;
		  z-index: 1000;
		  border-style: solid;
          border-color: #626366;
          border-width: 2px;
		  background-color: #FFFFFF;
		  border-radius: 5px;
		  transform: scale(0.5);
		  -webkit-transition: top 1s ease-out 1s;
          -moz-transition: top 1s ease-out 1s;
          -o-transition: top 1s ease-out 1s;
          transition: top 1s ease-out 1s;
		      
		 }
		  #legend:hover{
		  left:10px;  
		  bottom:30px;
		  opacity:90%;
		  transform: scale(1);
	  
		 }		 
		 #legend_title{
         position: relative;
         top:5px;
         left:5%;
		 margin-bottom:15px;
         }
		  .symbol{
		 position: relative;
		 top:8%;
		 left:5%;
		 width:90%;
		 height:25px;
		 z-index: 1000;
		 margin-top: 5px;
		 
		 	
		 }
		 .legend_txt{
		 position: relative;
		 left:40px;
		 width:80%;
		 height:100%;
		 z-index: 1000;

		 }
		 #class011{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  background: repeating-linear-gradient(45deg, #555 0, #555 1px, transparent 1px, transparent 5px);	
		 }
		  #class11{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  background: repeating-linear-gradient(-45deg, #555 0, #555 1px, transparent 1px, transparent 5px);	
		 }		 
		  #class10{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 1px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#CBCBCB;	
		 }		 
		  #class9{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#007f00;
		 }		 
		  #class8{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:lightpink;
		 }		 
		  #class7{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#b440de;
		 }		 
		 #class77{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#0400fc;
		 }
		  #class07{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#ffff00;
		 }
		 #class007{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#aaff00;
		 }
		  #class6{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#40dede;
		 }
		 
		  #class5{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#5bff00;		  
		 }
		   #class4{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#cfa215;
		 }
		   #class04{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-color: #000000;
          border-width: 2px;
		  background-color:#ff4500;
		 }
		   #class03{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-style: dashed;
          border-color: #8b0000;
          border-width: 3px;	
		 }
		   #class3{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-style: dashed;
          border-color: #03508f;
          border-width: 3px;	
		 }
		    #class2{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-style: solid;
          border-color: red;
          border-width: 3px;	
		 }
		    #class1{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-style: solid;
          border-color: #0d3ea1;
          border-width: 3px;	
		 }
		    #class0{
		  position: absolute;
		  left:0%;
		  width:30px;
		  height:15px;
		  z-index: 10000;
		  border-radius: 2px;
		  border-style: solid;
          border-color: green;
          border-width: 3px;		
		 }
		  .message{
		 position: absolute;
		 margin-left:55px; 
		 margin-top:10px; 
		 z-index:1000;
		 opacity:60%;
		 }
		 .message:hover{
		 opacity:100%;
		 }