/*===| I. MAIN LAYOUT  |=====================================================*/
* {margin: 0;}
html, body {height: 100%;width: 100%;}
ul, li{list-style: none;list-style-position: outside;	margin: 0;	padding: 0;}
p{padding: 0;}
.left{float: left;} .right{float: right;}
#push, .clr	{clear: both;}

body{
    background: #000 url(../../images/charte/body-bg.jpg) top left repeat-x;
}

#wrap-container{position:relative;z-index:4; width: 100%;}
#container{
    margin:0 auto;
    text-align: left;
}
#content{
    background: #000;
}

#actualite{
  background: url(../../images/charte/mdm.jpg) top left no-repeat;
  width: 251px;
  height: 132px;
}

#coord{
  background: url(../../images/charte/coord.jpg) top left no-repeat;
  width: 251px;
  height: 122px;
}

#horair{
  background: url(../../images/charte/horaires.jpg) top left no-repeat;
  width: 251px;
  height: 117px;
}

#plan{
  background: url(../../images/charte/plan.jpg) top left no-repeat;
  width: 251px;
  height: 122px;
}

.rights a{
    color:#ff7f0f;
    text-decoration: none;
}
.rights a:hover{
    color:#ff7f0f;
    text-decoration: underline;
}

.in-actual{
  padding-left: 35px;
  padding-top:45px;
  color: #b7b7b7;
  padding-right: 20px;
  float: left;
}

.in-actual2{
  padding-left: 35px;
  padding-top:40px;
  color: #b7b7b7;
  padding-right: 20px;
}

.addrese{
  font-size:11px;
  color: #b7b7b7;
  padding-top: 6px;
  line-height: 15px;
}

.coord-w{
  color: #fff;
}

.hora{
  padding: 50px 0 0 35px;
  color: #b7b7b7;
}


.plan-pic{
  padding-top:11px;
  padding-left:35px;
}

strong{
  color: #ff7f0f;
}

.itop{
  float:left;
  width:447px;
}


.ibox{
  background: url(../../images/charte/ibox.jpg) bottom right no-repeat;
  width: 577px;
  height: 111px;
  padding-left: 20px;
  padding-top: 11px;
}

.pic1{
  float:right;
  border:1px solid #999;
  margin-top:20px
}

.pic2{
  margin-top:11px;
  border:1px solid #999;
  float:left;
}

.ibox-text{
   float:right;
   width:410px;
   text-align:justify;
   padding-top:7px;
   padding-right: 10px;
   padding-left: 20px;
}

.ibox-text ul li{
  background: url(../../images/charte/bullet-grey.jpg) left 9px no-repeat;
  padding-left: 10px;
  color: #ff7f0f;
  padding-top: 4px;
}

.ubox{
  padding-left: 20px;
  padding-top: 11px;
}

.orange{
  color: #ff7f0f;
}

.ppar{
  padding-top: 10px;

}

.half-list{
  float:left;
  width: 220px;
  padding-top:10px;
}

.half-list ul{
  padding-left: 45px;
  line-height: 15px;
}

.half-list ul li{
  background: url(../../images/charte/bullet-orange.jpg) left 5px no-repeat;
  padding-left: 10px;
}
.cmerci{
  text-align: center;
  padding-bottom: 20px;
}



/* ===| II. HEADER ELEMENTS |================================================*/
#header{
 background: url(../../images/charte/header.jpg) top left no-repeat;
 width: 850px;
 height: 280px;
 padding-bottom: 3px;
}

/* ===| III. LEFT COLUMN ELEMENTS |===========================================*/
#left-outter{float:left; margin: 0; overflow: hidden;}
#left-outter div.outter{background: url(images/box1.gif) 50% 0% no-repeat;padding: 0 0 10px;	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}

#left-outter div.box2{}
#left-outter div.box3{}
#left-outter .box4{}

#actualite, #contact-info, #promo {}

/* ===| IV. RIGHT COLUMN ELEMENTS |===========================================*/
#right-outter{	float:left;	margin:0; padding:0; overflow: hidden;}
#right-inner{padding: 10px 15px 10px 10px;}

/* ===| V. FOOTER BOXES |=====================================================*/
#wrap-footer {position:relative; z-index: 4; width: 100%; text-align: left;}

#footer.outter	{
        background: url(../../images/charte/footer.jpg) top left repeat-x;
        margin: 0 auto;
        padding: 0px;}


.copyright{padding: 17px 0 0; text-align: center;}


