/*   
############################### PAGE HTML BODY
*/


body	{	
    font-family: Arial, Helvetica, sans-serif;
    margin-top:3em;
    min-width:580px;
    /*  cursor: default; arrow;  */
    caret-color: transparent; /* tab scroll hide caret */
}


html	{
    overflow-y: scroll; 
}



/*
###############################   generic h tag
*/



h1 {
  font-size: 30px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 20px;
}




/*
###############################   DIV - TABLE
*/

.containerBold {
    width: 99%;
    display: table;
    padding: 0px;
    margin: 1%;
    table-layout:fixed;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFF00AA;
    border: red solid 2px;
    
}


.container {
    width: 99%;
    display: table;
    padding: 0px;
    margin: 1%;
    table-layout:fixed;
    margin-left: auto;
    margin-right: auto;
}


.archive_container {
    width: 60%;
    display: table;
    padding: 0px;
    margin: 0px;
    table-layout:fixed;
    margin-left: auto;
    margin-right: auto;
}




.tr {
    display: table-row;
    padding: 0px;
}

.td40l {
    display: table-cell;
    padding: 10px;
    width: 40%;
    min-width:40%;
   text-align:center;
   box-sizing: border-box;
   color:rgb(255,64,64,1); 

}

.td40r {
    display: table-cell;
    padding: 10px;
    width: 40%;
    min-width:40%;
    text-align:center;
    box-sizing: border-box;
    color:rgb(64,64,255,1); 
}


.td60 {
    display: table-cell;
    padding: 10px;
    width: 60%;
    min-width:60%;
    text-align: left;
    text-indent: 20px; 
    text-align: justify;
    text-justify: inter-word;          
    box-sizing: border-box;
}



