/* CSS created by Anagram 2008 */

body{ font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 20px 0; background-color: #CCCCCC;}
form{ padding: 0; margin: 0; float: left;}
img{ float: left; border-color:#FFFFFF;}
img2{ float: left; border:10px solid #FFFFFF;}


/* ************************************
WRAP
************************************ */
#wrap{ text-align: center; margin: 0 auto; padding: 0; width: 720px; background-color: #fff; background: #fff url(../images/bg/bg_main_fade.jpg) 0 0 repeat-y; overflow: auto;}

object {display: block;}

/* ************************************
HEADER
************************************ */
#header{ background: url(../images/header/header_logo_bg.jpg) 0 0 no-repeat; float: left; width: 690px; height: 60px; margin: 0 0 0 15px; display: inline;}
#flags{ float: right; width: 100px; margin: 0 10px 0 0; display: inline;}

#flags a{ float: right; margin: 18px 5px 0 0; display: inline;}


/* ************************************
TOP NAVIGATION
************************************  */
#topNav{ float: left; width: 690px; margin: 1px 0 0 15px; display: inline; }
/* #topNav ul{ margin: 0; padding: 0; float: left; width: 690px; list-style: none;}
#topNav li{ float: left; margin: 0; padding: 0; height: 30px;}
#topNav li a{ float: left; display: block; font-size: 80%; color: #fff; text-decoration: none; line-height: 100%; padding: 0 23px; border-left: 1px solid #fff; margin: 8px 0 0 0;}

#topNav li a:hover{ text-decoration: underline; color: #ccc;} */

#topNav ul.bg_0{ background:url(../images/bg/bg_nav_blue.jpg) 0 0 repeat-x;}
#topNav ul.bg_1{ background:url(../images/bg/bg_nav_green.jpg) 0 0 repeat-x;}
#topNav ul.bg_2{ background:url(../images/bg/bg_nav_orange.jpg) 0 0 repeat-x;}
#topNav ul.bg_3{ background:url(../images/bg/bg_nav_purple.jpg) 0 0 repeat-x;}
#topNav ul.bg_4{ background:url(../images/bg/bg_nav_red.jpg) 0 0 repeat-x;}
#topNav ul.bg_5{ background:url(../images/bg/bg_nav_yellow.jpg) 0 0 repeat-x;}


/* *************************************************************
TOP NAVIGATION
************************************************************* */
/* #topNav{ border: 2px solid #CC0066; float: left; width: 756px; background: #FF0D86 url(../images/bg/bg_topNav.jpg) 0 0 repeat-x; margin: 0 0 10px 0;} */

#topNav ul { float: left; width: 690px; height: 28px; margin: 0; padding: 0; list-style: none;}

#topNav a{display: block; width: auto; text-decoration: none; padding: 0; text-align: left; margin: 0; color: #fff; }

#topNav li {float: left; margin: 0; padding: 0; width: auto; color: #fff; font-size: 80%; line-height: 100%; font-weight: normal; cursor: pointer;}
#topNav .active{background-color:#000;}
#topNav li a{padding: 0 23px 0 22px; border-left: 1px solid #FFF; line-height: 28px; color: #fff;}
#topNav li .active{padding: 0 22px; border-left: 1px solid #FFF; line-height: 28px; color: #fff; background-color:#000;}
#topNav li a:hover{ color: #fff; background-color: #000;}
#topNav li ul {position: absolute; left: -999em; height: auto; width: 185px; w\idth: 175px; font-weight: normal; padding: 0; margin: 0; border: 1px solid #fff;}
#topNav li li {padding: 0; background-color: #666; border-top: 0px solid #ccc; font-size: 85%; color: #000; text-transform: uppercase;}
#topNav li li a{padding: 0 0 0 23px; border: none; line-height: 28px;}
#topNav li li a:hover{ background-color: #000; color: #fff;}

#topNav li ul ul {margin: -23px 0 0 120px;}
#topNav li li li{ font-size: 100%;}
#topNav li ul a {width: 162px; w\idth: 157px;}

#topNav li:hover ul ul, #topNav li:hover ul ul ul, #topNav li.sfhover ul ul, #topNav li.sfhover ul ul ul {left: -999em;}
#topNav li:hover ul, #topNav li li:hover ul, #topNav li li li:hover ul, #topNav li.sfhover ul, #topNav li li.sfhover ul, #topNav li li li.sfhover ul {	left: auto;}
#topNav li:hover, #topNav li.sfhover { background-color: #000; color: #000;}

#topNav li span{padding: 0 22px; display: block; border-left: 1px solid #FFF; line-height: 28px; color: #fff;}
#topNav .noBorder{ border: none;}


/* SUB NAVIGATION ************************************** */
#subNav { float: left; width: 690px; margin: 1px 0 0 15px; display: inline; clear: both; background-color: #ededed; border-bottom: 1px solid #ccc;}
#subNav ul{ margin: 0; padding: 0; float: left; width: 690px; list-style: none;}
#subNav li{ float: left; margin: 0; padding: 0; font-size: 65%; text-transform: uppercase; height: 30px; display: inline;}
#subNav li a{ color: #000; margin: 0 5px 0 10px; float: left; text-decoration: none;}
#subNav span{ padding: 9px 0 0 10px; margin: 0; float: left;}
#subNav .monEspace{ padding: 9px 0 0 12px; float: left; background: url(../images/icons/icon_mon_espace.gif) 0 10px no-repeat;}
#subNav .panier{ padding: 9px 0 3px 22px; float: left; background: url(../images/icons/icon_view_cart.gif) 0 7px no-repeat;}
#subNav .email{ padding: 9px 0 3px 25px; float: left; background: url(../images/icons/icon_email.gif) 0 11px no-repeat;}
#subNav a.email:hover, #subNav a.monEspace:hover, #subNav .panier:hover{ text-decoration: underline;}


/* *************************************************************
MAIN CONTENT AREA
************************************************************* */
#contentWrap{ float: left; width: 690px; margin: 5px 0 0 15px; display: inline; background: url(../images/bg/bg_mainContent.gif) 0 0 repeat-y;}

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

#mainContent h1, #mainContent h2{ font-size: 140%; color: #000; font-weight: normal; padding: 0 0 15px 0; margin: 0 0 10px 0; float: left; width: 420px; letter-spacing: -0.03em; background: url(../images/bg/bg_title_lines.gif) bottom left no-repeat;}
#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 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: 70%; 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{ color: #666;float: left; font-size: 90%;clear: both; list-style: none; width: 350px; margin: 0 0 2px 10px; padding: 0;}
#mainContent 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 ol li{font-size: 75%; line-height: 200%; color: #000;}


/* WIDE FULL PAGE ********** */
#mainContent2{width: 680px; float: left; text-align: left; margin: 10px 0 0 20px; padding: 0; display: inline;}
#mainContent2 h1{ font-size: 140%; color: #000; font-weight: normal; padding: 0 0 15px 0; margin: 0 0 10px 0; float: left; width: 420px; text-transform: uppercase; letter-spacing: -0.03em; background: url(../images/bg/bg_title_lines.gif) bottom left no-repeat;}
#mainContent2 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;}
#mainContent2 h1 a:hover{ color: #FF6600;}

#mainContent2 p{ margin: 0 0 0 0; clear: both; font-size: 75%; line-height: 160%; float: left; width: 100%; display: inline; text-align:justify;}

#mainContent2 form{ width: 100%;}


/* *************************************************************
SUB CONTENT
************************************************************* */
#subContent{ float: left; width: 250px; margin: 0 0 0 0; padding: 0 0 5px 0; text-align: left; display: inline;}

.smallBox{ width: 218px; padding: 10px; margin: 5px 0px 0 5px; background-color: #fff; border: 1px solid #ccc; float: left; display: inline;}
.smallBox h2{ font-size: 1.2em; color: #FF6600; margin: 0 0 5px 0; display: inline; float: left; font-weight: normal; letter-spacing: -0.05em;}
.smallBox p{ font-size: 75%; color: #666; margin: 0 0 0 0; padding: 0; clear: both; line-height: 150%;}
.smallBox ul{ margin: 0 0 0 0; padding: 0 0 0 20px; width: 200px;}
.smallBox li{ font-size: 70%; line-height: 180%; padding: 0; margin: 0;}

#subContent dl{ float: left; width: 245px; 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: 70%; line-height: 170%;}
#subContent dt {width: 58px; clear: both; color: #000; text-transform: capitalize;}
#subContent dd {width: 157px; color: #666; margin: 0 0 0 10px; display: inline;}

#subContent .subcontentPic{ float: left; margin: 5px 0 0 5px; border: 1px solid #ccc; padding: 1px; display: inline;}


/* *************************************************************
HOMEPAGE
************************************************************* */
.promoBlock{ float: left; width: 213px; margin: 7px 0px 0 5px; display: inline; text-align: left; background: url(../images/shape/bg_product_list.jpg) 0 0 repeat-y;}
.promoBlock table{padding: 0; margin: 4px 0 4px 13px; width: 187px; border: none; float: left; display: inline; border-collapse: collapse;}
.promoBlock td{ border: none; padding: 0; margin: 0; text-align: center; width: 187px; height: 115px;}
.promoBlock img{ float: left; padding: 0; margin: 0;}
.promoBlock table img{ float: left; padding: 0; margin: 0;}


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


/* *************************************************************
PRESS
************************************************************* */
#press { }
#press a{ margin: 0 5px 30px 20px; display: inline; width: 145px; height: 145px; float: left; background-position: center; background-repeat: no-repeat;}


#news{ float: left; border-color: #ccc; margin: 0; clear: both; width: 680px; margin-bottom:15px;}
.listing, .listing_alt{ float: left; border-bottom: 1px dotted #ccc; padding: 15px 0; margin: 0; clear: both; width: 680px; height: auto;background-color: #FFF;}

#news .listing p, #news .listing_alt p{margin: 0; padding: 0; line-height: 180%; font-size: 70%; text-align:justify;}
.feauturedLogo {float: left; padding: 0;  text-align: center; width:130px;}
.listing .text, .listing_alt .text{ float: left; width:500px;  height: auto; padding: 0 10px 0 0;}
.listing h2, .listing_alt h2{ margin: 0 0 5px 0; padding: 0; color: #7F3A8D; font-size: 100%; border: none;}
.listing h2 a, .listing_alt h2 a{ color: #669900; text-decoration: none;}
.listing h2 a:hover, .listing_alt h2 a:hover{ color: #FF6600; text-decoration: underline;}
.listing h3, .listing_alt h3{ margin: 0 0 5px 0; padding: 0; color: #669900; font-size: 750%; border: none;}
.listing h3 a, .listing_alt h3 a{ color: #669900; text-decoration: none;}
.listing h3 a:hover, .listing_alt h3 a:hover{ color: #FF6600; text-decoration: underline;}
#news .listing p, #news .listing_alt p{margin: 0; padding: 0; line-height: 180%; font-size: 70%; text-align:justify;}
.listing p a, .listing_alt p a{ color: #666;}
.listing p a:hover, .listing_alt p a:hover{ color: #FF6600; text-decoration: underline;}

.listing h4, .listing_alt h4{ margin: 10px 0 0 0; padding: 0; color: #669900; font-size: 80%; border: none;}
ul.gallery { float: left; list-style: none; margin: 15px 0; padding: 0;  width:auto;}
.gallery li { list-style:none;padding: 0; margin: 2px 0; float: left; line-height: 100%; font-size: 70%;}
.gallery li.intro {margin: 25px 15px 0 0; float: left; width:100px; line-height: 100%; font-size: 70%; font-weight:bold; }
.gallery li a{ color: #666; text-decoration: none;}

.gallery a.img_mask{ float: left; width: 70px; height: 70px; border:1px solid #D4D4D4; padding:1px; background-position: center; background-repeat: no-repeat; margin: 0 0 3px 5px;}


/* *************************************************************
PRELOADER
************************************************************* */
#preloader_table{display:none; z-index:1098; position:absolute; filter:alpha(opacity=40); background-color:#ffffff; -moz-opacity:0.40; width: 100%; height: 100%;}
#div_desktop{width:1%; height:1%; text-align:center; position:absolute; left:0px; top:0px; z-index:1001;}
.preloader {width: 300px; border: 3px solid #FF0D86; background-color: #FDF7FA; height: auto; float: left; padding: 10px;}
.preloader img{ float: left; display: block; margin: 0 10px 0 0;}
.preloader h2, .preloader p{ float: left; width: 250px; margin: 0; padding: 0; font-size: 70%; color: #000; clear: none;}
.preloader h2{ font-weight: bold; margin-top: 3px;}
#loader{height:56px; width:300px; display:block; position:absolute; left:0px; top:0px; z-index:1100;}
#preloader_iframe{border-width:0; display:none; z-index:1099; position:absolute; height:56px; width:320px;}


/* *************************************************************
FOOTER
************************************************************* */
#footer{ float: left; width: 690px; margin: 5px 0 0 15px; display: inline; padding: 0; background-color: #EDEDED; clear: both;}
#footer ul#btmNav{ float: left; margin: 0; padding: 0; width: 690px; list-style: none; height: 2.5em;}
#footer ul#btmNav li{ float: left; font-size: 70%; color: #666; text-transform: capitalize;}
#footer ul#btmNav li a{ color: #666; margin: 15px 0 0 6px; padding: 0 6px 0 0; float: left; border-right: 1px solid #c3c3c3; text-decoration: none; display: inline;}
#footer ul#btmNav li a:hover{ color: #000; text-decoration: underline;}
#footer ul#btmNav li.cones{ float: right; margin: 8px 8px 0 0;}

#footer ul#btmNav2{ float: left; margin: 0; padding: 0; width: 690px; list-style: none; height: 2em; border-top: 1px dotted #999; clear: both;}
#footer ul#btmNav2 li{ float: left; font-size: 70%; color: #333; margin: 10px 0 0 15px; padding: 0 10px 0 0; display: inline;}