/* 
 * Ce template a été réalisé par http://www.scopika.com
 */

/* Ce fichier définit le style visuel pour les différents éléments des pages.
 * Dans l'ordre, vous trouverez les règles qui définissent l'apparence pour:
 * - Eléments HTML en général
 * - Page
 * - Entête
 * - Chemin
 * - Produit petit & grand
 * - Pied de page
 * - Menu général
 * - Signature
 * - Nombre de pages
 * - les styles particuliers pour les pages intérieures
 */


/* Eléments HTML en général
-------------------------------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


body {
	padding: 0;
	margin: 0;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
	background-color: #000000;
	background-image:url(../_images/fondEspacePerso.jpg);
	background-position:center top;
	background-repeat:repeat-x;
	color:#1a262f;
	font-size:12px;
}

h1, h2, h3, h4, h6 {
	color:#1a262f;
	margin: 0;
	padding: 0;
}

h1{
	display:none;
}

h2 {
	font-size:24px;
	padding:8px 0;
}


h3 {
	font-size: 18px;
	margin:0 0 10px 0;
}

h4 {
	font-size: 12px;
}

h6 {
	color:#ffe0b3;
	font-size:11px;
}

.bold {
	font-weight:bold;
}

.normal {
	font-weight:normal;
}


ul, li {
	margin: 0;
	padding:0;
	list-style: none;
}

a, a:visited {
	color: #000;
	text-decoration: underline;
}

a.lireLaSuite, a.lireLaSuite:visited {
	font-size:12px;
	font-weight:bold;
	background-image:url(../_images/flecheViolette.gif);
	background-repeat:no-repeat;
	background-position:left 4px;
	padding:1px 0 1px 6px;
}

a.repondre, a.repondre:visited {
	font-size:12px;
	font-weight:bold;
	background-image:url(../_images/enveloppe.gif);
	background-repeat:no-repeat;
	background-position:left 4px;
	padding:4px 0 4px 25px;
}

 a:hover  {
	text-decoration: none;
}

img {
	border:0;
}

/* Page
-------------------------------------------------------- */

#wrapper {
	width: 995px;
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 0;
	background-image:url(../_images/fondBody.jpg);
	background-position:center 37px;
	background-repeat:no-repeat;	
}

#subwrapper {
	padding: 0;
	width: 995px;
	
}

#contenu {
	width: 995px;
	padding: 0 0 25px 0;
	margin: 5px 0 0 0;
}

#contenu #colonneDeGauche {
	float:left;
	width: 785px;
	padding: 0;
	margin: 0;
}

#contenu #colonneDeDroite {
	float:right;
	width:180px;
	padding: 20px 10px;
	margin: 0;
	background-color:#ffffff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;		
	
}

/* Bloc familles index
-------------------------------------------------------- */

#bloc-familles {
	float:left;
	width: 785px;
	padding: 0;
	margin: 0 0 20px 0;
}
#bloc-familles .famille .image ul, #bloc-familles .famille .image ul li {margin:0; padding:0; list-style-type:none; height:206px;}

#bloc-familles .famille-route,
#bloc-familles .famille-vtt,
#bloc-familles .famille-freeride {
	float:left;
	width: 255px;
	padding: 0;
	margin: 0 10px 0 0;
}

#bloc-familles .famille-freeride {
	margin: 0;
}

#bloc-familles .famille-route h2,
#bloc-familles .famille-vtt h2,
#bloc-familles .famille-freeride h2 {
	float:left;
	width: 255px;
	height:82px;
	padding: 0;
	margin: 0;
	text-indent:-9990px;
	background-image:url(../_images/titresBlocsFamilles.jpg);
	background-position:0 top;
	background-repeat:no-repeat;
}

#bloc-familles .famille-vtt h2 {
	background-position:-265px top;
}

#bloc-familles .famille-freeride h2 {
	background-position:-530px top;
}

#bloc-familles .famille-route ul,
#bloc-familles .famille-vtt ul ,
#bloc-familles .famille-freeride ul,
#bloc-familles .famille-route ul li,
#bloc-familles .famille-vtt ul li,
#bloc-familles .famille-freeride ul li {
	float:left;
	width:255px;
	background-color:#000000;
}

