/*-----------Flavio.FRAU------POUR POESIE italienne 17/04/2022  --styleI.css--  Diario  it fr*/

.box_shadow { 
        position: absolute; width: 98.5%; height: 97%;
        overflow:hidden; border-radius:5px; border:1px solid #5E3807;  /*#6E4817:  VERT #0C0;*/
        background-image: linear-gradient(to bottom,#777, #EEE);
        box-shadow: inset 10px 10px 85px 20px #BBB, 10px 10px 75px 09px #EEE;           
              } 
#book{  position: absolute;
        border-radius: 5px;
        width: 100%; height: 100%;
        overflow: hidden; margin: 0px;
        background-size:cover; 

        }
   
#book .turn-page{
        background-color: #C0C0C0;      
        border-radius: 5px;      
        }

#book .cover{
        position: absolute;
        border:2px solid #6E4817; /*orange;*/
        background: #C0C0C0;
        font-family: Times New Roman,serif;
        border-radius: 5px;
        }

/*      ---------------------------------------------------*/
#book .loader{
        background-image:url(../img/loader.gif);
        width:24px; height:24px;
        display:block; position:absolute;
        top:238px;  left:188px;
}
                        /* numerotation des pages  */
#book .data{

        position:absolute;/* fixed;*/
        bottom:2%;  width:90%;      
        text-align:center;  font-size:11px;  color:black;

        }
        
        .center{
        
        margin-left: 200px;  margin-right: auto;  width: 50%;
        }

#book .odd{  /*page blanche  impair */
        
        background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image:url(../pagesI/imp2.jpg);
        background-size: cover; /*17.04.2022   SUR TOUTE LA PAGE*/

}
#book .even{ /* page blanche paire */
       
        background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image:url(../pagesI/pair1.jpg);
        background-size: cover;
}

/*************************************************************/

.titre1{  position: absolute; border:1px solid black;
          border-radius:5px; width: 30%; margin: 20px 80px 0px;
          }
  /* mots de contact et liens border:1px solid white;*/

  #t1 a{  padding: 8px,4px; color:black;
      font-family: "Times New Roman", Times, serif;
      font-size: 1.2vw; text-decoration:none; }/* 1.3vw  police de caractere generale*/

      p{  width: 85%; margin: 5px,6px; padding-left: 5px; color:black;
          font-family: Verdana, sans-serif;/*cadre interne border:1px solid cyan;*/
          font-size: 1.100vw; text-align: left;} /* 1.100vw   */

    #deb a{width: 50%;  color: red;}
 


  /************************************texte interne*****************************************/
         .pagina p{ font-family:king; font-size: 2.2vw;
                    width: 66%; margin-left: auto; margin-right: auto;
                    text-align:left; 
                   }

        .pagina #num{ display:inline-block; width:8%;
                margin-top:1px; font-size: 2vw;
                text-decoration: underline;
               /* border:1px solid #FFF;     */   
         }

        .pagina #titolo{ display: inline-block; width:99%; font-size: 2.6vw;
                font-weight: bold;  text-decoration: underline;
                margin-left: auto;
                margin-right: auto;
                text-align:center; /*border:1px solid red;  */  
            } 

        .pagina #paru{ font-size: 1.9vw;  font-style: italic; /* border:1px solid darkmagenta;*/  }

        .pagina #expo{ font-size: 10pt;  font-style: italic; text-align: left; text-indent: 160px; 
                /*border:1px solid darkgrey;*/}

      
        #copy{  position: fixed;       /*  Copyright 2021 All Rights Reserved  en couverture */
                bottom: 2%; width: 100%;
                color:#563000;               
               /* text-align: right;*/
                font-size: 9pt;  
                text-shadow: 0px 0px 20px white;               
        }
      
        .pagina #centre{ font-family:king; font-size: 2vw;
                    width: 65%;
                    margin-left: auto;
                    margin-right: auto;
                    text-align:center;
                   /* border:1px solid grey;  border-radius: 5px;   */     
        }
        .pagina #gauche{ font-family:king; font-size: 2vw;
                    width: 65%; text-align:left;
            }
        .pagina #droite{ font-family:king; font-size: 2vw;
                    width: 65%; text-align:right;
            }
            

#book .page{
        /*width:470px;*/ /*height:600px;height: 100%; */
        width: 100%;
        height: 600px;
        background-color: #C0C0C0;/*gris*/
               
        border:1px solid darkgoldenrod;/*#333;*/
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
        box-shadow:0 0 20px rgba(0,0,0,0.2);
}


iframe{
        /*width: 98%; /*height: calc(94vh - 25px); border:1px solid #BE9867;*/
        width: 96%; height:506px; height: 89vh;
        
        /* height:516px;  height: 92vh; ouheight: 470px;*/
        margin-top: 1%;
        border:1px solid darkgoldenrod;  border-radius: 5px;
        box-shadow: inset 10px 10px 85px 20px #BE9867, 10px 10px 75px 09px #FC8; 
        /*      C6A06F        C6A06F    #BE9867 #FC8     ECB986*/
        
}

  /*  titre couverture  Poesias background: #C0C0C0; border:1px solid black; */
        #book .cover p{ 
                font-family:Lucida Calligraphy; font-size: 1.9vw;
                text-shadow: 0px 0px 20px black;                
                color:black;  text-align:center;
                line-height:60px;  margin:auto;                
                }
        
        /*   texte couverture Angelino */
        #book .cover span{
                            display:block;  font-size: 1.2vw;
                            color:white;    background-color: #C0C0C0;
                            text-align:center;    margin-top: -80px;
                        }

        /*  Copyright 2021 All Rights Reserved  en Page couverture  */
        #book .cover a{
                        position: absolute; bottom:7%; width:99%;
                        font-size: .85vw; color:black;
                        text-align:center;
                     }


        #book .cover img{      
                        width: 255px;  height: auto;
                        margin: 40px 30%;
                        filter: sepia(60%);
                        border-radius: 5px;  
                        }
        
   /***************************button de controle en bas de page et retour acceuil********************/



  #controls{ /* en bas du book   avec flèche et compteur de page visible à la souris*/
        
                position: absolute; height: auto; /*15px;*/
                width:99%;  bottom: 0px;
                margin-left: 5px;
                text-align:center;  z-index: 10000;
                background-color: transparent;                        
          }

        #controls:hover {opacity:1} /*visible au passage de la souris*/

        #controls input{
                position: relative;
                background: transparent;/*color: #AAA;/*gris*/
                font-size: 2vh;/*font:11px arial;*/ 
                border-radius: 5px;
                border: 1px solid black;  
        }

        #controls label{
                        position: relative;
                        background: transparent;/*color: #AAA;/*gris*height:12px;*/
                        font-size: 1vw;                
                        border-radius: 5px; border: 1px solid black;   
                       }
