/* ===================================================================
 *  SOMMAIRE
 *
 *  $0  -- Standard CMS
 *  $1  -- Layout général
 *  $2  -- Initialisation charte graphique générale du projet
 *  $3  -- Cookie CNIL
 *  $4  -- Bandeau haut
 *      $4.1 -- Tous les sites
 *      $4.2 -- Menu
 *          $4.2.1 -- MegaMenu
 *      $4.3 -- Fil d'ariane
 *  $5  -- Bandeau bas
 *  $6  -- Colonne droite
 *  $7  -- Styles génériques
 *      $7.1 Contenu
 *      $7.2 Réseaux sociaux
 *  $8  -- Styles de paragraphe
 *  $9  -- Bloc de navigation
 *  $10 -- Formulaire
 *  $11 -- Modules
 *      $11.1 Evènement
 *      $11.2 Météo
 *      $11.3 Annuaire
 *      $11.4 Elus
 *          $11.4.1 Fiche Elu
 *          $11.4.2 Fiche Organisme
 *          $11.4.3 Liste Elu
 *      $11.5 Diaporama
 *      $11.6 EJournal
 *      $11.7 Webcam
 *      $11.8 Compte citoyen
 *  $12 -- Templates
 *      $12.1 TPL_ACCUEILCAROUSEL
 *      $12.2 TPL_ACCUEILCONTENU
 *      $12.3 TPL_THEMATIQUEARTICLELISTE
 *      $12.4 TPL_SOMMAIRETHEMATIQUE / TPL_SOMMAIREPAGE
 *      $12.5 TPL_WEBCAM_VIGNETTE
 *      $12.6 TPL_WEBCAM_HISTO
 *      $12.7 TPL_SONDAGE
 *      $12.8 TPL_TELESERVICES
 *      $12.9 TPL_RECHERCHEANTIDOT
 *      $12.10 TPL_CHAINEYOUTUBEACCUEIL
 *      $12.11 TPL_PETITEANNONCELISTE
 *      $12.12 TPL_PETITEANNONCE
 *      $12.13 TPL_PETITEANNONCEDEPOT
  *     $12.14 TPL_SIMULATEURDEVANTURE
 *  $13 -- Media queries
 *
 * =================================================================*/

/* ===================================================================
 * $0 STANDARD CMS
 * =================================================================*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.withJS .js_hidden                  { position: absolute; top: -999px; left: -999px; }
.clear                              { clear : both; }
.invisible                          { display: none; }
.alignleft                          { text-align: left; }
.alignright                         { text-align: right; }
.aligncenter                        { text-align: center; }
.alignjustify                       { text-align: justify; }
.inlineBlock                        { display: inline-block; zoom: 1; }
.inline                             { display: inline; zoom: 1; }
.floatLeft                          { float: left; }
.floatRight                         { float: right; }

.erreur {
    color: red !important;
}
p.erreur {
    margin: 1em 0 !important;
    font-weight: bold !important;
}

object.alignleft, img.alignleft,
table.alignleft, span.alignleft,
iframe.alignleft, embed.alignleft,
.videocontainer.alignleft           { float: left; margin: 0 10px 10px 0; }
object.alignright, img.alignright,
table.alignright, span.alignright,
iframe.alignright, embed.alignright,
.videocontainer.alignright          { float: right; margin: 0 0 10px 10px; text-align: left; }
table.aligncenter                   { margin: auto; text-align: left; }
acronym                             { border-bottom: 1px dotted; cursor: help; }

iframe { display: block; position: relative;  z-index: 1; }

/* LEGENDE - CREDIT */
.spanImgContainer       { display: block; text-align: center; }
.spanImgOuter           { display: inline-block; position: relative; max-width: 100%; }
.spanImgOuter img       { display: block; }
.spanCredit             { background: url(images/spanCredit.png) repeat 0 0; left: 0; bottom: 0; color: #fff; font-style: italic; font-size: 90%; max-width: 75%; padding: 5px; position: absolute; line-height: 1em; }
.imgLoupe               { position: absolute; bottom: 0; right: 0;}
.spanLegende            { display: block; font-size: 90%; border: 1px solid #dedede; padding: 5px; line-height: 1em; }
.message_error          { color: red; margin-bottom: 15px; text-align: center; }

/* CLEARFIX */
.clearfix:before,
.clearfix:after   { content: "."; display: block; height: 0; overflow: hidden; }
.clearfix:after   { clear: both; }
.clearfix         { zoom: 1; }


/* ===================================================================
 * $1 LAYOUT GENERAL
 * =================================================================*/
#document {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
}
#corps {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 1.05% 30px;
    max-width: 960px;
    zoom: 1;
    background: #fff;
    position: relative;
}
.avecColonneDroite #contenu { float: left; width: 65.96%; /* 620/940px */ }
#colonneDroite              { position: relative; float: right; width: 31.91%; /* 300/940px */ }
#colonneDroite .inner       { position: relative; }

#lateralContainer,
.tablette-show,
.mobile-show                { display: none; }


/* ===================================================================
 * $2 INITIALISATION CHARTE GRAPHIQUE GENERALE DU PROJET
 * =================================================================*/
html { font-size: 81.25%; /*13px*/ background-color: transparent; }
body {
    font-family: dejarip, arial, helvetica, sans-serif;
    background: url("/images/bandeaux/bkg-mtp1.jpg") no-repeat center top #f1f1f1;
    background-size: cover;
}
acronym             { font-style: normal; border-bottom: 1px dashed; cursor: help; }
span[lang]:after    { content : " (" attr(lang) ")"; }

h1, h2  { font-weight: normal; }
h2      { font-size: 1.846em; /*24px*/ }
h3 {
    font-size: 1.538em; /*20px*/
    margin: 10px 0;
    font-weight: normal;
    color: #042e57;
}
h4 {
    line-height: 1em;
    font-size: 1.231em; /*16px*/
    margin: 10px 0;
    color: #111111;
}
h5 {
    font-size: 1.077em; /*14px*/
    color: #042E57;
    margin: 3px 0;
    color: #111111;
}

a,
a:active,
a:visited   { color: #04579b; text-decoration: underline; outline: medium none; }
a:hover     { color: #000; text-decoration: underline; outline: medium none; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:active, h2 a:active, h3 a:active,
h4 a:active, h5 a:active, h6 a:active,
h1 a:visited, h2 a:visited, h3 a:visited,
h4 a:visited, h5 a:visited, h6 a:visited { text-decoration: none; }

img     { max-width: 100%; height: auto; }
iframe,
object  { max-width: 100%; }

.videoWrapper { position: relative; padding-bottom: 75%; /* 4:3; */ height: 0; }
.videoWrapper object,
.videoWrapper iframe  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-container {
    overflow: hidden;
    position: relative;
}
.iframe-container .iframe-ratio {
    display: block;
    height: auto;
    width: 100%;
}

.iframe-container iframe,
.iframe-container object,
.iframe-container video,
.iframe-container embed {
    float: none;
    height: 100%;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox,
#cboxOverlay,
#cboxWrapper        { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }
#cboxOverlay        { position: fixed; width: 100%; height: 100%; }
#cboxMiddleLeft,
#cboxBottomLeft     { clear: left; }
#cboxContent        { position: relative; }
#cboxLoadedContent  { overflow: auto; }
#cboxTitle          { margin: 0; }
#cboxLoadingOverlay,
#cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; }
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow      { cursor: pointer; border: 0 none; }
.cboxPhoto          { float: left; margin: auto; border: 0; display: block;}
.cboxIframe         { width: 100%; height: 100%; display: block; border: 0;}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -100px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -129px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -100px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -129px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
#cboxError{padding:50px; border:1px solid #333333;}
#cboxLoadedContent{margin-bottom:48px;}
#cboxTitle{position:absolute; bottom:14px; left:0; text-align:center; width:100%; color:#333333; line-height: 3em;}
#cboxCurrent{position:absolute; bottom:30px; left:0; font-size:0.769em; color:#333333;}
#cboxSlideshow{position:absolute; bottom:0px; right:30px; color:#042e57;}
#cboxSlideshow.hover{text-decoration: underline;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext.hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/fermer.png) no-repeat 0 0; width:21px; height:21px; text-indent:-9999px;}
#cboxClose.hover{border: 1px solid #333333;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to IE9.
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
*/
.cboxIE6 #cboxTopLeft       { background:url(images/ie6/borderTopLeft.png); }
.cboxIE6 #cboxTopCenter     { background:url(images/ie6/borderTopCenter.png); }
.cboxIE6 #cboxTopRight      { background:url(images/ie6/borderTopRight.png); }
.cboxIE6 #cboxBottomLeft    { background:url(images/ie6/borderBottomLeft.png); }
.cboxIE6 #cboxBottomCenter  { background:url(images/ie6/borderBottomCenter.png); }
.cboxIE6 #cboxBottomRight   { background:url(images/ie6/borderBottomRight.png); }
.cboxIE6 #cboxMiddleLeft    { background:url(images/ie6/borderMiddleLeft.png); }
.cboxIE6 #cboxMiddleRight   { background:url(images/ie6/borderMiddleRight.png); }

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}


/* ===================================================================
 * $3 COOKIE CNIL
 * =================================================================*/
#cookie_cnil        { background-color: #ffffff; font-size: 0.6878em; /*11px*/ padding: 10px; color: #555555; }
#cookie_cnil_img    { cursor: pointer; float: right; }
#cookie_cnil a      { color: #1885C3; outline: medium none; text-decoration: none; }
#cookie_cnil p      { margin: 0; }


/* ===================================================================
 * TARTE AU CITRON
 * =================================================================*/
 #tarteaucitronServicesTitle_analytic .tarteaucitronTitle button {
    background-color: #000000;
}
#tarteaucitronDetailsanalytic.tarteaucitronDetails, #tarteaucitronManager {
    background-color: #000000 !important;
}
#tarteaucitronCookiesNumber {
    background-color: fade(#000000,50%) !important;
}


/* ===================================================================
 * $4 BANDEAU HAUT
 * =================================================================*/
#bandeauHaut,
#fixedHeader    { z-index: 3; width: 100%; max-width: 960px; position: relative; }
#logo .logo     { float: left; }
#logo a         { color: #000; }
#logo a:hover   { color: #00437E; }
#Accueil #bandeauHaut h1,
#logo a span    { float: left; font-family: adelle; margin: 0 0 0 10px; font-size: 2.461em; /*32px*/ line-height: 65px; }

/* Sticky bandeau haut */
.fixed #fixedHeader { position: fixed; top: 0; }
.fixed #fixedHeader #ariane {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.fixed .menuPrincipal li.logo { display: block; }


/* $4.1 TOUS LES SITES
   ================================================================ */
#lienTousSites {
    float: right;
    background-color: #efefef;
    border-radius: 0 0 5px 5px;
    padding: 4px 10px;
    cursor: pointer;
}
#lienTousSites:after {
    content: url(images/pictoLienTousSitesDown.png);
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}
#lienTousSites.open:after { content: url(images/pictoLienTousSitesUp.png); }
#tousSites {
    display: none;
    background-color: #efefef;
    padding: 20px 10px;
}
#tousSites ul:first-child { margin: 0 0 20px; }
#tousSites ul:last-child { margin: 0; }
#tousSites ul li {
    float: left;
    border-left: 1px solid #fff;
    border-right: 1px solid #ddd;
    padding: 0 1.042%; /* 10/960px */
    width: 16.667%;
    height: 130px;
    text-align: center;
}
#tousSites ul li:first-child    { border-left: 0 none; }
#tousSites ul > li:last-child   { border-right: 0 none; }
#tousSites ul a                 { text-decoration: none; color: #000000; }
#tousSites ul a:hover           { text-decoration: underline; }
#tousSites .visu                { height: 92px; line-height: 92px; margin-bottom: 5px; }
#tousSites .visu img            { vertical-align: middle; }


/* $4.2 MENU
   ================================================================ */
#menu { overflow: hidden; background: #333333; }

