/*
 /*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 10 version
*/

 html {
     margin: 0;
     padding: 0;
     background-image: url(d15.jpeg);
     background-repeat: repeat;
 }

 a:link {
     color: #551a8b;
 }

 a:visited {
     color: #0000ee;
 }

 a:active {
     color: #ff0000;
 }

 .testo {
     font-weight: normal;
     font-stretch: normal;
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-size: 15px;
     color: black;
     font-style: normal;
     line-height: normal;
     list-style-type: none;
     font-variant: normal;
     font-size-adjust: none;
     list-style-position: inside;
 }

 .testoblu {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 15px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: blue;
 }

 .testoitalico {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: italic;
     font-variant: normal;
     font-weight: normal;
     font-size: 15px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: black;
 }

 .testob {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: bold;
     font-size: 15px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: black;
 }

 .testoinglese {
     font-family: Georgia, Verdana, Arial, "Times New Roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 12px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: #cc66cc;
 }

 .testotedesco {
     font-family: Georgia, Verdana, Arial, "Times New Roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 12px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: #00cc00;
 }

 .testopiccolo {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 11px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: black;
 }

 .testononauto {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 11px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: blue;
 }

 .testoinglesepiccolo {
     font-family: Georgia, Verdana, Arial, "Times New Roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 10px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: #cc66cc;
 }

 .testotedescopiccolo {
     font-family: Georgia, Verdana, Arial, "Times New Roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 10px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: #00cc00;
 }

 .link {
     text-decoration: none;
     font-family: Georgia, Verdana, Arial, "Times New Roman";
     font-style: normal;
     font-variant: normal;
     font-size: 12px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: black;
     font-weight: bold;
 }

 .titolo {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 18px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: red; 
 }

 .titolo1 {
     font-style: normal;
     font-weight: normal;
     line-height: normal;
     font-stretch: normal;
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-variant: normal;
     font-size: 22px;
     font-size-adjust: none;
     color: black;
 }

 .testobianco {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 15px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: white;
 }

 .testobiancopiccolo {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: italic;
     font-variant: normal;
     font-weight: normal;
     font-size: 11px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: white;
 }

 .titolobianco {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-style: normal;
     font-variant: normal;
     font-weight: bold;
     font-size: 19px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: white;
 }

 .nomefalesia {
     font-family: Georgia, Verdana, Arial, "Times New Roman";
     font-style: normal;
     font-variant: normal;
     font-weight: normal;
     font-size: 18px;
     line-height: normal;
     font-size-adjust: none;
     font-stretch: normal;
     color: white;
 }

 .testorosso {
     font-family: calibri, georgia;
     color: red;
     font-size: 16px;
 }

 .paolocss {
     font-family: Calibri;
     font-size: 14px;
     color: #33cc00;
     font-style: italic;
     text-transform: lowercase;
 }

 .titolofalesia {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     color: red;
     font-size: 24px;
     font-weight: bold;
     font-style: normal;
 }

 .testoblu17 {
     font-family: calibri, georgia, verdana, arial, "times new roman";
     font-size: 17px;
     color: blue;
 }

 .testorosso19 {
     color: red;
     font-size: 19px;
 }

 .sfondosettore {
     border: 1px solid gray;
     background: #ccffcc none repeat scroll 0% 50%;
     font-family: calibri, georgia, verdana, arial, "times new roman";
     color: black;
     font-size: 19px;
     font-weight: bold;
     font-style: oblique;
     text-align: center;
 }

 .testo_bullet {
     font-family: Calibri;
     line-height: normal;
     font-weight: normal;
     list-style-type: disc;
     font-size: 15px;
     color: black;
     font-style: normal;
     list-style-position: outside;
 }









 /*  Make-Mobile.de, Developer: STEFANO - 2020 October  */

 /*   INSTRUCTIONS FOR INSTALLATION - -> PLEASE LOOK HERE:  https://www.writeurl.com/text/m7nk9oezo1926tortloe/k2kd0vn17728c8hh0u8f/ */




 /* START OF MEDIA QUERY */
 @media (max-width: 799px) {




     /* Declaration of global CSS-Variables   */
     :root {
         --bg-color: white;
         --text-color: #333;
         --heading-color: #999;
         --font-size-was-10: calc(10px + 2vw);
         --font-size-was-11: calc(11px + 2vw);
         --font-size-was-12: calc(12px + 2vw);
         --font-size-was-15: calc(15px + 2vw);
         --font-size-was-16: calc(16px + 2vw);
         --font-size-was-17: calc(17px + 2vw);
         --font-size-was-18: calc(18px + 2vw);
         --font-size-was-19: calc(19px + 2vw);
         --font-size-was-22: calc(22px + 2vw);
         --font-size-was-24: calc(24px + 2vw);
     }



     /* FONT SIZE SETTINGS (START) */
     .testoinglesepiccolo,
     .testotedescopiccolo {
         font-size: var(--font-size-was-10);
     }

     .testopiccolo,
     .testononauto,
     .testobiancopiccolo {
         font-size: var(--font-size-was-11);
     }

     .testoinglese,
     .testotedesco,
     .link {
         font-size: var(--font-size-was-12);
     }

     .paolocss {
         font-size: var(--font-size-was-14);
     }

     .testo,
     .testoblu,
     .testoitalico,
     .testob,
     .testobianco {
         font-size: var(--font-size-was-15);
         padding: 0 7px;
         display: inline-block;
     }

     .testorosso {
         font-size: var(--font-size-was-16);
     }

     .testoblu17 {
         font-size: var(--font-size-was-17);
     }

     .titolo,
     .nomefalesia {
         font-size: var(--font-size-was-18);
     }

     .titolobianco,
     .testorosso19,
     .sfondosettore {
         font-size: var(--font-size-was-19);
     }

     .titolo1 {
         font-size: var(--font-size-was-22);
     }

     .titolofalesia {
         font-size: var(--font-size-was-24);
     }

     /* FONT SIZE SETTINGS (END) */







     /* START OF TABLE CONVERSION */
     .table {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-flow: column nowrap;
         flex-flow: column nowrap;
         font-size: .8rem;
         margin: 0.5rem;
         line-height: 1.5;
         border-bottom: 1px solid #d0d0d0;
         -webkit-box-flex: 1;
         -ms-flex: 1 1 auto;
         flex: 1 1 auto;
     }

     .th {
         display: none;
         font-weight: 700;
         background-color: #f2f2f2;
     }

     .th>.td {
         white-space: normal;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
     }

     .tr {
         width: 100%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
         -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
         font-size: var(--font-size-was-15);
     }

     .tr:nth-of-type(even) {
         background-color: #f2f2f2;
     }

     .tr:nth-of-type(odd) {
         background-color: #ffffff;
     }

     .td {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
         -ms-flex-flow: row nowrap;
         flex-flow: row nowrap;
         -webkit-box-flex: 1;
         -ms-flex-positive: 1;
         flex-grow: 1;
         -ms-flex-preferred-size: 0;
         flex-basis: 0;
         padding: 0.5em;
         word-break: break-word;
         overflow: hidden;
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
         min-width: 0px;
         white-space: nowrap;
         border-bottom: 1px solid #d0d0d0;
     }

     /* END OF TABLE CONVERSION https://lowrey.me/creating-responsive-tables-with-flexbox/ */






     /* TOPO STYLING (START) */
     .td_numero {
         width: 11vw;
         text-align: center;
     }

     .td_nome {
         width: 38vw;
         overflow-wrap: anywhere;
         word-break: break-word;
         font-size: 1.2rem
     }

     .td_L {  
        overflow-wrap: anywhere;
        word-break: break-word;
        width: 6vw;
        color: green;
    /*    border-bottom: solid 1px green;  */
     }

     .td_grado {
         width: 13vw; 
         color: red; 
     /*    border-bottom: solid 1px red; */
     }

     .td_lunghezza {
         width: 17vw;
     }

     .td_descrizione {
         width: 17vw;
         margin: .2em;
         padding: .2em;
         overflow-wrap: anywhere;
         word-break: break-word;
     }

     /* TOPO STYLING  (END)  */





     /* ( QUICK FIX ONLY )
TABLE ELEMENTS  - very-bad-quickfix ;) */
     table,
     tr,
     td,
     tbody,
     ul {
         width: 95vw !important;
         border-spacing: 0;
         margin: 0;
         padding: 0;
         text-align: center;
     }



     /* ( QUICK FIX ONLY )
For the Navigation pane, which is inside of an Iframe-document called banner.html 
see http://larioclimb.paolo-sonja.net/banner/banner.html  - just another quickfix ;) */
     ul#nav li,
     ul#nav1 li {
         margin: 0.2em 0.3em;
         /*     padding: 5px; */
     }


     /* ( QUICK FIX ONLY )
NAVIGATION IS INSIDE AN IFRAME - THIS IS A WORKAROUND FOR THIS ELEMENT - very-bad-quickfix ;) */
     body>table>tbody>tr>td>iframe {
         width: 100vw !important;
     }






     /* ( QUICK FIX ONLY )
        for IMAGES: all TOPO-Images AND all other images */
     img {
         width: 85vw !important;
         height: auto !important;
         display: block;
         margin: 20px 0;
     }


     /* ( QUICK FIX ONLY )
       break TWO VERY specific TR Elements!   -  ONE TO BREAK THE TOW TOPO IMAGES , AND THE OTHER ONE TO BREAK THE ADVERTISING AT THE RIGHT HAND SIDE  */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr,
     body>center>table>tbody>tr {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
     }


     /* ( QUICK FIX ONLY )
   Set the Max-Size for the PDF-Image */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table>tbody>tr:nth-child(1)>td>center>a:nth-child(4)>img,
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table:nth-child(2)>tbody>tr:nth-child(1)>td>center>font>font>font>a:nth-child(3)>img {
         max-width: 75px;
     }


     /* ( QUICK FIX ONLY )
   Center the PDF-Image in the middle */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table>tbody>tr:nth-child(1)>td>center>a:nth-child(4) {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start;
     }


     /* hide PDF-IMAGE via the src=tabella:  https://www.paolo-sonja.net/larioclimb/falesie_lecco/lariosauro/lariosauro_tabella.jpg 
     img[src*=tabella] {
         display: none;
     } 
	 */

     
     /* ( QUICK FIX ONLY )
Padding for the Main TD Element */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td {
         padding: 5px;
     }


     /* ( QUICK FIX ONLY )
HIDE the Share-Button IMAGE-Element */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table>tbody>tr:nth-child(1)>td>center>a.addthis_button>img {
         display: none;
     }


     /* ( QUICK FIX ONLY )
avoid screen with to become too wide - very-bad-quickfix ;) */
     .tiri {
         width: 90vw;
     }


     /* ( QUICK FIX ONLY )
make sure the font size is okay for Table Headline-elements (the green ones with red font-color) ;) */
     table>tbody>tr>td>b>font>font>font,
     table>tbody>tr>td>b>font>font {
         font-size: var(--font-size-was-15) !important;
     }



     /* ( QUICK FIX ONLY )
Minor HTML-element adjustment  */
     html {
         margin: 0;
         padding: 0;
         /* background-color: var(--bg-color); */
         /* background-image: none; */
     }

     /* ( QUICK FIX ONLY ) Minor BODY-element adjustment  */
     body {
         margin: 0;
     }

     center {
         text-align: center;
     }


	/* NEW RULE to center the tabella */
    center > table > tbody > tr > td > center:nth-child(1) > table > tbody > tr > td > table > tbody > tr:nth-child(1) > td > center {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: wrap;
    }
    /* END OF the NEW RULE to center the tabella */
	

     /* center the topo images and all other link-content */
     a:link {
         justify-content: center;
         align-items: center;
         display: flex;
     }

     /*center the picture of the crag */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(1)>center {
         justify-content: center;
         align-items: center;
         display: flex;
     }

     /* some space above beginning of text */
     body>center>table>tbody>tr>td:nth-child(1)>center:nth-child(1)>table>tbody>tr>td>table>tbody>tr:nth-child(2)>td>table {
         margin-bottom: 3em;
     }





     /* AVOID ADVERTISING  Quickfix:   I would otherwise have to look into why it is not displayed with a correct width-setting   */
     a[href^="https://s1.shinystat.com"],
     a[href*="https://s2.shinystat.com"] {
         display: none;
     }






     /* START NAVIGATION STYLING */

     table[_base_target],
     tbody[_base_target],
     tr[_base_target],
     td[_base_target] {
         width: 100% !important;
     }

     body>table[_base_target]>tbody>tr>td {
         display: -webkit-box !important;
         display: -ms-flexbox !important;
         display: flex !important;
         -webkit-box-pack: center !important;
         -ms-flex-pack: center !important;
         justify-content: center !important;
         width: 100% !important;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start;
     }

     body>table[_base_target]>tbody>tr>td>img {
         width: 95vw !important;
         margin: 10px 0 10px 0;
         height: auto !important;
     }

     /* END NAVIGATION STYLING */


 
 


    /* START TOOLTIP DESIGN  */
    .td_descrizione { 
      position: relative;
      display: inline-block;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-pack:center;
          -ms-flex-pack:center;
              justify-content:center;
      -webkit-box-align:center;
          -ms-flex-align:center;
              align-items:center; 
    } 
    .td_descrizione::after { 
     content: "Note";
     font-size:0.9rem; 
    } 
    .td_descrizione .descrizione  { 
      visibility: hidden;
      width: 90vw; 
      background-color: grey;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
     
      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;  
      top: 110%; /* At the bottom of the tooltip */
      left: -71vw ;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: grey transparent transparent transparent;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .td_descrizione:hover .descrizione  {
      visibility: visible;
    }
     

    /* Show the tooltip text when you mouse over the tooltip container */
    .td_descrizione:hover .descrizione::after  { 
      content: " ";
      position: absolute;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border: 15px solid grey;
      border-color: transparent transparent grey transparent;   
      /* vertically center */
      top:-30%;
      -webkit-transform:translateY(-50%);
          -ms-transform:translateY(-50%);
              transform:translateY(-50%); 
       }
     
     /* Show the tooltip text when you mouse over the tooltip container */
    .td_descrizione:hover    {
       border:1px dashed grey;
    }
     

    .td_descrizione  .descrizione {
      opacity: 0;
      -webkit-transition: opacity 1s;
      -o-transition: opacity 1s;
      transition: opacity 1s;
    }

    .td_descrizione:hover .descrizione {
      opacity: 1;
    } 


    /* END TOOLTIP DESIGN  */














 }

 /* END OF MEDIA QUERY */