/*===| MAIN LAYOUT  |=========================================================*/
* {
  margin                                    : 0; }

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

ul, li{
  list-style                                : none;
  list-style-position                       : outside;
  margin                                    : 0;
  padding                                   : 0; }

p{
  padding                                   : 0; }

a{
  text-decoration                           : none;
  color                                     : #e42200; }

  a:hover{
    color                                   : #622525; }

.left{
  border                                    : 1px solid #c0c0c0;
  background                                : #fff;
  padding                                   : 2px;
  margin                                    : 0px 10px 0px 0px;
  float                                     : left; }

.right{
  border                                    : 1px solid #c0c0c0;
  background                                : #fff;
  padding                                   : 2px;
  margin                                    : 0px 0px 0px 10px;
  float                                     : right; }

#push, .clr	{
  clear                                     : both; }

body{
  background                                : url(../../images/charte/bg1.jpg) no-repeat top center #fff;
  color                                     : #282828;
  width                                     : 100%;
  display                                   : table;
  padding-top                               : 16px; }

#wrap-container{
  position                                  : relative;
  z-index                                   : 4;
  width                                     : 100%; }

#container{
  margin                                    : 0 auto;
  display                                   : table;
  text-align                                : left;}

.separator{
  width                                     : 484px;
  height                                    : 0px;
  clear                                     : both;
  padding                                   : 0;
  margin                                    : 10px 0;
  border-top                                : 0 none;
  border-bottom                             : 1px solid #3cb22b;
  line-height                               : 0px;
  font-size                                 : 0;
  overflow                                  : hidden; }

.invisible{
  width                                     : 484px;
  height                                    : 15px;
  clear                                     : both; }

#tooltip{
	position                                  : absolute;
  z-index                                   : 9999;
	border                                    : 1px solid #772112;
	background                                : #fff;
	padding                                   : 5px 10px;
	color                                     : #991d07;
  font-family                               : Arial;
  font-size                                 : 11px;
	display                                   : none; }

/* ===| INTRO |===============================================================*/

#index{
  /*background                                : url(../../images/charte/bg_index.jpg) no-repeat top center;*/
  width                                     : 100%;
  height                                    : 100%;
  margin-top                                : 0px; }

  #index #intro{
    width                                   : 996px;
    height                                  : 382px;
    margin                                  : 0px auto;
    background                              : transparent; }

  #index #button{
    background                              : url(../../images/charte/btn_intro.gif) no-repeat 0px 0px;
    width                                   : 245px;
    height                                  : 54px;
    margin                                  : 294px 0px 0px -620px;
    position                                : absolute;
    z-index                                 : 999; }

    #index #button:hover{
      background-position                   : 0px -54px; }


/* ===| HEADER ELEMENTS |=====================================================*/

#site-header.outter{
  background                                :  url(../../images/charte/bg_header.jpg); }


/* ===| LEFT COLUMN ELEMENTS |================================================*/