#pull                           { display: none; }
.menuPrincipal                  { margin: 0; }
.menuPrincipal > li             { z-index: 999; float: left; border-right: 1px solid #e5e5e5; }
.menuPrincipal li.logo          { display: none; border-right: 0 none; }
.menuPrincipal li.logo img      { display: block; }
.menuPrincipal li:last-child    { border-right: 0 none; }
.menuPrincipal li.selected      { background: #e9e9e9; color: #042E57; }
.menuPrincipal li.selected > h2 a,
.menuPrincipal li.selected > h2 span { background: #e9e9e9; color: #042E57; cursor: pointer; }
.menuPrincipal li > span        { cursor: pointer; }
.menuPrincipal > li > h2 {
    font-size: 1em;
    font-family: dejarip, arial, helvetica, sans-serif;
    margin: 0;
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}
.menuPrincipal > li > h2 a,
.menuPrincipal > li > h2 span {
    display: block;
    padding: 13px 20px;
    color: white;
    font-size: 1.077em; /*14px*/
    text-decoration: none;
    line-height: 18px;
}
.menuPrincipal > li > h2 a,
.menuPrincipal > li > h2 span       { text-transform: uppercase; }


/* $4.2.1 MEGAMENU */
.megaMenuJS,
.megaMenu {
    position: absolute;
    z-index: 900;
    display: none;
    left: 1%;
    width: 98%; /* 940/960px */
    padding: 20px;
    background-color: #e5e5e5;
    border: 1px solid black;
    -webkit-box-shadow: 0 0 7px #333333;
    box-shadow: 0 0 7px #333333;
    color: #333;
}

.megaMenuJS .fermer {
    position: absolute;
    top: 20px;
    right: 20px;
    text-decoration: none;
    color: #000000;
    background: url(images/fermer.png) no-repeat 100% 50%;
    padding-right: 25px;
}
.megaMenuJS .titre      { font-size: 1.2em; color: #333; font-weight: bold; margin: 0 0 20px 0; }
.megaMenuJS .blocHaut   { margin-bottom: 10px; }
.megaMenuJS .blocHaut   { display: table; width: 100%; }
.megaMenuJS .colonne    {
    display: table-cell;
    padding: 0 20px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #cccccc;
    width: 25%;
    vertical-align: top;
}
.megaMenuJS .colonne:first-child        { padding-left: 0; border-left: 0 none; }
.megaMenuJS .colonne:last-child         { padding-right: 0; border-right: 0 none; }
.megaMenuJS .colonne li                 { margin-bottom: 5px; }
.megaMenuJS .colonne li a               { color: #042e57; }
.megaMenuJS h3                          { font-size: 1.231em; margin-top: 0; font-weight: bold; }
.megaMenuJS .blocBas .colonne           { border: 0 none; float: left; display: block; }
.megaMenuJS .colonne img                { display: block; width: 100%; }
.megaMenuJS .signes                     { text-align: center; }
.megaMenuJS .signes img                 { display: inline; width: auto; }

/* Menu standard */
ul.menuNiv2                         { margin-top: 20px; }
ul.menuNiv2 > li                    { float: left; width: 31%; margin-right: 2%; }
ul.menuNiv2 > li:nth-child(3n)      { margin-right: 0; }
ul.menuNiv2 > li:nth-child(3n+1)    { clear: both; }


/* MégaMenu montpellier *******************************************************************/
/* .menuPrincipal #megamenu_montpellier .blocDroite            { width: 24%; position: absolute; right: 230px; }
.menuPrincipal #megamenu_montpellier .blocDroite li.alter1  { float: left; width: 100%; margin: 0 2% 0 0; } */


/* $4.4 FIL D'ARIANE
   ================================================================ */
#ariane {
    overflow: hidden;
    z-index: 99;
    width: 100%;
    height: 35px;
    font-size: 0.8125em; /*13px*/
    background: #e5e5e5;
    border-bottom: 1px dotted lightGrey;
    padding: 0 20px;
    line-height: 35px;
    color: #00437E;
}
#ariane .precedent      { display: inline; }
#fixedHeader .compte         { position: absolute; right: 20px; bottom: 0; line-height: 35px; }
#fixedHeader .compte a       {
    color: #000000;
    text-decoration: none;
    background: url(images/pictoUser.png) no-repeat 0 50%;
    display: block;
    padding-left: 30px;
}
#fixedHeader .compte a:hover    { text-decoration: underline; }


/* Alerte *********************************************************************/
#Alerte {
  position: absolute;
  width: 64%;
  margin: 19px 0 0 36%;
  border-radius: 3px;
  box-shadow: 0 0 1px white;
  -webkit-box-shadow: 0 0 1px white;
  background-color: rgba(255, 162, 0, 0.8);
  /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#Alerte a:hover { cursor: pointer; }
#Alerte a { color:white; }
#alerteLibelle{
  position: absolute;
  margin: 4px 0 0 0;
  padding: 4px 0 0 40px;
  background: url(images/alerte.png) no-repeat scroll 10px 4px;
  color: #FFFFFF;
  font-weight: bold;
}

.ie7 #alerteLibelle {
  padding: 5px 11px 0 40px;
}
.defilementConteneur {
  position: relative;
  overflow: hidden;
  font-size: 1.5em;
  width: 80%;
  height: 33px;
  margin: 7px 0 0 16%

}
.defilementTexte {
  position: absolute;
  top: 0px;
  left: 0px;
  white-space: nowrap;
  line-height: 1em;
}


/* =============================================================================
 * $5 BANDEAU BAS
 * ===========================================================================*/
#bandeauBas             { position: relative; margin: 0; color: white; }
#bandeauBas a           { text-decoration: underline; color: #ffffff; }
#bandeauBas a:hover     { text-decoration: none; }
#bandeauBasInner        { padding: 10px 0; display: table; background-color: #333333; }
#bandeauBas #adresse,
#bandeauBas #telephone  { display: table-cell; width: 50%; }
#bandeauBas #adresse    { border-right: 1px solid #111111; padding: 0 30px 0 10px; }
#bandeauBas #telephone  { border-left: 1px solid #555555; padding: 0 10px 0 30px; }
#bandeauBas h3          { margin-top: 0; font-size: 1.385em; /*18px*/ color: #ffffff; }
#bandeauBas .lienPiedPage li    { float:left; padding: 16px 0; }
#bandeauBas .lienPiedPage li a  {
    padding: 0 20px;
    display: block;
    border-right: 1px solid #000000;
    line-height: 13px;
    text-decoration: none;
    color: #000000;
}
#bandeauBas .lienPiedPage li a:hover        { text-decoration: underline; }
#bandeauBas .lienPiedPage li:last-child a   { border-right: 0 none; }


/* =============================================================================
 * $6 COLONNE DROITE
 * ===========================================================================*/
#colonneDroite ul { list-style-type: none; }
#colonneDroite h2 { font-size: 1.846em; /*24px*/ font-weight: normal; margin-top: 0; }
#colonneDroite h3 {
  font-family: dejarip, arial, helvetica, sans-serif;
  font-size: 1.077em; /*14px*/
  font-weight: normal;
  line-height: 14.5px;
  margin: 0;
}
#colonneDroite .TPL_METEOTEMPERATURE img { width: 12px; }
#colonneDroite .paragraphe  { margin: 0 0 20px 0; background: #ffffff; }
#colonneDroite .resume      { margin: 0 0 5px 0; color: #333333; font-size: 0.923em; /*12px*/ }
.lienVoirTous {
    font-size: 1.077em; /*14px*/
    text-align: right;
    margin: 10px 0;
}
.lienVoirTous a {
    text-decoration: none;
    color: #00437E;
    font-weight: bold;
    padding: 5px 0;
}
.lienVoirTous a:hover { text-decoration: underline; }

#colonneDroite .TPL_BANNIERE                { padding: 0; overflow: hidden; width: 100%; }
#colonneDroite .TPL_BANNIERE img            { width: 100%; }
#colonneDroite .TPL_BANNIERE a              { display: block; margin: 10px 0; }
#colonneDroite .en1clic                     { padding: 0 0 0 10px; }


/* =============================================================================
 * $7 STYLES GENERIQUES
 * ===========================================================================*/

/* $7.1 CONTENU
   ================================================================ */
#contenu #accroche .accrochePage        { font-size: 1.2em; }
#contenu #accroche .accrochePage img    { margin: 10px 0; }
#contenu.annuaire .accrochePage > p     { float: left; width: 30%; padding-right: 2%; }
#contenu.annuaire .accrochePage  img    { float: right; width: 70%; }

#contenu .TPL_ACCUEILCONTENU h2 { font-family: dejarip, arial, helvetica, sans-serif; font-weight: bold; }
#contenu .TPL_ACCUEILCONTENU a,
#contenu .TPL_SOMMAIRETHEMATIQUE a { text-decoration: none; color: #111; line-height: 20px; }
#contenu .TPL_ACCUEILCONTENU a:hover,
#contenu .TPL_SOMMAIRETHEMATIQUE a:hover { text-decoration: underline; color: #00437E; }
#contenu .item .thematique { display:none; }
#contenu .item h2.thematique { display:inline; }

#contenu h1 {
    z-index: 99;
    line-height: 1.1em;
    margin: 5px 0 5px 0;
    font-size: 2.461em; /*32px*/
    font-weight: normal;
    color: #222;
    background: white;
    letter-spacing: -0.9px;

}
#contenu ul                             { list-style-type: disc; clear: both; padding-left: 2.5em; }
#contenu ul.liste { list-style-type: none; padding-left: 0; }
#contenu ol { clear: both; padding-left: 2.5em; }
#contenu table { clear: both; background: #EFEFEF; border-collapse: collapse; }
#contenu table, #contenu table tr,
#contenu table td, #contenu table th { border: 1px solid #fff; }
#contenu table thead tr,
#contenu table thead td,
#contenu table thead th { color: #fff; background: grey; }
#contenu table tbody tr:nth-child(2n+2) { background: #ccc; }
#contenu .inner #colonneGauche h2       { font-size: 1.5em; border-top: none; }
#contenu .inner #colonneGauche h3       { font-size: 1em; font-weight: bold; margin: 2px 0 5px 2px; }
#contenu .inner #colonneGauche ul       { list-style-type: none; padding: 0; }
#contenu .item                          { margin: 5px 0 0 0; }
#contenu .item .thematique              { font-size: 0.7em; color: grey; }
#contenu .tpl .item img                 { margin: 0 auto; display: block; }

#contenu .btn-liresuite a {
    background-color: #3B3B3B;
    border-bottom: 3px solid #2A2A2A;
    border-radius: 5px;
    color: #FFFFFF !important;
    display: inline-block;
    font-weight: 400;
    line-height: 16px;
    padding: 6px 15px;
    text-decoration: none;
}
#contenu a.boutonNoir:hover,
input.submit:hover,
.action input:hover { color: #fff; background: #042e57; }

a.external,
a.popup {
    background: transparent url(images/lienExterne.gif) no-repeat right 4px;
    padding-right: 12px;
}
a.boutonNoir.external {
    background: #ffffff url(images/lienExterneBlanc.gif) no-repeat right 4px;
    padding-right: 7px;
}
a.document {
    background: transparent url(images/lienDocument.gif) no-repeat right 4px;
    margin-right: 5px;
    padding-right: 13px;
}
a.boutonNoir.document {
    background: #ffffff url(images/lienDocumentBlanc.gif) no-repeat right 4px;
    margin-right: 5px;
    padding-right: 7px;
}
#contenu .encadreGris {
    background-color: #dedede;
    padding: 15px 10px;
    display: block;
    border-radius: 2px;
}
#contenu .encadreGrisRight {
    background-color: #dedede;
    color: #333;
    padding: 15px 10px;
    display: block;
    width: 33%;
    float: right;
    border-radius: 2px;
    margin: 0 0 0 5px !important;
}
#contenu span.encadreGris {display: block;}

a.lienFlecheBleu {
    background: url("images/lien_chevron.png") no-repeat scroll left center transparent;
    color: #04579B;
    font-size: 0.85em;
    padding-left: 15px;
    text-decoration: none;
}
a.lienFlecheBleu:hover,
a.lienFlecheBleu:focus { text-decoration: underline; }

#contenu .paragraphe { margin: 0 0 0 0; }
#contenu .paragraphe h2 {
    color: #04579b;
    margin: 10px 0 6px 0;
    padding: 5px 0 0 0;
    font-weight: normal;
    line-height: 27px;
    border-top: 3px solid lightgrey;
}
#contenu .paragraphe .content h2 {
    color: #04579b;
    margin: 17px 0 5px 0;
    padding: 3px 0;
    border-top: none;
    border-bottom: 3px solid lightgrey;
}
#contenu .innerParagraphe > h2 {
    color: #04579b;
    margin: 17px 0 5px 0;
    padding: 3px 0;
    font-weight: normal;
    border-bottom: 3px solid lightgrey;
    border-top: none;
}
/*#contenu .paragraphe p,
.innerDescriptionElu > div { margin: 5px 0px 5px 0px; line-height:20px; }*/

#contenu ul.page { position: relative; display: block; }
#contenu ul.page li {
    position: relative;
    overflow: hidden;
    display: block;
    width: 49%;
    margin: 0 0 2px 0;
}

#contenu ul.page li.alter0 { clear:both; float:left; }
#contenu ul.page li.alter1 { float:right; }
#contenu ul.page li .accrochePage img { margin:5px 0; }

#contenu .notice { text-align: right; font-size: 0.923em; /*12px*/ }

.map { width: 100%; height: 400px; }
.map.gmap-mask {
    text-align: center;
    background: rgba(0, 0, 0, 0) url("images/gmap_mask.png") repeat scroll center center / cover;
}
.map.gmap-mask input {
	position: relative;
  	top: 50%;
}


/* $7.2 RESEAUX SOCIAUX
   ================================================================ */
#social                       { text-align: right; margin: 20px 0; }
#social .addthis_toolbox      { display: inline-block; }
#social .partage              { line-height: 32px; vertical-align: top; }


/* =============================================================================
 * $8 STYLES DE PARAGRAPHE
 * ===========================================================================*/
.PRS_WIDTH_50G { float: left; width: 48.39%; /* 300/620px */ clear: left; }
.PRS_WIDTH_50D { float: right; width: 48.39%; /* 300/620px */ clear: right; }

 .PRS_WIDTH_50G .groupeQuestionInner,
.PRS_WIDTH_50D .groupeQuestionInner { margin-top : 40px;}

#colonneDroite .PRS_LIEN_RAPIDE {
    float: left;
    margin: 0 2.5% 0 2.5%;
    padding: 0;
    width: 28.3%;
    text-align: center;
}
#colonneDroite .PRS_LIEN_RAPIDE h2 {
    display: block;
    text-align: center;
    font-weight: normal;
    color: white;
    background: #00437E;
    font-size: 1em;
}
#colonneDroite .PRS_LIEN_RAPIDE .content p  { font-size: 0.6em; }


/* ===================================================================
 * $9 BLOC DE NAVIGATION
 * =================================================================*/
