/*
CSS Styles for the Proviteq website.
Developed by Olivier Ffrench (http://www.offrench.net) for Graphoblique design (http://www.graphoblique.fr)
*/


/* ============== General elements ============== */

body {
	font-family:Calibri, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0.0em;  
	background: #300201 url(../images/fond_page.png) top repeat-x;  
  }

a  {
	color:#861709;
	}

a:hover, a:visited, a:active {

	}

.left {
 float:left;
 margin:0px 10px 10px 0px
}

.right {
 float:right;
 margin:0px 0px 10px 10px
}

.clear {
	clear: both;
	height:0px;
	font-size:0px;
}	

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

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


/* -------------- text attributes -------------- */

code {

	}

acronym, abbr {

	}

cite {

}

blockquote {

}

.uppercase {
	text-transform: uppercase;
}

.caps {
	text-transform: capitalize;
}

small {
	}
	
.big {
	font-family: Din, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#88211f;
	font-weight:bold;
}

.red {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#88211f;
	font-weight:bold;
}

.medium {
	color:#7f7f7f;
}	

/* -------------- H titles -------------- */

h1  {
	font-family: Din, Helvetica, Arial, sans-serif;
	font-size:20px;
	color:#88211f;
	text-transform:uppercase;
	margin:13px 0;
	}
	
#center h1 {
	padding-left:35px;
	background: url(../images/fleche_verte_big.png) no-repeat left;	
}	

h2, h2 a {
	font-family: Helvetica, Arial, sans-serif;
	font-size:14px; 
	color:#88211f;
	text-transform:uppercase;	
 	}

h3 {
 
 	}	

h4 {

}
	
hr {
	border: none 0;	
	height:1px;
	border-bottom:1px solid black;
	}

/* -------------- images -------------- */

a img {
	border: none;
	}
	
.caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.caption p.caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}	

/* ============== Global containers ============== */


#global {
	width:950px;
	margin:0px auto;
	text-align:left;
	min-height:100%; 
}

* html #global {
	height:100%; 
}

#pageheader {
	width:950px;
	height:266px;
	margin:0px none;
	padding:0px none;
	background: #300201 url(../images/fd_header.png) top repeat-x;	
	}

#center {
	width:950px;
	background: url(../images/fond_center.png) top repeat-y;
}	

#left-sidebar {
	width:266px;
}

#main, #mainproduits, #maingamme {
	width: 644px !important;
	width: 624px;	
	margin-right: 20px;
	background: #fff;
	float:right;
}

#mainproduits #summary, #mainproduits #maintext, #main #summary, #main #maintext, #firstcol #maintext, #mainplan #maintext, #mainplan #summary, #mainsearch #maintext, #mainsearch #summary {
	margin-left:35px;
}

#mainplan {
	width: 644px !important;
	width: 624px;	
	margin-right: 20px;
	float:right;
	background: url(../images/fond_plan.png) no-repeat top right;
}

#mainsearch {
	width: 644px !important;
	width: 624px;	
	margin-right: 20px;
	float:right;
}

#pagebottom {
	width:100%;
	height:29px;
	background:#4f0202 url(../images/fond-pagebottom.png) repeat-x;
	text-align: center;	
	margin-left:-1px;
}


<!--[if lte IE 6]>
#left-sidebar {
	margin-right: 3px;
}

div#main {
	overflow: visible;
	height: 1%;
}
<![endif]-->

/* ============== Page header ============== */

#banner {
	height:60px;
	width:715px;
  margin-left:260px;
  margin-top:0;
}

#banner h2 {

}

#logo {
	float:left;
	width:250px;
	height:100px;
}

.logoimg {
	padding-left:16px;
	padding-top:16px;
}

#utilities {

}



/* ============== Global navigation ============== */

#globalnav {
	height:58px;
	width:950px; 
	position:absolute;
	top:208px;
	margin:0px; 
	*margin-left:-250px;
	background:#600803;
}

#globalnav ul {
	padding-left:547px; 
	margin:0;
	list-style-type: none; 
}

#globalnav ul li {
	float:left; 
	position:relative;
	}

#globalnav ul li span {
	display:none;
}

#globalnav ul li a {
	display:block;
	height: 58px;
}