#bloc-familles .famille-route ul li a,
#bloc-familles .famille-vtt ul li a,
#bloc-familles .famille-freeride ul li a {
	display:block;
	height:30px;
	line-height:30px;
	margin: 0 0 1px 0;
	padding: 0 10px;
	color:#FFFFFF;
	text-shadow:1px 1px 0 #757477;
	text-decoration:none;
	text-transform: uppercase;
	background-color:#45c0eb;
	background-image:url(../_images/doubleFlecheBlanche.gif);
	background-position: 230px center;
	background-repeat:no-repeat;
	border-top:solid 1px #FFFFFF;
}


#bloc-familles .famille-route ul li a:hover {
	background-color:#3fa4c9;
	background-position: 235px center;
}

#bloc-familles .famille-vtt ul li a {
	background-color:#ff9933;
}

#bloc-familles .famille-vtt ul li a:hover {
	background-color:#e67d00;
	background-position: 235px center;
}

#bloc-familles .famille-freeride ul li a {
	background-color:#7d9008;
}

#bloc-familles .famille-freeride ul li a:hover {
	background-color:#5a7411;
	background-position: 235px center;
}

#bloc-familles .famille-route .image,
#bloc-familles .famille-vtt .image,
#bloc-familles .famille-freeride .image {
	float:left;
	width: 255px;
	padding: 0;
	margin: 0;
}

#bloc-familles .famille-route .footer,
#bloc-familles .famille-vtt .footer,
#bloc-familles .famille-freeride .footer {
	float:left;
	width: 255px;
	height:20px;
	background-image:url(../_images/titresBlocsFamilles.jpg);
	background-position:left -92px;
}

#bloc-familles .famille-vtt .footer {
	background-position:-265px -92px;
}

#bloc-familles .famille-freeride .footer {
	background-position:-530px -92px;
}

#bloc-familles #link-accessoires {margin-top:10px; float:left}


/* Bloc vidéo index
-------------------------------------------------------- */

#bloc-videos {
	float:left;
	width:765px;
	padding: 10px 10px 0 10px;
	margin: 0 0 20px 0;
	background-color:#ffffff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;		
}

#bloc-videos .lienVideo {
	float:left;
	width:280px;
	padding: 0;
	margin: 0;
}

#bloc-videos .zonePub {
	float:right;
	width:460px;
	padding: 0;
	margin: 0 10px 10px 0;
	background-color:#ffffff;
}

/* Fiche produit
-------------------------------------------------------- */

#fondContenu {
	float:left;
	width:745px;
	padding: 20px;
	margin: 0 0 20px 0;
	background-color:#ffffff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-top:solid 1px #bcc0c3;
}

#fiche-produit {
	float:left;
	width:745px;
	padding: 20px;
	margin: 0 0 20px 0;
	background-color:#ffffff;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-top:solid 1px #bcc0c3;
}

#fiche-produit .toutesLesImages {
	float:left;
	width:486px;
	padding: 0;
	margin: 0 0 20px 0;
	background-color:#ffffff;
}

#fiche-produit .presentation {
	float:right;
	width:245px;
	padding: 0;
	margin: 0 0 20px 0;
}

#fiche-produit .logo {
	float:left;
	width:245px;
	padding: 0;
	margin:0 0 10px 0;
}

#fiche-produit .presentation img {
	border:none;
}

#fiche-produit .chapo {
	font-size:13px;
	font-weight:bold;
	color:#1a262f;
}

#fiche-produit h3 {
	font-size:16px;
	margin:10px 0;
	color:#72797f;
}

#fiche-produit h3 a {
	color:#72797f;
	text-decoration:none;
}

#fiche-produit h3 a:hover {
	text-decoration:underline;
}

#fiche-produit h2 {
	font-size:24px;
}

#fiche-produit .prix {
	font-size:18px;
	font-weight:bold;
	color:#ff0000;
}

#fiche-produit .ajouterAuPanier {
	float:left;
	width:223px;
	padding: 10px;
	margin: 20px 0;
	background-color:#ffffff;
	color:#1a262f;
	font-weight:bold;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border:solid 1px #bcc0c3;
}

