@charset "UTF-8";
/* CSS Document */

#body{
font-family:Arial, Helvetica, sans-serif;
}

#container{
font-family:Arial, Helvetica, sans-serif;
width:900px;
margin:auto;
margin-top:15px;
}

#contenu{
width: 900px;
margin-bottom:20px;
}

/******************************************HEADER*******************************************/

#header{
height:70px;
width:900px;
}

a.logo{
background-image:url(../images/logo.jpg);
display:block;
width:270px;
height:70px;
position:absolute;
}

a.logo span{
display:none;
}

/*************************************NAVIGATION*********************************************/

#nav{
float:left;
position:absolute;
margin-left:170px;
margin-top:7px;
}

#nav li{
float:left;
}

#nav li span{
display:none;
}

#nav a{
float:left;
}

#nav li a.offres, #nav li a.offres-2, #nav li a.recru, #nav li a.recru-2, #nav li a.recru-3, #nav li a.ref, #nav li a.ref-2, #nav li a.ref-3, #nav li a.devis, #nav li a.devis-2, #nav li a.devis-3, #nav li a.tester, #nav li a.tester-2, #nav li a.tester-3, #nav li a.contact, #nav li a.contact-2, #nav li a.ref, #nav li a.ref-2, #nav li a.accueil, #nav li a.accueil-2{
height:40px;
background-position:top;
display:block;
} 

#nav li a.accueil-ok{
background-image:url(../images/btn-accueil-ok.png);
height:40px;
width:110px;
display:block;
}

#nav li a.accueil-2{
display:block;
background-image:url(../images/btn-accueil-2.png);
height:40px;
width:110px;
}

#nav li a.accueil{
display:block;
background-image:url(../images/btn-accueil.png);
height:40px;
width:110px;
}

#nav li a.offres{
background-image:url(../images/btn-offres.png);
width:60px;
}

#nav li a.offres-2{
background-image:url(../images/btn-offres-2.png);
width:60px;
}

#nav li a.offres-ok{
background-image:url(../images/btn-offres-ok.png);
width:60px;
height:40px;
display:block;
}

#nav li a.tester{
background-image:url(../images/btn-tester.png);
width:160px;
}

#nav li a.tester-2{
background-image:url(../images/btn-tester-2.png);
width:160px;
}

#nav li a.tester-3{
background-image:url(../images/btn-tester-3.png);
width:160px;
}

#nav li a.tester-ok{
background-image:url(../images/btn-tester-ok.png);
width:160px;
height:40px;
display:block;
}


#nav li a.ref{
background-image:url(../images/btn-references.png);
width:120px;
}

#nav li a.ref-2{
background-image:url(../images/btn-references-2.png);
width:120px;
}

#nav li a.ref-3{
background-image:url(../images/btn-references-3.png);
width:120px;
}


#nav li a.ref-ok{
background-image:url(../images/btn-ref-ok.png);
width:120px;
height:40px;
display:block;
}

#nav li a.devis{
background-image:url(../images/btn-devis.png);
width:70px;
}

#nav li a.devis-2{
background-image:url(../images/btn-devis-2.png);
width:70px;
}

#nav li a.devis-3{
background-image:url(../images/btn-devis-3.png);
width:70px;
}


#nav li a.devis-ok{
background-image:url(../images/btn-devis-ok.png);
width:70px;
height:40px;
display:block;
}

#nav li a.recru{
background-image:url(../images/btn-recrutement.png);
width:120px;
}

#nav li a.recru-2{
background-image:url(../images/btn-recrutement-2.png);
width:120px;
}

#nav li a.recru-3{
background-image:url(../images/btn-recrutement-3.png);
width:120px;
}

#nav li a.recru-ok{
background-image:url(../images/btn-recrutement-ok.png);
width:120px;
height:40px;
display:block;
}


#nav li a.contact{
background-image:url(../images/btn-contact.png);
width:89px;
}

#nav li a.contact-2{
background-image:url(../images/btn-contact-2.png);
width:89px;
}

#nav li a.contact-ok{
background-image:url(../images/btn-contact-ok.png);
width:89px;
height:40px;
display:block;
}

#nav li a:hover{
background-position:bottom;
}