.blocNavigation             { margin: 15px 0; text-align: center; clear: both; }
.blocNavigation.top         { border-bottom: 1px dotted #333333; padding-bottom: 15px; }
.blocNavigation.bottom      { border-top: 1px dotted #333333; padding-top: 15px; }

.resultatNavigation {
    color: #333333;
    font-size: 1em;
    font-weight: normal;
    margin: 5px 10px 5px 0;
    display: block;
}
.regletteNavigation         { display: inline-block; }
.regletteNavigation span    { float: left; margin: 0 3px 5px 0; border-radius: 2px; border: 1px solid #00437E;}
.regletteNavigation span a  {
    font-weight: bold;
    color: #000000;
    font-size: 0.923em; /*12px*/
    padding: 5px 10px;
    display: block;
    min-width: 18px;
    text-align: center;
}
.ie7 .regletteNavigation span,
.ie7 .regletteNavigation span.selected { margin: 0 3px 0 0; }
.regletteNavigation span.selected,
.regletteNavigation span.selected:hover {
    background: url("images/bgReglette.png") repeat-x left top #00437E;
    border: 1px solid #00437E;
    font-size: 0.923em; /*12px*/
    margin: 0 3px 0 0;
    padding: 5px 10px;
    border-radius: 2px;
}
.regletteNavigation span a { color: #333333; text-decoration: none; }
.regletteNavigation span a:hover,
.regletteNavigation span:hover,
.regletteNavigation span:hover a,
.regletteNavigation span a:focus {
    background: url("images/bgReglette.png") repeat-x left top #00437E;
    color: #FFFFFF;
    cursor: pointer;
    text-decoration: none;
}
.regletteNavigation span strong { color: #FFFFFF; }


/* ===================================================================
 * $10 FORMULAIRES
 * =================================================================*/
input,
textarea,
select                  { border: 1px solid #939393; padding: 5px; width: 65%; }
input[type="file"]      { padding: 0; }
select                  { background-color: #fff; }
/* input[type="text"],
select,
input[type="password"]  { -webkit-appearance: none; } */
input,
select                  { height: 35px; }
input[type=radio],
input[type=checkbox]    { border: none; }
.edition input,
.edition textarea,
.edition select         { max-width: 298px; padding-left: 0; }
.ie7 select             { width: 300px; }
.ie7 .edition select    { width: 298px; }
input.case              { border: medium none; vertical-align: middle; width: auto; }
.checkbox,
.case                   { border: medium none; height: auto; }
.cases                  { display: table; float: left; margin: 0 0 10px; width: 64%; }
.paragraphe form p      { clear: both; margin: 3px 0; padding: 4px 0; }
.paragraphe p label,
span.enLigne {
    color: #024D90;
    float: left;
    padding: 5px 0;
    margin: 0 3% 0 0;
    width: 32%;
    font-weight: bold;
    text-align: right;
}
.groupeQuestion {
    border: 1px solid #dddddd;
    margin: 0;
    padding: 20px;
    margin: 0 0 10px 0;
}
fieldset.groupeQuestion {
    background-color: #fafafa;
    padding: 50px 20px 20px;
    position: relative;
    margin: 0;
}
legend {
    position: absolute;
    top: 15px;
    font-weight: bold;
    font-size: 1.538em; /*20px*/
}
legend em {
    font-size: 13px;
    line-height: 26px;
}
#contenu a.boutonNoir,
input.submit,
.action input {
    width: auto;
    padding: 10px 30px;
    color: #04579b;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    float: right;
    background-color: #efefef;
}
#contenu a.boutonNoir { padding: 10px 15px; }
.paragraphe fieldset.groupeQuestion p.emptyLabel { padding-left: 32%; }
.paragraphe p label.enLigne,
.paragraphe ul li label.enLigne,
.paragraphe span.enLigne {
    border: 0 none;
    color: #000000;
    display: inline;
    float: none;
    font-weight: normal;
    margin: 0 10px 0 5px;
    position: relative;
    top: 3px;
}
form p.action       { text-align: right; overflow: hidden; }
form .tooltip {
    width: 260px;
    position: absolute;
    display: block;
    padding: 0px;
    z-index: 3;
    background-color: #E5EEF5;
    border: 1px solid #9ABBDC;
}
form .tooltip span { display: block; width: 240px; padding: 10px; }
form a.tooltiptrigger {
    text-decoration: none;
    margin: 0px 2px;
    padding: 0px;
    width: 14px;
    height: 14px;
    position: relative;
    top: 3px;
}
form a.tooltiptrigger:hover     { text-decoration: none; }
form a.tooltiptrigger img       { border:none; margin: 0; }
form em                         { clear: left; float: right; }

form.recherche                  { margin-top: 10px; }
form.recherche fieldset legend  {
    background: none repeat scroll 0 center transparent;
    color: #444444;
    padding: 7px 0 0;
    font-weight : bold;
}
form.recherche input.submit,
form.recherche .action input {
    background: none repeat scroll 0 0 #042E57;
    border-radius: 5px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}
form.recherche input.submit:hover,
form.recherche .action input:hover      { color: #66ccff; }

#contenu .paragraphe .tpl_formulaire h2 { border-top: 0 none; border-bottom: 3px solid lightgrey; }

/* ===================================================================
 * $11 MODULES
 * =================================================================*/

/* $11.1 EVENEMENT
   ================================================================ */

#corps.agendaList,
.agendaList h1 { background-color: #eeeeee !important; }

/* $11.1.1 LISTE ACTUALITES + LISTE RESULTATS DE RECHERCHE */
#contenu .TPL_EVENEMENTRECHERCHE h2,
#contenu .TPL_ACTUALITELISTE h2,
#contenu .TPL_EVENEMENTTHEMATIQUE h2,
#contenu .TPL_EVENEMENTSTRUCTURE h2 { border-top: 0 none; padding: 0; margin-top: 0; }
#contenu .TPL_ACTUALITELISTE .item              { padding: 5px 0 20px; border-top: 3px solid lightgrey; }
#contenu .TPL_EVENEMENTRECHERCHE .itemInfo img,
#contenu .TPL_ACTUALITELISTE .itemInfo img,
#contenu .TPL_EVENEMENTTHEMATIQUE .itemInfo img,
#contenu .TPL_EVENEMENTSTRUCTURE .itemInfo img { float: right; margin: 0  10px 10px; }
#contenu .TPL_EVENEMENTRECHERCHE .item h2 a,
#contenu .TPL_ACTUALITELISTE .item h2 a,
#contenu .TPL_EVENEMENTRECHERCHE .item h2 a:visited,
#contenu .TPL_ACTUALITELISTE .item h2 a:visited,
#contenu .TPL_EVENEMENTTHEMATIQUE .item h2 a,
#contenu .TPL_EVENEMENTSTRUCTURE .item h2 a,
#contenu .TPL_EVENEMENTTHEMATIQUE .item h2 a:visited,
#contenu .TPL_EVENEMENTSTRUCTURE .item h2 a:visited { font-weight: bold; }
#contenu .TPL_EVENEMENTRECHERCHE .item .date,
#contenu .TPL_ACTUALITELISTE .item h4.date,
#contenu .TPL_EVENEMENTTHEMATIQUE .item h4.date,
#contenu .TPL_EVENEMENTSTRUCTURE .item h4.date       { font-weight: bold; font-size: 1.077em; /*14px*/ }
#contenu .TPL_EVENEMENTRECHERCHE #EVT_DATEDEBUTPUBLICATION_form,
#contenu .TPL_EVENEMENTRECHERCHE #EVT_DATEFINPUBLICATION_form   { width: auto; }
#contenu .TPL_EVENEMENTTHEMATIQUE,
#contenu .TPL_EVENEMENTSTRUCTURE, {
    background-color: #eeeeee !important;
    padding: 10px;
}
.tpl_evenementThematique {
    background: #eeeeee !important;
    padding: 10px;
}

.tpl_evenementThematique .itemInfo img{
    padding-right: 10px;
	padding-top: 5px;
}
.tpl_evenementThematique .item{
	border-bottom:2px solid white;	
}


/* FILTRES DE RECHERCHE */
#contenu .TPL_EVENEMENTRECHERCHE  form.recherche { margin-top: 0; }
#contenu .TPL_EVENEMENTRECHERCHE  fieldset.groupeQuestion {
  background-color: transparent;
  padding: 20px 0;
  position: relative;
  margin: 0;
  border: none;
}
#contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion .innerGroupeQuestion  > div { float: left; width: 55%; }
#contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion .innerGroupeQuestion  > div + div { float: right; width: 42%; }
#contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion p.action { clear:none;}
#contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion input[type='text'] {
    width: 71%;
    height: 32px;
    margin-top: 2px;
}
#contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion span.critere {
    cursor: pointer;
    text-decoration: underline;
    margin-left: 20px;
}
#contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion span.critere > span {
    width: 14px;
}
#contenu .TPL_EVENEMENTRECHERCHE .evtContainer {
    position: relative;
    height: 100%;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres h2 {
    background: url(images/bgEvtH2Titre.png) 100% 0;
    color: #fff;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    padding: 8px 80px 6px 25px;
    width: 313px;
    height: 40px;
    position: relative;
    cursor: pointer;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .affichage:after {
    content: url(images/pictoUpActu.png);
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    right: 50px;
    top: 11px;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .affichage.closed:after {
    content: url(images/pictoDownActu.png);
}
#contenu .TPL_EVENEMENTRECHERCHE #blocFiltresEvt .main {
    display: none;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner {
    padding: 14px 16px;
    background-color: #E4E3E3;
    border-radius: 12px;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.main > div {
    background-color: #fff;
    padding: 7px;
    float: left;
    margin-right: 1.98%; /*18px*/
    height: auto;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.main > div:last-child { margin-right: 0; }
#contenu .TPL_EVENEMENTRECHERCHE .filtres .public    { width: 15.28%; /*140px*/ }
#contenu .TPL_EVENEMENTRECHERCHE .filtres .periodes  { width: 30.88%; /*140px*/ }
#contenu .TPL_EVENEMENTRECHERCHE .filtres .quartiers { width: 49.8%; /*286px*/ }
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltre {
    background-color: #ededed;
    margin-bottom: 8px;
    height: 40px;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltreTous {
    background-color: #0159a1;
    bottom: 0;
    position: absolute;
    width: 100%;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltre a,
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltreTous a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 0 20px 0 5px;
    font-size: 0.923em; /*12px*/
    height: 40px;
    line-height: 40px;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltre.selected {
    background: url(images/EvtSelectedBleu.png) no-repeat 100% 50% #ededed;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltreTous.selected {
    background: url(images/EvtSelectedBlanc.png) no-repeat 100% 50% #0159a1;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .two-colonnes .boutonFiltre {
    width: 49%;
    margin-right: 2%;
    float: left;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .two-colonnes .boutonFiltre:nth-child(even) {
    margin-right: 0;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .tree-colonnes .boutonFiltre {
    width: 32%;
    margin-right: 2%;
    float: left;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .tree-colonnes .boutonFiltre:nth-child(3n+0) {
    margin-right: 0;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltre a {
    font-family: 'Trebuchet MS', Arial, sans-serif;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltreTous a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 30px 0 10px;
    font-family: Arial, sans-serif;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div a > span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
}

#contenu .TPL_EVENEMENTRECHERCHE .entete .dateevt,
#contenu .TPL_EVENEMENTTHEMATIQUE .entete .dateevt,
#contenu .TPL_EVENEMENTSTRUCTURE .entete .dateevt {
    background: url(images/pictoDate2.png) no-repeat left 0;
    color: grey;
    padding-left: 20px;
    margin : 5px 0;
    min-height: 1.6em;

}
#contenu .TPL_EVENEMENTRECHERCHE .entete .lieuevt,
#contenu .TPL_EVENEMENTTHEMATIQUE .entete .lieuevt,
#contenu .TPL_EVENEMENTSTRUCTURE .entete .lieuevt {
    background: url(images/pictoLieu.png) no-repeat 2px 0;
    color: grey;
    padding-left: 20px;
    margin : 5px 0;
    min-height: 1.6em;
}


/* type MPT */

#contenu .TPL_EVENEMENTRECHERCHE .filtres .typesEvt .boutonFiltre {
    margin-bottom: 0;
    background-color: #939393;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(border-radius=5)";
    height: 35px;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .typesEvt .boutonFiltre.selected {
    background: url(images/EvtSelectedBlanc.png) no-repeat 100% 50% #939393;
}
#contenu .TPL_EVENEMENTRECHERCHE .filtres .typesEvt .boutonFiltre a {
    color: #fff;
    line-height: 37px;
    height: inherit;
    padding: 0 29px 0 10px;
}

/* LISTE RESULTATS DE RECHERCHE STYLE PINTEREST */
.free-wall                  { margin: 20px 0; }
.free-wall .item  {
    width: 300px;
    background-color: #fff;
}
.free-wall h2               { font-size: 1.538em; /*20px*/ padding: 5px 10px 0!important; }
.free-wall .infos           { padding: 0 10px 10px; }
.free-wall .socialEvt       { position: absolute; left: 10px; bottom: 10px; }
.free-wall .socialEvt img   { width: 16px; height: auto; }
.free-wall .socialEvt a     { padding: 0 2px; float: left; cursor: pointer; background: none; }
/* maison pour tous*/

.free-wall .TYP_MPT {
    background: url(images/bg_logofichemaisonspourtous.png) no-repeat 99% 1% #ffffff;
}



/* $11.1.2 FICHE ACTU/AGENDA */
.TPL_EVENEMENT .map                     { height: 300px; }
.TPL_EVENEMENT .spanImgContainer        { margin-bottom: 5px; }
.TPL_EVENEMENT .periodes ul.liste li h4 { background-color: #EFEFEF;  padding: 5px 0 5px 5px; }
.TPL_EVENEMENT .periodes ul.liste li .icalspan,
.TPL_EVENEMENT .resumeEvt               { padding-left:  5px; margin-right: 10px; }
.TPL_EVENEMENT .periodes ul.liste li .icalspan a { font-size: 0.923em; /*12px*/ }
.TPL_EVENEMENT .periodes ul.liste       { margin-bottom: 15px; padding-left: 0; }
.TPL_EVENEMENT .top .resume             { margin-bottom: 20px; line-height: 20px; font-weight: bold; }
.TPL_EVENEMENT .top .resumeEvt          { margin-bottom: 20px; line-height: 20px; font-weight: bold; clear: both; }
.TPL_EVENEMENT h4.date                  { font-size: 1em; }
.TPL_EVENEMENT div.mpt .blocResume           { display: inline-block; }
#contenu .TPL_EVENEMENT div.mpt h2           { border-top: none; }
.TPL_EVENEMENT div.mpt           { border-top: 3px solid lightgrey; }
.TPL_EVENEMENT img.mpt           { margin-top: 10px; }


/* Liste des agendas/actus par thématiques */
.TPL_EVENEMENTCOLONNE h2 {
    background: url(images/pictoH2Actu.png) no-repeat 10px 50% #333;
    color: white;
    padding: 8px 10px 8px 50px;
    margin: 0;
}
#colonneDroite .TPL_EVENEMENTCOLONNE .innerParagraphe {
    box-shadow:-5 -5 -10 grey;
    -webkit-box-shadow: -5 -5 -10 grey;
}
#colonneDroite .TPL_EVENEMENTCOLONNE li {
    padding: 12px 15px;
    background-color: #EEE;
    margin-bottom: 5px;
}
#colonneDroite .TPL_EVENEMENTCOLONNE li h3          { font-weight: bold; }
#colonneDroite .TPL_EVENEMENTCOLONNE h3 a,
#colonneDroite .TPL_EVENEMENTCOLONNE h3 a:active,
#colonneDroite .TPL_EVENEMENTCOLONNE h3 a:visited   { color: #042E57; }
#colonneDroite .TPL_EVENEMENTCOLONNE h3 a:hover     { color: #000; text-decoration: underline; }
.TPL_EVENEMENTCOLONNE .lienVoirTous a {
    color: #04579b;
    background: url(images/lien_chevron.png) no-repeat center left transparent;
    text-transform: uppercase;
}
.TPL_EVENEMENTCOLONNE .lienVoirTous a span { padding-left: 25px; color: #04579b; }
#colonneDroite .TPL_EVENEMENTCOLONNE .liste { margin: 0; }


/* Contenu de page archivée */
#contenu.archive,
#evtCalendarPeriode .archive,
#contenu .TPL_ACCUEILCONTENU .archive,
#contenu .TPL_ACTUALITELISTE .archive,
#contenu .TPL_EVENEMENT .archive,
#contenu .TPL_ACTUALITETHEMATIQUE .archive,
#contenu .TPL_EVENEMENTCALENDRIER .archive,
#contenu .TPL_EVENEMENTCOLONNE .archive,
#contenu .TPL_EVENEMENTLISTE .archive,
#contenu .TPL_EVENEMENTLISTE_ARCHIVE .archive,
#contenu .TPL_EVENEMENTRECHERCHE .archive,
#contenu .TPL_EVENEMENTSOMMAIRE .archive,
#contenu .TPL_EVENEMENTTHEMATIQUE .archive,
#contenu .TPL_EVENEMENTSTRUCTURE .archive,
#contenu .TPL_SOMMAIRETHEMATIQUE .archive { background: url(/uploads/Image/38/classarchive.jpg) repeat scroll 0 0 ; }


/* $11.2 METEO
   ================================================================ */
.TPL_METEOTEMPERATURE       { text-align: center; }
.TPL_METEOTEMPERATURE img   { vertical-align: bottom; }
.TPL_METEOTEMPERATURE a     { padding: 0 5%; }
.TPL_METEOTEMPERATURE span,
.TPL_METEOTEMPERATURE a.meteoLien,
.TPL_METEOTEMPERATURE a.meteoLien:visited,
.TPL_METEOTEMPERATURE a.meteoLien:active    { font-size: 0.7em; text-decoration: none; color: black; }
.TPL_METEOTEMPERATURE a.meteoLien:hover     { color: blue; text-decoration: underline; }


/* $11.3 ANNUAIRE
   ================================================================ */
#contenu .tpl .structureListe .item .handicap img,
#contenu .tpl .fiche .handicap img { float: right; margin: 0; }
.TPL_STRUCTURECARTO .titre,
.TPL_STRUCTURECATCARTO .titre,
.TPL_STRUCTURESELECTCARTO .titre,
.TPL_STRUCTURECOMMUNECARTO .titre   { font-size: 1.5em; }
.TPL_STRUCTURECARTO .liste img,
.TPL_STRUCTURECATCARTO .liste img,
.TPL_STRUCTURESELECTCARTO .liste img,
.TPL_STRUCTURECOMMUNECARTO .liste img { float: left; margin: 0 6px 0 0; position: relative; width: 16px; }
.TPL_STRUCTURECARTO li a,
.TPL_STRUCTURECATCARTO li a,
.TPL_STRUCTURESELECTCARTO li a,
.TPL_STRUCTURECOMMUNECARTO li a     { display: block; padding: 0 0 10px 0; line-height: 1em; }
.TPL_STRUCTURECOMMUNECARTO li a     { padding: 0 0 10px 0; }
.TPL_STRUCTURECARTO input.case      { margin: 0 5px 0 0; vertical-align: baseline; }

.TPL_STRUCTURECARTO .liste,
.TPL_STRUCTURECATCARTO .liste,
.TPL_STRUCTURESELECTCARTO .liste,
.TPL_STRUCTURECOMMUNECARTO .liste   {
    width: 30%;
    max-height: 600px;
    float: left;
    overflow: auto;
}

.TPL_STRUCTURECARTO .map,
.TPL_STRUCTURECATCARTO .map,
.TPL_STRUCTURESELECTCARTO .map,
.TPL_STRUCTURECOMMUNECARTO .map   { width: 70%; height: 600px; float: right; }

.avecColonneDroite .TPL_STRUCTURECARTO .liste,
.avecColonneDroite .TPL_STRUCTURECATCARTO .liste,
.avecColonneDroite .TPL_STRUCTURESELECTCARTO .liste,
.avecColonneDroite .TPL_STRUCTURECOMMUNECARTO .liste    { width: 100%; float: none; }

.avecColonneDroite .TPL_STRUCTURECARTO .map,
.avecColonneDroite .TPL_STRUCTURECATCARTO .map,
.avecColonneDroite .TPL_STRUCTURESELECTCARTO .map,
.avecColonneDroite .TPL_STRUCTURECOMMUNECARTO .map      { width: 100%; height: 500px; float: none; }

#contenu .TPL_STRUCTURECARTO ul,
#contenu .TPL_STRUCTURECATCARTO ul,
#contenu .TPL_STRUCTURECOMMUNECARTO ul,
#contenu .TPL_STRUCTURESELECTCARTO ul { margin: 0; list-style-type: none; padding-left: 0; }
.TPL_STRUCTURECARTO ul li,
.TPL_STRUCTURECATCARTO ul li,
.TPL_STRUCTURESELECTCARTO ul li,
.TPL_STRUCTURECOMMUNECARTO ul li    {
    background: none transparent;
    padding-left: 0;
    border: 0 none;
    padding: 0;
    margin: 10px 0;
}

.TPL_STRUCTURECARTO ul.listePoints li,
.TPL_STRUCTURECATCARTO ul.listePoints li,
.TPL_STRUCTURESELECTCARTO ul.listePoints li,
.TPL_STRUCTURECOMMUNECARTO ul.listePoints li    { width: 100%; }
.avecColonneDroite .TPL_STRUCTURECARTO ul.listePoints li,
.avecColonneDroite .TPL_STRUCTURECATCARTO ul.listePoints li,
.avecColonneDroite .TPL_STRUCTURESELECTCARTO ul.listePoints li,
.avecColonneDroite .TPL_STRUCTURECOMMUNECARTO ul.listePoints li    { width: 18%; float: left; }

.TPL_STRUCTURECARTO ul li.alter0,
.TPL_STRUCTURECATCARTO ul li.alter0,
.TPL_STRUCTURESELECTCARTO ul li.alter0,
.TPL_STRUCTURECOMMUNECARTO ul li.alter0    { clear: left; }
.TPL_STRUCTURECARTO ul ul,
.TPL_STRUCTURECATCARTO ul ul,
.TPL_STRUCTURECOMMUNECARTO ul ul    { margin: 0; }
.TPL_STRUCTURECARTO .liste span     { color: #00437E; cursor: pointer; }
.TPL_STRUCTURECARTO ul li           { padding-left: 12px; }
.TPL_STRUCTURECARTO .listeInner > ul > li { padding-left: 0; }
.TPL_STRUCTURECARTO label           { margin-left: 3px; }
.TPL_STRUCTURECARTO label:hover     { color: #00437E; cursor: pointer; }
.TPL_STRUCTURECARTO span.plie       { background: url(images/plus.gif) no-repeat center left; padding-left: 15px; }
.TPL_STRUCTURECARTO span.deplie     { background: url(images/minus.gif) no-repeat center left; padding-left: 15px; }
.TPL_STRUCTURE .map                 { height: 300px; margin: 0 0 10px 0; }

#contenu .TPL_STRUCTURE .boutonNoir                 { float: none; }
#contenu .TPL_STRUCTURE .coordonnees .boutonNoir    { margin: 0; }

#contenu .structureListe .item {
    position: relative;
    -webkit-box-shadow: 0 1px 2px grey;
    box-shadow: 0 1px 2px grey;
    margin-bottom: 20px;
    padding: 10px;
}
#contenu .paragraphe .structureListe h2 { padding-right: 24%; margin: 0 0 20px; border: 0 none; }
#contenu .structureListe h3 {
    color: grey;
    font-size: 1em; /*13px*/
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: right;
    width: 22%;
}
#contenu .structureListe .description ul    { clear: none; }
#contenu .structureListe .coordonnees       { clear: both; }
#contenu .structureListe h3:before          { content: url(images/pictoThematique.png); margin-right: 5px; }
#contenu .tpl .structureListe .item img     { margin: 0 0 0 10px; }
.coordonnees {
    font-weight:normal;
    font-size:1em;
    color: #111;
    background: #efefef;
    padding: 10px;
}
.coordonnees .lien                          { float: right; max-width: 50%; margin-left: 10px; text-align: center; }
#contenu .coordonnees a.boutonNoir {
    border: 1px solid #939393;
    border-radius: 5px;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    color: #111111;
    margin-left: 10px;
}
#contenu .coordonnees a.boutonNoir:hover    { color: #ffffff; }
#contenu .TPL_STRUCTUREGENERAL .item > img  { max-width: 21% }


/* $11.4 ELUS
   ================================================================ */

/* $11.4.1 FICHE ELU */
#contenu .TPL_ELU_FICHE .fonction { margin-right: 115px; }
#contenu .TPL_ELU_FICHE img       { float: left; margin: 0 15px 10px 0; width: 25%; padding: 0 10px 0 0; }
#contenu .TPL_ELU_FICHE
#contenu .TPL_ELU_FICHE .action input,
#contenu .TPL_ELU_FICHE input.submit      { float: none; }


/* $11.4.2 FICHE ORGANISME */
#contenu .TPL_ORGANISME_FICHE .representantsOrganisme > ul              { width: 45%; float: left; clear: none; }
#contenu .TPL_ORGANISME_FICHE .representantsOrganisme > ul.titulaires   { margin-right: 10%; }


/* $11.4.3 LISTE ELU */
#contenu .TPL_ELULISTE .item,
#contenu .TPL_CONSEILJEUNESSE .item {
    background: none transparent;
    border: 2px solid #efefef;
    padding: 10px;
    width: 32%;
    margin: 5px 2% 10px 0;
    float: left;
    clear: none;
}
#contenu .TPL_ELULISTE .item.open               { background-color: #e5eef6; border: 2px solid #9abbda; }
#contenu .TPL_ELULISTE .item.right,
#contenu .TPL_CONSEILJEUNESSE .item.right       { margin: 5px 0 10px 0; }
#contenu .TPL_CONSEILJEUNESSE .item.left        { clear: both; }
#contenu .TPL_ELULISTE .item .itemInfo ul,
#contenu .TPL_ELULISTE .item .itemInfo li       { background: none transparent; margin: 0; line-height: 1.334em; }
#contenu .TPL_ELULISTE .item h2,
#contenu .TPL_CONSEILJEUNESSE .item h2          { margin-top: 0; padding-top: 0; border: 0 none; }
#contenu .TPL_ELULISTE .item img,
#contenu .TPL_CONSEILJEUNESSE .item img         { margin: 15px auto; }
#contenu .TPL_ELULISTE .item .itemInfo p        { margin: 0; }
#contenu .TPL_ELULISTE .item .commissions       { margin: 10px 0 0; }
#contenu .TPL_ELULISTE li.clear                 { border-width: 0; padding: 0; margin: 0; background: 0 none; }
#contenu .TPL_ELULISTE .itemDesc {
    display: none;
    padding: 0;
    background: none #e5eef6;
    border: 1px solid #9abbda;
    font-size: 1em;
}
#contenu .TPL_ELULISTE .tpl_eluListe .item > h3 {
    line-height: 1em;
    color: #666666;
    font-size: 1rem;
    margin: 0;
}
#contenu .TPL_ELULISTE .maire .item             { background:none transparent; border: 0; font-size: 1em; padding: 0; width: 100%; }
#contenu .TPL_ELULISTE .maire img               { float: left; margin: 0 15px 10px 0; width: 25%; }
#contenu .TPL_ELULISTE .maire .itemInfo         { float: left; }
#contenu .TPL_ELULISTE .itemDesc                { padding: 0; background: none #e5eef6; border: 1px solid #9abbda; font-size: 1em; }
#contenu .TPL_ELULISTE .innerDescriptionElu     { padding: 15px; }
#contenu .TPL_ELULISTE .innerDescriptionElu .lienPlus {display: block; margin: 0 0 10px; font-size:.9em; color:grey; }
#contenu .TPL_ELULISTE .innerDescriptionElu ul,
#contenu .TPL_ELULISTE .innerDescriptionElu p   { margin: 0 0 10px; background-color: transparent; }
#contenu .TPL_ELULISTE .innerDescriptionElu li  { border: 0 none; line-height: 14px; padding: 0 0 4px 17px; }


/* $11.5 DIAPORAMA
   ================================================================ */
.diaporama {
    padding:4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 1px 3px grey;
    -webkit-box-shadow: 0 1px 3px grey;
 }
.diaporama .container                       { overflow: hidden; }
#diaporamaImgPrincipale .owl-stage-outer    { z-index: 1; }
#diaporamaImgPrincipale .caption            { padding: 5px 0; text-align: center; }
#diaporamaImgPrincipale .owl-controls       { position: absolute; top: 43%; width: 100%; }
#diaporamaImgPrincipale .owl-prev           { float: left; padding: 10px 15px; }
#diaporamaImgPrincipale .owl-next           { float: right; padding: 10px 15px; }
#diaporamaImgPrincipale .owl-nav            { position: relative; z-index: 2; }
#diaporamaImgPrincipale .owl-nav img        { display: block; }
#diaporamaMiniatures .item                  { border: 1px solid #dddddd; padding: 5px; cursor: pointer; }
#diaporamaMiniatures .item.selected         { border: 2px solid #999999; }


/* $11.6 EJOURNAL
   ================================================================ */
#contenu .TPL_EJOURNALLISTE ul.liste li {
    width: 32%;
    margin: 0 2% 10px 0;
    text-align: center;
    float: left;
    overflow: hidden;
    background-color: #efefef;
}
#contenu .TPL_EJOURNALLISTE ul.liste li.right           { margin: 0 0 10px 0; }
#contenu .TPL_EJOURNALLISTE ul.liste li h4              { font-size: 1.154rem; /*15px*/ }
#contenu .TPL_EJOURNALLISTE ul.liste li .mini           { height: 150px;  }
#contenu .TPL_EJOURNALLISTE ul.liste li .lien a,
#contenu .TPL_EJOURNALLISTE ul.liste li .lien a:hover   { text-decoration: none; display: inline-block; }
.TPL_EJOURNALDERNIER h2         { margin-bottom: 5px; }
.TPL_EJOURNALDERNIER .date      { margin: 5px 0; }



/* $11.65 EPUBLICATION
   ================================================================ */
#contenu .TPL_EPUBLICATIONLISTE ul.liste li {
    width: 32%;
    margin: 0 2% 10px 0;
    text-align: center;
    float: left;
    overflow: hidden;
    background-color: #efefef;
}
#contenu .TPL_EPUBLICATIONLISTE ul.liste li.right           { margin: 0 0 10px 0; }
#contenu .TPL_EPUBLICATIONLISTE ul.liste li h4              { font-size: 1.154rem; /*15px*/ }
#contenu .TPL_EPUBLICATIONLISTE ul.liste li .mini           { height: 150px;  }
#contenu .TPL_EPUBLICATIONLISTE ul.liste li .lien a,
#contenu .TPL_EPUBLICATIONLISTE ul.liste li .lien a:hover   { text-decoration: none; display: inline-block; }
.TPL_EPUBLICATIONDERNIER h2         { margin-bottom: 5px; }
.TPL_EPUBLICATIONDERNIER .date      { margin: 5px 0; }

/* $11.7 WEBCAM
   ================================================================ */
.TPL_WEBCAM_VIGNETTE ul         { display: block; width: 100%; position: relative; }
.TPL_WEBCAM_VIGNETTE ul li      { float: left; width: 50%; list-style-type:none; }
.TPL_WEBCAM_VIGNETTE ul li img  { text-align: center; width: 50%; }
.TPL_WEBCAM_VIGNETTE .left,
.TPL_WEBCAM_VIGNETTE .right     { width: 10%; float: left; cursor: pointer; }
.TPL_WEBCAM_VIGNETTE .left      { display: none; visibility: hidden; background: url(images/left_mini.png) no-repeat center; }
.TPL_WEBCAM_VIGNETTE .right     { display: none; background: url(images/right_mini.png) no-repeat center; }
.TPL_WEBCAM_VIGNETTE .container { width: 80%; text-align: center; float: left; overflow: hidden; position: relative; }


/* $11.8 COMPTE CITOYEN
   ================================================================ */

/* $11.8.1 COMMUN */
.logout                                     { position: relative; bottom: 1px; margin: 0; }
.logout .boutonNoir                         { background-color: #EEEEEE; border: 1px solid #015190; }
#contenu .paragraphe .classCitoyen h2       { border: none; padding: 0; margin: 0; font-weight: bold; }
#contenu .paragraphe .classCitoyen h3       { margin-top: 0; }

/* $11.8.2 TPL_COMPTECITOYENMENU */
.tpl_compteCitoyen h3 { margin-bottom : 20px}
#contenu .tpl_compteCitoyen ul            { padding: 0; margin: 0; float: left; }
.classCitoyen                               { padding: 2.13%; /*20/940px*/ border: 1px solid #015190; }
.tpl_compteCitoyen #cc_menu ul li                  { float: left; list-style: outside none none; margin: 0 10px 0 0; }
.tpl_compteCitoyen #cc_menu ul li a {text-decoration : none; border: none;}
.tpl_compteCitoyen #cc_menu ul li a:hover {text-decoration : underline; border: none;}
.tpl_compteCitoyen #cc_menu ul li span {
    padding: 10px 20px;
    display: block;
    font-size: 1.231em; /*16px*/
    background-color: #efefef;
    color : #04579b;
}
.tpl_compteCitoyen #cc_menu ul li.selected span       { font-weight: bold; color: #ffffff; background-color: #024D90; }
.tpl_compteCitoyen #cc_menu ul li.selected span:hover { color: #ffffff; }

.tpl_compteCitoyen .blocModeEmploiBambineo  { margin-bottom: 20px; }
.tpl_compteCitoyen .logout                  { position: relative; bottom: -3px; margin: 0; }
.tpl_compteCitoyen .btn_form {float: right; font-weight: bold; color : #04579b; margin-top: 15px; cursor: pointer;}
.tpl_compteCitoyen .btn_form:hover {text-decoration : underline;}
.tpl_compteCitoyen .formAddChild {clear : both; padding : 0; margin-top : 10px;}
.tpl_compteCitoyen .formAddChild fieldset.groupeQuestion {background : none; border : none; padding: 20px;}
.tpl_compteCitoyen .formAddChild fieldset.groupeQuestion label {width : 40%}
.tpl_compteCitoyen .formAddChild fieldset.groupeQuestion label a {float : right; margin-left: 5px;}
.tpl_compteCitoyen .formAddChild fieldset.groupeQuestion input {width : 57%}


.tpl_compteCitoyen #content { clear : both;}
/* $11.8.3 TPL_COMPTECITOYENLOGIN */
.tpl_compteCitoyenLogin a.boutonNoir    { border: 1px solid #939393; background-color: #F0F0F0; line-height: normal; }
#contenu .tpl_compteCitoyen a.boutonNoir.dcnx { color : red;}

/* $11.8.4 TPL_COMPTECITOYENSERVICELISTE */
.tpl_compteCitoyenServiceListe.classCitoyen     { background-color: #ffffff; }
#contenu .tpl_compteCitoyenServiceListe .item {
    background-color: #e6f4f7;
    padding: 2.13%; /*20/940px*/
    border-radius: 5px;
    margin-bottom: 30px;
}
#contenu .tpl_compteCitoyenServiceListe .item h4                    { font-size: 1.846em; /*24px*/ color: #04579b; }
#contenu .tpl_compteCitoyenServiceListe .item img                   { margin: 0; }

#contenu .tpl_compteCitoyenServiceListe .item .floatleft            { float: left; width: 50%; padding-right: 20px; border-right: 1px solid #024d90; }
#contenu .tpl_compteCitoyenServiceListe .item .floatleft > input    { margin-bottom: 15px; }
#contenu .tpl_compteCitoyenServiceListe .item .floatleft fieldset.groupeQuestion {
    background-color: #fafafa;
    border: 0 none;
    padding: 0;
}
#contenu .tpl_compteCitoyenServiceListe .item .floatleft fieldset.groupeQuestion label      { width: 44%; }
#contenu .tpl_compteCitoyenServiceListe .item .floatleft fieldset.groupeQuestion input      { width: 53%; }
#contenu .tpl_compteCitoyenServiceListe .item .floatleft fieldset.groupeQuestion label img  { display: inline; }

#contenu .tpl_compteCitoyenServiceListe .item .floatright                       { float: right; width: 50%; padding-left: 20px; }
#contenu .tpl_compteCitoyenServiceListe .item .floatright > ul                  { padding: 0 0 0 15px; width: 100%;}
#contenu .tpl_compteCitoyenServiceListe .item .floatright li                    { position: relative; margin-bottom: 10px; }
#contenu .tpl_compteCitoyenServiceListe .item .floatright .cpt_cit_supprimer    { position: absolute; top: 0; right: 0; }
#contenu .tpl_compteCitoyenServiceListe .item .floatright .libelle              { margin-bottom: 10px; }
#contenu .tpl_compteCitoyenServiceListe .item .floatright .libelle span         { color: #024d90; font-weight: bold; }
#contenu .tpl_compteCitoyenServiceListe .item .floatright .cpt_cit_element      {
    color: #04579b;
    font-weight: bold;
    padding: 10px 15px;
    text-decoration: none;
    width: auto;
    border: 1px solid #939393;
    background-color: #ddddde;
    display: block;
    float: left;
    margin: 0 10px 10px 0;
}
#contenu .tpl_compteCitoyenServiceListe .item .floatright .cpt_cit_element:hover { background-color: #042e57; color: #fff; }


/* $11.8.5 TPL_COMPTECITOYENGESTION */
#contenu .tpl_compteCitoyenLogin, #contenu .tpl_compteCitoyenGestion { background-color: #d9e7f1; }
#contenu .tpl_compteCitoyenGestion #tpl_compteCitoyenGestionFormID fieldset.groupeQuestion { background-color: transparent; border: 0 none; }
#contenu .tpl_compteCitoyenGestion #tpl_compteCitoyenGestionFormID .supprimer img { vertical-align: bottom; margin-right: 5px; }

/* ===================================================================
 * $12 TEMPLATES
 * =================================================================*/

/* $12.1 TPL_ACCUEILCAROUSEL
   ================================================================ */
#carouselAlaune .item { margin: 0; }
#carouselAlaune .owl-controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}
#carouselAlaune .owl-nav img        { display: block; }
#carouselAlaune .owl-prev           { float: left; margin: 10px 15px; }
#carouselAlaune .owl-next           { float: right; margin: 10px 15px; }
#carouselAlaune .owl-dots           { line-height: 50px; }
#carouselAlaune .owl-dots .owl-dot  { display: inline-block; vertical-align: middle; }
#carouselAlaune .owl-dots .owl-dot span {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 30px;
    display: block;
    height: 10px;
    margin: 5px;
    transition: opacity 200ms ease 0s;
    width: 10px;
    border: 2px solid #fff;
}
#carouselAlaune .owl-dots .owl-dot.active span,
#carouselAlaune .owl-dots .owl-dot:hover span { background: none repeat scroll 0 0 #0356a6; }
.TPL_ACCUEILCAROUSEL { position: relative; }
.TPL_ACCUEILCAROUSEL .playPause       {
    position: absolute;
    bottom: 0;
    left: 200px;
    z-index: 1;
    line-height: 50px;
    display: none;
}
.TPL_ACCUEILCAROUSEL:hover .playPause { display: block; }
.TPL_ACCUEILCAROUSEL .playPause .play,
.TPL_ACCUEILCAROUSEL .playPause .stop {
    padding-left: 30px;
    display: block;
    color: #ffffff;
    cursor: pointer;
}
.TPL_ACCUEILCAROUSEL .playPause .play   { display: none; background: url(images/pictoPlay.png) no-repeat 0 50%; }
.TPL_ACCUEILCAROUSEL .playPause .stop   { background: url(images/pictoPause.png) no-repeat 0 50%; }
.TPL_ACCUEILCAROUSEL .caption           { display: none; }


/* $12.2 TPL_ACCUEILCONTENU
   ================================================================ */
.TPL_ACCUEILCONTENU h2 { font-size: 1.538em; /*20px*/ }


/* $12.3 TPL_THEMATIQUEARTICLELISTE
   ================================================================ */
.tpl_thematiqueArticleListe                             { text-align: right; border: 1px solid lightgrey; padding: 10px; margin-bottom: 10px; background-color: #fafafa; }
#contenu .tpl_thematiqueArticleListe h3,
#contenu .tpl_thematiqueArticleListe ul                 { display: inline; }
#contenu .tpl_thematiqueArticleListe ul li              { display: inline; color: #00437E; margin: 0; padding: 0 10px; border-right: 1px solid #00437e; }
#contenu .tpl_thematiqueArticleListe ul li:first-child  { padding-top: 0; }
#contenu .tpl_thematiqueArticleListe ul li:last-child   { border: 0 none; }
#contenu .tpl_thematiqueArticleListe ul li a,
#contenu .tpl_thematiqueArticleListe ul li a:visited,
#contenu .tpl_thematiqueArticleListe ul li a:active     { text-decoration: none; color: #00437E; font-weight: lighter; }
#contenu .tpl_thematiqueArticleListe ul li a:hover      { text-decoration: underline; }


/* $12.4 TPL_SOMMAIRETHEMATIQUE / TPL_SOMMAIREPAGE
   ================================================================ */
#contenu .TPL_SOMMAIRETHEMATIQUE .ancres,
#contenu .TPL_SOMMAIREPAGE .ancres              { color: grey; }
#contenu .TPL_SOMMAIRETHEMATIQUE .ancres h2,
#contenu .TPL_SOMMAIREPAGE h2                   { display: none; }
#contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire,
#contenu .TPL_SOMMAIREPAGE ul {
    position: relative;
    overflow: hidden;
    padding: 20px 15px 10px;
    margin: 10px 0;
    list-style: none;
    background: #efefef;
}
#contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire .item,
#contenu .TPL_SOMMAIREPAGE ul li {
    float: left;
    width: 32%;
    margin: 0 2% 10px 0;
    background: url(images/mini_fleche_bleue.png) no-repeat left 2px transparent;
}
#contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire .item:nth-child(3n),
#contenu .TPL_SOMMAIREPAGE ul li:nth-child(3n)      { margin: 0 0 10px 0; }
#contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire .item:nth-child(3n+1),
#contenu .TPL_SOMMAIREPAGE ul li:nth-child(3n+1)    { clear: both; }
#contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire .item a,
#contenu .TPL_SOMMAIREPAGE ul a {
    line-height: 1.1em;
    padding-left: 10px;
    color: #042E57;
    text-decoration: none;
    display: list-item;
}
#contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire .item a:hover,
#contenu .TPL_SOMMAIREPAGE ul a:hover               { text-decoration: underline; }
#contenu .TPL_SOMMAIRETHEMATIQUE .ancres a          { color: #00437E; }
#contenu .TPL_SOMMAIRETHEMATIQUE .ancres a:hover    { color: #000; text-decoration: underline; }


/* $12.5 TPL_WEBCAM_VIGNETTE
   ================================================================ */
#carouselWebcam                 { width: 80%; margin: 0 auto; position: relative; }
#carouselWebcam .caption        { display: block; margin: 10px 0; text-align: center; }
#carouselWebcam .owl-controls   { position: absolute; width: 100%; top: 35%; }
#carouselWebcam .owl-prev       {
    float: left;
    margin: 10px 15px;
    position: relative;
    left: -65px;
    background: url(images/) no-repeat 0 50%;
}
#carouselWebcam .owl-next       {
    float: right;
    margin: 10px 15px;
    position: relative;
    right: -65px;
    background: url(images/) no-repeat 0 50%;
}

/* $12.6 TPL_WEBCAM_HISTO
   ================================================================ */
#contenu .TPL_WEBCAM_HISTO .webcamHaut          { text-align: center; }
#contenu .TPL_WEBCAM_HISTO .liste               { margin: 0; }
#contenu .TPL_WEBCAM_HISTO .item {
    float: left;
    width: 22%;
    margin: 0 4% 20px 0;
}
#contenu .TPL_WEBCAM_HISTO .item:nth-child(4n)  { margin: 0 0 20px 0; }
#contenu .TPL_WEBCAM_HISTO .heure               { text-align: center; }
#contenu .liensWebcam                           { text-align: right; margin: 10px 0; }
#contenu .lienSousWebcam                        { margin-left: 20px; }