#fiche-produit form {
	margin:0 0 10px 0;
}

#fiche-produit form select {
	width:223px;
	font-size:14px;
	color:#1a262f;
	font-weight:bold;
	border:solid 1px #1a262f;
}

#fiche-produit .toutesLesVignettes {
	float:left;
	width:486px;
	margin:0;
}

#fiche-produit .vignettes {
	float:left;
	padding: 2px;
	border:solid 1px #bcc0c3;
	background-color:#dadcde;
	margin:0 2px 20px 2px;
}

#fiche-produit .vignettes img {
	float:left;
	border:solid 1px #bcc0c3;
	background-color:#FFFFFF;
	width:150px;
	height:98px;
}


#fiche-produit .contour-image {
	float:left;
	padding: 2px;
	border:solid 1px #bcc0c3;
	background-color:#dadcde;
	margin:0 0 20px 0;
}

#fiche-produit img {
	float:left;
	border:solid 1px #bcc0c3;
	background-color:#FFFFFF;
}

#dossier img {
	float:none;
	border:solid 0px #bcc0c3;
	background-color:#FFFFFF;
}

#fiche-produit p {
	font-size:11px;
	line-height:18px;
}

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

#bloc-produits {
	float:left;
	width:785px;
	padding: 0 0 20px 0;
	margin: 0 0 20px 0;
	background-color:#ffffff;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
}
#bloc-produits div.description {padding:0 10px; margin: 0 0 10px 0}

#bloc-produits h3 {
	height:63px;
	text-indent:-9990px;
	background-image:url(../_images/titresProduitsIndex.gif);
	background-position:left top;
	background-repeat:no-repeat;	
}

#bloc-produits h3.coupsDeCoeur {
	background-position:-265px top;
}

#bloc-produits h3.nouveautes {
	background-position:right top;
}

#bloc-produits .contenantProduits {
	width:785px;
	padding:20px 0 10px 0;
	background-image:url(../_images/fond-bloc-produits.gif);
	border-top:solid 1px #bcc0c3;
	border-bottom:solid 1px #bcc0c3;
}

#bloc-produits ul {
	float:left;
	width:261px;
	border-right:solid 1px #bcc0c3;
}

#bloc-produits ul.nouveautes {
	border:none;
}

#bloc-produits ul.pageRubrique {
	width:785px;
	padding:20px 0 10px 0;
	background-image:url(../_images/fond-bloc-produits.gif);
	border-top:solid 1px #bcc0c3;
	border-bottom:solid 1px #bcc0c3;
}

#bloc-produits ul li {
	float:left;
	width:250px;
	margin:0 5px 10px 5px;
	padding:0 0 10px 0;
	border-bottom:dotted 1px #a0a5a9;
	min-height:120px; height:auto !important; height:120px;

}
* html #bloc-produits ul li {
	width:250px;
	margin:0 0px 10px 5px;
}

#bloc-produits .contour-image {
	float:left;
	padding: 2px;
	border:solid 1px #bcc0c3;
	background-color:#dadcde;
}

#bloc-produits img {
	float:left;
	border:solid 1px #bcc0c3;
	background-color:#FFFFFF;
}

#bloc-produits .commentaire-produit {
	float:right;
	width:135px;
	padding: 0;
	font-size:11px;
	font-weight:bold;
	color:#72797f;
}

#bloc-produits .commentaire-produit .prixNormal {
	font-size:18px;
	line-height:30px;
	color:#000000;
	font-weight:bold;
}

#bloc-produits .commentaire-produit .prixPromo {
	font-size:18px;
	line-height:30px;
	color:#ff0000;
	font-weight:bold;
}

#bloc-produits .commentaire-produit .prixBarre {
	line-height:30px;
	color:#ff0000;
	font-weight:bold;
	text-decoration: line-through;
}
.prixBarre {
	line-height:30px;
	color:#ff0000;
	font-weight:bold;
	text-decoration: line-through;
}

#bloc-produits .commentaire-produit a {
	color:#72797f;
	text-decoration:none;
}