#globalnav ul li#doc1 a {
	width:97px;
	background: url(../images/globalnav_1.png) no-repeat;
}

#globalnav ul li#doc1 a:hover, #globalnav ul li#doc1 a.active {
	background: url(../images/globalnav_1_on.png) no-repeat;
}

#globalnav ul li#doc102 a {
	width:119px;
	background: url(../images/globalnav_102.png) no-repeat;
}

#globalnav ul li#doc102 a:hover, #globalnav ul li#doc102 a.active {
	background: url(../images/globalnav_102_on.png) no-repeat;
}

#globalnav ul li#doc103 a {
	width:146px;
	background: url(../images/globalnav_103.png) no-repeat;
}

#globalnav ul li#doc103 a:hover, #globalnav ul li#doc103 a.active {
	background: url(../images/globalnav_103_on.png) no-repeat;
}


	
/* No dropdown menus needed */	

/* ============== Left sidebar ============== */

#left-sidebar div {
	margin: 0;
}

#localnav {
	width:266px;
}

#localnav li a {
	display:block;	
	}
	
#localnav li a span {
	display: none;
}	

#localnav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#localnav li.level1 a, #localnav li.last a  {
	height:44px;
	margin:0px;
	*margin-top:-3px;	
	}

#localnav li.level2 {
	float:none;
	}

#localnav li.level2 a {
	height:26px;
	margin:0px;
	*margin-top:-3px;
	}
	
#localnav li#doc2 a  {
	background: url(../images/localnav_produits.png) no-repeat;
	}
	
#localnav li#doc2 a:hover  {
	background: url(../images/localnav_produits_act.png) no-repeat;
	}
	
#localnav li#doc2 a.here, #localnav li#doc2 a.active  {
	background: url(../images/localnav_produits_on.png) no-repeat;
	}
	
#localnav li#doc3 a  {
	background: url(../images/localnav_beton.png) no-repeat;
	}
	
#localnav li#doc3 a:hover  {
	background: url(../images/localnav_beton_act.png) no-repeat;
	}
	
#localnav li#doc3 a.selected, #localnav li#doc3 a.active  {
	background: url(../images/localnav_beton_on.png) no-repeat;
	}	
	
#localnav li#doc20 a  {
	background: url(../images/localnav_bitume.png) no-repeat;
	height:24px;
	}
	
#localnav li#doc20 a:hover  {
	background: url(../images/localnav_bitume_act.png) no-repeat;
	}
	
#localnav li#doc20 a.selected, #localnav li#doc20 a.active  {
	background: url(../images/localnav_bitume_on.png) no-repeat;
	}		

#localnav li#doc39 a  {
	background: url(../images/localnav_ciment.png) no-repeat;
	height:25px;
	}
	
#localnav li#doc39 a:hover  {
	background: url(../images/localnav_ciment_act.png) no-repeat;
	}
	
#localnav li#doc39 a.selected, #localnav li#doc39 a.active  {
	background: url(../images/localnav_ciment_on.png) no-repeat;
	}
	
#localnav li#doc51 a  {
	background: url(../images/localnav_granulat.png) no-repeat;
	height:26px;
	}
	
#localnav li#doc51 a:hover  {
	background: url(../images/localnav_granulat_act.png) no-repeat;
	}
	
#localnav li#doc51 a.selected, #localnav li#doc51 a.active  {
	background: url(../images/localnav_granulat_on.png) no-repeat;
	}
	
#localnav li#doc68 a  {
	background: url(../images/localnav_route.png) no-repeat;
	height:25px;
	}
	
#localnav li#doc68 a:hover  {
	background: url(../images/localnav_route_act.png) no-repeat;
	}
	
#localnav li#doc68 a.selected, #localnav li#doc68 a.active  {
	background: url(../images/localnav_route_on.png) no-repeat;
	}
	
#localnav li#doc80 a  {
	background: url(../images/localnav_sol.png) no-repeat;
	height:25px;
	}
	
#localnav li#doc80 a:hover  {
	background: url(../images/localnav_sol_act.png) no-repeat;
	}
	
#localnav li#doc80 a.selected, #localnav li#doc80 a.active  {
	background: url(../images/localnav_sol_on.png) no-repeat;
	}
	
