body {
margin: 0;
padding: 0;
font-family: 'Ubuntu',Verdana,Tahoma,sans-serif;
background-color: #7a6143;
background-image: url('img/bg.png');
color: #555;
font-size: 22px; 
}

#container {
margin: 0;
padding: 0;
position:absolute;
left: 50%;
top: 50%;
width: 780px; height: 700px;
margin-top: -350px;  /* moitié de la hauteur */
margin-left: -390px; /* moitié de la largeur */
border: 1px solid #333;
background-color: #eee;
-moz-box-shadow: 5px 5px 12px #555;
-webkit-box-shadow: 5px 5px 12px #555;
box-shadow: 5px 5px 12px #555;
}

#content {
margin: 20px;
margin-top: 0px;
padding: 20px;
padding-top: 8px;
}

h1 { 
color: #666;
text-align: center;
padding: 10px 15px 10px 15px ; 
margin: 20px;
font-style: normal;
letter-spacing: 2px;
font-size: 1.6em; 
font-weight: normal;
}

h2 {
color: #777;
font-size: 1.4em;
font-weight: normal;
font-style: normal;
letter-spacing: 2px;
padding: 10px 18px ; 
margin: 10px 18px;
text-align: left;
}

p { 
padding: 10px 18px ;
margin: 10px 18px;
text-align: justify;
}

ul {
padding: 0px 18px ; 
margin: 0px 18px;
padding-left: 40px;
}

li { 
padding: 0px; 
margin: 0px; 
}

li a {
vertical-align: top; 
padding: 8px 0px 4px 30px;
margin-left: -30px;
display: inline-block;
width: 100%;
margin-bottom: 3px; 
margin-top: -6px;
}   

a { 
color: #09c; 
font-weight: bold; 
text-decoration:none; 
font-size: 0.9em;
}

a:hover {color:#0BE;}

a small.extension {color: #8BC; color: #999; color: #fff;visibility: hidden;}

a:hover small.extension {color: #8BC;visibility: visible;color:#0BE;}

td  { vertical-align: top; }

img {vertical-align: middle;}

#liens {
display: block;
margin: 0px;
}


#home, #info {
position: absolute; 
margin: 0px; 
padding: 0px; 
top: 0px; 
margin: 20px; 
padding: 0px; 
opacity: 0.4; 
transition-property: opacity, transform; 
transition-timing-function: ease-in;
transition-duration: .5s; 
}
#home img, #info img {height: 80px; width: 80px;}
#home { left: 0px;}
#info { right: 0px;}
#info:hover, #home:hover  { opacity: 0.8; }
#info:hover  { transform: rotate(25deg); }


#debug {
font-family: 'Courier New', Courier, monospace;
font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;
font-size: 1rem;
color: black;
padding: 10px;
background:rgba(255,255,255,0.90);
border-radius: 4px;
width: 340px;
position: absolute;
position: fixed;
top: 10px;
left: 10px;
border: 1px solid #333;
}

form.form1 {
margin: 0;
padding: 0;
position:absolute;
left: 50%;
top: 50%;
width: 780px; height: 100px;
margin-top: 370px;  
margin-left: -390px;
border: 1px solid #333;
background-color: #eee;
-moz-box-shadow: 5px 5px 12px #555;
-webkit-box-shadow: 5px 5px 12px #555;
box-shadow: 5px 5px 12px #555;
}

a.icon {
border: 0px solid lightgray;
margin: 5px;
padding: 0px;
margin: 0px; padding: 0px;
}

a.icon figure { 
display: inline-block;
border: 0px solid lightgray;
margin: 3px; padding: 3px;
text-align: center;
font-size: smaller;
font-size: 14px;
color: #bbb; 
font-weight: bold;
}

a.icon:hover figure {
color: #111; 
transition-duration: 2.2s;
}

a.icon figure img {
border: 1px solid #eee;
margin: 5px 0px ;
padding: 10px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
_opacity: 0.9;
}

a.icon:hover figure img {
border: 1px solid #aaa;
background: #fff;
transition-duration: 1s;
_opacity: 1;
}

.vignette {
float: left;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 10px 0px 10px 45px;
display: inline-block;
}

.vignette a {
float:left;
transition-duration: .3s;
transition-timing-function: ease-in;
transition-property: margin, box-shadow; 
border: 1px solid #333;
}

.vignette a:hover {
-moz-box-shadow: 5px 5px 10px #555;
-webkit-box-shadow: 5px 5px 10px #555;
box-shadow: 5px 5px 12px #555;
margin: -5px 5px 5px -5px;
}

.vignette a div { 	
position: relative;
}

.vignette a div img {
background-color: white;
}

.vignette a div span.titre  { 
position: absolute;
margin: 0px;
padding: 1px;
width: 85%;
font-size: 14px;
/* height: 20px; */
text-align: center;
bottom: 0px;
border-radius: 5px;
right: 50%;
transform: translate(50%,-5px);
border: 1px solid #333;
background: white; color: #555;
}

.vignette a span.description {	
position: absolute;
opacity: 0;
transition-duration: 1.4s;
color: rgba(51,51,51,0.50);
background: rgba(51,51,51,0.50);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
text-align: center;
padding: 4px 20px 2px 20px;
bottom: 10px;
left: 50%;
transform: translate(-50%,0);
}

.vignette a span.description.medium { width: 400px; }

.vignette a span.description.wide   { width: 600px; }

.vignette a:hover span.description { opacity: 1; color: white; }


#erase-clic-zone {
border: 0px dashed rgba(0,0,0,0.5);
position: absolute;
z-index: 1;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}

#contact {
position: absolute;
z-index: 2;
bottom: 0px;
right: 0px;
margin: 0px;
padding: 0px;
height: 40px;
}

#contact a {
display: table-cell;
vertical-align: middle;
padding: 10px 30px;
font-size: 0.8em;
}

#hidden-link {
border: 0px dashed rgba(0,0,0,0.5);
Position : Absolute;
z-index: 2;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}

#hidden-link a img{ 
opacity: 0;
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==) ;
margin: 0px;
padding: 0px;
height: 40px;
width: 80px;
}

#config_warning {
position: absolute;
opacity: .9;
transition-duration: .4s;
color: rgba(100,100,100,1);
color: rgba(80,80,80,1);
background: rgba(255,200,200,1);
border: 1px solid rgba(0,0,0,1);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding: 10px 10px 30px 10px;
bottom: 50%;
right: 50%;
transform: translate(50%,50%);
width: 450px; /* 640px */
font-size: .8em; 
z-index: 2;
}

#config_warning:hover {
opacity: 1;
}

#config_warning h1 { 
font-size: 1.2em; 
color: rgba(80,80,80,1);
font-weight: bold;
margin: 5px;
padding: 5px;
}

.undisplayed { display: none; } 

.draft-line { border: 1px dashed rgba(255,0,0,0.5); }

hr.clear-both { clear: both; visibility: hidden; border-width: 0px; margin: 0px; }

.material-icons-two-tone { vertical-align: middle; }