body                {text-indent:00px; color:black; font-family: "Comic Sans MS"; font-size:10pt; line-height:150%; margin-top:0px; background-color: #C0C0C0;}
                                                                                                                                 /* background-color: #C0C0C0; #e9fce9; */
a:link                  {color: #0000FF; text-decoration: none;}
a:visited               {color: #0000FF; text-decoration: none;}
a:hover                 {color :#0000FF; text-decoration: underline;}

a:link.discretelink     {color: black;   text-decoration: none; }
a:visited.discretelink  {color: black;   text-decoration: none; }
a:hover.discretelink    {color: blue;    text-decoration: none; }

hr                  {height:0; border:0; border-top:1px solid #7bea7b; }
img                 {line-height: 0;  vertical-align: top;}  /*  to remove extra space below image */

table               {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 td            {border-color: #7bea7b; border-style: solid; margin: 0px; padding: 1px; border-width: 0px; background-color: #FFFFE0; 
                     text-align: left; font-family: Arial; font-size: 12pt; line-height: 140%;}              /*  padding: 0px 10px 0px 10px;  */
table td.right      {text-align: right; font-size: 13pt; color: #895500; padding: 0px 10px 0px 10px;} 
table td.left       {text-align: left;  font-size: 13pt; color: #895500; padding: 0px 10px 0px 10px;}
                                                                 
  table.wb            {border-width: 0px 0px 1px 1px;}                                                        /* table class=wb with border */
  table.wb td         {border-width: 1px 1px 0px 0px; padding: 4px; font-family:Arial; font-size:10pt;}

  /* if border-color is same as background-color the border is unvisible */
  table.mt            {margin-left: auto; margin-right: auto; max-width:1300px;
                       border-color: #FFFFE0; background-color: #FFFFE0; border-width: 0px 0px 0px 0px; border-style: solid; border-spacing: 0px; border-collapse: collapse;} 
  table.mt td         {border-color: #FFFFE0; background-color: #FFFFE0; border-width: 0px 0px 0px 0px; padding: 1px;  font-family: Verdana; font-size:9pt; color: #004d00;  
                                                                                                                       text-align: center; vertical-align: middle;}
  table.mt td.right   {padding: 0px 20px 0px  5px; text-align: right;  width: 310px; } 
  table.mt td.left    {padding: 0px  5px 0px 20px; text-align: left;   width: 310px; }
  table.mt td.img     {                            text-align: center; width: 250px; height: 188px;}   
                  
p                   {text-indent: 00px; text-align: justify; color: black; font-family: Verdana; font-size: 12pt;  padding: 0px 10px 0px 10px;}
p.citato            {text-indent: 00px; text-align: justify; color: black; font-family: Verdana; font-size: 10pt;  margin-top: 0px; font-style: italic;}
p.notiziaPiccola    {text-indent: 00px; text-align: center;  color: black; font-family: Verdana; font-size: 8pt;   margin-top: 0px;}
p.meta              {text-indent: 00px; text-align: center;}
                        
h1                  {text-align: center; color: #895500; font-family: Arial; font-size: 18pt; font-weight: normal;  }
h2                  {text-align: center; color: #895500; font-family: Arial; font-size: 15pt; font-weight: normal;  } 
h3                  {text-align: center; color: #895500; font-family: Arial; font-size: 13pt; font-weight: normal;  } 

.popUp2             {position: absolute; text-align: left; font-size: 12px; font-family: "Comic Sans MS"; color: blue; border: 1px solid blue; padding: 8px;
                     background-color: lightyellow; visibility: hidden;}

.digressione        {text-indent: 50px; text-align: justify; color: black; font-family: Verdana; font-size: 10pt; line-height: 150%; margin-top: 0px;}
.citatos            {text-indent: 00px; color:black;                       font-family: Verdana; font-size: 10pt; font-style:italic;}                       
.centro             {text-indent: 00px; text-align: center;}
.nomargb            {line-height: 120%; margin-bottom: 0px;}

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

.mappa                    {margin-bottom: 14px;}
.mappaHeader              {text-align: center; margin-left: 0px; margin-bottom: 4px; margin-top: 5px; font-family: Verdana; font-size: 8pt; color:blue; line-height: 110%;}
/*.mappaHeader::marker      {content: '';  font-size: 0px;}                       marker:: A CSS pseudo-element is used to style specified parts of an element. for example marker of summary */
.mappaHeader:hover        {cursor: pointer;}

figure.bigImg             {display: table; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 12px; padding: 0px;}
figure.bigImg figcaption  {display: table-caption; caption-side: bottom ; padding: 4px;}
table.bigImg              {border-width: 0px; border-spacing: 0px; border-collapse: collapse;  margin-left: auto; margin-right: auto; max-width: 1013px; background-color: transparent;}
table.bigImg td           {border-width: 0px; text-align: center; margin: 0px; padding: 0px;  font-family: 'Comic Sans MS'; font-size:11pt; background-color: transparent;} 

div.dom         {position: absolute; top: 8px; right: 8px; z-index: 5; width: fit-content; font-family: 'Comic Sans MS'; font-size:10pt;}
#img_dom        {width: 48px; height: 38px;}
#img_dom:hover  {width: 80px; height: 64px;}

a.a_dom_2:hover::after {
             content: url(izvanStaze_dom_2.png); /* content: url , the image will be relative to the CSS file, not the HTML file, no need for qoutes */
             position: absolute;
             bottom: 0px;
             }
div.d_dom_2  {position: relative; margin: auto; width: fit-content;}