#localnav li#doc94 a  {
	background: url(../images/localnav_equipement.png) no-repeat;
	height:28px;
	}
	
#localnav li#doc94 a:hover  {
	background: url(../images/localnav_equipement_act.png) no-repeat;
	}
	
#localnav li#doc94 a.selected, #localnav li#doc94 a.active  {
	background: url(../images/localnav_equipement_on.png) no-repeat;
	}
	
#localnav li#doc101 a  {
	height:41px;
	background: url(../images/localnav_service.png) no-repeat;
	}
	
#localnav li#doc101 a:hover  {
	background: url(../images/localnav_service_act.png) no-repeat;
	}
	
#localnav li#doc101 a.selected, #localnav li#doc101 a.active  {
	background: url(../images/localnav_service_on.png) no-repeat;
	}									

#left-sidebar div, #left-sidebar img {
	margin:0px;
	*margin-bottom:-3px;	
}


/* ============== Main content ============== */

#maincontent {

}

#maintext ul, #maintexthome ul {
		list-style-image: url(../images/fleche_verte.png);
		margin-left:-18px;
*		margin-left:18px;		
		}

#breadcrumbs {
	font-size:11px;
	margin: 16px 0px;
}

#summary {
	margin-bottom:25px;
}


/* -------------- homepage -------------- */

#maintexthome h1  {
	font-family: Din, Helvetica, Arial, sans-serif;
	font-size:20px;
	color:#88211f;
	text-transform:uppercase;
	margin:13px 0;
	padding:0px;
	background:transparent;
	}

#mainhome {
	width: 664px !important;
	width: 644px;	
	margin-right: 0px;
	background: #fff;
	float:right;
}

#maintexthome {
		width:385px;
}

#newshome {
		width:236px;
		float:right;
		background:#b6cb00 url(../images/home_nouveau_haut.png) no-repeat top;
}

#newshome-top {
		height:82px;
}

#newshome-content {
		margin:0px 20px;
}

#newshome-content span a {
		text-decoration:none;
		font-weight:bold;
		font-size:11px;
}

#newshome-content span a:hover {
		text-decoration:underline;
}

#newshome-content span {
		width:95px;
		float:right;
		margin-top:11px;
}

#newshome-bottom {
		height:15px;
		background:url(../images/home_nouveau_bas.png) no-repeat top;
}

/* -------------- designs spécifiques -------------- */

#firstcol {
	width:295px;
	text-align:justify;
}

#secondcol {
	float:right;
	width:295px;
	text-align:justify;	
}

#mainplan #maintext ul {
	list-style-type: none; 
	list-style-image:none;
}

#mainplan #maintext li {
	margin-bottom:6px;
}

#mainplan #maintext li a {
	text-decoration:none;
}

#mainplan #maintext li a:hover {
	text-decoration:underline;
}

#mainplan #maintext li ul li a {
	color:#000;
}

#mainsearch #summary {
	font-weight:bold;
}

#mainsearch h1 {
	background: url(../images/picto_loupe.png) no-repeat left;	
}

/* -------------- produits -------------- */

#maingamme #summary, #maingamme #maintext {
	margin-left:66px;
}

#maingamme h1 a {
	text-decoration:none;
}

#maingamme h1.beton, #maingamme h1.bitume, #maingamme h1.ciment, #maingamme h1.granulat, #maingamme h1.route, #maingamme h1.sol, #maingamme h1.equipement-general {
	padding:12px 0px 0px 66px;
	height:37px;
	text-transform:none;
}

#maingamme h1.beton {
	background: url(../images/tit-beton.png) no-repeat left;	
}

#maingamme h1.bitume {
	background: url(../images/tit-bitume.png) no-repeat left;	
}

#maingamme h1.ciment {
	background: url(../images/tit-ciment.png) no-repeat left;	
}

#maingamme h1.granulat {
	background: url(../images/tit-granulat.png) no-repeat left;	
}

#maingamme h1.route {
	background: url(../images/tit-route.png) no-repeat left;	
}

#maingamme h1.sol {
	background: url(../images/tit-sol.png) no-repeat left;	
}

#maingamme h1.equipement-general {
	background: url(../images/tit-equipement.png) no-repeat left;	
}

