* {margin: 0; padding: 0;}

/*div, p {padding: 1em}*/

/* Gestion des curseurs */

abbr, acronym { cursor : help;}
a {cursor : pointer;}

header, footer, aside, nav, article {  
    display: block;  
}

div#haut
	{
	 /*background-image: url("images/dessin.svg");*/
	 /*background-color: #24DAF2;*/
	 color: black;
	 padding-top: 10px;
	 padding-left: 50px;
	 padding-bottom: 10px;
	}

/*div#haut h1
	{
	 color: black;
	 height:40px;
	 padding-top: 10px;
	 padding-left: 0px;
	}*/

div#haut p
	{
	 text-align: center;
	}

/*Menu gauche*/
aside#menu_gauche
	{
	background-color:#52FBFF;
	display: table-cell;  
        width: 100px;  
        padding-left: 22px;
	}
/*Menu de navigation du haut de la page*/
nav#menu_haut ul
   {font: bold 12px verdana, arial, sans-serif;
    list-style-type: none;
    margin: 0;
    height: 30px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #e0e0e0;
}
 
nav#menu_haut li {
    float: left;
    height: 21px;
    padding-right: 2em;
    margin-top: 2px;
    margin-bottom: 0px;
    width: 10em
    }
    
nav#menu_haut a {
   color: green;
   text-decoration: none;
   display: block;
   margin-top: 4px;
   width: 10em
	}

nav#menu_haut a:visited {
	color: #5A6C37;
	}

nav#menu_haut a:hover {
   text-transform: uppercase;
	}

nav#menu_haut li.actif a
  {
   text-decoration: underline
  }

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    color: black;
    z-index: 500;
    text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a.tooltip:hover em {
    color: #BEE673;
    font-size: 120%;
    font-style: normal;
    font-variant: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    border: 1px solid #BEE673;
    background: #945087;
    width:100px;
    text-transform: lowercase;
}
a.tooltip:visited {
    font-style: normal;
    font-variant: normal;
}

a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent;
    margin:0;
    padding: 0;
    border: 0;
}

div#centre
	{
	display: table;
	}

div#centre h2
	{
	 padding-top: 5px;
	 padding-bottom: 5px;
	}

div#centre hr
	{
	 color: black;
	 background-color: white;
	 margin-top: 5px;
	 margin-bottom: 5px;
	}

div#centre li
	{
	 list-style-type: disc;
    	 color: black;
	}

div#contenu_principal
	{
	display: table-cell; 
	 padding-top: 5px;
	 padding-left: 50px;
	 padding-bottom: 5px;
	}
div#contenu_principal header
	{
	background-color:#FFA500;
	}
	
div#contenu_principal p {
	padding-top: 10px;
	padding-bottom: 10px;
}

p#timestamp
	{
	padding-left:20px;
	padding-top: 0px;
	padding-bottom: 0px;
	}

pre#ascii_image
	{ 
 	 font-size: 6pt;
	 font-family: monospace;
 	 color: white;
	 background-color: black;
 	 padding-top: 5px;
	 padding-bottom: 5px;
	 padding-left: 5px;
	 padding-right: 5px;
  	 text-align: center;
	 float:right;
/*box-shadow: 8px 8px 12px #aaa; */
  	}

img#photoSVG
	{
         /*float: left;*/
 /*box-shadow: 8px 8px 12px #aaa;*/
	}

/*Menu de bas de page*/
.menu_bas
   {
    font: bold 10px verdana, arial, sans-serif;
    color: #B1B1B1;
    border: 0px;
    margin: 0;
    width: 100%;
    background-color: #FF0000;
    /*background-image: url("images/landscape2.jpg");*/
	}
	
.menu_bas ul
   {font: bold 10px verdana, arial, sans-serif;
    list-style-type: none;
    margin: 0;
}
 
.menu_bas li {
	width: 170px;
	margin: 2px;
	float: left;
	/*border: 3px solid #fff;*/
	text-align: left;
	padding-left: 8px;
}

.menu_bas li.anime {
	width: 120px;
	height: 25px;
	position: relative;
	overflow: hidden;
	padding-left: 0px;
}

.menu_bas li.anime img
	{
	border: 0;
	width: 120px;
	height: 25px;
	display: block;
   position: relative;
   position: relative;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
	}

.menu_bas li.anime .mask
	{
	width: 120px;
	height: 25px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   background-color: rgba(146,96,91,0.3);
   -webkit-transform: translateX(-120px);
   -moz-transform: translateX(-120px);
   -o-transform: translateX(-120px);
   -ms-transform: translateX(-120px);
   transform: translateX(-120px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   /*filter: alpha(opacity=100);*/
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
	}

.menu_bas li.anime:hover img {
  -webkit-transform: translateX(120px);
   -moz-transform: translateX(120px);
   -o-transform: translateX(120px);
   -ms-transform: translateX(120px);
   transform: translateX(120px);
}
.menu_bas li.anime:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}