html {
height: 100%;
}
body
{
font-family: Arial;
}

a
{
color: #EFEFEF;
text-decoration:none;
}
a:hover {
  color: #a5a5a5;
}

/* FRAME */
.frame{
margin-top:20px;
margin-left:250px;
margin-right:250px;
margin-bottom:40px;
padding:70px; 
background-color:#ededed; 
border:5px solid #2693c3; 
-moz-border-radius:9px; 
-khtml-border-radius:9px; 
-webkit-border-radius:9px; 
border-radius:30px;"
width: 20px; 
height: auto;
}

.conteneur{
text-align: center;
white-space: nowrap
}

/* FOOTER */
#footer {
position: relative;
bottom: 0;
left: 0;
right: 0;
}
#footer ul {
  margin: 0;
  color: white;
  padding: 0;
}
#footer li {
  display: inline;
  font-size: 12px;
  text-transform: uppercase;
}

ul {
  list-style:none;
  font-family:'Trebuchet MS';
  font-size:25px;
  text-align:center;
  margin-top:40px;
}

/* NAV */
li {
  position:relative;
  display:inline;
  margin : 12px;
}

span {
  display:block;
  width:calc(100% - 23px);
  height:4px;
  background:#bc1142;
  position:absolute;
  left:10px;
  bottom:-10px;
}

li a:hover {
 	color:#bc1142;
}

li a:hover ~ span {
 	 animation:ul 0.3s ease-out;
   background:#ffffff;
}

@keyframes ul {
 	0% { 
    width:0;
  }
  100% { 
    width:calc(100% - 23px);
  }
  }
  
 .version{
	height: 60%;
	width:  60%;
}