#left-outter{
  float                                     : left;
  margin                                    : 0;
  padding                                   : 24px 0px 0px 0px;
  overflow                                  : hidden; }

  /* ---| Page title |--------------------------------------------------------*/

  #left-outter h1{
    float                                   : left;
    display                                 : inline;
    margin-left                             : 0px; }

  /* ---| First paragraph |---------------------------------------------------*/

  #left-outter #premiere{
    background                              : url(../../images/charte/bg_premiere.jpg);
    width                                   : 400px;
    height                                  : 100px;
    margin                                  : 0px 0px 5px 0px;
    padding                                 : 16px 0px 0px 100px;
    float                                   : left; }

    #left-outter #premiere ul{
      float                                 : left;
      display                               : inline;
      margin                                : 5px 5px 0px 34px; }

      #left-outter #premiere ul li{
        background                          : url(../../images/charte/bullet_small.gif) no-repeat 0px 6px;
        padding                             : 0px 0px 0px 13px; }

  /* ---| Left page content |-------------------------------------------------*/

  #left-inner{
    float                                   : left;
    padding                                 : 0px 0px 0px 15px; }

    #left-inner p{
      line-height                           : 15px;
      text-align                            : justify; }

      #left-inner p em, #left-outter #premiere p em{
        color                               : #e31b00;
        font-style                          : normal;
        font-weight                         : bold; }

    #left-inner ul{
      display                               : inline;
      padding                               : 0px 0px 0px 20px;
      float                                 : left; }

      #left-inner ul li{
        background                          : url(../../images/charte/bullet_small.gif) no-repeat 0px 6px;
        padding                             : 0px 28px 0px 10px;
        display                             : inline; }



    #left-inner ul.list_three_small_items{
      background                            : url(../../images/charte/bg_list_three_small_items.jpg);
      width                                 : 470px;
      height                                : 23px;
      padding                               : 75px 0px 0px 15px;
      float                                 : left; }

      #left-inner ul.list_three_small_items li{
        background                          : url(../../images/charte/bullet.gif) no-repeat 0px 2px;
        padding                             : 0px 30px 0px 16px;
        display                             : inline; }

    #link_fram{
      background                            : url(../../images/charte/btn_fram.jpg) no-repeat 0px 0px;
      width                                 : 325px;
      height                                : 57px;
      display                               : block;
      margin                                : 0px 0px 0px 158px;
      position                              : absolute;
      z-index                               : 99; }

      #link_fram:hover{
        background-position                 : 0px -57px; }




/* ===| RIGHT COLUMN ELEMENTS |===============================================*/

#right-outter{
  float                                     : left;
  margin                                    : 0;
  padding                                   : 0;
  overflow                                  : hidden; }

  #right-inner{
    padding                                 : 10px 15px 10px 10px; }

     /* ---| Diaporama |------------------------------------------------------*/

    #right-inner #diaporama{
      /*background                            : url(../../images/charte/bg_diaporama.jpg) no-repeat 4px 4px;*/
      width                                 : 443px;
      height                                : 244px;
      border                                : 1px solid #c0c0c0;
      margin                                : 2px 0px 12px 0px;
      float                                 : right;
      padding                               : 4px; }

    #right-inner #diaporama-empty{
      background                            : url(../../images/charte/bg_diaporama.jpg) no-repeat 4px 4px;
      width                                 : 443px;
      height                                : 244px;
      border                                : 1px solid #c0c0c0;
      margin                                : 2px 0px 12px 0px;
      float                                 : right;
      padding                               : 4px; }

    /* ---| Right important 1 |-----------------------------------------------*/

    #right-inner #right-important1{
      background                            : url(../../images/charte/important_l_agence2.jpg);
      width                                 : 361px;
      height                                : 59px;
      margin                                : 0px 0px 10px 0px;
      padding                               : 24px 15px 0px 91px;
      float                                 : right; }

      #right-inner #right-important1 p{
        color                               : #fff; }

        #right-inner #right-important1 p em{
          font-weight                       : bold;
          font-style                        : normal;
          color                             : #fff; }


    /* ---| Right important 2 |-----------------------------------------------*/

    #right-inner #right-important2{
      background                            : url(../../images/charte/important_l_agence3.jpg);
      width                                 : 389px;
      height                                : 57px;
      padding                               : 20px 0px 0px 71px;
      float                                 : right; }

      #right-inner #right-important2 p{
        color                               : #282828; }

    #right-inner #right-important2-empty{
      background                            : url(../../images/charte/important_l_agence3-empty.jpg);
      width                                 : 389px;
      height                                : 57px;
      padding                               : 20px 0px 0px 71px;
      float                                 : right; }


/* ===| Above footer elements |===============================================*/

