﻿/**************** styles globaux ****************/
html{
  position: relative;
}
body {
  background-color: #E4E4E4; /*CB collage maquette*/
  min-width: 1122px;
  overflow: hidden;
}
body#tinymce 
{
  min-width: inherit;
  overflow:auto;
  background: #FFF;
}
.societaire h3, .concedant h3, .promodis h3 {
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  padding : 5px 10px;
  margin : 0 -6.5px;
}
.societaire h3, .concedant h3{
  background-color : #B6B6B6;
  color : #FFF;
}

.promodis h3 {
  background-color : #91C11A;
  color : #FFF;
}
h1{
  margin-bottom: 0.2em;
  font-style: italic;
}
h2,h3,h4,h5,h6{
  margin-bottom: 0.2em;
  margin-top: 0.5em;
}

/**************** partie header du site ****************/
body > header {
  height: 13em;
  box-shadow: 0 0 0.75em #333333;
  -moz-box-shadow: 0 0 0.75em #333333;
  -webkit-box-shadow: 0 0 0.75em #333333;
  background-color: #FFFFFF;
  position: relative;
}
/*body > header > a*/ #logoContainer {
  display: block;
  height: 10em;
  /*width: 700px;*/
  width : 1100px;
  margin: 0 auto;
  background: transparent 50% 50% no-repeat;
  text-align : center;
  line-height : 10em;
}
#logoContainer > a {
  width : 700px;
  margin : 0 auto;
}
/* la navigation dans le header */
body > nav {
  text-align: center;
  line-height: 1.5em;
  margin: -3em auto -1em;
  color: #EEEEEE;
  z-index: 5000;
  position: relative;
  min-height: 4em;
  width: 700px; /* sans ça, il devient difficile de cliquer sur le haut des totems */
}
body > nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body > nav a,
body > nav a:hover,
body > nav span {
  color: #EEEEEE;
  display: block;
}
/* niveau 1 */
body > nav > ul {
  background-color: #333333; /*CB collage maquette*/
  background: linear-gradient(to bottom, #666666 0%, #333333 100%) repeat scroll 0 0 transparent;
  background: transparent -moz-linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  background: transparent -webkit-gradient(linear, left top, left bottom, from(#666666), to(#333333)) 0 0 repeat-x;
  background: transparent -webkit-linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  background: transparent linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  box-shadow: 0 0 0.5em #333333;
  -moz-box-shadow: 0 0 0.5em #333333;
  -webkit-box-shadow: 0 0 0.5em #333333;
  cursor: default;
  width: 700px;
  height: 4em;
  display: table;
  position: relative;
  z-index: 1664;
  table-layout: fixed;
  white-space: nowrap;
}
body > nav > ul > li {
  display: table-cell;
  height: 4em;
}
body > nav > ul > li > a,
body > nav > ul > li > span {
  padding-top: 2.5em;
  background: transparent 50% 0.25em no-repeat;
}
body > nav > ul > li:hover > a,
body > nav > ul > li:hover > span {
  opacity: 0.65;
}
/* niveau 2 */
body > nav > ul > li > ul {
  display: none;
  background-color: #444444;
  position: absolute;
  top: 4em;
  left: 1em;
  right: 1em;
  overflow: hidden;
  border-bottom-right-radius: 0.75em;
  border-bottom-left-radius: 0.75em;
  -moz-border-radius-bottomright: 0.75em;
  -moz-border-radius-bottomleft: 0.75em;
  -webkit-border-bottom-right-radius: 0.75em;
  -webkit-border-bottom-left-radius: 0.75em;
  box-shadow: 0 0 0.75em #333333;
  -moz-box-shadow: 0 0 0.75em #333333;
  -webkit-box-shadow: 0 0 0.75em #333333;
  z-index: 666;
  text-align: center;
}
body > nav > ul > li:hover > ul {
  display: block;
}
body > nav > ul > li > ul > li {
  margin: 0.25em 70px;
  border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  overflow: hidden;
}
body > nav > ul > li > ul > li:hover {
  background-color: #555555;
}
body > nav > ul > li > ul > li > a,
body > nav > ul > li > ul > li > span {
  font-style: italic;
  padding: 0.25em 2em;
  font-size: 1.2em;
}
/* niveau 2 et + */
body > nav > ul > li > ul a,
body > nav > ul > li > ul span {
  padding: 0 1em;
}
body > nav > ul > li > ul a:hover {
  text-decoration: underline;
}
/* niveau 3 et + */
body > nav > ul > li > ul > li > ul {
  text-align: left;
}
body > nav > ul > li > ul > li > ul ul {
  margin-left: 1em;
  margin-bottom: 0.5em;
  border-left: 0.1em solid #444444;
}
body > nav > ul > li > ul> li > ul > li:hover {
  background-color: #666666;
}


/**************** partie footer du site ****************/
body > footer {
  min-height: 1.5em;
  overflow: hidden;
  background-color: #FFFFFF;
  box-shadow: 0 0 0.75em #333333;
  -moz-box-shadow: 0 0 0.75em #333333;
  -webkit-box-shadow: 0 0 0.75em #333333;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /*transition: height 0.2s ease-in-out;
  -o-transition: height 0.2s ease-in-out;
  -moz-transition: height 0.2s ease-in-out;
  -webkit-transition: height 0.2s ease-in-out;*/
  z-index: 3000;
}
body > footer > div + div{
  display: none;
}
body > footer:hover > div + div{
  display: block;
}

/**************** partie content du site ****************/
#container {
  white-space: nowrap;
  position: relative;
  z-index: 300;
  width: 1122px;
  margin: 0 auto 3em;
}
.content,
.totem {
  background-color: #FFFFFF;
  box-shadow: 0 0 0.75em #333333;
  -moz-box-shadow: 0 0 0.75em #333333;
  -webkit-box-shadow: 0 0 0.75em #333333;
  position: relative;
  vertical-align: top;
  border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  display: inline-block;
}
.no-boxshadow .content ,
.no-boxshadow #totemconcedant,
.no-boxshadow #totempromodis {
  outline: 0.1em solid #BBBBBB;
}
.content *,
.totem * {
  white-space: normal; /* ie7 powa : si je le mets au-dessus, il est non-annulable dans la css d'ie7 qui l'applique bien aux enfants mais aussi à l'élément courant...*/
}

#charts *,
#graphAnalytics * {
    white-space: nowrap;
}