/* $12.7 TPL_SONDAGE
   ================================================================ */
#contenu .TPL_SONDAGE .innerParagraphe h2 { font-size: 1.538em; /*20px*/ }
#contenu .TPL_SONDAGE ul {
    list-style: outside none none;
    padding: 0;
}
#contenu .TPL_SONDAGE li    { padding-bottom: 10px; overflow: hidden; clear: both; }
#contenu .TPL_SONDAGE li p  { margin: 0; }
#contenu .TPL_SONDAGE .resultatGraphique {
    float: left;
    width: 75%;
    border: 1px solid #EAEAEA;
    padding: 1px;
}
#contenu .TPL_SONDAGE .resultatGraphique div {
    background: #A6EBED;
    height: 12px;
}
#contenu .TPL_SONDAGE .resultatNumerique {
    color: #bf0008;
    float: right;
    font-weight: bold;
    text-align: right;
    width: 20%;
}
#contenu .TPL_SONDAGE .resultat { clear: both; }


/* $12.8 TPL_TELESERVICES
   ================================================================ */
#contenu .tpl_teleservices ul.step {
    margin: 20px 0 0 0;
    padding: 0;
}
#contenu .tpl_teleservices ul.step li {
    display: inline-block;
    list-style: none;
    background: lightgrey;
    font-size: 1.334em;
    padding: 10px;
    text-align: center;
    min-width: 150px;
    font-family: dejarip, arial, helvetica, sans-serif;
}
#contenu .tpl_teleservices ul.step li.selected {
    background: #04579b;
    font-weight: bold;
    color: #fff;
}
#contenu .tpl_teleservices .liensRecepisse a:last-child {
    margin-left: 20px;
}


