@charset "utf-8";
/* CSS Document 
@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:600);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);*/
.Style1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #CCCCCC;
	text-decoration:none;
	/*background-color: #333333;*/
}

.Style11111 {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 14px;
	color: #717171;
	text-decoration:none;
	font-style: normal;
	/*background-color: #333333;*/
}

.Style111112 {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 12px;
	color: #717171;
	text-decoration:none;
	font-style: normal;
	/*background-color: #333333;*/
}
.Style111113 {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 14px;
	color: #ffffff;
	text-decoration:none;
	font-style: normal;
	/*background-color: #333333;*/
}

.Style111114 {

	font-size: 12px;
	color: #0099CC;
	text-decoration:none;
	font-style: normal;
	/*background-color: #333333;*/
}

.Style177 {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 12px;
	color: #33CC33;
	text-decoration:none;
	font-style: normal;
	/*background-color: #333333;*/
}

a:link {
	color: #0099CC;
	text-decoration: none;
}


a:hover {
	text-decoration: underline;
}
a:visited {color: #0099CC;}

/*---ICI LE STYLE POUR DES COULEURS DE LIENS DIFFERENTS--*/

.Grey:link{font-family: Geneva, Arial, Helvetica, sans-serif; color: #666666; font-size: 13px; }
.Grey:visited{font-family: Geneva, Arial, Helvetica, sans-serif; color: #666666;font-size: 13px;}
.Grey:active{font-family: Geneva, Arial, Helvetica, sans-serif; color: #666666;font-size: 13px;}
.Grey:hover{font-family: Geneva, Arial, Helvetica, sans-serif; color: #666666;font-size: 13px;}

/****************************************************/

.Green:link{font-family: 'Lato', Calibri, Arial, sans-serif; color: #33CC33; font-size: 12px; }
.Green:visited{font-family: 'Lato', Calibri, Arial, sans-serif; color: #33CC33;font-size: 12px;}
.Green:active{font-family: 'Lato', Calibri, Arial, sans-serif; color: #33CC33;font-size: 12px;}
.Green:hover{font-family: 'Lato', Calibri, Arial, sans-serif; color: #33CC33;font-size: 12px;}

/****************************************************/

.Orange:link{font-family: 'Lato', Calibri, Arial, sans-serif; color: #FF9900; font-size: 12px; }
.Orange:visited{font-family: 'Lato', Calibri, Arial, sans-serif; color: #FF9900;font-size: 12px;}
.Orange:active{font-family: 'Lato', Calibri, Arial, sans-serif; color: #FF9900;font-size: 12px;}
.Orange:hover{font-family: 'Lato', Calibri, Arial, sans-serif; color: #FF9900;font-size: 12px;}

.Red:link{ color: #333333; font-size: 12px; }
.Red:visited{color: #333333;font-size: 12px;}
.Red:active{color: #333333;font-size: 12px;}
.Red:hover{color: #333333;font-size: 12px;}

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 25px;
letter-spacing: 0;
/*text-align: left;*/
text-align: justify;
word-spacing: 0;
text-decoration: none;
color: #333333;
background-image: url(images/background.png);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.Style8 {
	font-size: 12px;
color: #999999;
}
.Style14 {color: #302E2F}
.Style15 {color: #FFFFFF; }
.Style16 {color: #333333}
.Style17 {
	color: #999999;
	font-size: 12px;
}
.Style18 {color: #666666}
.Style19 {color: #262425}
.Style20 {color: #292728}
/*input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-decoration: none;
	color: #0099FF;
}*/


.Style22 {
	font-size: 10px;
	color: #282828;
}
.Style25 {color: #2C2A2B}
.Style26 {font-size: 9px}
.Style27 {color: #999999; font-size: 8px;}
.Style29 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 10px;
}
.Style31 {
	color: #682E2D;
	font-weight: bold;
}
.Style32 {font-family: Geneva, Arial, Helvetica, sans-serif;}
.Style36 {color: #FFCC00}
select {
font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0099FF;
}
.Style37 {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}
.Style39 {
	color: #0170C9;
	font-weight: bold;
}
.Style40 {color: #1F9EFD}
.Style41 {color: #FF6600}
.Style44 {
	color: #EC8B22;
	font-size: 24px;
}

.p {
	line-height: 15px;
}

.load
{
    background:url('images/loading.gif') no-repeat center;
} 

.hfdata{
 /*background-color : #fff;*/
 border-bottom : 1px #E6E6E6;
 border-left : 1px dotted #E6E6E6;
 border-right : 1px dotted #E6E6E6;
 border-top : 1px dotted #E6E6E6;
 border-style: dotted;
 color: #666666;
} 
/*input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #999999;
}*/

	
hr
{ border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } 	

/*#grayscale img
{
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
}
#grayscale img:hover
{
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
}

#saturate img
{
        filter: saturate(500%);
        -webkit-filter: saturate(500%);
        -moz-filter: saturate(500%);
        -o-filter: saturate(500%);
        -ms-filter: saturate(500%);
}
#saturate img:hover
{
        filter: saturate(100%);
        -webkit-filter: saturate(100%);
        -moz-filter: saturate(100%);
        -o-filter: saturate(100%);
        -ms-filter: saturate(100%);
}*/
	
#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 100%;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
}
#menu-accordeon li {
   background-color:#F8F9FA; 
   background-image:-webkit-linear-gradient(top, #F8F9FA 0%, #F8F9FA 100%);
   background-image: linear-gradient(to bottom, #F8F9FA 0%, #F8F9FA 100%);
   border-radius: 0px;
   margin-bottom:0px;
   box-shadow: 0px 0px 0px #999;
   border:solid 0px #333A40
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #FFFFFF;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #117691;
  padding: 8px 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size:14px
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:12px
}
#menu-accordeon li:hover {
   background: #B8CEDE
}
#menu-accordeon li li:hover {
   background: #F6F6F6;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 0px 0px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 150em;
}	

/*Ici on modifie le menu accordeon pour l'agenda*/

#menu-accordeone {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
  width: 100%;
}
#menu-accordeone ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
}
#menu-accordeone li {
  /* background-color:#CCCCCC; */
  /* background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);*/
   border-radius: 0px;
   margin-bottom:1px;
  /* box-shadow: 3px 3px 3px #999;*/
   /*border:solid 0px #333A40*/
}
#menu-accordeone li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
  /* background: #CCCCCC;*/
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeone a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
#menu-accordeone ul li a, #menu-accordeon li:hover li a {
  font-size:12px
}
#menu-accordeone li:hover {
  /* background: #CCCCCC*/
}
#menu-accordeone li li:hover {
  /* background: #CCCCCC;*/
   
}
#menu-accordeone ul li:last-child {
   border-radius: 0 0 0px 0px;
   border:none;
}
#menu-accordeone li:hover li {
  max-height: 15em;
}	
	
/* Ici le sytle iframe*/

iframe{
margin-top: 0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
}

.styleiframe {
  margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 2px 2px 12px #000;
  -webkit-box-shadow: 2px 2px 12px #000;
  box-shadow: 2px 2px 12px #000;

  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}

/*
.side-corner-tag {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: 900;
} 
 
.side-corner-tag span p {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 6px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
} 
 
.side-corner-tag span:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    right: 69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}
 
.side-corner-tag span:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 74px;
    z-index: -1;
    right: -10px;
    border: 17px solid;
    border-color: #662121 transparent transparent transparent;
}*/

/* ---------------------- Style du menu Actualites/News (travaux,actions citoyennes,etc..)---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family: Geneva, Arial, Helvetica, sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#999999;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#333333;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */


.cropImg{
	width: 600px;
	height: 300px;
	overflow: hidden; 
}
.cropImg img{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0px;
}


.cropImgdetailnews{
	width: 700px;
	height: 387px;
	overflow: hidden; 
}
.cropImgdetailnews img{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0px;
}

.cropImag{
	width: 300px;
	height: 200px;
	overflow: hidden; 
}
.cropImag img{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0px;
}




/*crop 2 */
.cropImaag{
	width: 100px;
	height: 100px;
	overflow: hidden; 
}
.cropImaag img{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0px;
}
/*-------------------*/
.cropImaage{
	width: 332px;
	height: 243px;
	overflow: hidden; 
}
.cropImaage img{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0px;
}



/*STle bouton submit 1---*/

.styled-button-10 {
	background:#5CCD00;
	background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
	background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5CCD00', endColorstr='#4AA400',GradientType=0);
	padding:10px 15px;
	color:#fff;
font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size:16px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #459A00
}


.styled-button-12 {

	background: #5B74A8;
	background: -moz-linear-gradient(top,#7AA7D3 0%,#7AA7D3 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#7AA7D3), color-stop(100%,#7AA7D3));
	background: -webkit-linear-gradient(top,#7AA7D3 0%,#7AA7D3 100%);
	background: -o-linear-gradient(top,#7AA7D3 0%,#7AA7D3 100%);
	background: -ms-linear-gradient(top,#7AA7D3 0%,#7AA7D3 100%);
	background: linear-gradient(top,#7AA7D3 0%,#7AA7D3 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7AA7D3',endColorstr='#7AA7D3',GradientType=0);
	padding:11px 11px;
	color:#fff;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size:14px;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border: solid 2px #FFFFFF;
}

.styled-button-66 {

	background: #FFFFFF;
	background: -moz-linear-gradient(top,#F1F3F5 0%,#F1F3F5 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F1F3F5), color-stop(100%,#F1F3F5));
	background: -webkit-linear-gradient(top,#F1F3F5 0%,#F1F3F5 100%);
	background: -o-linear-gradient(top,#F1F3F5 0%,#F1F3F5 100%);
	background: -ms-linear-gradient(top,#F1F3F5 0%,#F1F3F5 100%);
	background: linear-gradient(top,#F1F3F5 0%,#F1F3F5 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#F1F3F5',endColorstr='#F1F3F5',GradientType=0);
	padding:11px 11px;
	color:#5B74A8;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size:14px;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border: solid 2px #FFFFFF;
}

/*FORM*/

.form {
  position: relative;
  background: #ffffff;
  width: 95%;
  margin: 40px auto 0;
  padding: 40px;
  border-top: 5px solid #33b5e5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}
.form .switch {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  background: #33b5e5;
  width: 30px;
  height: 30px;
  margin: -5px 0 0;
  -webkit-border-radius: 0 3px 0 3px;
  -moz-border-radius: 0 3px 0 3px;
  border-radius: 0 3px 0 3px;
  color: #ffffff;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
}
.form .switch .tooltip {
  position: absolute;
  top: 5px;
  right: -65px;
  display: block;
  background: rgba(0, 0, 0, 0.6);
  width: auto;
  padding: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}
.form .switch .tooltip:before {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  display: block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form .register {
  display: none;
}
.form h2 {
  margin: 0 0 20px;
  line-height: 1;
  color: #33b5e5;
  font-size: 18px;
  font-weight: 400;
}
.form .alert {
  position: relative;
  background: #f3f3f3;
  color: #666666;
  font-size: 12px;
  margin-bottom: 20px;
  padding: 15px;
  text-align: left;
}
.form .alert .fa-times-circle {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  margin-top: -8px;
  float: right;
}
.form input {
  outline: none;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #ccc;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  -webkti-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  font-wieght: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.form input:focus {
  color: #333333;
  border: 1px solid #33b5e5;
}
.form button {
  cursor: pointer;
  background: #33b5e5;
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 25px;
  border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #ffffff;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.form button:hover {
  background: #1a9bcb;
}
.form footer {
  background: #f2f2f2;
  width: 100%;
  padding: 15px 40px;
  margin: 0 0 -40px -40px;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  color: #666666;
  font-size: 12px;
  text-align: center;
}
.form footer a {
  color: #333333;
  text-decoration: none;
}
/*.info {
  width: 300px;
  margin: 25px auto;
  text-align: center;
}
.info h1 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 400;
  color: #333333;
}
.info span {
  color: #666666;
  font-size: 12px;
}
.info span a {
  color: #000000;
  text-decoration: none;
}
.info span .fa {
  color: #33b5e5;
}
.info span .spoilers {
  color: #999999;
  margin-top: 5px;
  font-size: 10px;
}*/

.style-2 input[type="text"] {
  padding: 10px;
  border: solid 5px #FAFBFC;
  transition: border 0.3s;
}
.style-2 input[type="text"]:focus,
.style-2 input[type="text"].focus {
  border: solid 5px #969696;
}
img.zoomEffect {
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    opacity: 1;
}
img.zoomEffect:hover {
    -moz-transform: rotate(0deg) scale(1.12);
    -webkit-transform: rotate(0deg) scale(1.12);
    -o-transform: rotate(0deg) scale(1.12);
    -ms-transform: rotate(0deg) scale(1.12);
    transform: rotate(0deg) scale(1.12);
    opacity: 0.7;
}

/* test 
.ex4 li {
	display: inline-block;
	width: 200px;
	margin: 0 10px;
	padding: 5px;
	box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;
}
.ex4 figure {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 125px;
	margin: 0;
	text-align: center;
	overflow: hidden;
}
.ex4 figcaption {
	position: absolute;
	left: 0; bottom: -1em;
	width: 200px;
	height: 2.6em;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
	background: rgba(0,0,0,0.6);
	overflow: hidden;
	/*pr�paration de la transition
	transition: all 0.7s;
}
.ex4 figcaption span { display: block; }*/

.Style265 {font-size: 10px}

/* Zoom effect small */
img.zoomiEffect {
    -moz-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    opacity: 1;
}
img.zoomiEffect:hover {
    -moz-transform: rotate(0deg) scale(1.12);
    -webkit-transform: rotate(0deg) scale(1.12);
    -o-transform: rotate(0deg) scale(1.12);
    -ms-transform: rotate(0deg) scale(1.12);
    transform: rotate(0deg) scale(1.12);
    opacity: 0.5;
}
#mainwrapper {
	font: 9pt normal Arial, sans-serif;
	height: 126px;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 1140px;
	position: absolute;
	visibility: inherit;
}

#mainwrapper .box {
    border: 0px solid #fff;
    cursor: pointer;
    height: 126px;
    float: left;
    margin: 1px;
    position: relative;
    overflow: hidden;
    width: 282px;
   /* -webkit-box-shadow: 0px 0px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;*/
}
 
#mainwrapper .box img {
	position: absolute;
	left: -1px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
    background-color: rgba(76, 100, 108, 0.72); /* ici pour modifier la couleur de fond du caption*/
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}
#mainwrapper .box .full-caption {
    width: 282px;
    height: 126px;
    top: -166px;
    text-align: left;
    padding: 15px;
}
#mainwrapper .box:hover .full-caption {
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.cropImage{
	width: 270px;
	height: 118px;
	overflow: hidden; 
}
.cropImage img{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0px;
}

/*--------ICI le style pour balise HR----*/
.style-three { height: 8px; background: #999999; }
.style-four { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); }

/*ici style pour Ubiloop */

.tablera { 
-moz-box-shadow: 0px 0px 5px 0px #343434;
-webkit-box-shadow: 0px 0px 5px 0px #343434;
-o-box-shadow: 0px 0px 5px 0px #343434;
box-shadow: 1px 1px 4px #333333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#343434, Direction=NaN, Strength=5);
}
		
.cadreimage{

 border:1px solid #F3F3F3; 
 background-color:#FFFFFF; 
 padding:3px; 
 margin:6px; }

/*----------------------*/
 
#photoholder {
	width:423px;
	height:82px;
	border:0px solid #666;
	background:none url('/images/loading.gif') 50% 50% no-repeat;
		
}
#thephoto {
	width:423px;
	height:82px;
}
/*-------CAPTION-----*/
div.wrapper{
	float:left; /* important */
	position:relative; /* important(so we can absolutely position the description div */ 
}
div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	/* styling bellow */
	background-color:black;
	font-family: 'arial';
	font-size:13px;
	color:white;
	opacity:0.7; /* transparency */
	filter:alpha(opacity=20); /* IE transparency */
}
p.description_content{
	padding:10px;
	margin:0px;
}

/*-------CORNER RIBBON----*/

.wrapperibbon {

/*vertical-align:top;*/
  left:0px;
  width: 327px;
  height: 217px;
  background: none;
  border-radius: 0px;
 /* -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);*/
  position: relative;
  z-index: 90;
}

.ribbon-wrapperibbon-green {
	width: 420px;
	height: 217px;
	overflow: hidden;
	position: absolute;
	top: -1px;
	right: -397px;

  }


.ribbon-green {

  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: +300px;
  top: 35px;
  width: 180px;
  background-color: #E74B2E; /*bandeau*#BFDC7A*/
  background-image: -webkit-gradient(linear, left top, left bottom, from(#E74B2E), to(#EB654E)); 
  background-image: -webkit-linear-gradient(top, #E74B2E, #EB654E); 
  background-image:    -moz-linear-gradient(top, #E74B2E, #EB654E); 
  background-image:     -ms-linear-gradient(top, #E74B2E, #EB654E); 
  background-image:      -o-linear-gradient(top, #E74B2E, #EB654E); 
  color: #fff; /*text*/
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #E74B2E;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
.fonecran{
background-image:url(images/fondsl1.jpg);
background-position: center center;
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
-moz-background-size: 100% auto;     /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% auto;        /* Opera 9.5 */
-webkit-background-size: 100% auto;   /* Safari 3.0 */
background-size: 100% auto; 
}          /* Gecko }



/*--------FONDU DE l'ANNONCE----------------*/
 div#transparente {
      filter:alpha(opacity=70);   /* IE */
      -moz-opacity:0.3;           /* Firefox */
      opacity: 0.3;               /* standard CSS3 */
      -khtml-opacity: 0.3;        /* Konqueror */
      position: relative;
      top : 0;
      left : 0;
      background-color : #333333;
      width: 100%;
      height: 100%;
	  text-align: center;
      }
	  

	  div#pastransparente {
      filter:alpha(opacity=100);  /* IE */
      -moz-opacity:1;             /* Firefox */
      opacity: 1;                 /* standard CSS3 */
      -khtml-opacity: 1;          /* Konqueror */
      position: absolute;
      top : 627px;
      left : 65px;
      padding : 20px;
      border : 1px solid #00ff00;
	  
      }
	  
	  div#interieure {
display: inline-block;
}
	  
/*-------------------*/
.selecteur{
-webkit-box-shadow: 0px 0px 5px 3px #4c4c4c;
-moz-box-shadow: 0px 0px 5px 3px #4c4c4c;
filter:progid:DXImageTransform.Microsoft.Glow(Color=#4c4c4c,Strength=8);
zoom:1;
box-shadow: 0px 0px 5px 3px #4c4c4c;
}

/*-------LOADER-----
.loader{
	background: url('images/ajax-loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader h1{
		background: none;
		border: none;
		color: #458976;
		font-size: 22px;
		font-family: "Open Sans",sans-serif;
		font-variant: small-caps;
		font-weight: 700;
		height: 700px;
		line-height: 700px;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}*/
	
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/ajax-loader.gif) center no-repeat #fff;
}
/*-----------------------------------*/
h1 {
line-height:32px;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
/*text-align: justify;*/
color:#333333;
}

p{
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
text-align: justify;
}

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }
   
   /****************************************************/

.photoflot { 
  float:center; 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
} 
/****************************CSS LITE BOX*****************************/
/* Preload images */
body:after {
  content: url(images/close.png) url(images/loading.gif) url(images/prev.png) url(images/next.png);
  display: none;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/****************************FIN CSS LITE BOX**************************/
/****************************DEBUT NEWS ROTATOR(BANDEAU FIN)**************************/
#carousel {
	position: relative;
	width: 100%;  
	/*margin: 0 0 0 0;*/
	height:40px;
}

#slides {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 40px;
}

#slides ul {
  list-style: none;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  position: relative;
}

#slides li {
	width: 100%;
	height: 40px;
	float: left;
	text-align: center;
	position: relative;
	font-family: lato, sans-serif;
}

/* Styling for prev and next buttons */

.btn-bar {
  width: 12px;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0px;
}

#buttons {
  padding: 0 0 5px 0;
  float: right;
}

#buttons a {
  text-align: center;
  display: block;
  font-size: 30px;
  float: left;
  outline:0;
 margin: 0 0px;
  color: #CCCCCC;
  text-decoration: none;
  display: block;
  padding: 9px;
  width: 35px;
}

a#prev:hover,
a#next:hover {
  color: #FFF;
  text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
  font-family: sans-serif;
  font-weight: 12;
  display: table-cell;
  vertical-align: middle;
  padding: 5px 20px;
  font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
  height: 20px;
  font-size: 16px;
  color: #FFF;
  font-style: normal;
  /*text-shadow: .5px 0px #b14943;*/
}

.quote-marks {
  font-size: 30px;
  padding: 0 3px 3px;
  position: inherit;
}

.quote-author {
  font-style: normal;
  font-size: 20px;
  color: #b14943;
  font-weight: 40;
  height: 30px;
}

.quoteContainer,
.authorContainer {
  display: table;
  width: 100%;
}
/****************************FIN TEXT ROTATOR FIN**************************/
/****************************DEBUT NEWS ROTATOR(BANDEAU LARGE)**************************/

#carousela {
	position: relative;
	width: 100%;  
	/*margin: 0 0 0 0;*/
	height:200px;
}

#slidesa {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 200px;
}

#slidesa ul {
  list-style: none;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  position: relative;
}

#slidesa li {
	width: 100%;
	height: 200px;
	float: left;
	text-align: center;
	position: relative;
	font-family: lato, sans-serif;
}

/* Styling for prev and next buttons */

.btn-bara {
  width: 12px;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0px;
}

#buttonsa {
  padding: 0 0 5px 0;
  float: right;
}

#buttonsa a {
  text-align: center;
  display: block;
  font-size: 30px;
  float: left;
  outline:0;
 margin: 0 0px;
  color: #CCCCCC;
  text-decoration: none;
  display: block;
  padding: 9px;
  width: 35px;
}


.quote-phrasea,
.quote-authora {
  font-family: sans-serif;
  font-weight: 12;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding: 5px 20px;
  /*font-family: 'Lato', Calibri, Arial, sans-serif;*/
}

.quote-phrasea {
  height: 20px;
  font-size: 16px;
  color: #FFF;
  font-style: normal;
  /*text-shadow: .5px 0px #b14943;*/
}

.quote-marksa {
  font-size: 30px;
  padding: 0 3px 3px;
  position: inherit;
}

.quote-authora {
  font-style: normal;
  font-size: 20px;
  color: #b14943;
  font-weight: 40;
  height: 30px;
}

.quoteContainera,
.authorContainera {
  display: table;
    text-align: left;
  width: 100%;
}

.styleimageresize
 {
  display: block;
  max-width:96px;
  max-height:84px;
  width: auto;
  height: auto;
  border:1px solid #F3F3F3; 
  background-color:#FFFFFF; 
  padding:3px; 
  margin:6px; 
}

.styleimageresizebig
 {
  display: block;
  max-width:321px;
  max-height:194px;
  width: auto;
  height: auto;
  border:1px solid #F3F3F3; 
  background-color:#FFFFFF; 
  padding:3px; 
  margin:6px; 
}

.styleimageresizemorebig
 {
  display: block;
  max-width:600px;
 
  width: auto;
  height: auto;
  border:1px solid #F3F3F3; 
  background-color:#FFFFFF; 
  padding:3px; 
  margin:6px; 
}
/*------------INFOBULLE ROLLOVER ---------------------------------*/
a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #666666;
    border: 1px solid #bbb;
    background: #ECF2EF;
    width:170px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(image-infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}
/*------------ FIN INFOBULLE ROLLOVER ---------------------------------*/
#blocarrondi
{
-moz-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid red;
background-color: black;
}
/**------------------------------------------*/
.thumbnail {
  position: relative;
  width: 306px;
  height: 205px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 100%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}