/**************************************************************
   AUTHOR:  Tayeb TTALBI
   DATE:    2008.01.16
 **************************************************************/




/**************************************************************
   #content (taille du site) header
 **************************************************************/
#conteneur {
position:relative;
width:800px;
margin:10px auto 0 auto;
background:  url(../images/bgConteneur.png) no-repeat left 23px;
}

	
	#header {
	background:url(../images/bgMenu.gif) no-repeat top;
	padding:42px 0 0 0;
	height:226px;
	position:relative
	}
	#logo {
	text-align:center;
	}
	
	#menu {
	width:150px;
	margin:15px auto;
	z-index:10;
	position:absolute;
	left:39px;
	}
	#menu ul {
	list-style:none;
	margin:0;
	padding:0;
	}
	#menu li {
	margin:2px 0 0 0;
	padding:0;
	}
	#menu a{
	display:block;
	text-indent:-2000px;
	height:18px;
	width:150px;
	}
	
	#menu a.realisations{
	background:url(../images/buttons/realisations.gif) no-repeat top;
	}
	#menu a.realisations:hover,#menu a.realisationsOn{
	background:url(../images/buttons/realisations.gif) no-repeat bottom;
	}
	
	#menu a.experience{
	background:url(../images/buttons/experience.gif) no-repeat top;
	}
	#menu a.experience:hover, #menu a.experienceOn{
	background:url(../images/buttons/experience.gif) no-repeat bottom;
	}
	
	#menu a.services{
	background:url(../images/buttons/services.gif) no-repeat top;
	}
	#menu a.services:hover, #menu a.servicesOn{
	background:url(../images/buttons/services.gif) no-repeat bottom;
	}
	
	#menu a.asavoir{
	background:url(../images/buttons/asavoir.gif) no-repeat top;
	}
	#menu a.asavoir:hover, #menu a.asavoirOn{
	background:url(../images/buttons/asavoir.gif) no-repeat bottom;
	}
	
	#menu a.contact{
	background:url(../images/buttons/contact.gif) no-repeat top;
	}
	#menu a.contact:hover, #menu a.contactOn{
	background:url(../images/buttons/contact.gif) no-repeat bottom;
	}
	
	#devisGratuit
	{
	margin:10px 0;
	text-align:right;
	padding:1px 
	}
	
	#animationLeft {
	text-align:right;
	margin:30px 0 0px 0;
	z-index:1
	}
/**************************************************************
   #Content 
 **************************************************************/
 #content {
 overflow:auto;
 height:100%;
 position:relative;
 border-bottom:none;
 background:url(../images/bgTampon.gif) no-repeat right bottom;
 height:43px;
 margin:0 6px 4px 6px;
 width:550px;
 }
 
.cadre, .cadreContent {
padding:25px;
border:1px solid #666;
clear:both;
margin:0 6px 4px 6px;
}
.cadreContent {
border-bottom:none;
margin-bottom:0;
min-height:300px
}
.cadreContent h1 {
margin:0 0 5px 0;
border-bottom:1px dotted #666;
padding-bottom:10px;
}
.cadreContent h2 {
margin:0 0 5px 0;
border-bottom:1px dotted #666;
padding-bottom:10px;
}
.contentPince{
padding-right:200px;
}
 
#pince {
 position:absolute;
 background: url(../images/bgBlocPinceBottom.gif) no-repeat left bottom;
 width:215px;
 padding-bottom:5px;
 top:328px;
left:611px;
 }
 #bodyIndex #pince {
 top:346px;
}

#pinceBig {
 position:absolute;
 background: url(../images/bgBlocPinceBigBottom.gif) no-repeat left bottom;
 width:562px;
 padding-bottom:5px;
 top:365px;
 left:263px;

 }
 
#pince h2, #pinceBig h2 {
  background:  url(../images/bgBlocPinceTop.gif) no-repeat top left;
  height:38px;
  padding:6px 0 0 20px;
  font-size:13px;
}
 #pinceBig h2 {
  background:  url(../images/bgBlocPinceBigTop.gif) no-repeat top left;
  padding:6px 0 0 30px;
}

#pinceContent, #pinceBigContent {
background:  url(../images/bgBlocPinceMiddle.gif) repeat-y left;
overflow:auto;
padding:7px 40px 20px 20px;
}

