@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

* {
  box-sizing: border-box;
}

/* Style the body */
   body {
   font-family: "Open Sans", sans-serif;
   margin: 0;
   font-size:90%;
   }

/* Header/logo Title */
   .header {
   padding: 5px;
   text-align: center;
   background: #1abc9c;
   color: white;
   }

/* Increase the font size of the heading */
   .header h1 {
   font-size: 150%;
   }

/* Style the top navigation bar */
   .navbar {
   overflow: hidden;
   background-color: #f5f5f5;
   }

/* Style the navigation bar links */
   .navbar a {
   float: left;
   display: block;
   color: #00f;
   text-align: center;
   padding: 10px;
   text-decoration: none;
   }

/* Right-aligned link */
   .navbar a.right {
   float: right;
   border-left:1px solid #a7d7f9;
   }

/* Change color on hover */
   .navbar a:hover {
   background-color: #ddd;
   color: black;
   }

/* Column container */
   .row {  
   display: -ms-flexbox; /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE10 */
   flex-wrap: wrap;
   }

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
   .side {flex: 13%;
   background-color: #f6f6f6;
   padding: 20px;
   }
   .logoattibio{display:block;
   margin:0 auto;
   }
   
/* La scelta del tema */
  .stilel{
  background-color: #fff;
  border: 2px solid #333;
  padding: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  border-radius: 50%;
  }
  .stiled{
  background-color: #333;
  border: 2px solid #333;
  padding: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  border-radius: 50%;
  }
  
  .tema{text-align: center;
  }
  
/*Il menu principale*/
   #main-menu{list-style-type: none;
   }
   #main-menu li {margin-top:2px;
   }

/* Main column */
   .main {flex: 85%;
   background-color: white;
   padding: 20px;
   border-left:1px solid #a7d7f9;
   border-bottom:1px solid #a7d7f9;
   border-top:1px solid #a7d7f9;
   }

/* Il motore di ricerca */
    #form{background : transparent;
    padding : 3px;
    text-align : center;
    margin : 0;
    }

    #form fieldset{border : none;
    }

    #form input{border : 1px solid #000;
    height : 20px;
    }

/* L'indice degli argomenti della pagina */
   #boxmenu{margin:10px;
   text-align : left;
   border: 1px solid #999;
   padding : 2px 10px;
   color : #333;
   background: #f5f5f5;
  }

/*Capitoli*/
   div.titolo{padding : 10px;
   margin : 1px 0;
   text-align : left;
   border : 1px solid #a7d7f9;
   border-radius:10px;
   font-family: sans-serif;
   color:#333;
   font-weight:normal;
   }

   h1{font-weight:normal;
   }

   h1.titolo{font-family: sans-serif;
   color:#333;
   font-weight:normal;
   border-bottom: 1px solid #333;
   }

   div.indice-pagine{font-family:sans-serif;
   text-align:right;
   padding-right:2%;
   }

   h2{padding : 3px;
   margin : 1px 0;
   text-align : left;
   border-bottom : 1px solid #333;
   font-size : 150%;
   font-family: serif;
   color:#333;
   }

   h2.title{margin : 1px 0;
   text-align : center;
   font-family: sans-serif;
   font-weight:normal;
   color:#333;
   border-bottom : none;
   }

   h3{text-align : left;
   padding : 2px;
   margin : 2px;
   border-bottom : 1px solid #333;
   font-size : 140%;
   font-family: serif;
   color:#333;
   }

   h3.newstitle{padding : 2px;
   background-image : linear-gradient(to right, rgba(179, 217, 255), rgba(255,0,0,0));
   border:1px solid #39f;
   border-radius: 7px 7px;
   }

   h4{color:#333;
   border-bottom : 1px solid #666;
   font-family: serif;
   font-size : 130%;
   }

/*Paragrafi delle pagine*/
   p{text-align : justify;
   }

   p:first-letter{margin-left : 1%;
   font-weight : bold;
   font-size:150%;
   }

/*Colonne interne all'articolo*/
   .griglia{width:100%;
   }

   .columnl {
   float: left;
   width: 59%;
   border:1px solid #a7d7f9!important;
   border-radius:10px;
   padding:14px!important;
   margin-right:10px;
    }

   .columnr {
   float: left;
   width: 39%;
   border:1px solid #a7d7f9!important;
   border-radius:10px;
   padding:14px!important;
   background-color: #f5faff;
   }

   .griglia:after {
   content: "";
   display: table;
   clear: both;
   }

/* Griglia dei libri */
   .grigliabook{width:100%;
   text-align: center;
   }

   .bookl {
   float: left;
   width: 49%;
   border:none;
   margin-right:10px;
   text-align: center;
   }

   .bookr {
   float: left;
   width: 49%;
   text-align: center;
   }

   .grigliabook:after {
   content: "";
   display: table;
   clear: both;
   }
   