.content {
  width: 650px;
  padding-top: 1em;
  z-index: 1002;
  margin: 0 60px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.internal .content {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.internal .content > :last-child{
  border-bottom-right-radius: 0.75em;
  border-bottom-left-radius: 0.75em;
  -moz-border-radius-bottomright: 0.75em;
  -moz-border-radius-bottomleft: 0.75em;
  -webkit-border-bottom-right-radius: 0.75em;
  -webkit-border-bottom-left-radius: 0.75em;
}

#totemconcedant
{
  z-index: 1003;
}

.totem {
  width: 176px;
  top: -3em;
  min-height: 5em;
  z-index: 1001;
}
/* quelques trucs courants dans les totems */
.totem a {
  color: #333333;
}
.totem nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.totem nav li{
  padding-left: 0.5em;
}
.totem nav ul ul{
  margin-left: 0.5em;
  border-left: 0.1em solid #DDD;
}
.totem nav a,
.totem nav span {
  display: block;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.totem nav a:hover {
  text-decoration: underline;
}
.totem nav span {
  font-style: italic;
  cursor: default;
}
.totem nav > ul {
  padding-top: 0.5em;
}
.totem nav > ul > li {
  padding-right: 0.5em;
  margin-bottom: 0.5em;
}
.totem nav > ul > li > a,
.totem nav > ul > li > span {
  background-color: #333333; /*CB collage maquette*/
  background: linear-gradient(to bottom, #666666 0%, #333333 100%) repeat scroll 0 0 transparent;
  background: transparent -moz-linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  background: transparent -webkit-gradient(linear, left top, left bottom, from(#666666), to(#333333)) 0 0 repeat-x;
  background: transparent -webkit-linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  background: transparent linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  color: #FFFFFF;
  padding-left: 0.5em;
  border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
}
.totem nav ul ul a,
.totem nav ul ul span {
  font-size: 0.9em;
}

/* homepage */
/* les fameux rubans colorés : y'en a aussi dans la css concédant */
.homepage #container:before,
.homepage #container:after {
  content: " ";
  display: block;
  height: 2em;
  position: absolute;
  top: -2em;
  width: 385px;
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  background-color: #E1001A;
}
.homepage #container:before {
  left: 1122px;
}
.homepage #container.concedantview:before {
  left: 561px;
}
.homepage #container:after {
  left: 1507px;
}
.homepage #container.promodisview:after {
  left: 2068px;
}



/* bon là c'est pour faire des slides accélérées en matériel, mais à ce niveau autant faire des cubes. Mais on ne le fera pas. Sauf si on charge la css qui va bien en plus (template-3d.css) */
.homepage #container{
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  -webkit-transform-origin: 50% 50% 0;
  -moz-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  -o-transform-origin: 50% 50% 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
/* ici on déclare en transformations 2D puis 3D : en principe, la 3D déclenche l'accélération matérielle sous certains OS/nav/matos, malgré tout la 2D est plus performante qu'une simple transition sur un left d'un élément positionné en relatif, si bien sûr, la version 3D n'est pas supportée... */
.homepage #container.concedantview {
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -o-transform: translate(0,0);
}
.homepage #container.contentview {
  transform: translate(-946px,0);
  -webkit-transform: translate(-946px,0);
  -moz-transform: translate(-946px,0);
  -ms-transform: translate(-946px,0);
  -o-transform: translate(-946px,0);
}
.homepage #container.promodisview {
  transform: translate(-1892px,0);
  -webkit-transform: translate(-1892px,0);
  -moz-transform: translate(-1892px,0);
  -ms-transform: translate(-1892px,0);
  -o-transform: translate(-1892px,0);
}

/* pas de transformations (2D, on considère que si la 3D est supportée, la 2D aussi donc on ne teste pas la 2D) ? Pas de problème mais pas d'accélération materielle. Et puis on slide à la place. Ah non c'est quand même on slide qu'il faut dire. */
/* même tarif en cas de non présence des transitions : jquery ne gère pas des propriétés si compliquées... */
.no-csstransforms .homepage #container,
.no-csstransitions .homepage #container {
  transform: none !important;
  -moz-transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
}
.no-csstransforms .homepage #container.concedantview,
.no-csstransitions .homepage #container.concedantview {
  left: 0;
}
.no-csstransforms .homepage #container.contentview,
.no-csstransitions .homepage #container.contentview {
  left: -946px;
}
.no-csstransforms .homepage #container.promodisview,
.no-csstransitions .homepage #container.promodisview {
  left: -1892px;
}

/* un peu d'opacité c'est plus sympa */
.homepage .totem,
.homepage .content {
  opacity: 0;
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
}
.homepage .concedantview #totemconcedanthp,
.homepage .concedantview #contentconcedant,
.homepage .concedantview #totemconcedant,
.homepage .contentview #totemconcedant,
.homepage .contentview #contentmain,
.homepage .contentview #totempromodis,
.homepage .promodisview #totempromodis,
.homepage .promodisview #contentpromodis,
.homepage .promodisview #totempromodishp {
  opacity: 1;
}
/* pour ceux qui ne gèrent pas l'opacité : IE8 quoi */
.no-opacity .homepage .totem,
.no-opacity .homepage .content {
  visibility: hidden;
}
.no-opacity .homepage .concedantview #totemconcedanthp,
.no-opacity .homepage .concedantview #contentconcedant,
.no-opacity .homepage .concedantview #totemconcedant,
.no-opacity .homepage .contentview #totemconcedant,
.no-opacity .homepage .contentview #contentmain,
.no-opacity .homepage .contentview #totempromodis,
.no-opacity .homepage .promodisview #totempromodis,
.no-opacity .homepage .promodisview #contentpromodis,
.no-opacity .homepage .promodisview #totempromodishp,
.no-opacity .homepage .inTransition .totem,
.no-opacity .homepage .inTransition .content {
  visibility: visible;
}

/* petit réglage d'un cas particulier : CIv6 sans concédant */
.homepage.no-concedant .totem{
  padding-top: 40px;
  background-repeat: no-repeat;
}
.homepage.no-concedant #totemconcedant{
  margin-left: 946px;
  background-position: 50% 3px;
  background-image: url(/Templates/DefaultTemplates/CIv6/images/no-concedant-header-totem-concedant.png);
}
.homepage.no-concedant #totempromodis{
  background-position: 50% 0;
  background-image: url(/Templates/DefaultTemplates/CIv6/images/no-concedant-header-totem-promodis.png);
}

/* contenu de la homepage */
/* boutons pour switcher entre les vues de la home */
.switchview {
  background: transparent none 50% 50% no-repeat;
  border: 0;
  display: block;
  cursor: pointer;
  height: 40px;
  width: 100%;
  transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;
  border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  animation: 3s 2s infinite alternate;
  -moz-animation: 3s 2s infinite alternate;
  -webkit-animation: 3s 2s infinite alternate;
  
  /* on tente l'accélération materielle pour la transition et l'anim */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}
