/* Stylesheet Designed by Anagramme 2007 */

body{margin: 0; padding: 10px 0 0 0; font-family: Arial, Helvetica, sans-serif; color: #666; background: #666;}
form{margin: 0; padding: 0;}

/* Centre Page ********** */
#wrap{width: 800px; margin: 0 auto; padding: 0; text-align: center;}


/* *************************************************************
HEADER
************************************************************* */
#header{ float: left; background: url(../images/bg/bg_header.gif) 0 130px no-repeat; width: 800px; height: 223px; text-align: left;}
#header #mainPic { float: left;}
#header #mainPic img{ float: left;}
		 	
#nav_1,#nav_2{ float: left; margin: 7px 0 0 20px; width: 600px; display: inline; height: 25px;}
#nav_1 a,#nav_2 a{ margin: 0 3px 0 0; float: left; width: 95px; height: 23px;}

/******** FRENCH ****/
#nav_1 a.accueil{ background: url(../images/navigation/nav_accueil_1.gif) 0 0 no-repeat;}
#nav_1 a.societe{ background: url(../images/navigation/nav_societe_1.gif) 0 0 no-repeat;}
#nav_1 a.concept{ background: url(../images/navigation/nav_leConcept_1.gif) 0 0 no-repeat;}
#nav_1 a.produits{ background: url(../images/navigation/nav_produits_1.gif) 0 0 no-repeat;}
#nav_1 a.faq{ background: url(../images/navigation/nav_faq.gif) 0 0 no-repeat;}
#nav_1 a.contact{ background: url(../images/navigation/nav_contact.gif) 0 0 no-repeat;}

#nav_1 a.accueil:hover, #nav_1 a.accueil-active{ background: url(../images/navigation/nav_accueil_1.gif) 0 -23px no-repeat;}
#nav_1 a.societe:hover, #nav_1 a.societe-active{ background: url(../images/navigation/nav_societe_1.gif) 0 -23px no-repeat;}
#nav_1 a.concept:hover, #nav_1 a.concept-active{ background: url(../images/navigation/nav_leConcept_1.gif) 0 -23px no-repeat;}
#nav_1 a.produits:hover, #nav_1 a.produits-active{ background: url(../images/navigation/nav_produits_1.gif) 0 -23px no-repeat;}
#nav_1 a.faq:hover, #nav_1 a.faq-active{ background: url(../images/navigation/nav_faq.gif) 0 -23px no-repeat;}
#nav_1 a.contact:hover, #nav_1 a.contact-active{ background: url(../images/navigation/nav_contact.gif) 0 -23px no-repeat;}

/******** ENGLISH ****/
#nav_2 a.accueil{ background: url(../images/navigation/nav_accueil_2.gif) 0 0 no-repeat;}
#nav_2 a.societe{ background: url(../images/navigation/nav_societe_2.gif) 0 0 no-repeat;}
#nav_2 a.concept{ background: url(../images/navigation/nav_leConcept_2.gif) 0 0 no-repeat;}
#nav_2 a.produits{ background: url(../images/navigation/nav_produits_2.gif) 0 0 no-repeat;}
#nav_2 a.faq{ background: url(../images/navigation/nav_faq.gif) 0 0 no-repeat;}
#nav_2 a.contact{ background: url(../images/navigation/nav_contact.gif) 0 0 no-repeat;}

#nav_2 a.accueil:hover, #nav_2 a.accueil-active{ background: url(../images/navigation/nav_accueil_2.gif) 0 -23px no-repeat;}
#nav_2 a.societe:hover, #nav_2 a.societe-active{ background: url(../images/navigation/nav_societe_2.gif) 0 -23px no-repeat;}
#nav_2 a.concept:hover, #nav_2 a.concept-active{ background: url(../images/navigation/nav_leConcept_2.gif) 0 -23px no-repeat;}
#nav_2 a.produits:hover, #nav_2 a.produits-active{ background: url(../images/navigation/nav_produits_2.gif) 0 -23px no-repeat;}
#nav_2 a.faq:hover, #nav_2 a.faq-active{ background: url(../images/navigation/nav_faq.gif) 0 -23px no-repeat;}
#nav_2 a.contact:hover, #nav_2 a.contact-active{ background: url(../images/navigation/nav_contact.gif) 0 -23px no-repeat;}


#flags{ float: right; margin: 0 20px 0 0; width: 100px; display: inline;}
#flags img{ float: right; margin: 0 0 0 10px;}
#subNav{ float: left; margin: 3px 0 0 0; clear: both; width: 800px;}
#subNav ul{ float: left; list-style: none; margin: 3px 0 0 10px; padding: 0; display: inline; width: 790px;}
#subNav li{ float: left; padding: 0 10px; margin: 0; font-size: 70%; color: #fff; line-height: 100%; text-transform:capitalize;border-right: 1px solid #FFCC00;}
#subNav li a{ color: #FFCC00; text-decoration: none; }
#subNav li a:hover{ color: #fff; text-decoration: underline;}
#subNav li.monEspace {border: none;}
#subNav .panier{ float: right; border-right: none; margin: 0 20px 0 0; display: inline; padding: 0 0 0 22px; background: url(../images/icons/icon_basket.gif) 0 0 no-repeat; line-height: 130%;}
#subNav .panier a{ color: #fff; text-decoration: none; border-right: none; font-weight: bold;}
#subNav .panier a:hover{ color: #FFCC00; text-decoration: underline;}
#subNav .noBorder{ border: none;}
#subNav .administer{ border-left: 1px solid #FFCC00; border-right: none;}


/* *************************************************************
MAIN CONTENT AREAS
************************************************************* */
#contentWrap {width: 800px; float: left; text-align: left; margin: 0 0 0 0; padding: 0; background: #fff url(../images/bg/bg_main-body.gif) 0 0 repeat-y;}

/* HALF WIDTH ********** */
#mainContent {width: 400px; float: left; text-align: left; margin: 10px 0 0 30px; padding: 0; display: inline;}

/* WIDE FULL PAGE ********** */
#mainContent2{width: 780px; float: left; text-align: left; margin: 10px 0 0 10px; padding: 0; display: inline;}

#mainContent h1 { font-size: 160%; color: #FF9900; font-weight: normal; padding: 0 0 10px 0; margin: 0 0 20px 0; float: left; width: 100%; letter-spacing: -0.05em; background: url(../images/bg/title_lines.gif) bottom left repeat-x; font-style: italic;}
#mainContent h1 a{ float: right; font-size: 40%; font-style: normal; letter-spacing: normal; color: #000; background:url(../images/icons/icon_arrow-back.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin: 10px 0 0 0;}
#mainContent h1 a:hover{ color: #FF6600;}
#mainContent h2 { font-size: 130%; color: #FF9900; font-weight: normal; padding: 0; margin: 0 0 10px 0; clear: both;}
#mainContent h3 { font-size: 110%; color: #000; font-weight: normal; padding: 0; margin: 10px 0 10px 0; width:380px; float: left; clear: both;}
#mainContent h4 { font-size: 100%; color: #FF9900; font-weight: bold; padding: 0; margin: 10px 0 10px 0; width:380px; float: left; clear: both;}

#mainContent p{ color: #666; font-size: 75%; margin: 0 0 10px 0; padding: 0; width: 100%; clear: both; line-height: 180%;}
#mainContent p a{ color: #000;}
#mainContent p a:hover{ color: #FF6600;}

#mainContent p span{ color: #000; font-weight: bold;}

#mainContent dl{ float: left; width: 650px; padding: 0; margin: 0 0 20px 0;}
#mainContent dt, #mainContent dd{ float: left; padding: 0; margin: 0 0 0 0; font-size: 75%; line-height: 170%;}
#mainContent dt {width: 120px; clear: both; color: #000;}
#mainContent dd {width: 350px; color: #666;}

#mainContent .separation-thin{ width: 680px; float: left; margin: 0; padding: 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #E5E5E5; height: 1px; font-size: 0; clear: both; line-height: 0;}

.image{ float: left;}

#mainContent ul{ float: left; clear: both; list-style: none; width: 350px; margin: 0 0 30px 10px; padding: 0;}
#mainContent li{ background: url(../images/icons/icon_bullet-square.gif) 0 9px no-repeat; padding: 0 0 0 20px; font-size: 75%; line-height: 200%;}


/* FLASH DEMO ********** */
/* #demo{ width: 780px; float: left; text-align: left; margin: -7px 0 0 5px; padding: 0; position: relative;} */
#demo{ width: 800px; float: left; text-align: left; margin: -12px 0 0 0; padding: 0; position: relative; display: inline;}



/* *************************************************************
CONTACT PAGE
************************************************************* */
#contact form { clear: both; margin: 10px 0 0 0; float: left; width: 400px;}
#contact form p{width: 400px; line-height: 200%; margin: 0; float: left;}
#contact legend{ color: #3399FF; font-size: 120%; font-weight: normal; padding: 0 10px 10px 10px; margin: 0;}
#contact label{ width: 155px; float: left;}
#contact .submit{ margin: 0 0 10px 0;}
#contact .reset{ margin: 10px 10px 10px 0;}
#contact p.footnote{ font-size: 55%; color: #999999; margin: 20px 0 0 0;}
#contact .text { width: 235px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#contact form textarea { font: 110% Arial, Helvetica, sans-serif; border:1px solid #CCCCCC; width: 238px; height: 100px;}
#contact td{ border:none;}
#contact tr{ border:none;}


/* *************************************************************
RESELLERS PAGE
************************************************************* */
#mainContent #resellers form { clear: both; margin: 10px 0 0 0; float: left; width: 100%; padding: 0;}
#mainContent #resellers form p{padding:0; line-height: 200%; margin: 0; float: left; width: 100%;}
#mainContent #resellers legend{ width: auto; color: #3399FF; font-size: 120%; font-weight: normal; padding: 0 10px 10px 10px; margin: 0; float: left;}
#mainContent #resellers fieldset{ width: 720px; color: #3399FF; border: 1px solid #ccc; float: left; clear: both; margin: 0 0 20px 0; padding: 0 10px 10px 10px; display: inline;}
#mainContent #resellers label{ width: 155px; float: left;}
#mainContent #resellers .submit{ margin: 0 0 10px 0;}
#mainContent #resellers .reset{ margin: 10px 10px 10px 0;}
#mainContent #resellers p.footnote{ font-size: 55%; color: #999999; margin: 20px 0 0 0;}
#mainContent #resellers .text { width: 556px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#mainContent #resellers .textTva { width: 205px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#mainContent #resellers .textTable { width: 100px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#mainContent #resellers .smallText { width: 175px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#mainContent #resellers .banque { width: 60px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#mainContent #resellers .numeroBanque { width: 100px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#mainContent #resellers form textarea { font: 110% Arial, Helvetica, sans-serif; border:1px solid #CCCCCC; width: 238px; height: 100px;}
#mainContent #resellers td{ border:none;}
#mainContent #resellers tr{ border:none;}


/* *************************************************************
RESELLERS EMAIL PAGE
************************************************************* */
#resellers form { clear: both; margin: 10px 0 0 0; float: left; width: 740px;}
#resellers form p{width: 600px; line-height: 200%; margin: 0; float: left;}
#resellers legend{ color: #3399FF; font-size: 14px; font-weight: normal; padding: 0 10px 10px 10px; margin: 0;}
#resellers label{ width: 155px; float: left;}
#resellers .submit{ margin: 0 0 10px 0;}
#resellers .reset{ margin: 10px 10px 10px 0;}
#resellers p{ color: #666; font-size: 11px; margin: 0 0 10px 0; padding: 0; width: 100%; clear: both; line-height: 180%;}
#resellers p.footnote{ font-size: 10px; color: #999999; margin: 20px 0 0 0;}
#resellers .text { width: 200px; font-size: 11px; padding: 2px; border:1px solid #CCCCCC;}
#resellers .textTva { width: 100px; font-size: 11px; padding: 2px; border:1px solid #CCCCCC;}
#resellers .textTable { width: 100px; font-size: 11px; padding: 2px; border:1px solid #CCCCCC;}
#resellers .smallText { width: 175px; font-size: 11px; padding: 2px; border:1px solid #CCCCCC;}
#resellers .banque { width: 60px; font-size: 11px; padding: 2px; border:1px solid #CCCCCC;}
#resellers .numeroBanque { width: 100px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#resellers form textarea { font: 110% Arial, Helvetica, sans-serif; border:1px solid #CCCCCC; width: 238px; height: 100px;}
#resellers td{ border:none;}
#resellers tr{ border:none;}
#resellers th {font-weight: bold; height: 3em; background: #fff url(../images/bg/th_bg.jpg) 0 0 repeat-x; padding: 0 5px 0 5px; font-size: 11px;}
#resellers td{ color: #000; padding: 5px; border: 1px solid #ccc;font-size: 11px;}
#resellers tr a{ color: #CC6600; text-decoration: underline;}
#resellers tr a:hover{ color: #FF9428; text-decoration: underline;}


/* *************************************************************
PRODUCT LISTING + PRODUCT DETAIL
************************************************************* */
#mainContent2 h1{ margin: 0 0 10px 20px; float: left; width: 600px; display: inline;}
#mainContent2 p{ margin: 0 0 0 20px; clear: both; font-size: 75%; line-height: 160%; float: left; width: 600px; display: inline;}

/* Specific to the Product Listing Page ********** */
.productListing{ width: 740px; display: inline; margin: 20px 0 0 15px; padding: 20px 0 0 0; float: left; border-top: 1px dotted #ccc; clear: both;}
.productListing .productImage{ float: left; width: 200px; margin: 0 20px 10px 0; display: inline; background: #fff;}
.productListing .productImage img{ border: 1px solid #ccc; padding: 2px; float: left;}
.productListing .productInfo{ float: left; width: 510px;}
#mainContent2 .productListing h2{ color: #FF9900; width: 510px; font-weight: bold; margin: 0 0 10px 0; padding: 0; font-size: 110%; float: left;}
#mainContent2 .productListing h3{ color: #000; width: 510px; font-weight: bold; margin: 0 0 10px 0; padding: 0; font-size: 100%; float: left;}
#mainContent2 .productListing h2 a{color: #FF9900;}
#mainContent2 .productListing h2 a:hover{color: #000;}
#mainContent2 .productListing p{ color: #666; font-size: 75%; float: left; margin: 0 0 10px 0; text-align: justify; padding: 0; width: 510px; line-height: 180%;}

/*.productListing .productImage{ float: left; width: 200px; margin: 0 0 0 20px; display: inline;}
.productListing .productInfo {width: 360px; display: inline; margin: 0 0 0 20px; padding: 0;float: left;}*/

/* Specific to the Product Detail Page ********** */
.productDetail{ width: 360px; display: inline; margin: 0 0 0 20px; padding: 0; float: left;}
#mainContent2 .productDetail p{ color: #666; font-size: 75%; margin: 0 0 15px 0; text-align:justify; padding: 0; width: 100%; line-height: 160%;}
.productImage{ float: left; width: 355px; margin: 0 0 10px 20px; display: inline;}
.productImage .mainPic{ border: 1px solid #ccc; padding: 0; float: left; margin: 0 0 5px 0; clear: both;}
.productImage .thumb{ width: 80px; height: 80px; float: left; margin: 0 3px; padding: 0; border: 1px solid #ccc;}
.productDetail .productInfo {width: 360px; display: inline; padding: 0 0 20px 0; margin-bottom: 20px; float: left; }
#mainContent2 .productDetail .productInfo form{ float: left; width: 360px; clear: both; margin: 0 0 20px 0;}

#mainContent2 .productDetail .productInfo .back{ background: url(../images/icons/icon_backListing.gif) 0 5px no-repeat; padding: 0px 0 5px 10px; color: #999; text-transform: uppercase; display: inline; font-size: 60%;}
#mainContent2 .productDetail .productInfo .back a{ color: #999;}
#mainContent2 .productDetail .productInfo .back a:hover{ color: #FF6600;}

/* Used on both the Product Listing + Detail Pages ********** */
.productInfo h2{ color: #FF9900; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 100%; float: left; clear: both;}
.productInfo h3{ color: #000; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 80%; float: left; font-weight: normal; clear: both;}
.productInfo h4{ color: #000; margin: 0 0 10px 0; padding: 0; font-size: 100%; float: left; font-weight: bold; width: 100%; clear: both;}
.productInfo h4 span{ text-decoration: line-through; color: #999999;}
.productInfo h5{ color: #fff; background-color: #FF9900; padding: 3px 5px; float: left; display: block; margin: 0 0 10px 0; font-size: 100%;}
#mainContent2 .productDetail .productInfo p{ width: 360px; float: left; font-size: 75%; line-height: 160%; margin: 0 0 10px 0; padding: 0; clear: both;}
.productInfo ul{ width: 360px; float: left; clear: both; list-style: none; margin: 0 0 10px 0; padding: 0;}
.productInfo ul li{ font-size: 75%; color: #666; background: url(../images/icons/icon_bullet-square.gif) 0 7px no-repeat; line-height: 160%; padding: 0 0 0 15px;}
.productInfo ol { clear: both; margin: 0 0 10px 30px; padding: 0;}
.productInfo ol li{ font-size: 75%; line-height: 160%; background: none; padding: 0; margin: 0;}


.productInfo p.options{ width: 150px; clear: none;}
.productInfo label{ float: left; width: 60px;}
.productInfo .select{ float: left; margin: 0 0 5px 5px; border:1px solid #999; width:220px;}
.productInfo .smallSelect{ float: left; margin: 0 0 5px 5px; border:1px solid #999; width:80px;}

.productInfo a.pdf {background: url(../images/icons/icon_pdf.gif) 0 0 no-repeat; padding: 0 0 0 25px; margin:0 0 10px 0; line-height:200%; float:left; color:#FF9900; font-weight: bold;  text-decoration:none;}
.productInfo a.pdf:hover { color:#AE6800; }

.productInfo .button { float: left;}
.productInfo a.envoyer {background: url(../images/icons/icon_email.gif) 0 5px no-repeat; color: #000; padding: 0 0 0 25px; margin: 5px 0 0 0; color: #000; text-decoration: none; }
.productInfo a.envoyer:hover{ color: #FF6600; text-decoration: none; font-weight: bold;}
.productInfo a.matiere {background: url(../images/icons/icon_magnifier.gif) 0 2px no-repeat; color: #000; padding: 0 0 0 20px; margin: 5px 0 0 0; color: #000; text-decoration: none; }
.productInfo a.matiere:hover{ color: #FF6600; text-decoration: none; font-weight: bold;}


.button {border:1px solid #808080;	background:#D4D0C8;	padding:4px 4px; text-decoration:none; color:#333; cursor:pointer;}
a.button {border:1px solid #808080;	background:#D4D0C8;	padding:4px 4px; text-decoration:none; color:#333; float: left; margin: 0 5px 2px 0;}
a:hover.button { background:#F4F4F4; color:#000;}


/* *************************************************************
FAQ
************************************************************* */
.question{color: #444; font-size: 75%; width: 365px; line-height: 160%; cursor: pointer; padding: 0 0 5px 15px; margin: 5px 0 0 0; background: url(../images/icons/icon_bullet-square.gif) 0 7px no-repeat; border-bottom: 1px solid #ccc;}
.answer{ border-style: solid; border-width: 0 1px 1px 1px; border-color: #ccc; background-color:#fff; width: 378px; visibility:hidden; height:0px; overflow:hidden; position:relative;}
.answer_content{font-size: 70%; position:relative; color: #000; line-height: 160%; padding: 5px;}
.answer_content a{color: #FF6600;}

#faqList ul{ float: left; list-style: none; width: auto; margin: 0 0 20px 0; padding: 0;}
#faqList li{ background: url(../images/icons/icon_arrow-orange.gif) 0 4px no-repeat; padding: 0 0 0 10px; font-size: 75%; line-height: normal; float: left; margin: 0 20px 0 0; font-weight: bold;}
#faqList li a{ color: #FF6600; text-decoration: none;}
#faqList li a:hover{ text-decoration: underline; color: #FF9900;}


/* *************************************************************
SUB CONTENT AREA - RIGHT HAND COLUMN
************************************************************* */
#subContent {width: 330px; float: right; text-align: left; margin: -13px 0 0 0; padding: 0; position: relative;}

.smallBox{ width: 290px; padding: 0 0 0 0; margin: 25px 30px 0 0; background: url(../images/boxes/smallBox_bg.gif) 0 0 repeat-y; float: right; display: inline;}
.smallBox img{ float: left; clear: both;}
.smallBox h2{ font-size: 100%; color: #FF9900; margin: 0 0 5px 15px; display: inline; float: left;}
.smallBox p{ font-size: 75%; color: #666; margin: 0 0 0 15px; padding: 0; clear: both; line-height: 150%;}
.smallBox ul{ margin: 0 0 0 20px; padding: 0 0 0 20px; width:220px;}
.smallBox li{ font-size: 75%; line-height: 180%; padding: 0; margin: 0;}



#subContent dl{ float: left; width: 270px; padding: 0; margin: 0 0 0 16px; clear: both; display: inline;}
#subContent dt, #subContent dd{ float: left; padding: 0; margin: 0 0 0 0; font-size: 75%; line-height: 170%;}
#subContent dt {width: 70px; clear: both; color: #000; text-transform: capitalize;}
#subContent dd {width: 200px; color: #666;}

#productPics{ width: 300px; padding: 0; margin: 20px 25px 0 0; float: right; text-align: right; display: inline;}
#productPics img{ float: right; margin: 0 0 10px 0;}

.subcontentImage{ float: right; margin: 20px 20px 0 0;}


/* *************************************************************
IMAGES ROLLOVER
************************************************************* */

.imageRollover{background: #FFFFFF url(../images/img_load.gif) center 90px no-repeat; border: 1px solid #666; overflow: auto; padding: 0 0 0 0;}
.imageRollover img{ padding: 1px 0 1px 1px; border-bottom: 1px solid #666; float: left; clear: both;}
.imageRollover h2{ font-size: 75%; color: #3399FF; margin: 5px 0 5px 5px; padding: 0; float: left; clear: both; display: inline; width: 97%;}
.imageRollover p{ font-size: 70%; color: #666; margin: 0 0 0 5px; padding: 0; float: left; clear: both; display: inline; width: 97%;}

/* *************************************************************
CHANGE PASSWORD & FORGOTTEN PASSWORD 
/* **************************************************************/

#changePassword, #forgot{ float: right; width: 560px; margin: 0 15px 20px 0; display: inline; text-align: left;}
#changePassword h2, #forgot h2{ font-size: 120%; color: #669900; font-weight: normal; float: left; margin: 0; padding: 0 0 0 25px; background: url(../images/icons/icon_arrow_bigGreen.gif) 0 5px no-repeat;}
#changePassword .lines, #forgot .lines{ border-top: 1px solid #99CC00; border-bottom: 1px solid #CCE57F; height: 1px; width: 100%; float: left; margin: 5px 0 25px 0; font-size: 0; clear: both;}
#changePassword form p, #forgot p{ float: left; width: 500px; font-size:70%; margin: 0 0 0 15px; padding: 0; line-height: 220%; display: inline; clear: both;}
#changePassword form label{ width: 200px; float: left}
#changePassword form .text{ width: 125px; font-size: 90%;}

#forgot form label{ width: 100px; float: left}
#forgot form .text { width: 200px; font-size: 90%;}



/* *************************************************************
CHECKOUT / BASKET
************************************************************* */
#mainContent .intro{ width: 450px; float: left; clear: left; margin-right: 0;}
#mainContent .freeShipping{width: 200px; float: right; text-align: left; padding: 10px 10px 10px 50px; margin: 0; background: #fff url(../images/icons/icon_freeShipping.jpg) 2px 2px no-repeat;; color: #FF6600; font-size: 90%; font-weight: bold; clear: none;}
#mainContent .freeShipping span{font-size: 120%; font-weight: bold;}

#mainContent table{ float: left; font-size: 70%; color: #000; width: 100%; margin: 10px 0 20px 0; border-collapse: collapse;}
#mainContent th {font-weight: bold; height: 3em; background: #fff url(../images/bg/th_bg.jpg) 0 0 repeat-x; padding: 0 5px 0 5px; font-size: 100%; border: 1px solid #ccc;}
#mainContent td{ color: #000; padding: 5px; border: 1px solid #ccc;}
#mainContent tr a{ color: #FF6600; text-decoration: underline;}
#mainContent tr a:hover{ color: #000000; text-decoration: underline;}

#mainContent td img{ padding: 0 3px 0 0;}

#mainContent .bg{ background-color: #ebebeb;}
#mainContent .bg2{ background-color: #f8f8f8;}
#mainContent .end{ background: url(../images/bg/table_line.gif) 0px 5px repeat-x; height: 10px;}
#mainContent .end td{ border: none;}

#panierOptions{ float: left; width: 350px;}

#security{ float: left; width: 350px; clear: left;} /* border: 1px solid #ccc; background-color: #fff; */
#security2{ float: right; width: 350px; clear: left;}
#security p, #security2 p{ font-size: 70%; line-height: 140%;}

/* PANIER TOTAL DIV */
#panierTotal{ float: right; width: 350px; clear: right;}
#panierTotal select { font-size: 80%; width: 180px; margin: 0 0 2px 0;}

.ht, .htPrice{ font-weight: bold;}
.livraison, .ht, .frais, .tva{ background-color: #F5F5F5;}
.ht { font-weight: bold;}
.livraisonOption, .htPrice, .fraisPrice, .tvaPrice{ background-color: #EBEBEB; font-size: 130%;}
#mainContent .frais, #mainContent .fraisPrice{ color: #FF3300;}
#mainContent .htPrice{ color: #000;}
.tva, .tvaPrice{}
#mainContent .total, #mainContent .totalPrice{ font-size: 160%; border-bottom: 4px solid #ccc; padding: 8px 5px 5px 0;}
#mainContent .totalPrice {color: #FF6600; font-size: 220%;}

#mainContent a.continue,#mainContent2 a.continue { font-size: 80%; color: #000; background:url(../images/icons/icon_arrow-box.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin: 0 25px 0 0;}
#mainContent a.continue:hover,#mainContent2 a.continue:hover{ color: #FF6600;}

#mainContent a.return,#mainContent2 a.return{ font-size: 80%; color: #000; background:url(../images/icons/icon_arrow-back.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin: 0 25px 0 0;}
#mainContent a.return:hover,#mainContent2 a.return:hover{ color: #FF6600;}


/* PLUS AND MINUS BUTTONS IN BASKET */
.cartQuantity { float: left; margin: 0 0 0 10px; display: inline; width: 20px;}
.cartButtons{float: left; width: 10px; margin: 0 0 0 5px; display: inline;}
.btn_plus, .btn_minus{ border: 0; width: 10px; height: 10px; float: left; clear: both; cursor: pointer;}
.btn_plus{ background: url(../images/icons/icon_plus_cart.gif) 0 0 no-repeat;}
.btn_minus{background: url(../images/icons/icon_minus_cart.gif) 0 0 no-repeat; margin: 2px 0 0 0;}

/* BUTTON UPDATE */
.btn_updateCart{ background: url(../images/buttons/btn_cartUpdate.gif) 0 0 no-repeat; border: 0; width: 223px; height: 34px; float: right; margin: 5px 10px 20px 0; cursor: pointer;}

/* SUBSCRIPTION */
#subscription { float: left; width: 400px; margin: 10px 0 0 30px; display: inline; text-align: left;}

/* Form Title */
#subscription .subTitle { font-size: 100%; background: url(../images/icons/icon_arrow_smallGreen.gif) 0 3px no-repeat; margin: 30px 0 3px 0; padding: 0 0 7px 17px; border-bottom: 1px solid #CCE57F;}

/* COUPON  */
#coupon_description{ float: right; width: 350px; background: #FFD99F url(../images/bg/bg_voucher.gif) 0 0 repeat-x; border: 1px solid #FF9900; padding: 8px 0 3px 0;}
#coupon_description h2{ font-size: 100%; color: #333333; margin: 0 0 5px 8px; padding: 0; float: left; font-weight: bold;}
#coupon_description h2 span{ font-weight: normal; font-size: 80%;}
#coupon_description h3{ font-size: 80%; color: #333333; margin: 0 0 5px 8px; padding: 0; float: left; font-weight: bold;}
#coupon_description p { width: 330px; margin: 0 0 0 10px; float: left; font-size: 70%; color: #333333;}
#coupon_description p span{ font-weight: normal; margin: 0 5px 0 0;}
#coupon_description input, #coupon_description span{ float: left; }
#coupon_description input{ margin-top: 1px; width: 110px;}
#coupon_description a.deleteVoucher{ float: right; color: #000; font-size: 60%; background: url(../images/icons/icon_delete_box.gif) 0 0 no-repeat;margin: 0 10px 0 0; padding: 0 0 0 17px;}
#coupon_description a.deleteVoucher:hover{ color: #FF6600;}
#coupon_description a.create_account{ font-size: 100%;color: #FF6600;}
#coupon_description a.create_account:hover{ color:#C14E00;}


/* ***********************************
LOGIN + JOIN 
************************************** */
#login, #join{ margin: 0 0 30px 0; float: left; width: 100%; clear: both;}
#login h2, #join h2{ font-size: 150%; color: #FF9900; font-weight: normal; padding: 0 0 10px 0; margin: 0 0 20px 0; float: left; width: 100%; letter-spacing: -0.05em; background: url(../images/bg/title_lines.gif) bottom left repeat-x; font-style: italic;}

#join p, #login p{ width: 100%;}

/* Form */
#subscription form h3{background-position: 0 2px; margin: 15px 0 5px 0; display: inline; font-size: 90%;}
#subscription p {font-size: 75%; margin: 0 0 10px 0; padding: 0; line-height: 180%;}
#subscription p.options{ width: 421px; margin: 5px 0 10px 0; display: inline;}
#subscription p.options3{ width: 500px; margin: 5px 0 10px 0; display: inline;}
#subscription p.options input, #subscription p.options3 input{ margin: 0 5px 0 15px;}
#subscription .options2 p{ width: 190px;}
#subscription .options2 label{ width: 40px;}
#subscription form .text { width: 250px; font-size: 90%; height:15px; border:1px solid #CCCCCC;}
#subscription form .loginText { width: 150px; font-size: 90%; height:15px; border:1px solid #CCCCCC;}
#subscription form label{ width: 160px; float: left}
#subscription form textarea { font: 110% Arial, Helvetica, sans-serif; width: 520px; height: 100px;}
#subscription form .submit { background: url(../images/buttons/btn_envoyer.gif) 0 0 no-repeat; border: none; width: 100px; height: 25px; cursor: pointer; margin: 0;}
#subscription form .submit:hover{background: url(../images/buttons/btn_envoyer.gif) 1px 1px no-repeat;}
#subscription form .forgot { line-height: 120%; margin: 5px 0 0 0; font-size: 65%;}
#subscription p a{ color: #999999;}
#subscription .validate { background: url(../images/buttons/btn_validerDemande.gif) 0 0 no-repeat; width: 212px; height: 25px; cursor: pointer; border: none;}
#subscription .validate:hover{background: url(../images/buttons/btn_validerDemande.gif) 1px 1px no-repeat;}
form .selectReportages { width: 200px; font-size: 90%; height:20px; border:1px solid #CCCCCC;}


/* *************************************************************
SPONSORSHIP MEMBER AREA
************************************************************* */
#mainContent .sponsorTotalPrice{font-size: 160%; border-bottom: 4px solid #ccc; padding: 8px 5px 5px 0; background-color: #F8F8F8;}
#mainContent .sponsorTotal, #mainContent .sponsorTotalPrice{ font-size: 160%; border-bottom: 4px solid #ccc; padding: 8px 5px 5px 0;}
#mainContent .sponsorTotalPrice{color: #FF6600; font-size: 220%;}
#mainContent .noBorderTable{ border: none;}
#sponsorWrap{ float: left; width: auto; background: #F8F8F8; border: 1px solid #ccc; padding: 15px 15px 15px 15px; margin: 0 0 30px 0;}
#mainContent #sponsorWrap h3{ margin: 0; padding: 0;}
#mainContent #sponsorWrap p { font-size: 90%; line-height: 160%; margin: 0; padding: 0;}


/* *************************************************************
DELIVERY AND BILLING BLOCKS
************************************************************* */

#deliveryAdd, #billingAdd{width: 355px; height:auto; padding: 0 0 5px 0; display: inline; text-align: left; margin-bottom: 10px;}
#billingAdd { background-color: #fff; border: 1px solid #ccc; float: left;}
#deliveryAdd{background-color: #f5f5f5; border: 1px solid #ccc; float: right;}
#deliveryAdd h2, #billingAdd h2{font-size: 80%; font-weight: bold; color: #000; background: #fff url(../images/bg/th_bg.jpg) 0 0 repeat-x; padding: 8px 10px; border-bottom: 1px solid #ccc;}
#deliveryAdd h2 a{font-weight: normal; text-decoration: none; margin-left: 10px; color: #000; text-transform: uppercase; font-size: 70%;}
#deliveryAdd h2 a:hover, #billingAdd h2 a:hover{text-decoration: underline;}

/*FORM */
#deliveryAdd form, #billingAdd form { clear: both; margin: 0; float: left; width: 100%;}
#deliveryAdd p, #billingAdd p{width: 345px; line-height: 200%; margin: 0 0 3px 10px; display: inline; float: left; padding: 0; font-size: 70%;}
#deliveryAdd legend,#billingAdd legend{ color: #3399FF; font-size: 120%; font-weight: normal; padding: 0 10px 10px 10px; margin: 0;}

#deliveryAdd label,#billingAdd label{ width: 100px; float: left;}
#deliveryAdd .submit,#billingAdd .submit{ margin: 0 0 10px 0;}
#deliveryAdd .reset,#billingAdd .reset{ margin: 10px 10px 10px 0;}
#deliveryAdd p.footnote,#billingAdd p.footnote{ font-size: 55%; color: #999999; margin: 20px 0 0 0;}
#deliveryAdd .text, #billingAdd .text{ width: 205px; font-size: 110%; padding: 2px; border:1px solid #CCCCCC;}
#deliveryAdd form textarea,#billingAdd form textarea { font: 110% Arial, Helvetica, sans-serif; border:1px solid #CCCCCC; width: 290px; height: 100px;}

#paymentList { float: left; width: 350px;}
#paymentList p{ font-size: 70%;}
#mainContent #paymentList ul{ list-style: none; margin: 0 0 10px 0;}
#mainContent #paymentList li{ background: none; margin: 0; padding: 0; font-size: 70%;}
#mainContent #paymentList textarea{ width: 350px; height: 100px; font: 100% Arial, Helvetica, sans-serif;}

/* CHECKOUT BUTTONS */
.checkoutButtons{float: right; text-align: right; margin: 10px 0 0 0; padding: 0; width: 100%;}
#mainContent .checkoutButtons a.continue, #mainContent .checkoutButtons a.return{font-size: 70%; margin: 10px 25px 0 0; float: right;}

/* CHECKOUT BUTTONS */
.checkoutButtons{float: right; text-align: right; margin: 10px 0 0 0; padding: 0; width: 100%;}
.btn_checkout{ float: right; margin: 0; padding: 0;}
#mainContent3 a.continue { color: #000; background:url(../images/icons/icon_arrow-box.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; }
#mainContent3 a.continue:hover{ color: #FF6600;}
#mainContent3 a.return{ color: #000; background:url(../images/icons/icon_arrow-back.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; }
#mainContent3 a.return:hover{ color: #E34000;}

#mainContent3 .checkoutButtons a.continue, #mainContent3 .checkoutButtons a.return{font-size: 70%; margin: 10px 25px 0 0; float: right;}


/* *************************************************************
ACCOUNT LOGIN HOMEPAGE
************************************************************* */
#accountList a{ color: #000; text-decoration: none;}
#accountList a:hover{ color: #FF6600; text-decoration: underline;}
.smallBox #accountList ul{ clear: both; padding: 0; margin: 0 0 0 20px;}
#accountList li{ padding: 0 0 0 30px; line-height: 250%; list-style: none;}
#accountList .orders{ background: url(../images/icons/icon_orders.gif) 3px 8px no-repeat;}
#accountList .pass{ background: url(../images/icons/icon_pass.gif) 0 8px no-repeat;}
#accountList .param{ background: url(../images/icons/icon_param.gif) 0 8px no-repeat;}
#accountList .logout{ background: url(../images/icons/icon_logout.gif) 0 8px no-repeat;}
#accountList .admin{ background: url(../images/icons/icon_admin.gif) 0 8px no-repeat; padding-left: 35px; font-size: 80%;}
#accountList .admin a{ font-weight: bold;}


/* *************************************************************
GOD FATHER / PARRAIN 
************************************************************* */
#alertGodFather{ float: left; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px dotted #ccc;}
#alertGodFather h2 { color: #000; margin: 0 0 3px 0; padding: 0; font-weight: normal; font-size: 75%;}
#alertGodFather p { color: #000;}

/* *************************************************************
ALERT BOX
************************************************************* */
#alertBox{border: 1px solid #FF9900; padding: 10px 0; margin: 10px 0 20px 0; background-color: #FFF1DD; width: 99%; text-align: left; float: left;}
#alertBox h2{ margin: 0; padding: 0; font-size: 80%; font-weight: bold; color: #FF3300; border: none;}
#alertBox p{color: #000; font-size: 70%; padding: 0; margin: 0 0 0 10px; line-height: 180%; clear: none; width: auto;}
#alertBox a{color:#FF3300;}
#alertBox a:hover{color: #000;}

#alertBox table{border-collapse: collapse; width: 70%; margin: 15px 0 0 15px; border:1px solid #999999;}
#alertBox td, #alertBox th{ height: 3em; padding: 5px; border: none; background: none;}
#alertBox th{background-color:#fff; color:#333;}
#alertBox td{background-color:#FFF; color:#333;}
#alertBox th a{color:#333; text-decoration:none;}

#alertBoxError{border: 1px solid #FFF; padding: 10px 0; margin: 10px 0 20px 0; background-color: #CA0211; width: 99%; text-align: left; float: left; color:#FFF;}
#alertBoxError p{ color: #FFF; font-size:75%;padding: 0; margin: 0 0 0 10px; line-height: 180%; clear: none; width: auto;}
#alertBoxError h2{  margin: 0 0 0 10px; padding: 0; font-size: 80%; font-weight: bold; color: #FFF; border: none;}

.error{ color:#FF0000; font-weight:700; font-size:90%; text-decoration:blink;}

/* *************************************************************
General Styles
************************************************************* */
.clearSpace{ float: left; clear: both; width: 200px; font-size: 0; height: 20px;}
#mainContent p.smallText{ font-size: 60%;}


/* *************************************************************
Breadcrumb
************************************************************* */
#breadcrumb p{font-size: 70%; color: #996600; margin: 5px 0 10px 0; padding: 0; text-align:left; }
#breadcrumb p a{color: #FF6600;}
#breadcrumb p a:hover{ color: #669900;}


/* *************************************************************
FOOTER
************************************************************* */
#footer{ float: left; background: url(../images/bg/bg_footer.jpg) 0 0 no-repeat; width: 800px; height: 170px; text-align: center;}
#footer p{ color: #000000; font-size: 70%; margin: 0 0 3px 0; padding: 0; line-height: 150%;}

#footer #newsletter{ width: 230px; float: left; margin: 25px 0 0 25px; text-align: left; display: inline;}
#footer #newsletter input{ float: left; margin: 5px 0 0 0;}
#footer #newsletter .text{ font-size: 75%; margin: 8px 5px 0 0; width: 150px;}

#footer #revendeur{ width: 230px; float: left; margin: 25px 0 0 35px; text-align: left; display: inline;}
#footer #revendeur p{ margin: 0;}
#footer #revendeur ul{ float: left; width: 230px; list-style: none; clear: both; margin: 5px 0 0 0; padding: 0;}
#footer #revendeur li{ background: url(../images/icons/icon_bullet-orange.gif) 0 6px no-repeat; font-size: 70%; padding: 0 0 0 15px; color: #000; line-height: 150%;}
#footer #revendeur .link{ background: url(../images/icons/icon_arrow-black.gif) 0 5px no-repeat; }
#footer #revendeur .link a{ color: #FF3300;}
#footer #revendeur .link a:hover{ color: #000000;}

#footer #acheter{ width: 160px; float: left; margin: 25px 0 0 20px; text-align: left; display: inline;}
#footer #acheter ul{ float: left; width: 180px; list-style: none; clear: both; margin: 5px 0 0 0; padding: 0;}
#footer #acheter li{ background: url(../images/icons/icon_bullet-orange.gif) 0 6px no-repeat; font-size: 70%; padding: 0 0 0 15px; color: #000; line-height: 150%;}
#footer #acheter .link{ background: url(../images/icons/icon_arrow-black.gif) 0 5px no-repeat; }
#footer #acheter .link a{ color: #FF3300;}
#footer #acheter .link a:hover{ color: #000000;}


#btmNav{ width: 800px; margin: 10px auto 0 auto; text-align: center; padding: 0; clear: both; float: left;}
#address{ width: 800px; float: left; margin: 10px 0 0 0; text-align: center; padding: 0 0 20px 0; clear: both;}
#btmNav ul{ list-style: none; clear: both; margin: 0 auto; padding: 0; width: 780px;}
#address ul{ list-style: none; clear: both; margin: 0 auto; padding: 0; width: 780px;}
#btmNav li, #address li{ float: left; font-size: 65%; padding: 0 10px; margin: 0; border-right: 1px solid #888; color: #ccc; line-height: 100%;}
#btmNav li a, #address li a{ color: #ccc; text-decoration: none;}
#btmNav li a:hover, #address li a:hover{ color: #fff; text-decoration: underline;}
#btmNav .noBorder, #address .noBorder{ border-left: none;}


/* *************************************************************
PROCESSING PAGE
************************************************************* */
#processingWrap{ width: 420px; height: auto; left: 50%; top: 50%; margin: -140px 0 0 -210px; position: absolute; background: #fff url(../images/shape/shape_payment_bg.jpg) 0 0 repeat-y; }
#processingBody{ width: 355px; float: left; margin: 0 0 0 15px; padding: 10px 15px 0 20px; display: inline; font-size: 75%; text-align: center;}
#processingBody h1{ float: left; display: inline; clear: none; margin: 0 0 2px 20px; padding: 0; font-size: 100%; font-weight: bold; color: #B30000; display: inline;}
#processingBody p{margin: 0 0 5px 0; padding: 0; font-size: 75%; clear: both; display: inline; line-height: 200%;}
#processingWrap img{ float: left;}
#processingBody img{ float: none;}
#processingBody .bar{ margin: 20px 0 0 0;}
#processingBody .back{ background: url(../images/icons/icon_arrow-back.gif) 0 0 no-repeat; padding: 1px 0 5px 20px; color: #FF6600; text-transform: uppercase; display: inline}

/* *************************************************************
PRESS
************************************************************* */
#press{ float: left; border-color: #ccc; margin: 0; border-width: 0 1px 1px 1px; border-style: dotted; clear: both; width: 740px;}
.companyListing, .companyListing_alt{ float: left; border-top: 1px dotted #ccc; padding: 15px 0; margin: 0; clear: both; width: 740px; height: auto;background-color: #FFF;}
.companyListing_alt{background-color: #F8F8F8;}

.feauturedLogo {float: left; padding: 0; height: 50px; text-align: center; width:130px;}

.companyListing .text, .companyListing_alt .text{ float: left; width:600px;  height: auto; padding: 0 10px 0 0;}
.companyListing h2, .companyListing_alt h2{ margin: 0 0 5px 0; padding: 0; color: #669900; font-size: 100%; border: none;}
.companyListing h2 a, .companyListing_alt h2 a{ color: #669900; text-decoration: none;}
.companyListing h2 a:hover, .companyListing_alt h2 a:hover{ color: #FF6600; text-decoration: underline;}
.companyListing h3, .companyListing_alt h3{ margin: 0 0 5px 0; padding: 0; color: #669900; font-size: 750%; border: none;}
.companyListing h3 a, .companyListing_alt h3 a{ color: #669900; text-decoration: none;}
.companyListing h3 a:hover, .companyListing_alt h3 a:hover{ color: #FF6600; text-decoration: underline;}
#press .companyListing p, #press .companyListing_alt p{margin: 0; padding: 0; line-height: 180%; font-size: 70%; text-align:justify;}
.companyListing p a, .companyListing_alt p a{ color: #666;}
.companyListing p a:hover, .companyListing_alt p a:hover{ color: #FF6600; text-decoration: underline;}

/* Product Page Navigation */
#pageNav{ float: left; width: 300px; text-align: left; margin: 2px 15px 10px 0; font-size: 70%; color: #666; }
#pageNav a{padding: 0 2px; margin: 0 1px; color: #666; line-height: 150%;}

/* *************************************************************
LINKING
************************************************************* */

dt{ width: 120px; float: left; clear: both; color: #FF3300;}
dd{ width: 230px; margin-left: 20px; display: inline; float: left;}
dt, dd{ font-size: 70%; margin-bottom: 10px;}
dd a{color: #FF3300;}