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

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

body{
  width                             :  100%; }

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

p{
  padding                           :  0; }

.left-clean{
  float                             :  left; }

.left{
  float                             :  left;
  margin-right                      :  12px; }

.right{
  float                             :  right;
  margin-left                       :  12px; }

.right-clean{
  float                             :  right; }

#push, .clr	{
  clear                             :  both; }

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

#container{
  background                        :  url(../../images/charte/bg.jpg) no-repeat top center #a6d5fb;
  margin                            :  0 auto;
  text-align                        :  left; }

#content{
  height                            :  543px;
  overflow                          :  hidden; }


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

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

#left-outter div.outter{
  min-height                        :  159px;
  height                            :  auto!important;
  height                            :  159px; }

#left-outter div.inner{
  padding                           :  0px 5px 0px; }

#left-outter div.box1{
  padding                           :  0 5px 10px; }

#left-outter .box1 .inner{
  padding                           :  0 }


/* ---| Actualites |----------------------------------------------------------*/

  #left-outter #actualite{
    float                           :  left;
    width                           :  287px; /* Full width is 327 */
    height                          :  116px; /* Full height is 172 */
    padding                         :  56px 20px 0px 20px; }

    #left-outter #actualite p em{
      float                         :  left;
      padding                       :  0px 0px 0px 0px;
      color                         :  white;
      font-weight                   :  bold;
      font-style                    :  normal; }

    #left-outter #actualite #mdm_pic{
      float                         :  left;
      margin                        :  0px 10px 0px 0px; }

      #left-outter #actualite #mdm_pic img{
        border                      :  1px solid white; }

    #left-outter #actualite p{
      color                         :  white;
      line-height                   :  16px; }

    #left-outter #actualite #mdm_savoir_plus{
      width                         :  84px;
      height                        :  23px;
      background                    :  url(../../images/charte/btn_mdm_savoir_plus.jpg) 0px 0px;
      float                         :  left;
      display                       :  inline;
      margin                        :  11px 0px 0px 95px; }

      #left-outter #actualite #mdm_savoir_plus:hover{
        background                  :  url(../../images/charte/btn_mdm_savoir_plus.jpg) 0px 23px; }

  #left-outter #menu1{
    float                           :  left;
    width                           :  327px;
    height                          :  178px; }


/* ---| Coordonnees |---------------------------------------------------------*/

  #left-outter #info{
    float                           :  left;
    width                           :  287px; /* Full width is 327 */
    height                          :  111px; /* Full height is 193 */
    padding                         :  82px 20px 0px 20px; }

    #left-outter #info p{
      color                         :  #003d6e;
      float                         :  none;
      position                      :  absolute;
      z-index                       :  9999; }

    #left-outter #info #plan_acces{
      background                    :  url(../../images/charte/btn_plan_acces.jpg) 0px 0px;
      width                         :  251px;
      height                        :  94px;
      float                         :  right;
      clear                         :  both;
      margin                        :  17px -20px 0px 0px; }

      #left-outter #info #plan_acces:hover{
        background                  :  url(../../images/charte/btn_plan_acces.jpg) 0px 94px; }


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

#right-outter{
  float                             :  left;
  margin                            :  0;
  padding                           :  12px 20px 0px 0px;
  overflow                          :  hidden;
  color                             :  #292929; }

  #right-outter #right-inner{
    float                           :  left;
    height                          :  490px;
    width                           :  577px;
  }

  #right-outter #fadeout{
    position                        :  absolute;
    z-index                         :  9999;
    top                             :  768px;
    left                            :  50%;
    margin-left                     :  -120px; }

  #right-outter .box_list_2x4{
    background-image                :  url(../../images/charte/box_list_2x4.jpg);
    width                           :  434px; /* Full width is 454 */
    height                          :  92px; /* Full height is 112 */
    margin                          :  12px 0px 10px 0px;
    padding                         :  20px 0px 0px 20px;
    float                           :  left; }

    #right-outter .box_list_2x4 ul{
      float                         :  left;
      width                         :  160px;
      padding                       :  0px 0px 0px 25px;
       }

      #right-outter .box_list_2x4 ul li{
        padding                     :  0px 0px 0px 12px;
        background                    :  url(../../images/charte/bullet.jpg) 0px 6px no-repeat; }

 #right-outter ul{
    float                           :  left;
    width                           :  207px; }

    #right-outter ul li{

      padding                       :  0px 0px 0px 12px;
      background                    :  url(../../images/charte/bullet.jpg) 0px 6px no-repeat; }

  #right-outter .box_next_to_pic{
    background-image                :  url(../../images/charte/box_next_to_pic.jpg);
    width                           :  378px; /* Full width is 393 */
    height                          :  84px; /* Full height is 99 */
    padding                         :  15px 0px 0px 15px;
    float                           :  left; }