/****************************************SOUS-MENU*****************************************/

#sous-menu{
margin-top:10px;
margin-bottom:30px;
}

#sous-menu, #sous-menu li, #sous-menu a{
float:left;
}

#sous-menu a{
display:block;
height:40px;
}

#sous-menu span{
display:none;
}

#sous-menu a.offres-creation{
width:240px;
height:40px;
background-image:url(../images/btn-creation.png);
}

#sous-menu a.offres-hebergement{
width:230px;
height:40px;
background-image:url(../images/btn-hebergement.png);
}

#sous-menu a.offres-gestion{
width:220px;
height:40px;
background-image:url(../images/btn-gestion.png);
}

#sous-menu a.offres-diffusion{
width:210px;
height:40px;
background-image:url(../images/btn-diffusion.png);
}


#sous-menu li.offres-creation-ok{
width:240px;
height:40px;
background-image:url(../images/btn-creation-ok.png);
}

#sous-menu li.offres-hebergement-ok{
width:230px;
height:40px;
background-image:url(../images/btn-hebergement-ok.png);
}

#sous-menu li.offres-gestion-ok{
width:220px;
height:40px;
background-image:url(../images/btn-gestion-ok.png);
}

#sous-menu li.offres-diffusion-ok{
width:210px;
height:40px;
background-image:url(../images/btn-diffusion-ok.png);
}



/****************************************ACCUEIL-BLOC-GAUCHE********************************/

#tv{
width:660px;
height:300px;
background-image:url(../images/tv.png);
}

#slides{
position:absolute;
}

#slides a{
display:block;
}

.hidden{
display:none;
}

#tv span{
display:none;
}

#bloc-gauche, #bloc-droite{
float:left;
}

#bloc-gauche{
width:660px;
margin-right:26px;
}


#quatres-offres{
margin-top:10px;
}

#creation p, #hebergement p, #gestion p, #diffusion p{
width:280px;
font-size:12px;
color:#333333;
text-align:justify;
}

#creation ul, #hebergement ul, #gestion ul, #diffusion ul{
font-size:12px;
list-style-image:url(../images/fleche.png);

}

#creation li, #hebergement li, #gestion li, #diffusion li{
padding-bottom:1px;
padding-top:1px;
font-size:12px;
}

#gestion{
clear:left;
}

#creation, #hebergement, #gestion, #diffusion{
float:left;
margin-top:10px;
margin-bottom:10px;
}

#creation, #gestion{
margin-right:60px;
}

h2.creation, h2.hebergement, h2.gestion, h2.diffusion{
padding-bottom: 5px;
}

h2 span{
display:none;
}

h2.creation{
background-image:url(../images/creation.png);
width:281px;
height:31px;
}

h2.hebergement{
background-image:url(../images/hebergement.png);
width:276px;
height:30px;
}

h2.gestion{
background-image:url(../images/gestion.png);
width:280px;
height:29px;
}

h2.diffusion{
background-image:url(../images/diffusion.png);
width:276px;
height:27px;
}

a.diffusion, a.gestion, a.hebergement, a.creation{
position:absolute;
background-image:url(../images/en-savoir-plus.png);
width:101px;
height:19px;
margin-left:180px;
margin-top:133px;
display:block;
}

.en-savoir-plus span{
display:none;
}


/****************************************ACCUEIL-BLOC-DROITE**********************************/

#bloc-droite span{
display:none;
}

#actualites{
width:214px;
height: 340px;
background-image:url(../images/box-actualites.png);
}

#liste-actus{
list-style:url(../images/fleche.png);
padding-left:30px;
padding-right:20px;
font-size:13px;
padding-top:50px;
}

#liste-actus strong{
font-weight:bold;
color:#CC0000;
}

#liste-actus p{
padding-bottom:15px;
}

a.toutes-actualites{
	position:absolute;
	margin-top:300px;
	margin-left:60px;
	background-image:url(../images/toutes-actus.png);
	width:124px;
	height:21px;
	display:block;
}

a.solution{
display:block;
width:214px;
height:100px;
background-image:url(../images/tester.png);
}

#mailemotion{
width:214px;
height:90px;
background-image:url(../images/mailemotion.png);
}