/****************************************************************************/
        #ret a{ 
                position:absolute; z-index:1000;background-color: #AAA;
                width:4.4vw; height:1.08vw; left: 35%;
                text-align:center; bottom: 1px;
                font-size: 1.08vw; color:black; text-decoration:none;
                background: url('../Img/icons8-up-2-50.W.png') no-repeat 100% 0;
                background-size: 14px 14px; opacity:1;
                border:1px solid #000;  border-radius: 5px;
              }

        #ret a:hover {  background: url('../Img/icons8-up-2-50.G.png') no-repeat 100% 0;
                        background-size: 13px 13px;                         
                        color:white; opacity: 1;background-color: #A6804F;
                        }
        /********************************************************************/
        span #ind { 
                position:absolute; z-index:1000;background-color: #AAA;
                width:4.4vw; height:1.08vw;left:60%;/*35%;*/
                bottom: 1px; text-align:center;
                font-size: 1.08vw; color:black; text-decoration:none;
                background: url('../Img/icons8-up-2-50.W.png') no-repeat 100% 0;
                background-size: 14px 14px; opacity:1;
                border:1px solid #000;  border-radius: 5px; 
                }

        #ind:hover {  background: url('../Img/icons8-up-2-50.G.png') no-repeat 100% 0;
                      background-size: 13px 13px;                         
                      color:white; opacity: 1; background-color: #A6804F;  
                        }
        /********************************************************************/

        span #der{ 
                position:absolute; z-index:1000;background: transparent;
                width:30px; height:1.05vw;font-weight: bold; bottom: 1px;
                text-align:center; left:56%;/*31%;*/
                font-size: 1.05vw; color:black; text-decoration:none;
                border:1px solid #000; border-radius: 5px;
                }

        #der:hover {  /*background: url('../Img/icons8-up-2-50.G.png') no-repeat 100% 0;*/
                        width:30px; font-weight: bold; 
                        background-size: 13px 13px;                         
                        color:white; opacity: 1; background-color: #A6804F;  
                        }
        /********************************************************************/
        #pre{ 
                position:absolute; z-index:1000;background: transparent;
                /*background-color: #AAA;/*/
                width:30px; height:1.05vw;bottom: 1px;
                left:42%;/*15%;*/
                text-align:center; font-weight: bold;
                font-size: 1.05vw; color:black; text-decoration:none;
                border:1px solid #000;border-radius: 5px;
                }

        #pre:hover { /* background: url('../Img/icons8-up-2-50.G.png') no-repeat 100% 0;*/
                        width:30px; font-weight: bold;
                        background-size: 13px 13px; 
                        background-color: #A6804F;                        
                        color:white; opacity: 1;
                        }
/********************************indice************************************/

        .button-container{
                         color: white;    text-align: left;
                         width: 490px;/*height:200px;/*calc(90vh - 20px);*/
                         margin: 0 auto;  /*margin-left: 5%;*/
                         border:1px solid #A6804F;
                         border-radius: 5px;                        
        }
        .button-container button{ 
                        width: 100%;
                        font-size: 1vw;
                        text-align: left;
                        text-decoration: underline; 
        }
      
        .button-container span{float: right;}
        
        button{ background-color: transparent;
                border: none; text-align: center;
                font-size: 1vw;
        }

        button:hover {
          background-color: #A6804F;/*#008CBA;444 /*bleu*/
          color: white; border-radius: 5px;
        }


/* scroll behavior on html   défilement progressif*/
html {
  scroll-behavior: smooth; 

}

/* scrollbar styling non-standard version */
html::-webkit-scrollbar { width: .7rem;  background-color: rgba(0,0,0,.15);  border-radius: 5px; }


/* la "poignée" de la barre*/
html::-webkit-scrollbar-thumb { background: #A6804F; background-color:#A6804F;  }/*#000;*/ 

 /*les flèches de défilement du haut et du bas*/
html::-webkit-scrollbar-button{background:#86602F;}

/* scrollbar styling standard version FIREFOX*/
html { scrollbar-color: #A6804F rgba(0,0,0,.15);  scrollbar-width: auto;  }/*scrollbar-width: thin; */



/* Buttons */
::-webkit-scrollbar-button:single-button {
   /* background-color: rgb(64, 64, 64); /* bleu gris sombre*/
   /* background-color: rgb(134, 96, 47); /* BRUN gris sombre*/
    background-color: rgb(158, 120, 71); /* BRUN gris sombre*/

    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */


::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
        background-color: lightgray ;/*lightgray;*/
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
    
    background-color: whitesmoke;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
    background-color: white;
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px; background-color: lightgray;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
    background-color: whitesmoke;
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
    background-color: white;
}

/**************************************************************/