#totempromodis .switchview {
  background-image: url(/Templates/DefaultTemplates/CIv6/images/switch-view-promodis.png);
}
#totempromodis .switchview,
.concedantview #totemconcedant .switchview {
  background-position: 0 50%;
  animation-name: ZeroPerCentPosition;
  -moz-animation-name: ZeroPerCentPosition;
  -webkit-animation-name: ZeroPerCentPosition;
}
#totemconcedant .switchview,
.promodisview #totempromodis .switchview {
  background-position: 100% 50%;
  animation-name: CentPerCentPosition;
  -moz-animation-name: CentPerCentPosition;
  -webkit-animation-name: CentPerCentPosition;
}
/* Quelques animation CSS pour les switchview */
@keyframes CentPerCentPosition {
  0%,90%{background-position: 100% 50%;}
  100%{background-position: 105% 50%;}
}
@keyframes ZeroPerCentPosition {
  0%,90%{background-position: 0 50%;}
  100%{background-position: -5% 50%;}
}
@-webkit-keyframes CentPerCentPosition {
  0%,90%{background-position: 100% 50%;}
  100%{background-position: 105% 50%;}
}
@-webkit-keyframes ZeroPerCentPosition {
  0%,90%{background-position: 0 50%;}
  100%{background-position: -5% 50%;}
}
@-moz-keyframes CentPerCentPosition {
  0%,90%{background-position: 100% 50%;}
  100%{background-position: 105% 50%;}
}
@-moz-keyframes ZeroPerCentPosition {
  0%,90%{background-position: 0 50%;}
  100%{background-position: -5% 50%;}
}

/* homeBlocs (ceux qui sont deux ou trois sur une ligne) */
.homeBlocs {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.homeBlocs article{
  display: table-cell;
  border-style: solid;
  border-width: 0 1px;
  vertical-align: top;
}
.homeBlocs header {
  padding: 0.7em;
  text-align: center;
  text-transform: uppercase;
}

/* content concess hp */
#homeBlocsConcess {
  color: #444444;
}
#homeBlocsConcess article{
  border-color: #333333;
}
#homeBlocsConcess a {
  color: #444444;
}
#homeBlocsConcess a:hover{
  color: #111111;
}
#homeBlocsConcess header {
  color: #EEEEEE;
  background-color: #333333; /*CB collage maquette*/
  background: linear-gradient(to bottom, #666666 0%, #333333 100%) repeat scroll 0 0 transparent;
  background: transparent -moz-linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  background: transparent -webkit-gradient(linear, left top, left bottom, from(#666666), to(#333333)) 0 0 repeat-x;
  background: transparent -webkit-linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
  background: transparent linear-gradient(top, #666666 0%, #333333 100%) 0 0 repeat-x;
}
#homeBlocsConcess header a {
  color: #EEEEEE;
  display: block;
  height: 100%;
}


/* content promodis hp */
#contentpromodis {
  /*background-color: #E1001A;*/ /*CB collage maquette*/
}
#bandeaupromodishp {
  display: block;
  margin-bottom: 0.5em;
}
.internal #bandeaupromodishp{
  margin-left: -0.5em;
}

/* totem promodis hp */
#totempromodishp {
  margin-top: 10em;
  background-color: #E1001A;
}
#logopromodistotemhp {
  display: block;
  margin-left: -28px;
  margin-top: -45px;
  width: 231px;
  height: 165px;
}
#totempromodishp h3 {
  color: #FFFFFF;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 -0.1em 0.1em rgba(0, 0, 0, 0.25);
  line-height: 1.2;
}
#totempromodishp ul {
  display: block;
  padding: 0;
  margin: 0;
  margin-top: 1em;
  list-style: none;
}
#totempromodishp li {
  display: inline-block;
  height: 4em;
  width: 46%;
  margin: 0.3em 2%;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  background-color: #FFFFFF;
}



/**************** partie debug du site ****************/
#debug {
  position: fixed;
  top: 0;
  left: 0;
  height: 1.5em;
  width: 100px;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  background-color: rgba(238,238,238,0.9);
  border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  box-shadow: 0 0 0.75em #333333;
  -moz-box-shadow: 0 0 0.75em #333333;
  -webkit-box-shadow: 0 0 0.75em #333333;
  z-index: 65000;
  overflow: hidden;
}
#debug header {
  text-align: center;
}
#debug:hover {
  height: 100%;
  width: 800px;
  overflow: auto;
}

/*********** CMP *****************/
.totem nav.cmp > ul > li > ul > li > a:first-letter,
.totem nav.cmp > ul > li > span:first-letter
{
  text-transform: uppercase;
}

/*configurations des différents blocs de contenus sur la homepage*/
/* blocs du bas, slide concess */
#homeBlocsConcess article:first-child{
  border-left: 0;
}
#homeBlocsConcess article:last-child{
  border-right: 0;
}
/* actus, slide concess */
#homeRemonteeActus .slideShow {
  padding-bottom: 20px;
}
#homeRemonteeActus .slideShowSlides {
  height: 227px;
}
#homeRemonteeActus .actuTitre,
#homeRemonteeActus .actuIntro {
  padding: 0 0.5em;
  text-align: justify;
  display: block;
}
#homeRemonteeActus .actuTitre {
  margin-bottom: 1em;
  font-size: 0.9em;
  font-weight: bold;
}
#homeRemonteeActus .actuTitre img {
  float: left;
  margin-right: 0.5em;
  margin-top: 0.5em;
  max-height: 4em;
  max-width: 8em;
}

/* occasions, slide concess */
#homeOccasions img {
  max-width: 100%;
  max-height: 163px;
  padding-top: 2em;
}
#homeOccasions .slideShowSlides {
  padding-top: 163px;
  height: 7.5em;
  text-align: center;
}
#homeOccasions .slideShowSlides figcaption {
  top: 163px;
  padding: 0.75em;
  padding-top: 2.75em;
  font-size: 1em;
  border: 0;
  background-color: Transparent;
  text-shadow: none;
  white-space: normal;
  color: #444444;
}
#homeOccasions .slideShowSlides:hover figcaption {
  color: #111111;
}
#homeOccasions .slideShowSlides figcaption span{
  display: block;
}
#homeOccasions .slideShowSlides .prix{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2em;
  line-height: 2em;
  font-size: 1.1em;
  font-weight: bold;
}
#homeOccasions .slideShowControls {
  bottom: 5.5em;
}
/* styles communs des listes à puces des 3 slides*/
#homeBlocsConcedantSecond ul,
#homeServices ul,
#homePromodisSecond ul,
#totemPromodisLiens,
#totemConcedantLiens,
#totemSocietaireLiens {
  list-style: none;
  padding-left: 0;
}
#homeBlocsConcedantSecond li,
#homeServices li,
#homePromodisSecond li,
#totemPromodisLiens li,
#totemConcedantLiens li,
#totemSocietaireLiens li {
  display: block;
  padding-left: 2em;
  position: relative;
}
#homePromodisSecond li,
#homePromodisSecond li a {
  color: #333333;
}
#homeBlocsConcedantSecond li:before,
#homeServices li:before,
#homePromodisSecond li:before,
#totemPromodisLiens li:before,
#totemConcedantLiens li:before,
#totemSocietaireLiens li:before {
  content: '\25B6';
  font-family: Arial;
  font-size: 0.8em;
  position: absolute;
  top: 0.3em;
  left: 1em;
}
#homePromodisSecond li:before {
  color: #E1001A;
}
#totemConcedantLiens,
#totemSocietaireLiens {
  clear: both;
}

