/* CSS Document */

body {
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#464646;
	background:#fff ;

}


*  {
	margin: 0 ;
	padding:0;
}



h2, h3 , h4 , h5  {
	
	display:block;
}


h3{
		font-size:14px;
		color:#e2001a;
		text-transform:uppercase;
}
h4{
		font-size:12px;
		font-weight:bold;
		padding-left:7px;
		color:#000;
		padding:3px 10px 5px 10px ;
}

p {
	padding:10px 10px 15px 0px;
	text-align:justify;
	display:block;
}

ul  {
	list-style:none;
	margin:0;
	padding-left:15px;
	
	
}





a {
	text-decoration:none;
	color:#464646;
}


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

.clr{
	clear:both;
}


/****Debut entete **************/
#page{
		background:#fff url(images/bg-index.jpg) repeat-x;
		width:100%;
		float:left;
}

#conteneur{
		width:955px;
		margin:0 auto;

}

#entete{
		background:url(images/entete.gif) no-repeat 0 0;
		float:left;
		width:955px;
		height:321px;
		padding-top:10px;
}

#logo{
		float:left;
		width:280px;
		height:273px;
		
		
}
/*-----------------MENU-------------*/
#menu{
		background:url(images/bg-menu.jpg) no-repeat;
		float: left;
		height: 48px;
		width: 690px;
		padding-left:265px;
	
}

#menu ul{
		list-style:none;
		margin:0;
		padding:0px;
}
#menu li{ 
		float:left;
		display:block;

}


/*--------accueil-----------*/

#accueil a {
		background:url(images/accueil-off.gif) no-repeat;
		width:148px;
		height:48px;
		display:block;
		float:left;

}

#accueil a:hover{
		background:url(images/accueil-on.gif) no-repeat;
		width:148px;
		height:48px;
		float:left;
		display:block;

}

#accueil .active {
		background:url(images/accueil-on.gif) no-repeat;
		width:148px;
		height:48px;
		display:block;
		float:left;
}




/*--------presentation-----------*/
#presentation a {
		background:url(images/presentation-off.gif) no-repeat;
		width:188px;
		height:48px;
		display:block;
		float:left;
}

#presentation a:hover{
		background:url(images/presentation-on.gif) no-repeat;
		width:188px;
		height:48px;
		float:left;
		display:block;

}

#presentation .active {
		background:url(images/presentation-on.gif) no-repeat;
		width:188px;
		height:48px;
		display:block;
		float:left;
}


/*--------savoir-faire-----------*/
#savoir-faire a {
		background:url(images/savoir-faire-off.gif) no-repeat;
		width:180px;
		height:48px;
		display:block;
		float:left;
}

#savoir-faire a:hover{
		background:url(images/savoir-faire-on.gif) no-repeat;
		width:180px;
		height:48px;
		float:left;
		display:block;

}

#savoir-faire .active {
		background:url(images/savoir-faire-on.gif) no-repeat;
		width:180px;
		height:48px;
		display:block;
		float:left;
}

/*--------contact-----------*/

#contact a {
		background:url(images/contact-off.gif) no-repeat;
		width:174px;
		height:48px;
		display:block;
		float:left;
}

#contact a:hover{
		background:url(images/contact-on.gif) no-repeat;
		width:174px;
		height:48px;
		float:left;
		display:block;
}

#contact .active {
		background:url(images/contact-on.gif) no-repeat;
		width:174px;
		height:48px;
		display:block;
		float:left;
}


/*------------------------*/

#txt-head{
		width:348px;
		float:left;
		padding:108px 0 0 54px;
}



.sav{
		float:right;
		margin:110px 46px 0 0;
		width:170px;
		height:40px;
}

.camera{
		float:right;
		margin-right:110px;
		width:153px;
		height:175px;
}

/**------------MILIEU INDEX---------------*/
#milieu{
		background:url(images/bg-milieu.jpg) no-repeat;
		width:935px;
		padding:0px 0px 0px 20px;
		float:left;
	}