/* $12.9 TPL_RECHERCHEANTIDOT
   ================================================================ */
.TPL_RECHERCHEANTIDOT form.recherche .groupeQuestion {
    background-color: #efefef;
    border: none;
}
.TPL_RECHERCHEANTIDOT form.recherche p label {
    width: auto;
}
.TPL_RECHERCHEANTIDOT form.recherche p .cases {
    width: auto;
}
.TPL_RECHERCHEANTIDOT form.recherche p .outer {
    position: relative;
    display: block;
}
.TPL_RECHERCHEANTIDOT form.recherche p #searchSubmit {
    position: absolute;
    background: url(images/searchLoupe.png) no-repeat 50% 50%;
    height: 22px;
    width: 20px;
    border: none;
    right: 10px;
    top: 5px;
}
.TPL_RECHERCHEANTIDOT form.recherche p #searchStringTPL {
    padding-right: 30px;
    width: 100%;
}
.TPL_RECHERCHEANTIDOT em.match {
    text-decoration: underline;
}
.TPL_RECHERCHEANTIDOT .filtreAntidot {
    float: left;
    margin-right: 2%;
    width: 25%;
    background-color: #efefef;
}
.TPL_RECHERCHEANTIDOT .filtreAntidot > p {
    background-color: #04579b;
    color: #ffffff;
    font-size: 1.231em; /*16px*/
    font-weight: 700;
    margin: 0;
    padding: 10px 0;
    text-align: center;
}
#contenu .TPL_RECHERCHEANTIDOT .filtreAntidot ul {
    margin: 0;
    padding: 10px;
    list-style: inside none none;
}
.TPL_RECHERCHEANTIDOT .filtreAntidot ul li {
    border-bottom: 1px solid #ffffff;
    margin-bottom: 10px;
    padding: 0 0 10px 0;
    font-size: 0.9em;
}
.TPL_RECHERCHEANTIDOT .filtreAntidot ul li:last-child {
    border-bottom: 0;
    margin: 0;
    padding-bottom: 5px;
}
.TPL_RECHERCHEANTIDOT .filtreAntidot ul li a.selected {
    font-weight: 700;
}