#bloc-produits .commentaire-produit a:hover {
	text-decoration:underline;
}

#bloc-produits .commentaire-produit a.route {
	color:#0098d4;
}

#bloc-produits .commentaire-produit a.VTT {
	color:#f08827;
}

#bloc-produits .commentaire-produit a.freeride {
	color:#5bac26;
}

#bloc-produits .commentaire-produit a.savoirPlus {
	color:#4c575f;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	padding:0 0 0 10px;
	background-image:url(../_images/puce-en-savoir-plus.gif);
	background-position:left 2px;
	background-repeat:no-repeat;
}

#bloc-produits  .commentaire-produit h4 {
	line-height:normal;
	color:#000000;
	font-size:14px;
}

#bloc-produits  .commentaire-produit h4 a {
	color:#000000;
	text-decoration:none;
}

#bloc-produits .pagination {
	float:left;
	width:770px;
	padding: 10px 5px 10px 10px;
	margin: 0;
	color:#000000;
	font-weight:bold;
	text-align:right;
	background-color:#ffffff;
}

#bloc-produits .pagination a {
	color:#bcc0c3;
	text-decoration:none;
	padding:2px 5px;
}

#bloc-produits .pagination a.selection {
	color:#000000;
	background-color:#dadcde;
}

#bloc-produits .pagination a:hover {
	color:#757477;
	text-decoration:underline;
}

/* Bloc infos vélo
-------------------------------------------------------- */

#bloc-infos-velo {
	float:left;
	width:385px;
	padding: 53px 0 10px 0;
	margin: 0;
	background-color:#ffffff;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	background-image:url(../_images/titre-fil-infos-velo.gif);
	background-repeat:no-repeat;
}

#bloc-infos-velo ul {
	border-top:solid 1px #bcc0c3;
	float:left;
	width:385px;
}
#bloc-infos-velo ul li {display:block; float:none; width:100%}

#bloc-infos-velo ul li a {
	display:block;
	color:#1a262f;
	font-size:11px;
	text-decoration:none;
	border-bottom:solid 1px #bcc0c3;
	padding:3px 5px;
}

#bloc-infos-velo ul li a.derniereLigne {
	font-weight:bold;
	padding:5px 5px 7px 5px;
	text-decoration:underline;
}

#bloc-infos-velo ul li a:hover {
	background-color:#dadcde;
}



#bloc-infos-velo h3 {
	display:none;
}

/* Bloc toutes nos marques
-------------------------------------------------------- */

#bloc-toutes-nos-marques {
	float:right;
	width:385px;
	padding: 53px 0 10px 0;
	margin: 0;
	background-color:#ffffff;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	background-image:url(../_images/titre-toutes-nos-marques.gif);
	background-repeat:no-repeat;
}

#bloc-toutes-nos-marques h3 {
	display:none;
}

/* Titre rubriques
-------------------------------------------------------- */

#titre-rubrique {
	float:left;
	width:785px;
	padding:0;
	margin: 0;
}

#titre-rubrique ul {
	float:left;
	width:785px;
	padding: 0;
	margin: 0;
}

#titre-rubrique ul li {
	float:left;
	padding: 0;
	margin: 0;
}

#titre-rubrique ul li a {
	float:left;
	width:265px;
	height:82px;
	text-indent:-9990px;
	background-image:url(../_images/titresRubriques.gif);
	background-repeat:no-repeat;
}

#titre-rubrique ul li a.vtt {
	background-position:-265px top;
}

#titre-rubrique ul li a.freeride {
	width:255px;
	background-position:-530px top;
}

#titre-rubrique ul li a.route:hover, #titre-rubrique ul li a.route.selection {
	background-position:0 -82px;
}

#titre-rubrique ul li a.vtt:hover, #titre-rubrique ul li a.vtt.selection {
	background-position:-265px -82px;
}

#titre-rubrique ul li a.freeride:hover, #titre-rubrique ul li a.freeride.selection {
	width:255px;
	background-position:-530px -82px;
}