#bloc-gauche{
		width:206px;
		float:left;
		padding-top:130px;
}
#bloc-gauche img{
		padding:5px 0 0 38px;
}

#bloc-gauche ul{
		background:url(images/puce.gif) no-repeat 0 5px;
		padding-left:15px;
		color:#000;
}
#bloc-gauche li{
		list-style:none;
}

#bloc-gauche .taille{
		font-size:13px;
		font-weight:bold;
		text-transform:uppercase;
		line-height:25px;
}
/***************************/
#bloc-milieu-txt{
		width:549px;
		float:left;
		padding-top:215px
}


.img02{
		padding:60px 92px 0 0 ;
}
/********************************/
#bloc-droit{
		width:180px;
		float:left;
		padding-top:185px;
}

.img04{
		padding:21px 0 5px 0;
}
.img-24h{
		margin-left:11px;
		width:134px;
		height:132px;
}






/*------------footer-----------*/
#footer{
		float:left;
		width:955px;
		text-align:center;
		font-size:11px;
		color:#122141;
		padding:10px 0 0 0;
}

#footer li{
		display:inline;
		font-weight:bold;
		
}

#footer li a {	
		color:#EA0029;
		font-size:11px;
}

#footer li a:hover{	
		color:#122141 ;
		font-size:11px;
}

#footer p{
		padding:2px 0 0 0;
		text-align:center;
}
#footer p span{
		position: relative;
		top:5px;
}


/******************TOPTECH*********************/

#footer #toptech { 
		color:#8B8B8B;
		padding:5px 0 0 0;
		text-align:center;
}



#footer #toptech a { 
		color:#606060;
		font-size:10px;
}

#footer #toptech a:hover { 
		color:#122141;
}





/*---------------- PAGE PRESENTATION----------------*/
#page-2{
		background:#fff url(images/bg-2.gif) repeat-x;
		width:100%;
		float:left;
}

#entete-2{
		background:url(images/entete-savoir.gif) no-repeat 0 0;
		float:left;
		width:955px;
		height:252px;
		padding-top:10px;
		position:relative;
}
#logo-2{
		position:absolute;
		float:left;
		top:10px;
		left:12px;
}


/*-----------------MENU-2 -------------*/
#menu-2{
		background:url(images/bg-menu-2.jpg) no-repeat;
		float:left;
		height:48px;
		width:690px;
		padding-left:265px;
	
}




#menu-2 ul{
		list-style:none;
		margin:0;
		padding:0px;
}
#menu-2 li{ 
		float:left;
		display:block;

}

/*--------accueil-----------*/

#accueil2 a {
		background:url(images/menu2/accueil2-off.gif) no-repeat;
		width:148px;
		height:48px;
		display:block;
		float:left;

}

#accueil2 a:hover{
		background:url(images/menu2/accueil2-on.gif) no-repeat;
		width:148px;
		height:48px;
		float:left;
		display:block;

}

#accueil2 .active {
		background:url(images/menu2/accueil2-on.gif) no-repeat;
		width:148px;
		height:48px;
		display:block;
		float:left;
}




/*--------presentation-----------*/
#presentation2 a {
		background:url(images/menu2/presentation2-off.gif) no-repeat;
		width:188px;
		height:48px;
		display:block;
		float:left;
}

#presentation2 a:hover{
		background:url(images/menu2/presentation2-on.gif) no-repeat;
		width:188px;
		height:48px;
		float:left;
		display:block;

}

#presentation2 .active {
		background:url(images/menu2/presentation2-on.gif) no-repeat;
		width:188px;
		height:48px;
		display:block;
		float:left;
}


/*--------savoir-faire-----------*/
#savoir-faire2 a {
		background:url(images/menu2/savoir-faire2-off.gif) no-repeat;
		width:180px;
		height:48px;
		display:block;
		float:left;
}

#savoir-faire2 a:hover{
		background:url(images/menu2/savoir-faire2-on.gif) no-repeat;
		width:180px;
		height:48px;
		float:left;
		display:block;

}