.TPL_RECHERCHEANTIDOT .resultatsAntidot {
    float: right;
    width: 73%;
}
.TPL_RECHERCHEANTIDOT .resultatsAntidot .item {
    border-top: 3px solid #d3d3d3;
    padding: 5px 0 20px;
}
#contenu .TPL_RECHERCHEANTIDOT .resultatsAntidot h2 {
    border-top: 0 none;
    margin-top: 0;
    padding: 0;
    font-size: 1.538em; /*20px*/
}
#contenu .TPL_RECHERCHEANTIDOT .resultatsAntidot h3 {
    color: #999;
    font-size: 1em;
    font-weight: normal;
}
#contenu .TPL_RECHERCHEANTIDOT .resultatsAntidot .itemInfo img {
    float: right;
    margin: 0 0 10px 10px;
    max-width: 220px;
    max-height: 120px;
}
.ui-autocomplete {
    border: 1px solid #979797 !important;
    width: 205px;
    background-color: #ffffff;
    padding: 5px;
    z-index: 1000;
}
.ui-autocomplete .ui-state-hover {
    height:18px;
    border-color: #5591B5;
    color:#D67324;
    background:#E6ECF2;
    border-width: 1px;
    border-style: solid;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 100%;
    cursor: pointer;
    cursor: hand;
}
.ui-autocomplete li {
    padding: 5px;
    margin-bottom: 2px;
}
.ui-autocomplete li:nth-child(odd) {
    background-color: #eee;
}
.ui-autocomplete li:nth-child(even) {
    background-color: #ddd;
}
.ui-autocomplete li a {
    cursor: pointer;
}
.ui-helper-hidden-accessible {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-autocomplete a {
    display:block;
    width: 100%;
    padding: 0;
    line-height: none;
    font-size: 12px!important;
}

.ui-menu .ui-menu-item a { padding: 0!important; }

#bandeauHaut .recherche {
    float: right;
    padding-right: 10px;
    width: 27.5%; /* 300/960px */
}
#bandeauHaut .fixed .recherche { width: 20.5%; }
#bandeauHaut #formRecherche .ui-autocomplete-input {
    padding: 5px 30px 5px 5px;
    color: grey;
    border-radius: 2px;
    border-width: 0;
    width: 100%;
    height: 30px;
    margin-top: 7px;
}

#bandeauHaut #formRecherche .search {
    width: 16px;
    height: 30px;
    position: absolute;
    right: 10px;
    border: none;
    //background: transparent url(images/search.png) no-repeat 50% 50%;
    cursor: pointer;
    margin-top: 7px;
}
/* Tablette */
@media screen and (max-width: 768px) {
    #bandeauHaut .fixed .recherche { width: 18%; }
}
@media screen and (max-width: 768px) {
    #bandeauHaut .recherche { width: 20%; /* 300/960px */ }
}
/* Mobile */
@media screen and (max-width: 640px) {
    #bandeauHaut .recherche,
    #bandeauHaut .fixed .recherche { width: 79.375%; /*254/320px*/}
}


/* $12.10 TPL_CHAINEYOUTUBEACCUEIL
   ================================================================ */
#contenu [class*="TPL_CHAINEYOUTUBEACCUEIL"] {
    margin-bottom: 30px;
}
#contenu [class*="TPL_CHAINEYOUTUBEACCUEIL"] a.boutonNoir {
    float: none;
}
#contenu div[class*='TPL_CHAINEYOUTUBE'] .item {
    width: 31%;
    float: left;
    margin-right: 3.5%;
}
#contenu div[class*='TPL_CHAINEYOUTUBE'] .item:nth-child(3n) {
    margin-right: 0;
}
#contenu div[class*='TPL_CHAINEYOUTUBE'] .item:nth-child(3n+1) {
    clear: both;
}
#contenu div[class*='TPL_CHAINEYOUTUBE'] .item a {
    text-decoration: none;
}
#contenu div[class*='TPL_CHAINEYOUTUBE'] .item a:hover {
    text-decoration: underline;
}
#contenu [class*="TPL_CHAINEYOUTUBEACCUEIL"] .voirPlus {
    margin-bottom: 30px;
}
#contenu div[class*='TPL_CHAINEYOUTUBE'] ul.liste {
    margin: 20px 0;
}
div[class*='TPL_CHAINEYOUTUBE'] .lienVoirTous a {
    color: #04579b;
    background: url(images/lien_chevron.png) no-repeat center left transparent;
}
div[class*='TPL_CHAINEYOUTUBE'] .lienVoirTous a span { padding-left: 25px; color: #04579b; }

#contenu div[class*='TPL_CHAINEYOUTUBE'] .videoLibelle {
    font-size: 1.538em; /*20px*/
    margin: 10px 0;
    font-weight: normal;
    color: #042e57;
}


/* $12.11 TPL_PETITEANNONCELISTE
   ================================================================ */
.TPL_PETITEANNONCELISTE form {
    margin-bottom: 20px;
}
#contenu .TPL_PETITEANNONCELISTE a.boutonNoir {
    margin-bottom: 20px;
    display: inline-block;
    float: none;
    color: #fff;
    background: #042e57;
}
#contenu .TPL_PETITEANNONCELISTE a.boutonNoir:hover {
    color: #04579b;
    background-color: #efefef;
}
#contenu .TPL_PETITEANNONCELISTE .item {
    padding: 5px 0 20px;
    border-top: 3px solid #d3d3d3;
    width: 48%;
    float: left;
    margin-right: 4%;
}
#contenu .TPL_PETITEANNONCELISTE .item:nth-child(even) {
    margin-right: 0;
}
#contenu .TPL_PETITEANNONCELISTE .item:nth-child(odd) {
    clear: both;
}

#contenu .TPL_PETITEANNONCELISTE .itemInfo img {
    float: right;
    margin: 0 0 10px 10px;
    max-height: 120px;
    max-width: 220px;
}
#contenu .paragraphe.TPL_PETITEANNONCELISTE .itemInfo h2 {
    border-top: 0 none;
    font-size: 1.538em;
    margin-top: 0;
    padding: 0;
}
#contenu .TPL_PETITEANNONCELISTE .itemInfo .savoirPlus {
    text-align: right;
    clear: both;
}
#contenu .TPL_PETITEANNONCELISTE .itemInfo .savoirPlus .boutonNoir {
    margin: 0;
}
.TPL_PETITEANNONCELISTE .itemInfo .date {
    margin: 0 0 10px;
    font-size: 12px;
}
.TPL_PETITEANNONCELISTE .encart {
    border: 2px solid #e9e9e9;
    overflow: hidden;
    padding: 10px 20px;
}
.TPL_PETITEANNONCELISTE .encart p {
    margin: 5px 0;
}
.TPL_PETITEANNONCELISTE .encart p span {
    display: inline-block;
    font-weight: 700;
}
.TPL_PETITEANNONCELISTE .depot {
    text-align: center;
}



/* $12.12 TPL_PETITEANNONCE
   ================================================================ */
.TPL_PETITEANNONCE .date {
    margin: 0 0 18px;
    text-align: right;
}
.TPL_PETITEANNONCE .main {
    margin-bottom: 20px;
}
.TPL_PETITEANNONCE .thumbs {
    text-align: center;
    margin-bottom: 20px;
}
.TPL_PETITEANNONCE .thumb {
    display: inline-block;
    margin: 0 10px;
}
.TPL_PETITEANNONCE .details {
    margin-bottom: 20px;
}
.TPL_PETITEANNONCE .details p {
    display: table;
    margin: 0;
    width: 100%;
}
.TPL_PETITEANNONCE .details p:nth-child(even) {
    background-color: #efefef;
}
.TPL_PETITEANNONCE .details p > span {
    display: table-cell;
    padding: 8px 5px;
}
.TPL_PETITEANNONCE .details p > span:first-child {
    width: 30%;
    font-weight: 700;
}
.TPL_PETITEANNONCE .details p > span:last-child {
    width: 65%;
}

/* $12.13 TPL_PETITEANNONCEDEPOT
   ================================================================ */
.TPL_PETITEANNONCEDEPOT form {
    margin: 0 0 20px;
}
.TPL_PETITEANNONCEDEPOT #PEA_DATEDISPO {
    width: auto;
}
#contenu .TPL_PETITEANNONCEDEPOT  a.boutonNoir {
    float: none;
    display: inline-block;
}