/* styles communs des slides concedant et promodis*/
/* disposition des blocs de contenus homepage, slides concedant et promodis */
.homepage #contentconcedant .homeBlocs,
.homepage #contentpromodis .homeBlocs {
  border-spacing: 0.5em 0;
  border-collapse: separate;
  margin-bottom: 0.5em;
}
#homeBlocsConcedantFirst article,
#homeBlocsPromodisFirst article {
  height: 225px;
}
.homepage #contentconcedant article,
.homepage #contentpromodis article {
  background-color: #FFFFFF;
  border-width: 0;
}
/* visionneuse images, slides concedant et promodis */
#homeConcedantVisionneuse,
#homePromodisVisionneuse {
  width: 455px;
}
#homeConcedantVisionneuse .slideShowSlides,
#homeConcedantVisionneuse .cms-content,
#homePromodisVisionneuse .slideShowSlides,
#homePromodisVisionneuse .cms-content {
  width: 455px;
  height: 225px;
}

#homeConcedantVisionneuse .cms-content-editor,
#homePromodisVisionneuse .cms-content-editor
{
  overflow: scroll;
}

/* visionneuse actus, slides concedant et promodis */
#homeConcendantRemonteeActus header,
#homePromodisRemonteeActus header {
  height: 20px;
}
#homeConcendantRemonteeActus .slideShow,
#homePromodisRemonteeActus .slideShow {
  padding-bottom: 27px;
}
#homeConcendantRemonteeActus .slideShowSlides,
#homePromodisRemonteeActus .slideShowSlides {
  height: 160px;
}
#homeConcendantRemonteeActus .actuTitre,
#homeConcendantRemonteeActus .actuIntro,
#homePromodisRemonteeActus .actuTitre,
#homePromodisRemonteeActus .actuIntro {
  font-size: 0.85em;
  padding: 0 0.5em;
  text-align: justify;
  display: block;
  color: #333333;
  letter-spacing: -0.03em;
}
#homeConcendantRemonteeActus .actuTitre,
#homePromodisRemonteeActus .actuTitre {
  margin-bottom: 0.2em;
  font-size: 0.75em;
  font-weight: bold;
}
#homeConcendantRemonteeActus .actuTitre img,
#homePromodisRemonteeActus .actuTitre img {
  float: left;
  margin-right: 0.5em;
  margin-top: 0.5em;
  max-height: 4em;
  max-width: 8em;
}
/* visionneuses, slide promodis */
#contentpromodis .slideShowControls label{
  background-color: #91C11A;
  border-color: #283308;
}
#contentpromodis .slideShowControls input:checked + label {
  background-color: #283308;
}
#contentpromodis .slideShowControls input[checked] + label {
  background-color: #283308;
}
/*
#homePromodisVisionneuse,
#homePromodisVisionneuse figcaption {
  background: transparent url(/Templates/DefaultTemplates/CIv6/images/vague-visionneuse-promodis.png) 0 100% no-repeat;
}
#homePromodisVisionneuse figcaption {
  padding: 20px 0.5em 0;
  height: 47px;
  color: #FFFFFF;
  font-size: 1em;
  border: 0;
}*/

#homePromodisVisionneuse .slideShowSlides figcaption
{
    background : none !important;
    border : none !important;
}


/* headers de blocs promodis */
#contentpromodis header {
  background-color: #91C11A;
  color: #FFFFFF;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  font-weight: bold;
}
#contentpromodis header a {
  color: #FFFFFF;
  display: block;
  height: 100%;
}
#contentpromodis aside {
  display: block;
  color: #91C11A;
  font-weight: bold;
  text-align: center;
}
/* visionneuses, slide concess */
#homeConcedantVisionneuse .slideShowSlides figcaption {
  background-color: #222222; /* ie8 */
  background-color: rgba(0, 0, 0, 0.7);
  color: #EEEEEE; /* couleur basique */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  font-size: 1em;
  border: 0;
}
/* slide concédant (le spécifique est dans la css concédant)*/
#bandeauconcedanthp {
  display: block;
  height: 75px;
  margin: 1.2em 0;
  background: #FFFFFF none 50% 50% no-repeat;
}
#homeBlocsConcedantFirst {
  border-top: 0.5em solid #333333;
  padding-top: 0.5em;
}
#totemconcedanthp {
  background: transparent none 50% 50% no-repeat;
  height: 444px;
  margin-top: 10em;
}
/* devis concédant */
#homeConcedantDevis {
  height: 117px;
  margin: 1em 0;
  padding-left: 0.5em;
  border-bottom: 0.25em solid #333333;
}
#homeConcedantDevisImg {
  background: transparent none 50% 50% no-repeat;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  -moz-border-radius-bottomright: 25px;
  -moz-border-radius-topleft: 25px;
  -webkit-border-bottom-right-radius: 25px;
  -webkit-border-top-left-radius: 25px;
  float: left;
  width: 300px;
  height: 117px;
}
#homeConcedantDevisButton {
  vertical-align: top;
  border-top: 0.25em solid #333333;
  overflow: hidden;
}
#homeConcedantDevisButton a {
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
  display: block;
  font-size: 1.9em;
  height: 60px;
  line-height: 60px;
  margin: 28px 12px;
  text-align: center;
  text-transform: uppercase;
}
html[lang="es"] #homeConcedantDevisButton a {
  line-height : 28px;
}