/* ===| 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{
  padding-left: 21px;
  padding-top: 20px;
  color: #353535;
}

#menu2 ul li{display: inline;}
#menu2 ul li a{
  color: #b7b7b7;
  text-decoration: none;
}

#menu2 ul li a:hover{
  color: #f88922;
  text-decoration: none;
}

.rights{
  padding-left:21px;
  padding-top: 16px;
  color: #b7b7b7;
}

.ref{
  text-align: center;
  color:#b7b7b7;
  width: 850px;
  text-align: center;
  padding-top: 10px;
}

.lchamp{
  text-align: center;
}


.mercibox{
  width: 300px;
  margin: 50px auto 0;
  text-align: center;
  line-height: 20px;
}

.mercibox a{
  color: #5dc946;
  text-decoration: none;
  font-weight: bold;
}

.mercibox a:hover{
  text-decoration: underline;
}
.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;}

/* ===| VII. CONTACT FORM |=====================================================*/
#frmContact{margin: 0; padding: 5px; width: 98%; }
#frmContact label{display: block; padding: 4px 2px; clear:both;}
#frmContact label span{display:block; width: 45%; float: left; padding-top:5px; height: 18px;}
#frmContact label input{
    width: 40%;
    vertical-align: top;
    border: 1px solid #ff7f0f;
    background: #2a2a2a;
    height:14px;
    color: #ff7f0f;
    font-family: Verdana;
    font-size: 13px;
}
#frmContact label input:focus{
    width: 40%;
    vertical-align: top;
    border: 1px solid #5dc946;
    background: #2a2a2a;
    height:14px;
    color: #5dc946;
    font-family: Verdana;
    font-size: 13px;
}
#frmContact textarea{
   width: 100%;
   height: 126px;
   border: 1px solid #ff7f0f;
   background: #2a2a2a;
   color: #ff7f0f;
    font-family: Verdana;
    font-size: 13px;

}
#frmContact textarea:focus{
   width: 100%;
   height: 126px;
   background: #2a2a2a;
   border: 1px solid #5dc946;
   color: #5dc946;
    font-family: Verdana;
    font-size: 13px;
}

div.submit-buttons{clear: both;	text-align: center; padding: 4px 2px;}
div.submit-buttons input{	border: 1px solid #ff7f0f; background: #2a2a2a; color: #ff7f0f ;}
div.submit-buttons input:hover{	border: 1px solid #5dc946; background: #2a2a2a; color: #5dc946 ;}

.cleft-col{
  float: left;
  width: 240px;
  padding-left: 20px;
}

.cright-col{
  float: left;
  width: 320px;
}

.cchkbox{
  float: left;
  clear: both;
  height: 20px;
  padding-left: 5px;
  width: 320px;
}

.cchkbox input{
  padding-top: 2px;
  float: left;
}

.cconcern{
  clear: both;
  color: #ff7f0f;
  padding: 5px 0;
  font-weight: bold;
}

.mandat{
  color: #ff7f0f;
  font-weight: bold;
}

.capapad{
  padding-left:20px;
}

.capapad input{
   border: 1px solid #ff7f0f;
   background: #2a2a2a;
    color: #ff7f0f
}

.capapad input:focus{
   background: #2a2a2a;
   border: 1px solid #5dc946;
    color: #5dc946;
}

.photos{
  margin:0 auto;
  width:590px;
}

.photos div{
    padding:5px 10px;
    float: left;
    width:172px;
    text-align: center;
}

#galerie-detail .text-details{
  text-align: justify;
  padding-left: 20px ;
  padding-right: 20px ;
}
#galerie-detail .title{
  color: #f88920;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0 10px 20px;
  text-transform: uppercase;
}

.depdf{
 padding:10px 10px 10px 20px;
 float:left;
}


.ild-pic{
   border:2px solid #424242;

}

.custitle{
  color: #f68922;
  font-size: 12px;
  padding: 10px 0 0px 20px;
}


/* ===| 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 {margin:0 auto; clear:left; width:70%; text-align:center; border-top: 1px dashed #626260;padding-bottom:20px;}
.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 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 .toutsur a{
  text-align:center;
  color: #f98820;
}

.toutsur{
  padding-top: 5px;
}




#listgalerie .thumb{
text-align: center;
background:#2a2a2a;
border:1px solid #969696;
float: left;
position: relative;
  width: 580px;
  height: 90px;
  margin: 10px 0 0px 15px;

}
#listgalerie .thumb-over{
text-align: center;
background:#4e4e4e;
border:1px solid #969696;
float: left;
position: relative;
  width: 580px;
  height: 90px;
  margin: 10px 0 0px 15px;

}
#listgalerie .thumb img{

}

.picbox{
  width: 175px;
  height: 90px;
  position: absolute;
  left: 0;
  top: 0;


}

.text-details{
  text-align: left;
  text-align: justify;
}


.picboxtext{
  position: absolute;
  top: 0px;
  height: 45px;
  left: 180px;
  width: 395px;
  z-index: 10;

}
.picboxtextshadow{
  position: absolute;
  top: 130px;
  background: #020202;
  height: 45px;
  left: 0;
  width: 175px;
  opacity:0.7;
  display: none;
}

.picshadowbox{
  background: #ccc;
  opacity:0.5;
  position: absolute;
  height: 90px;
  width: 175px;
  left: 0;
  top: 0;


}

.picshadowbox-over{
  background: #ccc;
  opacity:0;
  position: absolute;
  height: 175px;
  width: 175px;
  cursor: pointer;
  left: 0;
  top: 0;
}

.picboxtitle{
  font-weight: bold;
  text-align: left;
  font-size: 14px;
  color: #f68922;
}

.pasdegal{
  text-align:center;
  padding-top:150px;
  font-size:14px;
  color: #ff7f0f;
}
.det-ensav{
  position: absolute;
  right:4px;
  top:70px;
  cursor: pointer;
  width: 84px;
  height: 17px;
}