html {font-size: 105%;}
body{	
	width: 85%;  
	margin: 1% auto;
	padding-top : 2em;
}

/* for correct html5 in IE */
header,footer,article,section,hgroup,nav,figure {   
    display:block;     
}


img {	width : 120px ;
	padding : 1em;
}
img .left{	
	float : left;	
}
   
img.right {	
	float : right ;
	margin-right : 10px ;	
}




.wrapper {
	font-family: Helvetica, Arial, Sans-Serif;	
	background: #5A5969 repeat-y; 
}

		
.content {
	margin : 0 0.5% 0 0.5%;
	background: #BDBFB6 repeat-y;  /* gris-clair */
	
		}
.content:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}	
	
	
.extra1 { padding : 0.5%;
	width: 26% ;
	max-width : 26%;
	min-width : 26%;
	float: left; 
	}
	
		
.main {
	margin : 8% 6% ;
	width: 33%;
	
	float: left;
	background: #FBFBE1  repeat-y;
	
	text-align : center ;
	}
		
.extra2 { padding : 0.5%;
	width: 34% ;
	max-width : 26%;
	min-width : 26%;
	float: right; 
	}

	

ul li {
display: inline;
} 

.main p{

font-size:1em;
color : red ;
text-align: center;
padding-left : 1em;

}

ul {
font-family: "Trebutchet MS", Helvetica, Tahoma, sans-serif;
font-size: 1.2em;
color : blue ;
margin : 12px auto;
font-weight: 300 ;
}

li {padding-right : 1em;}
	

	
p.haut , p.bas {
	
	
	text-align: center ;	
	
}

p.haut {
	font-size : 140% ;
	padding-top : 10px;
	color : yellow ;
}

p.bas {
	font-size : 125% ;
	color : white ;
}	
footer table {
width: 100%;
color : white ;
font-size : 75%
}

tr {
    height: 50px;
}
tr .right {
text-align : right ;
padding-right : 20px;
}

tr .left {
text-align : left ;
padding-left : 20px;

}
	
	
	
	
aside{ 
  
    display : block ;    
    margin : 20% 3% 2em;  /* 15 % top  3* left, right  2em botttom  */
    padding : 3%;
    border-radius: 10px;  /* bords arrondis */
    -webkit-border-radius: 10px;
    border : 0.3em solid  #B4780A ;
    background-color : #FCEAC1;
    text-align : center ;
    font-size: 0.9em ;     
    line-height:120%;	
    float : left;	
	}