/* Titre route
-------------------------------------------------------- */
.titre-ariane {
	float:left;
	width:785px;
	min-height:100px;
	height:auto !important;
	height:100px;

	padding:0 0 10px 0;
	margin: 0;
	background:#fff
}
.titre-ariane h2 {padding:0 10px}
	
#titre-route {
	background-image:url(../_images/fondTitreRoute.gif);
	padding:0;
}

#titre-route h2 {
	display:none;
}

#titre-route h3 {
	float:left;
	font-size:30px;
	line-height:64px;
	font-weight:normal;
	color:#0098d4;
	padding:0 0 0 145px;
}

/* Titre VTT
-------------------------------------------------------- */

#titre-vtt {
	background-image:url(../_images/fondTitreVTT.gif);
	padding:0;
}

#titre-vtt h2 {
	display:none;
}

#titre-vtt h3 {
	float:left;
	font-size:30px;
	line-height:64px;
	font-weight:normal;
	color:#f08827;
	padding:0 0 0 100px;
}

/* Titre Freeride
-------------------------------------------------------- */

#titre-freeride {
	background-image:url(../_images/fondTitreFreeride.gif);
	padding:0;
}

#titre-freeride h2 {
	display:none;
}

#titre-freeride h3 {
	float:left;
	font-size:30px;
	line-height:64px;
	font-weight:normal;
	color:#a1a93f;
	padding:0 0 0 220px;
}



/* Colonne de droite
-------------------------------------------------------- */

#contenu #colonneDeDroite .image {
	float:left;
	width:180px;
	padding: 0;
	margin: 0 0 15px 0;
}

#contenu #colonneDeDroite .inscriptionNewsletter {
	float:left;
	width:180px;
	padding: 44px 0 10px 0;
	margin: 0;
	background-color:#ffffff;
	border:solid 1px #1a262f;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background-image:url(../_images/titreNewsletter.gif);
	background-repeat:no-repeat;
}

#contenu #colonneDeDroite .inscriptionNewsletter h3 {
	display:none;
}
	

#contenu #colonneDeDroite .inscriptionNewsletter p {
	float:left;
	width:160px;
	font-size:11px;
	font-weight:bold;
	padding: 0 10px 10px 10px;
	margin:0;
}

#contenu #colonneDeDroite .inscriptionNewsletter form {
	float:left;
	padding:0;
	margin:7px 10px 0 10px;
}

#contenu #colonneDeDroite .inscriptionNewsletter form input {
	float:left;
	width:114px;
	height:24px;
	line-height:22px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	padding:0 5px;
	margin:0 5px 0 0;
	border:none;
	background-color:transparent;
	background-image:url(../_images/fondInputEspacePerso.gif);
	background-position:left center;
	background-repeat:no-repeat;
}

#contenu #colonneDeDroite .inscriptionNewsletter form a.bouton,
#contenu #colonneDeDroite .inscriptionNewsletter form button.bouton {
	float:left;
    cursor:pointer; 
    border:none;
	background:none;
	background-image:url(../_images/fondBTOK.gif);
	width:24px;
	height:24px;
	color:#1a262f;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	text-indent:-9990px;
	margin:0
}

/* Espace perso
-------------------------------------------------------- */

#espacePerso {
	height:37px;
}

#espacePerso h3 {
	float:left;
	font-size:12px;
	color:#1a262f;
	line-height:37px;
	text-transform: uppercase;
	background-image:url(../_gfx/pictoCompte.gif);
	background-position:left center;
	background-repeat:no-repeat;
	background-position:left center;
	padding:0 0 0 25px;
}

#espacePerso h3 a {
	color:#FF0000;
	text-transform:none;
}


#espacePerso .menuMonCompte {
	float:left;
	margin:10px 10px 0 10px;
}

#espacePerso form {
	float:left;
	padding:0;
	margin:7px 10px 0 10px;
}

#espacePerso form input {
	float:left;
	width:114px;
	height:24px;
	line-height:22px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	padding:0 5px;
	margin:0 5px 0 0;
	border:none;
	background-color:transparent;
	background-image:url(../_images/fondInputEspacePerso.gif);
	background-position:left center;
	background-repeat:no-repeat;
}

