/* CSS Created by Anagramme 2009 */

body{ font-family: Arial, Helvetica, sans-serif;}
form{ margin: 0; padding: 0;}


/* *************************************************************
MAIN PAGE WRAP
************************************************************* */
#wrap{ margin: 15px auto; width: 900px; text-align: center; clear: both;}


/* *************************************************************
HEADER
************************************************************* */
#header{ float: left; margin: 0; width: 900px;}
#header .logo{ float: left; padding: 0 0 0 0; margin: 0;}


/* FLAGS ************************************************************* */
#flags{margin: 0; width: 260px; float: right; padding: 0;}
#flags img{padding-left: 10px; float: right;}
#flags p{padding: 0; margin: 0; float: right; font-size: 65%; color: #996633; text-transform: uppercase;}


/* GROUPE NAVIGATION ************************************************************* */
#groupeNav{ float: right; margin: 10px 20px 0 0;}
#groupeNav ul{ float: left; margin: 0; padding: 3px 0 0 0; list-style: none; width: auto;}
#groupeNav li{ float: left; margin: 0 0 0 20px; padding: 0; font-size: 60%;}
#groupeNav a{ text-decoration: none; color: #99997F; text-transform: uppercase;}
#groupeNav a.accueil{ background: url(../images/icons/icon_home.gif) 0 1px no-repeat; padding: 0 0 0 15px;}
#groupeNav a.actualite{ background: url(../images/icons/icon_actualite.gif) 0 3px no-repeat; padding: 0 0 0 13px;}
#groupeNav a.newsletter{ background: url(../images/icons/icon_newsletter.gif) 0 3px no-repeat; padding: 0 0 0 25px;}
#groupeNav a.contact{ background: url(../images/icons/icon_contact.gif) 0 2px no-repeat; padding: 0 0 0 16px;}
#groupeNav a:hover,
#groupeNav a.active { color: #000; text-decoration: underline;}

#header form{ float: right; width: auto; margin: 10px 0 0 0; padding: 3px 0 1px 18px;}
#header form p{ font-size: 60%; text-transform: uppercase; margin: 0; padding: 0;}
#header form label{ float: left; width: auto; margin: 0 8px 0 0;}
#header form select{font: 90% Arial, Helvetica, sans-serif;}


