body {
    background-color: #F0F0E0; margin: 0; padding: 0; background-image:url('logo_UCBL_transparent.gif'); background-size: 150px; background-repeat: no-repeat; background-position: left top;
}

/* Sélecteur universel */
* {
    color: #000000; text-align:justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; border: 0; outline: 0;
}

#menu div {
    text-align: left;
}

/* Style du div principal. Peut être utilisé sans div menu.
Remarque : l'image de fond du body est placée dans ce style,
car si on omet la div principale, il ne faut pas voir l'image (elle serait dans le texte). */
#principale {
    padding: 15px 10px 10px 10px; background-color: #FFF; border: 1px solid #ACAC8C; border-radius: 10px; height: auto; overflow-x: auto; width: auto; z-index: 2;
}

/* Style du logo de l'image de licence CC. */
#license	{
    text-align: center; position: relative; bottom: 0px; border-top: 1px dotted #3C5C6B; margin-top: 20px; padding-top: 20px; z-index: 0;
}

/* Style des logos de validation des différentes pages. */
#validation	{
    text-align: center; position: relative; bottom: 0px; border-top: 1px dotted #3C5C6B; margin-top: 20px; padding-top: 20px; padding-bottom: 40px; background: url(//jigsaw.w3.org/css-validator/images/vcss-blue) no-repeat center bottom; z-index: 0;
}

@keyframes mydisplay {
    100% { display: block; }
}

/* Un peu de responsive design... */
@media screen and (min-width: 768px) {
    /* style du div menu, qui reste fixe quand on scrolle la page.
    Remarque : le rajout de la couleur de fond est nécessaire pour ne pas que les textes de chevauchent quand on utilise l'ascenseur horizontal. */
    #menu {
	    position: fixed; top: 0; width:130px; margin-left: 3px; margin-top: 80px; padding: 5px 5px 20px 5px; background-color: #FFF; border: 1px solid #ACAC8C; border-radius: 10px; opacity: 0.75; z-index: 1;
		animation-name: mydisplay; animation-timing-function: ease-out; animation-duration: 1s;
    }

    #aside {
   	float: right; max-width:600px; width:30%; margin-left: 3px; margin-right: 3px; margin-top: 50px; z-index: 0;
	}

    #principale { transition: margin 1s; margin: 5px 3px 5px 150px; z-index: 2; }
}

@media screen and (max-width: 768px) {
    /* On cache le menu et les logos de validation pour l'impression. */
    #menu {
        transition: display 1s; display: none; opacity: 0;
	}

    /* On supprime la marge et la bordure autour de la div principale. */
    #principale {
	     transition: margin 1s; margin: 0px;
	}
}

h1			{ font-size: 25px; font-weight: bolder; color : #175A7C; margin-top:15px; margin-left: 10px;}
h2			{ font-size: 14pt; font-weight: bolder; color : #B03010; margin:10px;}
h3			{ font-size: 12pt; font-weight: bolder; color : #175A7C; margin:10px;}
h4			{ font-size: 10pt; font-weight: bold; color : #B00000;}

/* Numérotation des titres correspondant à des questions */
h2.questionStart	{ counter-reset: h2Counter; }
h2.question { counter-increment: h2Counter; counter-reset: h3Counter; }
h2.question:before { content: counter(h2Counter) ". "; }

h2.question ~ h3 { counter-increment: h3Counter; counter-reset: h4Counter; }
h2.question ~ h3::before { content: counter(h2Counter) "." counter(h3Counter) ". " ; }

h2.question ~ h4 { counter-increment: h4Counter; }
h2.question ~ h4::before { content: counter(h2Counter) "." counter(h3Counter) "." counter(h4Counter) ". " ; }

.nocount:before { content: none; }

hr 			{ clear: both; height: 1px; margin-bottom: 20px; padding: 0; color: #DEE7EC; border-top: 1px dotted #3C5C6B;}
li			{ margin-bottom:5px;}

a:link		{ font-size: 14px; color: #333399; text-decoration: none; font-weight: bold;}
a:visited	{ font-size: 14px; color: #333399; text-decoration: none; font-weight: bold;}
a:hover		{ font-size: 14px; color: #333399; text-decoration: underline; font-weight: bold;}
a:active	{ font-size: 14px; color: #333399; text-decoration: none; font-weight: bold;}

/* Mise en forme des liens du menu :
Il manque cruellement un sélecteur CSS qui permette de filtrer les éléments enfants '<' comme on peut spécifier le parent avec '>'
(http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors)
Du coup, j'ai mis les styles de liens des menus sur les div au lieu de le mettre sur les ancres des liens... */

div.lienh2	{ text-align: left; margin-top: 5px;}
div.lienh2 a:link		{ font-size: 12px;}
div.lienh2 a:hover	{ background-color: #E2E5E9; font-size: 13px;}

div.lienh3	{ text-align: left; margin-left: 10px;}
div.lienh3 a:link		{ font-size: 11px;}
div.lienh3 a:hover	{ background-color: #E2E5E9; font-size: 12px;}

/* Duplication pour les anciennes pages qui ont l'attribut class sur le lien */
a.lienh2 		{ font-size: 12px;}
a.lienh2:hover	{ background-color: #E2E5E9; font-size: 13px;}

a.lienh3 		{ font-size: 11px;}
a.lienh3:hover	{ background-color: #E2E5E9; font-size: 12px;}

.bouton		{ font-size: 12px; color:#FFFFFF; background-color:#330066; font-weight:bold;}
.bleu		{ background-color: #F2F5F9; padding:10px; text-align:justify;}
.gros		{ font-size: 12px; font-weight:bold;}
.code, code		{ font-family: Courier, Helvetica, sans-serif; font-size: 1.1em; white-space:pre; background-color: #EEEEEE;}
.aide       { background-color: lemonchiffon; padding:10px; text-align:justify; border: 1px solid #ACAC8C; border-radius: 5px;}
.aide:before    { content: '\1F4A1   ' ; }

/* ATTENTION : ça ne devrait être le cas que pour les <pre> qui contiennent un <code>, mais pas trouvé le moyen en CSS pur */
pre     { padding: 5px; background-color: #EEEEEE; }

blockquote  { border-left: 5px solid #DDDDDD; padding-left: 10px;}

input[type=text]    { border: 1px solid #ACAC8C; }

/* Centrer les images : https://www.w3schools.com/howto/howto_css_image_center.asp */
.center { display: block; margin-left: auto; margin-right: auto; width: 50%; }

/**
 * Tooltip Styles (https://chrisbracco.com/a-simple-css-tooltip/)
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}