#espacePerso form a.bouton,
#espacePerso form button.bouton {
	float:left;
    cursor:pointer; 
    border:none;
	background:none;
	background-image:url(../_images/fondBTOK.gif);
	width:24px;
	height:24px;
	color:#1a262f;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	text-indent:-9990px;
}

#espacePerso .achats {
	float:left;
	height:30px;
	padding:0 0 0 10px;
	border-left:dotted 1px #72797f;
}

#espacePerso .achats h3 {
	background-image:url(../_gfx/pictoAchats.gif);
	padding:0 0 0 30px;
	
}


/* Entête
-------------------------------------------------------- */

#entete {
	width: 980px;
	margin: 0;
	padding: 0;
	background-image:url(../_images/logo.png);
	background-repeat:no-repeat;
	background-position:center top;
}


#entete #retour {
	width: 320px;
	height:99px;
	margin: 0 0 0 330px;
	padding: 0;
}

#entete #retour a {
	float:left;
	width: 320px;
	height:99px;
}



/*#menu {
	width: 755px;
	height:50px;
	margin: 19px 0 0 0;
	padding: 0 0 0 240px;
	background-image:url(../_images/fondMenu.jpg);
	background-color:#FF0000
}*/


/* Contenu en page intérieure
-------------------------------------------------------- */

.contenuPageInterieure {
	float:left;
	width: 810px;
	line-height:18px;
	margin: 0;
	padding: 0;
}

.contenuPageInterieure img {
	float:left;
	padding: 5px;
	margin:15px 15px 15px 0;
	border:solid 1px #9a9b9d;
	background-color:#FFFFFF;
}


.contenuPageInterieure h3 {
	font-size:14px;
	color:#ff8c00;
}

.contenuPageInterieure li {
	background-image:url(../_images/flecheNoire.gif);
	background-repeat:no-repeat;
	background-position:left 4px;
	padding:0 0 0 8px;
}

.contenuPageInterieure p.tresImportant {
	float:left;
	padding: 10px;
	border:solid 1px #ffcf8e;
	background-color:#ffedd5;
}

.contenuPageInterieure table, .contenuPageInterieure table td {
	border:solid 1px #ff8c00;
}



/* Chemin
-------------------------------------------------------- */

.chemin {
	color:#626164;
	font-weight:bold;
	line-height:24px;
	height:24px;
	margin: 0;
	padding: 0 0 20px 20px;
	background-image:url(../_images/puce-en-savoir-plus.gif);
	background-repeat:no-repeat;
	background-position:10px 8px;
}

.chemin a {
	color:#626164;
	text-decoration:none;
}

.chemin a:hover {
	text-decoration:underline;
}



/* Pied de page
-------------------------------------------------------- */

#footer {
	float: left;
	width: 980px;
	color:#bcc0c3;
	font-size: 11px;
	line-height:14px;
	font-weight:normal;
	padding: 10px 0;
	margin:10px;
	border-top:dashed 1px #72797f;
	}
	
#footer ul {
	float: left;
	width: 235px;
	padding: 10px 10px 10px 0;
	margin:0;
	}
* html #footer ul#mentions, * html #footer ul#mentions ul{width:210px}

#footer a {
	color:#bcc0c3;
	text-decoration:none;
	}
	
#footer a:hover {
	text-decoration:underline;
	}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {
	width:755px;
	padding-left:240px;
	height:50px;
	position:relative;
	z-index:100;
	background:url(../_images/fondMenu2.jpg);
	background-color:#FF0000;
	float:left
}

/* hack to correct IE5.5 faulty box model */
* html .menu {width:941px; w\idth:940px; padding-left:40px}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;/*width:149px;*/position:relative; padding:5px 0}
.menu ul li ul li {padding:0; border-bottom:1px solid #8D9195}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none;  /*width:138px;*/ height:40px; padding-left:10px; line-height:39px; font-weight:bold;}
.menu a {color:#1A262F;cursor:pointer;display:block;font-weight:bold;padding:0 10px;text-decoration:none;text-shadow:1px 1px 0 #B5B9BC;text-transform:uppercase;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:140px; w\idth:140px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden; position:absolute;height:0;top:45px;left:0; width:149px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:45px;t\op:46px;}

/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#BCC0C3; color:#1A262F; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;text-shadow:none;text-transform:none;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#8D9195;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#8D9195;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}



/* formulaire
-------------------- */

#contenu form {
	padding:0;
	margin:0 0 20px 0;
}

#contenu form p {
	margin: 0;
	padding: 4px 0;
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	font-size: 12px;
	border-bottom:1px solid #dadcde;
	clear:both;
	float:left;
	width:100%;
}