#maingamme h1 span {
	font-weight:normal;
	font-size:18px;
}

.intermediaire {
	width:556px;
}

.intermediairetop {
	height:22px !important;
	padding:8px 0px 0px 18px;
	background: url(../images/fond_intermediairetop.png) no-repeat;
}

.intermediairetop h2 {
	margin:0px;
	text-transform:none;
}

.intermediairetop h2 a {
	text-decoration:none;
	text-transform:none;	
}

.intermediairemiddle {
	border-left:2px solid #b6cb00;
	border-right:2px solid #b6cb00;
	padding:10px !important;
	padding:0px;
}

.intermediairemiddle ul, .intermediairemiddle p {
	margin:0px;
}

.intermediairemiddle ul a {
	text-decoration:none;
	color:#000;
}

.intermediairemiddle ul a:hover {
	text-decoration:underline;
	color:#861709;
}

.intermediairebottom {
	background: url(../images/fond_intermediairebottom.png) no-repeat;
	height:27px;
	text-align:right;
}

.intermediairebottom a  {
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;
	font-size:11px;
	margin-right:14px;
	}
	
.intermediairebottom a:hover {
	text-decoration:underline;
}	

.detailproduit {
	background-image: url(../images/fond_detailproduit.png);
	background-repeat:no-repeat;
	height:163px;
	width:559px;
}

.detailproduit_gauche {
	height:163px;
	width:201px;
	float:left; 
}

.detailproduit_droite {
	height:163px;
	width:358px;
	margin-left:201px; 
}

.detailproduit_loupe {
	float:right;
	top:0px;
	right:0px;
}

.detailproduit_loupe, .detailproduit_image{
	position: relative;
	z-index: 0;
}

.detailproduit_image img {
	height:326px;
	width:334px;
}

.detailproduit_loupe:hover, .detailproduit_image:hover{
	background-color: transparent;
	z-index: 50;
}

.detailproduit_loupe span, .detailproduit_image span{ /*CSS for enlarged image*/
	position: absolute;
	top: -1000px;
	visibility: hidden;
	text-decoration: none;
}

.detailproduit_image span{ /*CSS for enlarged image*/
	padding: 0px;
}

.detailproduit_loupe span img{ /*CSS for enlarged image*/
	border-width: 0;
}

.detailproduit_loupe:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: -163px;
	left: -334px; /*position where enlarged image should offset horizontally */
	text-decoration:none;
}

.donneesproduit {
	position:relative;
	top:23px !important;
	padding-right:10px;
}

.donneesproduit h3 {
	color:#000;
	font-size:12px;
	text-transform:uppercase;
	margin:10px 0px 4px 0px;
}

.donneesproduit p {
	margin:5px 0px 5px 0px;
}

.ref {
	color:#861709;
	font-weight:bold;
}

.nf {
	color:#b6cb00;
	font-weight:bold;	
}

.detailproduit_pdf {
	float:right;
	position:relative;
	top:4px;
	right:11px;
}

.aucune, .nouveaute, .plus {
	width:120px;
	height:22px;
	position:relative;
	top:4px;
	left:95px;
}

.nouveaute {
	background:url(../images/bt_nouveau.png) no-repeat;
}

.plus {
	background:url(../images/bt_plus.png) no-repeat;
}

#maintext ul#productlist {
	list-style-type: none; 
	list-style-image:none;
}

#productlist a span {
	display: none;
}	

#productlist li{
	margin:-18px;
}

#productlist li a {
	display:block;
	float:left;
}

#productlist a#beton {
	height:148px;
	width:154px;
	background-image: url(../images/picto_beton.png);	
}

#productlist a#beton:hover {
	background-image: url(../images/picto_beton_on.png);	
}

#productlist a#bitume {
	width:167px;
	height:148px;
	background-image: url(../images/picto_bitume.png);	
}

#productlist a#bitume:hover {
	background-image: url(../images/picto_bitume_on.png);	
}

#productlist a#ciment {
	width:142px;
	height:148px;
	background-image: url(../images/picto_ciment.png);	
}

#productlist a#ciment:hover {
	background-image: url(../images/picto_ciment_on.png);	
}

#productlist a#granulat {
	width:155px;
	height:148px;
	background-image: url(../images/picto_granulat.png);	
}

