body{margin: 0; padding: 20px 0 0 0; font-family: Arial, Helvetica, sans-serif; background: url(../images/bg/bg.jpg) 0 0 repeat;}
form{margin: 0; padding: 0;}

a:active{outline: none;}
a:focus{-moz-outline-style: none;}

/* Centre Page ********** */
#page_wrap{ width: 972px; margin: 0 auto 20px auto; padding: 0; text-align: center; background: url(../images/bg/bg_shape.png) 0 bottom no-repeat; overflow: auto;}
#wrap{ float: left; width: 970px; height: auto; margin: 0; padding: 10px 0 0 0; text-align: left; border: 1px solid #669CC9; background: url(../images/bg/bg_main_nav.png) 650px 0 no-repeat;}
/* {  } */

body#page_2 #wrap{ border: 1px solid #0E76BC;}
body#page_3 #wrap{ border: 1px solid #25AAE1;}
body#page_4 #wrap{ border: 1px solid #4DC6E1;}
body#page_5 #wrap{ border: 1px solid #283891;}


/* *************************************************************
HEADER
************************************************************* */
#header{ width: 100%; height: 10px; float: left; clear: both; padding: 0; margin: 0 0 0 0; background-color: #669CC9;}

body#page_2 #header{ background-color: #0E76BC;}
body#page_3 #header{background-color: #669CC9;}
body#page_4 #header{background-color: #4DC6E1;}
body#page_5 #header{background-color: #283891;}


/* *************************************************************
LOGO
************************************************************* */
#logo{ float: left; width: auto; height: auto; padding: 0 0 0 0; margin: 20px 0 0 10px;}


/* *************************************************************
MAIN NAVIGATION
************************************************************* */
#mainNav{ width: 300px; float: right; margin: 0 20px 0 0; padding: 0;}
#mainNav ul { float: left; width: auto; margin: 0; padding: 0 0 0 0; list-style: none;}
#mainNav li { float: left; margin: 0; padding: 0; }
#mainNav li a{ float: left; width: 300px; background: url(../images/bg/bg_main_nav_list.png) 0 0 no-repeat;}

#mainNav li a.informatique{ height: 85px; background-position: 0 0;}
#mainNav li a.services{ height: 60px; background-position: 0 -85px;}
#mainNav li a.stages{ height: 77px; background-position: 0 -145px;}
#mainNav li a.domiciliation{ height: 55px; background-position: 0 -222px;}

body#page_3 #mainNav li a.informatique,
body#page_4 #mainNav li a.informatique,
body#page_5 #mainNav li a.informatique,
#mainNav li a.informatique:hover{ background-position: -310px 0;}

body#page_2 #mainNav li a.services,
body#page_3 #mainNav li a.services,
body#page_5 #mainNav li a.services,
#mainNav li a.services:hover{ background-position: -310px -85px;}

body#page_2 #mainNav li a.stages,
body#page_4 #mainNav li a.stages,
body#page_5 #mainNav li a.stages,
#mainNav li a.stages:hover{ background-position: -310px -145px;}

body#page_2 #mainNav li a.domiciliation,
body#page_3 #mainNav li a.domiciliation,
body#page_4 #mainNav li a.domiciliation,
#mainNav li a.domiciliation:hover{ background-position: -310px -222px;}

#sub_nav{ float: left; text-align: left; width: 270px; margin: 30px 0 30px 60px; padding: 0 0 30px 0;}
#sub_nav ul{ float: left; margin: 0; padding: 0; list-style: none; clear: both; width: 270px;}
#sub_nav li{ float: left; margin: 10px 0 0 0; padding: 0; clear: both; font-size: 90%; color: #666; font-weight: bold; font-style: italic; width: 270px;}
#sub_nav ul ul{ margin: 5px 0 0 0;}
#sub_nav li li{ font-size: 90%; color: #0E76BC; font-weight: normal; margin: 4px 0 4px 10px; padding: 0 0 0 15px; background: url(../images/bg/icon_bullet.png) 0 5px no-repeat; line-height: auto; width: 260px;}

#sub_nav li a{color: #666; text-decoration: none;}
#sub_nav li a:hover {color: #0E76BC; text-decoration: underline;}