/* $12.14 TPL_SIMULATEURDEVANTURE
   ================================================================ */

.tpl_simulateurDevanture table tr.entete1 th{    
    background: #000;
    color: #FFF;
}

.tpl_simulateurDevanture table tr.entete3 th{    
    text-align : center;
}

.tpl_simulateurDevanture table tr.entete3 th em{    
    text-align : center;
    font-size : 0.9rem;
    float : none;
}

.tpl_simulateurDevanture table input {
    width: 100%;
    max-width: 100%;
    text-align: right;
}

.tpl_simulateurDevanture .resultat label {
    width: auto;
}
.tpl_simulateurDevanture .resultat span {
    background-color: #008000;
    color: #ffffff;
    float: left;
    font-weight: 700;
    padding: 5px 10px;
}

/* $12.15 TPL_FAQLISTE
   ================================================================ */
.TPL_FAQLISTE .reponse {
    padding: 1px 0;
}
.TPL_FAQLISTE .question a:hover {
    text-decoration: none;
    color: inherit;
}
.TPL_FAQLISTE .question a:hover {
    text-decoration: none;
    color: inherit;
}

/* Classes page spécifiques****************************************************/

.ficheSpecial #contenu h1 { font-size: 1.8rem; }

.showhide               { cursor: pointer; padding-right: 25px !important; }
.showhide.closed ,
.showhide.open { background: url("images/picto-acc-moins-MTP.png") no-repeat center right transparent; }

.showhide.close { background: url("images/picto-acc-plus-MTP.png") no-repeat center right transparent; }

#bandeauFlashInfo {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(40, 40, 45, 0.8);
    z-index: 100;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
}
#bandeauFlashInfo .tpl_alerte {
    font-size: 16px;
    font-weight: 400;
    flex-basis: 80%;
    min-width: 80%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    position: relative;
    padding-bottom: 35px;
    box-shadow: 1px 1px 10px 4px rgba(0,0,0,0.2);
}
#bandeauFlashInfo .tpl_alerte .description {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 20px;
    line-height: 1.2em;
}
#bandeauFlashInfo .tpl_alerte .description a {
    color: darkorange;
    font-weight: 500;
}
#bandeauFlashInfo .tpl_alerte .description a:hover {
    color: red;
}
#bandeauFlashInfo .tpl_alerte .titre {
    font-size: 22px;
    display: block;
    width: 100%;
    background: rgba(0,0,0,0.1);
    text-align: center;
    padding: 6px;
    font-weight: 500;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
#bandeauFlashInfo .tpl_alerte #btnFermerBandeauFlashInfo {
    position: absolute;
    background: url("images/ico_alerte.png") no-repeat center center transparent;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 6px;
    background-size: 20px auto;
    border: none;
    font-size: 0;
}

/* ===================================================================
 * $13 MEDIA QUERIES
 * =================================================================*/