a.mailemotion{
display:block;
background-image:url(../images/en-savoir-plus-gris.png);
width:109px;
height:19px;
position:absolute;
margin-left:105px;
margin-top:75px;
}

#retour{
clear:left;
}

#retour span{
display:none;
}

/****************************************FOOTER***********************************/
#footer{
width:900px;
height:17px;
background-image:url(../images/footer.png);
clear:left;
}

#footer p{
font-size:10px;
text-align:center;
padding-top:3px;
}

#footer a{
text-decoration:none;
color:#000000;
padding-right:10px;
padding-left:10px;
}

#footer strong{
color:#FF0000;
padding-left:10px;
}

#footer span{
padding-left:10px;
padding-right:10px;
}

/*****************************CONTACT-FORM*************************************/

#contactez-nous{
background-image:url(../images/contactez-nous.jpg);
height:25px;
width:180px;
margin-top:50px;
margin-left:120px;
}

#contactez-nous span{
display:none;
}

#formulaire{
width:500px;
font-size:12px;
margin-top:30px;
margin-left:10px;
margin-bottom:50px;
border-right: 1px solid black; 
}

td.cell, td.cell2
{
font-weight:bold;
padding: 5px;
}

td.cell{
text-align:right;
vertical-align:middle;
}

#contact-bloc-gauche{
float:left;
}

#contact-bloc-droite{
float:left;
margin-left:30px;
margin-top:40px;
width:300px;
}

#contact-bloc-droite p.telephone{
font-weight:bold;
font-size:14px;
line-height:18px;
}

#contact-bloc-droite p.telephone strong{
font-weight:bold;
font-size:16px;
color:#CC0000;
}

#adresse{
background-image:url(../images/adresse.png);
margin-top:5px;
margin-bottom:5px;
margin-left:10px;
width:259px;
height:126px;
}

a.voir-le-plan{
width: 85px;
height:19px;
display:block;
background-image:url(../images/voir-le-plan.png);
margin-top:10px;
margin-left:175px;

}

#plan a span{
display: none;
}

#plan{
margin-left:10px;
}





/*****************************************CONTENUS******************************/
#actus-contenu, #recru-contenu, #demo-contenu, #devis-contenu, #mailemotion-contenu{
width: 800px;
margin-bottom:20px;
margin:auto;
line-height:16px;
margin-top:30px;

}

#demo-contenu #image{
width:252px;
height:90px;
float:left;
margin-right:40px;
margin-bottom:30px;
background-image:url(../images/img-vide.jpg);
}


#offres-contenu{
width: 800px;
font-size:12px;
margin-bottom:20px;
margin:auto;
line-height:16px;
margin-top:30px;
}


#offres-contenu #image{
width:360px;
height:180px;
float:left;
margin-right:40px;
margin-bottom:30px;
background-image:url(../images/img-vide.png);
}

#offres-contenu #image1{
width:321px;
height:400px;
float:left;
margin-right:40px;
margin-bottom:30px;
background-image:url(../images/create400.png);
}

#offres-contenu #image2{
width:361px;
height:400px;
float:left;
margin-right:40px;
margin-bottom:30px;
background-image:url(../images/bobine400.png);
}

#offres-contenu #image3{
width:370px;
height:110px;
float:right;
margin-right:10px;
margin-top:30px;
margin-bottom:30px;
background-image:url(../images/server400.png);
}

#offres-contenu #image4{
width:371px;
height:400px;
float:right;
margin-right:10px;
margin-bottom:30px;
background-image:url(../images/diffusion400.png);
}



#actus-contenu #image, #devis-contenu #image1, #devis-contenu #image2, #mailemotion-contenu #image{ 
width:360px;
height:180px;
float:left;
margin-right:40px;
margin-bottom:30px;
background-image:url(../images/img-vide.jpg);
}	

#devis-contenu #image1{
background-image:url(../images/devis3.jpg);
}

#devis-contenu #image2{
background-image:url(../images/devis6.jpg);
}

#offres-contenu #image span, #actus-contenu #image span, #recru-contenu #image span, #demo-contenu #image span, #devis-contenu #image1 span, #devis-contenu #image2 span, #mailemotion-contenu #image span{
display:none;
}

