body { 
font-family: verdana, arial, sans-serif;
font-size: 10px;
background-color: #555555;
background-image: url(images/HO2.jpg);
background-repeat: no-repeat;
background-position: center;
}

#wrapper {
width: 800px;
position: absolute;
left:50%; 
top:50%;
margin-left:-400px;
margin-right: -300px;
margin-top: -300px;
border:1px;
background-color: #fff;
border-radius: 10px;
box-shadow:5px 5px 10px rgba(50,50,50,0.5);
}

header{
height: 200px;
}

#logo{
height:140px;
background-image: url(images/Logo-ho2web.png);
background-repeat: no-repeat;
background-position: center;
margin-bottom: 25px;
margin-top: 50px;
}

#Titre{
font-size: 24px;
text-align: center;
color: #555555;

}




}

#menu-horizontal{
width: 800px;
}

#menu-horizontal ul li{
padding-bottom: 130px;
display: inline-block; /*les ligne s'affiche les une a coté des autres*/
margin-left:70px; /* 0px au dessous  -  15px droite gauche*/
margin-top: 60px;
}

#menu-horizontal ul li a{
display:block;
width:102px;
height:10px;
padding-top: 150px;
text-decoration: none;
color: #555555;
}
#menu-horizontal ul li a:hover{
color:#00a448;
}

#menu-horizontal ul li{
text-align: center;
background-repeat: no-repeat;
cursor:pointer;
}

#conception{
background-image: url(images/conception-n&b.png);
height:137px;
width:102px ;
}

#conception:hover{
background-image: url(images/conception.png);
}

#voirie{
background-image: url(images/voiries-n&b.png);
height:137px;
width:102px;
}

#voirie:hover{
background-image: url(images/voiries.png);
}

#reseaux{
background-image: url(images/réseaux-n&b.png);
height:137px;
width:102px;
}

#reseaux:hover{
background-image: url(images/réseaux.png);
}

#divers{
background-image: url(images/divers-n&b.png);
height:137px;
width:102px;
}

#divers:hover{
background-image: url(images/divers.png);
}

#footer{
width: 800px;
left: 50%;
top: 50%;
margin-left: -400px;
margin-right: -300px;
margin-top: 270px;
color: #555555;
text-align: center;
line-height: 16px;
padding-bottom: 50px;
margin: 0 auto;
}