/* Stylesheet Designed by Anagramme 2007 */

html{height: 100%;}
body{height: 100%; margin: 0; padding: 0 0 0 0; font-family: Arial, Helvetica, sans-serif; color: #666; background-color: #DCDCDC;}

form{margin: 0; padding: 0;}


/* *************************************************************
EVERYTHING EXCEPT THE FOOTER
************************************************************* */
#bgWrap{position: relative; min-height: 95%; z-index: 10; width: 100%; background: url(../images/bg/bg_illustration_top.gif) top right no-repeat;}
* html #bgWrap{ height: 90%; z-index: 10;}

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



/* *************************************************************
HEADER
************************************************************* */
#header{ float: left; background: url(../images/bg/bg_header.png) 0 20px no-repeat; width: 780px; height: 184px; text-align: left; margin: 20px 0 0 0; padding: 0 15px;}

#logo{ float: left; margin: 0 0 0 30px; display: inline;}
#logo img{ float: left;}

#nav{ float: right; margin: 35px 10px 0 0; width: 470px; display: inline; height: 58px; text-align: right;}
#nav a{ margin: 0; float: left; height: 58px;}

#nav a.accueil{ background: url(../images/navigation/nav_accueil.gif) 0 0 no-repeat; width: 76px;}
#nav a.agency{ background: url(../images/navigation/nav_agency.gif) 0 0 no-repeat; width: 76px;}
#nav a.services{ background: url(../images/navigation/nav_services.gif) 0 0 no-repeat; width: 101px;}
#nav a.boutique{ background: url(../images/navigation/nav_boutique.gif) 0 0 no-repeat; width: 121px;}
#nav a.book{ background: url(../images/navigation/nav_book.gif) 0 0 no-repeat; width: 62px;}
#nav a.contact{ background: url(../images/navigation/nav_contact.gif) 0 0 no-repeat; width: 80px;}

#nav a.accueil:hover, #nav a.accueil-active{ background: url(../images/navigation/nav_accueil.gif) 0 -2px no-repeat;}
#nav a.agency:hover, #nav a.societe-active{ background: url(../images/navigation/nav_agency.gif) 0 -2px no-repeat;}
#nav a.services:hover, #nav a.concept-active{ background: url(../images/navigation/nav_services.gif) 0 -2px no-repeat;}
#nav a.boutique:hover, #nav a.produits-active{ background: url(../images/navigation/nav_boutique.gif) 0 -2px no-repeat;}
#nav a.book:hover, #nav a.faq-active{ background: url(../images/navigation/nav_book.gif) 0 -2px no-repeat;}
#nav a.contact:hover, #nav a.contact-active{ background: url(../images/navigation/nav_contact.gif) 0 -2px no-repeat;}

#promoBar{float: left; margin: 0; padding: 8px 0 0 0; clear: both; width: 778px; background: url(../images/bg/bg_redBar.jpg) 0 0 repeat-x; height: 26px; border-width: 0 1px; border-style: solid; border-color: #fff;}
#promoBar marquee{font-size: 100%; color: #fff; font-weight: bold;}
#promoBar a { color: #fff; text-decoration: none;}

#subNav{ float: left; margin: 0; clear: both; width: 778px; background: url(../images/bg/bg_greyBar.jpg) 0 0 repeat-x; height: 30px; border-width: 0 1px; border-style: solid; border-color: #fff;}
#subNav ul{ float: left; list-style: none; margin: 7px 0 0 10px; padding: 0; display: inline;}
#subNav li{ float: left; padding: 0 10px; margin: 0; font-size: 70%; color: #333; line-height: 150%; text-transform:capitalize;border-right: 1px solid #999;}
#subNav li a{ color: #333; text-decoration: underline;}
#subNav li a:hover{ color: #CC0000; 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: #333; text-decoration: none; border-right: none; font-weight: normal;}
#subNav .panier a:hover{ color: #CC0000; text-decoration: underline;}
#subNav .noBorder{ border: none;}
#subNav .administer{ border-left: 1px solid #FFCC00; border-right: none;}


/* *************************************************************
CONTENT WRAP
************************************************************* */
#contentBGWrap {width: 810px; float: left; background: url(../images/bg/bg_body.png) 0 0 repeat-y;}
#contentWrap {width: 778px; float: left; text-align: left; margin: 0 0 0 15px; padding: 0; background: #F0F0F0 url(../images/shape/shape_left_curve.gif) -60px 0 no-repeat; display: inline; border-width: 0 1px; border-style: solid; border-color: #fff;}


/* *************************************************************
HOMEPAGE
************************************************************* */
#intro{width: 255px; float: left; text-align: left; margin: 20px 0 0 20px; padding: 0; display: inline;}
#intro h1{font-size: 100%; padding: 0 0 5px 0; margin: 0 0 5px 0; font-weight: bold; color: #B30000; float: left; width: 100%;}
#intro p{font-size: 70%; padding: 0; margin: 0 0 10px 0; color: #444; line-height: 160%; clear: both;}
#intro p a{ color: #990000; background: url(../images/icons/icon_arrow-continue.gif) 0 4px no-repeat; padding: 0 0 0 18px; text-decoration: none;}
#intro p a:hover{ color:#FF6600; text-decoration: underline;}

#nosReferences{width: 420px; float: right; text-align: left; margin: 20px 15px 0 0; padding: 0; display: inline;}
#nosReferences h1{font-size: 100%; padding: 0 0 5px 0; margin: 0 0 5px 0; font-weight: bold; color: #B30000; float: left; width: 100%;}
#nosReferences p{font-size: 70%; padding: 0; margin: 0 0 10px 0; color: #444; line-height: 160%; clear: both;}

#nosReferences p img{ float: left; margin: 0 5px 0 0;}
#nosReferences ul{ width: 100%; margin: 10px 0 0 0; padding: 0 0 0 5px; list-style: none; float: left; background: url(../images/icons/icon_arrow-continue.gif) 0 3px no-repeat;}
#nosReferences li{ float: left; width: auto; font-size: 70%; color: #990000; border-right: 1px solid #990000; padding: 0 15px;}
#nosReferences li a{ color: #990000; text-decoration: none;}
#nosReferences li a:hover{ color: #FF6600; text-decoration: underline;}



/* *************************************************************
MAIN CONTENT AREAS
************************************************************* */
/* HALF WIDTH ********** */
#mainContent {width: 450px; float: right; text-align: left; margin: 20px 25px 0 0; padding: 0; display: inline;}

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

#mainContent h1, #mainContent2 h1{font-size: 100%; padding: 0 0 10px 30px; margin: 0 0 10px 0; font-weight: bold; color: #B30000; float: left; width: 96%; background: url(../images/bg/bg_titleLines.jpg) 0px 0 no-repeat; height: 2em;}
#mainContent h2, #mainContent2 h2{font-size: 110%; padding: 0 0 5px 0; margin: 0 0 5px 0; font-weight: normal; color: #CC0066; float: left; width: 300px;}
#mainContent h3, #mainContent2 h3{font-size: 100%; padding: 0; margin: 20px 0 10px 0; font-weight: normal; color: #FF6600;}
#mainContent p, #mainContent2 p{font-size: 70%; padding: 0; margin: 0 0 10px 0; color: #666666; line-height: 160%; clear: both;}
#mainContent a.more{ color: #990000; background: url(../images/icons/icon_arrow-continue.gif) 0 4px no-repeat; padding: 0 0 0 18px; text-decoration: none; margin-left:5px;}
#mainContent a.more:hover{ color:#FF6600; text-decoration: underline;}

#mainContent2 h1 a{ float: right; font-size: 70%; 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: 0 0 0 0;}
#mainContent2 h1 a:hover{ color: #FF6600;}

#mainContent ul{ margin: 0 0 20px 0;}
#mainContent li{font-size: 75%; padding: 0; margin: 0; color: #006699; line-height: 160%; clear: both;}

#mainContent dl{ float: left; width: 350px; padding: 10px; margin: 0 0 20px 0; border: 1px solid #ccc; background-color: #fff;}
#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: 200px; color: #666;}

#mainContent .separation-thin{ width: 600px; 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, #mainContent2 ul{ float: left; clear: both; list-style: none; width: 350px; margin: 0 0 30px 10px; padding: 0;}
#mainContent ul li, #mainContent2 ul li{ background: url(../images/icons/icon_bullet-square.gif) 0 9px no-repeat; padding: 0 0 0 20px; font-size: 75%; line-height: 200%;}

#mainContent .image, #mainContent2 image{ float: left; margin: 0 10px 0 0; clear: both;}

.btmCurve{ float: left; margin: 0 10px 0 15px; clear: both;}

/* *************************************************************
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;}
#mainContent #contact p{ width: 400px;}


/* *************************************************************
PRODUCT NAVIGATION + PRODUCT LISTING + PRODUCT DETAIL
************************************************************* */
/* Product Navigation */
#productNav {width: 200px; float: left; text-align: left; margin: 20px 0 10px 0; padding: 0 0 0 20px; display: inline;}

#productNav h2 {font-size: 90%; padding: 0 0 0 15px; margin: 0 0 5px 0; font-weight: normal; color: #FF6600; float: left; width: 175px; background: url(../images/icons/icon_productListTitle.gif) left center no-repeat;}

#productNav ul{ width: 100%; margin: 0; padding: 0; list-style: none; clear: both;}
#productNav li{ width: 175px; margin: 0; padding: 0 0 0 15px; line-height: 170%; font-size: 70%; color: #666; background: url(../images/icons/icon_arrow_small.gif) 0 6px no-repeat;}
#productNav li a{ color: #666; text-decoration: none; display: block;}
#productNav li a:hover{ color: #FF6600; text-decoration: none;}

#productNav ul ul{ margin: 10px 0 0 -18px;}
#productNav li li{font-size: 90%; padding: 0 0 0 15px; margin: 0 0 5px 0; font-weight: normal; color: #B30000; float: left; width: 175px;}
#productNav li li a{color: #666;}
#productNav ul ul ul{ margin: 10px 0 0 0px;}
#productNav li li li{font-size: 100%;}


/* Main Product Content */
#productContent {width: 550px; float: right; text-align: left; margin: 20px 0 0 0; padding: 0; display: inline;}
#productContent h1{font-size: 100%; padding: 0 0 10px 30px; margin: 0 0 10px 40px; font-weight: bold; color: #B30000; float: left; width: 260px; background: url(../images/bg/bg_titleLines.jpg) 0px 0 no-repeat; height: 2em; display: inline;}
#productContent p{font-size: 70%; padding: 0; margin: 0 0 10px 40px; color: #666666; line-height: 160%; clear: both;}

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

/* Product Listing */
.productListing{ width: 100px; display: inline; margin: 10px 0 10px 30px; padding: 0; float: left;}
.productListing img{ float: left; clear: both; border: 1px solid #ccc;}
.productListing h3{ color: #B30000; width: 100%; margin: 5px 0 5px 0; padding: 0; font-size: 70%; float: left; font-weight: normal; clear: both;}
.productListing h3 a{color: #B30000; text-decoration: none;}
.productListing h3 a:hover{color: #FF6600; text-decoration: underline;}
.productListing h4{ color: #666; margin: 0 0 5px 0; padding: 0; font-size: 70%; float: left; font-weight: normal; width: 100%; clear: both;}
.productListing h5{ color: #FF6600; margin: 0 0 0 0; padding: 0; font-size: 70%; float: left; font-weight: normal; width: 100%; clear: both; text-decoration: line-through;}
.productListing h4 span, .productListing h5 span{ font-weight: normal; text-decoration: line-through;}


/* Specific to the Product Detail Page ********** */
.productImage{ float: left; width: 355px; margin: 0 0 10px 0; display: inline;}
.productImage .mainPic{ border: 1px solid #ccc; padding: 0; margin: 0; float: left; clear: both;}
#mainContent2 .productImage .thumb{ width: 80px; height: 80px; float: left; margin: 5px 5px 0 0; padding: 0; border: 1px solid #ccc; display: inline;}
.productImage img { float: left;}
.productImage a{ float: left;}

/* Not sure if this is used
#productContent .productImage img { float: left;}
#productContent .productImage a{ float: left;} */


.productInfo {width: 350px; display: inline; padding: 0 0 20px 0; margin: 0 5px 0 20px; float: right;}
#mainContent2 .productInfo h2{ color: #B30000; width: 100%; margin: 0 0 10px 0; padding: 0; font-size: 100%; font-weight: bold; float: left; clear: both;}
#mainContent2 .productInfo h3{ color: #000; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 80%; float: left; font-weight: normal; clear: both;}
#mainContent2 .productInfo h4{ color: #000; margin: 10px 0 10px 0; padding: 20px 0 0 0; font-size: 100%; float: left; font-weight: bold; width: 100%; clear: both; border-top: 1px solid #ccc;}
#mainContent2 .productInfo h4 span{ text-decoration: line-through; color: #999999;}
#mainContent2 .productInfo h5{ color: #fff; background-color: #FF9900; padding: 3px 5px; float: left; display: block; margin: 0 0 10px 0; font-size: 100%;}
#mainContent2 .productInfo p{ width: 345px; float: left; font-size: 75%; line-height: 160%; margin: 0 0 10px 0; padding: 0; clear: both; color: #444;}
#mainContent2 .productInfo ul{ width: 345px; float: left; clear: both; list-style: none; margin: 0 0 10px 0; padding: 0;}
#mainContent2 .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;}
#mainContent2 .productInfo ol { clear: both; margin: 0 0 10px 30px; padding: 0;}
#mainContent2 .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 .button { float: left;}
.productInfo a.envoyer {background: url(../images/icons/icon_email.gif) 0 4px no-repeat; color: #000; padding: 0 0 0 25px; margin: 5px 0 0 0; color: #000; text-decoration: none; }
.productInfo a.envoyer:hover{ color: #E34000; text-decoration: underline;}

#mainContent2 a.returnList{ color: #E34000; background:url(../images/icons/icon_returnList.gif) 7px 3px no-repeat; padding: 1px 0 3px 25px; text-transform: uppercase; font-weight: bold; text-decoration: none; }
#mainContent2 a.returnList:hover{ color: #000; text-decoration: underline;}

#colourChart{ float: left; clear: both; width: 740px; margin: 15px 0 10px 35px; display: inline; border-top: 1px solid #fff; padding: 15px 0 0 0;}
#colourChart h3{ float: left; width: 155px; color: #B30000; margin: 0 0 10px 0; padding: 0 0 0; font-size: 90%; font-weight: bold;}
#colourChart p{ float: left; width: 345px; font-size: 70%; margin: 0; padding: 2px 0 0 0; text-align: left;}

/* *************************************************************
SUB CONTENT AREA - LEFT HAND COLUMN
************************************************************* */
#subContent {width: 185px; float: left; text-align: left; margin: 25px 0 0 20px; padding: 0; display: inline;}

/* .smallBox{ width: 195px; padding: 0 0 0 0; margin: 0; background: url(../images/boxes/smallBox_bg.gif) 0 0 repeat-y; float: left; display: inline;}
.smallBox img{ float: left; clear: both;}
.smallBox h2{ font-size: 90%; color: #FF9900; margin: 0 0 5px 0; display: inline; float: left;}
.smallBox p{ font-size: 70%; color: #666; margin: 0 0 0 0; padding: 0; clear: both; line-height: 150%;}
.smallBox ul{ width:190px;;margin: 0 0 0 20px; padding: 0 0 0 0;}
.smallBox li{ font-size: 70%; line-height: 180%; padding: 0; margin: 0;} */

#subContent dl{ float: left; width: 170px; padding: 0; margin: 0 0 0 0; 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;}

.subContentImage{ float: left; margin: 15px 0 0 -13px;}

/* CONTACT */
#contact { float: left; width: 190px; margin: 0 0 20px 0;}
#contact h2{ font-size: 90%; color: #B30000; margin: 0 0 10px 0; display: inline; float: left; padding: 0 0 0 18px; font-weight: normal;}
#contact h2.phone{ background: url(../images/icons/icon_phone.gif) left center no-repeat;}
#contact h2.clock{ background: url(../images/icons/icon_clock.gif) left center no-repeat; color: #FF6600;}

#contact p{ float: left; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 75%; color: #333333; line-height: 150%;}
#contact p.bold{ font-size: 80%; font-weight: bold;}


/* SEARCH  */
#search { float: left; width: 190px; margin: 30px 0 0 0;}
#search h2{ font-size: 90%; color: #B30000; margin: 0 0 3px 0; display: inline; float: left; background: url(../images/icons/icon_search.gif) 0 2px no-repeat; padding: 0 0 0 18px;}
#search p{ float: left; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 70%; color: #333333;}
#search .text{ width: 170px; font-size: 80%;}
#search select{ width: 174px; font-size: 80%;}

/* PROMO */
.promo{ float: left; width: 205px; margin: 0 0 30px 0;}
.promo h2{ font-size: 90%; color: #B30000; margin: 0 0 5px 0; display: inline; float: left; padding: 0 0 0 15px; width: 190px; background: url(../images/icons/icon_lightbulb.gif) 0 0 no-repeat; font-weight: normal;}
.promo p{ float: left; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 70%; color: #333333;}
.promo ul{ margin: 0 0 0 15px; padding: 0 0 0 0; clear: both;}
.promo li{ font-size: 70%; line-height: 180%; padding: 0; margin: 0; color: #333333;}
.promo h2.question{ background: url(../images/icons/icon_question.gif) 0 0 no-repeat; padding-left: 18px;}


/* *************************************************************
ACCOUNT LOGIN
************************************************************* */
#accountList { width: 175px; padding: 0 0 0 0; margin: 0; float: left; display: inline;}
#accountList h2{ font-size: 90%; color: #B30000; margin: 0 0 10px 0; display: inline; float: left; padding: 0; font-weight: normal;}
#accountList a{ color: #000; text-decoration: none;}
#accountList a:hover{ color: #FF6600; text-decoration: underline;}
#accountList ul{ width: 190px; clear: both; padding: 0; margin: 0;}
#accountList li{font-size: 70%; line-height: 180%; 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%; margin-top: 15px;}
#accountList .admin a{ font-weight: bold;}


/* *************************************************************
SERVICES
************************************************************* */
#services{width: 212px; float: left; text-align: left; margin: 0 0 10px 0; padding: 0; display: inline;}
#services ul{ float: left; padding: 0; margin: 0; list-style: none;}
#services li{ float: left; padding: 0; margin: 0; display: block; font-size:80%; font-weight: bold;}

#services li a{ width: 172px; height: 26px; color: #B30000; text-decoration: none; padding: 9px 0 0 40px;}
#services li a:hover{ color: #FF6600;}

#services li a.publicite{background: url(../images/navigation/leftNav_publicite.gif) 0 0 no-repeat; display: block;}
#services li a.publicite:hover{background: url(../images/navigation/leftNav_publicite.gif) 0 -35px no-repeat;}
#services li a.publiciteActive{background: url(../images/navigation/leftNav_publicite.gif) 0 -35px no-repeat; display: block; color: #FF6600;}

#services li a.marquage{ background: url(../images/navigation/leftNav_marquage.gif) 0 0 no-repeat; display: block;}
#services li a.marquage:hover{ background: url(../images/navigation/leftNav_marquage.gif) 0 -35px no-repeat;}
#services li a.marquageActive{ background: url(../images/navigation/leftNav_marquage.gif) 0 -35px no-repeat; display: block; color: #FF6600;}

#services li a.decoration{ background: url(../images/navigation/leftNav_decoration.gif) 0 0 no-repeat; display: block;}
#services li a.decoration:hover{background: url(../images/navigation/leftNav_decoration.gif) 0 -35px no-repeat;}
#services li a.decorationActive{ background: url(../images/navigation/leftNav_decoration.gif) 0 -35px no-repeat; display: block; color: #FF6600;}

#servicesDecoration{ width: 320px; float: left; margin: 0 0 2px 0;}
#servicesDecoration a{ float: left; margin: 10px 10px 0 0; border: 1px solid #ccc;}
#servicesDecoration img{ float: left;}

/* #mainContent .productListing{ width: 130px; display: inline; margin: 30px 15px 10px 15px; padding: 0; float: left;}
#services h2{ font-size: 100%; color: #B30000; margin: 0 0 3px 0; display: inline; float: left; padding: 0 0 0 30px; clear: both; font-weight: bold;}
#services h3{ font-size: 75%; color: #333; margin: 0 0 20px 30px; font-weight: normal; display: inline; float: left; padding: 0 0 0 0; clear: both;}
#services p{ float: left; width: 100%; margin: 0 0 20px 0; padding: 0; font-size: 70%; color: #666; clear: both; line-height: 140%;} */


/* *************************************************************
BOOK
************************************************************* */
#bookNav {width: 200px; float: left; text-align: left; margin: 20px 0 10px 0; padding: 0 0 0 20px; display: inline;}
#bookNav ul{ width: 100%; margin: 0; padding: 0; list-style: none; clear: both;}
#bookNav li{font-size: 80%; padding: 0 0 3px 20px; margin: 0 0 10px 0; font-weight: bold; color: #FF6600; float: left; width: 175px; background: url(../images/icons/icon_orangeBullet.gif) 0 0 no-repeat;}
#bookNav li a{ color: #FF6600; text-decoration: none; display: block;}
#bookNav li a:hover{ color: #B30000; text-decoration: none;}

#bookNav .subnode{ clear: both;}

#bookNav ul ul{ margin: 10px 0 0 -18px;}
#bookNav li li{font-size: 90%; padding: 0 0 0 15px; margin: 0 0 5px 0; font-weight: normal; color: #B30000; float: left; width: 175px; background: url(../images/icons/icon_productListArrow.gif) 0 4px no-repeat;}
#bookNav li li a{color: #666;}
#bookNav ul ul ul{ margin: 10px 0 0 0px;}
#bookNav li li li{font-size: 100%;}

.imageBook{ float: left; margin: 0 10px 20px 0; clear: both; text-align: center; width: 100%;}

/* *************************************************************
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 table, #mainContent2 table{ float: left; font-size: 70%; color: #000; width: 100%; margin: 10px 0 20px 0; border: 1px solid #ccc; border-collapse: collapse;}
#mainContent th, #mainContent2 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%;}
#mainContent2 td{ color: #000; padding: 5px; border: 1px solid #ccc;}
#mainContent2 tr a{ color: #FF3300; text-decoration: underline;}
#mainContent2 tr a:hover{ color: #FF9428; text-decoration: underline;}

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

#mainContent2 .bg{ background-color: #ebebeb;}
#mainContent2 .bg2{ background-color: #f8f8f8;}
#mainContent2 .end{ background: url(../images/bg/table_line.gif) 0px 5px repeat-x; height: 10px;}
#mainContent2 .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%; width: 100%;}

#panierTotal{ float: right; width: 350px;}

#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%;}
#mainContent2 .frais, #mainContent2 .fraisPrice{ color: #FF3300;}
#mainContent2 .htPrice{ color: #000;}
.tva, .tvaPrice{}
#mainContent2 .total, #mainContent2 .totalPrice{ font-size: 160%; border-bottom: 4px solid #ccc; padding: 8px 5px 5px 0;  background-color: #fff;}
#mainContent2 .totalPrice {color: #FF6600; font-size: 220%; background-color: #fff;}


/* 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;}
#mainContent2 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; }
#mainContent2 a.continue:hover{ color: #FF6600;}
#mainContent2 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; }
#mainContent2 a.return:hover{ color: #E34000;}

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

/* 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 */
#login form .text { width: 250px; font-size: 90%; height:15px; border:1px solid #CCCCCC;}
#login form .loginText { width: 150px; font-size: 90%; height:15px; border:1px solid #CCCCCC;}
#login form label{ width: 160px; float: left}
#login form textarea { font: 110% Arial, Helvetica, sans-serif; width: 520px; height: 100px;}
#login form .submit { background: url(../images/buttons/btn_envoyer.gif) 0 0 no-repeat; border: none; width: 100px; height: 25px; cursor: pointer; margin: 0;}
#login form .submit:hover{background: url(../images/buttons/btn_envoyer.gif) 1px 1px no-repeat;}
#login form .forgot { line-height: 120%; margin: 5px 0 0 0; font-size: 65%;}
#login p a{ color: #999999;}
#login .validate { background: url(../images/buttons/btn_validerDemande.gif) 0 0 no-repeat; width: 212px; height: 25px; cursor: pointer; border: none;}
#login .validate:hover{background: url(../images/buttons/btn_validerDemande.gif) 1px 1px no-repeat;}



/* *************************************************************
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; width: 335px;}
#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;}
#deliveryAdd p, #billingAdd p{width: 345px; line-height: 200%; margin: 0 0 3px 10px; display: inline; float: left; padding: 0; font-size: 70%;}
#deliveryAdd p a, #billingAdd p a{ color: #FF6600;}
#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;}
#mainContent2 #paymentList ul{ list-style: none; margin: 0 0 10px 0;}
#mainContent2 #paymentList li{ background: none; margin: 0; padding: 0; color: #666666;}
#mainContent2 #paymentList textarea{ width: 350px; height: 150px; font: 100% Arial, Helvetica, sans-serif;}


/* don't think this is used now
#checkout h3{background-position: 0 2px; margin: 15px 0 5px 0; display: inline; font-size: 90%;}
#checkout p {font-size:70%; margin: 0 0 10px 0; padding: 0; line-height: 160%; float: left; width: 700px;}
#checkout .text { width: 250px; font-size: 90%; height:15px; border:1px solid #CCCCCC;}
#checkout label{ width: 100px; float: left; clear: none;}
#checkout input{ float: left; clear: none;}
#checkout { font: 110% Arial, Helvetica, sans-serif; width: 520px; height: 100px;}
#checkout span{ float: left; clear: none; background-color: #CCCCCC;} /*


/* *************************************************************
PROCESSING PAGE - USED FOR PAYPAL
************************************************************* */
#processingWrap{ width: 420px; height: auto; left: 50%; top: 50%; margin: -105px 0 0 -210px; position: absolute; background: url(../images/shape/shape_loadingBar_bg.gif) 0 0 repeat-y; }
#processingBody{ width: 355px; float: left; margin: 0 0 0 15px; padding: 10px 15px 0 20px; display: inline;}
#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{ float: left; margin: 0 0 5px 20px; padding: 0; width: 210px; font-size: 75%; clear: none; display: inline;}
#processingBody img{ float: left;}
#processingBody .bar{ margin: 20px 0 0 0;}


/* *************************************************************
ALERT BOX
************************************************************* */
#alertBox{border: 1px solid #C60605; padding: 5px 10px; margin: 10px 0 20px 0; background-color: #FFF; text-align: left; float: left; clear: both;}
#mainContent #alertBox{width: 430px; }
#mainContent2 #alertBox{width: 720px;}

#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; line-height: 180%; clear: none; float: left; width: 100%;}
#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;}

/* Product Detail Alert Box */
#mainContent2 .productInfo #alertBox{width: 330px;}

/* *************************************************************
General Styles
************************************************************* */
.clearSpace{ float: left; clear: both; width: 200px; font-size: 0; height: 20px;}
#mainContent p.smallText{ font-size: 60%;}
a.button{ height: 27px; padding: 0 0 0 0; display: block; margin: 0 0 0 0; width: auto; float: left;}
a.button:hover{ height: 26px; padding: 1px 0 0 1px;}


/* *************************************************************
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;}


/* *************************************************************
TERMS AND CONDITIONS
************************************************************* */
div.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;}


/* *************************************************************
FOOTER
************************************************************* */
#footer{ float: left; background: url(../images/bg/bg_footer.png) 0 0 no-repeat; width: 780px; padding: 0 15px 50px 15px; height: 105px; text-align: left; margin: 0;}

#footer #newsletter{ float: left; width: 250px; margin: 10px 0 0 20px; display: inline;}
#footer #newsletter h2{font-size: 100%; padding: 0; margin: 0 0 3px 0; font-weight: bold; color: #B30000; float: left; width: 100%;}
#footer #newsletter p{font-size: 70%; padding: 0; margin: 0 0 7px 0; color: #FF6600; line-height: 100%; clear: both; float: left; width: 100%;}
#footer #newsletter input{ float: left; margin: 0 5px 0 0; font-size: 90%; padding: 3px;}
#footer #newsletter img{ float: left;}

#footer p{ color: #000000; font-size: 70%; margin: 0 0 3px 0; padding: 0; line-height: 150%;}

#btmCurve{ float: left; height: 42px; width: 780px; background: url(../images/shape/shape_btm_curve.gif) 0 0 no-repeat;}

#address{ width: 500px; float: left; margin: 10px 0 0 0; text-align: right; padding: 0 0 0 0;}
#address ul{ list-style: none; clear: both; margin: 30px 0 0 0; padding: 0; width: 500px; float: right;}
#address li{ float: right; font-size: 70%; width: 490px; padding: 0 5px; margin: 0; color: #990000; line-height: 180%;}

#btmNav{ width: 400px; margin: 20px auto 0 auto; text-align: right; padding: 0; float: right; clear: both;}
#btmNav ul{ list-style: none; clear: both; margin: 0 5px 0 0; padding: 0; width: 400px; float: right; display: inline;}
#btmNav li{ float: right; font-size: 65%; padding: 0 10px; margin: 0 0 10px 0; border-left: 1px solid #888; color: #666; line-height: 100%; text-transform: uppercase;}
#btmNav li a{ color: #666; text-decoration: none;}
#btmNav li a:hover, #address li a:hover{ color: #333; text-decoration: underline;}
#btmNav .noBorder, #address .noBorder{ border-left: none;}

#footerImage{ position: relative; height: 350px; padding: 0 0 0 0; margin-top: -250px; width: 100%; background: url(../images/bg/bg_illustration_btm.gif) 0 0 no-repeat; z-index: 1;}