#right-outter .box_next_to_pic2{
    background-image                :  url(../../images/charte/box_next_to_pic.png);
    background-repeat: no-repeat;
    width                           :  350px; /* Full width is 393 */
    height                          :  90px; /* Full height is 99 */
    padding                         :  10px 0px 0px 45px;
    float                           :  right;
     }

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

  #right-outter .invisible{
    width                           :  100%;
    height                          :  0px;
    clear                           :  both;
    padding                         :  0;
    margin                          :  6px 0;
    border-top                      :  1px solid #ecf5ff;
    line-height                     :  0px;
    font-size                       :  0;
    overflow                        :  hidden; }

  #right-outter p em{
    color                           :  #970923;
    font-style                      :  normal; }

  #right-outter .fullwidth-ul{
    margin-left                     :  20px;
    width                           :  500px; }

    #right-outter .fullwidth-ul li{
      float                         :  left;
      width                         :  220px;
      margin-right                  :  10px;
      font-weight                   :  bold;
      clear                         :  none; }

  #right-outter #right-inner .bottom-pane{
    width                           :  550px;
    float                           :  left;
    clear                           :  both;
    height                          :  85px; }

.real
{
  padding: 10px 0;
}


/* ===| V. FOOTER BOXES |=====================================================*/

#wrap-footer {
  position                          :  relative;
  z-index                           :  4;
  width                             :  100%;
  text-align                        :  left; }

  #wrap-footer #footer{
    background                      :  url(../../images/charte/footer.jpg);
    height                          :  66px;
    margin                          :  0px auto; }

    #wrap-footer #footer #realise{
      float                         :  left;
      width                         :  362px; /* Full width is 390 */
      height                        :  45px; /* Full height is 66 */
      padding                       :  21px 0px 0px 28px;
      font-size                     :  11px;
      color                         :  #aed9ff; }

      #wrap-footer #footer #realise a{
        color                       :  white;
        text-decoration             :  none; }

        #wrap-footer #footer #realise a:hover{
          color                     :  #bce2ff; }

    #wrap-footer #footer #menu2{
      width                         :  544px;
      height                        :  51px; /* Full height is 66 */
      float                         :  left;
      padding                       :  15px 0px 0px 0px;
      line-height                   :  11px;
      font-size                     :  11px;
      color                         :  #afd9ff; }

      #wrap-footer #footer #menu2 ul li{
        border-right                :  1px solid #afd9ff;
        padding                     :  0px 8px 0px 8px; }

        #wrap-footer #footer #menu2 ul li a{
          text-decoration           :  none;
          color                     :  #afd9ff; }

          #wrap-footer #footer #menu2 ul li a:hover{
            color                   :  white; }

      #wrap-footer #footer #menu2 a{
        color                       :  white;
        text-decoration             :  none; }

        #wrap-footer #footer #menu2 a:hover{
          color                     :  #afd9ff; }

    div.ref{
      width                         :  934px;
      padding                       :  10px 0px 10px 0px;
      float                         :  left;
      color                         :  #517595;
      background                    :  white;
      text-align                    :  center; }



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