/* SEPARATOR ************************************************************* */
.separator{ float: left; width: 900px; height: 1px; clear: both; border-top: 1px solid #D9D9D2; border-bottom: 1px solid #ECECE8; font-size: 0; margin: 12px 0 1px 0;}

/* TOP NAVIGATION ************************************************************* */
#topNav{ float: right; width: 700px; margin: 10px 0 8px 0; position: relative; z-index: 10; text-align: left; z-index: 1000;}
#topNav ul{ float: right; margin: 0; padding: 0; list-style: none; width: 700px;}
#topNav li{ width: auto; float: right; margin: 0 0 0 10px; padding: 0; font-size: 75%; color: #fff; cursor: pointer; white-space: nowrap;}
#topNav li a, #topNav span{ text-decoration: none; color: #999; text-transform: uppercase; padding: 2px 5px; display: block;}
#topNav li a:hover,
#topNav .active{ color: #fff; background-color: #008A2E;}

#topNav li ul {position: absolute; left: -999em; height: auto; width: 205px; w\idth: 195px; font-weight: normal; padding: 5px 0; margin: 0; background-color: #008A2E;}
#topNav li li {padding: 0; border-top: 0px solid #ccc; font-size: 90%; color: #fff; text-transform: uppercase; line-height: 180%; width: 180px;}
#topNav li li a{padding: 0 0 0 0; border: none; line-height: 28px; color: #fff;}
#topNav li li a:hover{ color: #9F0;}

#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 { color: #9F0; background-color: #008A2E;} */


/* TOP NAVIGATION ************************************************************* */
#header h1{ font: 90% Arial, Helvetica, sans-serif; font-style: italic; float: left; margin: 8px 0 0 0; padding: 0; color: #ADAD99; font-weight: normal; line-height: 100%; clear: left; width: auto; white-space: nowrap;}


/* *************************************************************
SLIDESHOW
************************************************************* */
#imageContainer {position:relative; margin:auto; width: 900px; height: 350px; overflow: hidden;}
#imageContainer img {display:none; position:absolute; top:0; left:0; z-index: 10;}

/* *************************************************************
MAIN PIC
************************************************************* */
#main_pic{ border-top: 3px solid #99997F; float: left; margin: 1px 0; padding: 1px 0; width: 900px; border-bottom: 3px solid #C1C1B3; }
#main_pic img{ float: left;}

/* *************************************************************
MAIN CONTENT
************************************************************* */
#content_wrap{ float: left; width: 900px; background: url(../images/bg/bg_main-content.gif) top right repeat-y; padding: 0; margin: 0; text-align: left;}
#mainContent{ float: left; width: 100%; margin: 15px 0 10px 0; display: inline; clear: left;}
#mainContent img{ float: left;}

#mainContent h1{ font-size: 130%; color: #333300; font-weight: normal; background: url(../images/bg/bg_title.gif) left center repeat-x; margin: 0 0 15px 0; padding: 0; float: left; clear: both; width: 100%; line-height: 100%;}
#mainContent h1 strong{ font-weight: normal; background-color: #fff; padding: 0 10px; margin: 0 10px; float: left;}

#mainContent h2{ float: left; clear: both; margin: 20px 0 10px 0; padding: 0 0 5px 0; font-size: 100%; color: #690; font-style: italic; font-weight: normal; border-bottom: 1px dotted #9C0;}
#mainContent h3{ float: left; clear: both; margin: 10px 0 5px 0; padding: 0 0 0 0; font-size: 110%; color: #669900; font-weight: normal; width: 520px; text-transform: uppercase;}
#mainContent h4{ float: left; clear: both; margin: 10px 0 5px 0; padding: 0 0 0 0; font-size: 100%; color: #444; font-weight: bold; width: 520px;}
#mainContent h5{ float: left; clear: both; margin: 10px 0 5px 0; padding: 0 0 0 0; font-size: 95%; color: #669900; font-weight: bold; width: 520px; margin-top:10px;}

#mainContent p{ font-size: 75%; margin: 0 0 15px 0; padding: 0; line-height: 160%; color: #666; clear: both; font-family: Verdana, Geneva, sans-serif; text-align: justify; float: left; width: 100%;}
#mainContent p a{ color: #690;}
#mainContent p a:hover{ color: #F60;}

#mainContent ul{ float: left; clear: both; margin: 0 0 20px 20px; padding: 0; list-style: none; font-family: Verdana, Geneva, sans-serif;}
#mainContent li{ font-size: 75%; line-height: 100%; color: #666; margin: 0 0 10px 0; padding: 0 0 0 15px; background: url(../images/icons/icon_greenArrowBullet.gif) 0 3px no-repeat; text-align: left;}
#mainContent li a{ color: #690;}
#mainContent li a:hover{ color: #F60;}

#mainContent .column-1{ float: left; width: 420px; clear: none;}
#mainContent .column-2{ float: right; width: 420px; clear: none;}
#mainContent .pic-1 { float: left; margin: 0px 10px 20px 0; padding: 1px; border: 3px solid #E0E0E0;}
#mainContent .pic-2 { float: right; margin: 0 0 20px 0; padding: 1px; border: 3px solid #E0E0E0; clear: right;}


/* *************************************************************
HOMEPAGE BLOCKS
************************************************************* */
.company-block{ float: left; background: url(../images/bg/bg_box-main.png) bottom left no-repeat; width: 316px; margin: 0 10px 10px 0; height:auto;}
.company-block img{ float: left; clear: both;}
.company-block .logo{ float: left; width: 110px; height: 80px; padding: 0; margin: 0 0 15px 10px; background-position: center; background-repeat: no-repeat;}

.company-block h3,
.company-block h4,
.company-block p {float: left; padding: 0; width: 180px; clear: none;}

.company-block h3{ color: #690; font-size: 75%; font-weight: normal; margin: 7px 0 3px 0; text-transform: uppercase;}
.company-block h3 a{color: #690; text-decoration: none;}
.company-block h3 a:hover{ color: #360; text-decoration: underline;}

.company-block h4{ color: #333; font-size: 75%; font-weight: normal; margin: 0 0 3px 0; }
.company-block h4 a{ color: #333; text-decoration: none;}
.company-block h4 a:hover{ color: #690; text-decoration: underline;}

.company-block p{ font: 70% Arial, Helvetica, sans-serif; line-height: 150%; padding-bottom: 25px; margin: 0; color: #666;}
.company-block ul{ float: left; width: 180px; margin: 0; padding: 0 0 20px 0; list-style: none;}
.company-block li{ font-size: 70%; padding: 0 0 0 12px; margin: 0; color: #666; background: url(../images/icons/icon_arrow_small.gif) 0 6px no-repeat; line-height: 150%;}


/* *************************************************************
PRESS / NEWS
************************************************************* */
#press { float: left; width: 890px; margin: 10px 0 10px 0; background-color: #f6f6f6; padding: 0 0 0 10px;}
#press a{ margin: 10px 10px 10px 0; display: block; width: 165px; height: 165px; float: left; background-position: center; background-repeat: no-repeat; border: 1px solid #ccc; background-color: #fff;}

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

.feauturedLogo {float: left; width: 300px; border: 3px solid #E0E0E0; padding: 1px;}


.listing .text, .listing_alt .text{ float: left; width: 560px;  height: auto; padding: 0 10px 0 0; margin: 0 0 0 20px; display: inline;}

#mainContent .listing h2, #mainContent .listing_alt h2{ margin: 0 0 5px 0; padding: 0; color: #690; 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: 75%; 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; width: 100%;}
.listing p a, .listing_alt p a{ color: #666;}
.listing p a:hover, .listing_alt p a:hover{ color: #FF6600; text-decoration: underline;}

/* *************************************************************
SUB CONTENT >>> RIGHT BLOCK
************************************************************* */
#subContent{ float: right; width: 210px; margin: 15px 5px 0 0; padding: 0 10px 20px 10px;}
#subContent h2{ font-size: 110%; color: #666; font-weight: normal; background: url(../images/bg/bg_title.gif) left center repeat-x; margin: 0 0 15px 0; padding: 0; float: left; clear: both; width: 100%; line-height: 100%;}
#subContent h2 strong{ font-weight: normal; background-color: #EAEAE5; padding: 0 10px; margin: 0 10px; float: left;}
#subContent h3{ margin: 10px 0 5px 0; padding: 0 0 0 0; font-size: 80%; color: #666; font-weight: bold;}
#subContent p{ font-size: 70%; margin: 0 0 10px 0; padding: 0; line-height: 160%; color: #666; clear: both; text-align: justify;}

#subContent ul{ float: left; clear: both; width: 200px; margin: 0; padding: 0; list-style: none; }
#subContent li{ font-size: 75%; line-height: 160%; color: #666;}
#subContent a{ color: #000;}
#subContent a:hover{ color: #690;}
#subContent a.plus{ background: url(../images/icons/icon_plus.gif) 0 5px no-repeat; padding: 0 0 0 12px; color: #690;}
#subContent a:hover.plus{ color: #000;}
#subContent .pic{ padding: 2px; border: 1px solid #ccc; background-color: #fff;}

a.download{ background: url(../images/icons/icon_download.gif) 0 0px no-repeat; padding: 0 0 3px 15px; color: #690;}
a:hover.download{ color: #000;}

/* *************************************************************
SUB CONTENT >>> CONTACT
************************************************************* */
#contact_block{ width: 200px; float: left; }
#contact_block h3{color: #444; font-size: 75%; width: 190px; display: inline; float: left; margin: 0 0 5px 0; padding: 0; font-weight: bold; clear: both; text-transform: none;}
#contact_block h4{color: #333; font-size: 70%; width: 190px; display: inline; float: left; margin: 0 0 2px 0; padding: 0; font-weight: bold; clear: both;}
#contact_block p{ float: left; width: 190px; font-size: 70%; margin: 0 0 8px 0; padding: 0; clear: none;}
#contact_block ul{ float: left; width: 190px; margin: 5px 0 20px 0; padding: 10px; list-style: none; display: inline; clear: none; background-color: #f1f1f1; border: 1px solid #fff;}
#contact_block li{float: left; width: 190px; font-size: 70%; color: #000; line-height: 160%; padding-left: 30px; margin: 0 0 5px 0; }
#contact_block li.phone{ background: url(../images/icons/icon_phone.gif) 8px 6px no-repeat; padding: 0 0 0 30px;}
#contact_block li.fax{ background: url(../images/icons/icon_fax.gif) 6px 3px no-repeat; padding: 0 0 0 30px;}
#contact_block li.email{ background: url(../images/icons/icon_email.gif) 0 6px no-repeat; padding: 0 0 0 30px;}
#contact_block li.website{ background: url(../images/icons/icon_website.gif) 8px 6px no-repeat; padding: 0 0 0 30px;}
#contact_block li.portable{ background: url(../images/icons/icon_portable.gif) 10px 0px no-repeat; padding: 0 0 0 30px;}

#contact_block .icon_access-map{ background: url(../images/icons/icon_access_map.gif) 0 2px no-repeat; padding: 0 0 0 18px;}

/* *************************************************************
CONTACT
************************************************************* */
#contactForm { float: left; width: 320px; margin: 10px 0 0 0; padding: 0 0 10px 0; display: inline; border: 1px solid #e1e1e1; background-color: #F9F9F9;}
#contactForm form { clear: both; margin: 10px 0 0 10px; float: left; width: 340px;}
#contactForm form p{width: 340px; line-height: 200%; margin: 0; float: left; font-size: 70%; padding: 0;}
#contactForm legend{ color: #3399FF; font-size: 120%; font-weight: normal; padding: 0 10px 10px 10px; margin: 0;}
#contactForm label{ width: 100px; float: left;}

#contactForm .btn_envoyer{ margin: 0; background: url(../images/buttons/btn_envoyer.gif) 0 0 no-repeat; border: none; height: 26px; width: 81px; font-size: 80%; color: #fff; padding: 0 0 0 30px; text-align: left; float: left; line-height: 100%; cursor: pointer;}
#contactForm .btn_envoyer:hover{ height: 25px; margin: 1px 0 0 1px;}
#contactForm .reset{ margin: 10px 10px 10px 0;}

#contactForm p.footnote{ font-size: 55%; color: #999999; margin: 20px 0 0 0;}
#contactForm .text { width: 150px; font-size: 100%; padding: 2px; border:1px solid #CCCCCC;}
#contactForm form textarea { font: 110% Arial, Helvetica, sans-serif; border:1px solid #CCCCCC; width: 180px; height: 100px;}
#contactForm td{ border:none;}
#contactForm tr{ border:none;}

#mainContent p.footnote{ font-size: 60%; color: #999999; margin: 20px 0 0 0; font-family: Arial, Helvetica, sans-serif; float:left;}

/* *************************************************************
ALERT BOXES
************************************************************* */
#alertBox{ float: left; width: 610px; background-color: #EFC; margin: 0 0 0 0; padding: 10px 0 0 10px;}
#alertBox p{ color: #360; font-size: 70%;}


/* *************************************************************
FOOTER
************************************************************* */
#footer{ width: 900px; float: left; clear: both; text-align: left; padding: 0; margin: 1px 0 20px 0; border-top: 3px solid #CCC; border-bottom: 2px solid #D6D6CC;}
#footer ul{ float: left; width: 880px; font-size: 70%; padding: 0 0 0 20px; margin: 1px 0 1px 0; list-style: none; background-color: #F7F7F7;}
#footer li{ float: left; color: #929292; padding: 0 10px 0 0; margin: 0 10px 0 0; line-height: 2.5em; text-transform: uppercase;}
#footer li a{color: #999999; text-decoration: none;}
#footer li a:hover{text-decoration: underline;}

#footer2{ width: 900px; float: left; clear: both; text-align: left; padding: 0; margin: 0 0 20px 0;}
#footer2 ul{ float: left; width: 880px; font-size: 70%; padding: 0 0 0 20px; margin: 1px 0 1px 0; list-style: none;}
#footer2 li{ float: left; color: #999; padding: 0 10px 0 0; margin: 0 20px 0 0; text-transform: none;}
#footer2 li a{color: #999999;}
#footer2 li a:hover{ color: #000; text-decoration: underline;}


/* *************************************************************
POPUP BOX WINDOW
************************************************************* */
.modalDialog_transparentDivs{ filter:alpha(opacity=50);	opacity:0.5; background-color:#000; z-index:10; position:absolute;}
.modalDialog_contentDiv{border: 1px solid #000; padding:0; z-index:100; position:absolute; background-color:#fff;}
.modalDialog_contentDiv_shadow{	z-index:90; position:absolute; background-color:#000; filter:alpha(opacity=30); opacity:0.3;}

#contactPopup { float: left; width: 360px; padding: 0; margin: 10px 0 0 10px;}
#contactPopup h1{ font-size: 130%; color: #333300; font-weight: normal; margin: 0 0 15px 0; padding: 0 0 10px 0; float: left; clear: both; width: 340px; line-height: 100%; border-bottom: 1px solid #ccc;}

#contactPopup p{ float: left; width: 300px; font-size:70%; margin: 0 0 0 0; padding: 0; line-height: 220%; display: inline; color: #666;}
#contactPopup form { float: left; width: 320px; margin: 0; padding: 10px; background-color: #EFEFEF;}
#contactPopup label{ width: 100px; float: left}
#contactPopup textarea { font: 110% Arial, Helvetica, sans-serif; width: 320px; height: 100px;}
#contactPopup .text{ border: none; font-size: 100%; background-color: #fff; border: 1px solid #ccc; padding: 4px; width: 180px;}
#contactPopup .submit{ float: left;}
/* #contactPopup .submit{ margin: 2px 10px 0 0; padding: 2px; background: url(../images/buttons/btn_email_popup_1.gif) 0 0 no-repeat; color: #fff; float: left; font-size: 90%; border: none; width: 116px; height: 26px;}
#contactPopup .submit:hover{ background-color: #FFFFFF; color: #666; cursor: pointer;} */

#contactPopup #replaceme p, #contactPopup #sackdata p{ float: left; width: 310px; margin: 10px 0 5px 0; padding: 0 0 0 10px;  display: inline; clear: both; color: #fff; font-size: 70%; background-color: #666;}

#contactPopup a{text-decoration: none; color: #000; float: right; }
#contactPopup a:hover{text-decoration: none; color: #CCC; }


/* *************************************************************
PRELOADER
************************************************************* */
#preloader_table{display:none; z-index:1098; position:absolute; filter:alpha(opacity=50); background-color:#ffffff; -moz-opacity:0.50; 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 #81AB00; background-color: #FAFFEA; 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;}


.projects_content a.mb{ float: left; width: 150px; height: 150px; overflow: hidden; float: left; margin: 0 1px 1px 0;}