#sub_nav li li a{color: #888; text-decoration: none;}
#sub_nav li a:hover {color: #0E76BC; text-decoration: underline;}


/* *************************************************************
CONTACT BUTTON
************************************************************* */
a#contact_btn{ float: right; width: 345px; height: 36px; background: url(../images/buttons/btn_contactez_nous.png) 0 0 no-repeat; text-decoration: none; margin: -81px 0 0 0;}
a#contact_btn a:hover{ background:url(../images/bg/bg_newsletter.png) 0 0 no-repeat;}


/* *************************************************************
MAIN CONTENT AREAS
************************************************************* */
#mainContent {width: 545px; float: left; text-align: left; margin: 10px 0 15px 0; padding: 0 10px 0 60px; display: inline; background: url(../images/bg/bg_mainContent.png) 60px 0 repeat-y; overflow: hidden;}

#mainContent #top{ background: url(../images/bg/bg_mainContent_top.png) 0 0 no-repeat; float: left; width: 556px; height: 10px; margin: 0 0 10px 0; }
#mainContent #btm{ background: url(../images/bg/bg_mainContent_btm.png) 0 0 no-repeat; float: left; width: 556px; height: 13px; margin: 20px 0 0 0; }

#mainContent h1{font-size: 110%; margin: 0 0 0 20px; padding: 10px 0 10px 40px; clear: both; color: #0E76BC; font-weight: bold; width: 480px; background: url(../images/bg/bg_title.png) 0 0 no-repeat; font-style: italic; position: relative;}
#mainContent h2{font-size: 90%; margin: 20px 0 0px 20px; padding: 0; clear: both; color: #000; font-weight: bold; line-height: 140%; float: left; width: 510px;}
#mainContent h3{font-size: 100%; padding: 0; margin: 5px 0 0 20px; font-weight: normal; color: #C00; float: left; width: 510px; }
#mainContent p{font-size: 70%; padding: 0; margin: 10px 0 0 20px; color: #0E76BC; line-height: 160%; clear: both; width: 510px; text-align: justify; float: left; }

#page_2 #mainContent h1,
#page_2 #mainContent h2,
#page_2 #mainContent h3,
#page_2 #mainContent p,
#page_2 #mainContent li{ color: #0E76BC; }

#page_3 #mainContent h1,
#page_3 #mainContent h2,
#page_3 #mainContent h3,
#page_3 #mainContent p,
#page_3 #mainContent li{ color: #09F; }

#page_4 #mainContent h1,
#page_4 #mainContent h2,
#page_4 #mainContent h3,
#page_4 #mainContent p,
#page_4 #mainContent li{ color: #20A5C1; }

#page_5 #mainContent h1,
#page_5 #mainContent h2,
#page_5 #mainContent h3,
#page_5 #mainContent p,
#page_5 #mainContent li{ color: #283891; }

#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;}

#mainContent p a{ color: #000; text-decoration: underline;}
#mainContent p a:hover{ color: #09F; text-decoration: underline;}

#mainContent ul{ float: left; width: 490px; padding: 0; margin: 10px 0 0 20px; list-style: none;}
#mainContent li{font-size: 70%; padding: 0 0 0 12px; margin: 0 0 3px 0; color: #0E76BC; line-height: 160%; clear: both; background: url(../images/icons/icon_bullet_blue.png) 0 6px no-repeat; width: 500px;}
#mainContent li a{ color: #900; }
#mainContent li a:hover{ color: #000; }

#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;}

#mainContent .image{ float: left; margin: 0 10px 0 0;}
#mainContent .imageLeft{ float: left; margin: 15px 10px 20px 0; padding: 2px; border: 1px solid #ccc;}
#mainContent .image{ float: left; margin: 0 10px 0 0; clear: both;}


/* *************************************************************
SUB CONTENT
************************************************************* */
#subContent{width: 310px; padding: 0; margin: 0 0 0 0; float: right; text-align: left;}