/********* Navigation a Tournache *********/
.totem nav h3{
  -moz-border-radius: 0.75em;
	-webkit-border-radius: 0.75em;
	border-radius: 0.75em;
	box-shadow: 0 0 0.5em #333333;
	text-align: center;
	padding: 1em 0.3em;
	color: #FFFFFF;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	margin: 0 -1em;
  background-color: #333333; /*CB collage maquette*/
  background: #333333 linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, transparent 100%) repeat scroll 0 0;
  background: #333333 -moz-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, transparent 100%) 0 0 repeat-x;
  background: #333333 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(transparent)) 0 0 repeat-x;
  background: #333333 -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, transparent 100%) 0 0 repeat-x;
  background: #333333 linear-gradient(top, rgba(255, 255, 255, 0.25) 0%, transparent 100%) 0 0 repeat-x;
}
.totem nav.NavPromodis h3{
  background-color: #EE011D;
}
.totem nav.NavPromodis ul,
.totem nav.NavConcedant ul,
.totem nav.NavSocietaire ul{
  padding: 0;
}
.totem nav.NavPromodis ul > li,
.totem nav.NavConcedant ul > li,
.totem nav.NavSocietaire ul > li{
  line-height: 2em;
  white-space: nowrap;
  margin: 0.2em;
  padding: 0;
  position: relative;
}
.totem nav.NavPromodis ul > li > a, .totem nav.NavPromodis ul > li > span, 
.totem nav.NavConcedant ul > li > a, .totem nav.NavConcedant ul > li > span, 
.totem nav.NavSocietaire ul > li > a, .totem nav.NavSocietaire ul > li > span{
  background-image: none;
  padding: 0 0.3em;
  border-radius: 0;
  -moz-border-radius: 0;
	-webkit-border-radius: 0;
	font-style: normal;
	text-decoration: none;
}
.totem nav.NavPromodis ul > li > a:before, .totem nav.NavPromodis ul > li > span:before, 
.totem nav.NavConcedant ul > li > a:before, .totem nav.NavConcedant ul > li > span:before, 
.totem nav.NavSocietaire ul > li > a:before, .totem nav.NavSocietaire ul > li > span:before{
  content: '\25B6';
  font-family: Arial;
  font-size: 0.8em;
  color: #CE3702;
  padding-right: 0.2em;
}
.totem nav.NavPromodis ul > li > a,
.totem nav.NavPromodis ul > li > span{
  background-color: #EDEDED;
  color: #000000;
}
.totem nav.NavPromodis ul > li > a:hover,
.totem nav.NavPromodis ul > li > span:hover{
  background-color: #EE011D;
  color: #FFFFFF;
}
.totem nav.NavPromodis ul > li > a:hover:before,
.totem nav.NavPromodis ul > li > span:hover:before{
  color: #FFFFFF;
}
.totem nav.NavSocietaire ul > li > a,
.totem nav.NavSocietaire ul > li > span{
  color: #000000;
}
.totem nav.NavPromodis ul > li:hover > ul,
.totem nav.NavConcedant ul > li:hover > ul,
.totem nav.NavSocietaire ul > li:hover > ul{
  display: block;
}
.totem nav.NavPromodis ul > li > ul,
.totem nav.NavConcedant ul > li > ul,
.totem nav.NavSocietaire ul > li > ul{
  background-color: #FFFFFF;
  border: 1px solid #999999;
  display: none;
  left: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -3px;
}

/********* Dégradé a Tournache *********/
.gradientBox
{
  background: #e6e6e6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: -moz-linear-gradient(top,  #ffffff 30%, #e6e6e6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffffff), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* W3C */
  
  box-shadow: 1px 3px 3px 0 #b8b8b8;
  -moz-box-shadow: 1px 3px 3px 0 #b8b8b8;
  -webkit-box-shadow: 1px 3px 3px 0 #b8b8b8;
  
  border: 1px solid #b8b8b8;
  
  border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  -moz-border-radius: 0.75em;
  
  display: inline-block;
  margin-bottom: 3px;
  padding: 15px;
}

/********* CMP *********/
#ListeCatalogueMateriel article
{
  float: left;
  height: 270px;
  margin-left: 1.5em;
  margin-top: 2.5em;
  padding: 10px 5px 10px 5px;
  position: relative;
  text-align: center;
  width: 180px; 
}

#ListeCatalogueMateriel article header, #DevisCMP article header
{
  height: 60px;
  position: relative;
}

#ListeCatalogueMateriel article header .marque, #DevisCMP article header .marque
{
  max-height: 45px;
  margin: 10px auto;
}

a.BoutonRougePromodis
{
  background: url(/Templates/DefaultTemplates/CIv6/images/navPromodis/bg-red.png) repeat-x scroll left bottom #EE011D;
  border-radius: 5px;
  -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
  color: White;
  display: block;
  font-size: 1.15em;
  font-weight: bold;
  line-height: 30px;
  margin: 10px auto;
  width: 160px;
  text-shadow: 1px 0 1px #444444;
}

a.lienConstructeur
{
  font-size: 0.85em;
}

a.BoutonRougePromodis:hover
{
  color: #EE011D;
  background: #fff;
}

#DevisCMP
{
  margin: 2.5em 1.5em;
}

#DevisCMP article
{
  height: 190px;
  padding: 10px 13px;
  text-align: center;
  float: left;
  margin-right: 2.5em;
  margin-bottom: 30px;
}

#DevisCMP form fieldset.devis
{
  display: block;
}

#DevisCMP form fieldset.contact
{
  clear: both; 
}

.editor-label
{
  clear: left;
  float: left;
  padding-bottom: 5px;
  width: 150px;
}

.editor-field
{
  float: left;
  width: 200px;
}

/********* Formulaire de contact *********/
div.reprise, .repriseConcedant
{
  margin-top: 25px;
}

div.reprise > div > label[for=DemandeReprise], div.repriseConcedant > div > label[for=DemandeReprise]
{
  width: 150px;
}

div.reprise > div > input[name=DemandeReprise],div.repriseConcedant > div > input[name=DemandeReprise]
{
  margin: 0 8px;
}

fieldset.contact
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  width: 575px;
  border: none;
}

fieldset.contact div .editor-label
{
  display: inline-block;
  float: none;
  width: 90px;
}

fieldset.gradientBox
{
  position: relative;
  margin-top: 0.75em;
}

fieldset.gradientBox legend
{
  background-color: #fff;
  font-size: 1.1em;
  padding: 0 0.5em;
  top: -0.75em;
  position: absolute;
}

fieldset.contact div .editor-field
{
  float: none;
  width: 170px;
  margin-right: 15px;
}

fieldset.contact textarea.editor-field
{
  width: 448px;
  height: 80px;
}

fieldset.contact input[type=checkbox].editor-field
{
  width: auto;
}

fieldset.contact input[type=submit]
{
  border: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #444;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 0.9em;
  height: 30px;
  width: 100px;
  display: block;
  margin: 15px auto;
  line-height: 27px;
  padding: 0 10px;
  text-transform: uppercase;
  vertical-align: middle;
}

fieldset.contact input[type=submit]:hover
{
  background-color: #666;
}

/********* LSP *********/
#formReference
{
  display: block;
  padding: 1px;
  min-height: inherit;
  margin: 5px;
}

