/* Stylesheet Designed by Anagramme 2007 */
body{margin: 0; padding: 20px 0; font-family: Arial, Helvetica, sans-serif; color: #666; background-color: #666;}

form{margin: 0; padding: 0;}

/* *************************************************************
TOP AND BOTTOM SHADOW
************************************************************* */
#shadowTop{width: 820px; text-align: center; margin: 0 auto; padding: 0 0 0 5px; text-align: center; background: url(../images/bg/bg_shadow_top.gif) 0 0 no-repeat; height: 13px; font-size:0;}
#shadowBtm{width: 820px; text-align: center; margin: 0 auto; padding: 0 0 0 5px; text-align: center; background: url(../images/bg/bg_shadow_btm.gif) 0 0 no-repeat; height: 13px; font-size:0;}


/* *************************************************************
MAIN CONTENT WRAP
************************************************************* */
#wrap /* used for main site wrap */
{width: 810px; text-align: center; margin: 0 auto; padding: 0 0 0 10px; text-align: center; background: #fff url(../images/bg/bg_shadow_main.gif) 0 0 repeat-y; overflow: auto;}
#contentWrap /* used for lefthand bg color */
{ float: left; width: 800px; background: url(../images/bg/bg_left_nav.gif) 0 0 repeat-y;} 


/* *************************************************************
HEADER
************************************************************* */
#header{ float: left; width: 800px; text-align: left; margin: 0 0 0 0; padding: 0;}
#header img{ float: left;}
#topNav{ float: right; margin: 0; width: 127px; display: inline; height: 115px; background-color: #B7C922;}
#topNav ul{ float: left; list-style: none; margin: 45px 0 0 15px; padding: 0; display: inline;}
#topNav li{ float: left; padding: 0 ; margin: 0; font-size: 70%; color: #fff; line-height: 180%; clear: both;}
#topNav a{ color: #fff; text-decoration: none;}
#topNav a:hover{ color: #000; text-decoration: none;}

#promoBar{float: left; margin: 0; padding: 0; clear: both; width: 800px; background: #323232; height: auto;}
#promoBar p{ margin: 0; padding: 0; line-height: 240%; }
#promoBar p.promo{ color: #fff; margin: 0 0 0 0; width: 500px; float: left; display: inline; font-style: italic; font-size: 65%;}
#promoBar a { color: #fff; text-decoration: none;}
#promoBar p.newsletter{ background: #666; text-align: center; width: 163px; display: block; float: right; margin: 0; font-size: 70%;}
#promoBar p.espace{ background: #999; text-align: left; width: 112px; display: block; float: right; margin: 0; padding-left: 15px; font-size: 70%;}
#promoBar p.espace a:hover, #promoBar p.newsletter a:hover{ color: #000;}


/* *************************************************************
HOMEPAGE
************************************************************* */
#hp_wrap{ float: left; width: 600px; text-align: left; background: #fff;}

#hp_intro{width: 580px; float: left; text-align: left; margin: 15px 0 15px 8px; padding: 0; display: inline; display: inline;}
#hp_intro img{ float: left;}
#hp_intro a{ float: left; display: block; width: 181px; height: 25px; color: #fff; text-decoration: none; font-size: 75%; padding: 46px 0 0 12px;}
#hp_intro a:hover{ color: #99CC00}
#hp_intro a.laGamme{ background: url(../images/pics/hp_la-gamme.jpg) 0 0 no-repeat;}
#hp_intro a.lesStandards{ background: url(../images/pics/hp_iml.jpg) 0 0 no-repeat;}
#hp_intro a.design{ background: url(../images/pics/hp_design.jpg) 0 0 no-repeat;}

#hp_mainBlock{ float: left; width: 565px; margin: 0 0 10px 15px; display: inline;}
#hp_mainBlock img{ float: left; display: block; margin: 0 0 10px 0;}
#hp_mainBlock h1{ width: 565px; font-size: 90%; color: #000; float: left; padding: 0; margin: 0 0 10px 0;}
#hp_mainBlock p{ width: 565px; font-size: 70%; color: #000; float: left; padding: 0; margin: 0 0 10px 0; line-height: 140%; text-align:justify;}

#flash{ width: 460px; background: #E6E6E6; float: left; margin: 0 0 15px 15px; display: inline; clear: both;}
#flash img{ float: left; display: block;}
#flash h2{ font-size: 75%; color: #fff; font-weight: normal; margin: 0 0 10px 0; padding: 0 0 0 35px; background: #B7C922 url(../images/icons/icon_arrow-white-down.gif) 10px 0 no-repeat; line-height: 180%; float: left; width: 305px;}
#flash h2 span{ background-color: #9BA91D; float: right; font-size: 90%; padding: 0 5px;}
#flash h3{ font-size: 70%; margin: 0 0 5px 10px; padding: 0; font-weight: bold; color: #000; float: left; width: 330px;}
#flash p{ font-size: 70%; margin: 0 10px 0 10px; padding: 0; color: #666; float: left; width: 320px; display: inline;}
#flash p a{ background: url(../images/icons/icon_zoom_grey.gif) 0 2px no-repeat; padding: 0 0 0 15px; color: #000; text-decoration: none; margin: 5px 0 0 0; float: left; font-weight: bold; width: 250px;}
#flash p a:hover{ color: #669900;}

#flashLinks{ float: left; width: 100px; margin: 0 0 0 10px; display: inline;}
#flashLinks h2{ font-size: 65%; color: #999; width: 110px; margin: 5px 0 10px 0; padding: 0;}
#flashLinks h2 span{ color: #666;}
#flashLinks img{ float: left; margin: 0 5px 5px 0; display: inline;}


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

#subContent #nav ul{ margin: 0; padding: 10px 10px 10px 15px; list-style: none;}
#subContent #nav li{ margin: 0; line-height: 150%; color: #000; font-size: 65%; padding: 3px 0;}
#subContent #nav li a{padding: 0 0 0 20px; display: block; background: url(../images/icons/icon_arrow-grey.gif) 0 0 no-repeat; color: #000; text-decoration: none;}
#subContent #nav li a:hover, #subContent #nav .active{ display: block; background: url(../images/icons/icon_arrow-white.gif) 0 0 no-repeat; color: #fff;}
#subContent #nav h2{ font-size: 75%; color: #fff; font-weight: normal; margin: 0 0 2px 0; padding: 0 0 0 40px; background: #B7C922 url(../images/icons/icon_arrow-white-down.gif) 15px 0 no-repeat; line-height: 180%;}


#subContent #news{ width: 200px; float: left; background-color: #E6E6E6;}
#subContent #news h2{ font-size: 75%; color: #fff; font-weight: normal; margin: 0 0 15px 0; padding: 0 0 0 40px; background: #B7C922 url(../images/icons/icon_arrow-white-down.gif) 15px 0 no-repeat; line-height: 180%;}
#subContent #news h3{ font-size: 70%; margin: 0 5px 5px 15px; padding: 0; font-weight: bold; color: #000;}
#subContent #news p{ font-size: 70%; margin: 0 10px 15px 15px; padding: 0; color: #666;}

/* SEARCH  */
#subContent #search { float: left; width: 170px; margin: 10px 0 15px 15px; display: inline;}
#search fieldset{ border: none; background-color: #E6E6E6; margin: 0; padding: 8px; width: 155px; overflow: auto;}
#subContent #search h2{ font-size: 70%; color: #000; margin: 0 0 3px 0; display: inline; float: left;}
#subContent #search h2 span{ color: #B7C922;}
#subContent #search p{ float: left; width: 155px; margin: 3px 0 0 0; padding: 0; font-size: 70%; color: #000;}
#subContent #search p.shadow{ background: url(../images/bg/bg_textBox_shadow.gif) 1px 3px no-repeat; padding: 0 0 10px 0;}
#subContent #search label{ float: left; width: 60px; margin: 2px 0 0 0;}
#subContent #search .text{ width: 149px; font-size: 80%; float: left; margin: 1px 0 0 5px; border: 0;}
#subContent #search .smallText{ width: 31px; font-size: 80%; float: left; padding: 2px 3px 7px 12px; margin: 0; border: 0; background: url(../images/bg/bg_textBox_shadow_sml.gif) 5px 0 no-repeat;}
#subContent #search .btn{ float: right; padding: 0; margin:0; text-align: right;}

#subContent #quickLinks{ width: 200px; float: left; background-color: #E6E6E6; text-align: right; padding: 15px 0 5px 0; margin: 0; clear: both;}
#quickLinks a{ float: right; display: block; width: 181px; height: 25px; color: #fff; text-decoration: none; font-size: 75%; padding: 46px 0 0 10px; text-align: left;}
#quickLinks a:hover{ color: #99CC00}
#quickLinks a.laGamme{ background: url(../images/pics/btn_la-gamme.jpg) 0 0 no-repeat;}
#quickLinks a.lesStandards{ background: url(../images/pics/btn_iml.jpg) 0 0 no-repeat;}
#quickLinks a.design{ background: url(../images/pics/btn_design.jpg) 0 0 no-repeat;}


/* DHTML GOODIES LEFT NAV */
#dhtmlgoodies_tree li{list-style-type:none;	}
#dhtmlgoodies_topNodes{margin-left:0px; padding-left:0px;}
#dhtmlgoodies_topNodes ul{ margin-left:20px; padding-left:0px; display:none;}
#dhtmlgoodies_topNodes ul ul{ margin-left:40px; padding-left:0px;}
#dhtmlgoodies_tree .tree_link{padding-left:2px; }
#dhtmlgoodies_tree img{padding-top:2px; display: none; }
#dhtmlgoodies_tree a{color: #000000; text-decoration:none;}
.activeNodeLink{background-color: #316AC5; color: #FFFFFF; font-weight:bold; }


/* *************************************************************
CONTENT AREAS
************************************************************* */
#mainContent {width: 600px; float: left; text-align: left; margin: 0 0 0 0; padding: 0; display: inline; background-color: #fff;}

#intro{width: 260px; margin: 15px 0 0 15px; text-align: left; border-bottom: 1px solid #666; display: inline; float: left;}
#intro h1{ font-size: 90%; color: #000;}

.imageBlock{ float: left; width: 70px; margin: 15px 0 0 15px; display: inline;}
.imageBlock img{ float: left; margin: 0 0 15px 0;}

.contentBlock a, .contentBlock2 a, .contentBlock3 a, .contentBlock4 a, .contentBlock5 a{ color: #669900;}
.contentBlock a:hover, .contentBlock2 a:hover, .contentBlock3 a:hover, .contentBlock4 a:hover, .contentBlock5 a:hover{ color: #000;}


.contentBlock { float: left; width: 220px; padding: 0; margin: 15px 0 0 15px; text-align: left; display: inline;}
.contentBlock h2{ color: #B7C922; font-size: 80%; text-transform: uppercase; font-weight: bold; float: left; width: 220px; padding: 0; margin: 0 0 10px 0; display: inline;}
.contentBlock h3{ color: #000; font-size: 75%; font-weight: bold; float: left; width: 230px; padding: 0; margin: 0 0 5px 0; display: inline;}

.contentBlock p{ float: left; width: 220px; padding: 0; margin: 0 0 15px 0; font-size: 70%; line-height: 140%; text-align: justify;}
.contentBlock ul{ margin: 0; padding: 0; float: left; list-style: none;}
.contentBlock li{ float: left; width: 225px; padding: 0 0 0 15px; margin: 0; font-size: 70%; line-height: 180%; background: url(../images/icons/icon_bullet_green.gif) left center no-repeat;}
.contentBlock li a{ text-decoration: none; color: #666;}
.contentBlock li a:hover{ color: #000; text-decoration: underline;}

.contentBlock2{ float: right; width: 250px; padding: 0; margin: 0; text-align: left; display: inline;}
.contentBlock2 img{ margin: 0 0 15px 0; float: right;}
.contentBlock2 h3{ color: #000; font-size: 75%; font-weight: bold; float: left; width: 230px; padding: 0; margin: 0 0 5px 0; display: inline;}
.contentBlock2 p{ float: left; width: 220px; padding: 0; margin: 0 0 15px 0; font-size: 70%; line-height: 140%; text-align: justify;}

.contentBlock3{ float: right; width: 300px; padding: 0; margin: 0; text-align: left;}
.contentBlock3 img{ margin: 0 0 15px 0; float: right;}
.contentBlock3 h3{ color: #000; font-size: 75%; font-weight: bold; float: left; width: 280px; padding: 0; margin: 0 0 5px 0; display: inline;}
.contentBlock3 p{ float: left; width: 280px; padding: 0; margin: 0 0 15px 0; font-size: 70%; line-height: 140%; text-align: justify;}
.contentBlock3 .thumb{ float: left; border: 1px solid #000; margin: 0 10px 10px 0;}

.contentBlock4{ float: left; width: 265px; padding: 0 0 15px 0; margin: 0 10px 0 15px; text-align: left; display: inline;}
.contentBlock4 h3{ color: #666; font-size: 75%; font-weight: bold; float: left; width: 275px; padding: 0; margin: 0 0 5px 0; display: inline;}
.contentBlock4 h4{ color: #B7C922; font-size: 75%; font-weight: bold; float: left; width: 275px; padding: 0; margin: 0 0 5px 0; display: inline;}
.contentBlock4 p{ float: left; width: 265px; padding: 0; margin: 0 0 15px 0; font-size: 70%; line-height: 140%; text-align: justify;}
.contentBlock4 ul{ margin: 0; padding: 0; float: left; list-style: none; width: 275px;}
.contentBlock4 li{ float: left; width: 245px; padding: 0 0 0 15px; margin: 0; font-size: 70%; line-height: 160%; background: url(../images/icons/icon_bullet_green.gif) 0 8px no-repeat;}
.contentBlock4 li a{ text-decoration: none; color: #666;}
.contentBlock4 li a:hover{ color: #000; text-decoration: underline;}

.contentBlock5{ float: left; width: 280px; padding: 0; margin: 15px 0 0 15px; text-align: left; display: inline;}
.contentBlock5 h2{ color: #B7C922; font-size: 80%; text-transform: uppercase; font-weight: bold; float: left; width: 220px; padding: 0; margin: 0 0 10px 0; display: inline;}
.contentBlock5 h3{ color: #000; font-size: 75%; font-weight: bold; float: left; width: 230px; padding: 0; margin: 0 0 5px 0; display: inline;}
.contentBlock5 p{ float: left; width: 270px; padding: 0; margin: 0 0 15px 0; font-size: 70%; line-height: 140%; text-align: justify;}


.moreInfo{ background: url(../images/icons/icon_plus.gif) 0 1px no-repeat; padding: 0 0 0 20px;}
.line{ border-bottom: 1px solid #666; float: left; width: 220px; height: 5px; margin: 0 0 15px 0; display: inline; font-size: 0;}
.lineWide{ border-bottom: 1px solid #666; float: left; width: 555px; height: 5px; margin: 0 0 15px 15px; display: inline; font-size: 0;}

.clearSpace{ width: 100%; float: left; height: 5px; margin: 0 0 0 0; font-size: 0; padding: 0;}


/* *************************************************************
EXCLUSIVE BLOCK
************************************************************* */
#exclusiveBlock{ float: right; background: url(../images/pics/img_exclusive_top.jpg) 0 0 no-repeat; width: 265px; height: 111px; padding: 0 0 0 30px;}
#exclusiveBlock a{ float: left; margin: 10px 10px 10px 0; display: inline; width: 23px; height: 23px}


/* *************************************************************
LES GAMMES
************************************************************* */
#lesGammes{ float: right; background: url(../images/pics/img_les-gammes_top.jpg) 0 0 no-repeat; width: 270px; height: 111px; padding: 0 0 0 20px;}
#lesGammes a{ float: left; margin: 10px 10px 10px 0; display: inline; width: 23px; height: 23px}
#lesGammes img{ float: left;}
#lesGammes p{ float: left; margin: 5px 0 0 5px; padding: 0; display: inline; font-size: 70%; color: #fff; width: 248px; line-height: 110%;}
#lesGammes ul{ font-size: 70%; color: #fff; float: left; width: 200px; margin: 10px 0 0 10px; padding: 0 0 0 10px; list-style: square; display: inline;}
#lesGammes li{ margin: 0 0 0 5px; padding: 0;}


/* *************************************************************
IML
************************************************************* */
#imlBlock{ float: right; background: url(../images/pics/img_iml_top.jpg) 0 0 no-repeat; width: 270px; height: 100px; padding: 0 0 0 30px; text-align: left;}
#imlBlock a{ float: left; margin: 10px 10px 10px 0; display: inline; width: 23px; height: 23px}
#imlBlock img{ float: left;}
#imlBlock p{ float: left; margin: 0 0 0 0; padding: 0; display: inline; font-size: 70%; color: #fff; width: 278px; line-height: 110%;}
#imlBlock ul{ font-size: 70%; color: #fff; float: left; width: 200px; margin: 0; padding: 0 0 0 10px; list-style: square;}
#imlBlock li{ margin: 0 0 0 5px; padding: 0;}

/* *************************************************************
QUALITE
************************************************************* */
#footerPic{ float: right; background: #000 url(../images/pics/img_qualitie_footer.jpg) 0 0 no-repeat; width: 540px; height: 164px; text-align: left; padding: 40px 0 0 20px;}
#footerPic p{ float: left; width: 300px; margin: 0 0 10px 0; font-size: 65%; color: #fff; padding: 0;}
#footerPic p.altColor{ color: #B7C922;}


/* *************************************************************
ESPACE CLIENT
************************************************************* */
#espaceClient { float: left; width: 580px; margin: 20px 0 0 20px; display: inline;}
#espaceClient h2{ float: left; width: 190px; border-bottom: 2px solid #BCBDC0; padding: 20px 0 10px 0; margin: 0;}
#espaceClient h2 img{ float: left;}
#espaceClient h3{ float: left; clear: both; width: 500px; padding: 0; margin: 5px 0 20px 0; font-size: 90%; color: #000;}
#espaceClient .intro{ float: right; border: 2px solid #BCBDC0; background-color: #BCBDC0; width: 386px;}
#espaceClient .intro .logo{ float: left; width: 140px; height: 100px; background: #fff;}
#espaceClient .intro p{ font-size: 70%; color: #000; float: right; width: 226px; padding: 10px 10px 0 0; margin: 0; text-align: justify;}

#espaceClient h4{ background-color: #B7C922; padding: 5px 10px; margin: 0; font-size: 80%; color: #fff; float: left; width: 150px; clear: both;}
.dataBlock{ float: left; margin: 0 0 20px 0; width: 560px; background-color: #E7E7E9; border-bottom: 2px solid #ccc;}
.dataBlock ul{ margin: 0; padding: 0; list-style-type: square; color: #B7C922; float: left;}
.dataBlock li{ float: left; width: 260px; color: #000;}
.dataBlock table{ font-size: 70%; color: #000; margin: 10px 0 0 5px; clear: both;}
.dataBlock table th, .dataBlock table td{ padding: 0 0 5px 0;}
.dataBlock  a{ color: #B7C922; text-decoration: underline;}
.dataBlock a:hover{ color: #CFDF44; text-decoration: underline;}


/* *************************************************************
CONTACT PAGE
************************************************************* */
#contact{ width: 570px; margin: 0 0 0 15px; float: left; background: url(../images/pics/img_map.jpg) right 14px no-repeat; border-left: 1px solid #ccc; text-align: left; display: inline;}
#contact h2{ background: #808285 url(../images/icons/icon_arrow_down_grey.gif) 20px 0 no-repeat; color: #fff; font-size: 80%; padding: 0 0 0 40px; margin: 0 0 10px 0; float: left; width: 150px; line-height: 180%;}
#contact h3{ color: #B7C922; font-size: 75%; font-weight: bold; float: left; width: 175px; padding: 0; margin: 0 0 0 10px; display: inline; clear: both;}
#contact ul{ float: left; width: 190px; list-style: none; padding: 0; margin: 0 0 7px 10px; clear: both; display: inline;}
#contact li{ padding: 0; margin: 0; font-size: 70%; color: #000; line-height: 110%; float: left; clear: both; width: 190px;}

#contact form { clear: both; margin: 0; padding: 15px 0 10px 0; float: right; width: 429px; background-color: #E7E7E9;  border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#contact form p{width: 190px; line-height: 200%; margin: 0 0 2px 15px; float: left; font-size: 60%; display: inline; color: #000;}
#contact legend{ color: #3399FF; font-size: 120%; font-weight: normal; padding: 0 10px 10px 10px; margin: 0;}
#contact label{ width: 80px; float: left;}
#contact textarea{ width: 100px; height: 45px; float: right; font: 110% Arial, Helvetica, sans-serif;}
#contact .text{ float: right; width: 100px; font-size: 90%;}
#contact .submit{ margin: 0; border: 0; background-color: #808285; color: #fff; float: right; font-size: 90%; border: none; clear: both;}
#contact .reset{ margin: 10px 10px 10px 0;}
#contact p.footnote{ font-size: 55%; color: #999999; margin: 20px 0 0 0;}

#contact #sideBar{ background: #A7CE38 url(../images/icons/icon_arrow_down_white.gif) 20px 0 no-repeat; float: left; width: 140px; height: 154px; border-bottom: 1px solid #ccc;}
#contact #sideBar h3{ color: #fff; font-size: 80%; font-weight: bold; float: left; width: 80px; padding: 15px 0 0 30px; margin: 0 0 10px 0; display: inline; clear: both;}
#contact #sideBar p{ float: left; clear: both; color: #000; width: 120px; font-size: 60%; margin: 0 0 0 10px; display: inline;}

/* *************************************************************
GENERAL TABLE
************************************************************* */
#tabularData { float: left; clear: both; margin: 10px 0 15px 0; width: 585px}
#tabularData h2{ background-color: #B7C922; color: #fff; padding: 3px 20px 3px 5px; margin: 0 0 1px 15px; font-size: 70%; font-weight: bold; float: left; width: 150px; display: inline;}
#tabularData p{ float: right; font-size: 65%; margin: 0; padding: 0; width: 350px; clear: none; display: inline; text-align: right;}
#tabularData p.sort{ float: left; width: 230px; text-align: left; margin-left:2px; padding-top:4px;}
#tabularData p a{ color: #CC6600; text-decoration: underline;}
#tabularData p a:hover{ color: #FF9428; text-decoration: underline;}

#tabularData table{ float: left; color: #000; width: 570px; margin: 0 0 20px 15px; border-collapse: collapse; background-color: #E6E6E6; display: inline; padding: 0; clear: both;}
#tabularData th{font-weight: bold; height: 3em; background-color: #BFBFBF; padding: 0 5px 0 5px; font-size: 60%; text-align: center;}
#tabularData td{ color: #000; padding: 5px; border-top: 1px solid #fff; text-align: center; font-size: 70%;}
#tabularData tr a{ color: #CC6600; text-decoration: underline;}
#tabularData tr a:hover{ color: #FF9428; text-decoration: underline;}
#tabularData tr .button {text-decoration:none; color:#333; cursor:pointer;}
#tabularData tr a.button { color:#333;}
#tabularData tr a:hover.button { background:#F4F4F4; color:#000;}
#tabularData td img{ border: 1px solid #7F7F7F;}


/* *************************************************************
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: 150px; text-align: right; padding: 0 0 0 0; margin: 0; color: #666; display: inline; font-size: 70%; }
#pageNav select{ font-size: 80%; margin: 0 2px 0 5px;}
#pageNav a{padding: 0 2px; margin: 0 1px; color: #666; line-height: 150%; text-decoration: none;}

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


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


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


/* LOGIN + JOIN */
#login { float: left; width: 300px; padding: 0; margin: 0;}
#login p{ float: left; width: 300px; font-size:70%; margin: 0 0 2px 0; padding: 0; line-height: 220%; display: inline; color: #fff;}
#login label{ width: 100px; float: left}
#login .text{ border: none; font-size: 80%; background-color: #fff; padding: 2px; width: 180px;}
#login button{ margin: 2px 0 0 0; padding: 2px; background-color: #808285; color: #fff; float: left; font-size: 90%; border: none;}
#login button:hover{ background-color: #FFFFFF; color: #666;}


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

#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; width: 800px; padding: 0; text-align: left; margin: 0; clear: both; background-color: #D9D9D9;}
#footer ul{ list-style: none; clear: both; margin: 0; padding: 0; width: 100%; float: left; display: inline;}
#footer li{ float: left; font-size: 65%; padding: 0 10px; margin: 0; color: #000; background: url(../images/icons/icon_square-green.gif) left center no-repeat; line-height: 250%;}
#footer li a{ color: #666; text-decoration: none;}
#footer li a:hover, #address li a:hover{ color: #000; text-decoration: underline;}
#footer .noBorder, #address .noBorder{ border-left: none;}
#footer .none{ background: none;}
#footer .contact{ float: right;}
#footer .access{ float: right;}

/* *************************************************************
NEWS
************************************************************* */

#div_container {position:relative;width:189px;height:188px;	z-index:1;overflow:hidden;}
#Layer2 {position:relative;width:188px;height:22px;z-index:2;}