#contenu form p.derniereLigne {
	border:none;
}

#contenu form p label {
	color:#1a262f;
	float: left;
	width: 290px;
	padding:0 10px 0 0;
	margin: 0;
	line-height:24px;
}

#contenu form p label.codeDeReduction {
	width: 180px;
}

#contenu form p label.petit {
	width: 80px;
}

#contenu form p input, #contenu form p select, #contenu form p textarea {
	float:left;
	margin: 0;
	width: 190px;
	padding: 3px;
	border:solid 1px #a0a5a9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#4c575f;
	font-weight:bold;
	background-color:#ebebec;
}

#contenu form p input.codeDeReduction {
	width: 50px;
	background-color:#fff;
	padding: 4px;
}

#contenu form p select {
	width: 198px;
}

#contenu form p textarea {
	width: 300px;
}

#contenu form p input.radio, #contenu form p input.checkBox {
	float:left;
	margin: 5px 0;
	width: 20px;
	padding: 0;
	background-color:transparent;
	border: none;
}
#contenu form p .labelRadio, #contenu form p .labelCheckBox {
	float:left;
	margin: 5px 10px 0 0;
	padding: 0;
	background-color:transparent;
	border: none;
	font-weight:bold;
}
	
#contenu form button.bouton,
#contenu form button.boutonSimple,
#contenu form button.boutonMemeLigneQuInput { 
    display:-moz-inline-box; 
    display:inline-block; 
    margin:0 0 0 300px; 
    padding:0; 
    white-space:nowrap; 
    text-align:center; 
    vertical-align:middle; 
    cursor:pointer; 
	border:none;
    background:none;
	font-size:14px;
	font-weight:bold;
}

#contenu form button.boutonMemeLigneQuInput { 
    margin:0 0 0 10px; 
}
	
#contenu form button.bouton span,
#contenu form button.boutonMemeLigneQuInput span {
	font-family:Arial, Helvetica, sans-serif;
    position:relative; 
    float:left; 
    padding:0 0 0 15px;        /* Largeur du côté gauche */ 
	margin:0;
    vertical-align:middle;
	background-image:url(../_gfx/fondBTQueFaire.gif);
	background-position:0 0;
}

#contenu form button.bouton span span,
#contenu form button.boutonMemeLigneQuInput span span {
    padding:0 15px 0 0;/* Largeur du côté droit */ 
	color:#FFF;
	height:32px;
	line-height:32px; /* Alignement vertical du texte */ 
	border: none;
	background-position:right 0;
}


#contenu form button.boutonSimple { 
    margin:0 0 0 5px; 
}
	
#contenu form button.boutonSimple span {
	font-family:Arial, Helvetica, sans-serif;
    position:relative; 
    float:left; 
    padding:0;        /* Largeur du côté gauche */ 
	margin:0;
    vertical-align:middle;
}

#contenu form button.boutonSimple span span {
    padding:0;/* Largeur du côté droit */ 
	color:#4d565e;
	height:24px;
	line-height:24px; /* Alignement vertical du texte */ 
	border: none;
}

.obligatoire {
	font-size: 12px;
	color: #FF0000;
	clear:both;
	margin:10px 0;
}

/* Etapes de commande
-------------------------------------------------------- */

#etapesDeCommande {
	float: left;
	width:745px;
	height:24px;
	color: #515053;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 25px 0;
	padding:0;
	background-color:#ebebec;
}

#etapesDeCommande ul {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	width:745px;
}

#etapesDeCommande ul li {
	color:#bcc0c3;
	width:186px;
	height:24px;
	line-height:24px;
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	float:left;
}