#formReference fieldset
{
  border: none;
}

#formReference legend
{
  text-align: center;
  padding-bottom: 5px;
  font-weight: bold;
  width : 100%; 
}

#formReference .editor-field
{
  width: auto;
  padding-bottom: 15px;
}

#formReference div span
{
  display: block; 
}

#formReference input[type=submit]
{
  margin-top: 15px;
}

#formReference .ui-button-text-only .ui-button-text
{
  padding: 0.4em 0.1em;
}

#formReference .ui-widget
{
  font-size: inherit;
  text-align: center;
}

/* CMS */
.cms-pagecontents {
  margin: 0 -0.5em;
  overflow: hidden;
}
.cms-pagecontents > .cms-content {
  margin: 0 0.5em;
}
.cms-pagecontents > .cms-content-SlideShow,
.cms-pagecontents > .cms-content-Video {
  margin: 0;
}
body>footer .cms-content {
  margin : 0;
}

/************************ TOTEM PROMODIS **************************************************/
#totemPromodisServices ul
{
  list-style: none;
  padding: 0;
  padding-bottom: 1em;
  margin: 0;
  text-align: center;
  background-color: #EDEDED;
	border-bottom-left-radius: 0.75em;
	border-bottom-right-radius: 0.75em;
	-webkit-border-bottom-left-radius: 0.75em;
	-webkit-border-bottom-right-radius: 0.75em;
	-moz-border-radius-bottomleft: 0.75em;
	-moz-border-radius-bottomright: 0.75em;
}

#totemPromodisServices h3
{
  background-color: #91C11A;
  color: #FFFFFF;
  font-size: inherit;
  padding: 0.7em 0.3em;
  text-align: center;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  margin: 0;
}
#totemPromodisLiens {
  clear: both;
  color: #AD0617;
}
#totemPromodisLiens a {
  text-decoration: none;
  color: #AD0617;
}

/******** Remontées marques dans totem promodis de la home **********/
#RemonteesMarquesTotem > li {
  line-height: 4em;
  text-align: center;
}

#RemonteesMarquesTotem > li > img {
  max-height: 40px;
  max-width: 58px;
  vertical-align: middle;
}

/******** Ici c'est Tournache qui code et qui emmerde Clément de manière totalement assumée *******/
/******** Ici c'est Clément qui répond et qui en a au moins autant contre Tournache. L'avantage c'est que vu tes merdes, j'en ai encore sous le pied. ********/
#PromoDescription .accrochePromo
{
  float: left;
  margin: 10px 22px;
  width: 380px;
}

/*** Occasions ***/
/* Liste des occasions */
#occasions-results, 
#pieces-results {
  width: 100%;
}
#occasions-results tr,
#pieces-results tr {
  cursor: pointer;
}
#occasions-results tr.odd,
#occasions-results tr.even td.sorting_1,
#pieces-results tr.odd,
#pieces-results tr.even td.sorting_1 {
  background-color: #FFDA96;
}
#occasions-results td,
#pieces-results td {
  padding: 0.5em;
  text-align: center;
}
#occasions-results tr.odd td.sorting_1,
#pieces-results tr.odd td.sorting_1 {
  background-color: #FFD587;
}
#occasions-results-filter,
#piecess-results-filter {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
#occasions-results-filter li {
  display: inline-block;
  width: 23%;
  padding: 1%;
}
#pieces-results-filter li {
  display: inline-block;
  width: 30%;
  padding: 1%;
}
#occasions-results-filter label,
#pieces-results-filter label {
  display: block;
  text-indent: 1em;
  font-size: 0.9em;
  font-style: italic;
  color: #808080;
}
#occasions-results-filter select,
#pieces-results-filter select {
  width: 10em;
}
#occasions-results-filter .number_range_filter,
#pieces-results-filter .number_range_filter{
  width: 4em;
}

#occasions-results .annonce {
  height : 112px;
}
.occasions_result_table {
  margin-bottom : 37px;
}
/******************************** Annonce *********************************************/



.prixAnnonceDetaillee {
    color: #f29f00;
    float: right;
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 3px;
}

#slideShowOccasion .slideShowSlides{
  margin: 0 -0.5em;
  height: 488px;
}
#slideShowOccasion .slideShowControls{
  margin: 0 -0.5em;
}

#caractAnnonce{
  margin-top: -1em;
}
#caractAnnonce h2, #vendeurAnnonce h2, #slideShowOccasion h2, #spin360wrapper h2 {
  color : #F29F00;
  font-weight: normal;
  clear: both;
  margin-top: 0;
}
#caractAnnonce ul,
#caractAnnonce p {
  display: block;
  margin: 0 0 0 40px;
  padding: 0;
}
#caractAnnonce ul, #vendeurAnnonce ul {
    /*font-weight: bold;*/
    list-style: none outside none;
}
#caractAnnonce li {
    display: inline-block;
    width: 49%;
}
#caractAnnonce .label, #vendeurAnnonce .label, #bulleGeolocgMaps .label, #bulleGeolocbMaps .label {
    color: #808080;
}
#caractAnnonce .valeur, #vendeurAnnonce .valeur, #bulleGeolocgMaps .valeur, #bulleGeolocbMaps .label {
	color: #333;
}
#Vendu {
    margin-left: 0;
    margin-top: -87px;
    position: absolute;
}
#logoVendeur, #photoVendeur {
    max-width: 100%;
}
#vendeurAnnonce{
  overflow: hidden;
}
#vendeurAnnonceSociete, #vendeurAnnonceContact {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 49%;
    margin-left: 40px;
    margin-right: -60px;
}
#FormContactVendeur {
  clear : both;
  overflow : hidden;
}
  
/********************************************************/
/*                     FIL D'ARIANE                     */
/********************************************************/

.breadcrumbs {
  display: block;
  list-style-type: none;
  margin: 0;
  border-bottom: 0.1em dotted #C0C0C0;
  font-size: 0.9em;
  padding: 0;
}
.breadcrumbs li {
  display: inline;
  padding-left: 0.5em;
}
.breadcrumbs li:first-child:before {
  padding-left: 0;
}
*[dir=rtl] .breadcrumbs li {
  padding-right: 0.5em;
  padding-left: 0;
}
.breadcrumbs li:before {
  content: ">";
  padding-right: 0.5em;
}
.breadcrumbs li:first-child:before {
  content: "";
  padding-right: 0;
}
*[dir=rtl] .breadcrumbs li:before {
  padding-right: 0;
  padding-left: 0.5em;
}

/********************************************************/
/*                     Liste des Actus                  */
/********************************************************/

