body.docsta         {background-color: #C0C0C0;}
table.docsta        {border-color: #7bea7b; border-style: solid; border-width: 0px; border-spacing: 0px; padding: 0px; border-collapse: collapse; max-width:900px; margin-left: auto; margin-right: auto;}
table.docsta td     {border-color: #7bea7b; border-style: solid; margin: 0px; padding: 1px; border-width: 0px; background-color: #FFFFE0; font-family: 'Verdana'; font-size:10pt;}
                  
table.imgm          {border-color: #7bea7b; border-style: solid; border-width: 0px; border-spacing: 0px; padding: 0px; border-collapse: collapse; max-width:900px; margin-left: auto; margin-right: auto;}
table.imgm td       {border-color: #7bea7b; border-style: solid; margin: 0px; padding: 0px; border-width: 0px; background-color: #C0C0C0; border-color: #C0C0C0; font-family: 'Verdana'; font-size:10pt;}
img                 {line-height: 0;  vertical-align: top;}  /*  to remove extra space below image */

a.aMarker           {position:absolute; z-index: 10; padding: 0px; margin: 0px; background-color: transparent; visibility: hidden;}                                         /* left: 0px; top: 0px; */
a.aMarker:hover     {opacity:0; filter:alpha(opacity=0);} /* no flickering will appear as with 'visibility: hidden;'  or 'display: none;'  */
a.aMarkerEx         {position:absolute; z-index: 10; padding: 0px; margin: 0px; background-color: transparent; visibility: hidden; display: inline-block;}  /* left: 0px; top: 0px;  line-height: 0;*/
a.aMarkerEx:hover   {opacity:0; filter:alpha(opacity=0);} /* no flickering will appear as with 'visibility: hidden;'  or 'display: none;'  */

div.dFlag2R         {padding: 0px; margin: 0px; border-width: 4px 0px 0px 1px; border-style: solid; border-color: red; width: 4px; height: 16px; }
div.dFlag2L         {padding: 0px; margin: 0px; border-width: 4px 1px 0px 0px; border-style: solid; border-color: red; width: 4px; height: 16px; }
div.dFlagCn         {padding: 0px; margin: 0px; border-width: 2px 2px 2px 2px; border-style: solid; border-color: red; width: 5px; height: 5px; border-radius: 4px;} 
div.dFlagCh         {color: red; font-size: 20px;}   

/* maps support*/
  #selMaps * {background-color:lightyellow;}
  #LayerMap  {position:absolute; top:0; left:0; z-index: 2; visibility: hidden;}
  a.mapLink  {display: none;}
  
  select.selMap *  {background-color:lightyellow;}
  img.LayerMap     {position:absolute; top:0; left:0; z-index: 2; visibility: hidden;}  
/* */  
                    
img.imgLayer        {display: none; width: 0px;  height: 0px; line-height: 0;  vertical-align: top;}   /* to define with '<img src=' upper layer image and avoid links checker orphan */

select:focus        {outline: none;}      /* remove black border from selected option in chrome */ 

/*
	<div class=ldContainer>
	   <a href="images/PB040190.JPG"><img class=ldImg src="images_tn/PB040190.JPG" width=384 height=288 alt='na putu izmešu B i C' title='Mosor izvan Staze' ></a>
	   <div class=ldDescription></div>
	   <a class=ldAnchor title="image long description link" href="images_info/DSC03860.jpg">?</a>         <!--   add, do not change 'class'                -->
	   <button class=showtt title="show/hide image ld tooltip" onclick="ldttVisibility(this)">i</button>   <!--   add, do not change 'class' and 'onclick'  -->
	   <!--  add tooltip div immediately after the button element, blanks (text node) between <button> and <div> is allowed, do not change class            -->
	   <div class=ldtooltip>long description tooltip text</div>
	</div>   
*/

.ldContainer {                           
	position:relative;
	float:left;
}	
	.ldDescription {                     
		font-size: 11px; 
		font-family: Verdana;            
		line-height: 120%;
		background-color: #e3f1f7;           /* lightyellow   */
		color: blue;  
		position:absolute;
		bottom:0;
		left:0;
		text-align:left;
		border: 0px solid blue; padding: 2px;
		visibility: hidden;
		/* display: inline-block; */
    }
	
    .ldDescription:hover {
        opacity:0; filter:alpha(opacity=0); /* no flickering will appear as with 'visibility: hidden;'  or 'display: none;'  */
    }
    
    a.ldAnchor {                         
        position:absolute; top:0; left:0; z-index: 10;
        margin:   1px;
        padding:  2px;
        line-height: 100%;
        font-family:Arial; font-size:10pt;
        font-weight: bold;
        background-color:  WhiteSmoke ;
        text-decoration: none;  
    }
    
    a.ldAnchor:hover {
           opacity:0; filter:alpha(opacity=0); /* no flickering will appear as with 'visibility: hidden;'  or 'display: none;'  */
    } 
       
    .ldtooltip   {
        position: absolute; top: 1px;  right: 30px; z-index: 2; /* border-radius: 10px; */ max-width: 80%;
        text-align: left; font-size: 12px; font-family: "Verdana"; /*color: blue; */ border: 1px solid blue; padding: 8px; background-color: lightyellow; visibility: hidden;}
                 
    button.showtt {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        font-family:Arial; font-size:10pt;
        background-color: WhiteSmoke;    
    }
	
    button.showtt:hover {
        opacity: 0; filter: alpha(opacity=0); /* no flickering will appear as with 'visibility: hidden;'  or 'display: none;'  */ 
    }