/* --------------------------------------------------------------------------------------------------- */
/*                 pour les livres ==>   St01/testi/ ....                                              */
/* --------------------------------------------------------------------------------------------------- */
.intro {
    text-align: left;
	width: 95%;
}
.intro_img  {
    overflow:auto;
    display: inline-block;
	margin: 2px 10px 2px 22px; 
	font-size: 0.8em;
}
.intro_img  img {
    float:left;
    margin-right:10px;
    width:10%;
}
/* --------------------------------------------------------------------------------------------------- */
/*                 communs aux cours ==>   St01/xxx.php                                         */
/* --------------------------------------------------------------------------------------------------- */
body {
  background-color: #EBE8E4;
  color: #222;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 15px;
}
 .page {height: auto; width: auto; margin:0 auto;
}

.corsi {height: auto; 
		   width: 95%;
		   font-family: Arial; 
		   text-align: left;
  		   margin: 8px 22px 8px 22px;
           padding:0;
		   }

.entete{text-align: center;
}
.gras {font-weight: bold;
}
.titre{background-color: green;   color: #ffff99; text-align: left; border: 1px solid black; padding-left: 10px;
}
.centre  { text-align: center; margin: 0;
            padding:0; }

h1 {  text-align: center; margin: 0;
            padding:0;}
h2 {  text-align: center; margin: 2px;
            padding:2px;}
h3 { padding: 0px 0px 0px 0px; margin: 15px 0px 0px 0px;}
h4 { padding: 0px 0px 0px 0px; margin: 10px 0px 0px 0px;}
table { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
td {  vertical-align: top;}
ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 0px;}
ul li {list-style-type: none;}
ul.tiret li:before { content: "- "; /* on affiche une chaîne de caractère */ }
ul.sans li:before { content: " "; /* on affiche une chaîne de caractère */ }
ol.lower-latin   { list-style-type: lower-latin; } 
table.indx	{ margin : 0 auto;
		  border-collapse: separate;        /*     collapse; */
		  border: 1px solid black;
		  border-spacing: 2px ;             /*    cellspacing */
		  border-radius: 12px ;             /*               */
}
td.indx	{ 	text-align: center;
		border: 1px solid black;
		border-radius: 12px ;             /*               */
		border-spacing: 2px ;             /*    cellspacing */
		width: 124px;
		height: 44px;
		display: table-cell;
  		vertical-align: middle;
}

a.beige span     { display: none;} /* définition de la balise <span> inclue dans <a> */
a.beige:hover span    {display: inline;
                position: relative; top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
                left: 0px; width: auto; height: auto;
                padding-right: 1px; padding-left: 1px; text-indent: 1px;
/*              left: 0px;width: 200px;height: 20px;  */
                background: #ffff99;
/*              background: black;   */
                text-align: left;
                color: #000066;
/*              color: white;   */
}                                   /* fin de la définition de la balise <span> au survol */
p.normal_d_farfalla    { font-size: 0.9em ; text-indent: 2em; margin-top: 0;
                padding: 0px 5px;
                margin-bottom: 0; margin-left: 2; 
                text-align: left;
				letter-spacing: 0px ; 
				}
p.normal_d_center    { font-size: 0.9em ; text-indent: 2em; margin-top: 0;
                padding: 4px 7px;
                margin-bottom: 0; margin-left: 2; 
                text-align: center;
				letter-spacing: 0px ; 
				}

p.normal_d_non_indent    { font-size: 0.9em ; text-indent: 0em; margin-top: 0;
                padding: 4px 7px;
                margin-bottom: 0; margin-left: 2; 
                text-align: left;
				letter-spacing: 0px ; 
				}
p.testi    { font-size: 0.9em ; text-indent: 2em; margin-top: 0;
                padding: 0px;
                margin-bottom: 0; margin-left: 2; 
                text-align: left;
				letter-spacing: 0px ; 
				}
p.normal_d_etroit    { font-size: 0.9em ; text-indent: 0em; margin: 0 160px;
                padding: 4px 7px;
                margin-bottom: 0; margin-left: 2; 
                text-align: left;
				letter-spacing: 0px ; 
				}
p.petit       { font : italic 0.6em Arial;
	        letter-spacing: 0px ; }
p.normal 	{padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;}

p.plus_petit 	{font-size: 0.8em ; text-indent: 0em; 
                padding: 4px 40px;
                margin-top: 0; margin-bottom: 0; margin-left: 2px; }

p.nb 		{padding: 0px 0px 0px 35px;text-indent: -35px;}
b 			{font-weight: bold;}
.normal_g   {font-size: 0.9em ; text-indent: 2em; margin-top: 0;
            margin-bottom: 0; margin-left: 2px; margin-right: 2px;
            text-align: left;
	        letter-spacing: 0px ; }
.titre_g    {font-size: 1.2em ; 
			font-weight:bold;
            text-align: left;
	         }
.normal_d    {font-size: 0.9em ; text-indent: 2em; margin-top: 0;
             padding: 4px 7px;
             margin-bottom: 0; margin-left: 2px; margin-right: 2px;
             text-align: left;
	         letter-spacing: 0px ; }
.normal_d_inter_0    {font-size: 0.9em ; text-indent: 2em; margin-top: 0;
             padding: 0px 0px;
             margin-bottom: 0; margin-left: 2px; margin-right: 2px;
             text-align: left;
	         letter-spacing: 0px ; }
.petit_07    {font : italic 0.7em Arial;
	         letter-spacing: 0px ; }