#productlist a#granulat:hover {
	background-image: url(../images/picto_granulat_on.png);	
}

#productlist a#route {
	width:145px;
	height:167px;
	background-image: url(../images/picto_route.png);	
	margin-left:70px;
}

#productlist a#route:hover {
	background-image: url(../images/picto_route_on.png);	
}

#productlist a#sol {
	width:185px;
	height:167px;
	background-image: url(../images/picto_sol.png);	
}

#productlist a#sol:hover {
	background-image: url(../images/picto_sol_on.png);	
}

#productlist a#equipement-general {
	width:162px;
	height:167px;
	background-image: url(../images/picto_equipement.png);	
}

#productlist a#equipement-general:hover {
	background-image: url(../images/picto_equipement_on.png);	
}

/* -------------- accroches -------------- */

.accroche a:hover, .accroche a:focus, .accroche a:active, .accroche a:visited {
  /*
  On 'hover' set the anchor to 'position:relative' to get a
  measuring point. Somehow IE doesn't like it when this is
  in the '.accroche a' declaration...
  */
  position: relative;
  text-decoration: underline;
}

.accroche a:hover span, .accroche a:focus span, .accroche a:active span {
  /*
  Take the previously hidden span and display it near the anchor
  */
  left: 40px;
  top: 20px;
  width: 150px;
  /*
  This is just for looks...
  */
  padding: 5px;
  line-height: 1.5em;
  font-size: 80%;
  background: #FFEAC8;
  border: 1px solid #F09E16;
  color: #000;
  text-decoration: none;
}

.accroche a:hover span:before, .accroche a:focus span:before, .accroche a:active span:before {
  /*
  IE doesn't show this - but others do.
  */
  content: "En savoir plus :  ";
}

.accroche a span
{
	/*
	Use 'position:absolute' to push the span inside the anchor
	way off the screen
	*/
	position: 		absolute;
	left: 			-9999px;
	top: 			-9999px;
	width: 			900px;
}

.accroche {
	float:right;
	background-image:url(../images/fleche-suite.gif);
	background-position:left;
	background-repeat:no-repeat;
	padding:5px 0px 5px 25px;
	height:14px;
}


/* ============== Footer ============== */

#footer {
	font-size:11px;
	height:19px;
	padding:7px 5px 3px 5px;
	margin:0 auto;
	width:961px;
	background:url(../images/pagebottom.png) no-repeat;	
	color:#b48988;
}

#footer a {
		color:#b48988;
		text-decoration:none;	
}

#footer a:hover {
	color:#ccd311
}

#footer ul {
		margin:0;
		padding: 0;
		list-style: none;
		vertical-align:center;
}

#footer li {
		float:left;
		padding: 0 10px 0 0;
}

#footer #footernav {
		height:20px;
		margin-left:275px;
		width:674px;
}

#footer .copyright {
		float:left;
		left:0;
		margin:0px 15px 0px 0px;
		height:19px;
}


/* ============== Forms ============== */

#contactform {

}

#inlineform {

}

#search {
	position:relative;
	top:13px;
 	height:33px;
 	width:201px;
 	background: url(../images/search_form.png) no-repeat right top;
	float:right;
}

#ajaxSearch_form {
	height:33px;
}

#ajaxSearch_input {
	background:transparent none repeat scroll 0 0;
	border:0 none;
	padding: 4px 0 0px 40px;
	width:127px;
	height:29px;
	color:#88211f;
	position:relative;
	top:-11px;
	*top:2px;
}

#ajaxSearch_submit {
	border:0px none;
}

#contactform fieldset, #inlineform fieldset, #ajaxSearch_form fieldset {
		border:0px;
		margin:0px;
		padding:0px;
}

#ajaxSearch_form fieldset {
	height:33px;	
}

input, textarea {
		font-size:11px;
		border:1px solid #aeb0b6;
}

p.error {
		color:red;
}

.ajaxSearch_result {
	border-top: 1px solid #861709;
	margin: 10px 0 10px 0;
	padding-top:10px;
}

.ajaxSearch_resultLink {
	font-size:1.2em;
	font-weight:bold;
}
	
/* ============== Pop ups ============== */