/*===| I. MAIN LAYOUT  |=====================================================*/

html,
body { height: 100%; width: 100%; }

a:link,
a:visited { text-decoration: underline; color: #04739c; }
a:hover,
a:active { text-decoration: none; color: #04739c; }

body { background: #FFFFFF url(images/body-bg.jpg) repeat-x left top; font-family:Arial; font-size:12px; color:#727272; }

    #wrap-header { width: 100%; background:transparent url(images/wrap-header-bg.jpg) no-repeat center top; }
        #header { width: 996px; height: 380px; margin: 0 auto; }

    #wrap-content { width: 100%; background: #DAF2FC url(images/wrap-content-bg.jpg) repeat-x left top; }
        #content { width: 996px; margin: 0 auto; text-align: left; }
            #content-inner { width: 946px; padding: 20px 25px 20px 25px; }

    #wrap-extra { width: 100%; background: url(images/wrap-extra-bg.jpg) repeat-x left top; }
        #extra { width: 996px; margin: 0 auto; }
            #extra-inner { width: 946px; padding: 15px 25px; }

    #wrap-footer { width: 100%; }
        #footer { width: 996px; margin: 0 auto; font-size: 11px; }

.vseparator { float: left; width: 2px; height: 100px; margin: 35px 25px 35px 25px; background: url(images/vseparator-bg.jpg) repeat-y left top; }

/* ===| II. HEADER ELEMENTS |================================================*/


/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/

#sidebar { float: left; width: 273px; text-align: justify; padding: 0 0 20px 0; }
#sidebar h3 { margin: 20px 0; color: #0077a2; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; }
#sidebar .paragraph { margin: 20px 0; }

/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/

#main { float: left; width: 621px; text-align: justify; }
#main2 { float: left; width: 906px; text-align: justify; padding: 0 20px; }
.main h1 { padding: 0 0 20px 0; color: #0077a2; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify; }
.main h2 { padding: 0 0 10px 0; color: #0077a2; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify; }

.activites { clear: both; margin: 15px 0 5px 0; overflow: hidden; }
.activite { float: left; width: 135px; height: auto; margin: 0 27px 0 0; position: relative; }
.activite h3 { width: 135px; height: 244px; margin: 0 0 10px 0; text-align: center; background: none no-repeat left top; color: #FFFFFF; }
.activite h3 span { float: left; width: 125px; padding: 0 5px; font-size: 11px; line-height: 15px; font-weight: bold; }
.activite p { font-size: 12px; text-align: left; }
.activite a { width: 100%; height: 100%; float:left; text-decoration:none; }


.activite a:link span,
.activite a:visited span { color: #FFFFFF; text-decoration: none; }
.activite a:hover span,
.activite a:active span { color: #FFFFFF; text-decoration: underline; }

.activite1 { }
.activite1 h3 { background: url(../../images/charte/activite1-bg.jpg) no-repeat left top; }
.activite1 h3 span { margin: 18px 0 0 0; }

.activite2 { }
.activite2 h3 { background-image: url(../../images/charte/activite2-bg.jpg); }
.activite2 h3 span { margin: 18px 0 0 0; }

.activite3 { }
.activite3 h3 { background-image: url(../../images/charte/activite3-bg.jpg); }
.activite3 h3 span { margin: 18px 0 0 0; }

.activite4 { margin-right: 0; }
.activite4 h3 { background-image: url(../../images/charte/activite4-bg.jpg); }
.activite4 h3 span { margin: 1px 0 0 0; }

#actualite { }
.actualite-photo { margin: 0 0 20px 0; }

/* ===| V. FOOTER ELEMENTS |=====================================================*/
.footer-right { float: left; width: 677px; padding: 10px 0 0 0; }
.footer-right-top { float: left; padding: 10px 0 0 0; }
.footer-right-bottom { float: left; text-align: right; padding-top: 7px; }
.footer-right-top a:link,
.footer-right-top a:visited { color: #0379a2; text-decoration: none; }
.footer-right-top a:hover,
.footer-right-top a:active { color: #0379a2; text-decoration: underline; }
.footer-right-top a.active { color: #FC5D00; }

.footer-left { float: left; padding: 10px 0 0 30px; width: 236px; }
.footer-left a:link,
.footer-left a:visited { color: #de3b41; text-decoration: none; font-weight: bold; }
.footer-left a:hover,
.footer-left a:active {color: #de3b41; text-decoration: underline; font-weight: bold; }

.footer-separator { float: left; padding: 10px 25px 0 25px; width: 3px; height: 77px; background: url(images/footer_separator.jpg) no-repeat center top; }

.photolib { background: #dedede; color: #8e8e8e; width: 81px; height: 17px; text-align: center; padding: 1px 8px; }
.photolib a:link,
.photolib a:visited { color: #8e8e8e; text-decoration: none; }
.photolib a:hover,
.photolib a:active { color: #8e8e8e; text-decoration: underline; }

.mentions a:link,
.mentions a:visited { color: #fc5d00; text-decoration: none; }
.mentions a:hover,
.mentions a:active { color: #fc5d00; text-decoration: underline; }

/* ===| VI. EXTRA ELEMENTS |=====================================================*/
#extra .c  { float: left; display: inline; }
#extra .c1 { width: 282px; }
#extra .c2 { width: 282px; margin: 0 50px; }
#extra .c3 { width: 282px; }
#extra h3 { margin: 0 0 10px 0; padding: 0 0 5px 55px; font-size: 22px;line-height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px solid #CAD5D9; }
#extra h4 { font-size: 13px; font-weight: bold; }

#info h3 { background: url(images/info-title-bg.jpg) no-repeat left top; color: #E6000A; }
#info p { margin: 0 0 10px 0; }

#mdm h3 { background: url(images/mdm-title-bg.jpg) no-repeat left top; color: #0077A2; }
.mdm-photo { float: left; display: inline; width: 127px; height: 74px; overflow: hidden; margin: 0 6px; border: 1px solid #CAD5D9; }
.mdm-title { clear: both; font-size: 15px; color: #04739c; padding: 10px 6px; }
.mdm-text { text-align: justify; padding: 0 6px; }
.mdm-more { padding: 6px; }

#contact-info h3 { background: url(images/contact-title-bg.jpg) no-repeat left top; color: #FC5d00; padding-left: 60px; }
#contact-info h3 a:link,
#contact-info h3 a:visited { color: #FC5D00; text-decoration: none; }
#contact-info h3 a:hover,
#contact-info h3 a:active { color: #E6000A; }

/* ===| VI. OTHER ELEMENTS |====================================================*/

/*  Links, Buttons
----------------------------------------------------------------------------- */
a.link:link,
a.link:visited { text-decoration: none; }
a.link:hover,
a.link:active { text-decoration: none; color: #FC5D01; }

a.link2:link,
a.link2:visited { padding: 0 0 0 28px; background: url(images/bullet_list.png) no-repeat 0 3px; text-decoration: underline; }
a.link2:hover,
a.link2:active { text-decoration: none; }

.link3 a:link,
.link3 a:visited { color: #FF640F; text-decoration: none; }
.link3 a:hover,
.link3 a:active { color: #FF640F; text-decoration: underline; }

.mail-link a:link,
.mail-link a:visited { color: #0379a2; text-decoration: underline; }
.mail-link a:hover,
.mail-link a:active { color: #0379a2; text-decoration: none; }

.facebook-btn { display: inline-block; height: 24px; line-height: 24px; background: url(../../images/charte/facebook-btn-bg.jpg) no-repeat left top; padding: 0 0 0 35px; }
.facebook-btn:hover { background-position: left bottom; }

.pdf-btn { display: inline-block; height: 24px; line-height: 24px; background: url(images/pdf-btn-bg.jpg) no-repeat left top; padding: 0 0 0 30px; }
.pdf-btn:hover { background-position: left bottom; }

.consultez-btn { display: block; width: 273px; height: 48px; background: url(../../images/charte/consultez-btn-bg.jpg) no-repeat left bottom; text-indent: -9999em; }
.consultez-btn:hover { background-position: left top; }

.map-btn { display: inline-block; height: 24px; line-height: 24px; background: url(images/map-btn-bg.jpg) no-repeat left top; padding: 0 0 0 35px; }
.map-btn:hover { background-position: left bottom; }

/*  Lists
----------------------------------------------------------------------------- */
ul.list li { padding: 3px 0 3px 18px; background: url(images/bullet_list.png) no-repeat scroll left 9px; color: #727272; }
ul.list2 li { margin-left: 20px; padding: 5px 0 0 18px; background: url(images/bullet_list2.png) no-repeat scroll left 11px; color: #727272; }
ul.list3 li { clear: both; margin: 0 0 0 40px; padding: 5px 0 5px 18px; background: url(images/bullet_list.png) no-repeat scroll left 9px; color: #727272; }

ul.listm li { width:220px; height:32px; clear:both; }
ul.listm li a:link,
ul.listm li a:visited {
    font-family:tahoma;
    color: #fff;
	background: url(images/menu_button.jpg) no-repeat;
    font-size: 11px;
    line-height: 21px;
    text-decoration:none;
    font-weight:bold;
    float:left;
    width:220px;
    height:24px;
    padding:3px 3px 3px 15px;
    margin: 0 0 6px 0;

}
ul.listm li a:hover,
ul.listm li a:active { background: url(images/menu_button_over.jpg) no-repeat; }
.activem{
    font-family:tahoma;
    color: #fff !important;
	background: url(images/menu_button_over.jpg) no-repeat !important;
    font-size: 11px;
    text-decoration:none;
    font-weight:bold;
    float:left;
    width:220px;
    height:30px;
    padding-top:3px;
    padding-left:15px;
}

.page-content p { padding: 0 0 10px 0; }
.page-content ul { overflow: hidden; margin: 0 0 0 10px; padding: 0 0 10px 0; }
.page-content ul li { padding: 3px 0 3px 18px; background: url(images/bullet_list.png) no-repeat scroll left 9px; color: #727272; }

.page-content .images a { padding: 3px; background: #FFFFFF; border: 1px solid #C8ECFA; }

.page-content .images-left { float: left; }
.page-content .images-left a { float: left; margin: 0 20px 10px 0; }

.page-content .images-right { float: right; }
.page-content .images-right a { float: left; margin: 0 0 10px 20px; }

/*  Paginations
----------------------------------------------------------------------------- */
.pagination             { clear: both; float: left; display: table; width: 100%; font-size: 11px; line-height: 17px; text-align: center; }
.pagination a:link,
.pagination a:visited,
.pagination span        { display: inline-block; overflow: hidden; margin: 0 5px 0 0; padding: 1px 7px; border-width: 1px; border-style: solid; text-decoration: none !important;
                          background: #FFFFFF; color: #727272; border-color: #9AE2F0; }
.pagination a:hover     { background: #FE6501; color: #FFFFFF; border-color: #E4000B; }
.pagination .active     { background: #FE6501; color: #FFFFFF; border-color: #E4000B; }
.pagination .disabled   { background: #E9E9E9; color: #666666; border-color: #ADADAD; }

/*  Separators
----------------------------------------------------------------------------- */
.separator { margin: 15px 0; border-top: 1px solid #b6d3dd; border-bottom: 1px solid #FFFFFF; }

/*  Table
----------------------------------------------------------------------------- */
.table1 { border-collapse: collapse; border-spacing: 0; }
.table1 th,
.table1 td { padding: 5px 5px; border: 1px solid #B6D3DD; background: #FFFFFF; color: #727272; text-align: center; }
.table1 th { font-weight: bold; }
.table1 thead th { background: #00719D; color: #FFFFFF; text-align: center; }
.table1 tbody th { }
.table1 tfoot th { background: #FC5D01; color: #FFFFFF; text-align: center; }

/*  Thumbnails
----------------------------------------------------------------------------- */
.thumb                  { display: inline-block; padding: 4px; border: 1px solid #C8ECFA; background: #FFFFFF; }
a.thumb:hover           { border: 1px solid #FFFFFF; background: #FFFFFF; }

/*  Typography
----------------------------------------------------------------------------- */
.star { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.dove { border: 1px solid #B6D3DD; padding: 5px; font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; color: #E4000B; }
.eagle { border: 1px solid #B6D3DD; padding: 5px; font: bold 12px/18px Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; color: #00719D; }

.mercidiv { text-align: center; }
.calcul { float: right; width: 170px; height: 170px; margin: 0 0 0 20px; background: url(images/calcul-bg.jpg) no-repeat left top; text-indent: -9999em; position: relative; }
.calcul-btn { position: absolute; left: 32px; top: 118px; width: 110px; height: 26px; background: url(images/calcul-btn-bg.jpg) no-repeat left top; }
.calcul-btn:hover { background-position: left bottom; }