#offres-contenu #texte{
width: 375px;
font-size:12px;
margin-bottom:30px;
float:left;
}


#actus-contenu #texte, #demo-contenu #texte, #devis-contenu #texte, #mailemotion-contenu #texte{
width: 720px;
font-size:12px;
margin-bottom:30px;
float:left;
}

#offres-contenu #texte2, #actus-contenu #texte2, #demo-contenu #texte2, #devis-contenu #texte2, #mailemotion-contenu #texte2{
width: 360px;
font-size:12px;
float:left;
clear:left;
margin-right:40px;
}

#offres-contenu strong, #actus-contenu strong, #demo-contenu strong, #devis-contenu strong, #mailemotion-contenu strong{
color:#CC0000;
}

#offres-contenu h3, #demo-contenu h3, #devis-contenu h3, #mailemotion-contenu h3{
font-size:17px;
font-weight:bold;
margin-bottom:10px;
}

#actus-contenu h3{
font-size:17px;
font-weight:bold;
margin-bottom:14px;
text-decoration:underline;
color:#CC0000;
}



#offres-contenu p, #actus-contenu p, #recru-contenu p, #demo-contenu p, #devis-contenu p, #mailemotion-contenu p{
margin-bottom:10px;
}

/****************************RECRUTEMENT***********************/
#recru-contenu #image{
width: 400px;
height:275px;
background-image:url(../images/img-recru.jpg);
float:left;
margin-right:40px;
margin-bottom:30px;
}

#recru-contenu h3{
font-size:25px;
font-weight:bold;
margin-bottom:14px;
color:#CC0000;
padding-bottom:10px;
}

#recru-contenu #texte{
width: 360px;
font-size:12px;
margin-bottom:30px;
float:left;
margin-top:30px;
}

#recru-contenu a{
font-weight:bold;
color:#CC0000;
font-size:12px;
}

#recru-contenu ul{
list-style-image:url(../images/fleche.png);
}

#recru-contenu li{
padding-bottom:2px;
padding-top:2px;
}


/********************************REFERENCES**********************************/


#myImageFlow{
margin-bottom:-60px;
}

#description-projet{
width:630px;
margin:auto;
font-size:12px;
margin-bottom:40px;
line-height:16px;
}

#description-projet strong{
font-weight:bold;
color:#CC0000;
font-size:12px;
}



/******************************RECRU-OFFRES***************************************/


#recru-offre-contenu{
font-size:12px;
width: 800px;
padding-bottom:50px;
margin-bottom:50px;
margin:auto;
line-height:16px;
margin-top:30px;
}

#recru-offre-contenu h3{
font-size:20px;
font-weight:bold;
color:#CC0000;
text-decoration:underline;
padding-bottom:20px;
}

#recru-offre-contenu h4{
font-size:14px;
font-weight:bold;
color:#CC0000;
padding-bottom:20px;
}

#recru-offre-contenu strong{
font-weight:bold;
}






/*************************MENTIONS*****************************************/

#mentions-contenu{
width: 800px;
padding-bottom:50px;
margin-bottom:50px;
margin:auto;
line-height:16px;
margin-top:30px;

}

#mentions-contenu p{
padding-bottom:20px;
font-size:12px;
}
a:link { font-weight:bold ; color: #CC0000 ; text-decoration: none}
a:visited {color: #CC0000 ; text-decoration: none }
a:hover { color: #CC0000 ; text-decoration: none ; }

#mentions-contenu h1{
font-size:9px;
}

/***************************ERREUR*****************************/

#erreur-contenu #image{
width:360px;
height:180px;
float:left;
margin-right:40px;
margin-bottom:30px;
background-image:url(../images/img-vide.jpg);
}

#erreur-contenu #image span{
display:none;
}

#erreur-contenu h3{
font-size:25px;
font-weight:bold;
margin-bottom:14px;
color:#CC0000;
padding-bottom:10px;
}

#erreur-contenu #texte{
width: 360px;
font-size:18px;
margin-bottom:30px;
line-height:20px;
float:left;
margin-top:30px;
}

#erreur-contenu{
width: 800px;
margin-bottom:20px;
margin:auto;
line-height:16px;
margin-top:30px;
}