.italic_08      { font : italic 0.8em Arial;
	        letter-spacing: 0px ; }
.italVert_09      { font : italic 0.9em Arial; padding: 0px 0px 0px 0px; margin: 5px 0px 10px 20px; color: #006600;
	        letter-spacing: 0px ; }
			
.exemple { font : italic 0.8em Arial;
}			
.small_italique {font-family: 'Arial'; font-style: italic;       /*    pour page index  */
              font-size:80%;
}
/*                                               */
ul.sommaire_g {	margin: 0px 0px 0px 10px; 
				padding: 0px ; text-align: left; font-size: 1.2em ; font-style: italic ;  
				}
ul.en_petit            { margin: 0px 0px 0px 10px; padding: 0px ;                          }
ul.en_petit li         { margin: 0px 0px 0px 10px; padding: 0px ; text-align: left}
ul.en_petit li a       { font : italic 0.6em Arial; color: #000099 ; }
ul.en_petit li a:hover { color: #33ccff }


 table {border-collapse: separate; }
 td    {border: 1px solid white; }

 /* - erreur de syntaxe  - mis en commentaire le 07/01/2020     - est-ce utile ?
	*.1   {width: 100px;}
 	*.2   {width: 500px ; text-align: left; color: "#FFFF99";}					*/
 
 .decale {margin: 0px 0px 0px 25px;}

 
/* http://stackoverflow.com/questions/19931351/css-selectors-difference-between-body-h1-body-h1-and-body-h1
    body.h1 will select the body element if it has a class of h1.
        (ex. <body class='h1'>this one</body>)
    body h1 will select all h1 elements in the body.
        (ex. <body><h1>this one</h1></body>)
        this is redundant in well-formed HTML, it will basically do the same thing as h1, because the only place an h1 element can be (if your HTML is well-formed) is in the body)
    body .h1 will select all the elements that have the h1 class in the body.
        (ex. <body><div class='h1'>this one</div></body>)   */
 
nav {
  background-color: green ;              /* #fff */
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  color: #ffff99;							/* #222 */
  display: block;
  margin: 8px 22px 8px 22px;
  overflow: auto; /* overflow: hidden; */
  width: 95%;
}
 
  nav ul {
    margin: 0;
    padding: 0;
  }
 
    nav ul li {
      display: inline-block;
      list-style-type: none;
 
      -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
 
      nav > ul > li > a > .caret,
      nav > ul > li > div ul > li > a > .caret {
        border-top: 4px solid #aaa;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        content: "";
        display: inline-block;
        height: 0;
        width: 0;
        vertical-align: middle;
 
        -webkit-transition: color 0.1s linear;
          -moz-transition: color 0.1s linear;
        -o-transition: color 0.1s linear;
          transition: color 0.1s linear;
      }
 
        nav > ul > li > div ul > li > a > .caret {
            border-bottom: 4px solid transparent;
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-left: 4px solid #f2f2f2;
            margin: 0 0 0 8px;
        }
 
      nav > ul > li > a {
        color: #ffff99;							/*color: #aaa; */
        display: block;
        line-height: 20px;		/* 56px --> 40px --> 30px   */
        padding: 0 12px;        /* 24px   */
        text-decoration: none;
      }
 
        nav > ul > li:hover {
          background-color: rgb( 40, 44, 47 );
        }
 
        nav > ul > li:hover > a {
          color: rgb( 255, 255, 255 );
        }
 
        nav > ul > li:hover > a > .caret {
          border-top-color: rgb( 255, 255, 255 );
        }
 
        nav > ul > li > div ul > li:hover > a > .caret {
            border-left-color: rgb(255,255,255);
        }
 
      nav > ul > li > div,
      nav > ul > li > div ul > li > div {
        background-color: rgb( 40, 44, 47 );
        border-top: 0;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
        display: none;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 200px;                    /* width: 165px;  */
        visibility: hidden;
 
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
      }
 
        nav > ul > li > div ul > li > div {
            background-color: rgb( 40, 44, 47 );
            border-radius: 0 4px 4px 4px;
            box-shadow: inset 2px 0 5px rgba(0,0,0,.15);
            margin-top: -38px;       /*     margin-top: -42px;   */
            right: -200px;			 /*     right: -165px; 		*/
        }
 
        nav > ul > li:hover > div,
        nav > ul > li > div ul > li:hover > div {
          display: block;
          opacity: 1;
          visibility: visible;
        }
 
          nav > ul > li > div ul > li,
          nav > ul > li > div ul > li > div ul > li {
            display: block;
            position: relative;
          }
 
            nav > ul > li > div ul > li > a,
            nav > ul > li > div ul > li > div ul > li > a {
              color: #fff;
              display: block;
              padding: 10px 20px;			/* padding: 12px 24px; */
              text-decoration: none;
            }
 
              nav > ul > li > div ul > li:hover > a {
                background-color: rgba( 255, 255, 255, 0.1);
              }

 /* ===================================================================================================================================== */

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page
.topnav li.active {
  background-color: #4CAF50;
  color: white;
} */

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). 
	Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav div.icon {
    float: right;
    display: block;
    padding: 10px 20px;        /* 24px   */
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
	This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
} 
      nav > ul > div > li > a {
        color: #ffff99;							/*color: #aaa; */
        display: block;
        line-height: 40px;		/* 56px   */
        padding: 0 12px;        /* 24px   */
        text-decoration: none;
      }