.archive_row_eng{  
    width:100%;
    background: rgb(230,245,255,1); 
    padding: 5px;
    background-image: url('img/flag-en.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    border-style: none solid solid solid;
    border-color: rgb(50,50,150);
    border-width: 0px 0px 2px 2px;
}

.archive_row_ita{ 
    width:100%;
    background: rgb(230,255,245,1); 
    padding: 5px;
    background-image: url('img/flag-it.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    border-style: none solid solid solid;
    border-color: #000000 #000000 rgb(50,150,50) rgb(50,150,50);
    border-width: 0px 0px 2px 2px;
}

.archive_row_itaeng{ 
    width:100%;
    background: rgb(230,255,245,1); 
    padding: 5px;
    background-image: url('img/flag-it-en.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    border-style: none solid solid solid;
    border-color: #000000 #000000 rgb(50,150,50) rgb(50,150,50);
    border-width: 0px 0px 2px 2px;
}

.archive_row_eu{ 
    width:100%;
    background: rgb(230,245,255,1); 
    padding: 5px;
    background-image: url('img/flag-eu.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
    border-style: none solid solid solid ;
    border-color: #000000 #000000 #000000 rgb(50,50,150);
    border-width: 0px 0px 2px 2px;
}

/*
#############################  CSV
*/

.csvAuthor {
    vertical-align: top; 
    text-align: center;
    font-size: 1.5em;
    font-weight: normal;
}

.csvTitle {
    vertical-align: top; 
    text-align: center;
    font-size: 3em;
    font-weight: bold;
}

.csvParTitle {
    vertical-align: top; 
    text-align: center;
    font-size: 1.5em;
    font-weight: normal;
}

.csvText {
    vertical-align: top; 
    font-size: 1em;
    color:rgb(96,96,96,1); 
}

.csvTextSmall {
    vertical-align: top; 
    font-size: 10pt;  /* 1em; */
    line-height: 15pt;
    color:rgb(96,96,96,1); 
    /* justify */
    text-align: left;
    text-align: justify; /* justified */
    text-justify: inter-word;
    word-wrap:break-word;
}

.csvAmazon {
    vertical-align: top; 
    text-align: center;
    font-size: 1.5em;
    font-weight: normal;
    color:rgb(255,64,64,1); 
}

.csvArchiveVT { /* red video title */
    vertical-align: top; 
    text-align: left;
    font-size: 1em; /*20px;  =h3 */
    font-weight: 300; /* 300; bold;*/
    color:rgb(255,64,64,1);    /* my red */
}

.csvArchiveVTBold { /* red video title */
    vertical-align: top; 
    text-align: left;
    font-size: 1em; /*20px;  =h3 */
    font-weight: bold; /* 300; bold;*/
    color:rgb(255,64,64,1);    /* my red */
}


.csvArchiveTitle { /* red video title center */
    color:rgb(255,64,64,1);
    font-size:1.6em;
    text-align: center;
}

.csvArchiveTitleLeft { /* red video title center */
    color:rgb(255,64,64,1);
    font-size:1.6em;
    text-align: left;
}

.csvTextGreen {
    vertical-align: top; 
    font-size: 1em;
    color:rgb(0,90,0,1); 
}

.csvTextBlue {
    vertical-align: top; 
    font-size: 1em;
    color:rgb(0,0,150,1); 
    text-align: justify; /* justified */
    text-justify: inter-word;
}

.YTcontainer {
/* https://www.w3schools.com/howto/howto_css_responsive_iframes.asp  */
/*
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
*/

}

.YTresponsive-iframe {
/* https://www.w3schools.com/howto/howto_css_responsive_iframes.asp  */
margin : 20px 20px 50px 20px;
}

/*
###################################   MENU
*/

/* ###  BUTTON  MENU SPAN ### */

.menuspan {
   user-select: none; 
   font-size: 1em; 
   cursor: pointer; 
   background-color: #04AA6D;
   padding: 5px 5px 5px 5px;
}


/* ###  SIDE MENU ### */

.sidenav {
  height: 100%;  
  width: 0px;  
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #00807FFF; /* windows desktop #00807FFF; */
  color: white; 
  display: none; /* 2023_0307 */

  border-right-color : #FF0063;  /* fuchsia #FF00FF;  */;
  border-right-style : solid;
  border-right-width : 10px;

  overflow-x: hidden; 
  transition: 0.3s;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  width:350px;
  margin-left: 0px;
}

.sidenav a {
  text-decoration: none;
  color: white;  
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #49e3e2; /* more saturated and white*/
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 2em;  /*  36px; */
  font-weight:bold;
  color: white;   
}

/* ############  UL  LI   ### */

.myul {
  list-style: none;
  margin-left : 0px;
  padding: 5px 5px;
  font-size: 1em;
}

.myli {
  list-style: none;
  font-size: 1em;   
  padding: 5px 5px;
  cursor: pointer;
  color: white; 
  user-select: none; 
}

li:hover {
  background-color: #009E9E; /* more white */
  color: #49e3e2; /* more saturated and white */
}

myli:hover   myul:hover  ul:hover {
  background-color: #00869e; /* more blue */
  color: red;    
}

/*
##########################################  ICON BAR  MENU  BUTTON
*/


.icon-bar {
  position: fixed;
  top: 1%;
  -webkit-transform: translateY(-1%);
  -ms-transform: translateY(-1%);
  transform: translateY(-1%);
}

/* Style the icon bar links */

.icon-bar a {
  display: block;
  text-align: center;
  padding: 2px;
  transition: all 0.3s ease;
  color: white;
  font-size: 1em;
}

.icon-bar :hover {
   color:rgb(255,64,64,1);

}

.csvhicon {
  background: red;
  color: white;
}

.csviicon {
  background: green;   
  color: white;
}



.image300 {
  display: block;
  max-width:300px;
  max-height:300px;
  width: auto;
  height: auto;
  border:2px solid;
  border-color: #00000000;
}

.imagesmall {
/*  display: block; 2024 12 update */
  display: inline-block;
  max-width:60px;
  max-height:60px;
  width: auto;
  height: auto;
  border:2px solid;
  border-color: #00000000; 
}

.imagesmall:hover{
  border-color:red;
}

.amazontable {
   background-color: #FFFF00AA;
   border: 2px solid red; 
   text-align: left; 
   width: 100%;
}

a.aclassamazon  {
  font-size: 1em;
  color: blue;
  text-decoration: none;
  line-height: 1.5em;
}

a.aclassamazon.hover {
  font-size: 1em;
  color: blue;
  text-decoration: underline;
  line-height: 1.5em;
}

a {
  color: blue;
}
a:hover {
  color: green;
}

.textredbold{
   color:red; 
   font-weight:bold;
}

.textred{
   color:red; 
}

.textredboldcentered{
   color:red; 
   font-weight:bold; 
   text-align:center;
}

.imgcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}