body {

padding : 0;
background : #ffffff;
color : #000;
font-family : Geneva, sans-serif;
}
* {
margin : 0;
padding : 0;
}
#containerouter {
border : 1px solid #000;
width:960px;margin : 5px auto;
}
#header {
height : 157px;
background-image : url(../images/fleche2.gif);
background-position : 28.6em 3.4em;
background-repeat : no-repeat;
}
#logo {
width : 100%;
}
#logo img {
float : left;
height : 131px; width:111px;
margin : 0.8em 0 0 1.9em;
}
#logo h1 {
color : #999999;
font-size : 3.5em;
margin : 0 0 0 25%;
padding-top : 0.1em;
font-family : "Century Gothic", Geneva, sans-serif;
}
#logo h2 {
color : #999999;
font-weight : normal;
font-size : 1.9em;
margin : -19px 0 0 16.2em;
padding-top : 0.2em;
font-family : "Century Gothic", Geneva, sans-serif;
}
#logo p {
margin : -12px 0 0 390px;
font-family : "Century Gothic", Geneva, sans-serif;
color : #999999;
font-size : 1.95em;
}

/*/--------------------------------------------------------*/
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}

/* Hides from IE-mac \*/

* html .clearfix {
height : 1%;
}
.clearfix {
display : block;
}
/*end backslash hack*/


#middlecontainer {
margin:0 auto 0 auto;
padding : 0;
}
/*------------------------------------------*/
#center {width : 100%;color : #000000;}

/* mac hide and combat ie's 3 pixel jog \*/
* html #centre{overflow:hidden;float:left;width:100%}

/* end hide*/
#cadre-wrap {width : 945px;height : 220px;position : relative;margin : 0.9em auto 1em 2.3em;
padding : 0;}

.gras {font-weight : bold;font-size : 14px;}


#cadre-1 {
width : 274px;
height : 210px;
float : left;
background :  url(../images/cube-greycadre1.gif) no-repeat 0 0;
margin : 10px 0 0 0;
color : #fff;
background-color : #999;
}
#cadre-1 a {
text-decoration : none;
display : block;
height : 210px;
}
#cadre-1 a:hover {
text-decoration : none;
background : url(../images/cube-redcadre1.gif) no-repeat 0 0;
background-color : red;
}
#cadre-1 p {
	display: block;
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
	margin: 60px 0 0 30px;
	font-family: Geneva, sans-serif;
	font-size: 0.75em;
}
#cadre-1 h1 {
font-family : Geneva, sans-serif;
font-size : 1.8em;
display : block;
width : 150px;
position : absolute;	
top : 0;
left : 0;
margin : 22px 0 0 30px;
}

a#sub {
    display: block;
    width: 38em;
    height: 210px;
    background: url(images/cube-greycadre1.gif) no-repeat;
    color:#000;
    text-decoration:none;
     padding: 25px;float : left;
}
a#sub:hover {
    background: url(images/cube-redcadre1.gif) no-repeat;
    color:#000;
    text-decoration:none;
}


#cadre-2 {
width : 261px;
height : 210px;
float : left;
background : url(../images/cube-grey2.gif) no-repeat 0 0;
margin : 10px 45px 0 45px;
color : #fff;
background-color : #999999;
}
#cadre-2 a {
text-decoration : none;
display : block;

height : 210px;
}
#cadre-2 a:hover {
text-decoration : none;
background : url(../images/cube-red2.gif) no-repeat 0 0;
background-color : red;
}
#cadre-2 p {
display : block;
width : 180px;
position : absolute;
top : 0;
left : 36%;
margin : 60px 0 0 17px;
font-family : Geneva, sans-serif;
font-size : 0.75em;
}
#cadre-2 h1 {
font-family : Geneva, sans-serif;
font-size : 1.8em;
display : block;
width : 150px;
position : absolute;
top : 0;
left : 36%;
margin : 22px 0 0 17px;
}
#cadre-3 {
height : 210px;width:260px;
float : left;
background : #5b5550 url(../images/cube-grey3.gif) no-repeat 0 0;
margin : 10px 0 0 0;
color : #fff;
background-color : #999999;
}
#cadre-3 a {
text-decoration : none;
display : block;

height : 210px;
}
#cadre-3 a:hover {
background : url(../images/cube-red3.gif) no-repeat 0 0;
background-color : red;
text-decoration : none;
}
#cadre-3 p {
display : block;
width : 170px;
position : absolute;
top : 0;
left : 70%;
margin : 60px 0 0 0;
font-family : Geneva, sans-serif;
font-size : 0.75em;
}
#cadre-3 h1 {
display : block;
width : 165px;
position : absolute;
top : 0;
left : 70%;
margin : 22px 0 0 0;
font-family : Geneva, sans-serif;
font-size : 1.8em;
}
/*---------NEWSLETTER---------------------*/
#newsletter {
width : 90%;
color : #666666;
padding : 0; 
background : url(../images/bulle.gif) 43px 0px;
background-repeat : no-repeat;
background-color : #e4e4e4;
margin : 0 auto 0 2.8em;
}
.gras2 {font-weight : bold;}
#newsletter-right {
margin-left : 15em;
height : 100%;
padding : 0;
}
#newsletter-right h2 {
font-size : 1.5em;
font-family : "Century Gothic", Geneva, sans-serif;
margin : 0.7em 0 0.10em 1.8em;
padding : 0;
}
#newsletter-right p {font-size : 0.8em;font-family : Geneva, sans-serif;
margin :0.5em 0 0.5em 3.5em;}
#newsletter-right a {
color : #666666;font-family : Geneva, sans-serif;}
#newsletter-right a:hover {color : red;}

/*-----------------------------------------------------*/
#hautgauche, #hautdroit, #basgauche, #basdroit {
height : 19px;
width : 19px;
background-repeat : no-repeat;
font-size : 1px;
}
#hautgauche {
background : url(../images/hautgauche.gif);
}
#hautdroit {
float : right;
background : url(../images/hautdroit.gif);
}
#hautdroit a:hover {
float : right;
background : url(../images/hautdroit-rouge.gif);
}
#basgauche {
background : url(../images/basgauche.gif);
}
#basdroit {
float : right;
background : url(../images/basdroite.gif);
}


#subject1 {text-decoration:none;}

#subject2{
 text-decoration:none;
}
#subject3{
 text-decoration:none;
}

#client {
	width:180px;
	margin:-0.5em 0 0.5em 0em;
float:right;
	}
#client h5 {margin:1.5em 0 0 0;
	}
#client a {color:black;
	text-decoration:none;
	}
#client img {
width:30px;height:30px;
margin:-1
}