#bas{
  background                                : url(../../images/charte/bg_bas.jpg);
  width                                     : 964px;
  height                                    : 119px;
  margin                                    : 5px 0px 0px 0px;
  padding                                   : 52px 0px 0px 32px;
  float                                     : left; }

  /* ---| MDM |---------------------------------------------------------------*/

  #bas #actualite-holder{
    width                                   : 451px;
    height                                  : 93px;
    margin                                  : 0px 55px 0px 0px;
    float                                   : left; }

  #bas #actualite{
    background                              : url(../../images/charte/bg_actualite.jpg) no-repeat top left;
    width                                   : 451px;
    height                                  : 93px;
    float                                   : left; }

    #bas #actualite p.mdmtext span{
      font-weight                           : bold;
      font-size                             : 12px;
      line-height                           : 18px; }

    #bas #actualite #savoir-plus{
      background                            : url(../../images/charte/btn_savoir_plus.jpg) no-repeat 0px 0px;
      width                                 : 94px;
      height                                : 22px;
      margin                                : 7px 0px 0px 0px;
      float                                 : left; }

      #bas #actualite #savoir-plus:hover{
        background-position                 : 0px -22px; }

  /* ---| Contact information |-----------------------------------------------*/

  #bas #info{
    width                                   : 430px;
    height                                  : 98px;
    float                                   : left; }

    #bas #info #plan{
      background                            : url(../../images/charte/btn_plan.jpg) no-repeat 0px 0px;
      width                                 : 196px;
      height                                : 98px;
      position                              : absolute;
      z-index                               : 9998;
      display                               : block; }

      #bas #info #plan:hover{
        background-position                 : 0px -98px; }

      #bas #info p{
        margin                              : 17px 0px 0px 82px;
        position                            : absolute;
        z-index                             : 9999;
        text-align                          : right; }

        #bas #info p span{
          line-height                       : 24px; }

          #bas #info p span a{
            color                           : #e42200;
            font-size                       : 12px;
            font-weight                     : bold;
            text-decoration                 : none;  }

            #bas #info p span a:hover{
              color                         : #622525; }


/* ===| FOOTER |==============================================================*/

