/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 
**************************************************************************
Copyright 2010 POINT WEB
type : screen
categorie : structure site
Auteur : serco pointweb
site : SARL GRAND PIERRE
**************************************************************************/

/*fix bug navigateur*/
.myhr{ clear:both; height:0; overflow:hidden; visibility:hidden; }

/************* DETECTION JS **************/

#jserror{ background:#FFFFCC; border:#FF0000 solid 1px; color:#FF0000; padding: 10px; margin: 0 0 10px 0; float:left; }
#jserror dt{ font-weight:bold; }

*{margin:0; padding:0}
body{ background:#FFF url(../images/bg_site.gif) repeat-x top left; font-family:Verdana, Arial, Helvetica, sans-serif;}
h1{ display:none}
a{ text-decoration:none; outline:none;}
a:hover{ text-decoration:underline}
#accessibilite { display:none}
img{ border:0}
.paragraphe{ font-size:12px}
.important{ font-size:12px; text-transform:uppercase; color:#006600}
/*-----------------------------------------------< STRUCTURE >-----------------------------------------------*/

#global{width:995px; margin:0 auto;}

#header{height:130px;}
	#logo{ width:528px; height:130px; float:left; }

/*--------------------------------< Demander votre code >---------------------------*/

	#demandeCode{ float:left; width:467px; height:130px;background:url(../images/bg_acces_pro.gif) no-repeat top left}
		#demandeCode p{ float:left; text-align:right; color:#a6a6a6; font-size:11px; padding:70px 0 0 175px}
		#boutonCadenas{ float:left; margin:27px 0 0 29px; width:62px; height:63px;}
		#boutonCadenas a{ background:url(../images/cadenas.gif) no-repeat top left; width:62px; height:63px; display:block; text-indent:-9999px}
		#boutonCadenas a:hover{ background:url(../images/cadenas.gif) no-repeat bottom left;}
		
/*--------------------------------< MENU >---------------------------*/

#menu{ padding:8px 0 0 30px; height:27px}
#menu ul{ list-style-type:none}
#menu li{ display:inline; float:left; padding-right:20px}
#menu li a{ color:#fff; font-size:13px}
		
/*--------------------------------< ESPACE PRO >---------------------------*/

#espacePro{ background:url(../images/titreEspacePro.gif) no-repeat 25px 10px; height:70px; width:995px; overflow:hidden}
	#formPro{ padding:0 0 0 240px }
	#formPro fieldset{ border:none}
	#formPro legend{ display:none}
	#formPro div{ float:left; margin-right:10px}
	#formPro input{ width:145px; border:#4b5258 solid 1px; font-size:11px; color:#666; height:17px}
	#formPro input#btnSubmit{ width:100px; background:#384349; border:#b6b6b6 solid 1px; color:#fff; font-size:10px; font-weight:bold; cursor:pointer;}
	#formPro input#btnSubmit:hover{ background:#181d1f}
	#formPro a.pass{ color:#FFF; font-size:11px; display:block; padding-top:3px}
	#formPro a{ color:#ccc; font-size:11px; display:block;}
	#formPro p{ color:#dcdcdc; font-size:11px; padding-top:18px}
	#recapCommande{ background:#fff; margin-top:-15px; height:178px; width:165px; margin-left:5px;}
	#recapCommande p{ font-weight:bold;  color:#333; font-size:12px; text-align:center; padding-top:28px}
	#recapCommande a{color:#626c73; font-size:10px; text-decoration:underline; font-weight:normal}
	#recapCommande a:hover{color:#36a536;}
	.left{ float:left; padding-top:15px; padding-right:5px; padding-left:5px}
	#formPro a.btnSuivi{ background:#367d36; color:#fff; padding:2px 5px 2px 5px; color:#fff; float:left; display:block; border:#71be71 solid 1px; text-decoration:none;  float:left}
	#formPro a.btnSuivi:hover{ background:#296229;}
	#formPro a.btnSubmit{ width:100px; background:#384349; border:#b6b6b6 solid 1px; color:#fff; font-size:10px; font-weight:bold; cursor:pointer; height:20px; text-align:center; margin-top:-3px; padding-top:5px;}
	#formPro a.btnSubmit:hover{ background:#181d1f}
	
/*--------------------------------< RUBRIQUES >---------------------------*/

#rubriques{ margin:0 0 0 20px; width:975px; height:192px; position:relative}
#rubriques dl{ float:left; margin-right:15px; }
#rubriques dt{width:179px; height:192px;}
#rubriques dt a{ display:block; text-indent:-9999px;width:179px; height:192px}

a#velo{ background:url(../images/btnVelo.jpg) no-repeat top left}
a#velo:hover{ background:url(../images/btnVelo.jpg) no-repeat bottom left}
a#motorise{ background:url(../images/btnMotorises.jpg) no-repeat top left}
a#motorise:hover{ background:url(../images/btnMotorises.jpg) no-repeat bottom left}
a#cyclomoteur{ background:url(../images/btnCyclo.jpg) no-repeat top left}
a#cyclomoteur:hover{background:url(../images/btnCyclo.jpg) no-repeat bottom left}
a#scooter{background:url(../images/btnScooter.jpg) no-repeat top left}
a#scooter:hover{background:url(../images/btnScooter.jpg) no-repeat bottom left}
a#mecaboite{background:url(../images/btnMecaboite.jpg) no-repeat top left}
a#mecaboite:hover{background:url(../images/btnMecaboite.jpg) no-repeat bottom left}

#rubriques dd{ background:#006600; padding:10px 10px 10px 0; position:absolute; top:70px;  z-index:500; font-family:Arial, Helvetica, sans-serif; display:none }
#rubriques dd p{ color:yellow; font-size:16px; text-transform:uppercase; border-left:10px #fff solid; padding-left:10px}
#rubriques dd p span{ color:#fff;}
#rubriques dd ul{ list-style-type:none; float:left; padding:10px; width:153px;}
#rubriques dd li{border-bottom:#7c900e solid 1px; width:153px; padding-bottom:3px; padding-top:3px}
#rubriques dd li a{ color:#fff; font-size:11px}
#rubriques dd li a:hover{ color:yellow; text-decoration:none}
		
/*--------------------------------< BLOCK LEFT >---------------------------*/

#wrapper{ padding:15px 20px 20px 20px; float:left}
#blockLeft{ width:209px; float:left}

/*---------------------< Moteur de recherche >--------------------*/

	#blockRecherche{ width:174px; height:144px; background:url(../images/bg_rech.gif) no-repeat top left; margin-bottom: 20px;}
	#blockRecherche p{ color:#7b868e; font-size:11px; padding:45px 0 10px 15px}
	#formRech{ padding-left:15px}
	#formRech div{ margin-bottom:5px}
	#formRech fieldset{ border:none}
	#formRech legend{ display:none}
	#formRech input{ border:#7b868e solid 1px; width:146px; background:#edebeb; font-size:11px; color:#333; height:18px}
	#formRech input#btnRech{border:#b2b2b2 solid 1px; width:148px; background:#666; color:#fff; font-size:11px; font-weight:bold; height:22px; cursor:pointer}
	#formRech input#btnRech:hover{background:#333; }

/*---------------------< Commande directe >--------------------*/

	#blockCommande{ width:174px; height:144px; background:url(../images/bg_commande.gif) no-repeat top left}
	#blockCommande p{ color:#7b868e; font-size:11px; padding:45px 0 10px 15px}
	#formcommande{ padding-left:15px}
	#formcommande div{ margin-bottom:5px}
	#formcommande fieldset{ border:none}
	#formcommande legend{ display:none}
	#formcommande input{ border:#7b868e solid 1px; width:146px; background:#edebeb; font-size:11px; color:#333; height:18px}
	#formcommande input#btnOK{border:#b2b2b2 solid 1px; width:148px; background:#666; color:#fff; font-size:11px; font-weight:bold; height:22px; cursor:pointer}
	#formcommande input#btnOK:hover{background:#333; }
	
/*---------------------< Promotions, nouveaut�s, destockage et fin de serie >--------------------*/

.blockProdSpec dl{ margin:20px 0 20px 0}
.blockProdSpec dt{ width:173px; height:36px; text-indent:-9999px; margin-bottom:10px}
.blockProdSpec dd{ color:#7b868e; font-size:11px; margin-bottom:5px}
.blockProdSpec dd a{ display:block; background:url(../images/plus.gif) no-repeat center left; padding-left:17px; color:#3e8e3e; font-size:11px; font-weight:bold;}
dt#blockPromo{ background:url(../images/titrePromo.gif) no-repeat top left}
dt#blockDestockage{background:url(../images/titreDestockage.gif) no-repeat top left}
	
/*---------------------< MARQUES >--------------------*/

#blockMarques{ width:149px; height:104px; background:url(../images/bg_marques.gif) no-repeat top left; padding:40px 0 0 25px}
.img1{ border:#ccc solid 1px; margin:5px 0 0 3px}
		
/*--------------------------------< CONTENT >---------------------------*/

#content{ float:left; width:746px; padding:10px 0 0 0}
h2{ color:#333; font-size:14px; margin-bottom:15px}
h2 span{ color:#419441}
p.paragraphe{ color:#4c4c4c; font-size:12px; line-height:18px}
span.vert{ color:#006600; }

a.btnCode{ width:729px; height:81px; background:url(../images/btnCode.gif) no-repeat top left; display:block; text-indent:-9999px; margin:15px 0 15px 0}
a.btnCode:hover{ background:url(../images/btnCode.gif) no-repeat bottom left; }

#footer{ height:99px; background:url(../images/bg_footer.gif) no-repeat top left; padding:37px 60px 0 45px}
#footer p{ font-size:11px; color:#333; line-height:14px}
#footer a{  color:#333}
#footer span{ color:#006600; font-size:14px}
#coordonnees{ float:left}
#copyright{ float:right; text-align:right}

/*--------------------------------< TOP VENTE >---------------------------*/
.topVente{ margin:0 0 25px 0}
.topVente p.titre{ background:#ffff00; color:#000; font-size:14px;border-right:#ddc000 solid 1px;border-left:#ddc000 solid 1px; border-top:#ddc000 solid 1px; width:140px; padding:5px; text-align:center; margin-left:20px}

.blocTop{ width:188px; height:194px; float:left; margin:18px 10px 0 0; padding:0 0 0 12px}
.blocTop .visuel{ border:#999 solid 1px; width:182px; height:134px; margin-bottom:5px;}
.blocTop p{ text-align:center}
p.titreProd{ color:#333; font-size:11px; overflow:hidden; height:27px; margin-bottom:5px}
p.prix{ font-size:11px; color:#3e8e3e; text-decoration:underline}
.blocTop a{ font-size:11px; color:#3e8e3e}
.blocTop a:hover{ color:#666;}

/*.details{background:#ffff00; border:#ddc000 solid 1px; position:absolute; bottom:0; right:0; z-index:100; padding:2px 5px}
.details a{color:#000; font-size:10px;}
.details a:hover{color:#af9800;text-decoration:none}*/

/*--------------------------------< FAQ >---------------------------*/

dl.faq{ border-bottom:#ccc solid 1px; padding-bottom:10px; margin:15px 0 10px 0}
dl.faq dt{ color:#3e8e3e; font-size:14px; font-weight:bold; margin-bottom:5px}
dl.faq dd{ color:#666; font-size:12px; line-height:18px}

/*--------------------------------< pagination >-----------------------------*/

.pagination{  margin-top:15px; background:#efefef;border:#ccc solid 1px; padding:5px; text-align:center; width:730px}
.pagination ul{ list-style-type:none}
.pagination li{ display:inline; color:#666; font-size:11px; border-right:#666 solid 1px; padding:0 8px 0 5px}
.pagination li a{ color:#666; font-size:11px}
.pagination li a.activ{ font-weight:bold; color:#3e8e3e;}

/*--------------------------------< page cat�gories >-----------------------------*/

.img2{ border:#ccc solid 1px; float:left; margin-right:15px; margin-top:5px}
.listRubriques{float:left}
.listRubriques ul{ float:left; list-style-type:none; padding:10px 10px 20px 0; width:175px; margin-top:15px;}
.listRubriques li{border-bottom:#999 solid 1px; width:153px; padding-bottom:3px; padding-top:3px; line-height:16px}
.listRubriques li a{ color:#666; font-size:11px; font-weight:bold}
.listRubriques li a:hover{ color:#22bd22; text-decoration:none}

/*--------------------------------< Demander votre code >-----------------------------*/

.blocLeft{ float:left}
.blocRight{ float:left}

#formDemandeCode{ margin:15px 0 0 0; border:#999 solid 1px; }
#formDemandeCode fieldset{ padding:10px; border:none}
#formDemandeCode legend{ display:none}
#formDemandeCode div{ margin:5px 5px 8px 5px}
#formDemandeCode label{ float:left; display:inline; margin-right:5px; width:130px; color:#333; font-size:12px}
#formDemandeCode input{ border:#ccc solid 1px; width:180px}

#formDemandeCode input:focus, textarea:focus{background:#f1f1f1}
#formDemandeCode input.monSubmit{background:#3e8e3e;cursor:pointer; height:25px; border:none; font-weight:bold; color:#fff; font-size:14px; width:180px; margin-left:135px}
#formDemandeCode input.monSubmit:hover{background:#275d27}

ul.list{ color:#4c4c4c; font-size:12px; line-height:18px; list-style-type:decimal; margin:10px 0 10px 20px}

/*--------------------------------< LISTING PRODUITS >-----------------------------*/

.prodListing{ float:left; width:359px; height:63px; border-right:#333 dotted 1px; font-family:Arial, Helvetica, sans-serif; margin-right:13px; margin-bottom:15px; margin-top:15px}
.visuelListing{ float:left; margin-right:10px}
.imgListing{ border:#999 solid 1px}

.infosListing{ float:left; width:240px}

.titreListing{ font-size:12px; color:#333; line-height:12px; overflow:hidden; height:12px}
.prix{ color:#006600; font-size:11px;}
p.prixNormal{ float:left; margin-right:15px}
p.prixNormal a{color:#006600; text-decoration:underline; font-size:11px}
p.prixNormal a:hover{color:#666; text-decoration:underline}
p.prixBarre{ float:left;}
a.detailsListing{ width:66px; height:14px;color:#fff;font-size:11px; font-weight:bold; display:block; text-align:center; padding-top:1px; margin-top:20px}
a.detailsNonDispo{ width:150px;}
.fondVert a.detailsListing{ background:#006600; }
.fondNoir a.detailsListing{ background:#333; }

.infosBas{ width:714px; height:66px; background:url(../images/bg_infosBas.gif) no-repeat top left; margin:15px 0 0 10px}
.infosBas p{ float:left}
p.infosOne{ color:#333; font-size:14px; margin:15px 0 0 30px}
p.infosOne span{ color:#006600;}
p.infosTwo{margin:10px 0 0 140px}
p.infosTwo a{color:#fff; font-size:13px; }
p.infosTwo a span{ font-size:11px; color:#e3e3e3}

/*--------------------------------< DETAILS PRODUITS >-----------------------------*/

a.retour{ width:246px; height:43px; display:block; float:right; color:#626a6f; font-size:11px; background:url(../images/bg_retour.gif) no-repeat top left; text-transform:uppercase; font-weight:bold; padding:15px 0 0 90px}
a.retour:hover{ color:#333}

.produitDetails{ margin:10px 0 10px 0}
.produitDetails dt{ background:#333; padding:5px 5px 5px 10px; color:#fff; font-size:14px; text-transform:uppercase; margin-bottom:15px}
dd.visuelDetails{ float:left;position:relative; width:235px; height:220px; margin-right:15px}
.zoom{ background:#333; width:54px; height:15px; position:absolute; top:157px; left:183px; z-index:5; padding:2px 0 0 0}
.zoom p{ text-align:center}
.zoom a{ color:#fff; font-size:10px}
dd.infosDetails{ float:left; width:490px; color:#333; font-size:12px; line-height:18px}
p.ref{ color:#006600; font-size:12px; font-weight:bold; margin:0 0 10px 0; background:url(../images/puce.gif) no-repeat center left; padding-left:15px}
p.descriptionDetails{ min-height:130px;}
.prixDetails{ float:left; background:#626a6f; width:216px; margin:10px 0 0 0; color:#fff;font-size:11px; height:15px; padding:6px 10px 5px 10px}
.prixDetails p.prixNormal{ float:left; margin-right:15px;}
.prixDetails p.prixBarre{ float:right; text-decoration: line-through}

dd.commander{ float:right; margin:10px 0 0 0}
dd.commander a{ background:url(../images/btnCommander.gif) no-repeat top left; width:172px; height:43px; display:block; text-indent:-9999px}
dd.commander a:hover{ background:url(../images/btnCommander.gif) no-repeat bottom left;}

dd.pointilles{ border-bottom:#666 dotted 1px}
dd.lienPdf{ margin-top:10px}
a.btnPdf{ color:#333; font-size:11px; text-decoration:underline; display:block; background:url(../images/iconePdf.jpg) no-repeat center left; padding-left:40px; height:34px; padding-top:15px}
a.btnPdf:hover{ color:#006600; font-weight:bold}

/*--------------------------------< PANIER COMMANDE >-----------------------------*/

p.legend{ font-size:12px; color:#666; line-height:16px}
p.legend span{ font-size:14px; color:#006600}

.formCommDirecte{ border:#999 solid 1px; padding:10px; margin:15px 0 30px 0}
.formCommDirecte fieldset{ border:none}
.formCommDirecte legend{ display:none}
.formCommDirecte div{ float:left; margin:5px}
.formCommDirecte label{ font-size:14px; color:#333; float:left; display:inline; width:150px; margin-left:80px}
.formCommDirecte input{ border:#999 solid 1px; background:#efefef; width:180px; color:#333}
.formCommDirecte input#btnOk{background:#3e8e3e;cursor:pointer; border:#6cc66c solid 1px; font-weight:bold; color:#fff; font-size:14px; width:180px;}
.formCommDirecte input#btnOk:hover{background:#205020;}

#formPanier fieldset{ border:none}
#formPanier legend{ display:none}

#tabloPanier{ border-top:#999 solid 1px; border-left:#ccc solid 1px; width:745px; margin-bottom:30px}
#tabloPanier td{ border-bottom:#ccc solid 1px; border-right:#ccc solid 1px; height:30px; color:#333; font-size:11px}
#tabloPanier th{ height:30px; border-right:#999 solid 1px; border-bottom:#999 solid 1px; background:url(../images/bg_th.gif) repeat-x top left; color:#333; font-size:12px}
#tabloPanier a.intitule{ color:#006600; font-weight:bold}

#formPanier input{border:#999 solid 1px; background:#efefef; width:50px; color:#333; font-size:11px; float:left; margin-right:10px; margin-left:25px}


#formPanier td.total{ color:#C30; font-size:14px; font-weight:bold; background:#efefef}

a.actions{ display:block; text-indent:-9999px; float:left; width:16px; height:16px; margin-right:10px}
a.refresh{ background: url(../images/icon_refresh.png) no-repeat top left;}
a.delete{ background: url(../images/icon_delete.png) no-repeat top left;}

a.btnContinuer{ width:307px; height:49px; display:block; background:url(../images/btnContinuer.gif) no-repeat top left; text-indent:-9999px; float:left; margin-top:3px}
a.btnContinuer:hover{ background:url(../images/btnContinuer.gif) no-repeat bottom left;}

a.btnCommandeSuite{ width:288px; height:59px; display:block; background:url(../images/btnCommanderSuite.gif) no-repeat top left; text-indent:-9999px; float:right}
a.btnCommandeSuite:hover{ background:url(../images/btnCommanderSuite.gif) no-repeat bottom left;}

a.btnCommandePayer{ width:288px; height:59px; display:block; background:url(../images/btnCommanderPayer.gif) no-repeat top left; text-indent:-9999px; float:right}
a.btnCommandePayer:hover{ background:url(../images/btnCommanderPayer.gif) no-repeat bottom left;}

/*--------------------------------< FINALISATION COMMANDE >-----------------------------*/

#formTransport{ margin:15px 0 15px 0}
#formTransport legend{color:#999; font-size:12px}
#formTransport fieldset{ border:#999 solid 1px; padding:10px}
#formTransport div{ margin:10px 5px 5px 5px}
#formTransport input[type=radio]{ width:15px; height:15px; float:left; margin-right:10px}
#formTransport label{color:#333; font-size:12px}

a.retourAccueil{ color:#006600}

/*--------------------------------< CONTACT >-----------------------------*/

.blocLeft{ float:left}
.blocRight{ float:left}

#formContact{ margin:15px 0 0 0; border:#999 solid 1px; }
#formContact fieldset{ padding:10px; border:none}
#formContact legend{ display:none}
#formContact div{ margin:5px 5px 8px 5px}
#formContact label{ float:left; display:inline; margin-right:5px; width:100px; color:#333; font-size:12px}
#formContact input{ border:#ccc solid 1px; width:200px}
#formContact textarea{ border:#ccc solid 1px; width:200px; font-family:Verdana, Geneva, sans-serif}

#formContact input:focus, textarea:focus{background:#f1f1f1}
#formContact input.monSubmit{background:#3e8e3e;cursor:pointer; height:25px; border:none; font-weight:bold; color:#fff; font-size:14px; width:200px; margin-left:105px}
#formContact input.monSubmit:hover{background:#275d27}

.blocCoordonnees{ float:left; border:#999 solid 1px; padding:10px; background:#efefef; margin:15px 25px 0 0}
.blocCoordonnees p{ font-size:13px; color:#333; line-height:18px}
.blocCoordonnees a{  color:#333}
.blocCoordonnees span{ color:#006600; font-size:14px}

.planAcces{ float:left;border:#999 solid 1px; margin:15px 0 0 0}

/*--------------------------------< ESPACE PRO ACCUEIL - RECAP COMMANDES >-----------------------------*/


#tabloRecap{ border-top:#999 solid 1px; border-left:#ccc solid 1px; width:745px; margin-bottom:15px}
#tabloRecap td{ border-bottom:#ccc solid 1px; border-right:#ccc solid 1px; height:30px; color:#333; font-size:11px; padding-left:10px}
#tabloRecap th{ height:30px; border-right:#999 solid 1px; border-bottom:#999 solid 1px; background:url(../images/bg_th.gif) repeat-x top left; color:#333; font-size:12px; padding-left:10px}
#tabloRecap a{ color:#006600}

a.btnArchive{ background:#006600; color:#fff; font-size:12px; padding:5px 15px 5px 15px}