.listactus{
  text-align: justify;
}
.listactus article{
  border-bottom: 0.1em solid #ddd;
  overflow: hidden;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
}
.listactus article:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.listactus header{
  overflow: hidden;
  margin-bottom: 0.5em;
}
.listactus .rub{
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.listactus .titre{
  font-size: 1.8em;
  line-height: 1.2em;
  display: block;
}
.listactus .date{
  color: #999;
}
.listactus .imgcontainer{
  float: left;
}
.listactus .imgcontainer img{
  max-width: 20em;
  max-height: 7em;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: bottom;
}
.listactus .savoirplus{
  clear: both;
  padding: 0 0.5em;
  float: right;
}
/** Accordeon d'actus **/
.ac-container label{
	font-size: 1.1em;
	line-height: 33px;
	color: #777;
	display: block;
	cursor: pointer;
	height: 30px;
	padding: 5px 20px;
	background: #333;
	color: #fff;
	font-weight : bold;
	text-shadow : 0 1px 0 rgba(0,0,0,0.6);
}
.ac-container input:checked + label.societaire,
.ac-container input:checked + label.societaire:hover{
	background: #666666;
	color: #FFFFFF;
}
.ac-container input:checked + label.promodis,
.ac-container input:checked + label.promodis:hover{
	background: #E1001A;
	color: #fff;
}
.ac-container input{
	display: none;
}
.ac-container article{
	height: 0px;
	transition:
		height 0.3s ease-in-out,
		box-shadow 0.6s linear;
	-webkit-transition:
		height 0.3s ease-in-out,
		box-shadow 0.6s linear;
	-moz-transition:
		height 0.3s ease-in-out,
		box-shadow 0.6s linear;
	-o-transition:
		height 0.3s ease-in-out,
		box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
	transition:
			height 0.5s ease-in-out,
			box-shadow 0.1s linear;
	-webkit-transition:
		height 0.5s ease-in-out,
		box-shadow 0.1s linear;
	-moz-transition:
		height 0.5s ease-in-out,
		box-shadow 0.1s linear;
	-o-transition:
		height 0.5s ease-in-out,
		box-shadow 0.1s linear;
}
.ac-container article aside{
	background: #fff;
	border-top: 1px solid #eee;
	overflow: hidden;
	padding: 12px 5px;
}
.ac-container article div a{
	color: #333;
	display: block;
	font-size: 0.9em;
}
.ac-container article div a:hover{
	text-decoration: underline;
}
.ac-container article div a.allactus{
	font-size: 0.85em;
	font-weight: bold;
	text-align: center;
}
.ac-container > div{
	border-bottom: 1px solid #666;
	font-size: 0.9em;
	overflow: hidden;
}
/*
.ac-container > div:first-of-type{
	border-top-left-radius: 0.75em;
	border-top-right-radius: 0.75em;
	-webkit-border-top-left-radius: 0.75em;
	-webkit-border-top-right-radius: 0.75em;
	-moz-border-radius-topleft: 0.75em;
	-moz-border-radius-topright: 0.75em;
}
*/
.ac-container > div:last-of-type{
	border-bottom-left-radius: 0.75em;
	border-bottom-right-radius: 0.75em;
	-webkit-border-bottom-left-radius: 0.75em;
	-webkit-border-bottom-right-radius: 0.75em;
	-moz-border-radius-bottomleft: 0.75em;
	-moz-border-radius-bottomright: 0.75em;
	border-bottom: none;
}
.ac-container h3{
	/*display: none;*/
	background : none;
	color : #000;
	padding-left : 10px;
}

.ac-container > .allactus {
  display : block;
  font-size : 0.85em;
  font-weight: bold;
  text-align: center;
  margin-bottom : 5px;
}
/************************* LOGIN, ACCES BO ******************************/
#login {
  position: fixed;
  z-index : 6000;
  top : 0;
}
#loginLink {
  color : #FFFFFF;
}
#loginLink:hover { 
  color : #000;
}

/******************* Analytics ************************************************************/
#gadatepicker
{
  text-align: center;
  margin: 20px 0;
}

#gadatepicker label
{
  margin: 0 5px;
}

#apply
{
  margin-left: 10px;
}

#stats
{
  margin: 0 20px 15px;
  overflow: hidden;
}

#stats > h2
{
  text-align: center;
  margin: 15px 0;
  background: #f0f0f0;
}

#stats > div
{
  float: left;
  font-size: 1.2em;
  margin-left: 55px;
  width: 40%;
}

/*** Brique Occasions ***/
    #externalSort {
      list-style : none outside none;
      /*display : table;
      table-layout: fixed;*/
      width : 610px;
      font-size: 0.9em;
    }
    #externalSort li{
      /*display : table-cell;
      padding-left : 10px;*/
      
      display: inline-block;
      position: relative;
      background: #f5f5f5;
      border: 1px solid #aaa;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      margin-right: 50px;
      padding: 4px 15px;
	    margin-top: 10px;
    }
    
    #externalSort li:hover
    {
      background: #444;
      cursor: pointer;
      color: #fff;
    }
    
    
    /*#externalSort li[data-sort="asc"],
    #externalSort li[data-sort="desc"] {
      font-weight : bold;
    }
    #externalSort li[data-sort="asc"]:after {
      content : "	▲";
    }
    #externalSort li[data-sort="desc"]:after {
      content : "	▼";
    }*/
    
    #externalSort li:before, #externalSort li:after
    {
      position: absolute;
      display: block;
      width: 25px;
      height: 50%;
      right: -27px;
      background: #ccc;
      border-bottom: 1px solid #aaa;
      border-top: 1px solid #aaa;
      border-right: 1px solid #aaa;
      font-size: 0.8em;
      height: 49%;
      line-height: 12px;
      opacity: 0.7;
      text-align: center;
    }
    
    #externalSort li:before
    {
      content : "	▲";
      top: -1px;
      border-top-right-radius: 5px;
    }
    
    #externalSort li:after
    {
      content : "	▼";
      top: 48%;
      border-bottom-right-radius: 5px;
    }
    
    #externalSort li[data-sort="asc"]:before, #externalSort li[data-sort="desc"]:after
    {
      color: #fff;
      background: #444;
      opacity: 1;
    }
    
    /* nouvelle liste occasions */
  #occasions-resultsAjax.dataTable thead th {
    border : 0;
  }
  
  #occasions-resultsAjax.dataTable tr.odd {
    background-color: #FFF;
  }
  #occasions-resultsAjax.dataTable td {
    padding : 0;
  }
  #occasions-resultsAjax .annonce {
    height : 122px;
    cursor : pointer;
    background: url(/Templates/DefaultTemplates/CIv6/images/occasions/bg-liste.png) no-repeat -80px top #FFF;
    /*overflow : hidden;*/
    position: relative;
  }
  #occasions-resultsAjax .annonce:hover {
    /*background-color : #FFEAC0;*/
    box-shadow: 0px 0px 0px 1px rgb(255, 255, 255), 
                1px 5px 15px 10px rgba(0, 0, 0, 0.4), 
                1px -5px 15px 10px rgba(0, 0, 0, 0.4); 
    z-index: 100;
    transform: scale(1.02,1.02);
    -ms-transform: scale(1.02,1.02);
    -moz-transform: scale(1.02,1.02);
    -webkit-transform: scale(1.02,1.02);
    -o-transform: scale(1.02,1.02);
  }
  
  #occasions-resultsAjax .lBarre {
	  font-size: 1.1em;
	  margin-bottom: 5px;
	  margin-left: -1px;
	  display: block;
	  height : 30px;
  }