#bodyContact #pince h2 {
padding:6px 0 0 10px;
}
#bodyContact #pinceContent {
padding:7px 30px 20px 10px;
}

#pinceBigContent {
background:  url(../images/bgBlocPinceBigMiddle.gif) repeat-y left;
} 

#pinceContent ul{
list-style:none;
margin:0 0 0 0px;
padding:0
}
#pinceContent li{
background:url(../images/puce.gif) no-repeat left 7px;
padding:0 0 15px 8px;
margin-left:0
} 
#pinceContent a{
color:#333;
}

#bodyIndex #intro {
padding:20px 0 0 0;
overflow:auto;
height:100%;
}
#intro img {
float:left;
border:1px solid #333;
margin:4px 0 0 0;
display:none
}

#intro #introText {
/*float:right;
width:340px;*/
}

/*#intro #introImg {
float:left;
border:1px solid #333;
margin:4px 0 0 0
}*/
/**************************************************************
   #Left (partie gauche du site)
 **************************************************************/
 #left {
 float:left;
 margin:35px 0 0 9px;
 background:#fff;
 overflow:auto;
 width:229px;
 min-height:690px;
 }
 #bgLeft {
 position:absolute;
 width:12px;
 height:691px;
 top:34px;
 left:227px;
 background: url(../images/bgLeft.png) no-repeat top right;
 z-index:8;
 }
 	#news{
	margin:0px 0 0 0
	}
	.newsDate {
	font-weight:bold;
	display:block;
	font-size:9px;
	}
	.newsItem p{
	margin:1px 0 10px 0
	}
	.newsItem{
	margin:0 0 20px 0	
	}
	.newsItem .date{
	color:#F6AE3A;
	font-weight: bold
	}
	
	
/**************************************************************
   Page right
**************************************************************/
 #right {
 float:right;
 width:562px;
 background: #fff url(../images/bgHeader.gif) no-repeat center top;
 padding:80px 0 0 0;
 overflow:auto;
 height:100%;
 /*min-height:645px*/
 }
/**************************************************************
   Expérience
 **************************************************************/ 
/*#bodyExperience #pince{
top:400px;
}*/
/**************************************************************
   Services
 **************************************************************/ 
/*#bodyServices #pince{
top:400px;
}*/

/**************************************************************
   a savoir
 **************************************************************/ 
/*#bodyAsavoir #pince, #bodyAsavoirAstuces #pince{
top:400px;
}*/
/*#bodyAsavoirAstuces #bgLeft {
 height:1091px;
}
#bodyAsavoirAstuces #left {
 height:1050px;

}*/
/**************************************************************
   Realisations
 **************************************************************/
#bodyRealisations #pinceBig {
  top:580px;
left:264px;
}

/*#bodyRealisations #bgLeft {
 height:691px;
}*/
#projectItem {
padding:0px 0 0 0;
overflow:auto;
height:100%;
}
#projectItem #introText {
float:right;
width:270px;
font-size:14px;
}

#projectItem #introImg {
float:left;
border:1px solid #333;
margin:15px 0 0 0
}

#projectPhotos {
list-style:none;
margin:0;
padding:0;
overflow:auto;
height:100%
}
#projectPhotos li {
width:83px;
height:65px;
padding:0;
margin:0 14px 10px 0 ;
float:left;
}
#projectPhotos span {
background:#464646;
padding:3px;
color:#fff;
font-size:9px
}
#projectPhotos img {
border:1px solid #464646;
}
#projectPhotos a {
text-decoration:none
}
#projectButtons{
padding:5px 0 0 0;
clear:both;
overflow:auto
}
/**************************************************************
   membrane asphaltique
 **************************************************************/
 /*#bodyMembraneAsphaltique  #pince{
top:460px;
}*/
 #membraneAsphaltique {
list-style:none;
margin:0;
padding:0;
overflow:auto;
height:100%
}
#membraneAsphaltique li {
width:140px;
height:110px;
padding:0;
margin:0 20px 25px 0 ;
float:left;
height:100%
}
#membraneAsphaltique span {
background:#464646;
padding:3px;
color:#fff;
font-size:9px;
display:block;
width:136px
}
#membraneAsphaltique img {
border:1px solid #464646;
}
#membraneAsphaltique a {
text-decoration:none
}