#frmContact{
  margin                            :  10px 0px 0px 0px;
  width                             :  500px;
  float                             :  left;
  padding-left                      :  45px; }

  #frmContact label{
    display                         :  block;
    padding                         :  0px 0px 5px 0px;
    width                           :  230px;
    float                           :  left;
    clear                           :  none; }

  #frmContact label span{
    display                         :  block;
    width                           :  70px;
    float                           :  left; }

  #frmContact label input{
    height                          :  16px; }

  #frmContact label input, #frmContact label textarea{
    width                           :  148px;
    border                          :  1px solid #6fb4f2;
    font-family                     :  Verdana;
    font-size                       :  11px;
    vertical-align                  :  top; }

    #frmContact label textarea{
      width                         :  375px;
      height                        :  60px; }

  #concernant{
    float                           :  left;
    margin                          :  10px 0px 10px 0px;
    width                           :  450px; }

    #concernant em{
      font-style                    :  normal;
      color                         :  #51a3f7;
      font-weight                   :  bold;
      float                         :  left;
      margin-bottom                 :  5px;
      width                         :  450px; }

    #frmContact #check-boxes{
      float                         :  left;
      display                       :  inline;
      width                         :  450px; }

      #frmContact #check-boxes label{
        float                       :  left;
        width                       :  144px;
        height                      :  35px;
        font-size                   :  11px;
        margin                      :  0px 5px 5px 0px;
        padding                     :  0px;
        clear                       :  none; }

        #frmContact #check-boxes label input{
          margin-top                :  3px }

  div#captcha-code{
    width                           :  450px;
    float                           :  left;
    margin-top                      :  0px;
    padding-top                     :  0px;
    padding-bottom                  :  0px;
    margin-bottom                   :  0px;
    text-align                      :  center; }

    div#captcha-code label{
      width                         :  450px;
      float                         :  left; }

    div#captcha-code span{
      width                         :  135px;
      margin-bottom                 :  10px;
      text-align                    :  left;
      line-height                   :  16px;
      float                         :  left; }

    div#captcha-code input{
      width                         :  150px;
      margin-right                  :  5px;
      text-align                    :  center;
      font-size                     :  15px;
      font-weight                   :  bold;
      font-family                   :  Arial, Verdana;
      padding-top                   :  5px;
      color                         :  #5f6968;
      height                        :  23px; }

    div#captcha-code img{
      border                        :  1px solid #6fb4f2 }

  div.submit-buttons{
    clear                           :  both;
    text-align                      :  center;
    padding                         :  0px 2px; }

    div.submit-buttons a{
      color                         : #e6f2fe; }

  .submit-buttons .envoyer{
    background-image                :  url(../../images/charte/btn_envoyer.jpg);
    background-position             :  0px 0px;
    border                          :  0 none;
    color                           :  #e6f2fe;
    font-size                       :  0px;
    line-height                     :  0px;
    margin-right                    :  5px;
    width                           :  150px;
    height                          :  30px; }

  .submit-buttons .envoyer-over{
    background-image                :  url(../../images/charte/btn_envoyer.jpg);
    background-position             :  0px 30px;
    border                          :  0 none;
    color                           :  #e6f2fe;
    font-size                       :  0px;
    line-height                     :  0px;
    margin-right                    :  5px;
    width                           :  150px;
    height                          :  30px; }

  .submit-buttons .retablir{
    background-image                :  url(../../images/charte/btn_retablir.jpg);
    background-position             :  0px 0px;
    border                          :  0 none;
    color                           :  #e6f2fe;
    font-size                       :  0px;
    line-height                     :  0px;
    width                           :  150px;
    height                          :  30px; }

  .submit-buttons .retablir-over{
    background-image                :  url(../../images/charte/btn_retablir.jpg);
    background-position             :  0px 30px;
    border                          :  0 none;
    color                           :  #e6f2fe;
    font-size                       :  0px;
    line-height                     :  0px;
    width                           :  150px;
    height                          :  30px; }

  #merci-link{
    color                           :  #970923;
    text-decoration                 :  none;
    font-weight                     :  bold; }

    #merci-link:hover{
      color                         :  #e60025; }




/* ===| 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;}

#menu2 ul li{display: inline;}

/* ===| 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;}

@media screen and (-webkit-min-device-pixel-ratio:0){

	html{		
		/*
		need this so that Safari3 can 
		use window.getMatchedCSSRules to collect CSSStyleRule later
		*/		
		list-style-image:none; 
	}

	.safaridiv1{clear: both; height: 30px;}
	.safaridiv2{clear: both; height: 100px;}
}