/*Liste e liste di definizione*/
   ul{text-align:justify;
   }

   dl{margin : 3px;
   padding : 5px;
   background : transparent;
   color : #333;
   text-align:justify;
   }

   dt{color : #333;
   margin-top : 15px;
   font-size : 110%;
   font-weight : bold;
   padding:5px 10px;
   }

   dd{font-size : 100%;
   }

/* Use a media query to add a breakpoint at 900px: */
@media screen and (max-width: 800px) {	
  .logoattibio{display: none;
  }
  .titolo{border:none!important;
  }
  .columnl, .columnr {
  	padding: 5px!important;
   border:none!important;
   background-color: transparent;
   width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  div.navbar {display:none;
  }
  .bookl, .bookr {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  div.sentiero{font-size:100%;
  }
  #main-menu{display:none;
  }
  .chiave{display: none;
  }
  .footer{display: none;
  }
  .social{display: none;
  }
  .consulta{display: none;
  }
  div.indice-pagine{text-align:center;
  }
  div.polaroid {max-width:100%;
  height:auto;
  text-align: center;
  margin:2px;
  padding: 0;
  background-color: white;
  box-shadow: none!important;
  }
  .ritratto{display: none;
  }
  
  ul{width: 100%;}
    
  .bannerbio{width:100%;
  height:auto;
  border:none;
  padding:10px;
  margin:30px auto;
  }
  
  .bannerimg{float:left;
  margin:10px;
  clear: both;
  }
  
  .bannertit{font-weight:bold;
  font-size:120%;
  color:#c00;
  }

   #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: transparent; /* Set a background color */
    color: transparent; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    visibility: hidden;
  }
}

/* #### FORMATTAZIONI VARIE #### */

   blockquote{color:#900;
   font-style: italic;
   text-align: justify;
   }

/*la data di pubblicazione*/
   .data{font-size:80%;
   color:#666;
   font-style:italic;
   font-weight:normal;
   }

   .citazione{margin : 0;
   background: #e6f2ff;
   border : 1px solid #999;
   padding : 10px;
   font-family : sans-serif;
   }

   #link{margin:10px 0;
   padding:1%;
   background: #e6ffff;
   border:1px solid #9cc;
   }

/*Le Immagini nel sito*/
   img{max-width:100%;
   height:auto;
   }

   img.sp{float:right;
   }

   .arrotondate{border: 1px solid #999;
   border-radius: 10px 10px 10px;
   }

   .centrato{text-align : center;
   }
   
   .ritratto{padding:10px;
   border:1px solid #ccc;
   width:10%;
   text-align:center;
   float:right;
   margin:10px;
   }

/* EVIDENZIAZIONI */
   .evidenziatored{color:#f33;
   font-weight:bold;
   font-size:110%;
   }
   .evidenziatogreen{color:#060;
   font-weight:bold;
   font-size:110%;
   }
   .evidenziatoblu{color:#00c;
   font-weight:bold;
   font-size:110%;
   }
   .evidenziatoviolet{color:#909;
   font-weight:bold;
   font-size:110%;
   }
   
   /* Etimologia delle parole */
   .etimo{font-style: italic;
   font-size: 120%;
   color: #009;
   }