#wrap-footer{
  width                                     : 100%;
  height                                    : 90px; }

  #wrap-footer #footer{
    width                                   : 996px;
    height                                  : 89px;
    margin                                  : 0px auto;
    border-top                              : 1px solid #e72000; }

  /* ---| Intro footer |------------------------------------------------------*/

  #wrap-footer #footer #index-footer{
    width                                   : 996px;
    float                                   : left;
    color                                   : #686868;
    text-align                              : center;
    margin                                  : 5px 0px 0px 0px;
    font-size                               : 11px; }

    #wrap-footer #footer #index-footer a{
      text-decoration                       : none;
      color                                 : #ec2200; }

      #wrap-footer #footer #index-footer a:hover{
        color                               : #622525; }

   /* ---| Regular footer |---------------------------------------------------*/

   #wrap-footer #footer #normal-footer{
    background                              : url(../../images/charte/bg_footer.jpg) no-repeat top right;
    width                                   : 952px;
    height                                  : 58px;
    color                                   : #686868;
    text-align                              : left;
    padding                                 : 15px 22px 0px 22px;
    font-size                               : 11px; }

    #wrap-footer #footer #normal-footer a{
      color                                 : #ec2200;
      text-decoration                       : none; }

      #wrap-footer #footer #normal-footer a:hover{
        color                               : #622525; }

    /* ---| Footer menu |-----------------------------------------------------*/

    #wrap-footer #footer #normal-footer ul{
      display                               : inline;
      padding-left                          : 30px; }

      #wrap-footer #footer #normal-footer ul li{
        border-right                        : 1px solid #686868;
        display                             : inline;
        padding-right                       : 6px;
        margin-right                        : 6px; }

        #wrap-footer #footer #normal-footer ul li a{
          color                             : #686868; }

          #wrap-footer #footer #normal-footer ul li a:hover{
            color                           : #ec2200; }

    .ref{
      width                                 : 996px;
      margin                                : 0px auto;
      display                               : table;
      text-align                            : center;
      color                                 : #686868; }


/* ===| VII. CONTACT FORM |=====================================================*/


#frmContact{
  margin                                                        : 0px auto;
  padding                                                       : 25px 0px 5px 0px;
  float                                                         : left;
  height                                                        : 480px;
  background                                                    : url(../../images/charte/formbg.jpg) no-repeat top left;
  width                                                         : 996px; }

  #frmContact label{
    display                                                     : block;
    padding                                                     : 5px 0px 5px 0px;
    color                                                       : #282828;
    float                                                       : left;
    width                                                       : 240px }

    #frmContact label span{
      color                                                     : #282828;
      width                                                     : 85px;
      text-align                                                : right;
      padding                                                   : 0px 5px 0px 0px;
      font-style                                                : normal;
      font-family                                               : Arial;
      font-weight                                               : normal;
      float                                                     : left; }

    #frmContact label input, #frmContact label textarea{
      width                                                     : 140px;
      font-size                                                 : 11px;
      font-family                                               : Tahoma;
      border                                                    : 1px solid #97b5c8;
      height                                                    : 15px;
      vertical-align                                            : top; }

    #frmContact label textarea{
      height                                                    : 85px;
      font-family                                               : Arial;
      font-size                                                 : 11px; }

  .input{
    border                                                      : 0 none;
    height                                                      : 14px;
    padding-top                                                 : 2px;
    background-color                                            : white; }

    .inputover{
      border                                                    : 0 none;
      height                                                    : 14px;
      padding-top                                               : 2px;
      background-color                                          : #fff2f0; }

  #capa{
    height                                                      : 20px !important;
    color                                                       : #69625a !important;
    padding-top                                                 : 4px;
    font-size                                                   : 14px !important;
    font-weight                                                 : bold;
    text-align                                                  : center;
    margin                                                      : 0px 0px 10px 0px;
    clear                                                       : none !important;
    float                                                       : left; }

  #capaimg{
    width                                                       : 140px;
    float                                                       : right; }

      #envoyer{
        background-image                                        : url(../../images/charte/btn_envoyer.jpg);
        background-position                                     : 0px 0px;
        background-repeat                                       : no-repeat;
        height                                                  : 26px;
        cursor                                                  : pointer;
        display                                                 : inline;
        font-size                                               : 0px;
        line-height                                             : 0px;
        border                                                  : 0 none;
        margin                                                  : 0px 10px 7px 0px;
        width                                                   : 118px !important;
        float                                                   : left;
        clear                                                   : both }

      #retablir{
        background-image                                        : url(../../images/charte/btn_retablir.jpg);
        background-position                                     : 0px 0px;
        background-repeat                                       : no-repeat;
        height                                                  : 26px;
        cursor                                                  : pointer;
        display                                                 : block;
        font-size                                               : 0px;
        line-height                                             : 0px;
        border                                                  : 0 none;
        width                                                   : 118px !important;
        float                                                   : left; }

        .btnover{
          background-position                                   : 0px -26px !important; }

    .contact-concernant{
      float                                                     : left;
      margin                                                    : 0px;
      padding                                                   : 0px;
      width                                                     : 480px; }

    #left-inner .contact-concernant em{
      float                                                     : left;
      border                                                    : 0px none;
      font-size                                                 : 11px;
      width                                                     : 500px;
      text-align                                                : center;
      margin                                                    : 0px;
      padding                                                   : 0px;
      font-weight                                               : bold; }

      #left-inner .contact-concernant label{
        width                                                   : 135px;
        margin-left                                             : 10px;
        font-size                                               : 11px;
        clear                                                   : none !important;
        float                                                   : left; }

        .contact-concernant label input{
          border                                                : 0 none !important;
          width                                                 : 16px !important;
          margin                                                : 1px 0px 0px 0px;
          float                                                 : left; }

    #right-outter #right-inner .message{
      width                                                     : 420px;
      float                                                     : right;
      margin-top: -10px;
      padding                                                   : 10px 0px 0px 0px; }

      #right-outter #right-inner .message span{
        padding                                                 : 0px 0px 10px 0px;
        text-align                                              : left;
        color                                                   : #282828;
        font                                                    : bold normal 14px Arial;
        float                                                   : left; }

        #right-outter #right-inner .message textarea{
          float                                                 : left;
          clear                                                 : both;
          margin                                                : 0px 15px 0px 0px;
          width                                                 : 395px;}

    div.submit-buttons a:hover input{
      border                                                    : 1px solid #ccc;
      background                                                : #fff; }

    .captchabox{
      float                                                     : left;
      display                                                   : table;
      width                                                     : 405px;
      padding-left: 30px;
      border-top: 1px solid #686868;
      padding-top: 15px;
      margin                                                    : 15px 0px 0px 0px; }

      .captchabox label{
        width: 450px !important; }

      #capa{
        width: 130px !important;
        margin-right: 12px !important;
        margin-top: -1px !important;
        height: 23px !important; }

      .captchabox label span{
        width: 120px !important;
        margin-right: 5px;
        display: block !important;
        float: left; }

      .captchabox label img{
        float: left !important; }

    .contact_buttons{
      float                                                     : left;
      width                                                     : 350px;
      margin                                                    : 10px 0px 0px 0px;
      padding                                                   : 5px 0px 0px 50px; }

    .merci-box{
      width                                                     : 480px;
      padding-top                                               : 10px;
      text-align                                                : center;
      font-size                                                 : 13px;
      font-weight                                               : bold;
      color                                                     : #e2e2e2;
      float                                                     : left; }

      .merci-box a{
        background-color                                        : #5dacda;
        border                                                  : 1px solid #8bc7ea;
        color                                                   : black;
        padding                                                 : 7px 12px 7px 12px;
        float                                                   : left;
        display                                                 : inline;
        margin-top                                              : -1px;
        margin-left                                             : 100px;
        text-decoration                                         : none; }

        .merci-box a:hover{
          background-color                                      : #447896; }



/* ===========================================================================*/
/* ===========================================================================*/
/* ===| Default styles from the template |====================================*/
/* ===========================================================================*/
/* ===========================================================================*/


/* ===| VI. OTHER ELEMENTS |==================================================*/
img {border: 0;}

a.thumb:link,
a.thumb:visited{border:	0px; padding:0px; margin:1px 0; width:auto; display:block;}
	
img.thumb{border-style:solid; border-width:5px; padding:1px; margin: 0 5px;}

img.thumb{border:1px solid #fff; padding:1px; margin: 0 5px;}
img.thumb0{border:1px solid #fff;padding:1px; margin: 0 5px; width:75px; height:75px; background:#ccc url("../../images/thumb0.jpg") 50% 50% no-repeat;}

.separator{width:100%;	height:0px; clear:both; padding:0; margin:15px 0; border-top: 1px solid; border-bottom: 1px solid; line-height: 0px; font-size: 0; overflow: hidden;}

/* ===| VIII. COMPONENT EVENEMENTES |=====================================================*/
div.title{float: left; clear: left; width: 100%;}
div.event{float: left; clear: left; width: 100%; border-top: 1px solid #ccc; padding: 5px 0;}
#evenementes h4{text-align: center;}
#evenementes h5 a, #evenementes h5 span{display:block; width:32%; float:left; margin: 0 1px; text-align: center;}
#evenementes h5 span{background: #f2f2f2;}
#evenementes h5 a:link, #evenementes h5 a:visited{text-decoration: none; color: #8d8d8d;}
#evenementes h5 a:hover, #evenementes h5 a:active{text-decoration: underline;color: #000000;}

div.event a:link, div.event a:visited{display: block; float: left; text-decoration: none;}
div.event a:hover, div.event a:active{cursor:pointer; text-decoration: underline;}
div.event div, div.event a span{vertical-align: middle;}
div.event span{float:left; padding: 5px 10px;}

.pagination {float: left; clear:left; width:100%; text-align:center; border-top: 1px solid #ccc;background: #f2f2f2;}
.pagination span{padding:1px; margin: 0 50px 0 25px;}
.pagination a:link, .pagination a:visited{padding:1px 3px; text-decoration: none; color: #8d8d8d;}
.pagination a:hover, .pagination a:active{color:#000000; text-decoration: underline;}
/* ---( evenemetes - details )------------------------------------------------------ */
#event-detail{background: #f3f3f3; padding: 5px;}
#event-detail h3 span{white-space: nowrap; font-size: smaller;}
#event-detail .photos{text-align: center;}
#event-detail .photos a#bigHref img{border:1px solid #ccc; padding: 5px; background: #fff;}
#event-detail .photos div{padding: 0 0 10px;}
#event-detail .photos a img{border: 1px solid #ccc; padding:5px; background: #fff;}
#event-detail .text-details{padding:10px 0; text-align: justify; border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}

/* ===| IX. COMPONENT GALERIE |========================================================*/
#gallery{padding: 5px;}
#gallery div.thumb{float: left; width: 30%; text-align: center; padding: 5px; min-height: 90px; height:auto!important;height:90px;}
#gallery div.thumb a{display: block; vertical-align: middle;}
#gallery div.thumb a img{border: 1px solid #ccc; padding:5px; background: #fff;}

/* ===| X. COMPONENT LIENS |===========================================================*/
#liens{padding:5px;}
#liens div.lien{padding: 5px 0; border-top: 1px solid #f3f3f3;}
#liens div.thumb{float:left; width:145px; text-align: center;}
#liens div.thumb a img{padding: 5px; border: 1px solid #ccc; display: inline;}
#liens .txt {float:left; width:360px;}
#liens h5{font-weight:bold;text-transform:capitalize;}
#liens p { color: #747474;}

/* ===| XI. COMPONENT LIVRE D'OR |======================================================*/
.submit-buttons input{cursor: pointer;}
fieldset {border: 1px solid #ccc; padding: 5px;}
fieldset legend {padding: 2px 5px; text-transform: capitalize;	font-weight: bold; color: gray; margin: 0;}
fieldset legend span {color: #000000; font-size: 1.2em;}
fieldset p{text-align: justify; padding: 5px;}
.pagination{margin: 5px 0;}

/* ===| XII. COMPONENT NEWSLETTER |=====================================================*/
#newsletter{background: #f3f3f3; border: 1px solid #ccc; padding:10px;}
#newsletter input{width: 40%; vertical-align: top;}

#newsletter a:link, #newsletter a:visited {text-decoration: none;}
#newsletter a:link input, #newsletter a:visited input {border: 1px solid #fff; background: #ccc; cursor: pointer; width: auto;}
#newsletter a:hover input {border: 1px solid #ccc; background: #fff; width: auto;}

/* ===| XIII. COMPONENT ADMINDOCS |=====================================================*/
#admindocs{background: #f3f3f3; border: 1px solid #cccccc; padding:10px;}

/* ===| XIV. COMPONENT LISTEGALERIE |=====================================================*/
#listgalerie{background: #f3f3f3; border: 1px solid #cccccc; padding:10px;}

#listgalerie .thumb {float:left; width:30%; text-align:center; padding:5px; min-height:90px; height:auto!important; height:90px;}
#listgalerie .thumb a:link, #listgalerie .thumb a:visited{display: block; vertical-align: middle; text-decoration: none; color: #747474;}
#listgalerie .thumb a:hover, #listgalerie .thumb a:active {text-decoration: underline; color: #000;}
#listgalerie .thumb a img {border: 1px solid #ccc; padding:5px; background: #ffffff;}
/* ---( listgalerie - details )------------------------------------------------------ */
#galerie-detail .text-details{text-align: justify;}
#galerie-detail .photos{text-align: center;}
#galerie-detail .photos a img{border: 1px solid #ccc; padding:5px; background: #ffffff;}