.hintsClass        {text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border: 1px dotted;
                    border-color: Black; padding: 4px 4px 4px 4px; width: 250px; background-color: #ffffff;}     
a.hints            {position:relative; z-index:24; color: blue; text-decoration:underline; cursor: help;}
a.hints:hover      {z-index:25; background-color:transparent}
a.hints span       {display: none;}
a.hints:hover span { /*the span will display just on :hover state*/ display:block; position:absolute; top:20px; left:40px; 
                    width:175px; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border:1px dotted #000; padding: 10px;
                    color:#000; text-align: center; background-color:#fff; text-decoration:none;}
.hints2Class        {text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border: 1px dotted;
                    border-color: Black; padding: 4px 4px 4px 4px; width: 250px; background-color: #ffffff;}     
a.hints2            {position:relative; z-index:24; color: blue; text-decoration:underline; cursor: help;}
a.hints2:hover      {z-index:25; background-color:transparent}
a.hints2 span       {display: none;}
a.hints2:hover span { /*the span will display just on :hover state*/ display:block; position:absolute; top:20px; left:40px; 
                    width:300px; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border:1px dotted #000; padding: 10px;
                    color:#000; text-align: center; background-color:#fff; text-decoration:none;}
.hints3Class        {text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border: 1px dotted;
                    border-color: Black; padding: 4px 4px 4px 4px; width: 300px; background-color: #ffffff;} 
a.hints3            {position:relative; z-index:24; color: blue; text-decoration:underline; cursor: help;}
a.hints3:hover      {z-index:25; background-color:transparent}
a.hints3 span       {display: none;}
a.hints3:hover span { /*the span will display just on :hover state*/ display:block; position:absolute; top:-100px; left:75px; 
                    width:330px; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border:1px dotted #000; padding: 10px;
                    color:#000; text-align: center; background-color:#fff; text-decoration:none;}
					
.hints4Class        {text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border: 1px dotted;
                    border-color: Black; padding: 4px 4px 4px 4px; width: 300px; background-color: #ffffff;} 
a.hints4            {position:relative; z-index:100; color: blue; text-decoration:underline; cursor: help;}
a.hints4:hover      {z-index:25; background-color:transparent}
a.hints4 span       {display: none;}
a.hints4:hover span { /*the span will display just on :hover state*/ display:block; position:absolute; top:-210px; left:150px; 
                    width:330px; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border:1px dotted #000; padding: 10px;
                    color:#000; text-align: center; background-color:#fff; text-decoration:none;}
a.hints4:hover span img{border:3px double #000;}

.hints5Class        {text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border: 1px dotted;
                    border-color: Black; padding: 4px 4px 4px 4px; width: 300px; background-color: #ffffff;} 
a.hints5            {position:relative; z-index:100; color: blue; text-decoration:underline; cursor: help;}
a.hints5:hover      {z-index:25; background-color:transparent}
a.hints5 span       {display: none;}
a.hints5:hover span { /*the span will display just on :hover state*/ display:block; position:absolute; top:-260px; left:150px; 
                    width:330px; font-family: Arial, Helvetica, sans-serif; font-size:8pt; border:1px dotted #000; padding: 10px;
                    color:#000; text-align: center; background-color:#fff; text-decoration:none;}
a.hints5:hover span img{border:3px double #000;}