#savoir-faire2 .active {
		background:url(images/menu2/savoir-faire2-on.gif) no-repeat;
		width:180px;
		height:48px;
		display:block;
		float:left;
}

/*--------contact-----------*/

#contact2 a {
		background:url(images/menu2/contact2-off.gif) no-repeat;
		width:174px;
		height:48px;
		display:block;
		float:left;
}

#contact2 a:hover{
		background:url(images/menu2/contact2-on.gif) no-repeat;
		width:174px;
		height:48px;
		float:left;
		display:block;
}
#contact2 .active {
		background:url(images/menu2/contact2-on.gif) no-repeat;
		width:174px;
		height:48px;
		display:block;
		float:left;
}




/*------------------------*/

#txt-head2{
		width:360px;
		height:127px;
		float:left;
		padding:73px 0 0 315px;
}



.sav2{
		float:right;
		margin:80px 45px 0 0;
}

.camera2{
		position:absolute;
		top:107px;
		right:108px;
}
/**------------MILIEU presentation---------------*/

#milieu-pres{
		width:895px;
		float:left;
		padding:20px 30px 0 30px;
		
}
#milieu-pres img{
		float:left;
		border:1px solid #FF0000;
		margin-right:10px;
		}

#cont-div-gauche{
		width:420px;
		float:left;
}
#div-gauche{
		width:420px;
		float:left;
		padding:0 0px 10px 0 ;
}

#div-gauche li{
		background:url(images/puce3.gif) 0 4px no-repeat;
		padding-left:15px;
}

#div-gauche .techniciens{
		padding-top:10px;
		font-weight:bold;
}
#div-gauche .visuel2{
float:right;
}




#cont-div-droit{
		width:450px;
		float:left;
}

#div-droit{
		width:450px;
		float:left;
		padding:0 0 0 25px;
}

#div-droit2{
		width:450px;
		float:left;
		padding:0 0 5px 25px;
}

.solution{
		font-size:14px;
		color:#FF0000;
		font-weight:bold;
}


#div-droit li{
		background:url(images/puce3.gif) 0 4px no-repeat;
		padding-left:15px;
}
#bloc-enregistreur-haut{
		background:#F0C27E url(images/enre-haut.jpg) no-repeat 0 0 ;
		width:448px;
		float:left;
		padding-top:20px;
}

#bloc-enregistreur-haut p{
		padding:10px 220px 0 10px;
		line-height:18px;
		color:#000;
		font-weight:bold;
		text-align:left;
}
 
#bloc-enregistreur-haut ul{
	padding:10px 0px 0 7px;
	
}
 
 
#bloc-enregistreur-haut li{
	padding:0 0 10px 10px;
	background:url(images/puce5.gif) 0 4px no-repeat;
	line-height:12px;
	text-align:left;
	color: #000;
		
		
}
#bloc-enregistreur-bas{
		background:url(images/enre-bas.jpg) bottom no-repeat;
		height:6px;
		width:448px;
		float:left;
}

.titre1{
		background:url(images/1-alarme.gif) no-repeat;
		width:378px;
		height:37px;
		padding:5px 0 0 38px;
}
.titre2{
		background:url(images/2-motorisation.gif) no-repeat;
		width:378px;
		height:37px;
		padding:5px 0 0 38px;
}
.titre3{
		background:url(images/3-interphone.gif) no-repeat;
		width:378px;
		height:37px;
		padding:5px 0 0 38px;
}
.titre4{
		background:url(images/4-surveilance.gif) no-repeat;
		width:407px;
		height:37px;
		padding:5px 0 0 42px;
}
.titre5{}


.puce-next{
		background:url(images/arrow3.gif) 0 7px no-repeat;
		padding:5px 0 0 15px;
		clear:both;
		font-weight:bold;
		
}



/*-------------------PAGE SAVOIR-FAIRE-------------------*/


#milieu-savoir{
		width:895px;
		float:left;
		padding:20px 30px 0 30px;
}

.span-rouge{
		font-size:16px;
		color:#FF0000;
		font-weight:bold;
}