/* Tablette */
@media screen and (max-width: 800px) {
    #bandeauFlashInfo .tpl_alerte {
        min-width: 95%;
        flex-basis: 95%;
    }

    /* ===================================================================
     * $1 LAYOUT GENERAL
     * =================================================================*/
    .tablette-hide  { display: none; }
    .tablette-show  { display: block; }

    .avecColonneDroite #contenu,
    #colonneDroite  { float: none; width: 100%; margin-top: 10px; }


    /* ===================================================================
     * $4 BANDEAU HAUT
     * =================================================================*/


    /* =============================================================================
     * $6 COLONNE DROITE
     * ===========================================================================*/
    #colonneDroite .TPL_BANNIERE a { width: 48.39%; }
    #colonneDroite .TPL_BANNIERE a:nth-child(odd) { float: left; clear: left; }
    #colonneDroite .TPL_BANNIERE a:nth-child(even) { float: right; clear: right; }

    /* $7.1 CONTENU
       ================================================================ */
    #contenu #accroche .accrochePage img    { width: 100%; }
    #contenu h1                             { font-size: 1.846em; /* 24px*/ }
    #contenu.annuaire .accrochePage > p,
    #contenu.annuaire .accrochePage  img    { float: none; width: 100%; padding: 0; }

    /* =============================================================================
     * $10 FORMULAIRES
     * ===========================================================================*/
    .paragraphe p label,
    span.enLigne            { width: 24%; }
    input, textarea, select { width: 73%; }

    /* $11.1 EVENEMENT
    ================================================================ */
    /* LISTE RESULTATS DE RECHERCHE STYLE PINTEREST */
    #contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion .innerGroupeQuestion > div { float: none; width: 100%; margin-bottom: 14px; }
    #contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion .innerGroupeQuestion > div + div { float: none; width: 100%; }
    #contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion input[type='text'] { width: 77.2%; }

    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.typesEvt     { width: 48%; margin-right: 2%; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.public       { width: 24%; margin-right: 2%; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.periodes     { width: 24%; margin-right: 0; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.quartiers    { width: 100%; margin: 15px 0 0; height: 252px; }

    /* $11.6 EJOURNAL
       ================================================================ */
    #contenu .TPL_EJOURNALLISTE ul.liste li                 { width: 23.5%; }
    #contenu .TPL_EJOURNALLISTE ul.liste li.right           { margin: 0 2% 10px 0; }
    #contenu .TPL_EJOURNALLISTE ul.liste li:nth-child(4n)   { margin: 0 0 10px 0; }
    #contenu .TPL_EJOURNALLISTE ul.liste li:nth-child(4n+1) { clear: both; }
    #contenu .TPL_EJOURNALLISTE ul.liste li .lien a img     { width: 24px; }

    /* $11.65 EPUBLICATION
       ================================================================ */
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li                 { width: 23.5%; }
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li.right           { margin: 0 2% 10px 0; }
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li:nth-child(4n)   { margin: 0 0 10px 0; }
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li:nth-child(4n+1) { clear: both; }
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li .lien a img     { width: 24px; }


    /* $12.4 TPL_SOMMAIRETHEMATIQUE / TPL_SOMMAIREPAGE
       ================================================================ */
    .TPL_SOMMAIRETHEMATIQUE .item .accrochePage img { float: none; }


    /* $12.6 TPL_WEBCAM_HISTO
       ================================================================ */
    #contenu .TPL_WEBCAM_HISTO .item                { width: 18%; margin: 0 2.5% 20px 0; }
    #contenu .TPL_WEBCAM_HISTO .item:nth-child(4n)  { margin: 0 2.5% 20px 0; }
    #contenu .TPL_WEBCAM_HISTO .item:nth-child(5n)  { margin: 0 0 20px 0; }

}

/* Mobile */
@media screen and (max-width: 640px) {

    /* ===================================================================
     * $1 LAYOUT GENERAL
     * =================================================================*/
    .mobile-hide        { display: none; }
    .mobile-show        { display: block; }
    .txt_mobile_hidden  { border: 1px solid #000; padding: 5px; margin: 5px; border-radius: 2px; }
    #corps              { padding: 10px 5px; }



    /* ===================================================================
     * $2 INITIALISATION CHARTE GRAPHIQUE GENERALE DU PROJET
     * =================================================================*/
    h2 { font-size: 1.538em; /*20px*/ }
    h3 { font-size: 1.384em; /*18px*/ }


    /* ===================================================================
     * $4 BANDEAU HAUT
     * =================================================================*/
    #header                 { background: none #0087B7 !important; color: #ffffff; }
    #Accueil h1,
    #logo a span            { color: #ffffff; }

    /* $4.2 MENU
       ================================================================ */
    body                    { background: none !important; }
    .openMenu #bandeauHaut,
    .openMenu #fixedHeader  { position: static; }
    .openMenu #pull         { position: relative; z-index: 1; }
    .openMenu .owl-carousel { z-index: 0 !important; }

    .menuPrincipal  { display: none; }
    #pull {
        display: block;
        float: left;
        padding: 0 10px;
        background: url(images/pictoMenuMobile.png) no-repeat 50% 50% #333333;
        width: 55px;
        height: 44px;
    }
    #lateralContainer {
        background: none #333333;
        display: block;
        left: -82%;
        position: absolute;
        top: 0;
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
        width: 82%;

    }
    #document {
        left: 0;
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }
    .openMenu #lateralContainer {
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
        left: 0;
    }
    .openMenu #document {
        left: 82%;
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }
    .openMenu #document:after {
        background-color: rgba(255, 255, 255, 0.9);
        content: " ";
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .menuLateral            { padding: 35px 10px 10px; margin: 0; }
    .menuLateral .nav1 h2,
    .menuLateral .nav1 h2 a { color: #ffffff; font-size: 18px; text-transform: uppercase; }
    .menuLateral .home span { padding: 0 30px 12px 0; display: block; }

    .megaMenuJS,
    .megaMenu {
        position: static;
        background: none transparent;
        border: 0 none;
        left: auto;
        width: auto;
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .menuLateral .nav1                  { border-bottom: 1px solid #ffffff; }
    .menuLateral .nav1:last-child       { border-bottom: 0 none; }
    .menuLateral .nav1 h2               { margin: 0; padding: 0; }
    .menuLateral .nav1 h2 a             { margin: 0; padding: 12px 18px 12px 0; display: block; }
    .menuLateral .nav1.parent h2 a      { background: url(images/pictoDownActu.png) no-repeat 100% 50%; }
    .menuLateral .nav1.open h2 a        { background: url(images/pictoUpActu.png) no-repeat 100% 50%; }
    .menuLateral .nav1 h2 a:hover       { text-decoration: none; }
    .menuLateral .menuNiv2              { margin: 0; }
    .menuLateral .menuNiv2 a            { color: #dbdbdb; text-decoration: none; display: block;}
    .menuLateral .menuNiv2 h3,
    .menuLateral .menuNiv2 .lienImage   {
        font-size: 1.231em; /*16px*/
        color: #dbdbdb;
        margin: 0;
        padding: 12px 18px 12px 10px;
        font-weight: bold;
        background: url(images/pictoMobileDown.png) no-repeat 100% 50%;
        cursor: pointer;
    }
    .menuLateral .menuNiv2 .lienImage   { background: none; }
    .menuLateral .menuNiv2 h3.open      { background: url(images/pictoMobileUp.png) no-repeat 100% 50%; }
    .menuLateral .colonne ul            { display: none; margin: 0; }
    .menuLateral .colonne ul > li a     { padding: 12px 12px 12px 30px; }
    .menuLateral .colonne .signes       { display: block; }
    .menuLateral .colonne .signes a     { font-size: 1.231em; /*16px*/ padding: 12px 12px 12px 10px; font-weight: bold; }

    /* Menu standard */
    ul.menuNiv2 > li                    { float: none; width: auto; margin-right: 0; }

    /* ===================================================================
     * $5 BANDEAU BAS
     * =================================================================*/
    #bandeauBasInner        { display: block; padding: 10px; }
    #bandeauBas #adresse,
    #bandeauBas #telephone  {  display: block;  width: 100%; border: 0 none; }
    #bandeauBas #adresse    { padding: 0; border-bottom: 1px solid #111111; }
    #bandeauBas #telephone  { padding: 10px 0 0; border-top: 1px solid #555555; }

    #bandeauBas .lienPiedPage       { text-align: center; padding: 10px; }
    #bandeauBas .lienPiedPage li    { float: none; display: inline-block; padding: 5px 0; }
    #bandeauBas .lienPiedPage li a  { padding: 0 10px; display: inline; }


    /* =============================================================================
     * $6 COLONNE DROITE
     * ===========================================================================*/
    #colonneDroite .TPL_BANNIERE { display: none; }


    /* =============================================================================
     * $7 STYLES GENERIQUES
     * ===========================================================================*/

    /* $7.1 CONTENU
       ================================================================ */
    #contenu .encadreGrisRight { float: none; width: auto; margin: 0 !important; }


    /* =============================================================================
     * $8 STYLES DE PARAGRAPHE
     * ===========================================================================*/
    .PRS_WIDTH_50G,
    .PRS_WIDTH_50D { float: none; width: 100%; clear: none; }


    /* ===================================================================
     * $10 FORMULAIRES
     * =================================================================*/
    input,
    textarea,
    select          { width: 100%; }
    .paragraphe p label,
    span.enLigne    { display: block; width: 100%; line-height: 20px; }
    legend          { font-size: 1.384em; /*18px*/ }
    .cases          { width: auto; }
    form p.action,
    p.action        { text-align: center; }
    /* #contenu a.boutonNoir, */
    input.submit,
    .action input   { float: none; }
    .groupeQuestion { padding: 20px 10px; }
    fieldset.groupeQuestion { padding: 50px 10px 20px; }
    .paragraphe p label,
    span.enLigne            { text-align: left; }



    /* ===================================================================
     * $11 MODULES
     * =================================================================*/

    /* $11.1 EVENEMENT
       ================================================================ */
    .TPL_EVENEMENTCOLONNE h2         {
        border-radius: 5px;
        background: url(images/pictoH2Actu.png) no-repeat 10px 50% #04579B;
        color: white;
        padding: 8px 10px 8px 50px;
        margin: 0;
    }

    /* $11.1.1 LISTE ACTUALITES + LISTE RESULTATS DE RECHERCHE */
    #contenu .TPL_EVENEMENTRECHERCHE .itemInfo img,
    #contenu .TPL_ACTUALITELISTE .itemInfo img      { float: none; margin: 10px auto; }



    /* $11.1.2 FICHE ACTU/AGENDA */
    .TPL_EVENEMENT .map                     { margin-bottom: 10px; }

    /* LISTE RESULTATS DE RECHERCHE STYLE PINTEREST */
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.main > div   { width: 100%; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div              { width: 100% !important; margin-right: 0 0 15px !important; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.public       { height: 205px; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner > div.periodes     { height: 255px; }

    /* $11.3 ANNUAIRE
       ================================================================ */
    .coordonnees .lien                  { float: none; max-width: none; }
    #contenu .coordonnees a.boutonNoir  { margin: 0; float: none; }
    .TPL_STRUCTURECARTO                 { position: relative; }
    .TPL_STRUCTURECARTO .liste,
    .TPL_STRUCTURECATCARTO .liste,
    .TPL_STRUCTURESELECTCARTO .liste,
    .TPL_STRUCTURECOMMUNECARTO .liste,
    .TPL_STRUCTURECARTO .map,
    .TPL_STRUCTURECATCARTO .map,
    .TPL_STRUCTURESELECTCARTO .map,
    .TPL_STRUCTURECOMMUNECARTO .map     { float: none; width: 100%; margin-top: 1px; }
    .TPL_STRUCTURECARTO .map,
    .TPL_STRUCTURECATCARTO .map,
    .TPL_STRUCTURESELECTCARTO .map,
    .TPL_STRUCTURECOMMUNECARTO .map     { height: 300px; }
    #contenu .TPL_STRUCTURECARTO #toggleTitle,
    #contenu .TPL_STRUCTURECATCARTO #toggleTitle,
    #contenu .TPL_STRUCTURESELECTCARTO #toggleTitle,
    #contenu .TPL_STRUCTURECOMMUNECARTO #toggleTitle {
        color: #fff;
        margin: 0;
        padding: 8px 10px 8px 50px;
        background: url(images/pictoFilter.png) no-repeat 10px 50% #04579b;
        border-radius: 5px 5px 0 0 ;
    }
    #contenu .TPL_STRUCTURECARTO #toggleTitle span,
    #contenu .TPL_STRUCTURECATCARTO #toggleTitle span,
    #contenu .TPL_STRUCTURESELECTCARTO #toggleTitle span,
    #contenu .TPL_STRUCTURECOMMUNECARTO #toggleTitle span       { color: #fff; }

    #contenu .TPL_STRUCTURECATCARTO .toggleList,
    #contenu .TPL_STRUCTURESELECTCARTO .toggleList,
    #contenu .TPL_STRUCTURECARTO .toggleList,
    #contenu .TPL_STRUCTURECOMMUNECARTO .toggleList             { display: none; }

    #contenu .TPL_STRUCTURECATCARTO #toggleTitle span,
    #contenu .TPL_STRUCTURESELECTCARTO #toggleTitle span,
    #contenu .TPL_STRUCTURECARTO #toggleTitle span,
    #contenu .TPL_STRUCTURECOMMUNECARTO #toggleTitle span {
        display: block;
        background: url(images/pictoDownActu.png) no-repeat 100% 50%;
    }

    #contenu .TPL_STRUCTURECATCARTO #toggleTitle.open span,
    #contenu .TPL_STRUCTURESELECTCARTO #toggleTitle.open span,
    #contenu .TPL_STRUCTURECARTO #toggleTitle.open span,
    #contenu .TPL_STRUCTURECOMMUNECARTO #toggleTitle.open span {
        background: url(images/pictoUpActu.png) no-repeat 100% 50%;
    }

    #contenu .paragraphe .structureListe h2         { padding-right: 0; }
    #contenu .structureListe h3                     { position: static; width: auto; }
    #contenu .structureListe .item img.alignright   { float: none; width: 100%; margin: 0; }


    /* $11.4 ELUS
       ================================================================ */

    /* $11.4.1 FICHE ELU  */
    #contenu .TPL_ELU_FICHE .fonction { font-size: 1.154em; /*15px*/ }


    /* $11.4.2 FICHE ORGANISME */
    #contenu .TPL_ORGANISME_FICHE .representantsOrganisme > ul              { width: 100%; float: none; }
    #contenu .TPL_ORGANISME_FICHE .representantsOrganisme > ul.titulaires   { margin-right: 0; }


    /* $11.4.3 LISTE ELU */
    #contenu .TPL_ELULISTE .item,
    #contenu .TPL_CONSEILJEUNESSE .item        { width: 100%; margin: 5px 0 10px 0; }
    #contenu .TPL_ELULISTE .item img,
    #contenu .TPL_ELULISTE .maire img,
    #contenu .TPL_ELULISTE .maire .itemInfo    { margin: 15px auto; float: none; width: auto; }

    /* $11.5 DIAPORAMA
       ================================================================ */
    #diaporamaMiniatures                { display: none !important; }

    /* $11.6 EJOURNAL
       ================================================================ */
    #contenu .TPL_EJOURNALLISTE ul.liste li                 { width: 49%; }
    #contenu .TPL_EJOURNALLISTE ul.liste li:nth-child(4n),
    #contenu .TPL_EJOURNALLISTE ul.liste li:nth-child(even) { margin: 0 0 10px 0; }
    #contenu .TPL_EJOURNALLISTE ul.liste li h4              { font-size: 1em; /*13px*/ }

    /* $11.65 EPUBLICATION
       ================================================================ */
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li                 { width: 49%; }
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li:nth-child(4n),
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li:nth-child(even) { margin: 0 0 10px 0; }
    #contenu .TPL_EPUBLICATIONLISTE ul.liste li h4              { font-size: 1em; /*13px*/ }

    /* $11.8 COMPTE CITOYEN
       ================================================================ */
    .tpl_compteCitoyen > ul,
    .tpl_compteCitoyen ul.step { float: none; }


    /* $11.8.2 TPL_COMPTECITOYENMENU */
    .tpl_compteCitoyen > ul li a    { padding: 10px 12px; }
    .tpl_compteCitoyen .logout      { display: none; }


    /* $11.8.4 TPL_COMPTECITOYENSERVICELISTE */
    #contenu .tpl_compteCitoyenServiceListe .item .floatleft,
    #contenu .tpl_compteCitoyenServiceListe .item .floatright { float: none; width: 100%; padding: 0; border: 0 none; }
    #contenu .tpl_compteCitoyenServiceListe .item .floatleft fieldset.groupeQuestion label,
    #contenu .tpl_compteCitoyenServiceListe .item .floatleft fieldset.groupeQuestion input { width: 100%; float: none; }
    #contenu .TPL_COMPTECITOYENSERVICELISTE .logout .boutonNoir { float: right; }


    /* $11.8.5 TPL_COMPTECITOYENSERVICELISTE */
    #contenu .TPL_COMPTECITOYENGESTION .logout .boutonNoir { float: right; }



    /* ===================================================================
     * TEMPLATES
     * =================================================================*/

    /* $12.1 TPL_ACCUEILCAROUSEL
       ================================================================ */
    .TPL_ACCUEILCAROUSEL { background: #f1f1f1; }
    .TPL_ACCUEILCAROUSEL .playPause { display: none; }
    .TPL_ACCUEILCAROUSEL .caption   {
        display: block;
        position: relative;
        bottom: 0;
        text-decoration: none;
        padding: 10px;
        color: #111111;
    }
    .TPL_ACCUEILCAROUSEL .caption:hover { text-decoration: none; }
    .TPL_ACCUEILCAROUSEL .caption .title {
        display: block;
        font-size: 1.538em; /*20px*/
        margin-bottom: 5px;
    }

    /* $12.4 TPL_SOMMAIRETHEMATIQUE / TPL_SOMMAIREPAGE
       ================================================================ */
    #contenu .TPL_SOMMAIRETHEMATIQUE ul.sommaire .item,
    #contenu .TPL_SOMMAIREPAGE ul li {
        float: none;
        width: 100%;
        margin: 0 0 10px 0;
    }
    #contenu .TPL_SOMMAIRETHEMATIQUE .item { float: none; width: 100%;   }


    /* $12.5 TPL_WEBCAM_HISTO
       ================================================================ */
    #contenu .TPL_WEBCAM_HISTO .item                    { width: 48%; margin: 0 4% 20px 0; }
    #contenu .TPL_WEBCAM_HISTO .item:nth-child(5n)      { margin: 0 4% 20px 0; }
    #contenu .TPL_WEBCAM_HISTO .item:nth-child(even)    { margin: 0 0 20px 0; }


    /* $12.9 TPL_RECHERCHEANTIDOT
       ================================================================ */
    .TPL_RECHERCHEANTIDOT .filtreAntidot,
    .TPL_RECHERCHEANTIDOT .resultatsAntidot             { float: none; width: 100%; margin: 0; }
    #contenu .TPL_RECHERCHEANTIDOT .filtreAntidot ul    { display: none; }
    .TPL_RECHERCHEANTIDOT .filtreAntidot > p            { cursor: pointer; }
    .TPL_RECHERCHEANTIDOT .filtreAntidot > p:after {
        content: url(images/pictoDownActu.png);
        display: inline-block;
        vertical-align: middle;
        margin-left: 15px;
    }
    .TPL_RECHERCHEANTIDOT .filtreAntidot > p.open:after      { content: url(images/pictoUpActu.png); }


    /* $12.10 TPL_CHAINEYOUTUBEACCUEIL
       ================================================================ */
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item {
        width: 49%;
        margin-right: 2%;
    }
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item:nth-child(3n) {
        margin-right: 2%;
    }
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item:nth-child(even) {
        margin-right: 0;
    }
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item:nth-child(3n+1) {
        clear: none;
    }
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item:nth-child(odd) {
        clear: both;
    }

    /* $12.11 TPL_PETITEANNONCELISTE
       ================================================================ */
    #contenu .TPL_PETITEANNONCELISTE .itemInfo img {
        float: none;
        margin: 0 auto 10px;
        max-height: none;
        max-width: 100%;
    }
    .TPL_PETITEANNONCELISTE .encart p span {
        margin-bottom: 5px;
    }
    #contenu .TPL_PETITEANNONCELISTE .itemInfo .savoirPlus {
        text-align: center;
    }

    /* $12.12 TPL_PETITEANNONCE
       ================================================================ */
    .TPL_PETITEANNONCE .thumb img.IMF_MEDIUM {
        max-width: 125px;
    }
    .TPL_PETITEANNONCE .details .description {
        display: block;
    }
    .TPL_PETITEANNONCE .details p.description > span {
        display: block;
        width: 100%;
    }

    /* $12.14 TPL_SIMULATEURDEVANTURE
   ================================================================ */
    .tpl_simulateurDevanture .tableau {
        padding-top: 50px;
        position: relative;
        display: block;
    }
    .tpl_simulateurDevanture .tr {
        display: block;
        float: left;
        width: 50%;
    }
    .tpl_simulateurDevanture .th,
    .tpl_simulateurDevanture .td {
        width: 100%;
        display: block;
        min-height: 48px;
    }
    .tpl_simulateurDevanture .th {
        width: 100%;
        padding: 15px 5px 5px;
    }
    .tpl_simulateurDevanture .th.masquer {
        display: none;
    }
    .tpl_simulateurDevanture .td.deplacer {
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 50%;
    }
    .tpl_simulateurDevanture .td.total {
        padding-right: 10px;
    }
    .tpl_simulateurDevanture .td input {
        width: 100%;
    }

}

/** FORMULAIRE DYNAMIQUE - Récépissé **/

.TPL_FORMULAIRE .lienRecepisse {
    float : right;
    background-color: #CCC;
    padding: 15px;
    margin-right : 50px;
}
.TPL_FORMULAIRE .lienRecepisse a {
    font-size: 1.375em;
    margin-left: 10px;
    text-decoration : none;
    color : #000;
}

/* Mobile android*/
@media screen and (max-width: 480px) {
    /* LISTE RESULTATS DE RECHERCHE STYLE PINTEREST */
    #contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion input[type='text'] { width: 100%; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .tree-colonnes .boutonFiltre {
        width: 49%;
        margin-right: 2%;
        float: left;
    }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .tree-colonnes .boutonFiltre:nth-child(3n+0) { margin-right: 2%; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .inner .tree-colonnes .boutonFiltre:nth-child(2n+0) { margin-right: 0; }
    #contenu .TPL_EVENEMENTRECHERCHE .filtres .boutonFiltreTous {
        display: inline-block;
        width: 100%;
        position: static;
    }
    #contenu .TPL_EVENEMENTRECHERCHE .evtContainer { min-height: inherit !important; }

    /* $12.11 TPL_PETITEANNONCELISTE
       ================================================================ */
    #contenu .TPL_PETITEANNONCELISTE .item {
        width: 100%;
        float: none;
        margin-right: 0;
    }

}

/* Mobile iphone*/
@media screen and (max-width: 320px) {
    #contenu .TPL_EVENEMENTRECHERCHE fieldset.groupeQuestion .innerGroupeQuestion > div + div { margin-bottom: 0px; }
    .typesEvt.inlineBlock { width: 100%; }
    span.inlineBlock.critere { margin-top: 20px; }

    /* $12.10 TPL_CHAINEYOUTUBEACCUEIL
       ================================================================ */
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    #contenu div[class*='TPL_CHAINEYOUTUBE'] .item img{
        margin: 0;
    }
}

/* BOUTONS NOUVEU STYLE */
a.bouton2018 {
  background: #04579b;
  border:1px solid #04579b;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  display:inline-block;
}

a.bouton2018:hover {
  background: white;
  color:#04579b;
  border:1px solid #efefef;
  /* background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db); */
  text-decoration: none;
}

a.s-orange{
	background: #ea5b0c;
	border:1px solid #ea5b0c;
}
a.s-rose{
	background: #ee6ea7;
	border:1px solid #ee6ea7;
}
a.s-rouge{
	background: #e40613;
	border:1px solid #e40613;
}

/* Iframe des menus cantines : pour qu'elle s'allonge sur un écran étroit */
#iframe-cantine{
	height: 390px;
}
@media (max-width: 750px){
	#iframe-cantine{
		height: 1130px;
	}
}

.paragraphe.accrochePage img{
    width:100%;
}

#Accueil #contenu .innerParagraphe > h2{
    font-weight:bold;
    font-size:1.538em;
}

.vert{
	background-color: lightgreen;
}
.jaune{
	background-color: gold;
}
.rouge{
	background-color: tomato;
}
.gris{
	background-color: grey;
}
.grisclair{
	background-color: #ccc;
}