/**************************************************************
   footer
 **************************************************************/
 #footer {
 clear:both;
 height:100%;
 background:#fff url(../images/bgLeft.png) no-repeat 219px bottom;
 overflow:auto;
 margin:0 0 0 9px;
 z-index:2;
 }
 #links{
 padding:15px 0;
 background: #E6CF7A url(../images/bgFooter.gif) no-repeat  top;
 margin:0;
 clear:both;
 height:100%;
 width:563px;
 float:right;
 }
 #footer .blocFooter {
 float:left;
 margin:0 0 0 20px;
 width:155px;
 }
 #footer a{
 color:#333;
 text-decoration:none;
 font-size:10px
 }
 #footer ul{
 margin:10px ;
 padding:0;
 list-style:none }
 #footer li{
 background:url(../images/puceFooter.gif) no-repeat left 7px;
 padding:0 0px 5px 10px;
 }
 
 #partners {
 float:left;
 padding:25px 0 0 35px;
 z-index:3;
 }

/**************************************************************
   copyright
 **************************************************************/
 #signature {
 width:800px;
 margin:0 auto
 }
 #copyright{
 clear:both;
 text-align:center;
 background: #555 url(../images/bgCopyright.gif) repeat-x top;
 padding:8px 0 8px 0;
 width:562px;
 float:right;
 color:#fff;
 }
 #copyright a{
 color:#fff;
 padding:2px 0  1px;
 text-decoration:none
 }
/**************************************************************
   page contact
**************************************************************/ 
#bodyContact #pince {
top:303px;
left:611px;
}
/*#bodyContact #bgLeft {
 height:880px;
}
#bodyContact #left {
height:880px;
}*/
#contactForm legend, #contactForm label{
display:none;
}
#contactForm input {
float:none;
clear:both;
margin:3px 0
}
#contactForm, #devisForm {
margin:15px 0 0 0;
padding:0;
}
#contactForm .floatLeft{
width:150px;
}
#contactForm .floatRight{
width:340px;
}

/**************************************************************
   Pagination
**************************************************************/ 
.pagination{
clear:both;
padding:5px;
text-align:center
}

.pagination a {
background:#ccc;
color:#333;
padding:5px;

}
.pagination a:hover {
background:#FCD800;
color:#000;
}
.pagination .pageactuelle {
background:#687100;
color:#fff;
padding:5px;
}

/**************************************************************
   verification formulaire
 **************************************************************/
 .error_form {
 margin:0px auto 20px auto ;
 color:#BF1E2E;
 clear:both;
 line-height:normal;
}
 .error_form ul{
 list-style-image:url(../images/puce3.gif);
 color:#666;
 margin:10px 0 0 30px;
 padding:0
 }
 .error_form ul li{
 padding:0;
 margin:0
 }
  a.link{
  padding:15px 0 5px 10px;
  background:url(../images/puce.gif) no-repeat left 23px ;
  display:block
 }
 .labelAuto {
 margin:0;
 padding:2px 0;
 clear:both;
 width:180px;
 }
 .divCheckbox {
 float:left;
 width:180px;
 }
 .divCheckbox input{
 border:none;
 padding:0
 }
/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.width_auto {
width: auto;
float:left;
}

/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.red {
color:#760021;
}
.black {
color:#333;
}
.white {
color:#fff;
}
.gradient {
  margin-bottom: 2em;
  background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; 
}
.pointer {
cursor: pointer;
}

.center
{
margin:0 auto;
text-align:center
}
.fond1 {
background:#E4DFD7;
}
.fond2 {
background:#E6E4E0;
}

.top {
border-top: 1px dotted #C9DC44;
text-align:right;
margin:10px 0;
padding:10px 0;
clear:both;
display:none;
}
.top a {
color:#99CA3C;
}
.ztxt {
  background: #fff;
  border: 1px solid #666;
}
.messageOK {

}
.divButton {
padding:10px 0;
clear:both;
text-align:right;
margin: 0 5px 0 0 
}
.csc-header .csc-header-n1 {
display:none;
}