#occasions-resultsAjax .lInfos {
  display : inline-block;
  width : 80%;
}
  #occasions-resultsAjax .lTypeMateriel {
    font-weight : bold;
    padding: 5px;
    color: #FFF;
    vertical-align : middle;
  }
  
  #occasions-resultsAjax .lVisuel {
    display: inline-block;
    /*float: left;*/
    text-align: left;
    width: 110px;
    vertical-align : middle;
  }

  #occasions-resultsAjax .lBarre .lTypeMateriel {
    width : 30%;
  }
  #occasions-resultsAjax .lMateriel {
    /*float: left;*/
    display : inline-block;
    width: 24%;
    vertical-align : middle;
  }
  #occasions-resultsAjax .lMateriel span {
    display: inline-block;
    width: 100%;
  }
  #occasions-resultsAjax  .lLegende {
    color: #898989;
    font-size: 0.9em;
    font-style: italic;
  }
  #occasions-resultsAjax .lMarque a,
  #occasions-resultsAjax .lModele a  {
    color: Black;
    font-size: 16px;
    font-weight: bold;
}
  #occasions-resultsAjax .lDesc {
    display: inline-table;
    float : right;
    width : 51%;
    list-style: none outside none;
    margin : 0;
    padding-right : 5px;
    vertical-align : top;
    padding-left : 5px;
  }
  #occasions-resultsAjax .lDesc li{
    display : table-row;
    line-height : 18px;
  }
  #occasions-resultsAjax .lDesc li:nth-child(n+5){
    display : none;
  }
  
  
  #occasions-resultsAjax .lDesc li span{
    display: table-cell;
  }
  #occasions-resultsAjax .lDesc .lLegende{
    padding-right: 10px;
    text-align: right;
  }
  #occasions-resultsAjax .lRegion {
    display : inline-block;
    float : right;
    color : #000;
  }
  #occasions-resultsAjax .lPrix {
    color: #F29F00;
    /*display: inline-block; Bizarement, ça ne foncitonne plus avec ça */
    float: right;
    font-size: 1.2em;
    font-weight : 600;
    text-align: right;
    width: 17%;
    vertical-align : middle;
    
  }
  
  #occasions-resultsAjax .annonce span.tooltip
  {
    height: auto;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    border: 10px solid #fff;
    border-radius: 5px;
    position: absolute;
    box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.5), 
                 5px 5px 10px rgba(0, 0, 0, 0.5);
    right: -343px;
    opacity: 0;
    visibility: hidden;
    bottom: -46px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    width: 252px;
    height: 189px;
    background-color: #fff;
  }
  
  #occasions-resultsAjax .annonce:hover span.tooltip
  {
    opacity: 1;
    visibility: visible;
    right: -233px;
    right: 0\9;
  }


/**************** BO : NAvigation ****/
#PictoSelector ul {
  bottom: 0;
  display: block;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  /*position: absolute;*/
  right: 0;
  z-index: 4;
}

#PictoSelector ul li {
  display : inline;
}

    
#PictoSelector label {
  background-repeat : no-repeat;
  background-position : 50% 50%;
  background-color: #333333;
  opacity : 0.5;
  border-radius: 0.75em 0.75em 0.75em 0.75em;
  box-shadow: 0 0 0.5em #666666;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  /*margin: 2px;*/
  overflow: hidden;
  transition: all 0.2s ease-in-out 0s;
  width: 80px;
  margin-right : 10px;
  margin-bottom : 10px;
}
.no-opacity #PictoSelector label {
  background-color : #AAA;
}

#PictoSelector label:hover {
  opacity : 0.75;
}
.no-opacity #PictoSelector label:hover {
  background-color : #666;
}
    
#PictoSelector input:checked + label {
  opacity : 1;
}
.no-opacity #PictoSelector input:checked + label {
  background-color : #333333;
}
    
#PictoSelector input {
  display : none; /* ne fonctionne pas sur ie8 */
  display: inline\9; /* hack ie8 */
  /*width: 0\9;*/ /* hack ie8 */
}

.no-opacity #PictoSelector input {
  float : left;
  clear : left;
}
.no-opacity #PictoSelector label {
  float : left;
}
.homepage h1 {
  position : absolute;
  left: 0;
  right: 0;
  top : 5px;
  white-space: pre;
  background-color: #DDDDDD; /* ie8 */
  background-color: rgba(255, 255, 255, 0.7);
  border-bottom: 0.1em solid #333333;
  color: #333333;
  padding: 0.2em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); 
  z-index : 50000;
}

/**************************** LANGUAGE SWITCHER ****************************************************/
#languageSwitcher {
  display : inline-block;
  margin-top : 38px;
  float : right;
}

/************************************ INFO COOKIES *************************************************/
.info-cookie {
    background-color: #666;
    border-radius: 0;
    color: #fff;
    left: 0;
    line-height: 35px;
    margin: 0;
    border: 1px solid transparent;
    margin-bottom: 0px;
    padding: 0px;
    width: 100%;
    z-index: 10000;
    filter: alpha(opacity=80);
    opacity: 0.8;
    z-index : 30;
    position : fixed;
}

.info-cookie a{color:#FFFFFF;}
.info-cookie a:hover{color:#A7121C;}

.info-cookie button.close{
float:right;
font-size:21px;
font-weight:bold;
line-height:1;
color:#000;
text-shadow:0 1px 0 #fff;
opacity:.2;
filter:alpha(opacity=20);
margin-right:10px;
}

.info-cookie button.close:hover, 
.info-cookie button.close:focus{
color:#000;
text-decoration:none;
cursor:pointer;
opacity:.5;
filter:alpha(opacity=50);
}

.info-cookie .button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
.info-cookie .container{margin-right:auto;margin-left:auto;padding-left:8px;padding-right:8px}

#promoEditor {
  margin-bottom : 60px;
}

div.didomi-forced-inline {
  display: inline-block !important;
}

script.didomi-forced-inline {
  display: none !important;
}