/* Fake image, just for this example */
   .fakeimg {
   background-color: #aaa;
   width: 100%;
   padding: 20px;
   }

   hr{color:#cceeff;}

/* Footer */
   .footer {
   padding: 5px;
   text-align: center;
   background: #f1f1f1;
   }

   .strumenti{border:1px solid #999;
   background-color: #f5f5f5;
   margin : 1%;
   padding : 5px;
   color : #333;
   text-align : left;
   }

/*Il box pubblicitario del libro*/
   div.polaroid {max-width:100%;
   height:auto;
   text-align: center;
   margin:5px;
   padding: 0;
   background-color: white;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }

   div.container {padding: 0;
   text-align: center;
   }
   
/* I LINKS */
   a {color: #144fb1;
   text-decoration:none;
   }

   a:link {color: #144fb1;
   text-decoration:none;
   }
   
   a:visited {color: #144fb1;
   text-decoration:none;
   }
   
   a:hover {color: #00f;
   text-decoration:underline;
   }

/* Info su testo */
   a.tip {
    border-bottom: 2px solid #060;
    text-decoration: underline;
    color:#00f;
   }
   a.tip:hover {
    cursor: help;
    position: relative;
   }
   a.tip span {
    display: none
   }
   a.tip:hover span {color:#000;
    border: #060 1px solid;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: #ffc;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
   }

/* TABELLE */
   table{font-size : 95% ;
   width : 100%;
   margin: 1% 0;
   }

   th{font-size : 100%;
   background : #9cf;
   color :#000;
   border : 1px solid #999;
   padding:10px;
   }

   tr{width : 100%;
   }

   td{color : #000;
   border : 1px solid #999;
   vertical-align: top;
   padding:10px;
   text-align:justify;
   }

/* Avviso importante */
   #manifesto{border: 1px solid #c00;
   background: #ffe6;
   padding: 10px;
   margin: 10px 0;
   }
   #manifesto:before{content:'Attenzione!';
   color:#c00;
   margin-right:20px;
   font-weight:bold;
   }

   #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/* ALLARMI */
   .alert {
   padding: 20px;
   background-color: #f44336;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
   margin-bottom: 15px;
   }

   .alert.success {background-color: #4CAF50;}
   .alert.info {background-color: #2196F3;}
   .alert.warning {background-color: #ff9800;
   color:#000;}

/* The close button */
   .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
   }

   .closebtn:hover {
  color: black;
   }
   
   nav{border:1px solid #999;
   background:#f5f5f5;
   padding:5px;
   margin:10px 0;}

/* When moving the mouse over the close button */
   .closebtn:hover {
    color: black;
   }
   
/*NOTA IMPORTANTE*/
   .nota{width:75%;
   border-left:10px solid #900;
   border-top:1px solid #900;
   border-right:1px solid #900;
   border-bottom:1px solid #900;
   padding: 20px;
   background:#fbfbfb;
   color:#333;
   margin:5px auto;
   }
   .nota:before{content:'Nota :';
   color:#900;
   margin-right:20px;
   font-weight:bold;
   font-size:120%;
   font-family:sans-serif;
   }
   
/*ANTEPRIMA*/
   .anteprima{width:75%;
   border-left:10px solid #0c0;
   border-top:1px solid #0c0;
   border-right:1px solid #0c0;
   border-bottom:1px solid #0c0;
   padding: 20px;
   background:#fbfbfb;
   color:#333;
   margin:5px auto;
   }
   .anteprima:before{content:'Anteprima :';
   color:#090;
   margin-right:20px;
   font-weight:bold;
   font-size:120%;
   font-family:sans-serif;
   }

/* SOTTOLINEATURA */
   .underline{
   text-decoration-line: underline;
   text-decoration-color: red;  
   text-decoration-style: wavy; 
   }

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

/*Per terapeuti*/
   .target {width:auto;
   float:right;
   margin:10px;
   padding:10px;
   background:#f99;
   text-align:center;
   font-size:150%;
   color:#900;
   border:3px solid #900;
   border-radius:5px;
   }

/*Banner per Bio-Pedia*/
   .bannerbio{width:99%;
   height:auto;
   border:none;
   padding:10px;
   margin:10px auto;
   }
   
   .bannerimg{float:left;
   margin:10px;
   clear: both;
   }
   
   .bannertit{font-weight:bold;
   font-size:120%;
   color:#c00;
   }
   
   .info{color:#060;
   text-decoration: underline;
   cursor: help;
   border-bottom: 2px solid #060;
   }

   .legenda{padding : 5px;
   background-image : linear-gradient(to right, rgba(179, 217, 255), rgba(255,0,0,0));
   border:1px solid #39f;
   font : 80% sans-serif;
   color : #900;
   }

   .commento{text-align:center;
   color:#000;
   background-color:#ffc;
   margin: 10px 0;
   font-style:italic;
   font-size: 110%;
   }
   
/* ESEMPI ALL'INTERNO DELLA PAGINA */
   .esempio{font-style:italic;
   color:#009;
   text-align:justify;
   background:#ffc;
   padding:5px;
   border-width:1px 1px 1px 20px;
   border-color: #fc0;
   border-style: solid;
   margin-left:5%;
   }

   .chiave{border:1px solid #f60;
   padding: 5px;
   background:#ffffe6;
   text-align:center;
   font-size: 120%;
   margin:5px 0;
   }

/* BOLLETTINO */
   div.bollettino{text-align:center;
   padding:3px;
   font-size:120%;
   font-weight:bold;
   background:#e6ffe6;
   border:1px solid #ccc;
   }

/* BOX AI LATI */
   div .boxlat{width:20%;
   margin: 10px;
   padding:5px;
   background:#f3f3f3;
   border:1px solid #666;
   float:right;
   }
   
   .sentiero{text-align: center;
   font-size: 130%;
   }

/* #### OVERLAY MENU #### */
 /* The Overlay (background) */
  .overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }

/* Position the content inside the overlay */
  .overlay-content {
  position: relative;
  top: 10%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }

/* The navigation links inside the overlay */
  .overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 24px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
  }

/* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
  }

/* Position the close button (top right corner) */
  .overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  }

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
} 

/* Elenco dinamico delle malattie*/

#myInput {
    background-image: url('immagini/search-icon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a.header {
    background-color: #999; /* Add a darker background color for headers */
    cursor: default; /* Change cursor style */
}

#myUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}

 /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    color:#00f;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #900;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* PAGINE A PULSANTI PAGINATION */
.pagination a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: dodgerblue;
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;
}

.box-cite{float:right;
width: 20%;
font-style:italic;
font-family:serif;
color:#900;
margin:20px;
}