.separator{border-bottom: 1px dotted #9C896A; margin: 15px 0 15px 0; float: right; width: 245px; font-size: 0; clear: both;}


/* *************************************************************
PRODUCT NAVIGATION
************************************************************* */
#productNavListWrap{ border: 1px solid #E7D7BD; float: right; width: 212px;}
#productNavList{ float: right; width: 180px; border: 1px solid #fff; padding: 15px 15px 5px; margin: 0 0 0 0; background: #F1E7D7 url(../images/bg/bg_productNav.png) bottom left repeat-x;}
#productNavList h2{ font-size: 100%; color: #9F0F0F; font-weight: normal; margin: 0; padding: 0; float: left; width: 100%;}
#productNavList ul{ float: left; margin: 10px 0 0 0; padding: 0; width: 100%; clear: both; list-style: none;}
#productNavList li{ float: left; color: #663300; font-size: 70%; border-top: 1px dotted #CC997F; padding: 8px 0; width: 100%; margin: 0; line-height: 150%;}
#productNavList li a{ padding: 0 0 0 15px; background: url(../images/icons/icon_arrow_small_brown.png) 0 6px no-repeat; text-decoration: none; color: #663300; float: left; display: block; width: 170px;}
#productNavList li a:hover, #productNavList li a.active{ color:#C00; background-position: 3px -23px;}
#productNavList li a.active{ font-weight: bold;}

#productNavList ul ul{ float: left; margin: 5px 0 0 10px; padding: 0; width: 175px; clear: both; list-style: none;}
#productNavList li li { font-size: 100%; border-top: none; padding: 3px 0;}
#productNavList li li a{color: #C00; background: url(../images/icons/icon_arrow_small_brown.png) 0px -23px no-repeat; width: 160px;}
#productNavList li li a:hover, #productNavList li li a.active{color: #000; background-position: 3px 6px;}


/* *************************************************************
SITEMAP
************************************************************* */
#sitemap { margin: 0 0 20px 20px; float: left;}
#sitemap h2{ font-size: 80%; font-weight: normal; background: url(../images/icons/icon_greenArrowBullet.gif) 0 10px no-repeat; padding: 0 0 0 15px; margin: 10px 0 0 0;}
#sitemap h2 a{color: #666; border-bottom: none; line-height: 200%;}
#sitemap p{margin: 0 0 0 15px; padding: 0; line-height: 180%;}
#sitemap p a{background: url(../images/icon_circle.gif) 0 4px no-repeat; padding: 0 0 0 15px; text-decoration: none; color: #000;}


/* *************************************************************
Miscellaneous
************************************************************* */
#mainContent p.line{ float: left; margin: 30px 0 0 20px; padding: 0 0 10px 0; width: 505px; border-top: 1px solid #ccc; clear: both;}
.clearSpace{ float: left; clear: both; width: 200px; font-size: 0; height: 20px;}
#noBG{background-image: none;}
hr {border: none 0; border-top: 1px dotted #CCC; width: 100%; height: 1px; margin: 0 0 20px 0; clear: both;}


/**************************************************************
CONTACT FORM
**************************************************************/
#contactForm {width: 100%; float: left; padding: 0 0 0 20px;}
#contactForm h1{font-size: 130%; color: #663300; margin: 5px 0 5px 0; padding: 0; font-weight: normal;  float: left;}
#contactForm h2{font-size: 100%; color: #900; margin: 20px 0 10px 0; padding: 0; font-weight: normal; text-transform: capitalize; float: left;}
#contactForm p{ margin: 2px 0 0 0; height: auto; float: left; width: 100%; color: #0E76BC; font-size: 75%;}
#contactForm p label{float: left; width: 100px;}
#contactForm input{float: left;}
#contactForm .text{border: 1px solid #ccc; font: 100% Arial, Helvetica, sans-serif; color: #666; padding: 3px; width: 175px;}
#contactForm .text_sml{border: 1px solid #ccc; font: 100% Arial, Helvetica, sans-serif; color: #666; padding: 3px; width: 130px;}
#contactForm select{border: 1px solid #ccc; font-size: 100%; color: #8C4600;}
#contactForm textarea{border: 1px solid #ccc; font: 100% Arial, Helvetica, sans-serif; color: #666; padding: 3px; width: 380px;}
#contactForm p.footnote{font-size: 60%; text-transform: lowercase; margin: 20px 0 0 0; color: #ccc; width: 500px;}
#contactForm p a{ color: #000; text-decoration: underline;}
#contactForm p a:hover{ color: #000; text-decoration: underline;}

#contactForm .submit{ border: none; cursor: pointer; padding: 3px 5px; background: #0E76BC; border: 2px solid #283891; color: #fff; font: 100% Arial, Helvetica, sans-serif; font-weight: bold; float: left; }
#contactForm .reset{ border: none; cursor: pointer; margin: 0 55px 0 0; padding: 3px 5px; background: #4DC6E1; border: 2px solid #25AAE1; color: #fff; font: 100% Arial, Helvetica, sans-serif; font-weight: bold; float: right;}


#mainContent .contact_list{ float: left; width: 155px; margin: 20px 0 0 20px;}
#mainContent .contact_list .image{ float: left; width: 155px; height: 180px; background-color: #eee; background-position: center; background-repeat: no-repeat; }
#mainContent .contact_list h2{font-size: 80%; margin: 8px 0 0px 0; padding: 0; clear: both; color: #0E76BC; font-weight: bold; line-height: 140%; float: left; width: 100%; }
#mainContent .contact_list h3{font-size: 75%; padding: 0; margin: 3px 0 0 0; font-weight: normal; color: #25AAE1; float: left;  width: 100%; line-height: 130%; }
#mainContent .contact_list p{ float: left; margin: 5px 0 0 0; padding: 0; line-height: 100%; font-size: 70%; color: #0E76BC; width: 100%; }
#mainContent .contact_list p a{ color: #0E76BC; }
#mainContent .contact_list p a:hover{ color: #25AAE1; }


/* *************************************************************
MAP
************************************************************* */
#map{ float: left; width: 300px; height: auto; margin: 0px 0 50px 25px; background: #ccc;}


/* *************************************************************
ADDRESS
************************************************************* */
#address_details{ float: left; margin: 5px 0 10px 0; width: 300px;}
#address_details p{ float: left; width: 100%; margin: 0; padding: 0; font-size: 75%; line-height: 140%; color: #333; text-align: center; font-weight: bold;}


/* *************************************************************
ALERT BOX
************************************************************* */
#alertBox{background-color: #D9F0FF; padding: 10px 15px; margin: 10px 0 20px 20px; text-align: left; float: left; clear: both; width: 470px;}
#mainContent #alertBox h2{color: #06C; font-size: 100%; margin: 0 0 5px 0; padding: 0; background: none; border: none; font-weight: bold;}
#alertBox h4{color: #06C; margin: 0; padding: 0;}
#alertBox p{ color: #06C; padding: 0; margin: 0;}
#alertBox p a{ color:#000;}
#alertBox p a:hover{ color: #900;}


/* *************************************************************
Footer
************************************************************* */
#footer{width: 100%; margin: 0; padding: 0; background-color: #669CC9; text-align: center; float: left;}

body#page_2 #footer{ background-color: #0E76BC;}
body#page_3 #footer{background-color: #669CC9;}
body#page_4 #footer{background-color: #4DC6E1;}
body#page_5 #footer{background-color: #283891;}

#footer ul{list-style: none; width: 860px; text-align: center; padding: 0; margin: 17px 0 15px 30px; float: left;}
#footer li{margin: 0 20px 0 0; padding: 0 20px 0 0; display: inline; font-size: 80%; border-right: 1px solid #fff; color: #9B774F; line-height: 100%; float: left; text-transform: uppercase;}
#footer li a{ color: #fff; text-decoration: none;}

/* *************************************************************
NEWS LISTING
************************************************************* */
.list, .list2{ width: 490px; float: left; margin: 1px 0 0 15px; padding: 10px; display: inline; border-bottom: 1px dotted #ccc;}
.list img, .list2 img{ float: left; padding:1px; border: 1px solid #fff; }
.list .text, .list2 .text{ float: right; text-align:justify;  margin: 0 0 0 5px; padding: 0; width: 350px;}
#mainContent .text h3{ float: left; width: 100%; margin: 0; padding: 0; font-size: 90%; color:#283891;}
#mainContent .text p{ float: none; margin: 0; width:100%; padding: 0; font-size: 70%; }
.list .text.noPhoto, .list2 .text.noPhoto{ width: 100%;}

.image{ float: left; margin: 0 10px 0 0;}
.imageLeft{ float: left; margin: 15px 10px 20px 0; padding: 2px; border: 1px solid #ccc;}