#etapesDeCommande ul li.selection {
	color:#ebebec;
	background-color:#4c575f;
}

#etapesDeCommande ul li span {
	float:left;
	width:24px;
	height:24px;
	color:#ebebec;
	font-size:18px;
	line-height:24px;
	text-align:center;
	margin:0 3px 0 0;
	background-color:#bcc0c3;
}

#etapesDeCommande ul li span.chiffreSelection {
	color:#ebebec;
	background-color:#4c575f;
	border-right:solid 1px #ebebec;
}

/* Tableaux
-------------------------------------------------------- */

#contenu table {
	padding:0;
	margin:0;
	color:#4c575f;
	background-color:#ebebec;
	border:solid 1px #bcc0c3;
	border-bottom:none;
}

#contenu table a {
	color:#FF0000;
	text-decoration:none;
	background-image:url(../_gfx/puceTableau.gif);
	background-repeat:no-repeat;
	background-position:left 4px;
	padding:0 0 0 8px;
}

#contenu table a.plus {
	background-image:url(../_gfx/pucePlus.gif);
}


#contenu table a:hover {
	text-decoration:underline;
}

#contenu table select {
	width:50px;
}


#contenu table img {
	border:solid 1px #bcc0c3;
	padding:2px;
}

#contenu table th {
	font-size:14px;
	font-weight: bold;
	background-color: #bcc0c3;
	border-bottom:solid 1px #bcc0c3;
}

#contenu table td {
	border:none;
	border-bottom:solid 1px #bcc0c3;
	font-weight: normal;
	background-color: transparent;
}

/*#contenu table td.ligne {
	font-weight: bold;
	background-color: transparent;
	border-bottom:solid 1px #d8d9da;
}*/

#contenu table th.total {
	color:#FFF;
	background-color: #ff0000;
}

#contenu table th.derniereLigne {
	background-color: #a0a5a9;
}

/* Liens internes au site
-------------------------------------------------------- */

.queFaire {
	margin:20px 0 0 0;
	padding:0;
	width:100%;
	float:left;
	text-align:right;
}

.queFaire a.bouton, 
.queFaire button.bouton { 
    display:-moz-inline-box; 
    display:inline-block; 
    margin:10px 0 0 0; 
    padding:0;
	font-size:14px;
	font-weight:bold;
	white-space:nowrap; 
    text-align:center; 
    vertical-align:middle; 
    cursor:pointer; 
    border:0; 
    background:none; 
	text-decoration:none;
} 
.queFaire a.bouton span, 
.queFaire button.bouton span { 
    position:relative; 
    float:left; 
    padding:0 0 0 15px; 
    vertical-align:middle;
	background-image:url(../_gfx/fondBTQueFaire.gif);
	background-position:0 0;
} 

.queFaire a.bouton span span, 
.queFaire button.bouton span span {
	color:#fff;
	text-decoration:none;
    height:32px; 
    padding:0; 
    padding:0 15px 0 0; 
    line-height:30px;
	background-position:right top; 
} 
 
.queFaire a.bouton:hover span, .queFaire a.bouton:hover span span, 
.queFaire button.bouton:hover span, .queFaire button.bouton:hover span span { 
    background-color:#00529a;
	text-decoration:underline;
} 

/* Bloc "adresse" & "adresse de facturation" 
-------------------------------------------------------- */

.blocAdresse {
	float: left;
	margin: 0 0 20px 0;
	width:100%;
}

.blocAdresse h4 {
	color:#4c575f;
}

/* Bloc "Mode de livraison" 
-------------------------------------------------------- */

.choixDeLaLivraison, .choixDuReglement {
	float: left;
	width:745px;
	margin: 0;
	padding:0;
}

.choixDeLaLivraison form {
	float:left;
	padding:0;
	margin:0;
}

.choixDeLaLivraison form input.radio {
	float:left;
	margin: 5px 0;
	width: 20px;
	padding: 0;
}
.choixDeLaLivraison form .labelRadio {
	float:left;
	margin: 5px 10px 0 0;
	padding: 0;
	font-weight:bold;
}