#milieu-savoir li{
		background:url(images/puce3.gif) 0 4px no-repeat;
		padding-left:15px;
}
/*------Bloc droit (norm)-----------*/
#bloc-norm{
		width:415px;
		float:left;
		padding-top:20px;
}
#bloc-norm h3{
	background:url(images/puce2.gif) no-repeat 0 2px;
	padding-left:15px;
	float:left;
	width:230px;
	padding-left:15px;
}

.pad{
		float:right;
		padding-right:130px;
}

.left{
		float:right;
}

#bloc-asavoir{
		width:450px;
		float:left;
		padding-right:30px;
}
#bloc-asavoir h4{
		font-size:14px;
		color:#E2001A;
		padding:10px;
}
#bloc-asavoir img{
		padding:1px;
}
.asavoir{
		padding:15px 0 15px 10px;
}

#bloc-images{
		width:875px;
		float:left;
		padding:20px 0 10px 20px;
		text-align:center;
}
#bloc-images img{
		padding:1px;
		border:1px solid  #CC0000;
		margin:0 10px 0 0;
}

/*--------------------PAGE CONTACT----------------------*/
#hauteur{
		width:0;
		height:350px;
		float:left;
}
#milieu-cont{
		background:url(images/milieu-contact.gif) no-repeat;
		padding:30px 20px 0 30px;
		clear:left;
}


#carte{
		float:left;
		width:330px;
		padding-top:12px;
}

#carte h3{
		float:right;
		padding-right:18px;
		font-size:14px;
		color:#e2001a;
}


#adress{
		float:left;
		width:260px;

}
/******* formulaire *****/
#formulaire{
		float:left;
		width:275px;
		color:#000;
		font-size:11px;
		font-weight:bolder;
		padding:60px 0 0 15px;
}

#formulaire form{
		display: inline;
}

#formulaire p{
		margin:0 0 3px 0; 
		width:268px;
		padding:0;
		float:left;
		color:#e2001a;
}
 
#formulaire span{
		float:left;
		clear:left;
		font-weight:bolder;
}
 
 #formulaire .info{
		clear: both;
		text-align:right;
}

 
 
#formulaire em{
		color:#EB7C00;
}

#formulaire .question{
		padding-top:10px;
}
 
#formulaire input{
		float:right;
		border:1px solid #e2001a;
		width:190px;
		height:18px;
		background-color:#fff;
}
 
#formulaire textarea{
		float:right;
		border:1px solid  #e2001a;
		width:190px;
		height:70px;
		background-color:#FFF;
}
#formulaire .bout{
		width: 41px;
		height:16px;
		border:none;
}

#formulaire .rouge{
		color:#FF0000;
		display:block;
		font-weight:bold;
		float:right;
		padding-top:5px;
}

/*----------------------------*/

#bloc-contact{
		width:260px;
		float:left;
		font-size:13px;
		font-weight:bold;
		padding-top:80px;
		color:#3c3c3c;
		font-family:Verdana, Arial, Helvetica, sans-serif;
}


 
#adress {
		background:url(images/mail.gif)  0 0 no-repeat;
		width:200px;
		padding:0px 0 0px 40px;
		float:left;
}

#tele {
		background:url(images/tel.gif)  0 0 no-repeat;
		width:200px;
		padding:0px 0 0px 40px;
		float:left;
}
#email {
		background:url(images/@.gif)  0 0 no-repeat;
		width:200px;
		padding:10px 0 20px 40px;
		float:left;
}


.background{
		display:block;
		border:1px solid #000;
		font-size:14px;
		height:15px;
		color:#FF0000;
		margin-top:10px;
}

.marge{
	padding:5px;
}
/*---------MENTIONS LEGALES------------*/
#milieu-mention{
		width:865px;
		float:left;
		padding:20px 60px 0 30px;
		padding-top:50px;
}

#milieu-mention h3{
		font-size:14px;
		color:#FF0000;
		padding: 0 0 10px 0px;
}